@ukho/admiralty-core 0.0.0

package/dist/collection/components/dialogue/dialogue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogue.js","sourceRoot":"","sources":["../../../src/components/dialogue/dialogue.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAQhH,MAAM,OAAO,iBAAiB;;gBAI6B,MAAM;;;EAO/D,kBAAkB;IAChB,QAAQ,IAAI,CAAC,IAAI,EAAE;MACjB,KAAK,MAAM;QACT,OAAO,YAAY,CAAC;MACtB,KAAK,SAAS;QACZ,OAAO,qBAAqB,CAAC;MAC/B,KAAK,SAAS;QACZ,OAAO,OAAO,CAAC;MACjB,KAAK,OAAO;QACV,OAAO,aAAa,CAAC;KACxB;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,eACE,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI;QACd,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI;OAClB;MAED,WAAK,KAAK,EAAC,gBAAgB;QACzB,sBAAgB,KAAK,EAAC,qBAAqB,eAAY,IAAI,CAAC,kBAAkB,EAAE,CAAC,QAAQ,GAAmB;QAC3G,IAAI,CAAC,OAAO,CACT;MACN,eAAa,CACL,CACX,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\nimport { faCheck, faCircleInfo, faExclamation, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core';\n\n@Component({\n  tag: 'admiralty-dialogue',\n  styleUrl: 'dialogue.scss',\n  shadow: true,\n})\nexport class DialogueComponent {\n  /**\n   * The type of dialogue box to render.\n   */\n  @Prop() type: 'info' | 'warning' | 'success' | 'error' = 'info';\n\n  /**\n   * The heading to display.\n   */\n  @Prop() heading: string;\n\n  getIconNameForType(): IconDefinition {\n    switch (this.type) {\n      case 'info':\n        return faCircleInfo;\n      case 'warning':\n        return faTriangleExclamation;\n      case 'success':\n        return faCheck;\n      case 'error':\n        return faExclamation;\n    }\n  }\n\n  render() {\n    return (\n      <section\n        class={{\n          dialogue: true,\n          [this.type]: true,\n        }}\n      >\n        <div class=\"dialogue-title\">\n          <admiralty-icon class=\"dialogue-title-icon\" icon-name={this.getIconNameForType().iconName}></admiralty-icon>\n          {this.heading}\n        </div>\n        <slot></slot>\n      </section>\n    );\n  }\n}\n"]}

package/dist/collection/components/expansion/expansion.css

@@ -0,0 +1,75 @@
+/* Core Palette */
+/* Supporting Palette */
+/* Secondary Palette */
+/* Digital Product Colours */
+/* Utility Colours */
+/* Button Colours */
+/* Primary */
+/* Secondary */
+/* Link Colours */
+/* Nav colours */
+/* Table colours */
+/* Tab colours */
+/* form text input colours */
+/* form textarea colours */
+/* radio button */
+/* checkbox */
+/* code snippet */
+admiralty-expansion section.expansion {
+  padding: 2px 0;
+  border-bottom: 1px solid transparent;
+}
+admiralty-expansion section.expansion.bordered {
+  border-bottom: 1px solid #d8d8d8;
+}
+admiralty-expansion section.expansion .expansion-content {
+  display: none;
+  max-height: 0;
+  overflow: visible;
+}
+admiralty-expansion section.expansion.expanded .expansion-content {
+  display: block;
+  max-height: initial;
+  padding-bottom: 12px;
+}
+admiralty-expansion section.expansion button {
+  background-color: transparent;
+  border: none;
+  height: initial;
+  min-width: unset;
+  max-width: unset;
+  white-space: unset;
+  color: initial;
+  font-size: 16px;
+  cursor: pointer;
+  margin: 10px 0 22px;
+  padding: 0;
+  display: flex;
+  align-items: baseline;
+  width: 100%;
+  text-align: left;
+  position: relative;
+}
+admiralty-expansion section.expansion button .expansion-heading-icon {
+  color: #09315b;
+  margin-left: 30px;
+}
+admiralty-expansion section.expansion button:focus {
+  outline: none;
+}
+admiralty-expansion section.expansion button h3, admiralty-expansion section.expansion button button {
+  flex-grow: 1;
+  margin-bottom: 0;
+}
+admiralty-expansion section.expansion button h3.expansion-heading-right-align, admiralty-expansion section.expansion button button.expansion-heading-right-align {
+  text-align: right;
+}
+admiralty-expansion section.expansion button:focus h3::before, admiralty-expansion section.expansion button:focus button::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: -3px;
+  left: -3px;
+  box-shadow: 0 0 0 3px #ffdd00;
+}

