@freshworks/crayons/dist/components/file-uploader-file.js

Crayons Web Components library

import { attachShadow, createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
import { T as TranslationController } from './Translation.js';
import { d as defineCustomElement$1, a as defineCustomElement$3 } from './icon.js';
import { d as defineCustomElement$2 } from './spinner.js';

const fileUploaderFileCss = ":host{font-family:var(--fw-font-family, -apple-system, blinkmacsystemfont, \"Segoe UI\", roboto, oxygen, ubuntu, cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:inline-block}.files-content{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;width:300px;margin-top:7px}.files-content-icon{width:14px;height:14px;margin:3px 0px}.files-content-file{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding-left:8px;-webkit-box-sizing:border-box;box-sizing:border-box}.files-content-file-name{font-weight:600;font-size:14px;line-height:20px;color:#12344d}.files-content-file-remove{text-decoration:none;font-weight:600;color:#2c5cc5;margin-top:5px;font-size:12px;line-height:20px;background:transparent;border:none;display:inline-block;padding:0px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.files-content-file-remove:hover,.files-content-file-remove:focus{cursor:pointer}";

let FileUploaderFile = class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    attachShadow(this);
    this.fwRemoveFile = createEvent(this, "fwRemoveFile", 7);
    /**
     * file Id
     */
    this.fileId = null;
    /**
     * file name
     */
    this.name = '';
  }
  /**
   * private
   * remove
   */
  remove() {
    this.fwRemoveFile.emit({
      fileId: this.fileId,
    });
  }
  /**
   * render
   * @returns {JSX.Element}
   */
  render() {
    /* eslint-disable-next-line */
    return (h("div", { class: 'files-content' }, h("div", { class: 'files-content-icon' }, h("fw-icon", { name: 'checkbox', size: 14, color: '#00a886' })), h("div", { class: 'files-content-file' }, h("span", { class: 'files-content-file-name' }, this.name), h("button", { class: 'files-content-file-remove', onClick: () => this.remove() }, TranslationController.t('fileUploader.remove')))));
  }
  static get style() { return fileUploaderFileCss; }
};
FileUploaderFile = /*@__PURE__*/ proxyCustomElement(FileUploaderFile, [1, "fw-file-uploader-file", {
    "fileId": [2, "file-id"],
    "name": [1]
  }]);
function defineCustomElement() {
  const components = ["fw-file-uploader-file", "fw-icon", "fw-spinner", "fw-toast-message"];
  components.forEach(tagName => { switch (tagName) {
    case "fw-file-uploader-file":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, FileUploaderFile);
      }
      break;
    case "fw-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "fw-spinner":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
    case "fw-toast-message":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}

export { FileUploaderFile as F, defineCustomElement as d };