@ukho/admiralty-core 0.0.0

package/dist/collection/components/paginator/paginator.js

@@ -0,0 +1,120 @@
+import { h } from '@stencil/core';
+import { ButtonVariant } from '../button/button.types';
+import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
+export class PaginatorComponent {
+  constructor() {
+    this.maxLength = 7;
+    this.pages = 1;
+    this.currentPage = 1;
+    this.label = '';
+  }
+  pageChanged(page) {
+    this.pageChange.emit(page);
+  }
+  onKeydown(event, navFn) {
+    if (event.key === 'Enter' || event.key === 'Enter') {
+      navFn();
+    }
+  }
+  prev() {
+    if (this.currentPage > 1) {
+      this.pageChanged(this.currentPage - 1);
+    }
+  }
+  next() {
+    if (this.currentPage < this.pages) {
+      this.pageChanged(this.currentPage + 1);
+    }
+  }
+  render() {
+    return (h("nav", { "aria-label": "pagination", class: "standard" }, h("p", { "aria-live": "polite" }, this.label), h("admiralty-button", { variant: ButtonVariant.Icon, icon: faChevronLeft.iconName, disabled: this.currentPage === 1, tabindex: 0, "aria-disabled": this.currentPage === 1, onClick: this.prev.bind(this), onKeyDown: e => this.onKeydown(e, this.prev.bind(this)), "aria-label": "Previous Page" }), h("admiralty-button", { variant: ButtonVariant.Icon, icon: faChevronRight.iconName, disabled: this.currentPage === this.pages, tabindex: 0, "aria-disabled": this.currentPage === this.pages, onClick: this.next.bind(this), onKeyDown: e => this.onKeydown(e, this.next.bind(this)), "aria-label": "Next Page" })));
+  }
+  static get is() { return "admiralty-paginator"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["paginator.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["paginator.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "pages": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The total number of pages. Defaults to 1."
+        },
+        "attribute": "pages",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "currentPage": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The current page. Defaults to 1."
+        },
+        "attribute": "current-page",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The label to display."
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "''"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "pageChange",
+        "name": "pageChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Dispatched when the previous or next button is pressed. The event detail contains\nthe requested page number."
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
+      }];
+  }
+}
+//# sourceMappingURL=paginator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"paginator.js","sourceRoot":"","sources":["../../../src/components/paginator/paginator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAOlF,MAAM,OAAO,kBAAkB;;IAmBpB,cAAS,GAAG,CAAC,CAAC;iBAfP,CAAC;uBAIK,CAAC;iBAIC,EAAE;;EASnB,WAAW,CAAC,IAAY;IAC7B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC7B,CAAC;EAED,SAAS,CAAC,KAAoB,EAAE,KAAe;IAC7C,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;MAClD,KAAK,EAAE,CAAC;KACT;EACH,CAAC;EAED,IAAI;IACF,IAAI,IAAI,CAAC,WAAW,GAAG,CAAC,EAAE;MACxB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;KACxC;EACH,CAAC;EAED,IAAI;IACF,IAAI,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,EAAE;MACjC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;KACxC;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,yBAAgB,YAAY,EAAC,KAAK,EAAC,UAAU;MAC3C,sBAAa,QAAQ,IAAE,IAAI,CAAC,KAAK,CAAK;MACtC,wBACE,OAAO,EAAE,aAAa,CAAC,IAAI,EAC3B,IAAI,EAAE,aAAa,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,CAAC,EAChC,QAAQ,EAAE,CAAC,mBACI,IAAI,CAAC,WAAW,KAAK,CAAC,EACrC,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAC7B,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,gBAC5C,eAAe,GACR;MACpB,wBACE,OAAO,EAAE,aAAa,CAAC,IAAI,EAC3B,IAAI,EAAE,cAAc,CAAC,QAAQ,EAC7B,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,KAAK,EACzC,QAAQ,EAAE,CAAC,mBACI,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,KAAK,EAC9C,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAC7B,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,gBAC5C,WAAW,GACJ,CAChB,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { ButtonVariant } from '../button/button.types';\nimport { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';\n\n@Component({\n  tag: 'admiralty-paginator',\n  styleUrl: 'paginator.scss',\n  shadow: false,\n})\nexport class PaginatorComponent {\n  /**\n   * The total number of pages. Defaults to 1.\n   */\n  @Prop() pages = 1;\n  /**\n   * The current page. Defaults to 1.\n   */\n  @Prop() currentPage = 1;\n  /**\n   * The label to display.\n   */\n  @Prop() label: string = '';\n  /**\n   * Dispatched when the previous or next button is pressed. The event detail contains\n   * the requested page number.\n   */\n  @Event() pageChange: EventEmitter<number>;\n\n  readonly maxLength = 7;\n\n  public pageChanged(page: number) {\n    this.pageChange.emit(page);\n  }\n\n  onKeydown(event: KeyboardEvent, navFn: Function) {\n    if (event.key === 'Enter' || event.key === 'Enter') {\n      navFn();\n    }\n  }\n\n  prev() {\n    if (this.currentPage > 1) {\n      this.pageChanged(this.currentPage - 1);\n    }\n  }\n\n  next() {\n    if (this.currentPage < this.pages) {\n      this.pageChanged(this.currentPage + 1);\n    }\n  }\n\n  render() {\n    return (\n      <nav aria-label=\"pagination\" class=\"standard\">\n        <p aria-live=\"polite\">{this.label}</p>\n        <admiralty-button\n          variant={ButtonVariant.Icon}\n          icon={faChevronLeft.iconName}\n          disabled={this.currentPage === 1}\n          tabindex={0}\n          aria-disabled={this.currentPage === 1}\n          onClick={this.prev.bind(this)}\n          onKeyDown={e => this.onKeydown(e, this.prev.bind(this))}\n          aria-label=\"Previous Page\"\n        ></admiralty-button>\n        <admiralty-button\n          variant={ButtonVariant.Icon}\n          icon={faChevronRight.iconName}\n          disabled={this.currentPage === this.pages}\n          tabindex={0}\n          aria-disabled={this.currentPage === this.pages}\n          onClick={this.next.bind(this)}\n          onKeyDown={e => this.onKeydown(e, this.next.bind(this))}\n          aria-label=\"Next Page\"\n        ></admiralty-button>\n      </nav>\n    );\n  }\n}\n"]}

