@kubex/zinc 1.1.67 → 1.1.69

package/src/components/defined-label/defined-label.component.ts

@@ -1,15 +1,23 @@
-import {type CSSResultGroup, html, type PropertyValues, type TemplateResult, unsafeCSS} from 'lit';
+import {type CSSResultGroup, html, nothing, type PropertyValues, type TemplateResult, unsafeCSS} from 'lit';
 import {FormControlController} from '../../internal/form';
 import {ifDefined} from 'lit/directives/if-defined.js';
 import {property, query} from 'lit/decorators.js';
 import {watch} from '../../internal/watch';
 import ZincElement from '../../internal/zinc-element';
+import ZnButton from '../button';
+import ZnDropdown from '../dropdown';
+import ZnInput from '../input';
+import ZnOption from '../option';
+import ZnSelect from '../select';
 import type {ZincFormControl} from '../../internal/zinc-element';
-import type ZnDropdown from '../dropdown';
-import type ZnInput from '../input';
 
 import styles from './defined-label.scss';
 
+interface PredefinedLabel {
+  name: string;
+  options?: string[];
+}
+
 /**
  * @summary This component provides a labeled input with support for predefined and custom labels,
  * allowing users to select or enter label-value pairs within a dropdown interface.
@@ -21,31 +29,51 @@ import styles from './defined-label.scss';
  * @dependency zn-dropdown
  * @dependency zn-input
  * @dependency zn-option
- * @dependency zn-panel
  * @dependency zn-select
- * @dependency zn-sp
  *
  * @csspart input - The component's main input.
  * @csspart input-value - The label's value inputs.
  */
 export default class ZnDefinedLabel extends ZincElement implements ZincFormControl {
   static styles: CSSResultGroup = unsafeCSS(styles);
+  static dependencies = {
+    'zn-button': ZnButton,
+    'zn-dropdown': ZnDropdown,
+    'zn-input': ZnInput,
+    'zn-option': ZnOption,
+    'zn-select': ZnSelect
+  };
 
   private readonly formControlController = new FormControlController(this, {
     value: (control: this) => control.value + (control.inputValue ? `:${control.inputValue}` : ''),
   });
 
-  @query('.input__control') input: ZnInput;
+  @query('.defined-label__input') input: ZnInput;
   @query('.defined-label__dropdown') dropdown: ZnDropdown;
 
+  /** The selected label key. Also acts as the filter while typing. */
   @property() value: string = '';
+
+  /** The value entered for the selected label. Submitted as `label:value` when present. */
   @property() inputValue: string = '';
+
+  /** The size of the main input. */
   @property({attribute: 'input-size', reflect: true}) inputSize: 'x-small' | 'small' | 'medium' | 'large' = 'medium';
+
+  /** The name of the control. Used for form submission. */
   @property() name: string = 'label';
+
+  /** The title of the main input. */
   @property() title: string;
+
+  /** Disables the control. */
   @property({type: Boolean}) disabled: boolean = false;
+
+  /** Allows labels that aren't in the predefined list. */
   @property({attribute: 'allow-custom', type: Boolean}) allowCustom: boolean = false;
-  @property({type: Array, attribute: 'predefined-labels'}) predefinedLabels = [];
+
+  /** The predefined labels. Entries are either a string or `{name, options}`. */
+  @property({type: Array, attribute: 'predefined-labels'}) predefinedLabels: (PredefinedLabel | string)[] = [];
 
   get validationMessage() {
     return this.input.validationMessage;
@@ -83,6 +111,14 @@ export default class ZnDefinedLabel extends ZincElement implements ZincFormContr
     this.formControlController.updateValidity();
   }
 
+  private getFilteredLabels(): PredefinedLabel[] {
+    const filter = this.value.toLowerCase();
+    return this.predefinedLabels
+      .map(label => typeof label === 'string' ? {name: label} : label)
+      .filter((label): label is PredefinedLabel => Boolean(label?.name))
+      .filter(label => !filter || label.name.toLowerCase().includes(filter));
+  }
+
   private handleChange() {
     if (!this.dropdown.open) {
       this.dropdown.show().then(r => r);
@@ -117,14 +153,18 @@ export default class ZnDefinedLabel extends ZincElement implements ZincFormContr
     if (target.hasAttribute('data-label')) this.value = target.getAttribute('data-label') ?? "";
   }
 
-  private handleInputValueInput(e: Event) {
-    const target = e.target as HTMLInputElement | HTMLSelectElement;
-    this.inputValue = target.value.toLowerCase();
-
-    if (target.hasAttribute('data-label')) this.value = target.getAttribute('data-label') ?? "";
-  }
+  private handleFormSubmit(e: Event, label?: string) {
+    // Sync from the submitted row so a partially typed filter never wins over
+    // the row's actual label key, and stale values from other rows are discarded
+    const row = (e.currentTarget as HTMLElement).closest('.defined-label__row');
+    const control = row?.querySelector<ZnInput | ZnSelect>('.defined-label__value');
+    if (label) {
+      this.value = label;
+    }
+    if (control) {
+      this.inputValue = String(control.value ?? '').toLowerCase();
+    }
 
-  private handleFormSubmit() {
     const form = this.formControlController.getForm();
 
     if (form && form.reportValidity()) {
@@ -135,106 +175,89 @@ export default class ZnDefinedLabel extends ZincElement implements ZincFormContr
     }
   }
 
-  render() {
-    let predefinedLabels = html``;
-
-    if (this.predefinedLabels.length > 0) {
-      this.predefinedLabels.forEach((label: { [key: string]: any } | string | null) => {
-        // label = ['name' => 'label', 'options'=>['one', 'two', 'three']]
-        let options: string[] | undefined;
-        if (label && typeof label !== 'string') {
-          options = label.options as string[];
-          label = label.name as string;
-        }
-
-        if (this.value && !label?.toLowerCase().includes(this.value.toLowerCase())) {
-          return;
-        }
-
-        let selector: TemplateResult<1>;
-        if (options && options.length > 0) {
-          selector = html`
-            <zn-select
-              part="input-value"
-              id="input-value input-value-${label}"
-              class="input__control-value input__control-value--${label}"
-              data-label="${label}"
-              @zn-change="${this.handleInputValueChange}"
-              @zn-input="${this.handleInputValueInput}"
-              size="small">
-              <zn-option value="">Select ${label}</zn-option>
-              ${options.map((option: string) => html`
-                <zn-option value="${option}">${option}</zn-option>
-              `)}
-            </zn-select>`;
-        } else {
-          selector = html`
-            <zn-input
-              part="input-value"
-              id="input-value input-value-${label}"
-              class="input__control-value input__control-value--${label}"
-              type="text"
-              data-label="${label}"
-              @zn-change="${this.handleInputValueChange}"
-              @zn-input="${this.handleInputValueInput}"
-              size="small"></zn-input>`;
-        }
-
-        predefinedLabels = html`
-          <div class="defined-label__input">
-            <small>${label}</small>
-            <div class="defined-label__input-wrap">
-              ${selector}
-              <zn-button type="submit" icon="add" @click="${this.handleFormSubmit}"></zn-button>
-            </div>
-          </div>`;
-      });
+  private renderValueControl(label: PredefinedLabel): TemplateResult {
+    if (label.options && label.options.length > 0) {
+      return html`
+        <zn-select
+          part="input-value"
+          class="defined-label__value"
+          data-label="${label.name}"
+          size="small"
+          @zn-change="${this.handleInputValueChange}"
+          @zn-input="${this.handleInputValueChange}">
+          <zn-option value="">Select ${label.name}</zn-option>
+          ${label.options.map(option => html`
+            <zn-option value="${option}">${option}</zn-option>`)}
+        </zn-select>`;
     }
 
     return html`
-      <zn-dropdown class="defined-label__dropdown">
+      <zn-input
+        part="input-value"
+        class="defined-label__value"
+        type="text"
+        placeholder="Label Value"
+        data-label="${label.name}"
+        size="small"
+        @zn-change="${this.handleInputValueChange}"
+        @zn-input="${this.handleInputValueChange}"></zn-input>`;
+  }
+
+  private renderRow(name: string, control: TemplateResult, label?: string): TemplateResult {
+    return html`
+      <div class="defined-label__row">
+        <small class="defined-label__row-label">${name}</small>
+        <div class="defined-label__row-controls">
+          ${control}
+          <zn-button
+            type="submit"
+            icon="add"
+            @click="${(e: Event) => this.handleFormSubmit(e, label)}"></zn-button>
+        </div>
+      </div>`;
+  }
+
+  render() {
+    const labels = this.getFilteredLabels();
+
+    return html`
+      <zn-dropdown class="defined-label__dropdown" sync="width">
         <zn-input
           part="input"
           id="input"
-          class="input__control"
+          class="defined-label__input"
           type="text"
-          title="${this.title}"
+          title="${ifDefined(this.title)}"
           value="${this.value}"
           name="${ifDefined(this.name)}"
           placeholder="Add a Label"
           maxlength="60"
           autocomplete="off"
           size="${this.inputSize}"
+          ?disabled="${this.disabled}"
           @zn-change="${this.handleChange}"
           @zn-input="${this.handleInput}"
           @click="${this.handleClick}"
           slot="trigger"
         ></zn-input>
 
-        <zn-panel class="defined-label__container">
-          <zn-sp flush divide>
-            ${predefinedLabels.values.length > 0 ? predefinedLabels : html`
-              <div class="defined-label__input">
-                <small>Cannot find any predefined labels</small>
-              </div>`}
-
-            ${this.allowCustom && this.value !== '' ? html`
-              <div class="defined-label__input">
-                <small>${this.value}</small>
-                <div class="defined-label__input-wrap">
-                  <zn-input part="input-value"
-                            placeholder="Label Value"
-                            type="text"
-                            size="small"
-                            maxlength="60"
-                            @zn-change="${this.handleInputValueChange}"
-                            @zn-input="${this.handleInputValueInput}"></zn-input>
-                  <zn-button type="submit" icon="add" @click="${this.handleFormSubmit}"></zn-button>
-                </div>
-              </div>` : ''}
-
-          </zn-sp>
-        </zn-panel>
+        <div class="defined-label__panel">
+          ${labels.length > 0
+            ? labels.map(label => this.renderRow(label.name, this.renderValueControl(label), label.name))
+            : html`
+              <div class="defined-label__empty">Cannot find any predefined labels</div>`}
+
+          ${this.allowCustom && this.value !== '' ? this.renderRow(this.value, html`
+            <zn-input
+              part="input-value"
+              class="defined-label__value"
+              placeholder="Label Value"
+              type="text"
+              size="small"
+              maxlength="60"
+              @zn-change="${this.handleInputValueChange}"
+              @zn-input="${this.handleInputValueChange}"></zn-input>`) : nothing}
+        </div>
       </zn-dropdown>
     `;
   }

package/src/components/defined-label/defined-label.scss

@@ -4,40 +4,52 @@
   display: contents;
 }
 
-.defined-label {
-  .input__control, .input__control-value {
-    background-color: rgb(var(--zn-panel));
-  }
+.defined-label__dropdown {
+  width: 100%;
+}
 
-  &__dropdown {
-    width: 100%;
-  }
+.defined-label__panel {
+  display: flex;
+  flex-direction: column;
+  min-width: 260px;
+  max-height: 275px;
+  overflow-y: auto;
+  overscroll-behavior: none;
+  background-color: rgb(var(--zn-panel));
+  border: 1px solid rgb(var(--zn-border-color));
+  border-radius: var(--zn-border-radius);
+  box-shadow: 0 4px 8px -4px rgba(33, 33, 33, 0.1);
+}
 
-  &__container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: var(--zn-spacing-small);
-    width: 100%;
+.defined-label__row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--zn-spacing-x-small);
+  padding: var(--zn-spacing-small);
 
-    zn-sp {
-      max-height: 275px;
-    }
+  & + & {
+    border-top: 1px solid rgb(var(--zn-border-color));
   }
+}
 
-  &__input {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
+.defined-label__row-label {
+  font-size: var(--zn-font-size-small);
+  color: rgb(var(--zn-text-muted));
+}
 
-    &-wrap {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
+.defined-label__row-controls {
+  display: flex;
+  align-items: center;
+  gap: var(--zn-spacing-x-small);
 
-    zn-input, zn-select {
-      flex-grow: 1;
-    }
+  .defined-label__value {
+    flex-grow: 1;
   }
 }
+
+.defined-label__empty {
+  padding: var(--zn-spacing-small);
+  font-size: var(--zn-font-size-small);
+  color: rgb(var(--zn-text-muted));
+  text-align: center;
+}

package/src/components/dropdown/dropdown.component.ts

@@ -335,6 +335,15 @@ export default class ZnDropdown extends ZincElement {
       this.emit('zn-hide');
       topLayerManager.unregisterDropdown(this);
       this.removeOpenListeners();
+
+      // Move focus out of the panel before it becomes aria-hidden/inert,
+      // otherwise the browser blocks aria-hidden on the focused item and warns
+      const active = (this.getRootNode() as Document | ShadowRoot).activeElement as HTMLElement | null;
+      if (active && this.panel.assignedElements({flatten: true}).some(el => el.contains(active))) {
+        this.focusOnTrigger();
+        active.blur();
+      }
+
       this.panel.blur();
       this.panel.hidden = true;
       this.popup.active = false;

package/src/components/editor/editor.component.ts

@@ -247,28 +247,27 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
             onFileUploaded: () => {
               window.onbeforeunload = () => null;
             },
-            upload: (file: File) => {
+            upload: async (file: File) => {
               window.onbeforeunload = () => 'You have unsaved changes. Are you sure you want to leave?';
-              return new Promise((resolve) => {
-                const fd = new FormData();
-                fd.append('filename', file.name);
-                fd.append('size', file.size.toString());
-                fd.append('mimeType', file.type);
-
-                const xhr = new XMLHttpRequest();
-                xhr.open('POST', this.uploadAttachmentUrl, true);
-                xhr.onload = () => {
-                  if (xhr.status === 200) {
-                    const response = JSON.parse(xhr.responseText) as {
-                      uploadPath: string;
-                      uploadUrl: string;
-                      originalFilename: string;
-                    };
-                    resolve({path: response.uploadPath, url: response.uploadUrl, filename: response.originalFilename});
-                  }
-                };
-                xhr.send(fd);
-              });
+
+              const fd = new FormData();
+              fd.append('filename', file.name);
+              fd.append('size', file.size.toString());
+              fd.append('mimeType', file.type);
+
+              const res = await fetch(this.uploadAttachmentUrl, {method: 'POST', body: fd});
+              if (!res.ok) throw new Error(`Upload request failed: ${res.status}`);
+              const response = await res.json() as {
+                uploadPath: string;
+                uploadUrl: string;
+                originalFilename: string;
+              };
+
+              // resolve relative upload targets against the attachment url so both keep
+              // the same base path when the host page rewrites upload-attachment-url (e.g. the
+              // kubex console proxying apps under an app base); absolute urls pass through
+              const url = new URL(response.uploadUrl, new URL(this.uploadAttachmentUrl, window.location.href)).toString();
+              return {path: response.uploadPath, url, filename: response.originalFilename};
             },
           },
         }),

package/src/components/file/file.component.ts

@@ -78,7 +78,13 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
     assumeInteractionOn: ['zn-change'],
     // An explicitly cleared control submits an empty value so the server can
     // remove the stored upload; an untouched empty control submits nothing.
+    // In upload-url mode the control submits the uploaded file's URL string
+    // instead of the file bytes.
     value: (el: ZnFile) => {
+      if (el.uploadUrl) {
+        if (el.src) return el.src;
+        return el.clearedByUser ? '' : undefined;
+      }
       if (el.files?.length) return el.files;
       return el.clearedByUser ? '' : undefined;
     }
@@ -148,12 +154,21 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
    */
   @property({type: String})
   set value(v: string) {
+    // In upload-url mode the value is the uploaded file's URL, held in `src`
+    // (a native file input only accepts an empty string as value).
+    if (this.uploadUrl) {
+      this.src = v ?? '';
+      return;
+    }
     if (this.input) {
       this.input.value = v;
     }
   }
 
   get value() {
+    if (this.uploadUrl) {
+      return this.src ?? '';
+    }
     return this.input?.value;
   }
 
@@ -254,6 +269,16 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
    */
   @property({type: Boolean, attribute: 'show-link'}) showLink = false;
 
+  /**
+   * When set, a chosen file is immediately POSTed (multipart, field `file`) to this URL.
+   * The endpoint must respond with JSON `{"url": "..."}`; that URL becomes the control's
+   * value (and `src` preview) in place of the file bytes, so the control works inside
+   * JSON-serialising hosts such as `zn-page-builder`. Emits `zn-error` when the upload fails.
+   */
+  @property({attribute: 'upload-url'}) uploadUrl = '';
+
+  @state() private uploading = false;
+
   /** Gets the validity state object */
   get validity() {
     return this.input?.validity;
@@ -387,6 +412,14 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
     e.stopPropagation();
 
     this.updatePreview();
+
+    const file = this.files?.[0];
+    if (this.uploadUrl && file) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      this.uploadFile(file);
+      return;
+    }
+
     this.emit('zn-input');
     this.emit('zn-change');
 
@@ -395,6 +428,42 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
     }
   }
 
+  /**
+   * Uploads the chosen file to `uploadUrl` and adopts the returned URL as the
+   * control's value. The local file preview stays visible while the upload runs.
+   */
+  private async uploadFile(file: File) {
+    this.uploading = true;
+    try {
+      const body = new FormData();
+      body.append('file', file, file.name);
+      const response = await fetch(this.uploadUrl, {method: 'POST', body, credentials: 'same-origin'});
+      if (!response.ok) {
+        throw new Error(`upload failed with status ${response.status}`);
+      }
+      const data = await response.json() as { url?: string };
+      if (!data.url) {
+        throw new Error('upload response missing url');
+      }
+      this.src = data.url;
+      this.input.value = '';
+      this.files = null;
+      this.clearedByUser = false;
+      this.emit('zn-input');
+      this.emit('zn-change');
+      if (this.triggerSubmit) {
+        this.formControlController.submit();
+      }
+    } catch (error) {
+      console.warn('<zn-file> upload failed', error);
+      this.input.value = '';
+      this.files = null;
+      this.emit('zn-error');
+    } finally {
+      this.uploading = false;
+    }
+  }
+
   private handleDragOver = (e: DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
@@ -698,6 +767,7 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
           'form-control--large': this.size === 'large',
           'form-control--medium': this.size === 'medium',
           'form-control--small': this.size === 'small',
+          'form-control--uploading': this.uploading,
           'form-control--user-dragging': this.userIsDragging,
         })}"
         @dragenter="${this.handleDragOver}"

package/src/components/page-builder/page-builder.scss

@@ -5,7 +5,7 @@
   // Canonical canvas card/container width, inherited by the section-card
   // component's shadow styles (whose 560px var() fallback only applies when
   // the card is used outside a builder).
-  --pb-card-width: 560px;
+  --pb-card-width: 1024px;
 
   display: block;
   width: 100%;