@ukho/admiralty-core 0.7.0 → 0.7.1

package/dist/admiralty/admiralty.esm.js

@@ -1,2 +1,2 @@
-import{p as e,b as a}from"./p-a2b7bb90.js";export{s as setNonce}from"./p-a2b7bb90.js";const i=()=>{const a=import.meta.url;const i={};if(a!==""){i.resourcesUrl=new URL(".",a).href}return e(i)};i().then((e=>a([["p-2d32c7eb",[[6,"admiralty-type-ahead",{value:[1],label:[1],hint:[1],placeholder:[1],resultsOnInitFocus:[4,"results-on-init-focus"],filterResult:[32]}]]],["p-b5beb563",[[6,"admiralty-select",{disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],hint:[1],label:[1],width:[2],value:[1032]}]]],["p-3e91e95a",[[2,"admiralty-textarea",{label:[1],hint:[1],width:[2],maxLength:[2,"max-length"],disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],value:[1032]}]]],["p-3ec17d3e",[[6,"admiralty-colour-block",{width:[2],height:[2],heading:[1],colour:[1],clickAction:[16],actionText:[1,"action-text"]}]]],["p-9f704f8f",[[2,"admiralty-file-input",{label:[1],multiple:[4],invalid:[4],invalidMessage:[1,"invalid-message"],files:[32]}]]],["p-c4df365d",[[6,"admiralty-filter",{filterTitle:[1,"filter-title"]}]]],["p-cb194645",[[6,"admiralty-filter-group",{groupTitle:[1,"group-title"]}]]],["p-7a3d5dc2",[[2,"admiralty-paginator",{pages:[2],currentPage:[2,"current-page"],label:[1]}]]],["p-620e0985",[[6,"admiralty-radio-group",{name:[1],value:[1032],displayVertical:[4,"display-vertical"],invalid:[4],invalidMessage:[1,"invalid-message"]}]]],["p-e8d6a025",[[6,"admiralty-breadcrumb",{active:[4],first:[4],href:[1]}]]],["p-2dabb66f",[[6,"admiralty-dialogue",{type:[1],heading:[1]}]]],["p-91cfb37d",[[6,"admiralty-header",{headerTitle:[1,"header-title"],headerTitleUrl:[1,"header-title-url"],logoLinkUrl:[1,"logo-link-url"],logoImgUrl:[1,"logo-img-url"],logoAltText:[1,"logo-alt-text"],mobileMenuOpen:[32],displayHamburger:[32]}]]],["p-642161f7",[[2,"admiralty-progress-bar",{label:[1],progression:[2],error:[4],progressionValue:[32]}]]],["p-faf7ba7b",[[6,"admiralty-read-more",{heading:[1],expanded:[32]}]]],["p-85edda7b",[[6,"admiralty-breadcrumbs"]]],["p-91c5dc57",[[6,"admiralty-card",{heading:[1]}]]],["p-5e382d3b",[[2,"admiralty-checkbox",{checkboxRight:[4,"checkbox-right"],disabled:[4],name:[1],checked:[1028],value:[8],labelText:[1,"label-text"]}]]],["p-20e669e3",[[6,"admiralty-footer",{imageLink:[1,"image-link"],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],text:[1]}]]],["p-e861546b",[[6,"admiralty-header-menu-item",{menuTitle:[1,"menu-title"],active:[4]}]]],["p-a789337a",[[2,"admiralty-header-profile",{isSignedIn:[4,"is-signed-in"],signedInText:[1,"signed-in-text"]}]]],["p-eedd8c86",[[2,"admiralty-header-sub-menu-item",{menuTitle:[1,"menu-title"]}]]],["p-2f1aa2ab",[[2,"admiralty-hr"]]],["p-f7e348fc",[[6,"admiralty-link",{href:[1],newTab:[4,"new-tab"]}]]],["p-1a46f741",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["p-57e9e984",[[2,"admiralty-phase-banner",{phase:[1],link:[1]}]]],["p-b154f85e",[[6,"admiralty-radio",{name:[1],value:[1025],disabled:[4],checked:[1028],invalid:[4],buttonTabindex:[32],setButtonTabindex:[64]}]]],["p-1e5d6d5c",[[6,"admiralty-side-nav",{label:[1]}]]],["p-cc7da7d1",[[2,"admiralty-side-nav-item",{sideNavItemId:[1,"side-nav-item-id"],headingTitle:[1,"heading-title"],navActive:[4,"nav-active"]}]]],["p-42c8f788",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["p-ae604366",[[6,"admiralty-tab",{label:[1],tabLabelId:[1,"tab-label-id"],tabContentId:[1,"tab-content-id"]}]]],["p-eb68c30f",[[6,"admiralty-tab-group",{selectedIndex:[1026,"selected-index"]}]]],["p-1b4b629f",[[6,"admiralty-table",{caption:[1]}]]],["p-fe911ac8",[[6,"admiralty-table-body"]]],["p-478e51ae",[[6,"admiralty-table-cell"]]],["p-b0b751a0",[[6,"admiralty-table-header"]]],["p-72d0c7c2",[[6,"admiralty-table-header-cell"]]],["p-fd0c5de8",[[6,"admiralty-table-row"]]],["p-33ba3be8",[[2,"admiralty-type-ahead-item",{value:[1]}]]],["p-51bd438b",[[1,"admiralty-icon",{iconName:[1,"icon-name"],iconPrefix:[1,"icon-prefix"]}]]],["p-20c06ebe",[[2,"admiralty-input",{name:[1],label:[1],hint:[1],disabled:[4],type:[1],placeholder:[1],width:[2],maxLength:[2,"max-length"],required:[4],invalid:[4],invalidMessage:[1,"invalid-message"],autocomplete:[1],value:[1032]}]]],["p-0e8192b3",[[6,"admiralty-expansion",{heading:[1],expanded:[1540],alignHeadingRight:[4,"align-heading-right"],hideBorder:[4,"hide-border"]}]]],["p-9f649906",[[6,"admiralty-button",{variant:[1],icon:[1],disabled:[516],type:[1]}]]],["p-40bc8d7f",[[6,"admiralty-hint",{disabled:[4]}],[6,"admiralty-label",{disabled:[4],for:[1]}],[6,"admiralty-input-invalid"]]]],e)));
+import{p as e,b as a}from"./p-a2b7bb90.js";export{s as setNonce}from"./p-a2b7bb90.js";const i=()=>{const a=import.meta.url;const i={};if(a!==""){i.resourcesUrl=new URL(".",a).href}return e(i)};i().then((e=>a([["p-2d32c7eb",[[6,"admiralty-type-ahead",{value:[1],label:[1],hint:[1],placeholder:[1],resultsOnInitFocus:[4,"results-on-init-focus"],filterResult:[32]}]]],["p-b5beb563",[[6,"admiralty-select",{disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],hint:[1],label:[1],width:[2],value:[1032]}]]],["p-3e91e95a",[[2,"admiralty-textarea",{label:[1],hint:[1],width:[2],maxLength:[2,"max-length"],disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],value:[1032]}]]],["p-3ec17d3e",[[6,"admiralty-colour-block",{width:[2],height:[2],heading:[1],colour:[1],clickAction:[16],actionText:[1,"action-text"]}]]],["p-42fb6dcf",[[2,"admiralty-file-input",{label:[1],multiple:[4],invalid:[4],invalidMessage:[1,"invalid-message"],files:[32]}]]],["p-c4df365d",[[6,"admiralty-filter",{filterTitle:[1,"filter-title"]}]]],["p-cb194645",[[6,"admiralty-filter-group",{groupTitle:[1,"group-title"]}]]],["p-7a3d5dc2",[[2,"admiralty-paginator",{pages:[2],currentPage:[2,"current-page"],label:[1]}]]],["p-620e0985",[[6,"admiralty-radio-group",{name:[1],value:[1032],displayVertical:[4,"display-vertical"],invalid:[4],invalidMessage:[1,"invalid-message"]}]]],["p-e8d6a025",[[6,"admiralty-breadcrumb",{active:[4],first:[4],href:[1]}]]],["p-2dabb66f",[[6,"admiralty-dialogue",{type:[1],heading:[1]}]]],["p-91cfb37d",[[6,"admiralty-header",{headerTitle:[1,"header-title"],headerTitleUrl:[1,"header-title-url"],logoLinkUrl:[1,"logo-link-url"],logoImgUrl:[1,"logo-img-url"],logoAltText:[1,"logo-alt-text"],mobileMenuOpen:[32],displayHamburger:[32]}]]],["p-642161f7",[[2,"admiralty-progress-bar",{label:[1],progression:[2],error:[4],progressionValue:[32]}]]],["p-faf7ba7b",[[6,"admiralty-read-more",{heading:[1],expanded:[32]}]]],["p-85edda7b",[[6,"admiralty-breadcrumbs"]]],["p-91c5dc57",[[6,"admiralty-card",{heading:[1]}]]],["p-5e382d3b",[[2,"admiralty-checkbox",{checkboxRight:[4,"checkbox-right"],disabled:[4],name:[1],checked:[1028],value:[8],labelText:[1,"label-text"]}]]],["p-20e669e3",[[6,"admiralty-footer",{imageLink:[1,"image-link"],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],text:[1]}]]],["p-e861546b",[[6,"admiralty-header-menu-item",{menuTitle:[1,"menu-title"],active:[4]}]]],["p-a789337a",[[2,"admiralty-header-profile",{isSignedIn:[4,"is-signed-in"],signedInText:[1,"signed-in-text"]}]]],["p-eedd8c86",[[2,"admiralty-header-sub-menu-item",{menuTitle:[1,"menu-title"]}]]],["p-2f1aa2ab",[[2,"admiralty-hr"]]],["p-f7e348fc",[[6,"admiralty-link",{href:[1],newTab:[4,"new-tab"]}]]],["p-1a46f741",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["p-57e9e984",[[2,"admiralty-phase-banner",{phase:[1],link:[1]}]]],["p-b154f85e",[[6,"admiralty-radio",{name:[1],value:[1025],disabled:[4],checked:[1028],invalid:[4],buttonTabindex:[32],setButtonTabindex:[64]}]]],["p-1e5d6d5c",[[6,"admiralty-side-nav",{label:[1]}]]],["p-cc7da7d1",[[2,"admiralty-side-nav-item",{sideNavItemId:[1,"side-nav-item-id"],headingTitle:[1,"heading-title"],navActive:[4,"nav-active"]}]]],["p-42c8f788",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["p-ae604366",[[6,"admiralty-tab",{label:[1],tabLabelId:[1,"tab-label-id"],tabContentId:[1,"tab-content-id"]}]]],["p-eb68c30f",[[6,"admiralty-tab-group",{selectedIndex:[1026,"selected-index"]}]]],["p-1b4b629f",[[6,"admiralty-table",{caption:[1]}]]],["p-fe911ac8",[[6,"admiralty-table-body"]]],["p-478e51ae",[[6,"admiralty-table-cell"]]],["p-b0b751a0",[[6,"admiralty-table-header"]]],["p-72d0c7c2",[[6,"admiralty-table-header-cell"]]],["p-fd0c5de8",[[6,"admiralty-table-row"]]],["p-33ba3be8",[[2,"admiralty-type-ahead-item",{value:[1]}]]],["p-51bd438b",[[1,"admiralty-icon",{iconName:[1,"icon-name"],iconPrefix:[1,"icon-prefix"]}]]],["p-20c06ebe",[[2,"admiralty-input",{name:[1],label:[1],hint:[1],disabled:[4],type:[1],placeholder:[1],width:[2],maxLength:[2,"max-length"],required:[4],invalid:[4],invalidMessage:[1,"invalid-message"],autocomplete:[1],value:[1032]}]]],["p-0e8192b3",[[6,"admiralty-expansion",{heading:[1],expanded:[1540],alignHeadingRight:[4,"align-heading-right"],hideBorder:[4,"hide-border"]}]]],["p-9f649906",[[6,"admiralty-button",{variant:[1],icon:[1],disabled:[516],type:[1]}]]],["p-40bc8d7f",[[6,"admiralty-hint",{disabled:[4]}],[6,"admiralty-label",{disabled:[4],for:[1]}],[6,"admiralty-input-invalid"]]]],e)));
 //# sourceMappingURL=admiralty.esm.js.map

