Add button to remove files

item supports inline for smaller sizes

Author: MrEssex

docs/pages/components/file.md

@@ -6,7 +6,7 @@ layout: component
 ---
 
 ```html:preview
-<zn-file></zn-file>
+<zn-file multiple clearable></zn-file>
 ```
 
 ## Examples

docs/pages/components/item.md

@@ -37,21 +37,35 @@ layout: component
 </zn-item>
 ```
 
+### Icons
+
+```html:preview
+
+<zn-item caption="Full name" icon="person">
+  This is the content
+</zn-item>
+
+<zn-cols layout="1, 1">
+  <zn-item inline icon="person">This is the content</zn-item>
+  <zn-item inline icon="person">This is the content</zn-item>
+</zn-cols>
+```
+
 ### Multiple Actions
 
 Example of multiple actions in a description item.
 
 ```html:preview
 
 <zn-item caption="Address">
-  <p><strong>Company</strong> Example here </p>
-  <p><strong>Line 1</strong> Example here </p>
-  <p><strong>Line 2</strong> Example here </p>
-  <p><strong>Line 3</strong> Example here </p>
-  <p><strong>Town</strong> Example here </p>
-  <p><strong>County</strong> Example here </p>
-  <p><strong>Postal Code</strong> Example here </p>
-  <p><strong>Country</strong> Example here </p>
+  <div><strong>Company</strong> Example here </div>
+  <div><strong>Line 1</strong> Example here </div>
+  <div><strong>Line 2</strong> Example here </div>
+  <div><strong>Line 3</strong> Example here </div>
+  <div><strong>Town</strong> Example here </div>
+  <div><strong>County</strong> Example here </div>
+  <div><strong>Postal Code</strong> Example here </div>
+  <div><strong>Country</strong> Example here </div>
   
   <zn-button id="address-modal" slot="actions" size="x-small" color="secondary" modal>Edit</zn-button>
   <zn-button id="address-modal" slot="actions" size="x-small" color="secondary" modal>Edit</zn-button>

src/components/file/file.component.ts

@@ -8,6 +8,7 @@ import {HasSlotController} from "../../internal/slot";
 import {ifDefined} from "lit/directives/if-defined.js";
 import {LocalizeController} from "../../utilities/localize";
 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 type ZnButton from "../button";
@@ -142,6 +143,9 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
   /** The file control's label. If you need to display HTML, use the `label` slot instead. */
   @property() label = '';
 
+  /** If this is set, then the only way to remove files is to click the cross next to them. */
+  @property({type: Boolean}) clearable = false;
+
   /**
    * The file control's help text.
    * If you need to display HTML, use the `help-text` slot instead.
@@ -413,30 +417,60 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
     this.emit('zn-blur');
   }
 
-  private renderValue(): HTMLTemplateResult {
-    let hasFiles = false;
-    // @ts-expect-error variadic function
-    let fileChosenLabel = this.localize.term('numFilesSelected', 0, this.webkitdirectory);
-
-    if (this.files && this.files?.length > 0) {
-      hasFiles = true;
-      fileChosenLabel = this.files.length === 1
-        ? this.files[0].name
-        // @ts-expect-error variadic function
-        : this.localize.term('numFilesSelected', this.files.length, this.webkitdirectory);
+  /**
+   * Remove a file from the list of files
+   */
+  private removeFile = (e: Event) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const files = Array.from(this.files || []);
+    const file = (e.target as ZnButton).parentElement?.getAttribute('data-file-name');
+
+    const index = files.findIndex(f => f.name === file);
+
+    if (index !== -1) {
+      files.splice(index, 1);
     }
 
+    const dataTransfer = new DataTransfer();
+    files.forEach(f => dataTransfer.items.add(f));
+    this.files = dataTransfer.files;
+    this.input.dispatchEvent(new Event('change'));
+  }
+
+  private renderFileValueWithDelete(): HTMLTemplateResult {
+    // files as an array
+    const files = Array.from(this.files || []);
+    const isClearable = this.clearable;
+
+    // @ts-expect-error variadic
+    const fileChosenLabel = this.localize.term('numFilesSelected', 0, this.webkitdirectory);
     return html`
-      <span
-        class=${classMap({
-          input__value: true,
-          'input__value--hidden': this.hideValue,
-          'input__value--placeholder': !hasFiles,
-        })}
-        part="value">
-        ${fileChosenLabel}
-      </span>
-    `;
+      ${files ? html`
+        <div class="file_wrapper">
+          ${repeat(files, (file: File) => html`
+            <zn-chip
+              class=${classMap({
+                'input__value': true,
+                'input__value--hidden': this.hideValue,
+              })}
+              data-file-name="${file.name}"
+              part="value">
+              ${file.name}
+              ${isClearable ? html`
+                <zn-button
+                  slot="action"
+                  class="input__delete"
+                  color="transparent"
+                  icon="close"
+                  size="content"
+                  icon-size="18"
+                  @click="${this.removeFile}"
+                  part="delete"></zn-button>` : ''}
+            </zn-chip>
+          `)}
+        </div>` : html`${fileChosenLabel}`}`;
   }
 
   private renderDroparea(): HTMLTemplateResult {
@@ -457,11 +491,10 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
               <zn-icon src="upload_file"></zn-icon>
             </slot>
           </span>
-          <p
-            class="droparea__text"
-            part="droparea-value">
+          <p class="droparea__text"
+             part="droparea-value">
             <strong>${this.localize.term(this.webkitdirectory ? 'folderDragDrop' : 'fileDragDrop')}</strong>
-            ${this.renderValue()}
+            ${this.renderFileValueWithDelete()}
           </p>
         </div>
       </div>
@@ -491,7 +524,7 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
           outline>
           ${buttonText}
         </zn-button>
-        ${this.renderValue()}
+        ${this.renderFileValueWithDelete()}
       </div>`;
   }
 

