@ukho/admiralty-core 0.0.0

package/dist/admiralty/p-f9815502.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as s,H as e,g as h}from"./p-e1680782.js";const a=".visually-hidden{position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}*{margin:0px;padding:0px}.text-input-wrap{height:auto !important}.filterTextInput{width:100%}.typeahead-list-container{left:0px;background-color:#ffffff;width:100%;box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);border:2px solid #333333;border-top:none;box-sizing:border-box;max-height:205px;overflow-y:auto;z-index:1}.typeahead-list-container .typeahead-list{list-style:none}.typeahead-list-container .typeahead-list li{cursor:pointer;transform:unset !important;padding:6px;min-height:24px}.typeahead-list-container .typeahead-list li:before{content:none}.typeahead-list-container .typeahead-list li.highlighted{background-color:#09315b;color:#ffffff}";const n=class{constructor(s){t(this,s);this.selectionChanged=i(this,"selectionChanged",7);this.valueChanged=i(this,"valueChanged",7);this._id=`admiralty-typeahead-${++r}`;this.hintId=`${this._id}-assistive-hint`;this.listId=`${this._id}-list`;this.filterList=[];this.selectedItemIndex=-1;this.isFocused=false;this.isSilenced=false;this.isAlternateStatusSection=false;this.originalSearch="";this.hasBeenFocusedAtLeastOnce=false;this.filterResult=new Array;this.value=undefined;this.label=undefined;this.placeholder=undefined;this.resultsOnInitFocus=false}get inputValue(){return this.inputControl.value.toString()}set inputValue(t){this.inputControl.value=t}connectedCallback(){const t=this.el.querySelectorAll("admiralty-type-ahead-item");t.forEach((t=>{this.filterList.push(t.getAttribute("value"))}))}componentDidLoad(){if(this.value){this.inputValue=this.value}}handleFocusIn(){if(this.resultsOnInitFocus&&!this.hasBeenFocusedAtLeastOnce){this.performFilter("");this.hasBeenFocusedAtLeastOnce=true}this.isFocused=true;this.isSilenced=false}handleFocusOut(){this.isFocused=false;this.statusText=null;this.isSilenced=true}textChanged(t){this.originalSearch=t;this.performFilter(t);this.isSilenced=false;this.valueChanged.emit(t)}handleKeyPressed(t){t.stopImmediatePropagation();if(t.key===o.UP_ARROW||t.key===o.DOWN_ARROW){this.navigateSuggestions(t.key);this.updateScroll()}else if(t.key!==o.ENTER){this.textChanged(this.inputValue);this.selectCurrentItem()}}handleKeyDown(t){t.stopImmediatePropagation();if(t.key===o.TAB||t.key===o.ENTER){this.selectCurrentItem()}}handleItemSelected(t){this.inputValue=t;this.textChanged(t);this.filterResult=new Array;this.selectionChanged.emit(t)}performFilter(t){const i=(t,i)=>{const s=t.filter((t=>i===null||i.length<1||t.toLowerCase().indexOf(i.toLowerCase())>-1));return s};this.filterResult=i(this.filterList,t);this.selectedItemIndex=-1}addHighlight(){if(this.selectedItemIndex>-1){const t=this.el.shadowRoot.querySelector(`#${this.getListItemId(this.selectedItemIndex)}`);t.classList.add("highlighted")}}removeHighlight(t){if(t>-1){const i=this.el.shadowRoot.querySelector(`#${this.getListItemId(t)}`);i.classList.remove("highlighted")}}selectCurrentItem(){if(this.selectedItemIndex>=0){const t=this.filterResult[this.selectedItemIndex];this.handleItemSelected(t)}}handleItemHovered(t){this.removeHighlight(this.selectedItemIndex);this.selectedItemIndex=t;this.addHighlight()}handleComponentFocusOut(){var t;if(((t=this.filterResult)===null||t===void 0?void 0:t.length)>0){this.filterResult=new Array;this.hasBeenFocusedAtLeastOnce=false}}updateScroll(){const t=this.listContainer;const i=t.querySelector("ul");const s=Array.from(i.childNodes).find((t=>t.ariaPosInSet===`${this.selectedItemIndex+1}`));if(t&&s&&t.scrollHeight+t.clientHeight){s.scrollIntoView()}}navigateSuggestions(t){if(t===o.UP_ARROW){this.removeHighlight(this.selectedItemIndex);this.selectedItemIndex--;if(this.selectedItemIndex===-2){this.selectedItemIndex=this.filterResult.length-1}}if(t===o.DOWN_ARROW){this.removeHighlight(this.selectedItemIndex);this.selectedItemIndex++;if(this.selectedItemIndex>this.filterResult.length-1){this.selectedItemIndex=-1}}if(this.selectedItemIndex===-1){this.inputValue=this.originalSearch}else{const t=this.filterResult[this.selectedItemIndex];this.inputValue=t;this.addHighlight()}}getListItemId(t){return`${this.listId}-item-${t}`}render(){return s(e,{onFocusout:t=>this.handleComponentFocusOut()},s("div",{class:"visually-hidden"},s("div",{class:"results-status-a",role:"status","aria-atomic":"true","aria-live":"polite"},!this.isSilenced&&this.isAlternateStatusSection?this.statusText:""),s("div",{class:"results-status-b",role:"status","aria-atomic":"true","aria-live":"polite"},!this.isSilenced&&!this.isAlternateStatusSection?this.statusText:"")),s("admiralty-input",{type:"text",ref:t=>this.inputControl=t,label:this.label,placeholder:this.placeholder,class:"filterTextInput",onKeyUp:t=>this.handleKeyPressed(t),onKeyDown:t=>this.handleKeyDown(t),onFocusin:t=>this.handleFocusIn(),onFocusout:t=>this.handleFocusOut(),"aria-expanded":this.isFocused&&this.filterResult.length>0}),s("span",{id:this.hintId,class:"visually-hidden"},"When autocomplete results are available use up and down arrows to review and enter to select. Touch device users, explore by touch or with swipe gestures."),this.filterResult.length>0?s("div",{class:"typeahead-list-container",ref:t=>this.listContainer=t},s("ul",{class:"typeahead-list",id:this.listId,role:"listbox"},this.filterResult.map(((t,i)=>s("li",{id:this.getListItemId(i),onMouseDown:i=>this.handleItemSelected(t),onMouseOver:t=>this.handleItemHovered(i),"aria-selected":i===this.selectedItemIndex,role:"option",tabindex:"-1","aria-posinset":i+1,"aria-setsize":this.filterResult.length},t))))):null,s("slot",null))}get el(){return h(this)}};var o;(function(t){t["UP_ARROW"]="ArrowUp";t["DOWN_ARROW"]="ArrowDown";t["ENTER"]="Enter";t["TAB"]="Tab"})(o||(o={}));let r=0;n.style=a;export{n as admiralty_type_ahead};
+//# sourceMappingURL=p-f9815502.entry.js.map

