@kubex/zinc 1.0.19 → 1.0.21

package/docs/pages/components/input-group.md

@@ -0,0 +1,61 @@
+---
+meta:
+  title: Input Group
+  description: A wrapper component that groups inputs and selects visually.
+layout: component
+---
+
+Input Groups allow you to group multiple form controls together into a single visual unit.
+
+```html:preview
+<zn-input-group>
+  <zn-input placeholder="First Name"></zn-input>
+  <zn-input placeholder="Last Name"></zn-input>
+</zn-input-group>
+```
+
+## Examples
+
+### Mixed Inputs and Selects
+
+You can combine inputs and selects.
+
+```html:preview
+<zn-input-group>
+  <zn-select value="http://" style="width: 125px;">
+    <zn-option value="http://">http://</zn-option>
+    <zn-option value="https://">https://</zn-option>
+  </zn-select>
+  <zn-input placeholder="example.com"></zn-input>
+</zn-input-group>
+```
+
+### Multiple Inputs
+
+```html:preview
+<zn-input-group>
+  <zn-input placeholder="City"></zn-input>
+  <zn-input placeholder="State"></zn-input>
+  <zn-input placeholder="Zip"></zn-input>
+</zn-input-group>
+```
+
+### Labeled Group
+
+Use the `label` attribute to add a label to the input group.
+
+```html:preview
+<zn-input-group label="Personal Information">
+  <zn-input placeholder="First Name"></zn-input>
+  <zn-input placeholder="Last Name"></zn-input>
+</zn-input-group>
+```
+
+### Input with Submit Button
+
+```html:preview
+<zn-input-group>
+  <zn-input placeholder="Email Address" type="email"></zn-input>
+  <zn-button>Subscribe</zn-button>
+</zn-input-group>
+```

package/docs/pages/components/translations.md

@@ -0,0 +1,53 @@
+---
+meta:
+  title: Translations
+  description: A component for managing multi-language text input.
+layout: component
+---
+
+The Translations component allows users to enter text for multiple languages, with a tabbed interface for switching
+between languages.
+
+```html:preview
+<zn-translations></zn-translations>
+```
+
+## Attributes
+
+| Attribute   | Type     | Description                                                                                 |
+|-------------|----------|---------------------------------------------------------------------------------------------|
+| `languages` | `Object` | A key-value pair of language codes and names (e.g., `{ "en": "English", "fr": "French" }`). |
+| `values`    | `Object` | A key-value pair of language codes and translations.                                        |
+| `value`     | `String` | A JSON string representing the current translations.                                        |
+
+## Examples
+
+### With Label
+
+```html:preview
+
+<zn-translations
+  label="Description"
+  languages='{&quot;en&quot;:&quot;English&quot;,&quot;fr&quot;:&quot;French&quot;,&quot;de&quot;:&quot;German&quot;}'>
+</zn-translations>
+```
+
+### Custom Languages
+
+You can provide a custom list of available languages via the `languages` property.
+
+```html:preview
+
+<zn-translations
+  languages='{&quot;en&quot;:&quot;English&quot;,&quot;fr&quot;:&quot;French&quot;,&quot;de&quot;:&quot;German&quot;,&quot;es&quot;:&quot;Spanish&quot;,&quot;it&quot;:&quot;Italian&quot;,&quot;pt&quot;:&quot;Portuguese&quot;,&quot;ru&quot;:&quot;Russian&quot;,&quot;zh&quot;:&quot;Chinese&quot;,&quot;ja&quot;:&quot;Japanese&quot;,&quot;ar&quot;:&quot;Arabic&quot;}'></zn-translations>
+```
+
+### Pre-filled Values
+
+```html:preview
+
+<zn-translations
+  languages='{&quot;en&quot;:&quot;English&quot;,&quot;fr&quot;:&quot;French&quot;}'
+  values='{&quot;en&quot;:&quot;Hello World&quot;,&quot;fr&quot;:&quot;Bonjour le monde&quot;}'
+></zn-translations>
+```

package/package.json

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

package/src/components/audio-select/audio-select.component.ts