package/dist/collection/components/expansion/expansion.js

@@ -0,0 +1,133 @@
+import { h } from '@stencil/core';
+import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
+let nextId = 0;
+export class ExpansionComponent {
+  constructor() {
+    this.id = `admiralty-expansion-${++nextId}`;
+    this.headerId = `${this.id}-header`;
+    this.contentId = `${this.id}-content`;
+    this.heading = undefined;
+    this.expanded = false;
+    this.alignHeadingRight = false;
+    this.hideBorder = false;
+  }
+  onToggle() {
+    this.expanded = !this.expanded;
+    this.toggled.emit(this.expanded);
+  }
+  getExpansionIcon() {
+    return this.expanded ? faChevronUp : faChevronDown;
+  }
+  render() {
+    return (h("section", { class: {
+        expansion: true,
+        expanded: this.expanded,
+        bordered: !this.hideBorder,
+      } }, h("button", { id: this.headerId, type: "button", "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "expansion-heading-button", onClick: this.onToggle.bind(this) }, h("h3", { class: { 'expansion-heading-right-align': this.alignHeadingRight } }, this.heading), h("span", { class: "visually-hidden" }, ", ", this.expanded ? 'Hide' : 'Show', " this section"), h("admiralty-icon", { class: "expansion-heading-icon", "icon-name": this.getExpansionIcon().iconName })), h("div", { class: "expansion-content", id: this.contentId, "aria-labelledby": this.headerId, hidden: !this.expanded }, h("slot", null))));
+  }
+  static get is() { return "admiralty-expansion"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["expansion.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["expansion.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The text to display in the heading of the expansion component."
+        },
+        "attribute": "heading",
+        "reflect": false
+      },
+      "expanded": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the component is expanded."
+        },
+        "attribute": "expanded",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "alignHeadingRight": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "CWhether the heading should be right aligned."
+        },
+        "attribute": "align-heading-right",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "hideBorder": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the border on the bottom of the component should be hidden."
+        },
+        "attribute": "hide-border",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "toggled",
+        "name": "toggled",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "The event that is dispatched when the expanded status is toggled."
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
+}
+//# sourceMappingURL=expansion.js.map

package/dist/collection/components/expansion/expansion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expansion.js","sourceRoot":"","sources":["../../../src/components/expansion/expansion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAG/E,IAAI,MAAM,GAAG,CAAC,CAAC;AAOf,MAAM,OAAO,kBAAkB;;IA0B7B,OAAE,GAAW,uBAAuB,EAAE,MAAM,EAAE,CAAC;IAE/C,aAAQ,GAAW,GAAG,IAAI,CAAC,EAAE,SAAS,CAAC;IACvC,cAAS,GAAW,GAAG,IAAI,CAAC,EAAE,UAAU,CAAC;;oBApBU,KAAK;6BAK5B,KAAK;sBAKZ,KAAK;;EAY1B,QAAQ;IACN,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC/B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;EACnC,CAAC;EAED,gBAAgB;IACd,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC;EACrD,CAAC;EAED,MAAM;IACJ,OAAO,CACL,eACE,KAAK,EAAE;QACL,SAAS,EAAE,IAAI;QACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,QAAQ,EAAE,CAAC,IAAI,CAAC,UAAU;OAC3B;MAED,cAAQ,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,QAAQ,mBAAgB,IAAI,CAAC,QAAQ,mBAAiB,IAAI,CAAC,SAAS,EAAE,KAAK,EAAC,0BAA0B,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;QACtK,UAAI,KAAK,EAAE,EAAE,+BAA+B,EAAE,IAAI,CAAC,iBAAiB,EAAE,IAAG,IAAI,CAAC,OAAO,CAAM;QAC3F,YAAM,KAAK,EAAC,iBAAiB;;UAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;0BAAqB;QACrF,sBAAgB,KAAK,EAAC,wBAAwB,eAAY,IAAI,CAAC,gBAAgB,EAAE,CAAC,QAAQ,GAAmB,CACtG;MACT,WAAK,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,SAAS,qBAAmB,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ;QACvG,eAAa,CACT,CACE,CACX,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core';\n\nlet nextId = 0;\n\n@Component({\n  tag: 'admiralty-expansion',\n  styleUrl: 'expansion.scss',\n  shadow: false,\n})\nexport class ExpansionComponent {\n  /**\n   * The text to display in the heading of the expansion component.\n   */\n  @Prop() heading: string;\n\n  /**\n   * Whether the component is expanded.\n   */\n  @Prop({ mutable: true, reflect: true }) expanded = false;\n\n  /**\n   * CWhether the heading should be right aligned.\n   */\n  @Prop() alignHeadingRight = false;\n\n  /**\n   * Whether the border on the bottom of the component should be hidden.\n   */\n  @Prop() hideBorder = false;\n\n  /**\n   * The event that is dispatched when the expanded status is toggled.\n   */\n  @Event() toggled: EventEmitter<boolean>;\n\n  id: string = `admiralty-expansion-${++nextId}`;\n\n  headerId: string = `${this.id}-header`;\n  contentId: string = `${this.id}-content`;\n\n  onToggle() {\n    this.expanded = !this.expanded;\n    this.toggled.emit(this.expanded);\n  }\n\n  getExpansionIcon(): IconDefinition {\n    return this.expanded ? faChevronUp : faChevronDown;\n  }\n\n  render() {\n    return (\n      <section\n        class={{\n          expansion: true,\n          expanded: this.expanded,\n          bordered: !this.hideBorder,\n        }}\n      >\n        <button id={this.headerId} type=\"button\" aria-expanded={this.expanded} aria-controls={this.contentId} class=\"expansion-heading-button\" onClick={this.onToggle.bind(this)}>\n          <h3 class={{ 'expansion-heading-right-align': this.alignHeadingRight }}>{this.heading}</h3>\n          <span class=\"visually-hidden\">, {this.expanded ? 'Hide' : 'Show'} this section</span>\n          <admiralty-icon class=\"expansion-heading-icon\" icon-name={this.getExpansionIcon().iconName}></admiralty-icon>\n        </button>\n        <div class=\"expansion-content\" id={this.contentId} aria-labelledby={this.headerId} hidden={!this.expanded}>\n          <slot></slot>\n        </div>\n      </section>\n    );\n  }\n}\n"]}

package/dist/collection/components/file-input/file-input.css

@@ -0,0 +1,78 @@
+/* Core Palette */
+/* Supporting Palette */
+/* Secondary Palette */
+/* Digital Product Colours */
+/* Utility Colours */
+/* Button Colours */
+/* Primary */
+/* Secondary */
+/* Link Colours */
+/* Nav colours */
+/* Table colours */
+/* Tab colours */
+/* form text input colours */
+/* form textarea colours */
+/* radio button */
+/* checkbox */
+/* code snippet */
+.admiralty-file-input {
+  background: #eee;
+  display: flex;
+  position: relative;
+  border: 2px dashed #09315b;
+  min-height: 120px;
+  align-content: stretch;
+  justify-content: stretch;
+  margin-bottom: 36px;
+  font-family: "JohnstonITC", Helvetica, sans-serif;
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 300;
+}
+.admiralty-file-input.drop_zone {
+  background: #fff !important;
+}
+.admiralty-file-input .upload-icon {
+  color: #09315b;
+  font-size: 24px;
+  font-weight: 900;
+  margin: 0.4rem auto;
+  text-align: center;
+  flex: 0 1;
+}
+
+label {
+  border-image-repeat: stretch;
+  border-image-width: 1;
+  display: flex;
+  align-content: center;
+  flex-direction: column;
+  flex: 1;
+  justify-content: center;
+  cursor: pointer;
+}
+label span {
+  color: #09315b;
+  flex: 0 1;
+  font-size: 18px;
+  font-weight: 300;
+  text-align: center;
+  margin: 0.4rem 0;
+}
+label span.instructions {
+  font-weight: normal;
+}
+
+input[type=file] {
+  align-items: baseline;
+  overflow: visible;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: -1;
+  width: 100%;
+}
+input[type=file]:focus {
+  outline: 3px solid #ffdd00;
+  outline-offset: 2px;
+}

package/dist/collection/components/file-input/file-input.js

@@ -0,0 +1,155 @@
+import { Host, h } from '@stencil/core';
+export class FileInputComponent {
+  constructor() {
+    this.id = `admiralty-file-input-${++nextId}`;
+    /**
+     * Takes the bytes of a file and returns it as human readable figure
+     * @param bytes pass bytes throughs as a number
+     * @returns convers the bytes to the appropiate largest figure followed by the  format ie. 'kb', 'mb' etc
+     */
+    this.sizeOf = function (bytes) {
+      if (bytes === 0) {
+        return '0.00 B';
+      }
+      var e = Math.floor(Math.log(bytes) / Math.log(1024));
+      return (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B';
+    };
+    this.label = 'Click to choose a file or drag it';
+    this.multiple = false;
+    this.files = undefined;
+  }
+  /**
+   * The event that is fired when the user clicks on the file input box and uses the default dialog
+   * @param event
+   */
+  changeHandler(event) {
+    event.preventDefault();
+    this.storeFileInfo(event.target.files);
+    this.fileInputChange.emit(this.files);
+    console.log('changeHandler:', this.files);
+  }
+  storeFileInfo(files) {
+    this.files = this.multiple ? [...files] : [files.item(0)];
+  }
+  /**
+   * Prevents default dragOver behaviour which, stops the file being downloaded to the browser
+   * in a new tab
+   * @param event
+   */
+  dragOverHandler(event) {
+    event.preventDefault();
+    this.el.shadowRoot.querySelector('.admiralty-file-input').classList.add('drop_zone');
+  }
+  /**
+   * When this event is fired the 'drop_zone' class is removed from the wrapper 'admiralty-file-input' div
+   * which, turns the background back to off white
+   * @param event
+   */
+  dragLeaveHander(event) {
+    event.preventDefault();
+    this.el.shadowRoot.querySelector('.admiralty-file-input').classList.remove('drop_zone');
+  }
+  /**
+   * Handles the 'file' the user drops into the input field
+   * Does a check if it's a file and update the interface with the filename and the size of the file
+   * @param event
+   */
+  dropHandler(event) {
+    event.preventDefault();
+    this.el.shadowRoot.querySelector('.admiralty-file-input').classList.remove('drop_zone');
+    if (event.dataTransfer.files) {
+      this.storeFileInfo(event.dataTransfer.files);
+      this.fileInputChange.emit(this.files);
+      console.log('Drop: ', this.files);
+    }
+  }
+  get filesDisplay() {
+    return `${this.files[0].name} (${this.sizeOf(this.files[0].size)}) ${this.files.length > 1 ? ' ...' : ''}`;
+  }
+  render() {
+    var _a;
+    return (h(Host, { onDragLeave: event => this.dragLeaveHander(event), onDragOver: event => this.dragOverHandler(event), onDrop: event => this.dropHandler(event) }, h("div", { class: "admiralty-file-input" }, h("label", { htmlFor: this.id }, h("admiralty-icon", { class: "upload-icon", "icon-name": "upload" }), ((_a = this.files) === null || _a === void 0 ? void 0 : _a.length) ? h("span", null, this.filesDisplay) : h("span", { class: "instructions" }, this.label)), h("input", { onChange: event => this.changeHandler(event), id: this.id, "aria-hidden": "true", "aria-label": "File Upload", type: "file", class: "admiralty-form-field", multiple: this.multiple }))));
+  }
+  static get is() { return "admiralty-file-input"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["file-input.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["file-input.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Used to display instructions to the user and is replaced with the filename the user inputs"
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "'Click to choose a file or drag it'"
+      },
+      "multiple": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true, enables multiple files to be selected or dragged"
+        },
+        "attribute": "multiple",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "files": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "fileInputChange",
+        "name": "fileInputChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the added file(s) changes"
+        },
+        "complexType": {
+          "original": "File[]",
+          "resolved": "File[]",
+          "references": {
+            "File": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}
+let nextId = 0;
+//# sourceMappingURL=file-input.js.map

package/dist/collection/components/file-input/file-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input.js","sourceRoot":"","sources":["../../../src/components/file-input/file-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9F,MAAM,OAAO,kBAAkB;;IAkB7B,OAAE,GAAW,wBAAwB,EAAE,MAAM,EAAE,CAAC;IAgEhD;;;;OAIG;IACH,WAAM,GAAG,UAAU,KAAa;MAC9B,IAAI,KAAK,KAAK,CAAC,EAAE;QACf,OAAO,QAAQ,CAAC;OACjB;MACD,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;MACrD,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC;IACjF,CAAC,CAAC;iBAvFsB,mCAAmC;oBAKxC,KAAK;;;EAcxB;;;KAGG;EACH,aAAa,CAAC,KAAY;IACxB,KAAK,CAAC,cAAc,EAAE,CAAC;IAEvB,IAAI,CAAC,aAAa,CAAE,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;IAE7D,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACtC,OAAO,CAAC,GAAG,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;EAC5C,CAAC;EAEO,aAAa,CAAC,KAAe;IACnC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAI,KAA2B,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;EACnF,CAAC;EAED;;;;KAIG;EACH,eAAe,CAAC,KAAgB;IAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;EACvF,CAAC;EAED;;;;KAIG;EACH,eAAe,CAAC,KAAgB;IAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;EAC1F,CAAC;EAED;;;;KAIG;EACH,WAAW,CAAC,KAAgB;IAC1B,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IAExF,IAAI,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;MAC5B,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;MAC7C,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MACtC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;KACnC;EACH,CAAC;EAED,IAAI,YAAY;IACd,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;EAC7G,CAAC;EAeD,MAAM;;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;MACjJ,WAAK,KAAK,EAAC,sBAAsB;QAC/B,aAAO,OAAO,EAAE,IAAI,CAAC,EAAE;UACrB,sBAAgB,KAAK,EAAC,aAAa,eAAW,QAAQ,GAAkB;UACvE,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,EAAC,CAAC,CAAC,gBAAO,IAAI,CAAC,YAAY,CAAQ,CAAC,CAAC,CAAC,YAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,KAAK,CAAQ,CACjG;QACR,aACE,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAC5C,EAAE,EAAE,IAAI,CAAC,EAAE,iBACC,MAAM,gBACP,aAAa,EACxB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,sBAAsB,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,CACE,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,IAAI,MAAM,GAAG,CAAC,CAAC","sourcesContent":["import { Component, Element, Event, Host, h, Prop, State, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-file-input',\n  styleUrl: 'file-input.scss',\n  shadow: true,\n})\nexport class FileInputComponent {\n  @Element() el: HTMLElement;\n\n  /**\n   * Used to display instructions to the user and is replaced with the filename the user inputs\n   */\n  @Prop() label: string = 'Click to choose a file or drag it';\n\n  /**\n   * If true, enables multiple files to be selected or dragged\n   */\n  @Prop() multiple = false;\n\n  /**\n   * Emitted when the added file(s) changes\n   */\n  @Event() fileInputChange: EventEmitter<File[]>;\n\n  id: string = `admiralty-file-input-${++nextId}`;\n\n  /**\n   * INTERNAL - The list of files currently in the field\n   */\n  @State() files: File[];\n\n  /**\n   * The event that is fired when the user clicks on the file input box and uses the default dialog\n   * @param event\n   */\n  changeHandler(event: Event) {\n    event.preventDefault();\n\n    this.storeFileInfo((event.target as HTMLInputElement).files);\n\n    this.fileInputChange.emit(this.files);\n    console.log('changeHandler:', this.files);\n  }\n\n  private storeFileInfo(files: FileList) {\n    this.files = this.multiple ? [...(files as unknown as File[])] : [files.item(0)];\n  }\n\n  /**\n   * Prevents default dragOver behaviour which, stops the file being downloaded to the browser\n   * in a new tab\n   * @param event\n   */\n  dragOverHandler(event: DragEvent) {\n    event.preventDefault();\n    this.el.shadowRoot.querySelector('.admiralty-file-input').classList.add('drop_zone');\n  }\n\n  /**\n   * When this event is fired the 'drop_zone' class is removed from the wrapper 'admiralty-file-input' div\n   * which, turns the background back to off white\n   * @param event\n   */\n  dragLeaveHander(event: DragEvent) {\n    event.preventDefault();\n    this.el.shadowRoot.querySelector('.admiralty-file-input').classList.remove('drop_zone');\n  }\n\n  /**\n   * Handles the 'file' the user drops into the input field\n   * Does a check if it's a file and update the interface with the filename and the size of the file\n   * @param event\n   */\n  dropHandler(event: DragEvent) {\n    event.preventDefault();\n    this.el.shadowRoot.querySelector('.admiralty-file-input').classList.remove('drop_zone');\n\n    if (event.dataTransfer.files) {\n      this.storeFileInfo(event.dataTransfer.files);\n      this.fileInputChange.emit(this.files);\n      console.log('Drop: ', this.files);\n    }\n  }\n\n  get filesDisplay() {\n    return `${this.files[0].name} (${this.sizeOf(this.files[0].size)}) ${this.files.length > 1 ? ' ...' : ''}`;\n  }\n\n  /**\n   * Takes the bytes of a file and returns it as human readable figure\n   * @param bytes pass bytes throughs as a number\n   * @returns convers the bytes to the appropiate largest figure followed by the  format ie. 'kb', 'mb' etc\n   */\n  sizeOf = function (bytes: number) {\n    if (bytes === 0) {\n      return '0.00 B';\n    }\n    var e = Math.floor(Math.log(bytes) / Math.log(1024));\n    return (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B';\n  };\n\n  render() {\n    return (\n      <Host onDragLeave={event => this.dragLeaveHander(event)} onDragOver={event => this.dragOverHandler(event)} onDrop={event => this.dropHandler(event)}>\n        <div class=\"admiralty-file-input\">\n          <label htmlFor={this.id}>\n            <admiralty-icon class=\"upload-icon\" icon-name=\"upload\"></admiralty-icon>\n            {this.files?.length ? <span>{this.filesDisplay}</span> : <span class=\"instructions\">{this.label}</span>}\n          </label>\n          <input\n            onChange={event => this.changeHandler(event)}\n            id={this.id}\n            aria-hidden=\"true\"\n            aria-label=\"File Upload\"\n            type=\"file\"\n            class=\"admiralty-form-field\"\n            multiple={this.multiple}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet nextId = 0;\n"]}