package/dist/admiralty/p-42fb6dcf.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as t,h as e,H as a,g as l}from"./p-a2b7bb90.js";const n='.admiralty-file-input.sc-admiralty-file-input{background:#eee;display:flex;position:relative;border:2px dashed #09315b;min-height:120px;align-content:stretch;justify-content:stretch;margin-bottom:6px;font-family:"JohnstonITC", Helvetica, sans-serif;font-size:18px;line-height:24px;font-weight:300}.admiralty-file-input.invalid.sc-admiralty-file-input{border-color:#e20d0d}.admiralty-file-input.drop_zone.sc-admiralty-file-input{background:#fff !important}.admiralty-file-input.sc-admiralty-file-input .upload-icon.sc-admiralty-file-input{color:#09315b;font-size:24px;font-weight:900;margin:0.4rem auto;text-align:center;flex:0 1}label.sc-admiralty-file-input{border-image-repeat:stretch;border-image-width:1;display:flex;align-content:center;flex-direction:column;flex:1;justify-content:center;cursor:pointer}label.sc-admiralty-file-input span.sc-admiralty-file-input{color:#09315b;flex:0 1;font-size:18px;font-weight:normal;text-align:center;margin:0.4rem 0}input[type=file].sc-admiralty-file-input{align-items:baseline;overflow:visible;position:absolute;top:0;bottom:0;z-index:-1;width:100%}input[type=file].sc-admiralty-file-input:focus{outline:3px solid #ffdd00;outline-offset:2px}';const r=class{constructor(e){i(this,e);this.fileInputChange=t(this,"fileInputChange",7);this.id=`admiralty-file-input-${++s}`;this.sizeOf=function(i){if(i===0){return"0.00 B"}var t=Math.floor(Math.log(i)/Math.log(1024));return(i/Math.pow(1024,t)).toFixed(2)+" "+" KMGTP".charAt(t)+"B"};this.label="Click to choose a file or drag it";this.multiple=false;this.invalid=false;this.invalidMessage=null;this.files=undefined}changeHandler(i){i.preventDefault();this.storeFileInfo(i.target.files);this.fileInputChange.emit({files:this.files});console.log("changeHandler:",this.files)}storeFileInfo(i){this.files=this.multiple?[...i]:[i.item(0)]}dragOverHandler(i){i.preventDefault();this.el.querySelector(".admiralty-file-input").classList.add("drop_zone")}dragLeaveHander(i){i.preventDefault();this.el.querySelector(".admiralty-file-input").classList.remove("drop_zone")}dropHandler(i){i.preventDefault();this.el.querySelector(".admiralty-file-input").classList.remove("drop_zone");if(i.dataTransfer.files){this.storeFileInfo(i.dataTransfer.files);this.fileInputChange.emit({files:this.files});console.log("Drop: ",this.files)}}render(){return e(a,{onDragLeave:i=>this.dragLeaveHander(i),onDragOver:i=>this.dragOverHandler(i),onDrop:i=>this.dropHandler(i)},e("div",{class:{"admiralty-file-input":true,invalid:this.invalid}},e("label",{htmlFor:this.id},e("admiralty-icon",{class:"upload-icon","icon-name":"upload"}),e("span",null,this.label)),e("input",{onChange:i=>this.changeHandler(i),id:this.id,"aria-hidden":"true","aria-label":"File Upload",type:"file",class:"admiralty-form-field",multiple:this.multiple})),e("admiralty-input-invalid",{style:{visibility:this.invalid&&this.invalidMessage?"visible":"hidden"}},this.invalidMessage))}get el(){return l(this)}};let s=0;r.style=n;export{r as admiralty_file_input};
+//# sourceMappingURL=p-42fb6dcf.entry.js.map

package/dist/admiralty/p-42fb6dcf.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["fileInputCss","FileInputComponent","this","id","nextId","sizeOf","bytes","e","Math","floor","log","pow","toFixed","charAt","changeHandler","event","preventDefault","storeFileInfo","target","files","fileInputChange","emit","console","multiple","item","dragOverHandler","el","querySelector","classList","add","dragLeaveHander","remove","dropHandler","dataTransfer","render","h","Host","onDragLeave","onDragOver","onDrop","class","invalid","htmlFor","label","onChange","type","style","visibility","invalidMessage"],"sources":["./src/components/file-input/file-input.scss?tag=admiralty-file-input&encapsulation=scoped","./src/components/file-input/file-input.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\n@use '../../scss/vars/typography';\n\n.admiralty-file-input {\n  background: #eee;\n  display: flex;\n  position: relative;\n  border: 2px dashed colours.$colour-admiralty-blue;\n  min-height: 120px;\n  align-content: stretch;\n  justify-content: stretch;\n  margin-bottom: 6px;\n  font-family: typography.$font-family;\n  font-size: 18px;\n  line-height: 24px;\n  font-weight: 300;\n\n  &.invalid {\n    border-color: colours.$colour-utility-error;\n  }\n\n  &.drop_zone {\n    // active when file is dragged over label\n    background: #fff !important;\n  }\n\n  .upload-icon {\n    color: colours.$colour-admiralty-blue;\n    font-size: 24px;\n    font-weight: 900;\n    margin: 0.4rem auto;\n    text-align: center;\n    flex: 0 1;\n  }\n}\n\nlabel {\n  border-image-repeat: stretch;\n  border-image-width: 1;\n  display: flex;\n  align-content: center;\n  flex-direction: column;\n  flex: 1;\n  justify-content: center;\n  cursor: pointer;\n\n  span {\n    color: colours.$colour-admiralty-blue;\n    flex: 0 1;\n    font-size: 18px;\n    font-weight: typography.$font-weight-medium;\n    text-align: center;\n    margin: 0.4rem 0;\n  }\n}\n\ninput[type='file'] {\n  align-items: baseline;\n  overflow: visible;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  z-index: -1;\n  width: 100%;\n\n  &:focus {\n    outline: 3px solid colours.$colour-utility-focus;\n    outline-offset: 2px;\n  }\n}\n","import { Component, Element, Event, Host, h, Prop, State, EventEmitter } from '@stencil/core';\nimport { FileInputChangeEventDetail } from './file-input.interface';\n\n@Component({\n  tag: 'admiralty-file-input',\n  styleUrl: 'file-input.scss',\n  scoped: 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   * Whether to show that the file input is in an invalid state.\n   */\n  @Prop() invalid: boolean = false;\n\n  /**\n   * The message to show when the file input is invalid.\n   */\n  @Prop() invalidMessage: string = null;\n\n  /**\n   * Emitted when the added file(s) changes\n   */\n  @Event() fileInputChange: EventEmitter<FileInputChangeEventDetail>;\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({ files: 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.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.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.querySelector('.admiralty-file-input').classList.remove('drop_zone');\n\n    if (event.dataTransfer.files) {\n      this.storeFileInfo(event.dataTransfer.files);\n      this.fileInputChange.emit({ files: this.files });\n      console.log('Drop: ', this.files);\n    }\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': true, 'invalid': this.invalid }}>\n          <label htmlFor={this.id}>\n            <admiralty-icon class=\"upload-icon\" icon-name=\"upload\"></admiralty-icon>\n            <span>{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        <admiralty-input-invalid style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-invalid>\n      </Host>\n    );\n  }\n}\n\nlet nextId = 0;\n"],"mappings":"gEAAA,MAAMA,EAAe,oqC,MCQRC,EAAkB,M,0EA4B7BC,KAAAC,GAAa,0BAA0BC,IAiEvCF,KAAAG,OAAS,SAAUC,GACjB,GAAIA,IAAU,EAAG,CACf,MAAO,Q,CAET,IAAIC,EAAIC,KAAKC,MAAMD,KAAKE,IAAIJ,GAASE,KAAKE,IAAI,OAC9C,OAAQJ,EAAQE,KAAKG,IAAI,KAAMJ,IAAIK,QAAQ,GAAK,IAAM,SAASC,OAAON,GAAK,G,aA5FrD,oC,cAKL,M,aAKQ,M,oBAKM,K,qBAkBjCO,cAAcC,GACZA,EAAMC,iBAENd,KAAKe,cAAeF,EAAMG,OAA4BC,OAEtDjB,KAAKkB,gBAAgBC,KAAK,CAAEF,MAAOjB,KAAKiB,QACxCG,QAAQZ,IAAI,iBAAkBR,KAAKiB,M,CAG7BF,cAAcE,GACpBjB,KAAKiB,MAAQjB,KAAKqB,SAAW,IAAKJ,GAA+B,CAACA,EAAMK,KAAK,G,CAQ/EC,gBAAgBV,GACdA,EAAMC,iBACNd,KAAKwB,GAAGC,cAAc,yBAAyBC,UAAUC,IAAI,Y,CAQ/DC,gBAAgBf,GACdA,EAAMC,iBACNd,KAAKwB,GAAGC,cAAc,yBAAyBC,UAAUG,OAAO,Y,CAQlEC,YAAYjB,GACVA,EAAMC,iBACNd,KAAKwB,GAAGC,cAAc,yBAAyBC,UAAUG,OAAO,aAEhE,GAAIhB,EAAMkB,aAAad,MAAO,CAC5BjB,KAAKe,cAAcF,EAAMkB,aAAad,OACtCjB,KAAKkB,gBAAgBC,KAAK,CAAEF,MAAOjB,KAAKiB,QACxCG,QAAQZ,IAAI,SAAUR,KAAKiB,M,EAiB/Be,SACE,OACEC,EAACC,EAAI,CAACC,YAAatB,GAASb,KAAK4B,gBAAgBf,GAAQuB,WAAYvB,GAASb,KAAKuB,gBAAgBV,GAAQwB,OAAQxB,GAASb,KAAK8B,YAAYjB,IAC3IoB,EAAA,OAAKK,MAAO,CAAE,uBAAwB,KAAMC,QAAWvC,KAAKuC,UAC1DN,EAAA,SAAOO,QAASxC,KAAKC,IACnBgC,EAAA,kBAAgBK,MAAM,cAAa,YAAW,WAC9CL,EAAA,YAAOjC,KAAKyC,QAEdR,EAAA,SACES,SAAU7B,GAASb,KAAKY,cAAcC,GACtCZ,GAAID,KAAKC,GAAE,cACC,OAAM,aACP,cACX0C,KAAK,OACLL,MAAM,uBACNjB,SAAUrB,KAAKqB,YAGnBY,EAAA,2BAAyBW,MAAO,CAAEC,WAAY7C,KAAKuC,SAAWvC,KAAK8C,eAAiB,UAAY,WAAa9C,KAAK8C,gB,2BAM1H,IAAI5C,EAAS,E"}