package/dist/admiralty/p-f9815502.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["typeAheadCss","TypeAheadComponent","this","_id","id","hintId","listId","filterList","selectedItemIndex","isFocused","isSilenced","isAlternateStatusSection","originalSearch","hasBeenFocusedAtLeastOnce","Array","inputValue","inputControl","value","toString","connectedCallback","slotItems","el","querySelectorAll","forEach","push","getAttribute","componentDidLoad","handleFocusIn","resultsOnInitFocus","performFilter","handleFocusOut","statusText","textChanged","valueChanged","emit","handleKeyPressed","event","stopImmediatePropagation","key","Keys","UP_ARROW","DOWN_ARROW","navigateSuggestions","updateScroll","ENTER","selectCurrentItem","handleKeyDown","TAB","handleItemSelected","filterResult","selectionChanged","filter","text","length","toLowerCase","indexOf","addHighlight","listItem","shadowRoot","querySelector","getListItemId","classList","add","removeHighlight","i","remove","selectedItemText","handleItemHovered","index","handleComponentFocusOut","_a","container","listContainer","ul","selectedItem","from","childNodes","find","item","ariaPosInSet","scrollHeight","clientHeight","scrollIntoView","render","h","Host","onFocusout","_ev","class","role","type","ref","label","placeholder","onKeyUp","ev","onKeyDown","onFocusin","map","onMouseDown","onMouseOver","tabindex"],"sources":["./src/components/type-ahead/type-ahead.scss?tag=admiralty-type-ahead&encapsulation=shadow","./src/components/type-ahead/type-ahead.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\r\n@use \"../../scss/base/a11y\";\r\n@use \"../../scss/vars/typography\";\r\n\r\n* {\r\n  margin: 0px;\r\n  padding: 0px;\r\n}\r\n\r\n.text-input-wrap {\r\n  height: auto !important;\r\n}\r\n\r\n.filterTextInput {\r\n  width: 100%;\r\n}\r\n\r\n.typeahead-list-container {\r\n  left: 0px;\r\n  background-color: colours.$colour-white;\r\n  width: 100%;\r\n  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);\r\n  border: 2px solid colours.$colour-text;\r\n  border-top: none;\r\n  box-sizing: border-box;\r\n  max-height: 205px;\r\n  overflow-y: auto;\r\n  z-index: 1;\r\n\r\n  .typeahead-list {\r\n    list-style: none;\r\n\r\n    li {\r\n      cursor: pointer;\r\n      transform: unset !important;\r\n      padding: 6px;\r\n      min-height: 24px;\r\n    }\r\n\r\n    li:before {\r\n      content: none;\r\n    }\r\n\r\n    li.highlighted {\r\n      background-color: colours.$colour-admiralty-blue;\r\n      color: colours.$colour-white;\r\n    }\r\n  }\r\n}\r\n\r\n","import { Component, EventEmitter, Host, Prop, Event, h, State, Element } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-type-ahead',\n  styleUrl: 'type-ahead.scss',\n  shadow: true,\n})\nexport class TypeAheadComponent {\n  private _id = `admiralty-typeahead-${++id}`;\n\n  hintId = `${this._id}-assistive-hint`;\n  listId = `${this._id}-list`;\n\n  @Element() el: HTMLElement;\n\n  listContainer!: HTMLDivElement;\n  inputControl!: HTMLAdmiraltyInputElement;\n\n  @State() filterResult: string[] = new Array<string>();\n\n  filterList: Array<string> = [];\n\n  selectedItemIndex = -1;\n  isFocused = false;\n\n  isSilenced = false;\n  isAlternateStatusSection = false;\n  statusText: string;\n\n  private originalSearch = '';\n  private hasBeenFocusedAtLeastOnce = false;\n\n  private get inputValue() {\n    return this.inputControl.value.toString();\n  }\n\n  private set inputValue(value: string) {\n    this.inputControl.value = value;\n  }\n\n  /**\n   * The value of the textinput\n   */\n  @Prop() value: string;\n\n  /**\n   * The text content of the label for the input box\n   */\n  @Prop() label: string;\n\n  /**\n   * The placeholder text for the input field\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * Optional property to show results when input box is initally focused\n   */\n  @Prop() resultsOnInitFocus: boolean = false;\n\n  /**\n   * Optional function that will be executed when the user selects an item from the typeahead\n   */\n  @Event() selectionChanged: EventEmitter<string>;\n\n  /**\n   * Event that is fired whenever the value of the typeahead changes\n   * e.g. selection from the dropdown or manually typed entry\n   */\n  @Event() valueChanged: EventEmitter<string>;\n\n  connectedCallback() {\n    const slotItems = this.el.querySelectorAll('admiralty-type-ahead-item');\n    slotItems.forEach(el => {\n      this.filterList.push(el.getAttribute('value'));\n    });\n  }\n\n  componentDidLoad() {\n    if (this.value) {\n      this.inputValue = this.value;\n    }\n  }\n\n  handleFocusIn() {\n    if (this.resultsOnInitFocus && !this.hasBeenFocusedAtLeastOnce) {\n      this.performFilter('');\n      this.hasBeenFocusedAtLeastOnce = true;\n    }\n\n    this.isFocused = true;\n    this.isSilenced = false;\n  }\n\n  handleFocusOut() {\n    this.isFocused = false;\n    this.statusText = null;\n    this.isSilenced = true;\n  }\n\n  private textChanged(value: string): void {\n    this.originalSearch = value;\n    this.performFilter(value);\n    this.isSilenced = false;\n    this.valueChanged.emit(value);\n  }\n\n  handleKeyPressed(event: KeyboardEvent): void {\n    event.stopImmediatePropagation();\n\n    if (event.key === Keys.UP_ARROW || event.key === Keys.DOWN_ARROW) {\n      this.navigateSuggestions(event.key);\n      this.updateScroll();\n    } else if (event.key !== Keys.ENTER) {\n      this.textChanged(this.inputValue);\n      this.selectCurrentItem();\n    }\n  }\n\n  handleKeyDown(event: KeyboardEvent): void {\n    event.stopImmediatePropagation();\n\n    if (event.key === Keys.TAB || event.key === Keys.ENTER) {\n      this.selectCurrentItem();\n    }\n  }\n\n  handleItemSelected(value: string): void {\n    this.inputValue = value;\n    this.textChanged(value);\n    this.filterResult = new Array<string>();\n    this.selectionChanged.emit(value);\n  }\n\n  private performFilter(value: string) {\n    const filter = (filterList: string[], text: string) => {\n      const filterResult = filterList.filter(value => {\n        return text === null || text.length < 1 || value.toLowerCase().indexOf(text.toLowerCase()) > -1;\n      });\n      return filterResult;\n    };\n\n    this.filterResult = filter(this.filterList, value);\n\n    this.selectedItemIndex = -1;\n  }\n\n  private addHighlight() {\n    if (this.selectedItemIndex > -1) {\n      const listItem = this.el.shadowRoot.querySelector(`#${this.getListItemId(this.selectedItemIndex)}`);\n      listItem.classList.add('highlighted');\n    }\n  }\n\n  private removeHighlight(i: number) {\n    if (i > -1) {\n      const listItem = this.el.shadowRoot.querySelector(`#${this.getListItemId(i)}`);\n      listItem.classList.remove('highlighted');\n    }\n  }\n\n  private selectCurrentItem(): void {\n    if (this.selectedItemIndex >= 0) {\n      const selectedItemText = this.filterResult[this.selectedItemIndex];\n      this.handleItemSelected(selectedItemText);\n    }\n  }\n\n  handleItemHovered(index: number): void {\n    this.removeHighlight(this.selectedItemIndex);\n    this.selectedItemIndex = index;\n    this.addHighlight();\n  }\n\n  handleComponentFocusOut() {\n    // Ensure dropdown closed on clicking or tabbing away from this component\n    if (this.filterResult?.length > 0) {\n      this.filterResult = new Array<string>();\n      this.hasBeenFocusedAtLeastOnce = false;\n    }\n  }\n\n  /**\n   * Check if the selected option is in view, and scroll if not\n   */\n  private updateScroll() {\n    const container = this.listContainer;\n\n    const ul = container.querySelector('ul');\n    const selectedItem: any = Array.from(ul.childNodes).find((item: any) => item.ariaPosInSet === `${this.selectedItemIndex + 1}`);\n\n    if (container && selectedItem && container.scrollHeight + container.clientHeight) {\n      selectedItem.scrollIntoView();\n    }\n  }\n\n  private navigateSuggestions(key: Keys) {\n    if (key === Keys.UP_ARROW) {\n      this.removeHighlight(this.selectedItemIndex);\n      this.selectedItemIndex--;\n      if (this.selectedItemIndex === -2) {\n        this.selectedItemIndex = this.filterResult.length - 1;\n      }\n    }\n    if (key === Keys.DOWN_ARROW) {\n      this.removeHighlight(this.selectedItemIndex);\n      this.selectedItemIndex++;\n      if (this.selectedItemIndex > this.filterResult.length - 1) {\n        this.selectedItemIndex = -1;\n      }\n    }\n    if (this.selectedItemIndex === -1) {\n      this.inputValue = this.originalSearch;\n    } else {\n      const value = this.filterResult[this.selectedItemIndex];\n\n      this.inputValue = value;\n\n      this.addHighlight();\n    }\n  }\n\n  private getListItemId(i: number) {\n    return `${this.listId}-item-${i}`;\n  }\n\n  render() {\n    return (\n      <Host onFocusout={_ev => this.handleComponentFocusOut()}>\n        <div class=\"visually-hidden\">\n          <div class=\"results-status-a\" role=\"status\" aria-atomic=\"true\" aria-live=\"polite\">\n            {!this.isSilenced && this.isAlternateStatusSection ? this.statusText : ''}\n          </div>\n          <div class=\"results-status-b\" role=\"status\" aria-atomic=\"true\" aria-live=\"polite\">\n            {!this.isSilenced && !this.isAlternateStatusSection ? this.statusText : ''}\n          </div>\n        </div>\n        <admiralty-input\n          type=\"text\"\n          ref={el => (this.inputControl = el)}\n          label={this.label}\n          placeholder={this.placeholder}\n          class=\"filterTextInput\"\n          onKeyUp={ev => this.handleKeyPressed(ev)}\n          onKeyDown={ev => this.handleKeyDown(ev)}\n          onFocusin={_ev => this.handleFocusIn()}\n          onFocusout={_ev => this.handleFocusOut()}\n          aria-expanded={this.isFocused && this.filterResult.length > 0}\n        ></admiralty-input>\n\n        <span id={this.hintId} class=\"visually-hidden\">\n          When autocomplete results are available use up and down arrows to review and enter to select. Touch device users, explore by touch or with swipe gestures.\n        </span>\n        {this.filterResult.length > 0 ? (\n          <div class=\"typeahead-list-container\" ref={el => (this.listContainer = el)}>\n            <ul class=\"typeahead-list\" id={this.listId} role=\"listbox\">\n              {this.filterResult.map((item, i) => (\n                <li\n                  id={this.getListItemId(i)}\n                  onMouseDown={_ev => this.handleItemSelected(item)}\n                  onMouseOver={_ev => this.handleItemHovered(i)}\n                  aria-selected={i === this.selectedItemIndex}\n                  role=\"option\"\n                  tabindex=\"-1\"\n                  aria-posinset={i + 1}\n                  aria-setsize={this.filterResult.length}\n                >\n                  {item}\n                </li>\n              ))}\n            </ul>\n          </div>\n        ) : null}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n\nenum Keys {\n  UP_ARROW = 'ArrowUp',\n  DOWN_ARROW = 'ArrowDown',\n  ENTER = 'Enter',\n  TAB = 'Tab',\n}\n\nlet id = 0;\n"],"mappings":"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"}

package/dist/admiralty/p-ffb0dae5.entry.js

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