@@ -1,4 +1,4 @@
-import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {property, state} from "lit/decorators.js";
 import ZincElement from '../../internal/zinc-element';
 import type {ZnChangeEvent} from "../../events/zn-change";
@@ -27,13 +27,13 @@ interface AudioFile {
 export default class ZnAudioSelect extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
 
-  private _selectedUrl: string = '';
   @state() private _isPlaying: boolean = false;
   private readonly _audio: HTMLAudioElement;
 
+  @property() value = '';
   @property() label = '';
   @property() placeholder = '';
-  @property({type: Object}) files: AudioFile[];
+  @property({type: Object}) files: AudioFile[] = [];
 
   constructor() {
     super();
@@ -49,10 +49,21 @@ export default class ZnAudioSelect extends ZincElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this._stopAudio();
+    this.stopAudio();
   }
 
-  _stopAudio() {
+  updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('value')) {
+      this.stopAudio();
+      if (this.value) {
+        this._audio.src = this.value;
+      }
+    }
+  }
+
+  stopAudio() {
     if (this._audio) {
       this._audio.pause();
       this._audio.currentTime = 0;
@@ -65,20 +76,13 @@ export default class ZnAudioSelect extends ZincElement {
       return;
     }
 
-    const url = (e.target as HTMLSelectElement).value;
-    this._selectedUrl = url;
-
-    this._stopAudio();
-
-    if (url) {
-      this._audio.src = url;
-    }
+    this.value = (e.target as HTMLSelectElement).value;
   }
 
   togglePreview(e: CustomEvent) {
     e.stopPropagation();
 
-    if (!this._selectedUrl) {
+    if (!this.value) {
       e.preventDefault();
       this._isPlaying = false;
       this.requestUpdate();
@@ -103,26 +107,25 @@ export default class ZnAudioSelect extends ZincElement {
 
   render() {
     return html`
-      <div class="container">
-        <div class="select-wrapper">
-          <zn-select label="${this.label}" @zn-change="${this.handleSelectChange}">
-            <zn-checkbox
-              slot="prefix"
-              checked-icon="pause"
-              unchecked-icon="play_arrow"
-              checked-color="primary"
-              unchecked-color="secondary"
-              ?checked="${this._isPlaying}"
-              @zn-change="${this.togglePreview}">
-            </zn-checkbox>
-
-            <zn-option value="" disabled selected>${this.placeholder || 'Select audio'}</zn-option>
-            ${this.files.map(file => html`
-              <zn-option value="${file.url}">${file.name}</zn-option>
-            `)}
-          </zn-select>
-        </div>
-      </div>
+      <zn-select
+        label="${this.label}"
+        value="${this.value}"
+        @zn-change="${this.handleSelectChange}">
+        <zn-checkbox
+          slot="prefix"
+          checked-icon="pause"
+          unchecked-icon="play_arrow"
+          checked-color="primary"
+          unchecked-color="secondary"
+          ?checked="${this._isPlaying}"
+          @zn-change="${this.togglePreview}">
+        </zn-checkbox>
+
+        <zn-option value="" disabled>${this.placeholder || 'Select audio'}</zn-option>
+        ${this.files.map(file => html`
+          <zn-option value="${file.url}">${file.name}</zn-option>
+        `)}
+      </zn-select>
     `;
   }
 }

package/src/components/checkbox/checkbox.component.ts

@@ -49,7 +49,7 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
   static dependencies = {'zn-icon': ZnIcon};
 
   private readonly formControlController = new FormControlController(this, {
-    value: (control: ZnCheckbox) => (control.checked ? control.value || 'on' : undefined),
+    value: (control: ZnCheckbox) => (control.checked ? control.value || 'on' : control.uncheckedValue || undefined),
     defaultValue: (control: ZnCheckbox) => control.defaultChecked,
     setValue: (control: ZnCheckbox, checked: boolean) => (control.checked = checked)
   });
@@ -67,6 +67,9 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
   /** The current value of the checkbox, submitted as a name/value pair with form data. */
   @property() value: string;
 
+  /** The unchecked value of the checkbox, submitted as a name/value pair with form data. */
+  @property({attribute: 'unchecked-value', reflect: true}) uncheckedValue: string;
+
   /** The checkbox's size. */
   @property({reflect: true}) size: 'small' | 'medium' | 'large' = 'medium';
 
@@ -101,6 +104,9 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
   /** Makes the checkbox a required field. */
   @property({type: Boolean, reflect: true}) required = false;
 
+  /** Submits the form when checkbox is clicked. */
+  @property({attribute: 'submit-on-click', type: Boolean, reflect: true}) submitOnClick: boolean = false;
+
   /** The checkbox's help text. If you need to display HTML, use the `description` slot instead. */
   @property({attribute: 'description'}) description = '';
 
@@ -149,6 +155,11 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
     this.checked = !this.checked;
     this.indeterminate = false;
     this.emit('zn-change');
+
+    const form = this.getForm();
+    if (this.submitOnClick && form) {
+      form.requestSubmit();
+    }
   }
 
   private handleBlur() {

package/src/components/data-table/data-table.component.ts

@@ -44,6 +44,7 @@ interface Cell {
   sortValue?: string;
   uri?: string;
   target?: string;
+  copyable?: boolean;
 }
 
 interface Row {
@@ -925,6 +926,12 @@ export default class ZnDataTable extends ZincElement {
           <zn-icon src="${src}" color="${color}"></zn-icon> ${content}`;
       }
 
+      if (data.copyable) {
+        return html`
+          ${content}
+          <zn-copy-button value="${data.text}"></zn-copy-button>`;
+      }
+
       return content;
     }
 

package/src/components/inline-edit/inline-edit.component.ts

@@ -140,7 +140,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
   mouseEventHandler = (e: MouseEvent) => {
     if (this.isEditing && !this.contains(e.target as Node)) {
       this.isEditing = false;
-      this.value = this.defaultValue;
+      this.emit('zn-change');
       this.input.blur();
     }
   };
@@ -156,6 +156,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
   submitKeyHandler = (e: KeyboardEvent) => {
     if (e.key === 'Enter' && this.isEditing) {
       this.isEditing = false;
+      this.emit('zn-submit', {detail: {value: this.value, element: this}});
       this.formControlController.submit();
       this.input.blur();
     }
@@ -186,6 +187,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
   handleSubmitClick = (e: MouseEvent) => {
     e.preventDefault();
     this.isEditing = false;
+    this.emit('zn-submit', {detail: {value: this.value, element: this}});
     this.formControlController.submit();
   };
 
@@ -204,6 +206,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
       return;
     }
     this.value = (e.target as (HTMLInputElement | HTMLSelectElement)).value;
+    this.emit('zn-input');
   };
 
   protected render() {

package/src/components/input-group/index.ts

@@ -0,0 +1,12 @@
+import ZnInputGroup from './input-group.component';
+
+export * from './input-group.component';
+export default ZnInputGroup;
+
+ZnInputGroup.define('zn-input-group');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-input-group': ZnInputGroup;
+  }
+}

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

@@ -0,0 +1,73 @@
+import {classMap} from 'lit/directives/class-map.js';
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {HasSlotController} from '../../internal/slot';
+import {property, query} from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './input-group.scss';
+
+/**
+ * @summary A wrapper component that groups inputs and selects visually.
+ * @documentation https://zinc.style/components/input-group
+ * @status experimental
+ * @since 1.0
+ *
+ * @slot - The default slot for inputs and selects.
+ * @slot label - The input group's label. Alternatively, you can use the `label` attribute.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart form-control - The form control wrapper.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-input - The input group container.
+ */
+export default class ZnInputGroup extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  private readonly hasSlotController = new HasSlotController(this, 'label');
+
+  @query('slot:not([name])') defaultSlot: HTMLSlotElement;
+
+  /** The input group's label. If you need to display HTML, use the `label` slot. */
+  @property() label = '';
+
+  private handleSlotChange() {
+    const slottedElements = [...this.defaultSlot.assignedElements({flatten: true})] as HTMLElement[];
+
+    // Filter for inputs and selects
+    const supportedTags = ['ZN-INPUT', 'ZN-SELECT', 'ZN-BUTTON'];
+    const controls = slottedElements.filter(el => supportedTags.includes(el.tagName));
+
+    controls.forEach(el => {
+      const index = controls.indexOf(el);
+
+      el.toggleAttribute('data-zn-input-group__input', true);
+      el.toggleAttribute('data-zn-input-group__input--first', index === 0);
+      el.toggleAttribute('data-zn-input-group__input--inner', index > 0 && index < controls.length - 1);
+      el.toggleAttribute('data-zn-input-group__input--last', index === controls.length - 1);
+    });
+  }
+
+  render() {
+    const hasLabelSlot = this.hasSlotController.test('label');
+    const hasLabel = this.label ? true : hasLabelSlot;
+
+    return html`
+      <div part="form-control"
+           class="${classMap({
+             'form-control': true,
+             'form-control--has-label': hasLabel,
+           })}">
+
+        <label part="form-control-label"
+               id="label"
+               class="form-control__label"
+               aria-hidden=${hasLabel ? 'false' : 'true'}>
+          <slot name="label">${this.label}</slot>
+        </label>
+
+        <div part="base form-control-input" class="input-group" role="group" aria-labelledby="label">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+      </div>`;
+  }
+}

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

@@ -0,0 +1,65 @@
+@use "../../wc";
+@use "../../form-control";
+
+:host {
+  display: block;
+}
+
+.input-group {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  width: 100%;
+}
+
+/* Common styles for slotted inputs */
+::slotted([data-zn-input-group__input]) {
+  /* Overlap borders */
+  margin-inline-end: -1px;
+
+  /* Ensure focus ring is above */
+  position: relative;
+  z-index: 1;
+}
+
+::slotted([data-zn-input-group__input]:focus-within) {
+  z-index: 2;
+}
+
+::slotted([data-zn-input-group__input--first]) {
+  --zn-input-border-radius-x-small: var(--zn-border-radius-medium) 0 0 var(--zn-border-radius-medium);
+  --zn-input-border-radius-small: var(--zn-border-radius-medium) 0 0 var(--zn-border-radius-medium);
+  --zn-input-border-radius-medium: var(--zn-border-radius-medium) 0 0 var(--zn-border-radius-medium);
+  --zn-input-border-radius-large: var(--zn-border-radius-medium) 0 0 var(--zn-border-radius-medium);
+}
+
+::slotted([data-zn-input-group__input--inner]) {
+  --zn-input-border-radius-x-small: 0;
+  --zn-input-border-radius-small: 0;
+  --zn-input-border-radius-medium: 0;
+  --zn-input-border-radius-large: 0;
+}
+
+::slotted([data-zn-input-group__input--last]) {
+  --zn-input-border-radius-x-small: 0 var(--zn-border-radius-medium) var(--zn-border-radius-medium) 0;
+  --zn-input-border-radius-small: 0 var(--zn-border-radius-medium) var(--zn-border-radius-medium) 0;
+  --zn-input-border-radius-medium: 0 var(--zn-border-radius-medium) var(--zn-border-radius-medium) 0;
+  --zn-input-border-radius-large: 0 var(--zn-border-radius-medium) var(--zn-border-radius-medium) 0;
+
+  margin-inline-end: 0;
+}
+
+/* Button overrides */
+::slotted(zn-button[data-zn-input-group__input])::part(base) {
+  border-radius: 0;
+}
+
+::slotted(zn-button[data-zn-input-group__input--first])::part(base) {
+  border-start-start-radius: var(--zn-border-radius-medium);
+  border-end-start-radius: var(--zn-border-radius-medium);
+}
+
+::slotted(zn-button[data-zn-input-group__input--last])::part(base) {
+  border-start-end-radius: var(--zn-border-radius-medium);
+  border-end-end-radius: var(--zn-border-radius-medium);
+}

package/src/components/input-group/input-group.test.ts

@@ -0,0 +1,98 @@
+import '../../components/input/index';
+import '../../components/select/index';
+import '../../components/button/index';
+import './index';
+import {expect, fixture, html} from '@open-wc/testing';
+import type ZnInputGroup from './input-group.component';
+
+// We need to ensure components are defined for the test
+customElements.define('zn-input-group-test-input', class extends HTMLElement {
+});
+
+describe('<zn-input-group>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html`
+      <zn-input-group></zn-input-group> `);
+    expect(el).to.exist;
+  });
+
+  it('should apply data attributes to slotted inputs', async () => {
+    const el = await fixture<ZnInputGroup>(html`
+      <zn-input-group>
+        <zn-input></zn-input>
+        <zn-input></zn-input>
+        <zn-input></zn-input>
+      </zn-input-group>
+    `);
+
+    await el.updateComplete;
+    await new Promise(r => setTimeout(r, 100));
+
+    const inputs = el.querySelectorAll('zn-input');
+    expect(inputs[0]).to.have.attribute('data-zn-input-group__input');
+    expect(inputs[0]).to.have.attribute('data-zn-input-group__input--first');
+
+    expect(inputs[1]).to.have.attribute('data-zn-input-group__input');
+    expect(inputs[1]).to.have.attribute('data-zn-input-group__input--inner');
+
+    expect(inputs[2]).to.have.attribute('data-zn-input-group__input');
+    expect(inputs[2]).to.have.attribute('data-zn-input-group__input--last');
+  });
+
+  it('should handle mixed inputs and selects', async () => {
+    const el = await fixture<ZnInputGroup>(html`
+      <zn-input-group>
+        <zn-input></zn-input>
+        <zn-select></zn-select>
+      </zn-input-group>
+    `);
+
+    await new Promise(r => setTimeout(r, 100));
+
+    const controls = el.querySelectorAll('zn-input, zn-select');
+    expect(controls[0]).to.have.attribute('data-zn-input-group__input--first');
+    expect(controls[1]).to.have.attribute('data-zn-input-group__input--last');
+  });
+
+  it('should handle button at the end', async () => {
+    const el = await fixture<ZnInputGroup>(html`
+      <zn-input-group>
+        <zn-input></zn-input>
+        <zn-button>Submit</zn-button>
+      </zn-input-group>
+    `);
+
+    await new Promise(r => setTimeout(r, 100));
+
+    const input = el.querySelector('zn-input');
+    const button = el.querySelector('zn-button');
+
+    expect(input).to.have.attribute('data-zn-input-group__input--first');
+    expect(button).to.have.attribute('data-zn-input-group__input--last');
+    expect(button).to.have.attribute('data-zn-input-group__input');
+  });
+
+  it('should render a label when the label attribute is set', async () => {
+    const el = await fixture<ZnInputGroup>(html`
+      <zn-input-group label="Test Label"></zn-input-group>
+    `);
+    await el.updateComplete;
+    const label = el.shadowRoot?.querySelector('.form-control__label');
+    expect(label).to.exist;
+    expect(label).to.contain.text('Test Label');
+  });
+
+  it('should render a label from the label slot', async () => {
+    const el = await fixture<ZnInputGroup>(html`
+      <zn-input-group>
+        <span slot="label">Slot Label</span>
+      </zn-input-group>
+    `);
+    await el.updateComplete;
+    const label = el.shadowRoot?.querySelector('.form-control__label');
+    expect(label).to.exist;
+    const slot = label?.querySelector('slot');
+    expect(slot).to.exist;
+    // Note: checking slot content in shadow DOM is tricky, but existence of label wrapper is enough to prove logic works
+  });
+});

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

@@ -51,6 +51,9 @@ export default class ZnItem extends ZincElement {
   // align items to the right
   @property({type: Boolean, attribute: 'align-end'}) alignEnd: boolean;
 
+  // align items in the center
+  @property({type: Boolean, attribute: 'align-center'}) alignCenter: boolean;
+
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'listitem');
@@ -95,7 +98,8 @@ export default class ZnItem extends ZincElement {
           'item--large': this.size === 'large',
           'item--has-icon': hasIcon,
           'item--no-padding': this.noPadding,
-          'item--align-end': this.alignEnd
+          'item--align-end': this.alignEnd,
+          'item--align-center': this.alignCenter
         })}"
         part="base">
 

package/src/components/item/item.scss

@@ -41,6 +41,10 @@
     text-align: right;
   }
 
+  &--align-center {
+    align-items: center;
+  }
+
   &__header {
     display: flex;
     align-items: center;