@kubex/zinc 1.0.21 → 1.0.22

package/dist/custom-elements.json

@@ -26876,7 +26876,7 @@
                 "text": "string"
               },
               "privacy": "private",
-              "default": "''"
+              "default": "'en'"
             },
             {
               "kind": "field",
@@ -27257,7 +27257,7 @@
   "package": {
     "name": "@kubex/zinc",
     "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
-    "version": "1.0.21",
+    "version": "1.0.22",
     "author": "",
     "license": "MIT"
   }

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@kubex/zinc",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/dist/zn.min.js

@@ -5000,7 +5000,7 @@ button {
           <zn-option value="${i.url}">${i.name}</zn-option>
         `)}
       </zn-select>
-    `}};_o.styles=Z(U7),y([We()],_o.prototype,"_isPlaying",2),y([_()],_o.prototype,"value",2),y([_()],_o.prototype,"label",2),y([_()],_o.prototype,"placeholder",2),y([_({type:Object})],_o.prototype,"files",2);var zoe=_o;_o.define("zn-audio-select");var G7=te`.form-control-input{margin:var(--zn-spacing-2x-small) 3px 3px}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--zn-input-label-color);font-weight:var(--zn-font-weight-semibold);margin-bottom:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--zn-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control__label{font-size:var(--zn-input-label-font-size-large)}:host([required]) .form-control--has-label .form-control__label::after{content:var(--zn-input-required-content);margin-inline-start:var(--zn-input-required-content-offset);color:var(--zn-input-required-content-color)}.form-control--has-label.form-control--radio-group .form-control__label,.form-control--has-label.form-control--checkbox-group .form-control__label{margin-bottom:0}.form-control--has-label.form-control--has-label-tooltip .form-control__label{display:inline-flex;align-items:center;gap:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--small .form-control__label{font-size:var(--zn-input-label-font-size-small)}.form-control--label-tooltip{color:var(--zn-color-neutral-700);font-size:var(--zn-font-size-small)}.form-control--label-tooltip zn-icon{--icon-color:var(--zn-color-neutral-700);--icon-size:var(--zn-font-size-small)}.form-control--has-label.form-control--has-context-note{display:flex;justify-content:space-between;flex-wrap:wrap}.form-control__label-context-note{color:var(--zn-input-help-text-color);font-size:var(--zn-font-size-small);margin-bottom:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--has-context-note .form-control-input{width:100%}.form-control--has-help-text .form-control__help-text,.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{display:block;color:var(--zn-input-help-text-color);margin-top:var(--zn-spacing-x-small)}.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{margin-top:0.375rem}.radio--has-selected-content .radio__selected-content,.checkbox--has-selected-content .checkbox__selected-content{display:block;margin-top:var(--zn-spacing-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--zn-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text,.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{font-size:var(--zn-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--zn-input-help-text-font-size-large)}.form-control--has-help-text.form-control--radio-group .form-control__help-text,.form-control--has-help-text.form-control--checkbox-group .form-control__help-text{margin-top:var(--zn-spacing-medium)}.form-control--has-help-text .switch .form-control__help-text{margin-top:var(--zn-spacing-3x-small)}.form-control--checkbox-contained-wrapper{height:100%}:host{display:block}.translations{display:flex;flex-direction:column;gap:var(--zn-spacing-small)}.input-container{padding:var(--zn-spacing-small) 0}`;var On=class extends J{constructor(){super(...arguments);this.formControlController=new rt(this);this.hasSlotController=new Ue(this,"label");this.name="";this.value='{"en":""}';this.label="";this.disabled=!1;this.required=!1;this.languages={en:"English"};this.values={};this._activeLanguage="";this.handleLanguageAdd=i=>{let r=i.detail.element.getAttribute("data-path");r&&(this.values=et(Ce({},this.values),{[r]:""}),this._activeLanguage=r,this.updateValue())};this.handleNavbarClick=i=>{i.stopPropagation();let n=i.detail.item;if(n){let r=n.getAttribute("tab")||n.getAttribute("data-tab");r&&(this._activeLanguage=r,this.requestUpdate())}};this.handleValueUpdate=i=>{let n=i.target;if(this._activeLanguage){let r=n.value;r!==this.values[this._activeLanguage]&&(this.values=et(Ce({},this.values),{[this._activeLanguage]:r}),this.updateValue())}};this.handleKeyDown=i=>{if(i.key==="Enter"){if(i.target instanceof Tb)return;!(i.altKey||i.ctrlKey||i.metaKey||i.shiftKey)&&!i.defaultPrevented&&!i.isComposing&&this.formControlController.submit()}};this.handleSubmit=()=>{this.formControlController.submit()}}get validity(){return kn}get validationMessage(){return""}checkValidity(){return!0}getForm(){return this.formControlController.getForm()}reportValidity(){return!0}setCustomValidity(){}firstUpdated(){this.formControlController.updateValidity()}willUpdate(i){let n=i.has("value"),r=i.has("values");if(n&&r){let a=this.value==='{"en":""}',s=Object.keys(this.values).length===0;a&&!s?n=!1:!a&&s?r=!1:this.hasAttribute("values")&&!this.hasAttribute("value")?n=!1:this.hasAttribute("value")&&!this.hasAttribute("values")&&(r=!1)}if(n)try{let a=JSON.parse(this.value||"{}");JSON.stringify(a)!==JSON.stringify(this.values)&&(this.values=a)}catch(a){}if(r&&(this.value=JSON.stringify(this.values),!this._activeLanguage||!Object.prototype.hasOwnProperty.call(this.values,this._activeLanguage))){let a=Object.keys(this.values);a.length>0?this._activeLanguage=a[0]:this._activeLanguage=""}}updateValue(){this.value=JSON.stringify(this.values),this.emit("zn-change"),this.emit("zn-input")}render(){let i=Object.entries(this.languages).filter(([c])=>!Object.prototype.hasOwnProperty.call(this.values,c)).map(([c,d])=>({title:d,type:"dropdown",path:c})),n=Object.keys(this.values).map(c=>({title:this.languages[c]||c,active:c===this._activeLanguage,tab:c})),r=this.values[this._activeLanguage],a=r&&r.length>0,s=this.hasSlotController.test("label"),l=this.label?!0:s;return T`
+    `}};_o.styles=Z(U7),y([We()],_o.prototype,"_isPlaying",2),y([_()],_o.prototype,"value",2),y([_()],_o.prototype,"label",2),y([_()],_o.prototype,"placeholder",2),y([_({type:Object})],_o.prototype,"files",2);var zoe=_o;_o.define("zn-audio-select");var G7=te`.form-control-input{margin:var(--zn-spacing-2x-small) 3px 3px}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--zn-input-label-color);font-weight:var(--zn-font-weight-semibold);margin-bottom:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--zn-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control__label{font-size:var(--zn-input-label-font-size-large)}:host([required]) .form-control--has-label .form-control__label::after{content:var(--zn-input-required-content);margin-inline-start:var(--zn-input-required-content-offset);color:var(--zn-input-required-content-color)}.form-control--has-label.form-control--radio-group .form-control__label,.form-control--has-label.form-control--checkbox-group .form-control__label{margin-bottom:0}.form-control--has-label.form-control--has-label-tooltip .form-control__label{display:inline-flex;align-items:center;gap:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--small .form-control__label{font-size:var(--zn-input-label-font-size-small)}.form-control--label-tooltip{color:var(--zn-color-neutral-700);font-size:var(--zn-font-size-small)}.form-control--label-tooltip zn-icon{--icon-color:var(--zn-color-neutral-700);--icon-size:var(--zn-font-size-small)}.form-control--has-label.form-control--has-context-note{display:flex;justify-content:space-between;flex-wrap:wrap}.form-control__label-context-note{color:var(--zn-input-help-text-color);font-size:var(--zn-font-size-small);margin-bottom:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--has-context-note .form-control-input{width:100%}.form-control--has-help-text .form-control__help-text,.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{display:block;color:var(--zn-input-help-text-color);margin-top:var(--zn-spacing-x-small)}.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{margin-top:0.375rem}.radio--has-selected-content .radio__selected-content,.checkbox--has-selected-content .checkbox__selected-content{display:block;margin-top:var(--zn-spacing-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--zn-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text,.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{font-size:var(--zn-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--zn-input-help-text-font-size-large)}.form-control--has-help-text.form-control--radio-group .form-control__help-text,.form-control--has-help-text.form-control--checkbox-group .form-control__help-text{margin-top:var(--zn-spacing-medium)}.form-control--has-help-text .switch .form-control__help-text{margin-top:var(--zn-spacing-3x-small)}.form-control--checkbox-contained-wrapper{height:100%}:host{display:block}.translations{display:flex;flex-direction:column;gap:var(--zn-spacing-small)}.input-container{padding:var(--zn-spacing-small) 0}`;var On=class extends J{constructor(){super(...arguments);this.formControlController=new rt(this);this.hasSlotController=new Ue(this,"label");this.name="";this.value='{"en":""}';this.label="";this.disabled=!1;this.required=!1;this.languages={en:"English"};this.values={};this._activeLanguage="en";this.handleLanguageAdd=i=>{let r=i.detail.element.getAttribute("data-path");r&&(this.values=et(Ce({},this.values),{[r]:""}),this._activeLanguage=r,this.updateValue())};this.handleNavbarClick=i=>{i.stopPropagation();let n=i.detail.item;if(n){let r=n.getAttribute("tab")||n.getAttribute("data-tab");r&&(this._activeLanguage=r,this.requestUpdate())}};this.handleValueUpdate=i=>{let n=i.target;if(this._activeLanguage){let r=n.value;r!==this.values[this._activeLanguage]&&(this.values=et(Ce({},this.values),{[this._activeLanguage]:r}),this.updateValue())}};this.handleKeyDown=i=>{if(i.key==="Enter"){if(i.target instanceof Tb)return;!(i.altKey||i.ctrlKey||i.metaKey||i.shiftKey)&&!i.defaultPrevented&&!i.isComposing&&this.formControlController.submit()}};this.handleSubmit=()=>{this.formControlController.submit()}}get validity(){return kn}get validationMessage(){return""}checkValidity(){return!0}getForm(){return this.formControlController.getForm()}reportValidity(){return!0}setCustomValidity(){}firstUpdated(){this.formControlController.updateValidity()}willUpdate(i){let n=i.has("value"),r=i.has("values");if(n&&r){let a=this.value==='{"en":""}',s=Object.keys(this.values).length===0;a&&!s?n=!1:!a&&s?r=!1:this.hasAttribute("values")&&!this.hasAttribute("value")?n=!1:this.hasAttribute("value")&&!this.hasAttribute("values")&&(r=!1)}if(n)try{let a=JSON.parse(this.value||"{}");JSON.stringify(a)!==JSON.stringify(this.values)&&(this.values=a)}catch(a){}if(r&&(this.value=JSON.stringify(this.values),!this._activeLanguage||!Object.prototype.hasOwnProperty.call(this.values,this._activeLanguage)&&this._activeLanguage!=="en")){let a=Object.keys(this.values);a.length>0?this._activeLanguage=a[0]:this._activeLanguage="en"}}updateValue(){this.value=JSON.stringify(this.values),this.emit("zn-change"),this.emit("zn-input")}render(){let i=Object.entries(this.languages).filter(([c])=>c!=="en"&&!Object.prototype.hasOwnProperty.call(this.values,c)).map(([c,d])=>({title:d,type:"dropdown",path:c})),n=Object.keys(this.values);n.includes("en")||n.unshift("en");let r=n.map(c=>({title:this.languages[c]||c,active:c===this._activeLanguage,tab:c})),a=this.values[this._activeLanguage],s=this.hasSlotController.test("label"),l=this.label?!0:s;return T`
       <div part="form-control"
            class="${ce({translations:!0,"form-control":!0,"form-control--medium":!0,"form-control--has-label":l})}"
            @keydown="${this.handleKeyDown}">
@@ -5010,7 +5010,7 @@ button {
         </label>
 
         <zn-navbar
-          .navigation="${n}"
+          .navigation="${r}"
           .dropdown="${i}"
           name="${this.name}-translations-navbar"
           isolated
@@ -5019,24 +5019,14 @@ button {
           manual-add-items
         ></zn-navbar>
         <div class="input-container">
-          ${this._activeLanguage?T`
-            ${a?T`
-              <zn-inline-edit
-                .value=${r}
-                name="${this.name}"
-                @zn-change="${this.handleValueUpdate}"
-                @zn-input="${this.handleValueUpdate}"
-                @zn-submit="${this.handleSubmit}"
-              ></zn-inline-edit>
-            `:T`
-              <zn-input
-                .value="${r||""}"
-                name="${this.name}"
-                placeholder="Enter translation..."
-                @zn-change="${this.handleValueUpdate}"
-              ></zn-input>
-            `}
-          `:""}
+          <zn-inline-edit
+            .value=${a}
+            name="${this.name}"
+            placeholder="Enter translation..."
+            @zn-change="${this.handleValueUpdate}"
+            @zn-input="${this.handleValueUpdate}"
+            @zn-submit="${this.handleSubmit}"
+          ></zn-inline-edit>
         </div>
       </div>
     `}};On.styles=Z(G7),On.dependencies={"zn-navbar":ww,"zn-input":Oc,"zn-inline-edit":Tb},y([_()],On.prototype,"name",2),y([_()],On.prototype,"value",2),y([_()],On.prototype,"label",2),y([_({type:Boolean,reflect:!0})],On.prototype,"disabled",2),y([_({type:Boolean,reflect:!0})],On.prototype,"required",2),y([_({type:Object})],On.prototype,"languages",2),y([_({type:Object})],On.prototype,"values",2),y([We()],On.prototype,"_activeLanguage",2);var Coe=On;On.define("zn-translations");})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "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

@@ -36,7 +36,7 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
   };
   @property({type: Object}) values: Record<string, string> = {};
 
-  @state() private _activeLanguage = '';
+  @state() private _activeLanguage = 'en';
 
   get validity(): ValidityState {
     return validValidityState;
@@ -100,12 +100,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 +171,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;
@@ -214,24 +218,14 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
           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>
     `;