package/dist/admiralty/p-ffb0dae5.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","shadowRoot","querySelector","classList","add","dragLeaveHander","remove","dropHandler","dataTransfer","filesDisplay","name","size","length","render","h","Host","onDragLeave","onDragOver","onDrop","class","htmlFor","_a","label","onChange","type"],"sources":["./src/components/file-input/file-input.scss?tag=admiralty-file-input&encapsulation=shadow","./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: 36px;\n  font-family: typography.$font-family;\n  font-size: 18px;\n  line-height: 24px;\n  font-weight: 300;\n\n  &.drop_zone { // 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: .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-light;\n    text-align: center;\n    margin: 0.4rem 0;\n\n    &.instructions {\n      font-weight: typography.$font-weight-medium;\n    }\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';\n\n@Component({\n  tag: 'admiralty-file-input',\n  styleUrl: 'file-input.scss',\n  shadow: true,\n})\nexport class FileInputComponent {\n  @Element() el: HTMLElement;\n\n  /**\n   * Used to display instructions to the user and is replaced with the filename the user inputs\n   */\n  @Prop() label: string = 'Click to choose a file or drag it';\n\n  /**\n   * If true, enables multiple files to be selected or dragged\n   */\n  @Prop() multiple = false;\n\n  /**\n   * Emitted when the added file(s) changes\n   */\n  @Event() fileInputChange: EventEmitter<File[]>;\n\n  id: string = `admiralty-file-input-${++nextId}`;\n\n  /**\n   * INTERNAL - The list of files currently in the field\n   */\n  @State() files: File[];\n\n  /**\n   * The event that is fired when the user clicks on the file input box and uses the default dialog\n   * @param event\n   */\n  changeHandler(event: Event) {\n    event.preventDefault();\n\n    this.storeFileInfo((event.target as HTMLInputElement).files);\n\n    this.fileInputChange.emit(this.files);\n    console.log('changeHandler:', this.files);\n  }\n\n  private storeFileInfo(files: FileList) {\n    this.files = this.multiple ? [...(files as unknown as File[])] : [files.item(0)];\n  }\n\n  /**\n   * Prevents default dragOver behaviour which, stops the file being downloaded to the browser\n   * in a new tab\n   * @param event\n   */\n  dragOverHandler(event: DragEvent) {\n    event.preventDefault();\n    this.el.shadowRoot.querySelector('.admiralty-file-input').classList.add('drop_zone');\n  }\n\n  /**\n   * When this event is fired the 'drop_zone' class is removed from the wrapper 'admiralty-file-input' div\n   * which, turns the background back to off white\n   * @param event\n   */\n  dragLeaveHander(event: DragEvent) {\n    event.preventDefault();\n    this.el.shadowRoot.querySelector('.admiralty-file-input').classList.remove('drop_zone');\n  }\n\n  /**\n   * Handles the 'file' the user drops into the input field\n   * Does a check if it's a file and update the interface with the filename and the size of the file\n   * @param event\n   */\n  dropHandler(event: DragEvent) {\n    event.preventDefault();\n    this.el.shadowRoot.querySelector('.admiralty-file-input').classList.remove('drop_zone');\n\n    if (event.dataTransfer.files) {\n      this.storeFileInfo(event.dataTransfer.files);\n      this.fileInputChange.emit(this.files);\n      console.log('Drop: ', this.files);\n    }\n  }\n\n  get filesDisplay() {\n    return `${this.files[0].name} (${this.sizeOf(this.files[0].size)}) ${this.files.length > 1 ? ' ...' : ''}`;\n  }\n\n  /**\n   * Takes the bytes of a file and returns it as human readable figure\n   * @param bytes pass bytes throughs as a number\n   * @returns convers the bytes to the appropiate largest figure followed by the  format ie. 'kb', 'mb' etc\n   */\n  sizeOf = function (bytes: number) {\n    if (bytes === 0) {\n      return '0.00 B';\n    }\n    var e = Math.floor(Math.log(bytes) / Math.log(1024));\n    return (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B';\n  };\n\n  render() {\n    return (\n      <Host onDragLeave={event => this.dragLeaveHander(event)} onDragOver={event => this.dragOverHandler(event)} onDrop={event => this.dropHandler(event)}>\n        <div class=\"admiralty-file-input\">\n          <label htmlFor={this.id}>\n            <admiralty-icon class=\"upload-icon\" icon-name=\"upload\"></admiralty-icon>\n            {this.files?.length ? <span>{this.filesDisplay}</span> : <span class=\"instructions\">{this.label}</span>}\n          </label>\n          <input\n            onChange={event => this.changeHandler(event)}\n            id={this.id}\n            aria-hidden=\"true\"\n            aria-label=\"File Upload\"\n            type=\"file\"\n            class=\"admiralty-form-field\"\n            multiple={this.multiple}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet nextId = 0;\n"],"mappings":"gEAAA,MAAMA,EAAe,06B,MCORC,EAAkB,M,0EAkB7BC,KAAAC,GAAa,0BAA0BC,IAqEvCF,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,aAtFrD,oC,cAKL,M,qBAkBnBO,cAAcC,GACZA,EAAMC,iBAENd,KAAKe,cAAeF,EAAMG,OAA4BC,OAEtDjB,KAAKkB,gBAAgBC,KAAKnB,KAAKiB,OAC/BG,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,WAAWC,cAAc,yBAAyBC,UAAUC,IAAI,Y,CAQ1EC,gBAAgBhB,GACdA,EAAMC,iBACNd,KAAKwB,GAAGC,WAAWC,cAAc,yBAAyBC,UAAUG,OAAO,Y,CAQ7EC,YAAYlB,GACVA,EAAMC,iBACNd,KAAKwB,GAAGC,WAAWC,cAAc,yBAAyBC,UAAUG,OAAO,aAE3E,GAAIjB,EAAMmB,aAAaf,MAAO,CAC5BjB,KAAKe,cAAcF,EAAMmB,aAAaf,OACtCjB,KAAKkB,gBAAgBC,KAAKnB,KAAKiB,OAC/BG,QAAQZ,IAAI,SAAUR,KAAKiB,M,EAI3BgB,mBACF,MAAO,GAAGjC,KAAKiB,MAAM,GAAGiB,SAASlC,KAAKG,OAAOH,KAAKiB,MAAM,GAAGkB,UAAUnC,KAAKiB,MAAMmB,OAAS,EAAI,OAAS,I,CAgBxGC,S,MACE,OACEC,EAACC,EAAI,CAACC,YAAa3B,GAASb,KAAK6B,gBAAgBhB,GAAQ4B,WAAY5B,GAASb,KAAKuB,gBAAgBV,GAAQ6B,OAAQ7B,GAASb,KAAK+B,YAAYlB,IAC3IyB,EAAA,OAAKK,MAAM,wBACTL,EAAA,SAAOM,QAAS5C,KAAKC,IACnBqC,EAAA,kBAAgBK,MAAM,cAAa,YAAW,aAC7CE,EAAA7C,KAAKiB,SAAK,MAAA4B,SAAA,SAAAA,EAAET,QAASE,EAAA,YAAOtC,KAAKiC,cAAuBK,EAAA,QAAMK,MAAM,gBAAgB3C,KAAK8C,QAE5FR,EAAA,SACES,SAAUlC,GAASb,KAAKY,cAAcC,GACtCZ,GAAID,KAAKC,GAAE,cACC,OAAM,aACP,cACX+C,KAAK,OACLL,MAAM,uBACNtB,SAAUrB,KAAKqB,Y,2BAQ3B,IAAInB,EAAS,E"}

package/dist/admiralty/p-ffe3ca07.entry.js

@@ -0,0 +1,2 @@
+import{r as i,h as n,H as e}from"./p-e1680782.js";import{f as a}from"./p-18cff2de.js";const t="@media (max-width: 1023px){.desktop-only{display:none}}@media (min-width: 1024px){.not-desktop{display:none}}@media (min-width: 1024px){.tablet-only{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop{display:none}}@media (min-width: 1024px){.phone-or-tablet{display:none}}@media (min-width: 1024px){.phone-only{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only{display:none}}:host{display:flex;align-items:center}.breadcrumb-icon{margin:0 10px;font-size:12px}a{display:inline-block;font-size:14px;font-weight:300;text-decoration:none;color:#333333;margin:10px 2px}a:hover{color:#09315b}a.active{color:#09315b;font-weight:normal}";const o=class{constructor(n){i(this,n);this.active=false;this.first=undefined;this.href=undefined}render(){return n(e,null,!this.first&&n("admiralty-icon",{class:"breadcrumb-icon","icon-name":a.iconName}),n("a",{class:{active:this.active},href:this.href||"#"},n("slot",null)))}};o.style=t;export{o as admiralty_breadcrumb};
+//# sourceMappingURL=p-ffe3ca07.entry.js.map

package/dist/admiralty/p-ffe3ca07.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["breadcrumbCss","BreadcrumbComponent","render","h","Host","this","first","class","faChevronRight","iconName","active","href"],"sources":["./src/components/breadcrumb/breadcrumb.scss?tag=admiralty-breadcrumb&encapsulation=shadow","./src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@use \"../../scss/base/responsive\";\r\n\r\n@use \"../../scss/vars/colours\";\r\n@use \"../../scss/vars/typography\";\r\n\r\n:host {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.breadcrumb-icon {\r\n  margin: 0 10px;\r\n  font-size: 12px;\r\n}\r\n\r\na {\r\n  display: inline-block;\r\n  font-size: 14px;\r\n  font-weight: typography.$font-weight-light;\r\n  text-decoration: none;\r\n  color: colours.$colour-nav-item;\r\n  margin: 10px 2px;\r\n\r\n  &:hover {\r\n    color: colours.$colour-admiralty-blue;\r\n  }\r\n\r\n  &.active {\r\n    color: colours.$colour-admiralty-blue;\r\n    font-weight: typography.$font-weight-medium;\r\n  }\r\n}\r\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { faChevronRight } from '@fortawesome/free-solid-svg-icons';\n\n@Component({\n  tag: 'admiralty-breadcrumb',\n  styleUrl: 'breadcrumb.scss',\n  shadow: true,\n})\nexport class BreadcrumbComponent {\n  /**\n   * When `true` the breadcrumb will by styled to show that it is the\n   * currently active breadcrumb. Defaults to `true` for the\n   * last breadcrumb if it is not set on any.\n   */\n  @Prop() active = false;\n\n  /**\n   * @internal\n   * When set to `true` the breadcrumb will not be prefixed with a chevron.\n   */\n  @Prop() first!: boolean;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   */\n  @Prop() href: string | undefined;\n\n  render() {\n    return (\n      <Host>\n        {!this.first && <admiralty-icon class=\"breadcrumb-icon\" icon-name={faChevronRight.iconName}></admiralty-icon>}\n        <a class={{ active: this.active }} href={this.href || '#'}>\n          <slot></slot>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAgB,wvB,MCQTC,EAAmB,M,qCAMb,M,yCAajBC,SACE,OACEC,EAACC,EAAI,MACDC,KAAKC,OAASH,EAAA,kBAAgBI,MAAM,kBAAiB,YAAYC,EAAeC,WAClFN,EAAA,KAAGI,MAAO,CAAEG,OAAQL,KAAKK,QAAUC,KAAMN,KAAKM,MAAQ,KACpDR,EAAA,c"}

package/dist/cjs/admiralty-breadcrumb.cjs.entry.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9db1e550.js');
+const index$1 = require('./index-18b58c3d.js');
+
+const breadcrumbCss = "@media (max-width: 1023px){.desktop-only{display:none}}@media (min-width: 1024px){.not-desktop{display:none}}@media (min-width: 1024px){.tablet-only{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop{display:none}}@media (min-width: 1024px){.phone-or-tablet{display:none}}@media (min-width: 1024px){.phone-only{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only{display:none}}:host{display:flex;align-items:center}.breadcrumb-icon{margin:0 10px;font-size:12px}a{display:inline-block;font-size:14px;font-weight:300;text-decoration:none;color:#333333;margin:10px 2px}a:hover{color:#09315b}a.active{color:#09315b;font-weight:normal}";
+
+const BreadcrumbComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.active = false;
+    this.first = undefined;
+    this.href = undefined;
+  }
+  render() {
+    return (index.h(index.Host, null, !this.first && index.h("admiralty-icon", { class: "breadcrumb-icon", "icon-name": index$1.faChevronRight.iconName }), index.h("a", { class: { active: this.active }, href: this.href || '#' }, index.h("slot", null))));
+  }
+};
+BreadcrumbComponent.style = breadcrumbCss;
+
+exports.admiralty_breadcrumb = BreadcrumbComponent;
+
+//# sourceMappingURL=admiralty-breadcrumb.cjs.entry.js.map

package/dist/cjs/admiralty-breadcrumb.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-breadcrumb.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,uvBAAuvB;;MCQhwB,mBAAmB;;;kBAMb,KAAK;;;;EAatB,MAAM;IACJ,QACEA,QAACC,UAAI,QACF,CAAC,IAAI,CAAC,KAAK,IAAID,4BAAgB,KAAK,EAAC,iBAAiB,eAAYE,sBAAc,CAAC,QAAQ,GAAmB,EAC7GF,eAAG,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,GAAG,IACvDA,qBAAa,CACX,CACC,EACP;GACH;;;;;;","names":["h","Host","faChevronRight"],"sources":["./src/components/breadcrumb/breadcrumb.scss?tag=admiralty-breadcrumb&encapsulation=shadow","./src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@use \"../../scss/base/responsive\";\r\n\r\n@use \"../../scss/vars/colours\";\r\n@use \"../../scss/vars/typography\";\r\n\r\n:host {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.breadcrumb-icon {\r\n  margin: 0 10px;\r\n  font-size: 12px;\r\n}\r\n\r\na {\r\n  display: inline-block;\r\n  font-size: 14px;\r\n  font-weight: typography.$font-weight-light;\r\n  text-decoration: none;\r\n  color: colours.$colour-nav-item;\r\n  margin: 10px 2px;\r\n\r\n  &:hover {\r\n    color: colours.$colour-admiralty-blue;\r\n  }\r\n\r\n  &.active {\r\n    color: colours.$colour-admiralty-blue;\r\n    font-weight: typography.$font-weight-medium;\r\n  }\r\n}\r\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { faChevronRight } from '@fortawesome/free-solid-svg-icons';\n\n@Component({\n  tag: 'admiralty-breadcrumb',\n  styleUrl: 'breadcrumb.scss',\n  shadow: true,\n})\nexport class BreadcrumbComponent {\n  /**\n   * When `true` the breadcrumb will by styled to show that it is the\n   * currently active breadcrumb. Defaults to `true` for the\n   * last breadcrumb if it is not set on any.\n   */\n  @Prop() active = false;\n\n  /**\n   * @internal\n   * When set to `true` the breadcrumb will not be prefixed with a chevron.\n   */\n  @Prop() first!: boolean;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   */\n  @Prop() href: string | undefined;\n\n  render() {\n    return (\n      <Host>\n        {!this.first && <admiralty-icon class=\"breadcrumb-icon\" icon-name={faChevronRight.iconName}></admiralty-icon>}\n        <a class={{ active: this.active }} href={this.href || '#'}>\n          <slot></slot>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/admiralty-breadcrumbs.cjs.entry.js

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9db1e550.js');
+
+const breadcrumbsCss = ".breadcrumbs{width:100%;box-sizing:border-box;display:inline-flex;border-bottom:1px solid #d8d8d8;background-color:#ffffff;padding:0 20px}";
+
+const BreadcrumbsComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.breadcrumbsInit = () => {
+      this.setActiveBreadcrumb();
+    };
+    this.setActiveBreadcrumb = () => {
+      const breadcrumbs = this.getBreadcrumbs();
+      // Check if an active breadcrumb exists already
+      const active = breadcrumbs.find(breadcrumb => breadcrumb.active);
+      // Set the active status
+      for (const breadcrumb of breadcrumbs) {
+        const isFirst = breadcrumb === breadcrumbs[0];
+        const isLast = breadcrumb === breadcrumbs[breadcrumbs.length - 1];
+        if (isFirst) {
+          breadcrumb.first = true;
+        }
+        // When no active breadcrumb, set the last one to active
+        if (!active && isLast) {
+          breadcrumb.active = true;
+        }
+      }
+    };
+    this.getBreadcrumbs = () => {
+      return Array.from(this.el.querySelectorAll('admiralty-breadcrumb'));
+    };
+  }
+  componentWillLoad() {
+    this.breadcrumbsInit();
+  }
+  render() {
+    return (index.h("nav", { class: "breadcrumbs", "aria-label": "breadcrumbs" }, index.h("slot", null)));
+  }
+  get el() { return index.getElement(this); }
+};
+BreadcrumbsComponent.style = breadcrumbsCss;
+
+exports.admiralty_breadcrumbs = BreadcrumbsComponent;
+
+//# sourceMappingURL=admiralty-breadcrumbs.cjs.entry.js.map