package/dist/cjs/admiralty-file-input.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-3b824133.js');
 
-const fileInputCss = ".admiralty-file-input.sc-admiralty-file-input{background:#eee;display:flex;position:relative;border:2px dashed #09315b;min-height:120px;align-content:stretch;justify-content:stretch;margin-bottom:6px;font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:18px;line-height:24px;font-weight:300}.admiralty-file-input.drop_zone.sc-admiralty-file-input{background:#fff !important}.admiralty-file-input.sc-admiralty-file-input .upload-icon.sc-admiralty-file-input{color:#09315b;font-size:24px;font-weight:900;margin:0.4rem auto;text-align:center;flex:0 1}label.sc-admiralty-file-input{border-image-repeat:stretch;border-image-width:1;display:flex;align-content:center;flex-direction:column;flex:1;justify-content:center;cursor:pointer}label.sc-admiralty-file-input span.sc-admiralty-file-input{color:#09315b;flex:0 1;font-size:18px;font-weight:normal;text-align:center;margin:0.4rem 0}input[type=file].sc-admiralty-file-input{align-items:baseline;overflow:visible;position:absolute;top:0;bottom:0;z-index:-1;width:100%}input[type=file].sc-admiralty-file-input:focus{outline:3px solid #ffdd00;outline-offset:2px}";
+const fileInputCss = ".admiralty-file-input.sc-admiralty-file-input{background:#eee;display:flex;position:relative;border:2px dashed #09315b;min-height:120px;align-content:stretch;justify-content:stretch;margin-bottom:6px;font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:18px;line-height:24px;font-weight:300}.admiralty-file-input.invalid.sc-admiralty-file-input{border-color:#e20d0d}.admiralty-file-input.drop_zone.sc-admiralty-file-input{background:#fff !important}.admiralty-file-input.sc-admiralty-file-input .upload-icon.sc-admiralty-file-input{color:#09315b;font-size:24px;font-weight:900;margin:0.4rem auto;text-align:center;flex:0 1}label.sc-admiralty-file-input{border-image-repeat:stretch;border-image-width:1;display:flex;align-content:center;flex-direction:column;flex:1;justify-content:center;cursor:pointer}label.sc-admiralty-file-input span.sc-admiralty-file-input{color:#09315b;flex:0 1;font-size:18px;font-weight:normal;text-align:center;margin:0.4rem 0}input[type=file].sc-admiralty-file-input{align-items:baseline;overflow:visible;position:absolute;top:0;bottom:0;z-index:-1;width:100%}input[type=file].sc-admiralty-file-input:focus{outline:3px solid #ffdd00;outline-offset:2px}";
 
 const FileInputComponent = class {
   constructor(hostRef) {
@@ -75,7 +75,7 @@ const FileInputComponent = class {
     }
   }
   render() {
-    return (index.h(index.Host, { onDragLeave: event => this.dragLeaveHander(event), onDragOver: event => this.dragOverHandler(event), onDrop: event => this.dropHandler(event) }, index.h("div", { class: "admiralty-file-input" }, index.h("label", { htmlFor: this.id }, index.h("admiralty-icon", { class: "upload-icon", "icon-name": "upload" }), index.h("span", null, this.label)), index.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 })), index.h("admiralty-input-invalid", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage)));
+    return (index.h(index.Host, { onDragLeave: event => this.dragLeaveHander(event), onDragOver: event => this.dragOverHandler(event), onDrop: event => this.dropHandler(event) }, index.h("div", { class: { 'admiralty-file-input': true, 'invalid': this.invalid } }, index.h("label", { htmlFor: this.id }, index.h("admiralty-icon", { class: "upload-icon", "icon-name": "upload" }), index.h("span", null, this.label)), index.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 })), index.h("admiralty-input-invalid", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage)));
   }
   get el() { return index.getElement(this); }
 };

package/dist/cjs/admiralty-file-input.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"admiralty-file-input.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/file-input/file-input.scss?tag=admiralty-file-input&encapsulation=scoped","./src/components/file-input/file-input.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\n@use '../../scss/vars/typography';\n\n.admiralty-file-input {\n  background: #eee;\n  display: flex;\n  position: relative;\n  border: 2px dashed colours.$colour-admiralty-blue;\n  min-height: 120px;\n  align-content: stretch;\n  justify-content: stretch;\n  margin-bottom: 6px;\n  font-family: typography.$font-family;\n  font-size: 18px;\n  line-height: 24px;\n  font-weight: 300;\n\n  &.drop_zone {\n    // active when file is dragged over label\n    background: #fff !important;\n  }\n\n  .upload-icon {\n    color: colours.$colour-admiralty-blue;\n    font-size: 24px;\n    font-weight: 900;\n    margin: 0.4rem auto;\n    text-align: center;\n    flex: 0 1;\n  }\n}\n\nlabel {\n  border-image-repeat: stretch;\n  border-image-width: 1;\n  display: flex;\n  align-content: center;\n  flex-direction: column;\n  flex: 1;\n  justify-content: center;\n  cursor: pointer;\n\n  span {\n    color: colours.$colour-admiralty-blue;\n    flex: 0 1;\n    font-size: 18px;\n    font-weight: typography.$font-weight-medium;\n    text-align: center;\n    margin: 0.4rem 0;\n  }\n}\n\ninput[type='file'] {\n  align-items: baseline;\n  overflow: visible;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  z-index: -1;\n  width: 100%;\n\n  &:focus {\n    outline: 3px solid colours.$colour-utility-focus;\n    outline-offset: 2px;\n  }\n}\n","import { Component, Element, Event, Host, h, Prop, State, EventEmitter } from '@stencil/core';\nimport { FileInputChangeEventDetail } from './file-input.interface';\n\n@Component({\n  tag: 'admiralty-file-input',\n  styleUrl: 'file-input.scss',\n  scoped: 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   * Whether to show that the file input is in an invalid state.\n   */\n  @Prop() invalid: boolean = false;\n\n  /**\n   * The message to show when the file input is invalid.\n   */\n  @Prop() invalidMessage: string = null;\n\n  /**\n   * Emitted when the added file(s) changes\n   */\n  @Event() fileInputChange: EventEmitter<FileInputChangeEventDetail>;\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({ files: 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.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.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.querySelector('.admiralty-file-input').classList.remove('drop_zone');\n\n    if (event.dataTransfer.files) {\n      this.storeFileInfo(event.dataTransfer.files);\n      this.fileInputChange.emit({ files: this.files });\n      console.log('Drop: ', this.files);\n    }\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            <span>{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        <admiralty-input-invalid style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-invalid>\n      </Host>\n    );\n  }\n}\n\nlet nextId = 0;\n"],"version":3}
+{"file":"admiralty-file-input.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/file-input/file-input.scss?tag=admiralty-file-input&encapsulation=scoped","./src/components/file-input/file-input.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\n@use '../../scss/vars/typography';\n\n.admiralty-file-input {\n  background: #eee;\n  display: flex;\n  position: relative;\n  border: 2px dashed colours.$colour-admiralty-blue;\n  min-height: 120px;\n  align-content: stretch;\n  justify-content: stretch;\n  margin-bottom: 6px;\n  font-family: typography.$font-family;\n  font-size: 18px;\n  line-height: 24px;\n  font-weight: 300;\n\n  &.invalid {\n    border-color: colours.$colour-utility-error;\n  }\n\n  &.drop_zone {\n    // active when file is dragged over label\n    background: #fff !important;\n  }\n\n  .upload-icon {\n    color: colours.$colour-admiralty-blue;\n    font-size: 24px;\n    font-weight: 900;\n    margin: 0.4rem auto;\n    text-align: center;\n    flex: 0 1;\n  }\n}\n\nlabel {\n  border-image-repeat: stretch;\n  border-image-width: 1;\n  display: flex;\n  align-content: center;\n  flex-direction: column;\n  flex: 1;\n  justify-content: center;\n  cursor: pointer;\n\n  span {\n    color: colours.$colour-admiralty-blue;\n    flex: 0 1;\n    font-size: 18px;\n    font-weight: typography.$font-weight-medium;\n    text-align: center;\n    margin: 0.4rem 0;\n  }\n}\n\ninput[type='file'] {\n  align-items: baseline;\n  overflow: visible;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  z-index: -1;\n  width: 100%;\n\n  &:focus {\n    outline: 3px solid colours.$colour-utility-focus;\n    outline-offset: 2px;\n  }\n}\n","import { Component, Element, Event, Host, h, Prop, State, EventEmitter } from '@stencil/core';\nimport { FileInputChangeEventDetail } from './file-input.interface';\n\n@Component({\n  tag: 'admiralty-file-input',\n  styleUrl: 'file-input.scss',\n  scoped: 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   * Whether to show that the file input is in an invalid state.\n   */\n  @Prop() invalid: boolean = false;\n\n  /**\n   * The message to show when the file input is invalid.\n   */\n  @Prop() invalidMessage: string = null;\n\n  /**\n   * Emitted when the added file(s) changes\n   */\n  @Event() fileInputChange: EventEmitter<FileInputChangeEventDetail>;\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({ files: 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.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.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.querySelector('.admiralty-file-input').classList.remove('drop_zone');\n\n    if (event.dataTransfer.files) {\n      this.storeFileInfo(event.dataTransfer.files);\n      this.fileInputChange.emit({ files: this.files });\n      console.log('Drop: ', this.files);\n    }\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': true, 'invalid': this.invalid }}>\n          <label htmlFor={this.id}>\n            <admiralty-icon class=\"upload-icon\" icon-name=\"upload\"></admiralty-icon>\n            <span>{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        <admiralty-input-invalid style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-invalid>\n      </Host>\n    );\n  }\n}\n\nlet nextId = 0;\n"],"version":3}

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

