@kubex/zinc 1.0.115 → 1.0.117

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

@@ -11,6 +11,7 @@ import {property, query, state} from 'lit/decorators.js';
 import {repeat} from 'lit/directives/repeat.js';
 import {watch} from "../../internal/watch";
 import ZincElement, {type ZincFormControl} from '../../internal/zinc-element';
+import ZnDialog from "../dialog";
 import type ZnButton from "../button";
 
 import styles from './file.scss';
@@ -23,12 +24,11 @@ import styles from './file.scss';
  *
  * @dependency zn-button
  * @dependency zn-icon
+ * @dependency zn-dialog
  *
  * @slot label - The file control's label. Alternatively, you can use the `label` attribute.
  * @slot help-text - Text that describes how to use the file control.
  *    Alternatively, you can use the `help-text` attribute.
- * @slot droparea-icon - Optional droparea icon to use instead of the default.
- *    Works best with `<zn-icon>`.
  * @slot trigger - Optional content to be used as trigger instead of the default content.
  *    Opening the file dialog on click and as well as drag and drop will work for this content.
  *    Following attributes will no longer work: *label*, *droparea*, *help-text*, *size*,
@@ -37,6 +37,7 @@ import styles from './file.scss';
  *
  * @event zn-blur - Emitted when the control loses focus.
  * @event zn-change - Emitted when an alteration to the control's value is committed by the user.
+ * @event zn-clear - Emitted when the user confirms clearing the selected file or `src`.
  * @event zn-error - Emitted when multiple files are selected via drag and drop, without
  * the `multiple` property being set.
  * @event zn-focus - Emitted when the control gains focus.
@@ -52,8 +53,12 @@ import styles from './file.scss';
  * @csspart value - The chosen files or placeholder text for the file input.
  * @csspart droparea - The element wrapping the drop zone.
  * @csspart droparea-background - The background of the drop zone.
- * @csspart droparea-icon - The container that wraps the icon for the drop zone.
- * @csspart droparea-value - The text for the drop zone.
+ * @csspart upload - The upload button shown in the droparea when no file is selected.
+ * @csspart preview - The image preview rendered in the droparea for previewable files.
+ * @csspart filename - The filename label rendered in the droparea for non-previewable files.
+ * @csspart clear - The clear button rendered in the droparea when a file is present.
+ * @csspart clear-confirm - The confirmation dialog shown before clearing the file.
+ * @csspart link - The current link anchor rendered when `show-link` is enabled.
  * @csspart trigger - The container that wraps the trigger.
  *
  * @animation file.iconDrop - The animation to use for the file icon
