kemet-ui 4.0.0 → 4.0.2

package/dist/chunk-CXKQSEE4.mjs

@@ -0,0 +1,109 @@
+import {
+  stylesScrollSnapPaginator
+} from "./chunk-MZO4Q7DU.mjs";
+import {
+  emitEvent
+} from "./chunk-LHEY3UOF.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/scroll-snap-paginator.ts
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var KemetScrollSnapPaginator = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.slides = [];
+    this.icon = "circle-fill";
+    this.size = 16;
+    this.hideFocusedLinks = false;
+    this.useNumberPages = false;
+    this.useLabelPages = false;
+  }
+  updated() {
+    const scrollSnapElement = this.closest("kemet-scroll-snap");
+    if (scrollSnapElement) {
+      scrollSnapElement.addEventListener("kemet-make-slides", (event) => {
+        this.slides = event.detail;
+      });
+    }
+  }
+  render() {
+    return html`
+      <nav part="nav">${this.makePagination()}</nav>
+    `;
+  }
+  makePagination() {
+    let counter = 0;
+    if (this.slides) {
+      return this.slides.map((slide) => {
+        counter = counter += 1;
+        if (slide.focused) {
+          return html`
+            <span part="span">${this.pageDisplay(slide, counter)}</span>
+          `;
+        }
+        return html`
+          <span
+            class="link"
+            tabindex="0"
+            role="button"
+            @keyup="${(event) => this.handleKeyboardInput(event, slide.id)}"
+            @click=${() => this.slideLink(slide.id)}
+            aria-label="${slide.label}">
+            ${this.pageDisplay(slide, counter)}
+          </span>
+        `;
+      });
+    }
+    return null;
+  }
+  pageDisplay(slide, visibleIndex) {
+    if (this.useNumberPages) {
+      return visibleIndex;
+    }
+    if (this.useLabelPages) {
+      return slide.label;
+    }
+    return html`<kemet-icon-bootstrap icon=${this.icon} size=${this.size}></kemet-icon-bootstrap>`;
+  }
+  slideLink(index) {
+    emitEvent(this, "kemet-focus", index);
+  }
+  handleKeyboardInput(event, id) {
+    if (event.code === "Enter" || event.code === "Space") {
+      this.slideLink(id);
+    }
+  }
+};
+KemetScrollSnapPaginator.styles = [stylesScrollSnapPaginator];
+__decorateClass([
+  property({ type: Array })
+], KemetScrollSnapPaginator.prototype, "slides", 2);
+__decorateClass([
+  property({ type: String })
+], KemetScrollSnapPaginator.prototype, "icon", 2);
+__decorateClass([
+  property({ type: Number })
+], KemetScrollSnapPaginator.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetScrollSnapPaginator.prototype, "center", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "hide-focused-links" })
+], KemetScrollSnapPaginator.prototype, "hideFocusedLinks", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "use-number-pages" })
+], KemetScrollSnapPaginator.prototype, "useNumberPages", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "use-label-pages" })
+], KemetScrollSnapPaginator.prototype, "useLabelPages", 2);
+KemetScrollSnapPaginator = __decorateClass([
+  customElement("kemet-scroll-snap-paginator")
+], KemetScrollSnapPaginator);
+
+export {
+  KemetScrollSnapPaginator
+};
+//# sourceMappingURL=chunk-CXKQSEE4.mjs.map

