kemet-ui 3.0.1 → 3.1.0

package/dist/components/kemet-upload/kemet-upload-file.js.map

@@ -1 +1 @@
-{"version":3,"file":"kemet-upload-file.js","sourceRoot":"","sources":["../../../src/components/kemet-upload/kemet-upload-file.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesUploadFile, stylesLoaders } from './styles';\n\nconst formatBytes = (bytes: number, decimals = 2) => {\n  if (bytes === 0) return '0 Bytes';\n\n  const k = 1024;\n  const dm = decimals < 0 ? 0 : decimals;\n  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];\n\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n  // eslint-disable-next-line no-restricted-properties\n  return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;\n};\n\n/**\n * @since 1.3.0\n * @status stable\n *\n * @tagname kemet-upload-file\n * @summary A file in the upload.\n *\n * @prop {string} name - The name of the file\n * @prop {number} loaded - The number of bytes loaded\n * @prop {number} size - The file size in bytes\n * @prop {string} type - The file type\n * @prop {string} status - The status of the file. Values are complete | uploading | error.\n * @prop {number} percent - Percentage of file completion that's calculated by the loaded property.\n * @prop {string} message - An error message to give to users\n *\n * @cssproperty --kemet-upload-file-color - The default text color.\n * @cssproperty --kemet-upload-file-padding - The padding around the file.\n * @cssproperty --kemet-upload-file-border - The border around the file.\n *\n * @csspart percentage - Area that displays the percentage.\n * @csspart filename - Area that displays file name.\n * @csspart loaded - Area that displays how much has uploaded.\n * @csspart message - Area for the error message.\n * @csspart indicator - Area for status icon.\n *\n */\n\n@customElement('kemet-upload-file')\nexport default class KemetUploadFile extends LitElement {\n  static styles = [stylesUploadFile, stylesLoaders];\n\n  @property({ type: String })\n  name: string;\n\n  @property({ type: Number })\n  loaded: number = 0;\n\n  @property({ type: Number })\n  size: number = 0;\n\n  @property({ type: String })\n  type: string;\n\n  @property({ type: String, reflect: true })\n  status: string;\n\n  @property({ type: Number })\n  percent: number = 0;\n\n  @property({ type: String })\n  message: string;\n\n  updated() {\n    this.percent = this.calculatePercent();\n  }\n\n  render() {\n    return html`\n      <div class=\"percentage\" part=\"percentage\">\n        <span>${this.percent}%</span>\n      </div>\n      <div>\n        <h3 part=\"filename\">${this.name}</h3>\n        <span part=\"loaded\">${formatBytes(this.loaded)} / ${formatBytes(this.size)}</span>\n        ${this.message ? html`<div class=\"message\" part=\"message\">${this.message}</div>` : null}\n      </div>\n      <div class=\"indicator\" part=\"indicator\">\n        ${this.getStatusIcon()}\n      </div>\n    `;\n  }\n\n  calculatePercent() {\n    const percent = Math.round((this.loaded * 100.0) / this.size);\n    return percent > 100 ? 100 : percent;\n  }\n\n  getStatusIcon() {\n    if (this.status === 'uploading') {\n      return html`<div class=\"lds-ripple\"><div></div><div></div></div>`;\n    }\n\n    if (this.status === 'complete') {\n      return html`<kemet-icon icon=\"check-circle\" size=\"48\"></kemet-icon>`;\n    }\n\n    if (this.status === 'error') {\n      return html`<kemet-icon icon=\"exclamation-circle\" size=\"48\"></kemet-icon>`;\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-upload-file': KemetUploadFile\n  }\n}\n"]}
+{"version":3,"file":"kemet-upload-file.js","sourceRoot":"","sources":["../../../src/components/kemet-upload/kemet-upload-file.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesUploadFile, stylesLoaders } from './styles';\n\nconst formatBytes = (bytes: number, decimals = 2) => {\n  if (bytes === 0) return '0 Bytes';\n\n  const k = 1024;\n  const dm = decimals < 0 ? 0 : decimals;\n  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];\n\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n  // eslint-disable-next-line no-restricted-properties\n  return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;\n};\n\n/**\n * @since 1.3.0\n * @status stable\n *\n * @tagname kemet-upload-file\n * @summary A file in the upload.\n *\n * @prop {string} name - The name of the file\n * @prop {number} loaded - The number of bytes loaded\n * @prop {number} size - The file size in bytes\n * @prop {string} type - The file type\n * @prop {string} status - The status of the file. Values are complete | uploading | error.\n * @prop {number} percent - Percentage of file completion that's calculated by the loaded property.\n * @prop {string} message - An error message to give to users\n *\n * @cssproperty --kemet-upload-file-color - The default text color.\n * @cssproperty --kemet-upload-file-padding - The padding around the file.\n * @cssproperty --kemet-upload-file-border - The border around the file.\n *\n * @csspart percentage - Area that displays the percentage.\n * @csspart filename - Area that displays file name.\n * @csspart loaded - Area that displays how much has uploaded.\n * @csspart message - Area for the error message.\n * @csspart indicator - Area for status icon.\n *\n */\n\n@customElement('kemet-upload-file')\nexport default class KemetUploadFile extends LitElement {\n  static styles = [stylesUploadFile, stylesLoaders];\n\n  @property({ type: String })\n  name: string;\n\n  @property({ type: Number })\n  loaded: number = 0;\n\n  @property({ type: Number })\n  size: number = 0;\n\n  @property({ type: String })\n  type: string;\n\n  @property({ type: String, reflect: true })\n  status: string;\n\n  @property({ type: Number })\n  percent: number = 0;\n\n  @property({ type: String })\n  message: string;\n\n  updated() {\n    this.percent = this.calculatePercent();\n  }\n\n  render() {\n    return html`\n      <div class=\"percentage\" part=\"percentage\">\n        <span>${this.percent}%</span>\n      </div>\n      <div>\n        <h3 part=\"filename\">${this.name}</h3>\n        <span part=\"loaded\">${formatBytes(this.loaded)} / ${formatBytes(this.size)}</span>\n        ${this.message ? html`<div class=\"message\" part=\"message\">${this.message}</div>` : null}\n      </div>\n      <div class=\"indicator\" part=\"indicator\">\n        ${this.getStatusIcon()}\n      </div>\n    `;\n  }\n\n  calculatePercent() {\n    const percent = Math.round((this.loaded * 100.0) / this.size);\n    return percent > 100 ? 100 : percent;\n  }\n\n  getStatusIcon() {\n    if (this.status === 'uploading') {\n      return html`<div class=\"lds-ripple\"><div></div><div></div></div>`;\n    }\n\n    if (this.status === 'complete') {\n      return html`<kemet-icon icon=\"check-circle\" size=\"48\"></kemet-icon>`;\n    }\n\n    if (this.status === 'error') {\n      return html`<kemet-icon icon=\"exclamation-circle\" size=\"48\"></kemet-icon>`;\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-upload-file': KemetUploadFile\n  }\n}\n"]}

