@ukho/admiralty-core 0.0.0

package/dist/collection/components/table-row/table-row.css

@@ -0,0 +1,20 @@
+/* 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 */
+:host {
+  display: table-row;
+}

package/dist/collection/components/table-row/table-row.js

@@ -0,0 +1,23 @@
+import { Host, h } from '@stencil/core';
+/**
+ * The table row element should be used to define rows within the table body
+ * @slot - Table cells should be placed inside the slot
+ */
+export class TableRow {
+  render() {
+    return (h(Host, { role: "row" }, h("slot", null)));
+  }
+  static get is() { return "admiralty-table-row"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["table-row.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["table-row.css"]
+    };
+  }
+}
+//# sourceMappingURL=table-row.js.map

package/dist/collection/components/table-row/table-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-row.js","sourceRoot":"","sources":["../../../src/components/table-row/table-row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEnD;;;GAGG;AAMH,MAAM,OAAO,QAAQ;EACnB,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,KAAK;MACd,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n/**\n * The table row element should be used to define rows within the table body\n * @slot - Table cells should be placed inside the slot\n */\n@Component({\n  tag: 'admiralty-table-row',\n  styleUrl: 'table-row.scss',\n  scoped: true,\n})\nexport class TableRow {\n  render() {\n    return (\n      <Host role=\"row\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/textarea/textarea.css

@@ -0,0 +1,269 @@
+@charset "UTF-8";
+/* 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 */
+/* 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;
+  }
+}
+
+* {
+  font-family: "JohnstonITC", Helvetica, sans-serif;
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 300;
+  color: #333333;
+}
+@media (max-width: 1023px) {
+  * {
+    font-size: 16px;
+  }
+}
+
+a {
+  color: #09315b;
+}
+a:focus {
+  outline: 3px solid #ffdd00;
+  outline-offset: 1px;
+}
+
+h1 {
+  font-family: "JohnstonITC", Helvetica, sans-serif;
+  color: #09315b;
+  font-weight: normal;
+  font-size: 48px;
+  line-height: 60px;
+  margin: 0 0 30px 0;
+}
+@media (max-width: 1023px) {
+  h1 {
+    font-size: 46px;
+    line-height: 54px;
+  }
+}
+
+h2 {
+  font-family: "JohnstonITC", Helvetica, sans-serif;
+  color: #09315b;
+  font-weight: normal;
+  font-size: 36px;
+  line-height: 48px;
+  margin-bottom: 18px;
+}
+@media (max-width: 1023px) {
+  h2 {
+    font-size: 34px;
+    line-height: 42px;
+  }
+}
+
+h3,
+h4,
+h5 {
+  font-family: "JohnstonITC", Helvetica, sans-serif;
+  color: #09315b;
+  font-weight: normal;
+  font-size: 21px;
+  line-height: 30px;
+  margin-bottom: 12px;
+}
+@media (max-width: 1023px) {
+  h3,
+  h4,
+  h5 {
+    font-size: 20px;
+    line-height: 30px;
+  }
+}
+
+h6 {
+  font-family: "JohnstonITC", Helvetica, sans-serif;
+  color: #09315b;
+  font-weight: normal;
+  font-size: 18px;
+  line-height: 24px;
+  margin-bottom: 12px;
+}
+@media (max-width: 1023px) {
+  h6 {
+    font-size: 16px;
+  }
+}
+
+p {
+  font-family: "JohnstonITC", Helvetica, sans-serif;
+  margin-bottom: 30px;
+}
+
+.intro {
+  font-family: "JohnstonITC", Helvetica, sans-serif;
+  font-size: 28px;
+  line-height: 36px;
+  margin-bottom: 30px;
+}
+@media (max-width: 1023px) {
+  .intro {
+    font-size: 26px;
+  }
+}
+
+.small {
+  font-family: "JohnstonITC", Helvetica, sans-serif;
+  font-size: 16px;
+}
+@media (max-width: 1023px) {
+  .small {
+    font-size: 14px;
+    line-height: 22px;
+  }
+}
+
+blockquote {
+  font-family: "JohnstonITC", Helvetica, sans-serif;
+  line-height: 30px;
+  width: 100%;
+  padding: 24px 18px;
+  border-left: 5px solid #09315b;
+  margin-bottom: 30px;
+  background: #eeeeee;
+}
+@media (max-width: 1023px) {
+  blockquote {
+    line-height: 24px;
+  }
+}
+
+ul {
+  font-family: "JohnstonITC", Helvetica, sans-serif;
+  list-style: none;
+}
+ul a {
+  font-weight: 300;
+}
+ul li {
+  margin-bottom: 12px;
+}
+ul li:before {
+  content: "■";
+  font-size: 18px;
+  color: #09315b;
+  vertical-align: text-bottom;
+  margin-right: 12px;
+}
+@media (max-width: 1023px) {
+  ul li:before {
+    font-size: 8px;
+  }
+}
+
+ol {
+  font-family: "JohnstonITC", Helvetica, sans-serif;
+  list-style: none;
+  counter-reset: li;
+}
+ol a {
+  font-weight: 300;
+}
+ol li:before {
+  content: counter(li) ".";
+  color: #03284f;
+  font-size: 18px;
+  margin-right: 12px;
+}
+ol li {
+  counter-increment: li;
+  margin-bottom: 12px;
+}
+
+.white-text * {
+  color: #ffffff;
+}
+
+.text-area-container textarea {
+  display: block;
+  position: relative;
+  width: 100%;
+  min-height: 170px;
+  border: 2px solid #333333;
+  color: #333333;
+  padding: 12px 18px;
+  outline: none;
+  resize: vertical;
+  overflow: auto;
+  box-sizing: border-box;
+  vertical-align: top;
+  background-color: #ffffff;
+}
+.text-area-container textarea:focus-visible {
+  outline: 3px solid #ffdd00;
+  box-shadow: #333333 inset 0 0 0 2px;
+}
+.text-area-container textarea.invalid {
+  border-color: #e20d0d;
+}
+.text-area-container textarea.invalid:focus-visible {
+  border-color: unset;
+  outline: 3px solid #ffdd00;
+}
+.text-area-container textarea.disabled {
+  color: #adadad;
+  border-color: #adadad;
+  background: #ffffff;
+}

package/dist/collection/components/textarea/textarea.js

@@ -0,0 +1,202 @@
+import { Host, h } from '@stencil/core';
+let textareaIds = 0;
+export class TextareaComponent {
+  constructor() {
+    this.inputId = `admiralty-textarea-${textareaIds++}`;
+    this.onBlur = () => {
+      this.textareaBlur.emit();
+    };
+    this.onChange = (_ev) => {
+      this.textareaChanged.emit(this.text);
+    };
+    this.label = '';
+    this.text = '';
+    this.hint = undefined;
+    this.width = undefined;
+    this.disabled = false;
+    this.invalid = false;
+    this.invalidMessage = undefined;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "text-area-container" }, this.label ? (h("admiralty-label", { for: this.inputId, disabled: this.disabled }, this.label)) : null, this.hint ? h("admiralty-hint", { disabled: this.disabled }, this.hint) : null, h("textarea", { class: { disabled: this.disabled, invalid: this.invalid }, style: this.width ? { maxWidth: `${this.width}px` } : {}, id: this.inputId, onChange: this.onChange, onBlur: this.onBlur }, this.text), this.invalid ? h("admiralty-input-error", null, this.invalidMessage) : null)));
+  }
+  static get is() { return "admiralty-textarea"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["textarea.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["textarea.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The label which will be used as a placeholder in the unfilled state, and as a field label in the filled state."
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "text": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The contents of the textarea"
+        },
+        "attribute": "text",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "hint": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The hint which will be used under the label to describe the input."
+        },
+        "attribute": "hint",
+        "reflect": false
+      },
+      "width": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The maximum width for the input field."
+        },
+        "attribute": "width",
+        "reflect": false
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "This dictates whether the form field is disabled."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to show the input in an invalid state"
+        },
+        "attribute": "invalid",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "invalidMessage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The message to show when the input is invalid"
+        },
+        "attribute": "invalid-message",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "textareaBlur",
+        "name": "textareaBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "event",
+              "text": "textareaBlur"
+            }],
+          "text": "Event is fired when the form control loses focus"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "textareaChanged",
+        "name": "textareaChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "event",
+              "text": "textareaChanged"
+            }],
+          "text": "Event is fired when the form control changes"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+}
+//# sourceMappingURL=textarea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAE9E,IAAI,WAAW,GAAG,CAAC,CAAC;AAOpB,MAAM,OAAO,iBAAiB;;IACpB,YAAO,GAAG,sBAAsB,WAAW,EAAE,EAAE,CAAC;IAiDhD,WAAM,GAAG,GAAG,EAAE;MACpB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC,CAAC;IAEM,aAAQ,GAAG,CAAC,GAAQ,EAAE,EAAE;MAC9B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACvC,CAAC,CAAC;iBAlDsB,EAAE;gBAKH,EAAE;;;oBAeG,KAAK;mBAKN,KAAK;;;EA0BhC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,qBAAqB;QAC7B,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,uBAAiB,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACxD,IAAI,CAAC,KAAK,CACK,CACnB,CAAC,CAAC,CAAC,IAAI;QACP,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,sBAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,CAAC,CAAC,CAAC,IAAI;QACzF,gBACE,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EACzD,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,EACxD,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,IAElB,IAAI,CAAC,IAAI,CACD;QACV,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,iCAAwB,IAAI,CAAC,cAAc,CAAyB,CAAC,CAAC,CAAC,IAAI,CACvF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\nlet textareaIds = 0;\n\n@Component({\n  tag: 'admiralty-textarea',\n  styleUrl: 'textarea.scss',\n  shadow: true,\n})\nexport class TextareaComponent {\n  private inputId = `admiralty-textarea-${textareaIds++}`;\n\n  /**\n   * The label which will be used as a placeholder in the unfilled state, and as a field label in the filled state.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * The contents of the textarea\n   */\n  @Prop() text: string = '';\n\n  /**\n   * The hint which will be used under the label to describe the input.\n   */\n  @Prop() hint: string;\n\n  /**\n   * The maximum width for the input field.\n   */\n  @Prop() width?: number;\n\n  /**\n   * This dictates whether the form field is disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether to show the input in an invalid state\n   */\n  @Prop() invalid: boolean = false;\n\n  /**\n   * The message to show when the input is invalid\n   */\n  @Prop() invalidMessage: string;\n\n  /**\n   * Event is fired when the form control loses focus\n   * @event textareaBlur\n   */\n  @Event({ eventName: 'textareaBlur' }) textareaBlur: EventEmitter<any>;\n\n  /**\n   * Event is fired when the form control changes\n   * @event textareaChanged\n   */\n  @Event({ eventName: 'textareaChanged' }) textareaChanged: EventEmitter<string>;\n\n  private onBlur = () => {\n    this.textareaBlur.emit();\n  };\n\n  private onChange = (_ev: any) => {\n    this.textareaChanged.emit(this.text);\n  };\n  render() {\n    return (\n      <Host>\n        <div class=\"text-area-container\">\n          {this.label ? (\n            <admiralty-label for={this.inputId} disabled={this.disabled}>\n              {this.label}\n            </admiralty-label>\n          ) : null}\n          {this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}\n          <textarea\n            class={{ disabled: this.disabled, invalid: this.invalid }}\n            style={this.width ? { maxWidth: `${this.width}px` } : {}}\n            id={this.inputId}\n            onChange={this.onChange}\n            onBlur={this.onBlur}\n          >\n            {this.text}\n          </textarea>\n          {this.invalid ? <admiralty-input-error>{this.invalidMessage}</admiralty-input-error> : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/type-ahead/type-ahead.css

@@ -0,0 +1,73 @@
+/* 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 */
+/* Use for content that should be read by screen readers but not seen */
+.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;
+}