@kubex/zinc 1.0.24 → 1.0.98

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

@@ -1,13 +1,14 @@
-import {classMap} from "lit/directives/class-map.js";
-import {type CSSResultGroup, html, type HTMLTemplateResult, unsafeCSS} from 'lit';
-import {defaultValue} from "../../internal/default-value";
-import {FormControlController} from "../../internal/form";
-import {ifDefined} from "lit/directives/if-defined.js";
-import {property, query, state} from 'lit/decorators.js';
-import {watch} from "../../internal/watch";
+import { classMap } from "lit/directives/class-map.js";
+import { type CSSResultGroup, html, type HTMLTemplateResult, type PropertyValues, unsafeCSS } from 'lit';
+import { defaultValue } from "../../internal/default-value";
+import { FormControlController } from "../../internal/form";
+import { HasSlotController } from "../../internal/slot";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property, query, state } from 'lit/decorators.js';
+import { watch } from "../../internal/watch";
 import ZincElement from '../../internal/zinc-element';
 import ZnSelect from "../select";
-import type {ZincFormControl} from '../../internal/zinc-element';
+import type { ZincFormControl } from '../../internal/zinc-element';
 import type ZnInput from "../input";
 
 import styles from './inline-edit.scss';
@@ -22,8 +23,9 @@ import styles from './inline-edit.scss';
  *
  * @event zn-event-name - Emitted as an example.
  *
- * @slot - The default slot.
+ * @slot - Default slot. When `input-type` is `select`, accepts `zn-option` elements to define select options. If provided, takes precedence over the `options` property.
  * @slot example - An example slot.
+ * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
  *
  * @csspart base - The component's base wrapper.
  *
@@ -34,47 +36,94 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
 
   private readonly formControlController = new FormControlController(this, {
     defaultValue: (control: ZnInlineEdit) => control.defaultValue,
+    value: (control: ZnInlineEdit) => {
+      if (control.multiple) {
+        const val = typeof control.value === 'string'
+          ? control.value.split(' ').filter(v => v !== '')
+          : control.value;
+        return val.length > 0 ? val : '';
+      }
+      return control.value;
+    },
   });
+  private readonly hasSlotController = new HasSlotController(this, 'help-text', '[default]');
 
-  @property({reflect: true}) value: string;
+  @property() value: string | string[] = '';
 
   @property() name: string;
 
-  @property({reflect: true}) placeholder: string;
+  @property({ reflect: true }) placeholder: string;
 
-  @property({attribute: 'edit-text'}) editText: string;
+  @property({ attribute: 'edit-text' }) editText: string;
 
-  @property({type: Boolean}) disabled: boolean
+  @property({ type: Boolean }) disabled: boolean
 
-  @property({type: Boolean}) inline: boolean
+  @property({ type: Boolean }) inline: boolean
 
-  @property({type: Boolean}) padded: boolean
+  @property({ type: Boolean }) padded: boolean
 
-  @property({reflect: true}) size: 'small' | 'medium' | 'large' = 'medium';
+  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
 
-  @property({type: Boolean}) required: boolean
+  @property({ type: Boolean }) required: boolean
 
   @property() pattern: string;
 
-  @property({attribute: "input-type"}) inputType: 'select' | 'text' | 'data-select' | 'number' = 'text';
+  @property({ type: Boolean, reflect: true }) multiple: boolean;
 
-  @property({type: Object}) options: { [key: string]: string } = {};
+  @property({ type: Boolean }) clearable: boolean;
 
-  @property({attribute: 'provider'}) selectProvider: string;
+  @property() min: string | number;
 