src/components/file/file.scss

@@ -51,6 +51,10 @@
  * The value of the chosen file(s) or the placeholder text
  */
 .input__value {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--zn-spacing-small);
   color: var(--zn-input-color);
   font-size: var(--zn-input-label-font-size-medium);
 }
@@ -59,6 +63,16 @@
   display: none;
 }
 
+.input__delete {
+  cursor: pointer;
+  color: var(--zn-input-color);
+  font-size: var(--zn-input-label-font-size-medium);
+
+  &:hover {
+    color: var(--zn-color-primary-600);
+  }
+}
+
 .input__value--placeholder {
   color: var(--zn-input-help-text-color);
 }
@@ -121,6 +135,12 @@
   font-size: var(--zn-spacing-3x-large);
 }
 
+.file-wrapper {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
 .droparea__text {
   display: flex;
   flex-direction: column;

src/components/item/item.component.ts

@@ -39,6 +39,8 @@ export default class ZnItem extends ZincElement {
 
   @property() icon: string;
 
+  @property({type: Boolean}) inline: boolean;
+
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'listitem');
@@ -59,15 +61,21 @@ export default class ZnItem extends ZincElement {
         'description-item': true,
         'description-item--stacked': this.stacked,
         'description-item--edit-on-hover': this.editOnHover,
+        'description-item--inline': this.inline,
         'description-item--small': this.size === 'small',
         'description-item--medium': this.size === 'medium',
         'description-item--large': this.size === 'large',
       })}>
-        <div class="description-item__icon">
-          ${this.icon ? html`
-            <zn-icon src="${this.icon}" size="20"></zn-icon>` : ''}
-        </div>
-        <div class="description-item__caption">${this.caption}</div>
+
+        ${this.icon ? html`
+          <div class="description-item__header">
+            <div class="description-item__icon">
+              <zn-icon src="${this.icon}" size="20"></zn-icon>
+            </div>
+            <div class="description-item__caption">${this.caption}</div>
+          </div>` : html`
+          <div class="description-item__caption">${this.caption}</div>`}
+
         <div class="description-item__content">
           <div class="description-item__content-inner">
             <slot></slot>

src/components/item/item.scss

@@ -34,6 +34,18 @@
     color: rgb(var(--zn-text-heading));
   }
 
+
+  &__header {
+    display: flex;
+    max-width: var(--zn-item-label-max-width);
+    width: 100%;
+
+    .description-item__caption {
+      width: unset;
+      max-width: unset;
+    }
+  }
+
   &__content {
     width: 100%;
     display: flex;
@@ -53,6 +65,10 @@
     max-width: var(--zn-item-label-max-width);
     width: 100%;
     flex-shrink: 0;
+
+    @include wc.container-query(null, sm) {
+      line-height: var(--zn-line-height-normal);
+    }
   }
 
   &__action-wrapper {
@@ -69,12 +85,16 @@
   // Sizes
   &--small {
     &.description-item {
-      padding: var(--zn-spacing-small);
+      padding: var(--zn-spacing-x-small);
     }
 
-    .description-item__caption {
+    .description-item__caption, .description-item__content-inner {
       font-size: var(--zn-font-size-small);
     }
+
+    @include wc.container-query(null, sm) {
+      gap: var(--zn-spacing-2x-small);
+    }
   }
 
   &--stacked {
@@ -102,4 +122,29 @@
       }
     }
   }
+
+  &--inline {
+
+    gap: var(--zn-spacing-small);
+
+    .description-item__header {
+      width: unset;
+      max-width: unset;
+    }
+
+    .description-item__icon {
+      margin-right: 0;
+    }
+
+    .description-item__caption {
+      width: unset;
+      max-width: unset;
+    }
+
+    @include wc.container-query(null, sm) {
+      flex-direction: row;
+      align-items: center;
+      gap: var(--zn-spacing-small);
+    }
+  }
 }