@@ -29,6 +29,9 @@
   line-height: 24px;
   font-weight: 300;
 }
+.admiralty-file-input.invalid {
+  border-color: #e20d0d;
+}
 .admiralty-file-input.drop_zone {
   background: #fff !important;
 }

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

@@ -66,7 +66,7 @@ export class FileInputComponent {
     }
   }
   render() {
-    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" }), h("span", null, 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 })), h("admiralty-input-invalid", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage)));
+    return (h(Host, { onDragLeave: event => this.dragLeaveHander(event), onDragOver: event => this.dragOverHandler(event), onDrop: event => this.dropHandler(event) }, h("div", { class: { 'admiralty-file-input': true, 'invalid': this.invalid } }, h("label", { htmlFor: this.id }, h("admiralty-icon", { class: "upload-icon", "icon-name": "upload" }), h("span", null, 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 })), h("admiralty-input-invalid", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage)));
   }
   static get is() { return "admiralty-file-input"; }
   static get encapsulation() { return "scoped"; }

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

@@ -1 +1 @@
-{"version":3,"file":"file-input.js","sourceRoot":"","sources":["../../../src/components/file-input/file-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, Host, h, Prop, State, EventEmitter } from '@stencil/core';\nimport { FileInputChangeEventDetail } from './file-input.interface';\n\n@Component({\n  tag: 'admiralty-file-input',\n  styleUrl: 'file-input.scss',\n  scoped: 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   * Whether to show that the file input is in an invalid state.\n   */\n  @Prop() invalid: boolean = false;\n\n  /**\n   * The message to show when the file input is invalid.\n   */\n  @Prop() invalidMessage: string = null;\n\n  /**\n   * Emitted when the added file(s) changes\n   */\n  @Event() fileInputChange: EventEmitter<FileInputChangeEventDetail>;\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({ files: 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.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.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.querySelector('.admiralty-file-input').classList.remove('drop_zone');\n\n    if (event.dataTransfer.files) {\n      this.storeFileInfo(event.dataTransfer.files);\n      this.fileInputChange.emit({ files: this.files });\n      console.log('Drop: ', this.files);\n    }\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            <span>{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        <admiralty-input-invalid style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-invalid>\n      </Host>\n    );\n  }\n}\n\nlet nextId = 0;\n"]}
+{"version":3,"file":"file-input.js","sourceRoot":"","sources":["../../../src/components/file-input/file-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, Host, h, Prop, State, EventEmitter } from '@stencil/core';\nimport { FileInputChangeEventDetail } from './file-input.interface';\n\n@Component({\n  tag: 'admiralty-file-input',\n  styleUrl: 'file-input.scss',\n  scoped: 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   * Whether to show that the file input is in an invalid state.\n   */\n  @Prop() invalid: boolean = false;\n\n  /**\n   * The message to show when the file input is invalid.\n   */\n  @Prop() invalidMessage: string = null;\n\n  /**\n   * Emitted when the added file(s) changes\n   */\n  @Event() fileInputChange: EventEmitter<FileInputChangeEventDetail>;\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({ files: 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.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.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.querySelector('.admiralty-file-input').classList.remove('drop_zone');\n\n    if (event.dataTransfer.files) {\n      this.storeFileInfo(event.dataTransfer.files);\n      this.fileInputChange.emit({ files: this.files });\n      console.log('Drop: ', this.files);\n    }\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': true, 'invalid': this.invalid }}>\n          <label htmlFor={this.id}>\n            <admiralty-icon class=\"upload-icon\" icon-name=\"upload\"></admiralty-icon>\n            <span>{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        <admiralty-input-invalid style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-invalid>\n      </Host>\n    );\n  }\n}\n\nlet nextId = 0;\n"]}

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