package/dist/cjs/admiralty-breadcrumbs.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-breadcrumbs.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,4IAA4I;;MCOtJ,oBAAoB;EALjC;;IAYU,oBAAe,GAAG;MACxB,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B,CAAC;IAEM,wBAAmB,GAAG;MAC5B,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;;MAG1C,MAAM,MAAM,GAAG,WAAW,CAAC,IAAI,CAAC,UAAU,IAAI,UAAU,CAAC,MAAM,CAAC,CAAC;;MAGjE,KAAK,MAAM,UAAU,IAAI,WAAW,EAAE;QACpC,MAAM,OAAO,GAAG,UAAU,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC;QAC9C,MAAM,MAAM,GAAG,UAAU,KAAK,WAAW,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAElE,IAAI,OAAO,EAAE;UACX,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC;SACzB;;QAGD,IAAI,CAAC,MAAM,IAAI,MAAM,EAAE;UACrB,UAAU,CAAC,MAAM,GAAG,IAAI,CAAC;SAC1B;OACF;KACF,CAAC;IAEM,mBAAc,GAAG;MACvB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CAAC,CAAC;KACrE,CAAC;GASH;EAzCC,iBAAiB;IACf,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAgCD,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,aAAa,gBAAY,aAAa,IAC/CA,qBAAa,CACT,EACN;GACH;;;;;;;","names":["h"],"sources":["./src/components/breadcrumbs/breadcrumbs.scss?tag=admiralty-breadcrumbs&encapsulation=shadow","./src/components/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\r\n\r\n.breadcrumbs {\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  display: inline-flex;\r\n  border-bottom: 1px solid colours.$colour-divider;\r\n  background-color: colours.$colour-bg;\r\n  padding: 0 20px;\r\n}\r\n","import { Component, Element, h } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-breadcrumbs',\n  styleUrl: 'breadcrumbs.scss',\n  shadow: true,\n})\nexport class BreadcrumbsComponent {\n  @Element() el!: HTMLElement;\n\n  componentWillLoad() {\n    this.breadcrumbsInit();\n  }\n\n  private breadcrumbsInit = () => {\n    this.setActiveBreadcrumb();\n  };\n\n  private setActiveBreadcrumb = () => {\n    const breadcrumbs = this.getBreadcrumbs();\n\n    // Check if an active breadcrumb exists already\n    const active = breadcrumbs.find(breadcrumb => breadcrumb.active);\n\n    // Set the active status\n    for (const breadcrumb of breadcrumbs) {\n      const isFirst = breadcrumb === breadcrumbs[0];\n      const isLast = breadcrumb === breadcrumbs[breadcrumbs.length - 1];\n\n      if (isFirst) {\n        breadcrumb.first = true;\n      }\n\n      // When no active breadcrumb, set the last one to active\n      if (!active && isLast) {\n        breadcrumb.active = true;\n      }\n    }\n  };\n\n  private getBreadcrumbs = (): HTMLAdmiraltyBreadcrumbElement[] => {\n    return Array.from(this.el.querySelectorAll('admiralty-breadcrumb'));\n  };\n\n  render() {\n    return (\n      <nav class=\"breadcrumbs\" aria-label=\"breadcrumbs\">\n        <slot></slot>\n      </nav>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/admiralty-button.cjs.entry.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9db1e550.js');
+const button_types = require('./button.types-0549d311.js');
+
+const buttonCss = "@media (max-width: 1023px){.desktop-only{display:none}}@media (min-width: 1024px){.not-desktop{display:none}}@media (min-width: 1024px){.tablet-only{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop{display:none}}@media (min-width: 1024px){.phone-or-tablet{display:none}}@media (min-width: 1024px){.phone-only{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only{display:none}}button.primary{display:inline-flex;align-items:center;justify-content:center;font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:18px;line-height:24px;font-size:21px;font-weight:normal;background-color:unset;cursor:pointer;height:60px;padding:15px 18px;white-space:nowrap;min-width:200px;background-color:#09315b;color:#ffffff;border:2px solid #09315b}button.primary:focus{outline:3px solid #ffdd00}button.primary:disabled{cursor:default}button.primary:disabled *{pointer-events:none}button.primary i{display:inline-block;font-size:24px;color:#ffffff;padding-left:15px}@media (max-width: 1023px){button.primary{min-width:unset;max-width:200px;width:100%;height:50px;padding:10px 18px}}button.primary i{display:inline-block;font-size:24px;color:#ffffff;padding-left:15px}button.primary:hover{background-color:#03284f;border:2px solid #03284f}button.primary:enabled:active{background-color:#ffffff;border:2px solid #09315b;color:#09315b}button.primary:enabled:active i{color:#09315b}button.primary:enabled:active p{color:#09315b}button.primary:disabled{background-color:#adadad;border:2px solid #adadad}button.secondary{display:inline-flex;align-items:center;justify-content:center;font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:18px;line-height:24px;font-size:21px;font-weight:normal;background-color:unset;cursor:pointer;height:60px;padding:15px 18px;white-space:nowrap;min-width:200px;background-color:#ffffff;color:#05284e;border:2px solid #05284e}button.secondary:focus{outline:3px solid #ffdd00}button.secondary:disabled{cursor:default}button.secondary:disabled *{pointer-events:none}button.secondary i{display:inline-block;font-size:24px;color:#ffffff;padding-left:15px}@media (max-width: 1023px){button.secondary{min-width:unset;max-width:200px;width:100%;height:50px;padding:10px 18px}}button.secondary i{display:inline-block;font-size:24px;color:#ffffff;padding-left:15px}button.secondary:hover{background-color:#eeeeee;border:2px solid #05284e}button.secondary:enabled:active{background-color:#05284e;border:2px solid #05284e;color:#ffffff}button.secondary:enabled:active i{color:#ffffff}button.secondary:enabled:active p{color:#ffffff}button.secondary:disabled{background-color:#adadad;border:2px solid #adadad}button.secondary i{color:#05284e}button.warning{display:inline-flex;align-items:center;justify-content:center;font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:18px;line-height:24px;font-size:21px;font-weight:normal;background-color:unset;cursor:pointer;height:60px;padding:15px 18px;white-space:nowrap;min-width:200px;background-color:#e20d0d;color:#ffffff;border:2px solid #e20d0d}button.warning:focus{outline:3px solid #ffdd00}button.warning:disabled{cursor:default}button.warning:disabled *{pointer-events:none}button.warning i{display:inline-block;font-size:24px;color:#ffffff;padding-left:15px}@media (max-width: 1023px){button.warning{min-width:unset;max-width:200px;width:100%;height:50px;padding:10px 18px}}button.warning i{display:inline-block;font-size:24px;color:#ffffff;padding-left:15px}button.warning:hover{background-color:#bd0404;border:2px solid #bd0404}button.warning:enabled:active{background-color:#ffffff;border:2px solid #e20d0d;color:#e20d0d}button.warning:enabled:active i{color:#e20d0d}button.warning:enabled:active p{color:#e20d0d}button.warning:disabled{background-color:#adadad;border:2px solid #adadad}button.warning:disabled>*{opacity:0.5}button.warning i{color:#ffffff}button.text{display:inline-flex;align-items:center;justify-content:center;font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:18px;line-height:24px;font-size:21px;font-weight:normal;background-color:unset;cursor:pointer;color:#05284e}button.text:focus{outline:3px solid #ffdd00}button.text:disabled{cursor:default}button.text:disabled *{pointer-events:none}button.text i{display:inline-block;font-size:24px;color:#ffffff;padding-left:15px}button.text:enabled:active{color:#05284e}button.text:enabled:active i{color:#05284e}button.text:enabled:active p{color:#05284e}button.text:disabled{color:#adadad}button.text:disabled>*{opacity:0.5}button.text:focus{outline-offset:3px}button.text i{color:#05284e}button.icon{display:inline-flex;align-items:center;justify-content:center;font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:18px;line-height:24px;font-size:21px;font-weight:normal;background-color:unset;cursor:pointer;min-height:50px;min-width:50px;padding:10px 10px;background-color:var(--button-icon-background-colour, #eeeeee);color:#09315b;border:2px solid #09315b}button.icon:focus{outline:3px solid #ffdd00}button.icon:disabled{cursor:default}button.icon:disabled *{pointer-events:none}button.icon i{display:inline-block;font-size:24px;color:#ffffff;padding-left:15px}button.icon:enabled:active{background-color:#09315b;color:#ffffff}button.icon:disabled{opacity:0.3}button.icon:active:disabled{background-color:#eeeeee}button.icon i{margin:auto;font-size:unset;color:unset;padding-left:unset}";
+
+const ButtonComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.variant = undefined;
+    this.icon = undefined;
+    this.disabled = false;
+    this.type = 'submit';
+  }
+  render() {
+    return (index.h("button", { type: this.type, disabled: this.disabled ? true : null, class: this.variant || button_types.ButtonVariant.Primary }, index.h("slot", null), this.icon ? index.h("admiralty-icon", { "icon-name": this.icon }) : undefined));
+  }
+};
+ButtonComponent.style = buttonCss;
+
+exports.admiralty_button = ButtonComponent;
+
+//# sourceMappingURL=admiralty-button.cjs.entry.js.map