package/dist/collection/components/paginator/paginator.stories.data.js

@@ -0,0 +1,36 @@
+import { h } from '@stencil/core';
+/**
+ * @internal
+ * Wrapper for the Paginator to demonstrate how the label and current page properties
+ * can be updated.
+ */
+export class PaginatorWrapperComponent {
+  pageChangedHandler(event) {
+    const page = event.detail;
+    const paginator = this.el.querySelector('admiralty-paginator');
+    const perPage = 6;
+    const first = page == 1 ? 1 : perPage * (page - 1) + 1;
+    const last = page == 8 ? 45 : perPage * page;
+    const total = 45;
+    const label = `Showing ${first}-${last} of ${total}`;
+    if (paginator.label) {
+      paginator.label = label;
+    }
+    paginator.currentPage = page;
+  }
+  render() {
+    return (h("div", null, h("slot", null)));
+  }
+  static get is() { return "admiralty-paginator-wrapper"; }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "pageChange",
+        "method": "pageChangedHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=paginator.stories.data.js.map

package/dist/collection/components/paginator/paginator.stories.data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"paginator.stories.data.js","sourceRoot":"","sources":["../../../src/components/paginator/paginator.stories.data.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE9D;;;;GAIG;AAKH,MAAM,OAAO,yBAAyB;EAIpC,kBAAkB,CAAC,KAAuB;IACxC,MAAM,IAAI,GAAW,KAAK,CAAC,MAAM,CAAC;IAClC,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAE/D,MAAM,OAAO,GAAG,CAAC,CAAC;IAClB,MAAM,KAAK,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;IACvD,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC;IAC7C,MAAM,KAAK,GAAG,EAAE,CAAC;IACjB,MAAM,KAAK,GAAG,WAAW,KAAK,IAAI,IAAI,OAAO,KAAK,EAAE,CAAC;IAErD,IAAI,SAAS,CAAC,KAAK,EAAE;MACnB,SAAS,CAAC,KAAK,GAAG,KAAK,CAAC;KACzB;IACD,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC;EAC/B,CAAC;EAED,MAAM;IACJ,OAAO,CACL;MACE,eAAa,CACT,CACP,CAAC;EACJ,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Listen } from '@stencil/core';\n\n/**\n * @internal\n * Wrapper for the Paginator to demonstrate how the label and current page properties\n * can be updated.\n */\n@Component({\n  tag: 'admiralty-paginator-wrapper',\n  shadow: false,\n})\nexport class PaginatorWrapperComponent {\n  @Element() el!: HTMLElement;\n\n  @Listen('pageChange')\n  pageChangedHandler(event: CustomEvent<any>) {\n    const page: number = event.detail;\n    const paginator = this.el.querySelector('admiralty-paginator');\n\n    const perPage = 6;\n    const first = page == 1 ? 1 : perPage * (page - 1) + 1;\n    const last = page == 8 ? 45 : perPage * page;\n    const total = 45;\n    const label = `Showing ${first}-${last} of ${total}`;\n\n    if (paginator.label) {\n      paginator.label = label;\n    }\n    paginator.currentPage = page;\n  }\n\n  render() {\n    return (\n      <div>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/phase-banner/phase-banner.css

@@ -0,0 +1,84 @@
+/* Device Sizes - matching layout breakpoints */
+@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;
+  }
+}
+
+/* Core Palette */
+/* Supporting Palette */
+/* Secondary Palette */
+/* Digital Product Colours */
+/* Utility Colours */
+/* Button Colours */
+/* Primary */
+/* Secondary */
+/* Link Colours */
+/* Nav colours */
+/* Table colours */
+/* Tab colours */
+/* form text input colours */
+/* form textarea colours */
+/* radio button */
+/* checkbox */
+/* code snippet */
+admiralty-phase-banner .phase-banner {
+  display: block;
+  line-height: 40px;
+  width: 100%;
+  padding: 0 18px;
+}
+@media (min-width: 1024px) {
+  admiralty-phase-banner .phase-banner {
+    padding: 0 20px;
+  }
+}
+admiralty-phase-banner .phase-banner strong {
+  border: 2px solid;
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: #09315b;
+  padding: 6px 8px 3px;
+  margin-right: 10px;
+}