@@ -65,6 +70,9 @@ import styles from './file.scss';
  */
 export default class ZnFile extends ZincElement implements ZincFormControl {
   static styles: CSSResultGroup = unsafeCSS(styles);
+  static dependencies = {
+    'zn-dialog': ZnDialog
+  };
 
   private readonly formControlController = new FormControlController(this, {
     assumeInteractionOn: ['zn-change'],
@@ -76,6 +84,7 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
   private readonly localize = new LocalizeController(this);
 
   @state() private userIsDragging = false;
+  @state() private fileObjectUrl: string | null = null;
 
   @query('.input__control') input: HTMLInputElement;
 
@@ -87,6 +96,8 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
 
   @query('.input__value') inputChosen: HTMLSpanElement;
 
+  @query('.clear-confirm') clearConfirmDialog: HTMLElement & { show: () => void; hide: () => void };
+
   /**
    * The selected files as a FileList object containing a list of File objects.
    * The FileList behaves like an array, so you can get the number of selected files
@@ -99,6 +110,7 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
   set files(v: FileList | null) {
     if (this.input) {
       this.input.files = v;
+      this.updatePreview();
     }
   }
 
@@ -211,6 +223,26 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
   /** Suppress the value from being displayed in the file control */
   @property({attribute: 'hide-value', type: Boolean}) hideValue = false;
 
+  /**
+   * URL of an already-uploaded file (e.g., from a CDN) to display as the current value
+   * when no file has been selected locally. If the URL points to an image, it is rendered
+   * as a preview inside the droparea. Otherwise the URL is shown as a filename.
+   */
+  @property() src = '';
+
+  /**
+   * When enabled, automatically submit the surrounding form whenever the value changes
+   * (file selected, dropped, or cleared). Useful for forms that only contain this control
+   * and a CSRF token.
+   */
+  @property({type: Boolean, attribute: 'trigger-submit'}) triggerSubmit = false;
+
+  /**
+   * When enabled, render the current link (`previewSrc`) as a clickable URL below the control.
+   * Useful for showing the existing CDN link alongside the preview.
+   */
+  @property({type: Boolean, attribute: 'show-link'}) showLink = false;
+
   /** Gets the validity state object */
   get validity() {
     return this.input?.validity;
@@ -343,8 +375,13 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
     e.preventDefault();
     e.stopPropagation();
 
+    this.updatePreview();
     this.emit('zn-input');
     this.emit('zn-change');
+
+    if (this.triggerSubmit) {
+      this.formControlController.submit();
+    }
   }
 
   private handleDragOver = (e: DragEvent) => {
@@ -439,6 +476,57 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
     this.input.dispatchEvent(new Event('change'));
   }
 
+  /** Open the confirm dialog before clearing. */
+  private handleClearClick = (e: Event) => {
+    e.preventDefault();
+    e.stopPropagation();
+    this.clearConfirmDialog?.show();
+  }
+
+  /** Clear the current value after the user confirms. */
+  private confirmClear = () => {
+    const hadLocalFile = (this.files?.length ?? 0) > 0;
+    this.input.value = '';
+    this.files = null;
+    // If only an external `src` was present, clear it. If a local file was selected on top of
+    // an external src, leave the src so the droparea reverts to the originally-supplied preview.
+    if (!hadLocalFile) {
+      this.src = '';
+    }
+    this.clearConfirmDialog?.hide();
+    this.input.dispatchEvent(new Event('change'));
+    this.emit('zn-clear');
+  }
+
+  private updatePreview() {
+    if (this.fileObjectUrl) {
+      URL.revokeObjectURL(this.fileObjectUrl);
+      this.fileObjectUrl = null;
+    }
+
+    const file = this.files?.[0];
+    if (file && file.type.startsWith('image/')) {
+      this.fileObjectUrl = URL.createObjectURL(file);
+    }
+  }
+
+  /**
+   * Returns the URL currently shown in the droparea — the locally-selected file's object URL
+   * if a file is selected, otherwise the externally supplied `src`. Useful for getting the
+   * current CDN link to submit alongside form data.
+   */
+  get previewSrc(): string {
+    return this.fileObjectUrl ?? this.src ?? '';
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.fileObjectUrl) {
+      URL.revokeObjectURL(this.fileObjectUrl);
+      this.fileObjectUrl = null;
+    }
+  }
+
   private renderFileValueWithDelete(): HTMLTemplateResult {
     // files as an array
     const files = Array.from(this.files || []);
@@ -464,7 +552,6 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
                   class="input__delete"
                   color="transparent"
                   icon="close"
-                  size="content"
                   icon-size="18"
                   @click="${this.removeFile}"
                   part="delete"></zn-button>` : ''}
@@ -474,30 +561,75 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
   }
 
   private renderDroparea(): HTMLTemplateResult {
+    const files = Array.from(this.files || []);
+    const firstFile = files[0];
+
+    const hasLocalFile = files.length > 0;
+    const hasExternalSrc = !hasLocalFile && !!this.src;
+    const hasValue = hasLocalFile || hasExternalSrc;
+
+    const imageSrc = hasLocalFile ? this.fileObjectUrl : (hasExternalSrc ? this.src : null);
+    const showImagePreview = !!imageSrc;
+    const displayName = hasLocalFile ? firstFile.name : (hasExternalSrc ? this.src : '');
+
+    let buttonText = this.localize.term('fileButtonText');
+    if (this.multiple) buttonText = this.localize.term('fileButtonTextMultiple');
+    if (this.webkitdirectory) buttonText = this.localize.term('folderButtonText');
+
     return html`
       <div
-        class="droparea"
+        class=${classMap({
+          'droparea': true,
+          'droparea--has-preview': showImagePreview,
+        })}
         @click="${this.handleClick}"
         @keypress="${this.handleClick}"
         @focus="${this.handleFocus}"
         @blur="${this.handleBlur}"
         tabindex="${this.disabled ? '-1' : '0'}"
         part="droparea">
+        ${hasValue ? html`
+          <zn-button
+            class="droparea__clear"
+            icon="close"
+            icon-size="18"
+            color="default"
+            outline
+            ?disabled=${this.disabled}
+            @click=${this.handleClearClick}
+            part="clear"
+            style="z-index: 1000;"
+            aria-label="${this.localize.term('clearEntry')}"></zn-button>
+        ` : ''}
         <div
           class="droparea__background"
           part="droparea-background">
-          <span part="droparea-icon" class="droparea__icon">
-            <slot name="droparea-icon">
-              <zn-icon src="upload_file"></zn-icon>
-            </slot>
-          </span>
-          <p class="droparea__text"
-             part="droparea-value">
-            <strong>${this.localize.term(this.webkitdirectory ? 'folderDragDrop' : 'fileDragDrop')}</strong>
-            ${this.renderFileValueWithDelete()}
-          </p>
+          ${showImagePreview
+            ? html`<img
+                class="droparea__preview"
+                src=${imageSrc!}
+                alt=${displayName}
+                part="preview">`
+            : (hasValue
+              ? html`<span class="droparea__filename" part="filename">${displayName}</span>`
+              : html`
+                <zn-button
+                  class="droparea__upload"
+                  icon="cloud_upload"
+                  icon-size="20"
+                  color="default"
+                  outline
+                  ?disabled=${this.disabled}
+                  part="upload">
+                  ${buttonText}
+                </zn-button>`)}
         </div>
       </div>
+      <zn-dialog class="clear-confirm" label="${this.localize.term('clearEntry')}" part="clear-confirm">
+        <p class="clear-confirm__text">Are you sure you want to remove this file?</p>
+        <zn-button slot="footer" outline dialog-closer>Cancel</zn-button>
+        <zn-button slot="footer" color="error" @click=${this.confirmClear}>Remove</zn-button>
+      </zn-dialog>
     `;
   }
 
@@ -520,7 +652,6 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
           ?disabled=${this.disabled}
           exportparts="base:button__base"
           part="button"
-          size="small"
           outline>
           ${buttonText}
         </zn-button>
@@ -567,6 +698,16 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
               ${this.droparea ? this.renderDroparea() : this.renderButton()}
             </div>
 
+            ${this.showLink && this.previewSrc ? html`
+              <a
+                class="form-control__link"
+                part="link"
+                href=${this.previewSrc}
+                target="_blank"
+                rel="noopener noreferrer"
+                title=${this.previewSrc}>${this.previewSrc}</a>
+            ` : ''}
+
             <div
               aria-hidden="${hasHelpText ? 'false' : 'true'}"
               class="form-control__help-text"

package/src/components/file/file.scss

@@ -99,15 +99,17 @@
 .droparea {
   --highlight-color: var(--zn-color-primary-600);
 
-  border: 2px dashed var(--zn-input-border-color);
+  position: relative;
+  border: 1px solid var(--zn-input-border-color);
+  border-radius: var(--zn-border-radius-medium);
   font: var(--zn-font-size-medium);
-  padding: var(--zn-spacing-x-large) var(--zn-spacing-large);
+  min-height: 180px;
   transition: var(--zn-transition-medium) background,
   var(--zn-transition-medium) border-color;
 }
 
 .droparea:focus-visible {
-  border: 2px dashed var(--zn-color-primary-600);
+  border-color: var(--zn-color-primary-600);
   outline: var(--zn-focus-ring);
   outline-offset: var(--zn-focus-ring-offset);
 }
@@ -124,52 +126,105 @@
 .droparea__background {
   align-items: center;
   display: flex;
+  justify-content: center;
   gap: var(--zn-spacing-x-small);
-  padding: var(--zn-spacing-x-small) var(--zn-spacing-medium);
+  padding: var(--zn-spacing-large) var(--zn-spacing-medium);
+  width: 100%;
+  height: 100%;
+  min-height: inherit;
+  box-sizing: border-box;
 }
 
-.droparea__icon {
-  align-items: center;
-  color: var(--highlight-color);
-  display: flex;
-  font-size: var(--zn-spacing-3x-large);
+.droparea__clear {
+  position: absolute;
+  top: var(--zn-spacing-small);
+  right: var(--zn-spacing-small);
+  z-index: 1;
 }
 
-.file-wrapper {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+.droparea__upload {
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
 }
 
-.droparea__text {
-  display: flex;
-  flex-direction: column;
-  gap: var(--zn-spacing-3x-small);
-  margin: 0;
+.droparea--has-preview .droparea__background {
+  --zn-droparea-checker-size: 12px;
+  --zn-droparea-checker-a: var(--zn-color-neutral-50);
+  --zn-droparea-checker-b: var(--zn-color-neutral-100);
+
+  background-color: var(--zn-droparea-checker-a);
+  background-image:
+    linear-gradient(45deg, var(--zn-droparea-checker-b) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--zn-droparea-checker-b) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--zn-droparea-checker-b) 75%),
+    linear-gradient(-45deg, transparent 75%, var(--zn-droparea-checker-b) 75%);
+  background-size: var(--zn-droparea-checker-size) var(--zn-droparea-checker-size);
+  background-position:
+    0 0,
+    0 calc(var(--zn-droparea-checker-size) / 2),
+    calc(var(--zn-droparea-checker-size) / 2) calc(var(--zn-droparea-checker-size) / -2),
+    calc(var(--zn-droparea-checker-size) / -2) 0;
+  border-radius: calc(var(--zn-border-radius-medium) - 1px);
+}
+
+.droparea__preview {
+  /**
+   * SVGs without intrinsic dimensions fall back to a 300x150 default in <img>, which
+   * makes them look cramped or invisible at small container widths. Force an explicit
+   * box (full container width, fixed height) and use object-fit so loaded images stay
+   * inside the box. The text properties below also wrap alt text inside the same box
+   * when the image fails to load (e.g. a broken CDN URL), instead of letting it push
+   * the container out.
+   */
+  display: block;
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 150px;
+  max-width: 100%;
+  object-fit: contain;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  text-align: center;
+  font-size: var(--zn-input-help-text-font-size-medium);
+  color: var(--zn-input-color);
+}
+
+.droparea__filename {
+  color: var(--zn-input-color);
+  font-size: var(--zn-input-label-font-size-medium);
+  font-weight: var(--zn-font-weight-medium);
+  word-break: break-all;
+  text-align: center;
+  padding: 0 var(--zn-spacing-3x-large);
 }
 
-.droparea__text strong {
-  color: var(--highlight-color);
-  font-weight: var(--zn-font-weight-bold);
+.file-wrapper {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
 }
 
 /* Sizes */
 /* stylelint-disable-next-line no-descending-specificity */
 .form-control--small .droparea {
   font: var(--zn-font-size-small);
+  min-height: 140px;
 }
 
-.form-control--small .droparea__icon {
-  font-size: var(--zn-spacing-2x-large)
+.form-control--small .droparea__preview {
+  height: 110px;
 }
 
 /* stylelint-disable-next-line no-descending-specificity */
 .form-control--large .droparea {
   font: var(--zn-font-size-large);
+  min-height: 220px;
 }
 
-.form-control--large .droparea__icon {
-  font-size: var(--zn-spacing-4x-large)
+.form-control--large .droparea__preview {
+  height: 190px;
 }
 
 /* Disabled Styles */
@@ -181,20 +236,58 @@
 
 :host(:not([disabled])) .form-control--user-dragging .droparea {
   background: var(--zn-color-primary-50);
-  border: 2px solid var(--zn-color-primary-600);
+  border-color: var(--zn-color-primary-600);
   cursor: pointer;
 }
 
 :host(:not([disabled])) .droparea:not(:focus-visible):hover {
   --highlight-color: var(--zn-color-primary-800);
 
-  border: 2px dashed var(--zn-color-primary-700);
-  background-color: var(--zn-color-primary-50);
+  border-color: var(--zn-color-primary-700);
   cursor: pointer;
 }
 
+:host(:not([disabled])) .droparea:hover .droparea__upload::part(base),
+:host(:not([disabled])) .droparea__upload:hover::part(base),
+:host(:not([disabled])) .form-control--user-dragging .droparea__upload::part(base) {
+  background: var(--zn-color-primary-50);
+  border-color: var(--zn-color-primary-700);
+  color: var(--zn-color-primary-800);
+}
+
+/**
+ * Make the icon inside the upload button transparent to pointer events so the cursor is
+ * treated as being over the button itself. Without this, hovering the small icon area
+ * sometimes fails to trigger the button's :hover state, leaving it un-highlighted.
+ */
+.droparea__upload::part(icon) {
+  pointer-events: none;
+}
+
 /* Validation */
 /* stylelint-disable-next-line no-descending-specificity */
 :host([data-user-invalid]:not([disabled])) .droparea {
-  border: 2px dashed var(--zn-color-error);
+  border-color: var(--zn-color-error);
+}
+
+/* Confirm dialog content spacing */
+.clear-confirm__text {
+  margin: 0;
+  color: var(--zn-input-color);
+}
+
+/* Current link display */
+.form-control__link {
+  display: inline-block;
+  margin-top: var(--zn-spacing-x-small);
+  font-size: var(--zn-input-help-text-font-size-medium);
+  color: var(--zn-color-primary-700);
+  word-break: break-all;
+  text-decoration: none;
+  max-width: 100%;
+}
+
+.form-control__link:hover {
+  color: var(--zn-color-primary-800);
+  text-decoration: underline;
 }

package/src/components/header/header.component.ts

@@ -41,8 +41,6 @@ export default class ZnHeader extends ZincElement {
   @property() caption: string;
   @property() icon: string;
 
-  @property() description: string;
-
   @property({type: Array}) navigation = [];
 
   @property({attribute: 'full-width', type: Boolean}) fullWidth: boolean;
@@ -142,7 +140,7 @@ export default class ZnHeader extends ZincElement {
           ${hasPreviousPath ? html`
             <a href="${this.previousPath}" class="caption__back"
                data-target="${this.previousTarget ? this.previousTarget : ''}">
-              <zn-button size="content" icon="arrow_back" icon-size="24" color="transparent"></zn-button>
+              <zn-button icon="arrow_back" icon-size="20" color="transparent"></zn-button>
             </a>` : null}
 
           ${hasDefaultSlot ? html`
@@ -154,15 +152,11 @@ export default class ZnHeader extends ZincElement {
             <div part="header-left" class="header__left">
               <span class="header__caption" part="header-caption">
                 ${this.icon ? html`
-                  <zn-icon class="header__icon" src="${this.icon}"></zn-icon>` : null}
+                  <zn-icon class="header__icon" size=20 src="${this.icon}"></zn-icon>` : null}
                 ${hasBreadcrumb ? html`
                   <slot name="breadcrumb" class="breadcrumb"></slot>` : null}
                 <slot name="caption">${this.caption}</slot>
                 </span>
-              ${this.description ? html`
-                  <span class="header__description"
-                        part="header-description">${this.description}</span>`
-                : ''}
             </div>
 
             <div class="header__right">

package/src/components/header/header.scss

@@ -8,20 +8,17 @@
 .header {
   flex-grow: 1;
 
-  // This isn't correct fix this also
   .caption {
-    //padding: var(--zn-spacing-small) 0;
     justify-content: space-between;
-    gap: var(--zn-spacing-2x-small);
+    gap: var(--zn-base-gap);
     max-width: 100%;
-    min-height: 58px;
   }
 
   &__caption {
     font-weight: var(--zn-font-weight-medium);
     font-size: var(--zn-font-size-large);
     color: rgba(var(--zn-text-panel-title), 100%);
-    line-height: 28px;
+    line-height: var(--zn-icon-size, 20px);
     margin: 0;
     overflow: hidden;
     white-space: nowrap;
@@ -31,17 +28,6 @@
     align-items: center;
     text-wrap: auto;
   }
-
-  // remove the padding on the nav
-  &--has-nav {
-    .caption {
-      padding-bottom: 0;
-    }
-
-    .content {
-      padding-bottom: var(--zn-spacing-x-small);
-    }
-  }
 }
 
 .caption__back {
@@ -126,8 +112,7 @@
     height: fit-content;
     gap: 10px;
     margin: 0 auto;
-    padding-left: var(--zn-spacing-medium);
-    padding-right: var(--zn-spacing-medium);
+    padding: var(--zn-base-gap);
   }
 
   &__left {
@@ -135,7 +120,6 @@
     justify-content: center;
     flex-direction: column;
     gap: 1px;
-    min-height: 24px;
     flex-shrink: 1;
     max-width: 100%;
   }
@@ -147,12 +131,6 @@
     min-width: 20px;
   }
 
-  &__description {
-    display: contents;
-    font-size: var(--zn-font-size-medium);
-    line-height: 28px;
-  }
-
   .navless {
     min-height: 10px;
   }
@@ -194,6 +172,7 @@
     align-items: center;
     gap: 10px;
     max-width: 100%;
+    line-height: var(--zn-icon-size, 20px);
 
     a {
       display: flex;