package/dist/cjs/admiralty-button.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-button.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,02KAA02K;;MCS/2K,eAAe;;;;;oBAaP,KAAK;gBAKsB,QAAQ;;EAEtD,MAAM;IACJ,QACEA,oBAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,IAAIC,0BAAa,CAAC,OAAO,IAC1GD,qBAAa,EACZ,IAAI,CAAC,IAAI,GAAGA,yCAA2B,IAAI,CAAC,IAAI,GAAmB,GAAG,SAAS,CACzE,EACT;GACH;;;;;;","names":["h","ButtonVariant"],"sources":["./src/components/button/button.scss?tag=admiralty-button","./src/components/button/button.tsx"],"sourcesContent":["@use \"../../scss/base/responsive\";\r\n\r\n@use \"../../scss/vars/colours\";\r\n@use \"../../scss/vars/typography\";\r\n\r\n@mixin button-defaults {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  font-family: typography.$font-family;\r\n  font-size: typography.$font-size-normal;\r\n  line-height: typography.$font-line-height-normal;\r\n  font-size: 21px;\r\n  font-weight: typography.$font-weight-medium;\r\n  background-color: unset;\r\n  cursor: pointer;\r\n\r\n  &:focus {\r\n    outline: 3px solid colours.$colour-utility-focus;\r\n  }\r\n\r\n  &:disabled {\r\n    cursor: default;\r\n    * {\r\n      pointer-events: none;\r\n    }\r\n  }\r\n\r\n  i {\r\n    display: inline-block;\r\n    font-size: 24px;\r\n    color: colours.$colour-button-icon;\r\n    padding-left: 15px;\r\n  }\r\n}\r\n\r\n@mixin button {\r\n  @include button-defaults;\r\n  height: 60px;\r\n  padding: 15px 18px;\r\n  white-space: nowrap;\r\n  min-width: 200px;\r\n\r\n  @include responsive.not-desktop {\r\n    min-width: unset;\r\n    max-width: 200px;\r\n    width: 100%;\r\n    height: 50px;\r\n    padding: 10px 18px;\r\n  }\r\n\r\n  i {\r\n    display: inline-block;\r\n    font-size: 24px;\r\n    color: colours.$colour-button-icon;\r\n    padding-left: 15px;\r\n  }\r\n}\r\n\r\n/* Primary Buttons */\r\nbutton.primary {\r\n  @include button;\r\n  background-color: colours.$colour-button-standard;\r\n  color: colours.$colour-button-text;\r\n  border: 2px solid colours.$colour-button-standard;\r\n\r\n  &:hover {\r\n    background-color: colours.$colour-button-hover;\r\n    border: 2px solid colours.$colour-button-hover;\r\n  }\r\n\r\n  &:enabled:active {\r\n    background-color: colours.$colour-button-selected;\r\n    border: 2px solid colours.$colour-button-border-selected;\r\n    color: colours.$colour-button-icon-selected;\r\n\r\n    i {\r\n      color: colours.$colour-button-icon-selected;\r\n    }\r\n\r\n    p {\r\n      color: colours.$colour-button-text-selected;\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    background-color: colours.$colour-button-deselected;\r\n    border: 2px solid colours.$colour-button-deselected;\r\n  }\r\n}\r\n\r\n/* Secondary Buttons */\r\nbutton.secondary {\r\n  @include button;\r\n  background-color: colours.$colour-button-secondary-standard;\r\n  color: colours.$colour-button-secondary-text;\r\n  border: 2px solid colours.$colour-button-secondary-border-standard;\r\n\r\n  &:hover {\r\n    background-color: colours.$colour-button-secondary-hover;\r\n    border: 2px solid colours.$colour-button-secondary-border-hover;\r\n  }\r\n\r\n  &:enabled:active {\r\n    background-color: colours.$colour-button-secondary-selected;\r\n    border: 2px solid colours.$colour-button-secondary-selected;\r\n    color: colours.$colour-button-secondary-icon-selected;\r\n\r\n    i {\r\n      color: colours.$colour-button-secondary-icon-selected;\r\n    }\r\n\r\n    p {\r\n      color: colours.$colour-button-secondary-text-selected;\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    background-color: colours.$colour-button-secondary-deselected;\r\n    border: 2px solid colours.$colour-button-secondary-deselected;\r\n  }\r\n\r\n  i {\r\n    color: colours.$colour-button-secondary-icon;\r\n  }\r\n}\r\n\r\n/* Warning Buttons */\r\nbutton.warning {\r\n  @include button;\r\n  background-color: colours.$colour-utility-error;\r\n  color: colours.$colour-white;\r\n  border: 2px solid colours.$colour-utility-error;\r\n\r\n  &:hover {\r\n    background-color: colours.darken(colours.$colour-utility-error);\r\n    border: 2px solid colours.darken(colours.$colour-utility-error);\r\n  }\r\n\r\n  &:enabled:active {\r\n    background-color: colours.$colour-white;\r\n    border: 2px solid colours.$colour-utility-error;\r\n    color: colours.$colour-utility-error;\r\n\r\n    i {\r\n      color: colours.$colour-utility-error;\r\n    }\r\n\r\n    p {\r\n      color: colours.$colour-utility-error;\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    background-color: colours.$colour-button-secondary-deselected;\r\n    border: 2px solid colours.$colour-button-secondary-deselected;\r\n    & > * {\r\n      opacity: 0.5;\r\n    }\r\n  }\r\n\r\n  i {\r\n    color: colours.$colour-white;\r\n  }\r\n}\r\n\r\n/* Text Buttons */\r\nbutton.text {\r\n  @include button-defaults;\r\n  color: colours.$colour-button-secondary-text;\r\n\r\n  &:enabled:active {\r\n    color: colours.$colour-button-secondary-text;\r\n\r\n    i {\r\n      color: colours.$colour-button-secondary-text;\r\n    }\r\n\r\n    p {\r\n      color: colours.$colour-button-secondary-text;\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    color: colours.$colour-button-secondary-deselected;\r\n    & > * {\r\n      opacity: 0.5;\r\n    }\r\n  }\r\n\r\n  &:focus {\r\n    outline-offset: 3px;\r\n  }\r\n\r\n  i {\r\n    color: colours.$colour-button-secondary-icon;\r\n  }\r\n}\r\n\r\n/* Icon Buttons */\r\nbutton.icon {\r\n  @include button-defaults;\r\n  min-height: 50px;\r\n  min-width: 50px;\r\n  padding: 10px 10px;\r\n\r\n  background-color: var(--button-icon-background-colour, colours.$colour-bg-grey);\r\n  color: colours.$colour-admiralty-blue;\r\n  border: 2px solid colours.$colour-admiralty-blue;\r\n\r\n  &:enabled:active {\r\n    background-color: colours.$colour-admiralty-blue;\r\n    color: colours.$colour-white;\r\n  }\r\n\r\n  &:disabled {\r\n    opacity: 0.3;\r\n  }\r\n\r\n  &:active:disabled {\r\n    background-color: colours.$colour-bg-grey;\r\n  }\r\n\r\n  i {\r\n    margin: auto;\r\n    font-size: unset;\r\n    color: unset;\r\n    padding-left: unset;\r\n  }\r\n}\r\n","import { Component, Prop, h } from '@stencil/core';\nimport { ButtonVariant } from './button.types';\nimport { IconName } from '@fortawesome/fontawesome-svg-core';\n\n@Component({\n  tag: 'admiralty-button',\n  styleUrl: 'button.scss',\n  shadow: false,\n})\nexport class ButtonComponent {\n  /**\n   * The type of button to render. Valid values are `primary`, `secondary`, `warning`, `text` and `icon`.\n   * Default value is `primary`.\n   */\n  @Prop() variant: ButtonVariant;\n  /**\n   * When passed Font Awesome Icon name, then an icon will be rendered.\n   */\n  @Prop() icon: IconName;\n  /**\n   * Determines whether the button is disabled. A button in disabled state will not fire click output events.\n   */\n  @Prop() disabled = false;\n  /**\n   * The default behavior of the button. Valid values are `button`, `submit` and `reset`.\n   * Default value is `submit`.\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'submit';\n\n  render() {\n    return (\n      <button type={this.type} disabled={this.disabled ? true : null} class={this.variant || ButtonVariant.Primary}>\n        <slot></slot>\n        {this.icon ? <admiralty-icon icon-name={this.icon}></admiralty-icon> : undefined}\n      </button>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/admiralty-card.cjs.entry.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9db1e550.js');
+
+const cardCss = "@media (max-width: 1023px){.desktop-only{display:none}}@media (min-width: 1024px){.not-desktop{display:none}}@media (min-width: 1024px){.tablet-only{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop{display:none}}@media (min-width: 1024px){.phone-or-tablet{display:none}}@media (min-width: 1024px){.phone-only{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only{display:none}}admiralty-card .card{display:flex;flex-direction:column;border:1px solid #d8d8d8}admiralty-card .card>h6{height:60px;line-height:60px;border:1px solid #09315b;color:#ffffff;background-color:#09315b;margin:0;padding:0 30px}@media (max-width: 1023px){admiralty-card .card>h6{padding:0px 18px;height:48px;line-height:48px}}admiralty-card .card>div{border-top:none;flex-grow:1;padding:30px}@media (max-width: 1023px){admiralty-card .card>div{padding:24px 18px}}admiralty-card .text-input-form .text-input-wrap{margin-bottom:30px}admiralty-card .text-input-form .text-input-wrap:last-child{margin-bottom:0}";
+
+const CardComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.heading = undefined;
+  }
+  render() {
+    return (index.h("section", { class: "card" }, this.heading ? index.h("h6", null, this.heading) : null, index.h("div", null, index.h("slot", null))));
+  }
+};
+CardComponent.style = cardCss;
+
+exports.admiralty_card = CardComponent;
+
+//# sourceMappingURL=admiralty-card.cjs.entry.js.map