-  @property({attribute: 'icon-position', type: Boolean}) iconPosition: 'start' | 'end' | 'none' = 'none';
+  @property() max: string | number;
+
+  @property() step: number | 'any';
+
+  @property({ attribute: "input-type" }) inputType: 'select' | 'text' | 'data-select' | 'number' | 'textarea' = 'text';
+
+  @property({ type: Object }) options: { [key: string]: string } = {};
+
+  @property({ attribute: 'provider' }) selectProvider: string;
+
+  @property({ attribute: 'icon-position', type: Boolean }) iconPosition: 'start' | 'end' | 'none' = 'none';
+
+  /**
+   * The URL to fetch options from. When set , the component fetches JSON from this URL and renders the results as
+   * options. The expected format is an array of objects with `key` and `value` properties:
+   * `[{"key": "us", "value": "United States"}, ...]`
+   * When not set, the component works exactly as before using slotted `<zn-option>` elements.
+   * Only works with type select.
+   */
+  @property({ attribute: 'data-uri' }) dataUri: string;
+
+  /**
+   * Context data to send as a header when fetching options from the URL specified by the `src` property.
+   */
+  @property({ attribute: 'context-data' }) contextData: string;
+
+  /** Enables search/filtering on select inputs. */
+  @property({ type: Boolean }) search: boolean;
 
   /** The input's help text. If you need to display HTML, use the `help-text` slot instead. **/
-  @property({attribute: 'help-text'}) helpText: string = '';
+  @property({ attribute: 'help-text' }) helpText: string = '';
 
+  /** The text direction for the input (ltr or rtl) **/
+  @property() dir: 'ltr' | 'rtl' | 'auto' = 'auto';
+
+  /**
+   * Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
+   * [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
+   */
+  @property() autocomplete: string;
 
   @state() private hasFocus: boolean;
 
   @state() private isEditing: boolean;
 
+  private _valueBeforeEdit: string | string[];
+
   @query('.ai__input') input: ZnInput | ZnSelect;
 
-  @defaultValue('value') defaultValue: string;
+  @defaultValue('value') defaultValue: string | string[];
 
   get validity(): ValidityState {
     return this.input?.validity;
@@ -105,8 +154,8 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
     document.addEventListener('keydown', this.escKeyHandler);
     document.addEventListener('keydown', this.submitKeyHandler);
     document.addEventListener('click', this.mouseEventHandler);
-    this.addEventListener('mousedown', this.captureMouseDown, {capture: true});
-    this.addEventListener('keydown', this.captureKeyDown, {capture: true});
+    this.addEventListener('mousedown', this.captureMouseDown, { capture: true });
+    this.addEventListener('keydown', this.captureKeyDown, { capture: true });
   }
 
   disconnectedCallback() {
@@ -123,13 +172,23 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
     this.input.addEventListener('onclick', this.handleEditClick);
   }
 
-  @watch('value', {waitUntilFirstUpdate: true})
+  protected willUpdate(changedProperties: PropertyValues) {
+    if (changedProperties.has('value') || changedProperties.has('multiple')) {
+      if (this.multiple && typeof this.value === 'string') {
+        this.value = this.value.split(' ').filter(v => v !== '');
+      } else if (!this.multiple && Array.isArray(this.value)) {
+        this.value = (this.value as string[]).join(' ');
+      }
+    }
+  }
+
+  @watch('value', { waitUntilFirstUpdate: true })
   async handleValueChange() {
     await this.updateComplete;
     this.formControlController.updateValidity();
   }
 
