@kubex/zinc 1.0.19 → 1.0.21

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

@@ -1,5 +1,6 @@
 import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {ifDefined} from "lit/directives/if-defined.js";
 import {property} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 import ZnDropdown from "../dropdown";
@@ -40,6 +41,8 @@ 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;
+  @property({type: Boolean}) isolated = false;
 
   private _preItems: NodeListOf<Element>;
   private _postItems: NodeListOf<Element>;
@@ -126,16 +129,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 +174,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');
@@ -185,6 +196,17 @@ export default class ZnNavbar extends ZincElement {
     //console.log("Showing More")
   }
 
+  private handleClick = (e: MouseEvent) => {
+    const path = e.composedPath();
+    const tabAttr = this.isolated ? 'data-tab' : 'tab';
+    const li = path.find(el => el instanceof HTMLElement && el.tagName === 'LI' && (el.hasAttribute(tabAttr) || el.hasAttribute('tab-uri'))) as HTMLElement;
+
+    if (li) {
+      e.stopPropagation();
+      this.emit('zn-select', {detail: {item: li}});
+    }
+  };
+
   render() {
     if (!this.navigation) {
       this.navigation = [];
@@ -197,13 +219,19 @@ export default class ZnNavbar extends ZincElement {
     }
 
     return html`
-      <div class="navbar__container">
-        <ul class="${classMap({
+      <div class="${classMap({
+        'navbar__container': true,
+        'navbar__container--stacked': this.stacked,
+        'navbar__container--icon-bar': this.iconBar
+      })}">
+        <ul @click="${this.handleClick}" 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) => {
@@ -217,7 +245,11 @@ export default class ZnNavbar extends ZincElement {
                 <li class="${classMap({'active': item.active})}" tab-uri="${item.path}">${content}</li>`;
             }
             return html`
-              <li class="${classMap({'active': item.active})}" tab="${item.tab}">${content}</li>`;
+              <li class="${classMap({'active': item.active})}"
+                  tab="${ifDefined(!this.isolated ? item.tab : undefined)}"
+                  data-tab="${ifDefined(this.isolated ? item.tab : undefined)}">
+                ${content}
+              </li>`;
           })}
           <li class="more">
             <zn-dropdown placement="bottom-end" id="extended-dropdown">

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/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');

package/src/components/translations/translations.component.ts

@@ -0,0 +1,239 @@
+import {classMap} from 'lit/directives/class-map.js';
+import {FormControlController, validValidityState} from '../../internal/form';
+import {HasSlotController} from '../../internal/slot';
+import {html, unsafeCSS} from 'lit';
+import {property, state} from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+import ZnInlineEdit from '../inline-edit';
+import ZnInput from '../input';
+import ZnNavbar from '../navbar';
+import type {PropertyValues} from 'lit';
+import type {ZincFormControl} from '../../internal/zinc-element';
+import type {ZnMenuSelectEvent} from '../../events/zn-menu-select';
+import type {ZnSelectEvent} from "../../events/zn-select";
+
+import styles from './translations.scss';
+
+export default class ZnTranslations extends ZincElement implements ZincFormControl {
+  static styles = unsafeCSS(styles);
+  static dependencies = {
+    'zn-navbar': ZnNavbar,
+    'zn-input': ZnInput,
+    'zn-inline-edit': ZnInlineEdit
+  };
+
+  private readonly formControlController: FormControlController = new FormControlController(this);
+  private readonly hasSlotController = new HasSlotController(this, 'label');
+
+  @property() name = '';
+  @property() value = '{"en":""}';
+  @property() label: string = '';
+  @property({type: Boolean, reflect: true}) disabled = false;
+  @property({type: Boolean, reflect: true}) required = false;
+
+  @property({type: Object}) languages: Record<string, string> = {
+    'en': 'English'
+  };
+  @property({type: Object}) values: Record<string, string> = {};
+
+  @state() private _activeLanguage = '';
+
+  get validity(): ValidityState {
+    return validValidityState;
+  }
+
+  get validationMessage() {
+    return '';
+  }
+
+  checkValidity() {
+    return true;
+  }
+
+  getForm() {
+    return this.formControlController.getForm();
+  }
+
+  reportValidity() {
+    return true;
+  }
+
+  setCustomValidity() {
+    // no-op
+  }
+
+  protected firstUpdated() {
+    this.formControlController.updateValidity();
+  }
+
+  willUpdate(changedProperties: PropertyValues) {
+    let processValue = changedProperties.has('value');
+    let processValues = changedProperties.has('values');
+
+    if (processValue && processValues) {
+      const isValueDefault = this.value === '{"en":""}';
+      const isValuesEmpty = Object.keys(this.values).length === 0;
+
+      if (isValueDefault && !isValuesEmpty) {
+        processValue = false;
+      } else if (!isValueDefault && isValuesEmpty) {
+        processValues = false;
+      } else if (this.hasAttribute('values') && !this.hasAttribute('value')) {
+        processValue = false;
+      } else if (this.hasAttribute('value') && !this.hasAttribute('values')) {
+        processValues = false;
+      }
+    }
+
+    if (processValue) {
+      try {
+        const newValues = JSON.parse(this.value || '{}') as Record<string, string>;
+        if (JSON.stringify(newValues) !== JSON.stringify(this.values)) {
+          this.values = newValues;
+        }
+      } catch (e) {
+        // no-op
+      }
+    }
+
+    if (processValues) {
+      this.value = JSON.stringify(this.values);
+
+      // Ensure active language is valid
+      if (!this._activeLanguage || !Object.prototype.hasOwnProperty.call(this.values, this._activeLanguage)) {
+        const keys = Object.keys(this.values);
+        if (keys.length > 0) {
+          this._activeLanguage = keys[0];
+        } else {
+          this._activeLanguage = '';
+        }
+      }
+    }
+  }
+
+  private handleLanguageAdd = (e: ZnMenuSelectEvent) => {
+    const element = e.detail.element as HTMLElement;
+    const languageCode = element.getAttribute('data-path');
+    if (languageCode) {
+      // Add new language with empty string
+      this.values = {...this.values, [languageCode]: ''};
+      this._activeLanguage = languageCode;
+      this.updateValue();
+    }
+  };
+
+  private handleNavbarClick = (e: ZnSelectEvent) => {
+    e.stopPropagation();
+    const li = e.detail.item as HTMLElement;
+    if (li) {
+      const tab = li.getAttribute('tab') || li.getAttribute('data-tab');
+      if (tab) {
+        this._activeLanguage = tab;
+        this.requestUpdate();
+      }
+    }
+  };
+
+  private handleValueUpdate = (e: CustomEvent) => {
+    const target = e.target as (ZnInput | ZnInlineEdit);
+    if (this._activeLanguage) {
+      const newValue: string = target.value as string;
+      if (newValue !== this.values[this._activeLanguage]) {
+        this.values = {...this.values, [this._activeLanguage]: newValue};
+        this.updateValue();
+      }
+    }
+  };
+
+  private updateValue() {
+    this.value = JSON.stringify(this.values);
+    this.emit('zn-change');
+    this.emit('zn-input');
+  }
+
+  private handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      if (event.target instanceof ZnInlineEdit) {
+        return;
+      }
+
+      const hasModifier = event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+
+      if (!hasModifier && !event.defaultPrevented && !event.isComposing) {
+        this.formControlController.submit();
+      }
+    }
+  };
+
+  private handleSubmit = () => {
+    this.formControlController.submit();
+  };
+
+  render() {
+    const availableLanguages = Object.entries(this.languages)
+      .filter(([code]) => !Object.prototype.hasOwnProperty.call(this.values, code))
+      .map(([code, name]) => ({
+        title: name,
+        type: 'dropdown',
+        path: code
+      }));
+
+    const navigation = Object.keys(this.values).map(code => ({
+      title: this.languages[code] || code,
+      active: code === this._activeLanguage,
+      tab: code
+    }));
+
+    const currentTranslation = this.values[this._activeLanguage];
+    const useInlineEdit = currentTranslation && currentTranslation.length > 0;
+
+    const hasLabelSlot = this.hasSlotController.test('label');
+    const hasLabel = this.label ? true : hasLabelSlot;
+
+    return html`
+      <div part="form-control"
+           class="${classMap({
+             'translations': true,
+             'form-control': true,
+             'form-control--medium': true,
+             'form-control--has-label': hasLabel,
+           })}"
+           @keydown="${this.handleKeyDown}">
+        <label part="form-control-label" class="form-control__label" for="input"
+               aria-hidden=${hasLabel ? 'false' : 'true'}>
+          <slot name="label">${this.label}</slot>
+        </label>
+
+        <zn-navbar
+          .navigation="${navigation}"
+          .dropdown="${availableLanguages}"
+          name="${this.name}-translations-navbar"
+          isolated
+          @zn-select="${this.handleNavbarClick}"
+          @zn-menu-select="${this.handleLanguageAdd}"
+          manual-add-items
+        ></zn-navbar>
+        <div class="input-container">
+          ${this._activeLanguage ? html`
+            ${useInlineEdit ? html`
+              <zn-inline-edit
+                .value=${currentTranslation}
+                name="${this.name}"
+                @zn-change="${this.handleValueUpdate}"
+                @zn-input="${this.handleValueUpdate}"
+                @zn-submit="${this.handleSubmit}"
+              ></zn-inline-edit>
+            ` : html`
+              <zn-input
+                .value="${currentTranslation || ''}"
+                name="${this.name}"
+                placeholder="Enter translation..."
+                @zn-change="${this.handleValueUpdate}"
+              ></zn-input>
+            `}
+          ` : ''}
+        </div>
+      </div>
+    `;
+  }
+}

package/src/components/translations/translations.scss

@@ -0,0 +1,15 @@
+@use "../../form-control";
+
+:host {
+  display: block;
+}
+
+.translations {
+  display: flex;
+  flex-direction: column;
+  gap: var(--zn-spacing-small);
+}
+
+.input-container {
+  padding: var(--zn-spacing-small) 0;
+}

package/src/components/translations/translations.test.ts

@@ -0,0 +1,39 @@
+import '../../../dist/zn.min.js';
+import { expect, fixture, html } from '@open-wc/testing';
+import type ZnTranslations from './translations.component';
+
+describe('<zn-translations>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html` <zn-translations></zn-translations> `);
+    expect(el).to.exist;
+  });
+
+  it('should have default language en', async () => {
+    const el = await fixture<ZnTranslations>(html` <zn-translations></zn-translations> `);
+    expect(el.languages).to.have.property('en');
+    // We expect values to default to en: '' if strictly following requirements,
+    // or at least the UI should show it.
+    // Based on my plan, I will implement auto-population of 'en'.
+    expect(el.values).to.have.property('en');
+  });
+
+  it('should update value when input changes', async () => {
+    const el = await fixture<ZnTranslations>(html` <zn-translations></zn-translations> `);
+    // Mock languages to ensure we have something to edit
+    el.languages = { 'en': 'English', 'fr': 'French' };
+    el.values = { 'en': 'Hello' };
+    await el.updateComplete;
+
+    const input = el.shadowRoot!.querySelector('zn-inline-edit');
+    expect(input).to.exist;
+    await expect(input!.getAttribute('value')).to.equal('Hello');
+
+    // Simulate change
+    input!.value = 'Hello World';
+    input!.dispatchEvent(new CustomEvent('zn-change'));
+
+    await el.updateComplete;
+    await expect(el.values['en']).to.equal('Hello World');
+    await expect(JSON.parse(el.value)).to.deep.equal({'en': 'Hello World'});
+  });
+});

package/src/events/zn-select.ts

@@ -1,6 +1,6 @@
 import type ZnMenuItem from "../components/menu-item";
 
-export type ZnSelectEvent = CustomEvent<{ item: ZnMenuItem }>;
+export type ZnSelectEvent = CustomEvent<{ item: ZnMenuItem | HTMLElement }>;
 
 declare global {
   interface GlobalEventHandlersEventMap {

package/src/zinc.ts

@@ -57,6 +57,7 @@ export {default as Textarea} from './components/textarea';
 export {default as Checkbox} from './components/checkbox';
 export {default as Datepicker} from './components/datepicker';
 export {default as FormGroup} from './components/form-group';
+export {default as InputGroup} from './components/input-group';
 export {default as LinkedSelect} from './components/linked-select';
 export {default as Radio} from './components/radio';
 export {default as Rating} from './components/rating';
@@ -83,6 +84,7 @@ export {default as SettingsContainer} from './components/settings-container';
 export { default as FilterContainer } from './components/filter-container';
 export { default as Reveal } from './components/reveal';
 export { default as AudioSelect } from './components/audio-select';
+export { default as Translations } from './components/translations';
 /* plop:component */
 
 // Base Component