@kubex/zinc 1.0.22 → 1.0.24

package/package.json

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

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

@@ -20,6 +20,7 @@
   /* Ensure focus ring is above */
   position: relative;
   z-index: 1;
+  flex: 1;
 }
 
 ::slotted([data-zn-input-group__input]:focus-within) {

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

@@ -52,7 +52,7 @@ export default class ZnItem extends ZincElement {
   @property({type: Boolean, attribute: 'align-end'}) alignEnd: boolean;
 
   // align items in the center
-  @property({type: Boolean, attribute: 'align-center'}) alignCenter: boolean;
+  @property({type: Boolean, attribute: 'align-center'})  alignCenter: boolean;
 
   connectedCallback() {
     super.connectedCallback();

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

@@ -224,7 +224,7 @@ export default class ZnNavbar extends ZincElement {
         'navbar__container--stacked': this.stacked,
         'navbar__container--icon-bar': this.iconBar
       })}">
-        <ul @click="${this.handleClick}" class="${classMap({
+        <ul @click="${this.handleClick}" part="navbar" class="${classMap({
           'navbar': true,
           'navbar--slim': this.slim,
           'navbar--border': this.border,
@@ -242,10 +242,11 @@ export default class ZnNavbar extends ZincElement {
             }
             if (item.path != undefined) {
               return html`
-                <li class="${classMap({'active': item.active})}" tab-uri="${item.path}">${content}</li>`;
+                <li class="${classMap({'active': item.active})}" part="navbar-item" tab-uri="${item.path}">${content}</li>`;
             }
             return html`
-              <li class="${classMap({'active': item.active})}"
+              <li class="${classMap({ 'active': item.active })}"
+                  part="navbar-item"
                   tab="${ifDefined(!this.isolated ? item.tab : undefined)}"
                   data-tab="${ifDefined(this.isolated ? item.tab : undefined)}">
                 ${content}
@@ -263,7 +264,7 @@ export default class ZnNavbar extends ZincElement {
           ${this.dropdown && this.dropdown.length > 0 ? html`
             <li id="dropdown-item">
               <zn-dropdown>
-                <zn-button slot="trigger" color="secondary" square grow>
+                <zn-button slot="trigger" part="button" exportparts="base:button__base" color="secondary" square grow>
                   <zn-icon src="add" size="18"></zn-icon>
                 </zn-button>
                 <zn-menu actions="${JSON.stringify(this.dropdown)}"></zn-menu>

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

@@ -1,16 +1,16 @@
-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 { classMap } from 'lit/directives/class-map.js';
+import { FormControlController, validValidityState } from '../../internal/form';
+import { HasSlotController } from '../../internal/slot';
+import type { PropertyValues } from 'lit';
+import { html, nothing, unsafeCSS } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import type { ZincFormControl } from '../../internal/zinc-element';
 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 type { ZnMenuSelectEvent } from '../../events/zn-menu-select';
+import type { ZnSelectEvent } from "../../events/zn-select";
 
 import styles from './translations.scss';
 
@@ -28,13 +28,14 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
   @property() name = '';
   @property() value = '{"en":""}';
   @property() label: string = '';
-  @property({type: Boolean, reflect: true}) disabled = false;
-  @property({type: Boolean, reflect: true}) required = false;
+  @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 }) languages: Record<string, string> = {
+    'en': 'EN'
   };
-  @property({type: Object}) values: Record<string, string> = {};
+  @property({ type: Object }) values: Record<string, string> = {};
 
   @state() private _activeLanguage = 'en';
 
@@ -116,7 +117,7 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
     const languageCode = element.getAttribute('data-path');
     if (languageCode) {
       // Add new language with empty string
-      this.values = {...this.values, [languageCode]: ''};
+      this.values = { ...this.values, [languageCode]: '' };
       this._activeLanguage = languageCode;
       this.updateValue();
     }
@@ -139,7 +140,7 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
     if (this._activeLanguage) {
       const newValue: string = target.value as string;
       if (newValue !== this.values[this._activeLanguage]) {
-        this.values = {...this.values, [this._activeLanguage]: newValue};
+        this.values = { ...this.values, [this._activeLanguage]: newValue };
         this.updateValue();
       }
     }
@@ -184,7 +185,7 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
     }
 
     const navigation = visibleTabs.map(code => ({
-      title: this.languages[code] || code,
+      title: code.toUpperCase(),
       active: code === this._activeLanguage,
       tab: code
     }));
@@ -212,9 +213,10 @@ 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">

package/src/components/translations/translations.scss

@@ -7,9 +7,35 @@
 .translations {
   display: flex;
   flex-direction: column;
-  gap: var(--zn-spacing-small);
+  padding: 0 var(--zn-spacing-medium);
+  gap: var(--zn-spacing-3x-small);
 }
 
 .input-container {
   padding: var(--zn-spacing-small) 0;
 }
+
+.form-control__label {
+  margin-bottom: 0 !important;
+}
+
+
+zn-navbar {
+  overflow: hidden;
+  margin-top: var(--zn-spacing-x-small);
+}
+
+zn-navbar::part(navbar) {
+  padding: 0;
+  gap: 15px;
+}
+
+zn-navbar::part(navbar-item) {
+  font-size: var(--zn-font-size-small);
+
+  --zn-spacing-medium: 7px;
+}
+
+zn-navbar::part(button__base) {
+  //padding: 0 5px;
+}