package/dist/cjs/admiralty-card.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-card.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,mlCAAmlC;;MCOtlC,aAAa;;;;;EAMxB,MAAM;IACJ,QACEA,qBAAS,KAAK,EAAC,MAAM,IAClB,IAAI,CAAC,OAAO,GAAGA,oBAAK,IAAI,CAAC,OAAO,CAAM,GAAG,IAAI,EAC9CA,qBACEA,qBAAa,CACT,CACE,EACV;GACH;;;;;;","names":["h"],"sources":["./src/components/card/card.scss?tag=admiralty-card","./src/components/card/card.tsx"],"sourcesContent":["@use \"../../scss/base/responsive\";\n\n@use \"../../scss/vars/colours\";\n\nadmiralty-card {\n  .card {\n    display: flex;\n    flex-direction: column;\n    border: 1px solid colours.$colour-divider;\n\n    & > h6 {\n      height: 60px;\n      line-height: 60px;\n      border: 1px solid colours.$colour-admiralty-blue;\n      color: colours.$colour-white;\n      background-color: colours.$colour-admiralty-blue;\n      margin: 0;\n      padding: 0 30px;\n      @include responsive.not-desktop {\n        padding: 0px 18px;\n        height: 48px;\n        line-height: 48px;\n      }\n    }\n\n    & > div {\n      border-top: none;\n      flex-grow: 1;\n      padding: 30px;\n      @include responsive.not-desktop {\n        padding: 24px 18px;\n      }\n    }\n  }\n\n  .text-input-form {\n    .text-input-wrap {\n      margin-bottom: 30px;\n    }\n\n    .text-input-wrap:last-child {\n      margin-bottom: 0;\n    }\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-card',\n  styleUrl: 'card.scss',\n  shadow: false,\n})\nexport class CardComponent {\n  /**\n   * The title of the card.\n   */\n  @Prop() heading: string;\n\n  render() {\n    return (\n      <section class=\"card\">\n        {this.heading ? <h6>{this.heading}</h6> : null}\n        <div>\n          <slot></slot>\n        </div>\n      </section>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/admiralty-checkbox.cjs.entry.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9db1e550.js');
+
+const checkboxCss = ".form-control{font-size:18px;position:relative;display:inline-block}.form-control input[type=checkbox]{box-sizing:border-box;opacity:0;position:absolute;top:0;left:0;padding:0;width:30px;height:30px;margin:0;z-index:1;cursor:pointer}.form-control input[type=checkbox]:checked+label::after{content:\"\"}.form-control label{position:relative;display:inline-block;padding-left:42px;margin-bottom:14px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;line-height:30px}.form-control label.disabled{cursor:default;pointer-events:none}.form-control label::before,.form-control label::after{position:absolute;content:none;display:inline-block}.form-control label::before{content:\"\";height:26px;width:26px;border:2px solid #03284f;left:0;top:0;background-color:#fff}.form-control label::after{height:8px;width:15px;border-left:3px solid;border-bottom:3px solid;transform:rotate(-45deg);color:#09315b;left:6px;top:7px}.form-control.right-align label{padding-left:unset;padding-right:35px}.form-control.right-align label::before{left:unset;right:0}.form-control.right-align label::after{left:unset;right:6px}";
+
+const CheckboxComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.checkboxChange = index.createEvent(this, "checkboxChange", 7);
+    this.checkboxFocus = index.createEvent(this, "checkboxFocus", 7);
+    this.checkboxBlur = index.createEvent(this, "checkboxBlur", 7);
+    this.inputId = `admiralty-${checkboxIds++}`;
+    this.onBlur = () => {
+      this.checkboxBlur.emit();
+    };
+    this.onClick = (ev) => {
+      if (!this.disabled) {
+        ev.preventDefault();
+        this.checked = !this.checked;
+      }
+    };
+    this.onFocus = () => {
+      this.checkboxFocus.emit();
+    };
+    this.checkboxRight = false;
+    this.disabled = false;
+    this.name = this.inputId;
+    this.checked = false;
+    this.value = undefined;
+    this.labelText = null;
+  }
+  checkedChanged(isChecked) {
+    this.checkboxChange.emit({
+      checked: isChecked,
+      value: this.value,
+    });
+  }
+  render() {
+    const { checked, checkboxRight, disabled, inputId, labelText, name } = this;
+    return (index.h(index.Host, null, index.h("div", { "aria-checked": `${checked}`, "aria-hidden": disabled ? 'true' : null, role: "checkbox", class: { 'form-control': true, 'right-align': checkboxRight } }, index.h("input", { "aria-checked": `${checked}`, type: "checkbox", onBlur: () => this.onBlur(), onFocus: () => this.onFocus(), id: inputId, disabled: disabled, name: name, checked: checked }), index.h("label", { class: { disabled: disabled }, onClick: this.onClick, htmlFor: inputId }, labelText))));
+  }
+  static get watchers() { return {
+    "checked": ["checkedChanged"]
+  }; }
+};
+let checkboxIds = 0;
+CheckboxComponent.style = checkboxCss;
+
+exports.admiralty_checkbox = CheckboxComponent;
+
+//# sourceMappingURL=admiralty-checkbox.cjs.entry.js.map

package/dist/cjs/admiralty-checkbox.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-checkbox.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,2mCAA2mC;;MCOlnC,iBAAiB;;;;;;IACpB,YAAO,GAAG,aAAa,WAAW,EAAE,EAAE,CAAC;IA8DvC,WAAM,GAAG;MACf,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B,CAAC;IAEM,YAAO,GAAG,CAAC,EAAO;MACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAClB,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;OAC9B;KACF,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;KAC3B,CAAC;yBAtE+B,KAAK;oBAKV,KAAK;gBAKV,IAAI,CAAC,OAAO;mBAKS,KAAK;;qBAcrB,IAAI;;EAqBhC,cAAc,CAAC,SAAkB;IAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;MACvB,OAAO,EAAE,SAAS;MAClB,KAAK,EAAE,IAAI,CAAC,KAAK;KAClB,CAAC,CAAC;GACJ;EAiBD,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IAE5E,QACEA,QAACC,UAAI,QACHD,iCAAmB,GAAG,OAAO,EAAE,iBAAe,QAAQ,GAAG,MAAM,GAAG,IAAI,EAAE,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,aAAa,EAAE,aAAa,EAAE,IACnJA,mCACgB,GAAG,OAAO,EAAE,EAC1B,IAAI,EAAC,UAAU,EACf,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC3B,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,EAC7B,EAAE,EAAE,OAAO,EACX,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,GAChB,EACFA,mBAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,IAC1E,SAAS,CACJ,CACJ,CACD,EACP;GACH;;;;;AAGH,IAAI,WAAW,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["./src/components/checkbox/checkbox.scss?tag=admiralty-checkbox&encapsulation=shadow","./src/components/checkbox/checkbox.tsx"],"sourcesContent":[".form-control {\r\n  font-size: 18px;\r\n  position: relative;\r\n  display: inline-block;\r\n\r\n  input[type=\"checkbox\"] {\r\n    box-sizing: border-box;\r\n    opacity: 0;\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    padding: 0;\r\n    width: 30px;\r\n    height: 30px;\r\n    margin: 0;\r\n    z-index: 1;\r\n    cursor: pointer;\r\n\r\n    &:checked+label::after {\r\n      content: \"\";\r\n    }\r\n  }\r\n\r\n  label {\r\n    position: relative;\r\n    display: inline-block;\r\n    padding-left: 42px;\r\n    margin-bottom: 14px;\r\n    cursor: pointer;\r\n    -webkit-user-select: none;\r\n    -moz-user-select: none;\r\n    user-select: none;\r\n    line-height: 30px;\r\n\r\n    &.disabled {\r\n      cursor: default;\r\n      pointer-events: none;\r\n    }\r\n\r\n    &::before, &::after {\r\n      position: absolute;\r\n      content: none;\r\n      display: inline-block;\r\n    }\r\n\r\n\r\n    &::before {\r\n      content: \"\";\r\n      height: 26px;\r\n      width: 26px;\r\n      border: 2px solid #03284f;\r\n      left: 0;\r\n      top: 0;\r\n      background-color: #fff;\r\n    }\r\n\r\n    &::after {\r\n      height: 8px;\r\n      width: 15px;\r\n      border-left: 3px solid;\r\n      border-bottom: 3px solid;\r\n      transform: rotate(-45deg);\r\n      color: #09315b;\r\n      left: 6px;\r\n      top: 7px;\r\n    }\r\n  }\r\n\r\n  &.right-align label {\r\n    padding-left: unset;\r\n    padding-right: 35px;\r\n\r\n    &::before {\r\n      left: unset;\r\n      right: 0;\r\n    }\r\n\r\n    &::after {\r\n      left: unset;\r\n      right: 6px;\r\n    }\r\n  }\r\n}\r\n\r\n","import { Component, EventEmitter, Event, Host, h, Prop, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-checkbox',\n  styleUrl: 'checkbox.scss',\n  shadow: true,\n})\nexport class CheckboxComponent {\n  private inputId = `admiralty-${checkboxIds++}`;\n\n  /**\n   * Whether the checkbox should be positioned to the right of the label.\n   */\n  @Prop() checkboxRight: boolean = false;\n\n  /**\n   * This dictates whether the form field is disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * If `true`, the checkbox is selected.\n   */\n  @Prop({ mutable: true }) checked: boolean = false;\n\n  /**\n   * The value of the checkbox does not mean if it's checked or not, use the `checked`\n   * property for that.\n   *\n   * The value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`,\n   * it's only used when the checkbox participates in a native `<form>`.\n   */\n  @Prop() value: any | null;\n\n  /**\n   * The text that's displayed alongside the checkbox\n   */\n  @Prop() labelText: string = null;\n\n  /**\n   * Event is fired when the form control changes state\n   * @event radioChanges\n   */\n  @Event() checkboxChange: EventEmitter<any>;\n\n  /**\n   * Event is fired when the form control gains focus\n   * @event checkboxFocus\n   */\n  @Event() checkboxFocus: EventEmitter<any>;\n\n  /**\n   * Event is fired when the form control loses focus\n   * @event checkboxBlur\n   */\n  @Event() checkboxBlur: EventEmitter<any>;\n\n  @Watch('checked')\n  checkedChanged(isChecked: boolean) {\n    this.checkboxChange.emit({\n      checked: isChecked,\n      value: this.value,\n    });\n  }\n\n  private onBlur = () => {\n    this.checkboxBlur.emit();\n  };\n\n  private onClick = (ev: any) => {\n    if (!this.disabled) {\n      ev.preventDefault();\n      this.checked = !this.checked;\n    }\n  };\n\n  private onFocus = () => {\n    this.checkboxFocus.emit();\n  };\n\n  render() {\n    const { checked, checkboxRight, disabled, inputId, labelText, name } = this;\n\n    return (\n      <Host>\n        <div aria-checked={`${checked}`} aria-hidden={disabled ? 'true' : null} role=\"checkbox\" class={{ 'form-control': true, 'right-align': checkboxRight }}>\n          <input\n            aria-checked={`${checked}`}\n            type=\"checkbox\"\n            onBlur={() => this.onBlur()}\n            onFocus={() => this.onFocus()}\n            id={inputId}\n            disabled={disabled}\n            name={name}\n            checked={checked}\n          />\n          <label class={{ disabled: disabled }} onClick={this.onClick} htmlFor={inputId}>\n            {labelText}\n          </label>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet checkboxIds = 0;\n"],"version":3}

package/dist/cjs/admiralty-colour-block.cjs.entry.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9db1e550.js');
+const button_types = require('./button.types-0549d311.js');
+
+const colourBlockCss = "admiralty-colour-block .colourBlock{height:100%;width:100%;max-width:100%;padding:30px 18px;display:flex;flex-direction:column;box-sizing:border-box}admiralty-colour-block .colourBlock .content{flex-grow:1}admiralty-colour-block .colourBlock .clickAction{background-color:unset;align-self:flex-end;cursor:pointer}admiralty-colour-block .colourBlock .clickAction h3{margin-bottom:0px}admiralty-colour-block .colourBlock.admiralty-blue{background-color:#09315b}admiralty-colour-block .colourBlock.admiralty-blue *{color:#ffffff}admiralty-colour-block .colourBlock.teal{background-color:#007e97}admiralty-colour-block .colourBlock.teal *{color:#ffffff}admiralty-colour-block .colourBlock.bright-blue{background-color:#65c4db;color:#09315b}";
+
+const ColourBlockComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.width = undefined;
+    this.height = undefined;
+    this.heading = undefined;
+    this.colour = 'admiralty-blue';
+    this.clickAction = undefined;
+    this.actionText = undefined;
+  }
+  render() {
+    return (index.h("div", { class: {
+        colourBlock: true,
+        [this.colour]: true,
+      }, style: {
+        height: this.height ? `${this.height}px` : null,
+        width: this.width ? `${this.width}px` : null,
+      } }, index.h("h2", null, this.heading), index.h("div", { class: {
+        'content': true,
+        'white-text': this.colour === 'admiralty-blue' || this.colour === 'teal',
+      } }, index.h("slot", null)), this.clickAction && this.actionText ? (index.h("admiralty-button", { variant: button_types.ButtonVariant.Text, class: "clickAction", onClick: this.clickAction.bind(this) }, index.h("h3", null, this.actionText))) : null));
+  }
+};
+ColourBlockComponent.style = colourBlockCss;
+
+exports.admiralty_colour_block = ColourBlockComponent;
+
+//# sourceMappingURL=admiralty-colour-block.cjs.entry.js.map