-  @watch('isEditing', {waitUntilFirstUpdate: true})
+  @watch('isEditing', { waitUntilFirstUpdate: true })
   async handleIsEditingChange() {
     await this.updateComplete;
     if (this.input instanceof ZnSelect && !this.isEditing) {
@@ -139,24 +198,29 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
 
   mouseEventHandler = (e: MouseEvent) => {
     if (this.isEditing && !this.contains(e.target as Node)) {
-      this.isEditing = false;
-      this.emit('zn-change');
-      this.input.blur();
+      const hasChanged = Array.isArray(this.value)
+        ? JSON.stringify(this.value) !== JSON.stringify(this._valueBeforeEdit)
+        : this.value !== this._valueBeforeEdit;
+
+      if (!hasChanged) {
+        this.isEditing = false;
+        this.input.blur();
+      }
     }
   };
 
   escKeyHandler = (e: KeyboardEvent) => {
     if (e.key === 'Escape' && this.isEditing) {
       this.isEditing = false;
-      this.value = this.defaultValue;
+      this.value = this._valueBeforeEdit;
       this.input.blur();
     }
   };
 
   submitKeyHandler = (e: KeyboardEvent) => {
-    if (e.key === 'Enter' && this.isEditing) {
+    if (e.key === 'Enter' && this.isEditing && !e.shiftKey) {
       this.isEditing = false;
-      this.emit('zn-submit', {detail: {value: this.value, element: this}});
+      this.emit('zn-submit', { detail: { value: this.value, element: this } });
       this.formControlController.submit();
       this.input.blur();
     }
@@ -181,20 +245,23 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
     if (this.disabled) {
       return;
     }
+    if (!this.isEditing) {
+      this._valueBeforeEdit = this.value;
+    }
     this.isEditing = true;
   }
 
   handleSubmitClick = (e: MouseEvent) => {
     e.preventDefault();
     this.isEditing = false;
-    this.emit('zn-submit', {detail: {value: this.value, element: this}});
+    this.emit('zn-submit', { detail: { value: this.value, element: this } });
     this.formControlController.submit();
   };
 
   handleCancelClick = (e: MouseEvent) => {
     e.preventDefault();
     this.isEditing = false;
-    this.value = this.defaultValue;
+    this.value = this._valueBeforeEdit;
   };
 
   handleBlur = () => {
@@ -205,12 +272,31 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
     if (this.disabled || !this.isEditing) {
       return;
     }
+
     this.value = (e.target as (HTMLInputElement | HTMLSelectElement)).value;
     this.emit('zn-input');
   };
 
+  private moveSlottedOptionsToSelect() {
+    if (!(this.input instanceof ZnSelect)) return;
+
+    const options = Array.from(this.querySelectorAll('zn-option'));
+    options.forEach(option => {
+      this.input.appendChild(option);
+    });
+  }
+
+  handleSlotChange = async () => {
+    await this.updateComplete;
+    if (this.input instanceof ZnSelect) {
+      this.moveSlottedOptionsToSelect();
+    }
+  };
+
   protected render() {
     const hasEditText = this.editText;
+    const hasHelpTextSlot = this.hasSlotController.test('help-text');
+    const hasHelpText = this.helpText ? true : hasHelpTextSlot;
 
     // Default input type to select if options are provided
     if (Object.keys(this.options).length > 0) {
@@ -233,6 +319,9 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
       case 'number':
         input = this._getNumberInput();
         break;
+      case 'textarea':
+        input = this._getTextAreaInput();
+        break
       default:
         input = this._getTextInput();
     }
@@ -245,7 +334,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
         'ai--disabled': this.disabled,
         'ai--inline': this.inline,
         'ai--padded': this.padded,
-      })}">
+      })}" dir="ltr">
 
         <div class="ai__left" @click="${this.disabled ? undefined : this.handleEditClick}">
           ${input}
@@ -271,10 +360,44 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
               <zn-button type="button" @click="${this.handleCancelClick}" icon="close" size="x-small" icon-size="20"
                          color="secondary"></zn-button>`}
         </div>
-      </div>`;
+      </div>
+
+      ${this.isEditing && hasHelpText ? html`
+        <div
+          part="form-control-help-text"
+          id="help-text"
+          class="form-control__help-text"
+          aria-hidden="false">
+          <slot name="help-text">${this.helpText}</slot>
+        </div>
+      ` : ''}
+
+      ${this.inputType === 'select' ? html`
+        <div style="display: none;">
+          <slot @slotchange="${this.handleSlotChange}"></slot>
+        </div>
+      ` : ''}`;
   }
 
 
+  protected _getTextAreaInput(): HTMLTemplateResult {
+    return html`
+      <zn-textarea
+        class="ai__input"
+        name="${this.name}"
+        size="${this.size}"
+        resize="auto"
+        rows="1"
+        .value="${this.value}"
+        placeholder="${this.placeholder}"
+        pattern=${ifDefined(this.pattern)}
+        autocomplete=${ifDefined(this.autocomplete)}
+        dir="${this.dir}"
+        @zn-input="${this.handleInput}"
+        @zn-blur="${this.handleBlur}">
+      </zn-textarea>`;
+  }
+
   protected _getTextInput(): HTMLTemplateResult {
     return html`
       <zn-input type="text"