package/dist/collection/components/phase-banner/phase-banner.js

@@ -0,0 +1,61 @@
+import { h } from '@stencil/core';
+export class PhaseBannerComponent {
+  constructor() {
+    this.phase = 'alpha';
+    this.link = undefined;
+  }
+  render() {
+    return (h("div", { class: "phase-banner" }, h("strong", null, this.phase), h("span", null, "This service is in ", this.phase, " phase - please provide", ' ', h("a", { href: this.link, target: "_blank" }, "feedback"), ' ', "to help us improve it")));
+  }
+  static get is() { return "admiralty-phase-banner"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["phase-banner.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["phase-banner.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "phase": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'alpha' | 'beta'",
+          "resolved": "\"alpha\" | \"beta\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The phase for the phase banner"
+        },
+        "attribute": "phase",
+        "reflect": false,
+        "defaultValue": "'alpha'"
+      },
+      "link": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A link to where the end user can provide feedback"
+        },
+        "attribute": "link",
+        "reflect": false
+      }
+    };
+  }
+}
+//# sourceMappingURL=phase-banner.js.map

package/dist/collection/components/phase-banner/phase-banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"phase-banner.js","sourceRoot":"","sources":["../../../src/components/phase-banner/phase-banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,oBAAoB;;iBAIG,OAAO;;;EAOzC,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,cAAc;MACvB,kBAAS,IAAI,CAAC,KAAK,CAAU;MAC7B;;QACsB,IAAI,CAAC,KAAK;;QAAyB,GAAG;QAC1D,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAC,QAAQ,eAE/B;QAAC,GAAG;gCAEH,CACH,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-phase-banner',\n  styleUrl: 'phase-banner.scss',\n  shadow: false,\n})\nexport class PhaseBannerComponent {\n  /**\n   * The phase for the phase banner\n   */\n  @Prop() phase: 'alpha' | 'beta' = 'alpha';\n\n  /**\n   * A link to where the end user can provide feedback\n   */\n  @Prop() link: string;\n\n  render() {\n    return (\n      <div class=\"phase-banner\">\n        <strong>{this.phase}</strong>\n        <span>\n          This service is in {this.phase} phase - please provide{' '}\n          <a href={this.link} target=\"_blank\">\n            feedback\n          </a>{' '}\n          to help us improve it\n        </span>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/progress-bar/progress-bar.css

@@ -0,0 +1,35 @@
+/* Core Palette */
+/* Supporting Palette */
+/* Secondary Palette */
+/* Digital Product Colours */
+/* Utility Colours */
+/* Button Colours */
+/* Primary */
+/* Secondary */
+/* Link Colours */
+/* Nav colours */
+/* Table colours */
+/* Tab colours */
+/* form text input colours */
+/* form textarea colours */
+/* radio button */
+/* checkbox */
+/* code snippet */
+progress {
+  appearance: none;
+  background: #eeeeee;
+  border: none;
+  box-sizing: border-box;
+  color: #09315b;
+  display: inline-block;
+  font-size: 18px;
+  flex: 1;
+  height: 1em;
+  width: 100%;
+}
+progress[value].error::-webkit-progress-value {
+  background-color: #e20d0d;
+}
+progress[value]::-webkit-progress-value {
+  background-color: #47a234;
+}

package/dist/collection/components/progress-bar/progress-bar.js

@@ -0,0 +1,90 @@
+import { h } from '@stencil/core';
+export class ProgressBarComponent {
+  constructor() {
+    this.id = `admiralty-progress-${++progressId}`;
+    this.label = undefined;
+    this.progression = 0;
+    this.error = false;
+    this.progressionValue = this.progression;
+  }
+  render() {
+    const { id, label, error, progressionValue } = this;
+    return (h("div", { class: "admiralty-progress" }, label ? h("admiralty-label", { for: id }, label) : null, h("progress", { id: id, class: { error: error }, value: progressionValue, max: "100" })));
+  }
+  static get is() { return "admiralty-progress-bar"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["progress-bar.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["progress-bar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If set, adds a label above the progress bar"
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "progression": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "* A value from 0 - 100 that visually represents the current progression"
+        },
+        "attribute": "progression",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "error": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true to indicate an error (turns the progress bar red)"
+        },
+        "attribute": "error",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "progressionValue": {}
+    };
+  }
+}
+let progressId = 0;
+//# sourceMappingURL=progress-bar.js.map