package/dist/components/kemet-upload/kemet-upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"kemet-upload.js","sourceRoot":"","sources":["../../../src/components/kemet-upload/kemet-upload.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesUpload } from './styles';\n\nconst preventDefaults = (event: Event) => {\n  event.preventDefault();\n  event.stopPropagation();\n};\n\n/**\n * @since 1.3.0\n * @status stable\n *\n * @tagname kemet-upload\n * @summary An interface for uploading files.\n *\n * @prop {string} slug - A unique identifier for the component\n * @prop {string} accept - Determines what file types are accepted\n * @prop {boolean} multiple - Allows for multiple files\n * @prop {boolean} over - Automatically is true when a file is being dragged over the upload area\n * @prop {string} heading - Descriptive text for the upload area\n * @prop {boolean} mobile - Displays the component in a mobile context\n * @prop {string} breakpoint - Controls the point at which the component is considered mobile\n * @prop {boolean} noDragDrop - Is true if drag and drop support is not detected\n * @prop {number} maxSize - The maximum file size for uploads\n * @prop {string} buttonLabel - The browse files button text\n *\n * @event kemet-upload-change - Fires when files have been added\n *\n * @csspart upload - The area where files are dropped.\n * @csspart heading - The description in the upload area.\n * @csspart button - The button in the upload area.\n * @csspart files - The area where uploaded files are listed.\n *\n * @cssproperty --kemet-upload-color - The default text color.\n * @cssproperty --kemet-upload-height - The height.\n * @cssproperty --kemet-upload-border - The border.\n * @cssproperty --kemet-upload-background-color - The background color.\n *\n */\n\n@customElement('kemet-upload')\nexport default class KemetUpload extends LitElement {\n  static styles = [stylesUpload];\n\n  @property({ type: String })\n  slug: string = 'upload';\n\n  @property({ type: String })\n  accept: string;\n\n  @property({ type: Boolean })\n  multiple: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  over: boolean;\n\n  @property({ type: String })\n  heading: string = 'Drag & Drop Files';\n\n  @property({ type: Boolean, reflect: true })\n  mobile: boolean;\n\n  @property({ type: String, reflect: true })\n  breakpoint: string = '600px';\n\n  @property({ type: Boolean, reflect: true, attribute: 'no-drag-drop' })\n  noDragDrop: boolean;\n\n  @property({ type: Number, attribute: 'max-size' })\n  maxSize: number;\n\n  @property({ type: String, attribute: 'button-label' })\n  buttonLabel: string = 'Browse Files';\n\n  @state()\n  fileInputElement: HTMLInputElement;\n\n  @state()\n  upload: HTMLElement;\n\n  firstUpdated() {\n    this.fileInputElement = this.shadowRoot.querySelector('[type=\"file\"]');\n    this.upload = this.shadowRoot.querySelector('.upload');\n\n    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n      this.upload.addEventListener(eventName, event => preventDefaults(event), false);\n    });\n\n    ['dragenter', 'dragover'].forEach((eventName) => {\n      this.upload.addEventListener(eventName, () => { this.over = true; }, false);\n    });\n\n    ['dragleave', 'drop'].forEach((eventName) => {\n      this.upload.addEventListener(eventName, () => { this.over = false; }, false);\n    });\n\n    this.isMobile();\n    this.hasDragDrop();\n\n    window.addEventListener('resize', () => { this.isMobile(); });\n    this.upload.addEventListener('drop', event => this.handleDrop(event), false);\n  }\n\n  render() {\n    return html`\n      <div class=\"upload\" part=\"upload\">\n        <kemet-icon icon=\"cloud-arrow-up\" size=\"128\"></kemet-icon>\n        <input\n          type=\"file\"\n          id=${this.slug}\n          ?multiple=${this.multiple}\n          accept=${ifDefined(this.accept) ? this.accept : null}\n          @change=${(event: Event) => this.handleChange(event)}\n        />\n        <h3 class=\"heading\" part=\"heading\">${this.heading}</h3>\n        <label class=\"button\" part=\"button\" for=${this.slug}>${this.buttonLabel}</label>\n      </div>\n      <div class=\"files\" part=\"files\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  handleChange(event: Event) {\n    emitEvent(this, 'kemet-upload-change', {\n      event,\n      files: this.fileInputElement.files,\n      fileElement: this.fileInputElement,\n    });\n  }\n\n  handleDrop(event: DragEvent) {\n    emitEvent(this, 'kemet-upload-change', {\n      event,\n      files: event?.dataTransfer.files || [],\n      fileElement: this.fileInputElement,\n    });\n  }\n\n  isMobile() {\n    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);\n    this.mobile = mediaQuery.matches;\n  }\n\n  hasDragDrop() {\n    this.noDragDrop = !('draggable' in document.createElement('span'));\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-upload': KemetUpload\n  }\n}\n"]}
+{"version":3,"file":"kemet-upload.js","sourceRoot":"","sources":["../../../src/components/kemet-upload/kemet-upload.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesUpload } from './styles';\n\nconst preventDefaults = (event: Event) => {\n  event.preventDefault();\n  event.stopPropagation();\n};\n\n/**\n * @since 1.3.0\n * @status stable\n *\n * @tagname kemet-upload\n * @summary An interface for uploading files.\n *\n * @prop {string} slug - A unique identifier for the component\n * @prop {string} accept - Determines what file types are accepted\n * @prop {boolean} multiple - Allows for multiple files\n * @prop {boolean} over - Automatically is true when a file is being dragged over the upload area\n * @prop {string} heading - Descriptive text for the upload area\n * @prop {boolean} mobile - Displays the component in a mobile context\n * @prop {string} breakpoint - Controls the point at which the component is considered mobile\n * @prop {boolean} noDragDrop - Is true if drag and drop support is not detected\n * @prop {number} maxSize - The maximum file size for uploads\n * @prop {string} buttonLabel - The browse files button text\n *\n * @event kemet-upload-change - Fires when files have been added\n *\n * @csspart upload - The area where files are dropped.\n * @csspart heading - The description in the upload area.\n * @csspart button - The button in the upload area.\n * @csspart files - The area where uploaded files are listed.\n *\n * @cssproperty --kemet-upload-color - The default text color.\n * @cssproperty --kemet-upload-height - The height.\n * @cssproperty --kemet-upload-border - The border.\n * @cssproperty --kemet-upload-background-color - The background color.\n *\n */\n\n@customElement('kemet-upload')\nexport default class KemetUpload extends LitElement {\n  static styles = [stylesUpload];\n\n  @property({ type: String })\n  slug: string = 'upload';\n\n  @property({ type: String })\n  accept: string;\n\n  @property({ type: Boolean })\n  multiple: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  over: boolean;\n\n  @property({ type: String })\n  heading: string = 'Drag & Drop Files';\n\n  @property({ type: Boolean, reflect: true })\n  mobile: boolean;\n\n  @property({ type: String, reflect: true })\n  breakpoint: string = '600px';\n\n  @property({ type: Boolean, reflect: true, attribute: 'no-drag-drop' })\n  noDragDrop: boolean;\n\n  @property({ type: Number, attribute: 'max-size' })\n  maxSize: number;\n\n  @property({ type: String, attribute: 'button-label' })\n  buttonLabel: string = 'Browse Files';\n\n  @state()\n  fileInputElement: HTMLInputElement;\n\n  @state()\n  upload: HTMLElement;\n\n  firstUpdated() {\n    this.fileInputElement = this.shadowRoot.querySelector('[type=\"file\"]');\n    this.upload = this.shadowRoot.querySelector('.upload');\n\n    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n      this.upload.addEventListener(eventName, event => preventDefaults(event), false);\n    });\n\n    ['dragenter', 'dragover'].forEach((eventName) => {\n      this.upload.addEventListener(eventName, () => { this.over = true; }, false);\n    });\n\n    ['dragleave', 'drop'].forEach((eventName) => {\n      this.upload.addEventListener(eventName, () => { this.over = false; }, false);\n    });\n\n    this.isMobile();\n    this.hasDragDrop();\n\n    window.addEventListener('resize', () => { this.isMobile(); });\n    this.upload.addEventListener('drop', event => this.handleDrop(event), false);\n  }\n\n  render() {\n    return html`\n      <div class=\"upload\" part=\"upload\">\n        <kemet-icon icon=\"cloud-arrow-up\" size=\"128\"></kemet-icon>\n        <input\n          type=\"file\"\n          id=${this.slug}\n          ?multiple=${this.multiple}\n          accept=${ifDefined(this.accept) ? this.accept : null}\n          @change=${(event: Event) => this.handleChange(event)}\n        />\n        <h3 class=\"heading\" part=\"heading\">${this.heading}</h3>\n        <label class=\"button\" part=\"button\" for=${this.slug}>${this.buttonLabel}</label>\n      </div>\n      <div class=\"files\" part=\"files\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  handleChange(event: Event) {\n    emitEvent(this, 'kemet-upload-change', {\n      event,\n      files: this.fileInputElement.files,\n      fileElement: this.fileInputElement,\n    });\n  }\n\n  handleDrop(event: DragEvent) {\n    emitEvent(this, 'kemet-upload-change', {\n      event,\n      files: event?.dataTransfer.files || [],\n      fileElement: this.fileInputElement,\n    });\n  }\n\n  isMobile() {\n    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);\n    this.mobile = mediaQuery.matches;\n  }\n\n  hasDragDrop() {\n    this.noDragDrop = !('draggable' in document.createElement('span'));\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-upload': KemetUpload\n  }\n}\n"]}