package/dist/chunk-CXKQSEE4.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/scroll-snap-paginator.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../utilities/events';\nimport { stylesScrollSnapPaginator } from '../styles/elements/scroll-snap';\nimport KemetScrollSnapSlide from './scroll-snap-slide';\nimport './icon-bootstrap';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-scroll-snap-paginator\n * @summary The scroll snap's pagination.\n *\n * @prop {array} slides - Information about each slide.\n * @prop {string} icon - A string representing which icon to use for pagination. Supports icons used in kemet-icon.\n * @prop {number} size - The size in pixels of the icons.\n * @prop {boolean} center - Determines whether to center the pagination items.\n * @prop {boolean} hideFocusedLinks - Will hide inactive pagination items if set to true.\n * @prop {boolean} useNumberPages - If set to true, the pages in the pagination iterator will appear as a set of numbers.\n * @prop {boolean} useLabelPages - If set to true, the pages in the pagination iterator will appear as the label set on the slide.\n *\n * @cssproperty --kemet-scroll-snap-paginator-padding - The padding on the container.\n * @cssproperty --kemet-scroll-snap-paginator-gap - The space between pagination items.\n * @cssproperty --kemet-scroll-snap-paginator-link-color - The color of a linkable pagination item.\n *\n * @event kemet-focus - Fires when a set of slides are focused on.\n *\n */\n\n@customElement('kemet-scroll-snap-paginator')\nexport default class KemetScrollSnapPaginator extends LitElement {\n  static styles = [stylesScrollSnapPaginator];\n\n  @property({ type: Array })\n  slides: KemetScrollSnapSlide[] = [];\n\n  @property({ type: String })\n  icon: string = 'circle-fill';\n\n  @property({ type: Number })\n  size: number = 16;\n\n  @property({ type: Boolean, reflect: true })\n  center: boolean;\n\n  @property({ type: Boolean, attribute: 'hide-focused-links' })\n  hideFocusedLinks: boolean = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'use-number-pages' })\n  useNumberPages: boolean = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'use-label-pages' })\n  useLabelPages: boolean = false;\n\n  updated() {\n    const scrollSnapElement = this.closest('kemet-scroll-snap');\n\n    if (scrollSnapElement) {\n      scrollSnapElement.addEventListener('kemet-make-slides', (event: CustomEvent) => {\n        this.slides = event.detail;\n      });\n    }\n  }\n\n  render() {\n    return html`\n      <nav part=\"nav\">${this.makePagination()}</nav>\n    `;\n  }\n\n  makePagination() {\n    let counter = 0;\n\n    if (this.slides) {\n      return this.slides.map((slide) => {\n        counter = counter += 1;\n\n        if (slide.focused) {\n          return html`\n            <span part=\"span\">${this.pageDisplay(slide, counter)}</span>\n          `;\n        }\n\n        return html`\n          <span\n            class=\"link\"\n            tabindex=\"0\"\n            role=\"button\"\n            @keyup=\"${(event: KeyboardEvent) => this.handleKeyboardInput(event, slide.id)}\"\n            @click=${() => this.slideLink(slide.id)}\n            aria-label=\"${slide.label}\">\n            ${this.pageDisplay(slide, counter)}\n          </span>\n        `;\n      });\n    }\n\n    return null;\n  }\n\n  pageDisplay(slide: KemetScrollSnapSlide, visibleIndex: number) {\n    if (this.useNumberPages) {\n      return visibleIndex;\n    }\n\n    if (this.useLabelPages) {\n      return slide.label;\n    }\n\n    return html`<kemet-icon-bootstrap icon=${this.icon} size=${this.size}></kemet-icon-bootstrap>`;\n  }\n\n  slideLink(index: string) {\n    emitEvent(this, 'kemet-focus', index);\n  }\n\n  handleKeyboardInput(event: KeyboardEvent, id: string) {\n    if (event.code === 'Enter' || event.code === 'Space') {\n      this.slideLink(id);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-scroll-snap-paginator': KemetScrollSnapPaginator\n  }\n}\n"],"mappings":";;;;;;;;;;;AAAA,SAAS,MAAM,kBAAkB;AACjC,SAAS,eAAe,gBAAgB;AA8BxC,IAAqB,2BAArB,cAAsD,WAAW;AAAA,EAAjE;AAAA;AAIE,kBAAiC,CAAC;AAGlC,gBAAe;AAGf,gBAAe;AAMf,4BAA4B;AAG5B,0BAA0B;AAG1B,yBAAyB;AAAA;AAAA,EAEzB,UAAU;AACR,UAAM,oBAAoB,KAAK,QAAQ,mBAAmB;AAE1D,QAAI,mBAAmB;AACrB,wBAAkB,iBAAiB,qBAAqB,CAAC,UAAuB;AAC9E,aAAK,SAAS,MAAM;AAAA,MACtB,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,wBACa,KAAK,eAAe,CAAC;AAAA;AAAA,EAE3C;AAAA,EAEA,iBAAiB;AACf,QAAI,UAAU;AAEd,QAAI,KAAK,QAAQ;AACf,aAAO,KAAK,OAAO,IAAI,CAAC,UAAU;AAChC,kBAAU,WAAW;AAErB,YAAI,MAAM,SAAS;AACjB,iBAAO;AAAA,gCACe,KAAK,YAAY,OAAO,OAAO,CAAC;AAAA;AAAA,QAExD;AAEA,eAAO;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKO,CAAC,UAAyB,KAAK,oBAAoB,OAAO,MAAM,EAAE,CAAC;AAAA,qBACpE,MAAM,KAAK,UAAU,MAAM,EAAE,CAAC;AAAA,0BACzB,MAAM,KAAK;AAAA,cACvB,KAAK,YAAY,OAAO,OAAO,CAAC;AAAA;AAAA;AAAA,MAGxC,CAAC;AAAA,IACH;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,YAAY,OAA6B,cAAsB;AAC7D,QAAI,KAAK,gBAAgB;AACvB,aAAO;AAAA,IACT;AAEA,QAAI,KAAK,eAAe;AACtB,aAAO,MAAM;AAAA,IACf;AAEA,WAAO,kCAAkC,KAAK,IAAI,SAAS,KAAK,IAAI;AAAA,EACtE;AAAA,EAEA,UAAU,OAAe;AACvB,cAAU,MAAM,eAAe,KAAK;AAAA,EACtC;AAAA,EAEA,oBAAoB,OAAsB,IAAY;AACpD,QAAI,MAAM,SAAS,WAAW,MAAM,SAAS,SAAS;AACpD,WAAK,UAAU,EAAE;AAAA,IACnB;AAAA,EACF;AACF;AA3FqB,yBACZ,SAAS,CAAC,yBAAyB;AAG1C;AAAA,EADC,SAAS,EAAE,MAAM,MAAM,CAAC;AAAA,GAHN,yBAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GANP,yBAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GATP,yBAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAZvB,yBAanB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,qBAAqB,CAAC;AAAA,GAfzC,yBAgBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,mBAAmB,CAAC;AAAA,GAlBtD,yBAmBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,kBAAkB,CAAC;AAAA,GArBrD,yBAsBnB;AAtBmB,2BAArB;AAAA,EADC,cAAc,6BAA6B;AAAA,GACvB;","names":[]}

package/dist/chunk-DPI6H4CJ.mjs

@@ -0,0 +1,53 @@
+import {
+  emitEvent
+} from "./chunk-LHEY3UOF.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/carousel-prev.ts
+import { html, css, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var KemetCarouselPrev = class extends LitElement {
+  render() {
+    return html`
+      <button @keyup=${(event) => this.handleKeyUp(event)} @click=${() => this.activated()}>
+        <slot></slot>
+      </button>
+    `;
+  }
+  activated() {
+    if (!this.disabled) {
+      emitEvent(this, "kemet-prev-activated", this);
+    }
+  }
+  handleKeyUp(event) {
+    if (event.code === "Enter") {
+      this.activated();
+    }
+  }
+};
+KemetCarouselPrev.styles = [
+  css`
+      button {
+        cursor: pointer;
+        border: 0;
+        background: none;
+      }
+
+      :host([disabled]) button {
+        cursor: not-allowed;
+      }
+    `
+];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetCarouselPrev.prototype, "disabled", 2);
+KemetCarouselPrev = __decorateClass([
+  customElement("kemet-carousel-prev")
+], KemetCarouselPrev);
+
+export {
+  KemetCarouselPrev
+};
+//# sourceMappingURL=chunk-DPI6H4CJ.mjs.map

package/dist/chunk-DPI6H4CJ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/carousel-prev.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../utilities/events';\n\n/**\n *\n * @since 1.1.0\n * @status stable\n *\n * @tagname kemet-carousel-prev\n * @summary A link to the previous slide in the carousel.\n *\n * @prop {boolean} disabled - Deactivates the button.\n *\n * @event kemet-prev-activated\n *\n */\n\n@customElement('kemet-carousel-prev')\nexport default class KemetCarouselPrev extends LitElement {\n  static styles = [\n    css`\n      button {\n        cursor: pointer;\n        border: 0;\n        background: none;\n      }\n\n      :host([disabled]) button {\n        cursor: not-allowed;\n      }\n    `,\n  ];\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean;\n\n  render() {\n    return html`\n      <button @keyup=${event => this.handleKeyUp(event)} @click=${() => this.activated()}>\n        <slot></slot>\n      </button>\n    `;\n  }\n\n  activated() {\n    if (!this.disabled) {\n      emitEvent(this, 'kemet-prev-activated', this);\n    }\n  }\n\n  handleKeyUp(event) {\n    if (event.code === 'Enter') {\n      this.activated();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-carousel-prev': KemetCarouselPrev\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,MAAM,KAAK,kBAAkB;AACtC,SAAS,eAAe,gBAAgB;AAkBxC,IAAqB,oBAArB,cAA+C,WAAW;AAAA,EAkBxD,SAAS;AACP,WAAO;AAAA,uBACY,WAAS,KAAK,YAAY,KAAK,CAAC,WAAW,MAAM,KAAK,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,EAItF;AAAA,EAEA,YAAY;AACV,QAAI,CAAC,KAAK,UAAU;AAClB,gBAAU,MAAM,wBAAwB,IAAI;AAAA,IAC9C;AAAA,EACF;AAAA,EAEA,YAAY,OAAO;AACjB,QAAI,MAAM,SAAS,SAAS;AAC1B,WAAK,UAAU;AAAA,IACjB;AAAA,EACF;AACF;AArCqB,kBACZ,SAAS;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWF;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAfvB,kBAgBnB;AAhBmB,oBAArB;AAAA,EADC,cAAc,qBAAqB;AAAA,GACf;","names":[]}

package/dist/chunk-DXRTO6DV.mjs

@@ -0,0 +1,135 @@
+import {
+  stylesUpload
+} from "./chunk-PWWLC4X4.mjs";
+import {
+  emitEvent
+} from "./chunk-LHEY3UOF.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/upload.ts
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+var preventDefaults = (event) => {
+  event.preventDefault();
+  event.stopPropagation();
+};
+var KemetUpload = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.slug = "upload";
+    this.heading = "Drag & Drop Files";
+    this.breakpoint = "600px";
+    this.buttonLabel = "Browse Files";
+  }
+  firstUpdated() {
+    this.fileInputElement = this.shadowRoot.querySelector('[type="file"]');
+    this.upload = this.shadowRoot.querySelector(".upload");
+    ["dragenter", "dragover", "dragleave", "drop"].forEach((eventName) => {
+      this.upload.addEventListener(eventName, (event) => preventDefaults(event), false);
+    });
+    ["dragenter", "dragover"].forEach((eventName) => {
+      this.upload.addEventListener(eventName, () => {
+        this.over = true;
+      }, false);
+    });
+    ["dragleave", "drop"].forEach((eventName) => {
+      this.upload.addEventListener(eventName, () => {
+        this.over = false;
+      }, false);
+    });
+    this.isMobile();
+    this.hasDragDrop();
+    window.addEventListener("resize", () => {
+      this.isMobile();
+    });
+    this.upload.addEventListener("drop", (event) => this.handleDrop(event), false);
+  }
+  render() {
+    return html`
+      <div class="upload" part="upload">
+        <kemet-icon-bootstrap icon="cloud-arrow-up" size="128"></kemet-icon-bootstrap>
+        <input
+          type="file"
+          id=${this.slug}
+          ?multiple=${this.multiple}
+          accept=${ifDefined(this.accept) ? this.accept : null}
+          @change=${(event) => this.handleChange(event)}
+        />
+        <h3 class="heading" part="heading">${this.heading}</h3>
+        <label class="button" part="button" for=${this.slug}>${this.buttonLabel}</label>
+      </div>
+      <div class="files" part="files">
+        <slot></slot>
+      </div>
+    `;
+  }
+  handleChange(event) {
+    emitEvent(this, "kemet-change", {
+      event,
+      files: this.fileInputElement.files,
+      fileElement: this.fileInputElement
+    });
+  }
+  handleDrop(event) {
+    emitEvent(this, "kemet-change", {
+      event,
+      files: event?.dataTransfer.files || [],
+      fileElement: this.fileInputElement
+    });
+  }
+  isMobile() {
+    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);
+    this.mobile = mediaQuery.matches;
+  }
+  hasDragDrop() {
+    this.noDragDrop = !("draggable" in document.createElement("span"));
+  }
+};
+KemetUpload.styles = [stylesUpload];
+__decorateClass([
+  property({ type: String })
+], KemetUpload.prototype, "slug", 2);
+__decorateClass([
+  property({ type: String })
+], KemetUpload.prototype, "accept", 2);
+__decorateClass([
+  property({ type: Boolean })
+], KemetUpload.prototype, "multiple", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetUpload.prototype, "over", 2);
+__decorateClass([
+  property({ type: String })
+], KemetUpload.prototype, "heading", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetUpload.prototype, "mobile", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetUpload.prototype, "breakpoint", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "no-drag-drop" })
+], KemetUpload.prototype, "noDragDrop", 2);
+__decorateClass([
+  property({ type: Number, attribute: "max-size" })
+], KemetUpload.prototype, "maxSize", 2);
+__decorateClass([
+  property({ type: String, attribute: "button-label" })
+], KemetUpload.prototype, "buttonLabel", 2);
+__decorateClass([
+  state()
+], KemetUpload.prototype, "fileInputElement", 2);
+__decorateClass([
+  state()
+], KemetUpload.prototype, "upload", 2);
+KemetUpload = __decorateClass([
+  customElement("kemet-upload")
+], KemetUpload);
+
+export {
+  KemetUpload
+};
+//# sourceMappingURL=chunk-DXRTO6DV.mjs.map

package/dist/chunk-DXRTO6DV.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/upload.ts"],"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/events';\nimport { stylesUpload } from '../styles/elements/upload';\nimport './icon-bootstrap';\nimport KemetUploadFile from './upload-file';\n\nexport interface InterfaceUploadChangeDetails {\n  event: Event | DragEvent;\n  files: FileList;\n  fileElement: KemetUploadFile;\n}\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-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-bootstrap icon=\"cloud-arrow-up\" size=\"128\"></kemet-icon-bootstrap>\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-change', {\n      event,\n      files: this.fileInputElement.files,\n      fileElement: this.fileInputElement,\n    });\n  }\n\n  handleDrop(event: DragEvent) {\n    emitEvent(this, 'kemet-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"],"mappings":"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","names":[]}