@@ -88,7 +88,7 @@ describe('file-input', () => {
     });
     expect(page.root).toEqualHtml(`
       <admiralty-file-input invalid="true">
-        <div class="admiralty-file-input">
+        <div class="admiralty-file-input invalid">
           <label htmlfor="admiralty-file-input-5">
             <admiralty-icon class="upload-icon" icon-name="upload"></admiralty-icon>
             <span>
@@ -108,7 +108,7 @@ describe('file-input', () => {
     });
     expect(page.root).toEqualHtml(`
       <admiralty-file-input invalid="true" invalid-message="This is invalid!">
-        <div class="admiralty-file-input">
+        <div class="admiralty-file-input invalid">
           <label htmlfor="admiralty-file-input-6">
             <admiralty-icon class="upload-icon" icon-name="upload"></admiralty-icon>
             <span>

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

@@ -1 +1 @@
-{"version":3,"file":"file-input.spec.js","sourceRoot":"","sources":["../../../src/components/file-input/file-input.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { FileInputComponent } from './file-input';\n\ndescribe('file-input', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [FileInputComponent],\n      html: `<admiralty-file-input></ukhho-file-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <admiralty-file-input>\n        <div class=\"admiralty-file-input\">\n          <label htmlfor=\"admiralty-file-input-1\">\n            <admiralty-icon class=\"upload-icon\" icon-name=\"upload\"></admiralty-icon>\n            <span>\n              Click to choose a file or drag it\n            </span>\n          </label>\n          <input aria-hidden=\"true\" aria-label=\"File Upload\" class=\"admiralty-form-field\" id=\"admiralty-file-input-1\" type=\"file\">\n        </div>\n        <admiralty-input-invalid style=\"visibility: hidden;\"></admiralty-input-invalid>\n      </admiralty-file-input>\n    `);\n  });\n\n  it('renders multiple selection', async () => {\n    const page = await newSpecPage({\n      components: [FileInputComponent],\n      html: `<admiralty-file-input multiple=\"true\"></ukhho-file-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <admiralty-file-input multiple=\"true\">\n        <div class=\"admiralty-file-input\">\n          <label htmlfor=\"admiralty-file-input-2\">\n            <admiralty-icon class=\"upload-icon\" icon-name=\"upload\"></admiralty-icon>\n            <span>\n              Click to choose a file or drag it\n            </span>\n          </label>\n          <input aria-hidden=\"true\" aria-label=\"File Upload\" class=\"admiralty-form-field\" id=\"admiralty-file-input-2\" multiple=\"\" type=\"file\">\n        </div>\n        <admiralty-input-invalid style=\"visibility: hidden;\"></admiralty-input-invalid>\n      </admiralty-file-input>\n    `);\n  });\n\n  it('renders single selection', async () => {\n    const page = await newSpecPage({\n      components: [FileInputComponent],\n      html: `<admiralty-file-input multiple=\"false\"></ukhho-file-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <admiralty-file-input multiple=\"false\">\n        <div class=\"admiralty-file-input\">\n          <label htmlfor=\"admiralty-file-input-3\">\n            <admiralty-icon class=\"upload-icon\" icon-name=\"upload\"></admiralty-icon>\n            <span>\n              Click to choose a file or drag it\n            </span>\n          </label>\n          <input aria-hidden=\"true\" aria-label=\"File Upload\" class=\"admiralty-form-field\" id=\"admiralty-file-input-3\" type=\"file\">\n        </div>\n        <admiralty-input-invalid style=\"visibility: hidden;\"></admiralty-input-invalid>\n      </admiralty-file-input>\n    `);\n  });\n\n  it('renders different label', async () => {\n    const page = await newSpecPage({\n      components: [FileInputComponent],\n      html: `<admiralty-file-input label=\"My other label\"></ukhho-file-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <admiralty-file-input label=\"My other label\">\n        <div class=\"admiralty-file-input\">\n          <label htmlfor=\"admiralty-file-input-4\">\n            <admiralty-icon class=\"upload-icon\" icon-name=\"upload\"></admiralty-icon>\n            <span>\n              My other label\n            </span>\n          </label>\n          <input aria-hidden=\"true\" aria-label=\"File Upload\" class=\"admiralty-form-field\" id=\"admiralty-file-input-4\" type=\"file\">\n        </div>\n        <admiralty-input-invalid style=\"visibility: hidden;\"></admiralty-input-invalid>\n      </admiralty-file-input>\n    `);\n  });\n\n  it('renders invalid even without invalidMessage', async () => {\n    const page = await newSpecPage({\n      components: [FileInputComponent],\n      html: `<admiralty-file-input invalid=\"true\"></ukhho-file-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <admiralty-file-input invalid=\"true\">\n        <div class=\"admiralty-file-input\">\n          <label htmlfor=\"admiralty-file-input-5\">\n            <admiralty-icon class=\"upload-icon\" icon-name=\"upload\"></admiralty-icon>\n            <span>\n              Click to choose a file or drag it\n            </span>\n          </label>\n          <input aria-hidden=\"true\" aria-label=\"File Upload\" class=\"admiralty-form-field\" id=\"admiralty-file-input-5\" type=\"file\">\n        </div>\n        <admiralty-input-invalid style=\"visibility: hidden;\"></admiralty-input-invalid>\n      </admiralty-file-input>\n    `);\n  });\n\n  it('renders invalid with invalidMessage', async () => {\n    const page = await newSpecPage({\n      components: [FileInputComponent],\n      html: `<admiralty-file-input invalid=\"true\" invalid-message=\"This is invalid!\"></ukhho-file-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <admiralty-file-input invalid=\"true\" invalid-message=\"This is invalid!\">\n        <div class=\"admiralty-file-input\">\n          <label htmlfor=\"admiralty-file-input-6\">\n            <admiralty-icon class=\"upload-icon\" icon-name=\"upload\"></admiralty-icon>\n            <span>\n              Click to choose a file or drag it\n            </span>\n          </label>\n          <input aria-hidden=\"true\" aria-label=\"File Upload\" class=\"admiralty-form-field\" id=\"admiralty-file-input-6\" type=\"file\">\n        </div>\n        <admiralty-input-invalid style=\"visibility: visible;\">\n          This is invalid!\n        </admiralty-input-invalid>\n      </admiralty-file-input>\n    `);\n  });\n\n  const mockFileList = (file: File): FileList => {\n    const fileList = {\n      length: 1,\n      item: (_index: number) => file,\n      0: file,\n    };\n    return fileList as FileList;\n  };\n\n  it('emits fileInputChange event', async () => {\n    const comp = new FileInputComponent();\n\n    const eventSpy = jest.spyOn(comp.fileInputChange, 'emit');\n\n    const file = { name: 'file1.txt' } as File;\n\n    let event = {\n      preventDefault: jest.fn(),\n      target: {\n        files: mockFileList(file),\n      },\n    };\n\n    comp.changeHandler(event as unknown as Event);\n\n    expect(eventSpy).toBeCalledWith({ files: [file] });\n  });\n});\n"]}
+{"version":3,"file":"file-input.spec.js","sourceRoot":"","sources":["../../../src/components/file-input/file-input.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { FileInputComponent } from './file-input';\n\ndescribe('file-input', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [FileInputComponent],\n      html: `<admiralty-file-input></ukhho-file-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <admiralty-file-input>\n        <div class=\"admiralty-file-input\">\n          <label htmlfor=\"admiralty-file-input-1\">\n            <admiralty-icon class=\"upload-icon\" icon-name=\"upload\"></admiralty-icon>\n            <span>\n              Click to choose a file or drag it\n            </span>\n          </label>\n          <input aria-hidden=\"true\" aria-label=\"File Upload\" class=\"admiralty-form-field\" id=\"admiralty-file-input-1\" type=\"file\">\n        </div>\n        <admiralty-input-invalid style=\"visibility: hidden;\"></admiralty-input-invalid>\n      </admiralty-file-input>\n    `);\n  });\n\n  it('renders multiple selection', async () => {\n    const page = await newSpecPage({\n      components: [FileInputComponent],\n      html: `<admiralty-file-input multiple=\"true\"></ukhho-file-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <admiralty-file-input multiple=\"true\">\n        <div class=\"admiralty-file-input\">\n          <label htmlfor=\"admiralty-file-input-2\">\n            <admiralty-icon class=\"upload-icon\" icon-name=\"upload\"></admiralty-icon>\n            <span>\n              Click to choose a file or drag it\n            </span>\n          </label>\n          <input aria-hidden=\"true\" aria-label=\"File Upload\" class=\"admiralty-form-field\" id=\"admiralty-file-input-2\" multiple=\"\" type=\"file\">\n        </div>\n        <admiralty-input-invalid style=\"visibility: hidden;\"></admiralty-input-invalid>\n      </admiralty-file-input>\n    `);\n  });\n\n  it('renders single selection', async () => {\n    const page = await newSpecPage({\n      components: [FileInputComponent],\n      html: `<admiralty-file-input multiple=\"false\"></ukhho-file-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <admiralty-file-input multiple=\"false\">\n        <div class=\"admiralty-file-input\">\n          <label htmlfor=\"admiralty-file-input-3\">\n            <admiralty-icon class=\"upload-icon\" icon-name=\"upload\"></admiralty-icon>\n            <span>\n              Click to choose a file or drag it\n            </span>\n          </label>\n          <input aria-hidden=\"true\" aria-label=\"File Upload\" class=\"admiralty-form-field\" id=\"admiralty-file-input-3\" type=\"file\">\n        </div>\n        <admiralty-input-invalid style=\"visibility: hidden;\"></admiralty-input-invalid>\n      </admiralty-file-input>\n    `);\n  });\n\n  it('renders different label', async () => {\n    const page = await newSpecPage({\n      components: [FileInputComponent],\n      html: `<admiralty-file-input label=\"My other label\"></ukhho-file-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <admiralty-file-input label=\"My other label\">\n        <div class=\"admiralty-file-input\">\n          <label htmlfor=\"admiralty-file-input-4\">\n            <admiralty-icon class=\"upload-icon\" icon-name=\"upload\"></admiralty-icon>\n            <span>\n              My other label\n            </span>\n          </label>\n          <input aria-hidden=\"true\" aria-label=\"File Upload\" class=\"admiralty-form-field\" id=\"admiralty-file-input-4\" type=\"file\">\n        </div>\n        <admiralty-input-invalid style=\"visibility: hidden;\"></admiralty-input-invalid>\n      </admiralty-file-input>\n    `);\n  });\n\n  it('renders invalid even without invalidMessage', async () => {\n    const page = await newSpecPage({\n      components: [FileInputComponent],\n      html: `<admiralty-file-input invalid=\"true\"></ukhho-file-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <admiralty-file-input invalid=\"true\">\n        <div class=\"admiralty-file-input invalid\">\n          <label htmlfor=\"admiralty-file-input-5\">\n            <admiralty-icon class=\"upload-icon\" icon-name=\"upload\"></admiralty-icon>\n            <span>\n              Click to choose a file or drag it\n            </span>\n          </label>\n          <input aria-hidden=\"true\" aria-label=\"File Upload\" class=\"admiralty-form-field\" id=\"admiralty-file-input-5\" type=\"file\">\n        </div>\n        <admiralty-input-invalid style=\"visibility: hidden;\"></admiralty-input-invalid>\n      </admiralty-file-input>\n    `);\n  });\n\n  it('renders invalid with invalidMessage', async () => {\n    const page = await newSpecPage({\n      components: [FileInputComponent],\n      html: `<admiralty-file-input invalid=\"true\" invalid-message=\"This is invalid!\"></ukhho-file-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <admiralty-file-input invalid=\"true\" invalid-message=\"This is invalid!\">\n        <div class=\"admiralty-file-input invalid\">\n          <label htmlfor=\"admiralty-file-input-6\">\n            <admiralty-icon class=\"upload-icon\" icon-name=\"upload\"></admiralty-icon>\n            <span>\n              Click to choose a file or drag it\n            </span>\n          </label>\n          <input aria-hidden=\"true\" aria-label=\"File Upload\" class=\"admiralty-form-field\" id=\"admiralty-file-input-6\" type=\"file\">\n        </div>\n        <admiralty-input-invalid style=\"visibility: visible;\">\n          This is invalid!\n        </admiralty-input-invalid>\n      </admiralty-file-input>\n    `);\n  });\n\n  const mockFileList = (file: File): FileList => {\n    const fileList = {\n      length: 1,\n      item: (_index: number) => file,\n      0: file,\n    };\n    return fileList as FileList;\n  };\n\n  it('emits fileInputChange event', async () => {\n    const comp = new FileInputComponent();\n\n    const eventSpy = jest.spyOn(comp.fileInputChange, 'emit');\n\n    const file = { name: 'file1.txt' } as File;\n\n    let event = {\n      preventDefault: jest.fn(),\n      target: {\n        files: mockFileList(file),\n      },\n    };\n\n    comp.changeHandler(event as unknown as Event);\n\n    expect(eventSpy).toBeCalledWith({ files: [file] });\n  });\n});\n"]}

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

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './input-invalid.js';
 
-const fileInputCss = ".admiralty-file-input.sc-admiralty-file-input{background:#eee;display:flex;position:relative;border:2px dashed #09315b;min-height:120px;align-content:stretch;justify-content:stretch;margin-bottom:6px;font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:18px;line-height:24px;font-weight:300}.admiralty-file-input.drop_zone.sc-admiralty-file-input{background:#fff !important}.admiralty-file-input.sc-admiralty-file-input .upload-icon.sc-admiralty-file-input{color:#09315b;font-size:24px;font-weight:900;margin:0.4rem auto;text-align:center;flex:0 1}label.sc-admiralty-file-input{border-image-repeat:stretch;border-image-width:1;display:flex;align-content:center;flex-direction:column;flex:1;justify-content:center;cursor:pointer}label.sc-admiralty-file-input span.sc-admiralty-file-input{color:#09315b;flex:0 1;font-size:18px;font-weight:normal;text-align:center;margin:0.4rem 0}input[type=file].sc-admiralty-file-input{align-items:baseline;overflow:visible;position:absolute;top:0;bottom:0;z-index:-1;width:100%}input[type=file].sc-admiralty-file-input:focus{outline:3px solid #ffdd00;outline-offset:2px}";
+const fileInputCss = ".admiralty-file-input.sc-admiralty-file-input{background:#eee;display:flex;position:relative;border:2px dashed #09315b;min-height:120px;align-content:stretch;justify-content:stretch;margin-bottom:6px;font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:18px;line-height:24px;font-weight:300}.admiralty-file-input.invalid.sc-admiralty-file-input{border-color:#e20d0d}.admiralty-file-input.drop_zone.sc-admiralty-file-input{background:#fff !important}.admiralty-file-input.sc-admiralty-file-input .upload-icon.sc-admiralty-file-input{color:#09315b;font-size:24px;font-weight:900;margin:0.4rem auto;text-align:center;flex:0 1}label.sc-admiralty-file-input{border-image-repeat:stretch;border-image-width:1;display:flex;align-content:center;flex-direction:column;flex:1;justify-content:center;cursor:pointer}label.sc-admiralty-file-input span.sc-admiralty-file-input{color:#09315b;flex:0 1;font-size:18px;font-weight:normal;text-align:center;margin:0.4rem 0}input[type=file].sc-admiralty-file-input{align-items:baseline;overflow:visible;position:absolute;top:0;bottom:0;z-index:-1;width:100%}input[type=file].sc-admiralty-file-input:focus{outline:3px solid #ffdd00;outline-offset:2px}";
 
 const FileInputComponent = /*@__PURE__*/ proxyCustomElement(class FileInputComponent extends HTMLElement {
   constructor() {
@@ -74,7 +74,7 @@ const FileInputComponent = /*@__PURE__*/ proxyCustomElement(class FileInputCompo
     }
   }
   render() {
-    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" }), h("span", null, 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 })), h("admiralty-input-invalid", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage)));
+    return (h(Host, { onDragLeave: event => this.dragLeaveHander(event), onDragOver: event => this.dragOverHandler(event), onDrop: event => this.dropHandler(event) }, h("div", { class: { 'admiralty-file-input': true, 'invalid': this.invalid } }, h("label", { htmlFor: this.id }, h("admiralty-icon", { class: "upload-icon", "icon-name": "upload" }), h("span", null, 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 })), h("admiralty-input-invalid", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage)));
   }
   get el() { return this; }
   static get style() { return fileInputCss; }

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

@@ -1 +1 @@
-{"file":"admiralty-file-input.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,0lCAA0lC;;MCQlmC,kBAAkB;;;;;IA4B7B,OAAE,GAAW,wBAAwB,EAAE,MAAM,EAAE,CAAC;;;;;;IAiEhD,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,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC;KAChF,CAAC;iBA7FsB,mCAAmC;oBAKxC,KAAK;mBAKG,KAAK;0BAKC,IAAI;;;;;;;EAkBrC,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,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IACjD,OAAO,CAAC,GAAG,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;GAC3C;EAEO,aAAa,CAAC,KAAe;IACnC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAI,KAA2B,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;GAClF;;;;;;EAOD,eAAe,CAAC,KAAgB;IAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;GAC3E;;;;;;EAOD,eAAe,CAAC,KAAgB;IAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;GAC9E;;;;;;EAOD,WAAW,CAAC,KAAgB;IAC1B,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IAE7E,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,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;MACjD,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;KACnC;GACF;EAeD,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,WAAW,EAAE,KAAK,IAAI,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,UAAU,EAAE,KAAK,IAAI,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,IACjJ,WAAK,KAAK,EAAC,sBAAsB,IAC/B,aAAO,OAAO,EAAE,IAAI,CAAC,EAAE,IACrB,sBAAgB,KAAK,EAAC,aAAa,eAAW,QAAQ,GAAkB,EACxE,gBAAO,IAAI,CAAC,KAAK,CAAQ,CACnB,EACR,aACE,QAAQ,EAAE,KAAK,IAAI,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,EACN,+BAAyB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,GAAG,SAAS,GAAG,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAA2B,CACtJ,EACP;GACH;;;;;;;;;;AAGH,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/file-input/file-input.scss?tag=admiralty-file-input&encapsulation=scoped","./src/components/file-input/file-input.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\n@use '../../scss/vars/typography';\n\n.admiralty-file-input {\n  background: #eee;\n  display: flex;\n  position: relative;\n  border: 2px dashed colours.$colour-admiralty-blue;\n  min-height: 120px;\n  align-content: stretch;\n  justify-content: stretch;\n  margin-bottom: 6px;\n  font-family: typography.$font-family;\n  font-size: 18px;\n  line-height: 24px;\n  font-weight: 300;\n\n  &.drop_zone {\n    // active when file is dragged over label\n    background: #fff !important;\n  }\n\n  .upload-icon {\n    color: colours.$colour-admiralty-blue;\n    font-size: 24px;\n    font-weight: 900;\n    margin: 0.4rem auto;\n    text-align: center;\n    flex: 0 1;\n  }\n}\n\nlabel {\n  border-image-repeat: stretch;\n  border-image-width: 1;\n  display: flex;\n  align-content: center;\n  flex-direction: column;\n  flex: 1;\n  justify-content: center;\n  cursor: pointer;\n\n  span {\n    color: colours.$colour-admiralty-blue;\n    flex: 0 1;\n    font-size: 18px;\n    font-weight: typography.$font-weight-medium;\n    text-align: center;\n    margin: 0.4rem 0;\n  }\n}\n\ninput[type='file'] {\n  align-items: baseline;\n  overflow: visible;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  z-index: -1;\n  width: 100%;\n\n  &:focus {\n    outline: 3px solid colours.$colour-utility-focus;\n    outline-offset: 2px;\n  }\n}\n","import { Component, Element, Event, Host, h, Prop, State, EventEmitter } from '@stencil/core';\nimport { FileInputChangeEventDetail } from './file-input.interface';\n\n@Component({\n  tag: 'admiralty-file-input',\n  styleUrl: 'file-input.scss',\n  scoped: 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   * Whether to show that the file input is in an invalid state.\n   */\n  @Prop() invalid: boolean = false;\n\n  /**\n   * The message to show when the file input is invalid.\n   */\n  @Prop() invalidMessage: string = null;\n\n  /**\n   * Emitted when the added file(s) changes\n   */\n  @Event() fileInputChange: EventEmitter<FileInputChangeEventDetail>;\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({ files: 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.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.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.querySelector('.admiralty-file-input').classList.remove('drop_zone');\n\n    if (event.dataTransfer.files) {\n      this.storeFileInfo(event.dataTransfer.files);\n      this.fileInputChange.emit({ files: this.files });\n      console.log('Drop: ', this.files);\n    }\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            <span>{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        <admiralty-input-invalid style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-invalid>\n      </Host>\n    );\n  }\n}\n\nlet nextId = 0;\n"],"version":3}
+{"file":"admiralty-file-input.js","mappings":"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","names":[],"sources":["./src/components/file-input/file-input.scss?tag=admiralty-file-input&encapsulation=scoped","./src/components/file-input/file-input.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\n@use '../../scss/vars/typography';\n\n.admiralty-file-input {\n  background: #eee;\n  display: flex;\n  position: relative;\n  border: 2px dashed colours.$colour-admiralty-blue;\n  min-height: 120px;\n  align-content: stretch;\n  justify-content: stretch;\n  margin-bottom: 6px;\n  font-family: typography.$font-family;\n  font-size: 18px;\n  line-height: 24px;\n  font-weight: 300;\n\n  &.invalid {\n    border-color: colours.$colour-utility-error;\n  }\n\n  &.drop_zone {\n    // active when file is dragged over label\n    background: #fff !important;\n  }\n\n  .upload-icon {\n    color: colours.$colour-admiralty-blue;\n    font-size: 24px;\n    font-weight: 900;\n    margin: 0.4rem auto;\n    text-align: center;\n    flex: 0 1;\n  }\n}\n\nlabel {\n  border-image-repeat: stretch;\n  border-image-width: 1;\n  display: flex;\n  align-content: center;\n  flex-direction: column;\n  flex: 1;\n  justify-content: center;\n  cursor: pointer;\n\n  span {\n    color: colours.$colour-admiralty-blue;\n    flex: 0 1;\n    font-size: 18px;\n    font-weight: typography.$font-weight-medium;\n    text-align: center;\n    margin: 0.4rem 0;\n  }\n}\n\ninput[type='file'] {\n  align-items: baseline;\n  overflow: visible;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  z-index: -1;\n  width: 100%;\n\n  &:focus {\n    outline: 3px solid colours.$colour-utility-focus;\n    outline-offset: 2px;\n  }\n}\n","import { Component, Element, Event, Host, h, Prop, State, EventEmitter } from '@stencil/core';\nimport { FileInputChangeEventDetail } from './file-input.interface';\n\n@Component({\n  tag: 'admiralty-file-input',\n  styleUrl: 'file-input.scss',\n  scoped: 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   * Whether to show that the file input is in an invalid state.\n   */\n  @Prop() invalid: boolean = false;\n\n  /**\n   * The message to show when the file input is invalid.\n   */\n  @Prop() invalidMessage: string = null;\n\n  /**\n   * Emitted when the added file(s) changes\n   */\n  @Event() fileInputChange: EventEmitter<FileInputChangeEventDetail>;\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({ files: 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.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.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.querySelector('.admiralty-file-input').classList.remove('drop_zone');\n\n    if (event.dataTransfer.files) {\n      this.storeFileInfo(event.dataTransfer.files);\n      this.fileInputChange.emit({ files: this.files });\n      console.log('Drop: ', this.files);\n    }\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': true, 'invalid': this.invalid }}>\n          <label htmlFor={this.id}>\n            <admiralty-icon class=\"upload-icon\" icon-name=\"upload\"></admiralty-icon>\n            <span>{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        <admiralty-input-invalid style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-invalid>\n      </Host>\n    );\n  }\n}\n\nlet nextId = 0;\n"],"version":3}

package/dist/esm/admiralty-file-input.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b834f47d.js';
 
-const fileInputCss = ".admiralty-file-input.sc-admiralty-file-input{background:#eee;display:flex;position:relative;border:2px dashed #09315b;min-height:120px;align-content:stretch;justify-content:stretch;margin-bottom:6px;font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:18px;line-height:24px;font-weight:300}.admiralty-file-input.drop_zone.sc-admiralty-file-input{background:#fff !important}.admiralty-file-input.sc-admiralty-file-input .upload-icon.sc-admiralty-file-input{color:#09315b;font-size:24px;font-weight:900;margin:0.4rem auto;text-align:center;flex:0 1}label.sc-admiralty-file-input{border-image-repeat:stretch;border-image-width:1;display:flex;align-content:center;flex-direction:column;flex:1;justify-content:center;cursor:pointer}label.sc-admiralty-file-input span.sc-admiralty-file-input{color:#09315b;flex:0 1;font-size:18px;font-weight:normal;text-align:center;margin:0.4rem 0}input[type=file].sc-admiralty-file-input{align-items:baseline;overflow:visible;position:absolute;top:0;bottom:0;z-index:-1;width:100%}input[type=file].sc-admiralty-file-input:focus{outline:3px solid #ffdd00;outline-offset:2px}";
+const fileInputCss = ".admiralty-file-input.sc-admiralty-file-input{background:#eee;display:flex;position:relative;border:2px dashed #09315b;min-height:120px;align-content:stretch;justify-content:stretch;margin-bottom:6px;font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:18px;line-height:24px;font-weight:300}.admiralty-file-input.invalid.sc-admiralty-file-input{border-color:#e20d0d}.admiralty-file-input.drop_zone.sc-admiralty-file-input{background:#fff !important}.admiralty-file-input.sc-admiralty-file-input .upload-icon.sc-admiralty-file-input{color:#09315b;font-size:24px;font-weight:900;margin:0.4rem auto;text-align:center;flex:0 1}label.sc-admiralty-file-input{border-image-repeat:stretch;border-image-width:1;display:flex;align-content:center;flex-direction:column;flex:1;justify-content:center;cursor:pointer}label.sc-admiralty-file-input span.sc-admiralty-file-input{color:#09315b;flex:0 1;font-size:18px;font-weight:normal;text-align:center;margin:0.4rem 0}input[type=file].sc-admiralty-file-input{align-items:baseline;overflow:visible;position:absolute;top:0;bottom:0;z-index:-1;width:100%}input[type=file].sc-admiralty-file-input:focus{outline:3px solid #ffdd00;outline-offset:2px}";
 
 const FileInputComponent = class {
   constructor(hostRef) {
@@ -71,7 +71,7 @@ const FileInputComponent = class {
     }
   }
   render() {
-    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" }), h("span", null, 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 })), h("admiralty-input-invalid", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage)));
+    return (h(Host, { onDragLeave: event => this.dragLeaveHander(event), onDragOver: event => this.dragOverHandler(event), onDrop: event => this.dropHandler(event) }, h("div", { class: { 'admiralty-file-input': true, 'invalid': this.invalid } }, h("label", { htmlFor: this.id }, h("admiralty-icon", { class: "upload-icon", "icon-name": "upload" }), h("span", null, 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 })), h("admiralty-input-invalid", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage)));
   }
   get el() { return getElement(this); }
 };

package/dist/esm/admiralty-file-input.entry.js.map

@@ -1 +1 @@
-{"file":"admiralty-file-input.entry.js","mappings":"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","names":[],"sources":["./src/components/file-input/file-input.scss?tag=admiralty-file-input&encapsulation=scoped","./src/components/file-input/file-input.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\n@use '../../scss/vars/typography';\n\n.admiralty-file-input {\n  background: #eee;\n  display: flex;\n  position: relative;\n  border: 2px dashed colours.$colour-admiralty-blue;\n  min-height: 120px;\n  align-content: stretch;\n  justify-content: stretch;\n  margin-bottom: 6px;\n  font-family: typography.$font-family;\n  font-size: 18px;\n  line-height: 24px;\n  font-weight: 300;\n\n  &.drop_zone {\n    // active when file is dragged over label\n    background: #fff !important;\n  }\n\n  .upload-icon {\n    color: colours.$colour-admiralty-blue;\n    font-size: 24px;\n    font-weight: 900;\n    margin: 0.4rem auto;\n    text-align: center;\n    flex: 0 1;\n  }\n}\n\nlabel {\n  border-image-repeat: stretch;\n  border-image-width: 1;\n  display: flex;\n  align-content: center;\n  flex-direction: column;\n  flex: 1;\n  justify-content: center;\n  cursor: pointer;\n\n  span {\n    color: colours.$colour-admiralty-blue;\n    flex: 0 1;\n    font-size: 18px;\n    font-weight: typography.$font-weight-medium;\n    text-align: center;\n    margin: 0.4rem 0;\n  }\n}\n\ninput[type='file'] {\n  align-items: baseline;\n  overflow: visible;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  z-index: -1;\n  width: 100%;\n\n  &:focus {\n    outline: 3px solid colours.$colour-utility-focus;\n    outline-offset: 2px;\n  }\n}\n","import { Component, Element, Event, Host, h, Prop, State, EventEmitter } from '@stencil/core';\nimport { FileInputChangeEventDetail } from './file-input.interface';\n\n@Component({\n  tag: 'admiralty-file-input',\n  styleUrl: 'file-input.scss',\n  scoped: 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   * Whether to show that the file input is in an invalid state.\n   */\n  @Prop() invalid: boolean = false;\n\n  /**\n   * The message to show when the file input is invalid.\n   */\n  @Prop() invalidMessage: string = null;\n\n  /**\n   * Emitted when the added file(s) changes\n   */\n  @Event() fileInputChange: EventEmitter<FileInputChangeEventDetail>;\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({ files: 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.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.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.querySelector('.admiralty-file-input').classList.remove('drop_zone');\n\n    if (event.dataTransfer.files) {\n      this.storeFileInfo(event.dataTransfer.files);\n      this.fileInputChange.emit({ files: this.files });\n      console.log('Drop: ', this.files);\n    }\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            <span>{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        <admiralty-input-invalid style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-invalid>\n      </Host>\n    );\n  }\n}\n\nlet nextId = 0;\n"],"version":3}
+{"file":"admiralty-file-input.entry.js","mappings":"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","names":[],"sources":["./src/components/file-input/file-input.scss?tag=admiralty-file-input&encapsulation=scoped","./src/components/file-input/file-input.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\n@use '../../scss/vars/typography';\n\n.admiralty-file-input {\n  background: #eee;\n  display: flex;\n  position: relative;\n  border: 2px dashed colours.$colour-admiralty-blue;\n  min-height: 120px;\n  align-content: stretch;\n  justify-content: stretch;\n  margin-bottom: 6px;\n  font-family: typography.$font-family;\n  font-size: 18px;\n  line-height: 24px;\n  font-weight: 300;\n\n  &.invalid {\n    border-color: colours.$colour-utility-error;\n  }\n\n  &.drop_zone {\n    // active when file is dragged over label\n    background: #fff !important;\n  }\n\n  .upload-icon {\n    color: colours.$colour-admiralty-blue;\n    font-size: 24px;\n    font-weight: 900;\n    margin: 0.4rem auto;\n    text-align: center;\n    flex: 0 1;\n  }\n}\n\nlabel {\n  border-image-repeat: stretch;\n  border-image-width: 1;\n  display: flex;\n  align-content: center;\n  flex-direction: column;\n  flex: 1;\n  justify-content: center;\n  cursor: pointer;\n\n  span {\n    color: colours.$colour-admiralty-blue;\n    flex: 0 1;\n    font-size: 18px;\n    font-weight: typography.$font-weight-medium;\n    text-align: center;\n    margin: 0.4rem 0;\n  }\n}\n\ninput[type='file'] {\n  align-items: baseline;\n  overflow: visible;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  z-index: -1;\n  width: 100%;\n\n  &:focus {\n    outline: 3px solid colours.$colour-utility-focus;\n    outline-offset: 2px;\n  }\n}\n","import { Component, Element, Event, Host, h, Prop, State, EventEmitter } from '@stencil/core';\nimport { FileInputChangeEventDetail } from './file-input.interface';\n\n@Component({\n  tag: 'admiralty-file-input',\n  styleUrl: 'file-input.scss',\n  scoped: 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   * Whether to show that the file input is in an invalid state.\n   */\n  @Prop() invalid: boolean = false;\n\n  /**\n   * The message to show when the file input is invalid.\n   */\n  @Prop() invalidMessage: string = null;\n\n  /**\n   * Emitted when the added file(s) changes\n   */\n  @Event() fileInputChange: EventEmitter<FileInputChangeEventDetail>;\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({ files: 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.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.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.querySelector('.admiralty-file-input').classList.remove('drop_zone');\n\n    if (event.dataTransfer.files) {\n      this.storeFileInfo(event.dataTransfer.files);\n      this.fileInputChange.emit({ files: this.files });\n      console.log('Drop: ', this.files);\n    }\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': true, 'invalid': this.invalid }}>\n          <label htmlFor={this.id}>\n            <admiralty-icon class=\"upload-icon\" icon-name=\"upload\"></admiralty-icon>\n            <span>{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        <admiralty-input-invalid style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-invalid>\n      </Host>\n    );\n  }\n}\n\nlet nextId = 0;\n"],"version":3}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukho/admiralty-core",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -67,5 +67,5 @@
   "license": "MIT",
   "url": "https://github.com/UKHO/admiralty-design-system",
   "repository": "git://github.com/UKHO/admiralty-design-system.git",
-  "gitHead": "831f9488945e7eaa7809d73425635be84bde3442"
+  "gitHead": "50be222f84f867b1cd500a5dffc1b29aa9d9ba62"
 }

package/dist/admiralty/p-9f704f8f.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as t,h as e,H as a,g as l}from"./p-a2b7bb90.js";const n='.admiralty-file-input.sc-admiralty-file-input{background:#eee;display:flex;position:relative;border:2px dashed #09315b;min-height:120px;align-content:stretch;justify-content:stretch;margin-bottom:6px;font-family:"JohnstonITC", Helvetica, sans-serif;font-size:18px;line-height:24px;font-weight:300}.admiralty-file-input.drop_zone.sc-admiralty-file-input{background:#fff !important}.admiralty-file-input.sc-admiralty-file-input .upload-icon.sc-admiralty-file-input{color:#09315b;font-size:24px;font-weight:900;margin:0.4rem auto;text-align:center;flex:0 1}label.sc-admiralty-file-input{border-image-repeat:stretch;border-image-width:1;display:flex;align-content:center;flex-direction:column;flex:1;justify-content:center;cursor:pointer}label.sc-admiralty-file-input span.sc-admiralty-file-input{color:#09315b;flex:0 1;font-size:18px;font-weight:normal;text-align:center;margin:0.4rem 0}input[type=file].sc-admiralty-file-input{align-items:baseline;overflow:visible;position:absolute;top:0;bottom:0;z-index:-1;width:100%}input[type=file].sc-admiralty-file-input:focus{outline:3px solid #ffdd00;outline-offset:2px}';const s=class{constructor(e){i(this,e);this.fileInputChange=t(this,"fileInputChange",7);this.id=`admiralty-file-input-${++r}`;this.sizeOf=function(i){if(i===0){return"0.00 B"}var t=Math.floor(Math.log(i)/Math.log(1024));return(i/Math.pow(1024,t)).toFixed(2)+" "+" KMGTP".charAt(t)+"B"};this.label="Click to choose a file or drag it";this.multiple=false;this.invalid=false;this.invalidMessage=null;this.files=undefined}changeHandler(i){i.preventDefault();this.storeFileInfo(i.target.files);this.fileInputChange.emit({files:this.files});console.log("changeHandler:",this.files)}storeFileInfo(i){this.files=this.multiple?[...i]:[i.item(0)]}dragOverHandler(i){i.preventDefault();this.el.querySelector(".admiralty-file-input").classList.add("drop_zone")}dragLeaveHander(i){i.preventDefault();this.el.querySelector(".admiralty-file-input").classList.remove("drop_zone")}dropHandler(i){i.preventDefault();this.el.querySelector(".admiralty-file-input").classList.remove("drop_zone");if(i.dataTransfer.files){this.storeFileInfo(i.dataTransfer.files);this.fileInputChange.emit({files:this.files});console.log("Drop: ",this.files)}}render(){return e(a,{onDragLeave:i=>this.dragLeaveHander(i),onDragOver:i=>this.dragOverHandler(i),onDrop:i=>this.dropHandler(i)},e("div",{class:"admiralty-file-input"},e("label",{htmlFor:this.id},e("admiralty-icon",{class:"upload-icon","icon-name":"upload"}),e("span",null,this.label)),e("input",{onChange:i=>this.changeHandler(i),id:this.id,"aria-hidden":"true","aria-label":"File Upload",type:"file",class:"admiralty-form-field",multiple:this.multiple})),e("admiralty-input-invalid",{style:{visibility:this.invalid&&this.invalidMessage?"visible":"hidden"}},this.invalidMessage))}get el(){return l(this)}};let r=0;s.style=n;export{s as admiralty_file_input};
-//# sourceMappingURL=p-9f704f8f.entry.js.map

