@kubex/zinc 1.0.21 → 1.0.23

package/package.json

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

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

@@ -1,7 +1,7 @@
 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 {html, nothing, unsafeCSS} from 'lit';
 import {property, state} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 import ZnInlineEdit from '../inline-edit';
@@ -30,13 +30,14 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
   @property() label: string = '';
   @property({type: Boolean, reflect: true}) disabled = false;
   @property({type: Boolean, reflect: true}) required = false;
+  @property({type: Boolean, reflect: true}) flush = false;
 
   @property({type: Object}) languages: Record<string, string> = {
     'en': 'English'
   };
   @property({type: Object}) values: Record<string, string> = {};
 
-  @state() private _activeLanguage = '';
+  @state() private _activeLanguage = 'en';
 
   get validity(): ValidityState {
     return validValidityState;
@@ -100,12 +101,12 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
       this.value = JSON.stringify(this.values);
 
       // Ensure active language is valid
-      if (!this._activeLanguage || !Object.prototype.hasOwnProperty.call(this.values, this._activeLanguage)) {
+      if (!this._activeLanguage || (!Object.prototype.hasOwnProperty.call(this.values, this._activeLanguage) && this._activeLanguage !== 'en')) {
         const keys = Object.keys(this.values);
         if (keys.length > 0) {
           this._activeLanguage = keys[0];
         } else {
-          this._activeLanguage = '';
+          this._activeLanguage = 'en';
         }
       }
     }
@@ -171,21 +172,25 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
 
   render() {
     const availableLanguages = Object.entries(this.languages)
-      .filter(([code]) => !Object.prototype.hasOwnProperty.call(this.values, code))
+      .filter(([code]) => code !== 'en' && !Object.prototype.hasOwnProperty.call(this.values, code))
       .map(([code, name]) => ({
         title: name,
         type: 'dropdown',
         path: code
       }));
 
-    const navigation = Object.keys(this.values).map(code => ({
+    const visibleTabs = Object.keys(this.values);
+    if (!visibleTabs.includes('en')) {
+      visibleTabs.unshift('en');
+    }
+
+    const navigation = visibleTabs.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;
@@ -208,30 +213,21 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
           .navigation="${navigation}"
           .dropdown="${availableLanguages}"
           name="${this.name}-translations-navbar"
-          isolated
           @zn-select="${this.handleNavbarClick}"
           @zn-menu-select="${this.handleLanguageAdd}"
+          flush=${this.flush || nothing}
+          isolated
           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>
-            `}
-          ` : ''}
+          <zn-inline-edit
+            .value=${currentTranslation}
+            name="${this.name}"
+            placeholder="Enter translation..."
+            @zn-change="${this.handleValueUpdate}"
+            @zn-input="${this.handleValueUpdate}"
+            @zn-submit="${this.handleSubmit}"
+          ></zn-inline-edit>
         </div>
       </div>
     `;

package/src/components/translations/translations.scss

@@ -7,6 +7,7 @@
 .translations {
   display: flex;
   flex-direction: column;
+  padding: 0 var(--zn-spacing-medium);
   gap: var(--zn-spacing-small);
 }