package/dist/collection/components/progress-bar/progress-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../src/components/progress-bar/progress-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO1D,MAAM,OAAO,oBAAoB;;IACvB,OAAE,GAAG,sBAAsB,EAAE,UAAU,EAAE,CAAC;;uBASpB,CAAC;iBAKN,KAAK;4BAKM,IAAI,CAAC,WAAW;;EAEpD,MAAM;IACJ,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;IAEpD,OAAO,CACL,WAAK,KAAK,EAAC,oBAAoB;MAC5B,KAAK,CAAC,CAAC,CAAC,uBAAiB,GAAG,EAAE,EAAE,IAAG,KAAK,CAAmB,CAAC,CAAC,CAAC,IAAI;MACnE,gBAAU,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAC,KAAK,GAAG,CAC5E,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,IAAI,UAAU,GAAG,CAAC,CAAC","sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-progress-bar',\n  styleUrl: 'progress-bar.scss',\n  scoped: true,\n})\nexport class ProgressBarComponent {\n  private id = `admiralty-progress-${++progressId}`;\n\n  /**\n   * If set, adds a label above the progress bar\n   */\n  @Prop() label?: string;\n\n  /**   * A value from 0 - 100 that visually represents the current progression\n   */\n  @Prop() progression: number = 0;\n\n  /**\n   * Set to true to indicate an error (turns the progress bar red)\n   */\n  @Prop() error: boolean = false;\n\n  /**\n   * Progress value, min:0, max: 100\n   */\n  @State() progressionValue: number = this.progression;\n\n  render() {\n    const { id, label, error, progressionValue } = this;\n\n    return (\n      <div class=\"admiralty-progress\">\n        {label ? <admiralty-label for={id}>{label}</admiralty-label> : null}\n        <progress id={id} class={{ error: error }} value={progressionValue} max=\"100\" />\n      </div>\n    );\n  }\n}\n\nlet progressId = 0;\n"]}

package/dist/collection/components/radio/radio.css

@@ -0,0 +1,49 @@
+/* Core Palette */
+/* Supporting Palette */
+/* Secondary Palette */
+/* Digital Product Colours */
+/* Utility Colours */
+/* Button Colours */
+/* Primary */
+/* Secondary */
+/* Link Colours */
+/* Nav colours */
+/* Table colours */
+/* Tab colours */
+/* form text input colours */
+/* form textarea colours */
+/* radio button */
+/* checkbox */
+/* code snippet */
+.admiralty-radio input {
+  appearance: none;
+  border: 2px solid #09315b;
+  border-radius: 1rem;
+  height: 1.5rem;
+  width: 1.5rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  margin-right: 18px;
+}
+.admiralty-radio input:checked:after {
+  border-radius: 100%;
+  background-color: #09315b;
+  width: 0.8rem;
+  height: 0.8rem;
+  content: " ";
+}
+.admiralty-radio input:disabled {
+  border: 2px solid #adadad;
+}
+.admiralty-radio input:focus {
+  outline: 3px solid #ffdd00;
+  outline-offset: 0;
+}
+.admiralty-radio label {
+  font-family: "JohnstonITC", Helvetica, sans-serif;
+  font-weight: 300;
+  position: relative;
+  top: 2px;
+}