package/dist/admiralty/p-9f704f8f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["fileInputCss","FileInputComponent","this","id","nextId","sizeOf","bytes","e","Math","floor","log","pow","toFixed","charAt","changeHandler","event","preventDefault","storeFileInfo","target","files","fileInputChange","emit","console","multiple","item","dragOverHandler","el","querySelector","classList","add","dragLeaveHander","remove","dropHandler","dataTransfer","render","h","Host","onDragLeave","onDragOver","onDrop","class","htmlFor","label","onChange","type","style","visibility","invalid","invalidMessage"],"sources":["./src/components/file-input/file-input.scss?tag=admiralty-file-input&encapsulation=scoped","./src/components/file-input/file-input.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\n@use '../../scss/vars/typography';\n\n.admiralty-file-input {\n  background: #eee;\n  display: flex;\n  position: relative;\n  border: 2px dashed colours.$colour-admiralty-blue;\n  min-height: 120px;\n  align-content: stretch;\n  justify-content: stretch;\n  margin-bottom: 6px;\n  font-family: typography.$font-family;\n  font-size: 18px;\n  line-height: 24px;\n  font-weight: 300;\n\n  &.drop_zone {\n    // active when file is dragged over label\n    background: #fff !important;\n  }\n\n  .upload-icon {\n    color: colours.$colour-admiralty-blue;\n    font-size: 24px;\n    font-weight: 900;\n    margin: 0.4rem auto;\n    text-align: center;\n    flex: 0 1;\n  }\n}\n\nlabel {\n  border-image-repeat: stretch;\n  border-image-width: 1;\n  display: flex;\n  align-content: center;\n  flex-direction: column;\n  flex: 1;\n  justify-content: center;\n  cursor: pointer;\n\n  span {\n    color: colours.$colour-admiralty-blue;\n    flex: 0 1;\n    font-size: 18px;\n    font-weight: typography.$font-weight-medium;\n    text-align: center;\n    margin: 0.4rem 0;\n  }\n}\n\ninput[type='file'] {\n  align-items: baseline;\n  overflow: visible;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  z-index: -1;\n  width: 100%;\n\n  &:focus {\n    outline: 3px solid colours.$colour-utility-focus;\n    outline-offset: 2px;\n  }\n}\n","import { Component, Element, Event, Host, h, Prop, State, EventEmitter } from '@stencil/core';\nimport { FileInputChangeEventDetail } from './file-input.interface';\n\n@Component({\n  tag: 'admiralty-file-input',\n  styleUrl: 'file-input.scss',\n  scoped: 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   * Whether to show that the file input is in an invalid state.\n   */\n  @Prop() invalid: boolean = false;\n\n  /**\n   * The message to show when the file input is invalid.\n   */\n  @Prop() invalidMessage: string = null;\n\n  /**\n   * Emitted when the added file(s) changes\n   */\n  @Event() fileInputChange: EventEmitter<FileInputChangeEventDetail>;\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({ files: 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.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.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.querySelector('.admiralty-file-input').classList.remove('drop_zone');\n\n    if (event.dataTransfer.files) {\n      this.storeFileInfo(event.dataTransfer.files);\n      this.fileInputChange.emit({ files: this.files });\n      console.log('Drop: ', this.files);\n    }\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            <span>{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        <admiralty-input-invalid style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-invalid>\n      </Host>\n    );\n  }\n}\n\nlet nextId = 0;\n"],"mappings":"gEAAA,MAAMA,EAAe,ylC,MCQRC,EAAkB,M,0EA4B7BC,KAAAC,GAAa,0BAA0BC,IAiEvCF,KAAAG,OAAS,SAAUC,GACjB,GAAIA,IAAU,EAAG,CACf,MAAO,Q,CAET,IAAIC,EAAIC,KAAKC,MAAMD,KAAKE,IAAIJ,GAASE,KAAKE,IAAI,OAC9C,OAAQJ,EAAQE,KAAKG,IAAI,KAAMJ,IAAIK,QAAQ,GAAK,IAAM,SAASC,OAAON,GAAK,G,aA5FrD,oC,cAKL,M,aAKQ,M,oBAKM,K,qBAkBjCO,cAAcC,GACZA,EAAMC,iBAENd,KAAKe,cAAeF,EAAMG,OAA4BC,OAEtDjB,KAAKkB,gBAAgBC,KAAK,CAAEF,MAAOjB,KAAKiB,QACxCG,QAAQZ,IAAI,iBAAkBR,KAAKiB,M,CAG7BF,cAAcE,GACpBjB,KAAKiB,MAAQjB,KAAKqB,SAAW,IAAKJ,GAA+B,CAACA,EAAMK,KAAK,G,CAQ/EC,gBAAgBV,GACdA,EAAMC,iBACNd,KAAKwB,GAAGC,cAAc,yBAAyBC,UAAUC,IAAI,Y,CAQ/DC,gBAAgBf,GACdA,EAAMC,iBACNd,KAAKwB,GAAGC,cAAc,yBAAyBC,UAAUG,OAAO,Y,CAQlEC,YAAYjB,GACVA,EAAMC,iBACNd,KAAKwB,GAAGC,cAAc,yBAAyBC,UAAUG,OAAO,aAEhE,GAAIhB,EAAMkB,aAAad,MAAO,CAC5BjB,KAAKe,cAAcF,EAAMkB,aAAad,OACtCjB,KAAKkB,gBAAgBC,KAAK,CAAEF,MAAOjB,KAAKiB,QACxCG,QAAQZ,IAAI,SAAUR,KAAKiB,M,EAiB/Be,SACE,OACEC,EAACC,EAAI,CAACC,YAAatB,GAASb,KAAK4B,gBAAgBf,GAAQuB,WAAYvB,GAASb,KAAKuB,gBAAgBV,GAAQwB,OAAQxB,GAASb,KAAK8B,YAAYjB,IAC3IoB,EAAA,OAAKK,MAAM,wBACTL,EAAA,SAAOM,QAASvC,KAAKC,IACnBgC,EAAA,kBAAgBK,MAAM,cAAa,YAAW,WAC9CL,EAAA,YAAOjC,KAAKwC,QAEdP,EAAA,SACEQ,SAAU5B,GAASb,KAAKY,cAAcC,GACtCZ,GAAID,KAAKC,GAAE,cACC,OAAM,aACP,cACXyC,KAAK,OACLJ,MAAM,uBACNjB,SAAUrB,KAAKqB,YAGnBY,EAAA,2BAAyBU,MAAO,CAAEC,WAAY5C,KAAK6C,SAAW7C,KAAK8C,eAAiB,UAAY,WAAa9C,KAAK8C,gB,2BAM1H,IAAI5C,EAAS,E"}