@@ -283,8 +406,10 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
                 size="${this.size}"
                 value="${this.value}"
                 placeholder="${this.placeholder}"
-                help-text="${ifDefined(this.helpText)}"
                 pattern=${ifDefined(this.pattern)}
+                autocomplete=${ifDefined(this.autocomplete)}
+                required=${ifDefined(this.required)}
+                dir="${this.dir}"
                 @zn-input="${this.handleInput}"
                 @zn-blur="${this.handleBlur}">
       </zn-input>`;
@@ -298,27 +423,44 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
                 size="${this.size}"
                 value="${this.value}"
                 placeholder="${this.placeholder}"
-                help-text="${ifDefined(this.helpText)}"
                 pattern=${ifDefined(this.pattern)}
+                autocomplete=${ifDefined(this.autocomplete)}
+                min=${ifDefined(this.min)}
+                max=${ifDefined(this.max)}
+                step=${ifDefined(this.step)}
+                required=${ifDefined(this.required)}
+                dir="${this.dir}"
                 @zn-input="${this.handleInput}"
                 @zn-blur="${this.handleBlur}">
       </zn-input>`;
   }
 
   protected _getSelectInput(): HTMLTemplateResult {
+    const hasSlottedOptions = this.hasSlotController.test('[default]');
+    const value = this.multiple && Array.isArray(this.value) ? (this.value as string[]).join(' ') : this.value;
+
     return html`
       <zn-select class="ai__input"
                  name="${this.name}"
-                 value="${this.value}"
-                 help-text="${ifDefined(this.helpText)}"
+                 value="${ifDefined(value)}"
                  size="${this.size}"
                  placeholder="${this.placeholder}"
+                 required=${ifDefined(this.required)}
+                 dir="${this.dir}"
+                 multiple=${ifDefined(this.multiple)}
+                 clearable=${ifDefined(this.isEditing ? this.clearable : undefined)}
+                 ?search=${this.search}
+                 non-removable
+                 data-uri=${ifDefined(this.dataUri)}
+                 context-data=${ifDefined(this.contextData)}
                  @zn-input="${this.handleInput}"
                  @zn-blur="${this.handleBlur}">
-        ${Object.keys(this.options).map(key => html`
-          <zn-option value="${key}">
-            ${this.options[key]}
-          </zn-option>`)}
+        ${!hasSlottedOptions
+          ? Object.keys(this.options).map(key => html`
+            <zn-option value="${key}">
+              ${this.options[key]}
+            </zn-option>`)
+          : ''}
       </zn-select>`
   }
 
@@ -328,9 +470,11 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
                       name="${this.name}"
                       value="${this.value}"
                       icon-position="${ifDefined(this.iconPosition)}"
-                      help-text="${ifDefined(this.helpText)}"
                       size="${this.size}"
                       provider="${this.selectProvider}"
+                      clearable=${ifDefined(this.isEditing ? this.clearable : undefined)}
+                      required=${ifDefined(this.required)}
+                      dir="${this.dir}"
                       @zn-input="${this.handleInput}"
                       @zn-blur="${this.handleBlur}">
       </zn-data-select>`;

package/src/components/inline-edit/inline-edit.scss

@@ -59,6 +59,22 @@
   &__input {
     height: unset;
     opacity: 1;
+
+    // Force left alignment for RTL text inputs
+    &[dir="rtl"]::part(input),
+    &[dir="rtl"]::part(textarea),
+    &[dir="rtl"]::part(combobox) {
+      text-align: left;
+    }
+  }
+
+  // Hide webkit spin buttons for number inputs when not editing
+  &:not(.ai--editing) {
+    .ai__input::part(input)::-webkit-inner-spin-button,
+    .ai__input::part(input)::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
   }
 
   &--padded {
@@ -150,3 +166,16 @@
   }
 }
 
+zn-textarea::part(textarea) {
+  resize: none;
+}
+
+.ai:not(.ai--editing) {
+  zn-textarea::part(textarea) {
+    box-shadow: none;
+    padding-left: 0;
+    padding-right: 0;
+    min-height: 35px;
+  }
+}
+