package/dist/cjs/admiralty-colour-block.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-colour-block.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,kuBAAkuB;;MCQ5uB,oBAAoB;;;;;;kBAgB6B,gBAAgB;;;;EAU5E,MAAM;IACJ,QACEA,iBACE,KAAK,EAAE;QACL,WAAW,EAAE,IAAI;QACjB,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI;OACpB,EACD,KAAK,EAAE;QACL,MAAM,EAAE,IAAI,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,IAAI,GAAG,IAAI;QAC/C,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,IAAI;OAC7C,IAEDA,oBAAK,IAAI,CAAC,OAAO,CAAM,EACvBA,iBACE,KAAK,EAAE;QACL,SAAS,EAAE,IAAI;QACf,YAAY,EAAE,IAAI,CAAC,MAAM,KAAK,gBAAgB,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM;OACzE,IAEDA,qBAAa,CACT,EACL,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,UAAU,IAClCA,8BAAkB,OAAO,EAAEC,0BAAa,CAAC,IAAI,EAAE,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IACrGD,oBAAK,IAAI,CAAC,UAAU,CAAM,CACT,IACjB,IAAI,CACJ,EACN;GACH;;;;;;","names":["h","ButtonVariant"],"sources":["./src/components/colour-block/colour-block.scss?tag=admiralty-colour-block","./src/components/colour-block/colour-block.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\n\nadmiralty-colour-block {\n  .colourBlock {\n    height: 100%;\n    width: 100%;\n    max-width: 100%;\n    padding: 30px 18px;\n    display: flex;\n    flex-direction: column;\n    box-sizing: border-box;\n\n    .content {\n      flex-grow: 1;\n    }\n\n    .clickAction {\n      background-color: unset;\n      align-self: flex-end;\n      cursor: pointer;\n\n      h3 {\n        margin-bottom: 0px;\n      }\n    }\n\n    &.admiralty-blue {\n      background-color: colours.$colour-admiralty-blue;\n      * {\n        color: colours.$colour-white;\n      }\n    }\n\n    &.teal {\n      background-color: colours.$colour-teal;\n      * {\n        color: colours.$colour-white;\n      }\n    }\n\n    &.bright-blue {\n      background-color: colours.$colour-bright-blue;\n      color: colours.$colour-admiralty-blue;\n    }\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { ButtonVariant } from '../button/button.types';\n\n@Component({\n  tag: 'admiralty-colour-block',\n  styleUrl: 'colour-block.scss',\n  shadow: false,\n})\nexport class ColourBlockComponent {\n  /**\n   * The width in pixels of the component.\n   */\n  @Prop() width: number;\n  /**\n   * The height in pixels of the component.\n   */\n  @Prop() height: number;\n  /**\n   * The heading text to display.\n   */\n  @Prop() heading: string;\n  /**\n   * The background colour of the component.\n   */\n  @Prop() colour: 'admiralty-blue' | 'teal' | 'bright-blue' = 'admiralty-blue';\n  /**\n   * The function to call when the action button is pressed.\n   */\n  @Prop() clickAction: () => any;\n  /**\n   * The text to display on the action button\n   */\n  @Prop() actionText: string;\n\n  render() {\n    return (\n      <div\n        class={{\n          colourBlock: true,\n          [this.colour]: true,\n        }}\n        style={{\n          height: this.height ? `${this.height}px` : null,\n          width: this.width ? `${this.width}px` : null,\n        }}\n      >\n        <h2>{this.heading}</h2>\n        <div\n          class={{\n            'content': true,\n            'white-text': this.colour === 'admiralty-blue' || this.colour === 'teal',\n          }}\n        >\n          <slot></slot>\n        </div>\n        {this.clickAction && this.actionText ? (\n          <admiralty-button variant={ButtonVariant.Text} class=\"clickAction\" onClick={this.clickAction.bind(this)}>\n            <h3>{this.actionText}</h3>\n          </admiralty-button>\n        ) : null}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/admiralty-dialogue.cjs.entry.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9db1e550.js');
+const index$1 = require('./index-18b58c3d.js');
+
+const dialogueCss = "@media (max-width: 1023px){.desktop-only{display:none}}@media (min-width: 1024px){.not-desktop{display:none}}@media (min-width: 1024px){.tablet-only{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop{display:none}}@media (min-width: 1024px){.phone-or-tablet{display:none}}@media (min-width: 1024px){.phone-only{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only{display:none}}.dialogue{box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.2);padding:30px 18px;overflow-wrap:break-word;word-wrap:break-word}@media (max-width: 1023px){.dialogue{padding:24px 18px}}.dialogue .dialogue-title{color:#09315b;font-size:20px;font-weight:normal;line-height:30px;display:flex;align-items:center;overflow-wrap:break-word;word-wrap:break-word;margin-bottom:12px}.dialogue .dialogue-title .dialogue-title-icon{margin-right:12px}.dialogue.info{border-left:5px solid #0177c1;background-color:#e0ecf3}.dialogue.error{border-left:5px solid #e20d0d;background-color:#f7e1e1}.dialogue.success{border-left:5px solid #47a234;background-color:#e7f1e5}.dialogue.warning{border-left:5px solid #e3660e;background-color:#f8ede3}";
+
+const DialogueComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.type = 'info';
+    this.heading = undefined;
+  }
+  getIconNameForType() {
+    switch (this.type) {
+      case 'info':
+        return index$1.faCircleInfo;
+      case 'warning':
+        return index$1.faTriangleExclamation;
+      case 'success':
+        return index$1.faCheck;
+      case 'error':
+        return index$1.faExclamation;
+    }
+  }
+  render() {
+    return (index.h("section", { class: {
+        dialogue: true,
+        [this.type]: true,
+      } }, index.h("div", { class: "dialogue-title" }, index.h("admiralty-icon", { class: "dialogue-title-icon", "icon-name": this.getIconNameForType().iconName }), this.heading), index.h("slot", null)));
+  }
+};
+DialogueComponent.style = dialogueCss;
+
+exports.admiralty_dialogue = DialogueComponent;
+
+//# sourceMappingURL=admiralty-dialogue.cjs.entry.js.map

package/dist/cjs/admiralty-dialogue.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-dialogue.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,WAAW,GAAG,ksCAAksC;;MCSzsC,iBAAiB;;;gBAI6B,MAAM;;;EAO/D,kBAAkB;IAChB,QAAQ,IAAI,CAAC,IAAI;MACf,KAAK,MAAM;QACT,OAAOA,oBAAY,CAAC;MACtB,KAAK,SAAS;QACZ,OAAOC,6BAAqB,CAAC;MAC/B,KAAK,SAAS;QACZ,OAAOC,eAAO,CAAC;MACjB,KAAK,OAAO;QACV,OAAOC,qBAAa,CAAC;KACxB;GACF;EAED,MAAM;IACJ,QACEC,qBACE,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI;QACd,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI;OAClB,IAEDA,iBAAK,KAAK,EAAC,gBAAgB,IACzBA,4BAAgB,KAAK,EAAC,qBAAqB,eAAY,IAAI,CAAC,kBAAkB,EAAE,CAAC,QAAQ,GAAmB,EAC3G,IAAI,CAAC,OAAO,CACT,EACNA,qBAAa,CACL,EACV;GACH;;;;;;","names":["faCircleInfo","faTriangleExclamation","faCheck","faExclamation","h"],"sources":["./src/components/dialogue/dialogue.scss?tag=admiralty-dialogue&encapsulation=shadow","./src/components/dialogue/dialogue.tsx"],"sourcesContent":["@use \"../../scss/base/responsive\";\r\n@use \"../../scss/vars/typography\";\r\n@use \"../../scss/vars/colours\";\r\n\r\n.dialogue {\r\n  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);\r\n  padding: 30px 18px;\r\n  overflow-wrap: break-word;\r\n  word-wrap: break-word;\r\n\r\n  @include responsive.not-desktop {\r\n    padding: 24px 18px;\r\n  }\r\n\r\n  .dialogue-title {\r\n    color: colours.$colour-admiralty-blue;\r\n    font-size: 20px;\r\n    font-weight: typography.$font-weight-medium;\r\n    line-height: 30px;\r\n    display: flex;\r\n    align-items: center;\r\n    overflow-wrap: break-word;\r\n    word-wrap: break-word;\r\n    margin-bottom: 12px;\r\n\r\n    .dialogue-title-icon {\r\n      margin-right: 12px;\r\n    }\r\n  }\r\n\r\n  &.info {\r\n    border-left: 5px solid colours.$colour-utility-info;\r\n    background-color: colours.$colour-utility-info-bg;\r\n  }\r\n\r\n  &.error {\r\n    border-left: 5px solid colours.$colour-utility-error;\r\n    background-color: colours.$colour-utility-error-bg;\r\n  }\r\n  &.success {\r\n    border-left: 5px solid colours.$colour-utility-success;\r\n    background-color: colours.$colour-utility-success-bg;\r\n  }\r\n  &.warning {\r\n    border-left: 5px solid colours.$colour-utility-warning;\r\n    background-color: colours.$colour-utility-warning-bg;\r\n  }\r\n}\r\n","import { Component, Prop, h } from '@stencil/core';\nimport { faCheck, faCircleInfo, faExclamation, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core';\n\n@Component({\n  tag: 'admiralty-dialogue',\n  styleUrl: 'dialogue.scss',\n  shadow: true,\n})\nexport class DialogueComponent {\n  /**\n   * The type of dialogue box to render.\n   */\n  @Prop() type: 'info' | 'warning' | 'success' | 'error' = 'info';\n\n  /**\n   * The heading to display.\n   */\n  @Prop() heading: string;\n\n  getIconNameForType(): IconDefinition {\n    switch (this.type) {\n      case 'info':\n        return faCircleInfo;\n      case 'warning':\n        return faTriangleExclamation;\n      case 'success':\n        return faCheck;\n      case 'error':\n        return faExclamation;\n    }\n  }\n\n  render() {\n    return (\n      <section\n        class={{\n          dialogue: true,\n          [this.type]: true,\n        }}\n      >\n        <div class=\"dialogue-title\">\n          <admiralty-icon class=\"dialogue-title-icon\" icon-name={this.getIconNameForType().iconName}></admiralty-icon>\n          {this.heading}\n        </div>\n        <slot></slot>\n      </section>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/admiralty-expansion.cjs.entry.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9db1e550.js');
+const index$1 = require('./index-18b58c3d.js');
+
+const expansionCss = "admiralty-expansion section.expansion{padding:2px 0;border-bottom:1px solid transparent}admiralty-expansion section.expansion.bordered{border-bottom:1px solid #d8d8d8}admiralty-expansion section.expansion .expansion-content{display:none;max-height:0;overflow:visible}admiralty-expansion section.expansion.expanded .expansion-content{display:block;max-height:initial;padding-bottom:12px}admiralty-expansion section.expansion button{background-color:transparent;border:none;height:initial;min-width:unset;max-width:unset;white-space:unset;color:initial;font-size:16px;cursor:pointer;margin:10px 0 22px;padding:0;display:flex;align-items:baseline;width:100%;text-align:left;position:relative}admiralty-expansion section.expansion button .expansion-heading-icon{color:#09315b;margin-left:30px}admiralty-expansion section.expansion button:focus{outline:none}admiralty-expansion section.expansion button h3,admiralty-expansion section.expansion button button{flex-grow:1;margin-bottom:0}admiralty-expansion section.expansion button h3.expansion-heading-right-align,admiralty-expansion section.expansion button button.expansion-heading-right-align{text-align:right}admiralty-expansion section.expansion button:focus h3::before,admiralty-expansion section.expansion button:focus button::before{content:\"\";position:absolute;top:0;bottom:0;right:-3px;left:-3px;box-shadow:0 0 0 3px #ffdd00}";
+
+let nextId = 0;
+const ExpansionComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.toggled = index.createEvent(this, "toggled", 7);
+    this.id = `admiralty-expansion-${++nextId}`;
+    this.headerId = `${this.id}-header`;
+    this.contentId = `${this.id}-content`;
+    this.heading = undefined;
+    this.expanded = false;
+    this.alignHeadingRight = false;
+    this.hideBorder = false;
+  }
+  onToggle() {
+    this.expanded = !this.expanded;
+    this.toggled.emit(this.expanded);
+  }
+  getExpansionIcon() {
+    return this.expanded ? index$1.faChevronUp : index$1.faChevronDown;
+  }
+  render() {
+    return (index.h("section", { class: {
+        expansion: true,
+        expanded: this.expanded,
+        bordered: !this.hideBorder,
+      } }, index.h("button", { id: this.headerId, type: "button", "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "expansion-heading-button", onClick: this.onToggle.bind(this) }, index.h("h3", { class: { 'expansion-heading-right-align': this.alignHeadingRight } }, this.heading), index.h("span", { class: "visually-hidden" }, ", ", this.expanded ? 'Hide' : 'Show', " this section"), index.h("admiralty-icon", { class: "expansion-heading-icon", "icon-name": this.getExpansionIcon().iconName })), index.h("div", { class: "expansion-content", id: this.contentId, "aria-labelledby": this.headerId, hidden: !this.expanded }, index.h("slot", null))));
+  }
+};
+ExpansionComponent.style = expansionCss;
+
+exports.admiralty_expansion = ExpansionComponent;
+
+//# sourceMappingURL=admiralty-expansion.cjs.entry.js.map

package/dist/cjs/admiralty-expansion.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-expansion.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,YAAY,GAAG,w2CAAw2C;;ACI73C,IAAI,MAAM,GAAG,CAAC,CAAC;MAOF,kBAAkB;;;;IA0B7B,OAAE,GAAW,uBAAuB,EAAE,MAAM,EAAE,CAAC;IAE/C,aAAQ,GAAW,GAAG,IAAI,CAAC,EAAE,SAAS,CAAC;IACvC,cAAS,GAAW,GAAG,IAAI,CAAC,EAAE,UAAU,CAAC;;oBApBU,KAAK;6BAK5B,KAAK;sBAKZ,KAAK;;EAY1B,QAAQ;IACN,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC/B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GAClC;EAED,gBAAgB;IACd,OAAO,IAAI,CAAC,QAAQ,GAAGA,mBAAW,GAAGC,qBAAa,CAAC;GACpD;EAED,MAAM;IACJ,QACEC,qBACE,KAAK,EAAE;QACL,SAAS,EAAE,IAAI;QACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,QAAQ,EAAE,CAAC,IAAI,CAAC,UAAU;OAC3B,IAEDA,oBAAQ,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,QAAQ,mBAAgB,IAAI,CAAC,QAAQ,mBAAiB,IAAI,CAAC,SAAS,EAAE,KAAK,EAAC,0BAA0B,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IACtKA,gBAAI,KAAK,EAAE,EAAE,+BAA+B,EAAE,IAAI,CAAC,iBAAiB,EAAE,IAAG,IAAI,CAAC,OAAO,CAAM,EAC3FA,kBAAM,KAAK,EAAC,iBAAiB,UAAI,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,MAAM,kBAAqB,EACrFA,4BAAgB,KAAK,EAAC,wBAAwB,eAAY,IAAI,CAAC,gBAAgB,EAAE,CAAC,QAAQ,GAAmB,CACtG,EACTA,iBAAK,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,SAAS,qBAAmB,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,IACvGA,qBAAa,CACT,CACE,EACV;GACH;;;;;;","names":["faChevronUp","faChevronDown","h"],"sources":["./src/components/expansion/expansion.scss?tag=admiralty-expansion","./src/components/expansion/expansion.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\n\nadmiralty-expansion {\n  section.expansion {\n    padding: 2px 0;\n    border-bottom: 1px solid transparent;\n    &.bordered {\n      border-bottom: 1px solid colours.$colour-divider;\n    }\n\n    .expansion-content {\n      display: none;\n      max-height: 0;\n      overflow: visible;\n    }\n    &.expanded .expansion-content {\n      display: block;\n      max-height: initial;\n      padding-bottom: 12px;\n    }\n\n    button {\n      @extend h3;\n      background-color: transparent;\n      border: none;\n      height: initial;\n      min-width: unset;\n      max-width: unset;\n      white-space: unset;\n      color: initial;\n      font-size: 16px;\n      cursor: pointer;\n      margin: 10px 0 22px;\n      padding: 0;\n      display: flex;\n      align-items: baseline;\n      width: 100%;\n      text-align: left;\n      position: relative;\n\n      .expansion-heading-icon {\n        color: colours.$colour-admiralty-blue;\n        margin-left: 30px;\n      }\n      &:focus {\n        outline: none;\n      }\n      h3 {\n        flex-grow: 1;\n        margin-bottom: 0;\n\n        &.expansion-heading-right-align {\n          text-align: right;\n        }\n      }\n      &:focus h3::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        right: -3px;\n        left: -3px;\n        box-shadow: 0 0 0 3px colours.$colour-utility-focus;\n      }\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core';\n\nlet nextId = 0;\n\n@Component({\n  tag: 'admiralty-expansion',\n  styleUrl: 'expansion.scss',\n  shadow: false,\n})\nexport class ExpansionComponent {\n  /**\n   * The text to display in the heading of the expansion component.\n   */\n  @Prop() heading: string;\n\n  /**\n   * Whether the component is expanded.\n   */\n  @Prop({ mutable: true, reflect: true }) expanded = false;\n\n  /**\n   * CWhether the heading should be right aligned.\n   */\n  @Prop() alignHeadingRight = false;\n\n  /**\n   * Whether the border on the bottom of the component should be hidden.\n   */\n  @Prop() hideBorder = false;\n\n  /**\n   * The event that is dispatched when the expanded status is toggled.\n   */\n  @Event() toggled: EventEmitter<boolean>;\n\n  id: string = `admiralty-expansion-${++nextId}`;\n\n  headerId: string = `${this.id}-header`;\n  contentId: string = `${this.id}-content`;\n\n  onToggle() {\n    this.expanded = !this.expanded;\n    this.toggled.emit(this.expanded);\n  }\n\n  getExpansionIcon(): IconDefinition {\n    return this.expanded ? faChevronUp : faChevronDown;\n  }\n\n  render() {\n    return (\n      <section\n        class={{\n          expansion: true,\n          expanded: this.expanded,\n          bordered: !this.hideBorder,\n        }}\n      >\n        <button id={this.headerId} type=\"button\" aria-expanded={this.expanded} aria-controls={this.contentId} class=\"expansion-heading-button\" onClick={this.onToggle.bind(this)}>\n          <h3 class={{ 'expansion-heading-right-align': this.alignHeadingRight }}>{this.heading}</h3>\n          <span class=\"visually-hidden\">, {this.expanded ? 'Hide' : 'Show'} this section</span>\n          <admiralty-icon class=\"expansion-heading-icon\" icon-name={this.getExpansionIcon().iconName}></admiralty-icon>\n        </button>\n        <div class=\"expansion-content\" id={this.contentId} aria-labelledby={this.headerId} hidden={!this.expanded}>\n          <slot></slot>\n        </div>\n      </section>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,89 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9db1e550.js');
+
+const fileInputCss = ".admiralty-file-input{background:#eee;display:flex;position:relative;border:2px dashed #09315b;min-height:120px;align-content:stretch;justify-content:stretch;margin-bottom:36px;font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:18px;line-height:24px;font-weight:300}.admiralty-file-input.drop_zone{background:#fff !important}.admiralty-file-input .upload-icon{color:#09315b;font-size:24px;font-weight:900;margin:0.4rem auto;text-align:center;flex:0 1}label{border-image-repeat:stretch;border-image-width:1;display:flex;align-content:center;flex-direction:column;flex:1;justify-content:center;cursor:pointer}label span{color:#09315b;flex:0 1;font-size:18px;font-weight:300;text-align:center;margin:0.4rem 0}label span.instructions{font-weight:normal}input[type=file]{align-items:baseline;overflow:visible;position:absolute;top:0;bottom:0;z-index:-1;width:100%}input[type=file]:focus{outline:3px solid #ffdd00;outline-offset:2px}";
+
+const FileInputComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.fileInputChange = index.createEvent(this, "fileInputChange", 7);
+    this.id = `admiralty-file-input-${++nextId}`;
+    /**
+     * Takes the bytes of a file and returns it as human readable figure
+     * @param bytes pass bytes throughs as a number
+     * @returns convers the bytes to the appropiate largest figure followed by the  format ie. 'kb', 'mb' etc
+     */
+    this.sizeOf = function (bytes) {
+      if (bytes === 0) {
+        return '0.00 B';
+      }
+      var e = Math.floor(Math.log(bytes) / Math.log(1024));
+      return (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B';
+    };
+    this.label = 'Click to choose a file or drag it';
+    this.multiple = false;
+    this.files = undefined;
+  }
+  /**
+   * The event that is fired when the user clicks on the file input box and uses the default dialog
+   * @param event
+   */
+  changeHandler(event) {
+    event.preventDefault();
+    this.storeFileInfo(event.target.files);
+    this.fileInputChange.emit(this.files);
+    console.log('changeHandler:', this.files);
+  }
+  storeFileInfo(files) {
+    this.files = this.multiple ? [...files] : [files.item(0)];
+  }
+  /**
+   * Prevents default dragOver behaviour which, stops the file being downloaded to the browser
+   * in a new tab
+   * @param event
+   */
+  dragOverHandler(event) {
+    event.preventDefault();
+    this.el.shadowRoot.querySelector('.admiralty-file-input').classList.add('drop_zone');
+  }
+  /**
+   * When this event is fired the 'drop_zone' class is removed from the wrapper 'admiralty-file-input' div
+   * which, turns the background back to off white
+   * @param event
+   */
+  dragLeaveHander(event) {
+    event.preventDefault();
+    this.el.shadowRoot.querySelector('.admiralty-file-input').classList.remove('drop_zone');
+  }
+  /**
+   * Handles the 'file' the user drops into the input field
+   * Does a check if it's a file and update the interface with the filename and the size of the file
+   * @param event
+   */
+  dropHandler(event) {
+    event.preventDefault();
+    this.el.shadowRoot.querySelector('.admiralty-file-input').classList.remove('drop_zone');
+    if (event.dataTransfer.files) {
+      this.storeFileInfo(event.dataTransfer.files);
+      this.fileInputChange.emit(this.files);
+      console.log('Drop: ', this.files);
+    }
+  }
+  get filesDisplay() {
+    return `${this.files[0].name} (${this.sizeOf(this.files[0].size)}) ${this.files.length > 1 ? ' ...' : ''}`;
+  }
+  render() {
+    var _a;
+    return (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" }), ((_a = this.files) === null || _a === void 0 ? void 0 : _a.length) ? index.h("span", null, this.filesDisplay) : index.h("span", { class: "instructions" }, 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 }))));
+  }
+  get el() { return index.getElement(this); }
+};
+let nextId = 0;
+FileInputComponent.style = fileInputCss;
+
+exports.admiralty_file_input = FileInputComponent;
+
+//# sourceMappingURL=admiralty-file-input.cjs.entry.js.map