@kubex/zinc 1.0.100 → 1.0.102

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.0.100",
+  "version": "1.0.102",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/data-select/providers/currency-data-provider.ts

@@ -2,6 +2,7 @@ import type {DataProviderOption, LocalDataProvider} from "./provider";
 
 const currencyCodeToName: { [key: string]: string } = {
   'ALL': 'Albania Lek',
+  'AED': 'United Arab Emirates Dirham',
   'AFN': 'Afghanistan Afghani',
   'ARS': 'Argentina Peso',
   'AWG': 'Aruba Guilder',

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

@@ -149,6 +149,7 @@ export default class ZnTranslationGroup extends ZnPanel {
       <div class="${classMap({
         panel: true,
         'panel--flush': this.flush,
+        'panel--transparent': this.transparent,
         'panel--has-header': hasHeader,
         'panel--has-actions': hasMultipleLanguages || hasActionSlot,
         'panel--has-footer': hasFooterSlot,

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

@@ -6,26 +6,31 @@ import {keyed} from 'lit/directives/keyed.js';
 import {live} from 'lit/directives/live.js';
 import {property, state} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
+import ZnButton from '../button';
+import ZnButtonGroup from '../button-group';
+import ZnDropdown from '../dropdown';
 import ZnInlineEdit from '../inline-edit';
 import ZnInput from '../input';
-import ZnNavbar from '../navbar';
+import ZnMenu from '../menu';
 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-button': ZnButton,
+    'zn-button-group': ZnButtonGroup,
+    'zn-dropdown': ZnDropdown,
+    'zn-inline-edit': ZnInlineEdit,
     'zn-input': ZnInput,
-    'zn-inline-edit': ZnInlineEdit
+    'zn-menu': ZnMenu
   };
 
   private readonly formControlController: FormControlController = new FormControlController(this);
-  private readonly hasSlotController = new HasSlotController(this, 'label');
+  private readonly hasSlotController = new HasSlotController(this, 'label', 'expand');
 
   @property() name = '';
   @property() value = '{"en":""}';
@@ -33,6 +38,7 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
   @property({type: Boolean, reflect: true}) disabled = false;
   @property({type: Boolean, reflect: true}) required = false;
   @property({type: Boolean, reflect: true}) flush = false;
+  @property({attribute: "input-type"}) inputType: 'select' | 'text' | 'number' | 'textarea' = 'text';
 
   /** When true, hides the individual language navbar and defers language control to a parent zn-translation-group. */
   @property({type: Boolean, reflect: true}) grouped = false;
@@ -147,6 +153,7 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
   }
 
   private handleLanguageAdd = (e: ZnMenuSelectEvent) => {
+    e.stopPropagation();
     const element = e.detail.element as HTMLElement;
     const languageCode = element.getAttribute('data-path');
     if (languageCode) {
@@ -157,16 +164,9 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
     }
   };
 
-  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 switchLanguage = (lang: string) => {
+    this._activeLanguage = lang;
+    this.requestUpdate();
   };
 
   private handleValueUpdate = (e: CustomEvent) => {
@@ -223,50 +223,70 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
       visibleTabs.unshift('en');
     }
 
-    const navigation = visibleTabs.map(code => ({
-      title: code.toUpperCase(),
-      active: code === this._activeLanguage,
-      tab: code
-    }));
-
     const currentTranslation = this.values[this._activeLanguage] ?? '';
     const isRTL = this.isRTLLanguage(this._activeLanguage);
 
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasLabel = this.label ? true : hasLabelSlot;
+    const hasExpandSlot = this.hasSlotController.test('expand');
+    const hasMultipleLanguages = Object.keys(this.languages).length > 1;
+    const showActions = !this.grouped && (hasMultipleLanguages || hasExpandSlot);
 
     return html`
       <div part="form-control"
            class="${classMap({
              'translations': true,
              'translations--grouped': this.grouped,
+             'translations--flush': this.flush,
              '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>
-
-        ${!this.grouped ? html`
-          <zn-navbar
-            .navigation="${navigation}"
-            .dropdown="${availableLanguages}"
-            name="${this.name}-translations-navbar"
-            @zn-select="${this.handleNavbarClick}"
-            @zn-menu-select="${this.handleLanguageAdd}"
-            flush=${this.flush || nothing}
-            isolated
-            manual-add-items
-          >
-            <slot name="expand" slot="expand"></slot>
-          </zn-navbar>
-        ` : nothing}
-        <div class="input-container">
+        <div class="translations__header">
+          <label part="form-control-label" class="form-control__label" for="input"
+                 aria-hidden=${hasLabel ? 'false' : 'true'}>
+            <slot name="label">${this.label}</slot>
+          </label>
+          ${showActions ? html`
+            <div class="translations__actions">
+              ${hasExpandSlot ? html`<slot name="expand"></slot>` : nothing}
+              ${hasMultipleLanguages ? html`
+                <zn-button-group>
+                  ${visibleTabs.map(code => html`
+                    <zn-button
+                      size="x-small"
+                      color="default"
+                      ?outline="${code !== this._activeLanguage}"
+                      @click="${() => this.switchLanguage(code)}"
+                    >${code.toUpperCase()}
+                    </zn-button>
+                  `)}
+                  ${availableLanguages.length > 0 ? html`
+                    <zn-dropdown placement="bottom-end">
+                      <zn-button
+                        slot="trigger"
+                        size="x-small"
+                        color="default"
+                        outline
+                      >+
+                      </zn-button>
+                      <zn-menu
+                        .actions=${availableLanguages}
+                        @zn-menu-select="${this.handleLanguageAdd}"
+                      ></zn-menu>
+                    </zn-dropdown>
+                  ` : nothing}
+                </zn-button-group>
+              ` : nothing}
+            </div>
+          ` : nothing}
+        </div>
+
+        <div part="form-control-input" class="translations__body">
           ${keyed(this._activeLanguage, html`
             <zn-inline-edit
+              input-type=${this.inputType}
               .value=${live(currentTranslation)}
               name="${this.name}"
               placeholder="Enter translation..."

package/src/components/translations/translations.scss

@@ -5,41 +5,40 @@
 }
 
 .translations {
+  padding: var(--zn-spacing-small) var(--zn-spacing-medium);
+}
+
+.translations__header {
   display: flex;
-  flex-direction: column;
-  padding: 0 var(--zn-spacing-medium);
-  gap: var(--zn-spacing-3x-small);
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--zn-spacing-small);
+  margin-bottom: var(--zn-spacing-2x-small);
+  min-height: var(--zn-input-height-small);
 }
 
-.translations--grouped {
-  padding: 0;
+.translations__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--zn-spacing-x-small);
+  margin-left: auto;
 }
 
-.input-container {
-  padding: var(--zn-spacing-small) 0;
+.translations__body {
+  display: block;
 }
 
 .form-control__label {
   margin-bottom: 0 !important;
 }
 
-
-zn-navbar {
-  overflow: hidden;
-  margin-top: var(--zn-spacing-x-small);
-}
-
-zn-navbar::part(navbar) {
-  padding: 0 0 0 7px;
-  gap: 15px;
-}
-
-zn-navbar::part(navbar-item) {
-  font-size: var(--zn-font-size-small);
-
-  --zn-spacing-medium: 7px;
+.translations--flush,
+.translations--grouped {
+  padding: 0;
 }
 
-zn-navbar::part(button__base) {
-  //padding: 0 5px;
+.translations--grouped {
+  .translations__header {
+    margin-bottom: 0;
+  }
 }