@kubex/zinc 1.0.18 → 1.0.20

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.18",
+  "version": "1.0.20",
   "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

@@ -0,0 +1,131 @@
+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";
+
+import styles from './audio-select.scss';
+
+interface AudioFile {
+  name: string;
+  url: string;
+}
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/audio-select
+ * @status experimental
+ * @since 1.0
+ *
+ * @slot - The default slot.
+ * @slot actions - The actions slot.
+ * @slot footer - The footer slot.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --example - An example CSS custom property.
+ */
+export default class ZnAudioSelect extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @state() private _isPlaying: boolean = false;
+  private readonly _audio: HTMLAudioElement;
+
+  @property() value = '';
+  @property() label = '';
+  @property() placeholder = '';
+  @property({type: Object}) files: AudioFile[] = [];
+
+  constructor() {
+    super();
+    this._audio = new Audio();
+
+    // Handle audio ending naturally
+    this._audio.addEventListener('ended', () => {
+      this._isPlaying = false;
+      // Reset to start so pressing play again restarts the audio
+      this._audio.currentTime = 0;
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.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;
+    }
+    this._isPlaying = false;
+  }
+
+  handleSelectChange(e: ZnChangeEvent) {
+    if (e.target !== e.currentTarget) {
+      return;
+    }
+
+    this.value = (e.target as HTMLSelectElement).value;
+  }
+
+  togglePreview(e: CustomEvent) {
+    e.stopPropagation();
+
+    if (!this.value) {
+      e.preventDefault();
+      this._isPlaying = false;
+      this.requestUpdate();
+      return;
+    }
+
+    if (this._isPlaying) {
+      this._audio.pause();
+      this._isPlaying = false;
+    } else {
+      this._audio.play()
+        .then(() => {
+          this._isPlaying = true;
+        })
+        .catch(err => {
+          console.error("Audio playback failed:", err);
+          this._isPlaying = false;
+          this.requestUpdate();
+        });
+    }
+  }
+
+  render() {
+    return html`
+      <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/audio-select/audio-select.scss

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  width: 100%;
+}

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

@@ -0,0 +1,10 @@
+import '../../../dist/zn.min.js';
+import { expect, fixture, html } from '@open-wc/testing';
+
+describe('<zn-audio-select>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html` <zn-audio-select></zn-audio-select> `);
+
+    expect(el).to.exist;
+  });
+});

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

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

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

@@ -13,6 +13,8 @@ import type {ZincFormControl} from '../../internal/zinc-element';
 
 import styles from './checkbox.scss';
 
+type ColorOption = 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'transparent';
+
 /**
  * @summary Short summary of the component's intended use.
  * @documentation https://zinc.style/components/checkbox
@@ -23,7 +25,7 @@ import styles from './checkbox.scss';
  *
  * @slot - The checkbox's label.
  * @slot description - A description of the checkbox's label. Serves as help text for a checkbox item. Alternatively, you can use the `description` attribute.
- *  @slot selected-content - Use to nest rich content (like an input) inside a selected checkbox item. Use only with the contained style.
+ * @slot selected-content - Use to nest rich content (like an input) inside a selected checkbox item. Use only with the contained style.
  *
  * @event zn-blur - Emitted when the checkbox loses focus.
  * @event zn-change - Emitted when the checked state changes.
@@ -36,6 +38,7 @@ import styles from './checkbox.scss';
  * @csspart control--checked - Matches the control part when the checkbox is checked.
  * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.
  * @csspart checked-icon - The checked icon, an `<zn-icon>` element.
+ * @csspart unchecked-icon - The unchecked icon, an `<zn-icon>` element.
  * @csspart indeterminate-icon - The indeterminate icon, an `<zn-icon>` element.
  * @csspart label - The container that wraps the checkbox's label.
  * @csspart description - The container that wraps the checkbox's description.
@@ -46,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)
   });
@@ -64,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';
 
@@ -98,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 = '';
 
@@ -105,6 +114,21 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
 
   @property({attribute: 'label-tooltip'}) labelTooltip: string;
 
+  /** The icon to show when the checkbox is checked. */
+  @property({attribute: 'checked-icon'}) checkedIcon = '';
+
+  /** The icon to show when the checkbox is unchecked. */
+  @property({attribute: 'unchecked-icon'}) uncheckedIcon = '';
+
+  /** The color of the checkbox. */
+  @property({reflect: true}) color: ColorOption = 'default';
+
+  /** The color of the checkbox when checked. Overrides `color`. */
+  @property({attribute: 'checked-color'}) checkedColor: ColorOption;
+
+  /** The color of the checkbox when unchecked. Overrides `color`. */
+  @property({attribute: 'unchecked-color'}) uncheckedColor: ColorOption;
+
   /** Gets the validity state object */
   get validity() {
     return this.input?.validity;
@@ -131,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() {
@@ -216,6 +245,11 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
     const hasLabelTooltip = this.hasSlotController.test('label-tooltip');
     const hasLabel = this.label || hasLabelSlot;
 
+    // Determine the effective color
+    const effectiveColor = (this.checked || this.indeterminate)
+      ? (this.checkedColor || this.color)
+      : (this.uncheckedColor || this.color);
+
     //
     // NOTE: we use a <div> around the label slot because of this Chrome bug.
     //
@@ -262,6 +296,14 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
             'checkbox--small': this.size === 'small',
             'checkbox--medium': this.size === 'medium',
             'checkbox--large': this.size === 'large',
+            'checkbox--default': effectiveColor === 'default',
+            'checkbox--primary': effectiveColor === 'primary',
+            'checkbox--secondary': effectiveColor === 'secondary',
+            'checkbox--error': effectiveColor === 'error',
+            'checkbox--info': effectiveColor === 'info',
+            'checkbox--success': effectiveColor === 'success',
+            'checkbox--warning': effectiveColor === 'warning',
+            'checkbox--transparent': effectiveColor === 'transparent',
             'checkbox--has-description': hasDescription,
             'checkbox--has-selected-content': this.hasSlotController.test('selected-content')
           })}>
@@ -289,15 +331,28 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
               ? ' control--indeterminate'
               : ''}"
             class="checkbox__control">
-            <svg viewBox="0 0 24 24"
-                 fill="none"
-                 stroke="currentColor"
-                 stroke-width="4"
-                 stroke-linecap="round"
-                 stroke-linejoin="round"
-                 class="svg-icon">
-              <polyline class="checkbox__checked-icon" points="20 6 9 17 4 12"></polyline>
-            </svg>
+
+            ${this.checked && !this.indeterminate
+              ? this.checkedIcon
+                ? html`
+                  <zn-icon part="checked-icon" class="checkbox__icon" src="${this.checkedIcon}"></zn-icon>`
+                : html`
+                  <svg viewBox="0 0 24 24"
+                       fill="none"
+                       stroke="currentColor"
+                       stroke-width="4"
+                       stroke-linecap="round"
+                       stroke-linejoin="round"
+                       class="svg-icon">
+                    <polyline class="checkbox__checked-icon" points="20 6 9 17 4 12"></polyline>
+                  </svg>`
+              : ''}
+
+            ${!this.checked && !this.indeterminate && this.uncheckedIcon
+              ? html`
+                <zn-icon part="unchecked-icon" class="checkbox__icon" src="${this.uncheckedIcon}"></zn-icon>`
+              : ''}
+
             ${!this.checked && this.indeterminate
               ? html`
                 <zn-icon

package/src/components/checkbox/checkbox.scss

@@ -25,6 +25,60 @@
   vertical-align: middle;
   cursor: pointer;
   height: 100%;
+
+  --checkbox-color: var(--zn-color-primary-600);
+  --checkbox-color-hover: var(--zn-color-primary-500);
+  --checkbox-icon-color: var(--zn-color-neutral-0);
+  --checkbox-border-color: var(--zn-input-border-color);
+  --checkbox-bg-color: var(--zn-input-background-color);
+
+  &.checkbox--default {
+    --checkbox-color: var(--zn-color-primary-600);
+    --checkbox-color-hover: var(--zn-color-primary-500);
+    --checkbox-border-color: var(--zn-input-border-color);
+  }
+
+  &.checkbox--primary {
+    --checkbox-color: var(--zn-color-primary-600);
+    --checkbox-color-hover: var(--zn-color-primary-500);
+    --checkbox-border-color: var(--zn-color-primary-600);
+  }
+
+  &.checkbox--secondary {
+    --checkbox-color: var(--zn-color-neutral-600);
+    --checkbox-color-hover: var(--zn-color-neutral-500);
+    --checkbox-border-color: var(--zn-color-neutral-300);
+    --checkbox-bg-color: var(--zn-color-neutral-50);
+  }
+
+  &.checkbox--info {
+    --checkbox-color: var(--zn-color-info-600);
+    --checkbox-color-hover: var(--zn-color-info-500);
+    --checkbox-border-color: var(--zn-color-info-600);
+  }
+
+  &.checkbox--success {
+    --checkbox-color: var(--zn-color-success-600);
+    --checkbox-color-hover: var(--zn-color-success-500);
+    --checkbox-border-color: var(--zn-color-success-600);
+  }
+
+  &.checkbox--warning {
+    --checkbox-color: var(--zn-color-warning-600);
+    --checkbox-color-hover: var(--zn-color-warning-500);
+    --checkbox-border-color: var(--zn-color-warning-600);
+  }
+
+  &.checkbox--error {
+    --checkbox-color: var(--zn-color-danger-600);
+    --checkbox-color-hover: var(--zn-color-danger-500);
+    --checkbox-border-color: var(--zn-color-danger-600);
+  }
+
+  &.checkbox--transparent {
+    --checkbox-bg-color: transparent;
+    --checkbox-border-color: transparent;
+  }
 }
 
 .checkbox--small {
@@ -60,10 +114,10 @@
   width: var(--toggle-size);
   height: var(--toggle-size);
   box-shadow: var(--zn-shadow-x-small);
-  border: solid var(--zn-input-border-width) var(--zn-input-border-color);
+  border: solid var(--zn-input-border-width) var(--checkbox-border-color);
+  background-color: var(--checkbox-bg-color);
   border-radius: 2px;
-  background-color: var(--zn-input-background-color);
-  color: var(--zn-color-neutral-0);
+  color: var(--checkbox-icon-color);
   transition: var(--zn-transition-fast) border-color,
   var(--zn-transition-fast) background-color,
   var(--zn-transition-fast) color,
@@ -80,7 +134,7 @@
 
 .checkbox__indeterminate-icon {
   --icon-size: var(--toggle-size);
-  --icon-color: var(--zn-color-neutral-0);
+  --icon-color: var(--checkbox-icon-color);
 
   display: inline-flex;
   width: var(--toggle-size);
@@ -88,9 +142,9 @@
 }
 
 .svg-icon {
-  width: 70%;
-  height: 70%;
-  --icon-color: var(--zn-color-neutral-0);
+  width: max(16px, 70%);
+  height: max(16px, 70%);
+  --icon-color: var(--checkbox-icon-color);
 
   .checkbox__checked-icon {
     stroke-dasharray: 24;
@@ -105,7 +159,7 @@
 
 .checkbox--checked {
   .svg-icon {
-    color: var(--zn-color-neutral-0);
+    color: var(--checkbox-icon-color);
   }
 
   .checkbox__checked-icon {
@@ -115,13 +169,13 @@
 
 /* Hover */
 .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {
-  border-color: var(--zn-input-border-color-hover);
+  border-color: var(--checkbox-color-hover, var(--zn-input-border-color-hover));
   background-color: var(--zn-input-background-color-hover);
 }
 
 /* Focus */
 .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {
-  border-color: var(--zn-color-primary-500);
+  border-color: var(--checkbox-color);
   outline: var(--zn-focus-ring);
   outline-offset: var(--zn-focus-ring-offset);
 }
@@ -129,15 +183,16 @@
 /* Checked/indeterminate */
 .checkbox--checked .checkbox__control,
 .checkbox--indeterminate .checkbox__control {
-  border-color: var(--zn-color-primary-600);
-  background-color: var(--zn-color-primary-600);
+  border-color: var(--checkbox-color);
+  background-color: var(--checkbox-color);
+  color: var(--checkbox-icon-color);
 }
 
 /* Checked/indeterminate + hover */
 .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
 .checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {
-  border-color: var(--zn-color-primary-500);
-  background-color: var(--zn-color-primary-500);
+  border-color: var(--checkbox-color-hover);
+  background-color: var(--checkbox-color-hover);
 }
 
 /* Checked/indeterminate + focus */
@@ -243,7 +298,39 @@
     background-color: var(--zn-color-purple-50);
   }
 
+  .checkbox--primary .checkbox__control,
+  .checkbox--success .checkbox__control,
+  .checkbox--warning .checkbox__control,
+  .checkbox--error .checkbox__control,
+  .checkbox--info .checkbox__control {
+    background-color: var(--checkbox-color);
+    color: var(--zn-color-neutral-0);
+    border-color: var(--checkbox-color);
+  }
+
+  .checkbox--primary:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover,
+  .checkbox--success:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover,
+  .checkbox--warning:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover,
+  .checkbox--error:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover,
+  .checkbox--info:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {
+    background-color: var(--checkbox-color-hover);
+    border-color: var(--checkbox-color-hover);
+    color: var(--zn-color-neutral-0);
+  }
+
+  .checkbox--secondary .checkbox__control {
+    background-color: var(--zn-color-neutral-200);
+    color: var(--zn-color-neutral-700);
+  }
+
+  .checkbox--secondary:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {
+    background-color: var(--zn-color-neutral-300);
+    border-color: var(--zn-color-neutral-300);
+    color: var(--zn-color-neutral-800);
+  }
+
   .checkbox--checked .checkbox__control {
-    background-color: var(--zn-color-primary-600);
+    background-color: var(--checkbox-color);
+    color: var(--zn-color-neutral-0);
   }
 }

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();
     }
   };
@@ -204,6 +204,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;
+  }
+}