@ukho/admiralty-core 0.0.9 → 0.0.10

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["admiralty-type-ahead.cjs",[[6,"admiralty-type-ahead",{"value":[1],"label":[1],"placeholder":[1],"resultsOnInitFocus":[4,"results-on-init-focus"],"filterResult":[32]}]]],["admiralty-select.cjs",[[2,"admiralty-select",{"disabled":[4],"error":[4],"errorHint":[1,"error-hint"],"hint":[1],"label":[1],"width":[2]}]]],["admiralty-textarea.cjs",[[2,"admiralty-textarea",{"label":[1],"text":[1],"hint":[1],"width":[2],"disabled":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"]}]]],["admiralty-colour-block.cjs",[[6,"admiralty-colour-block",{"width":[2],"height":[2],"heading":[1],"colour":[1],"clickAction":[16],"actionText":[1,"action-text"]}]]],["admiralty-filter.cjs",[[6,"admiralty-filter",{"filterTitle":[1,"filter-title"]}]]],["admiralty-filter-group.cjs",[[6,"admiralty-filter-group",{"groupTitle":[1,"group-title"]}]]],["admiralty-paginator.cjs",[[2,"admiralty-paginator",{"pages":[2],"currentPage":[2,"current-page"],"label":[1]}]]],["admiralty-breadcrumb.cjs",[[6,"admiralty-breadcrumb",{"active":[4],"first":[4],"href":[1]}]]],["admiralty-dialogue.cjs",[[6,"admiralty-dialogue",{"type":[1],"heading":[1]}]]],["admiralty-file-input.cjs",[[2,"admiralty-file-input",{"label":[1],"multiple":[4],"files":[32]}]]],["admiralty-header.cjs",[[6,"admiralty-header",{"headerTitle":[1,"header-title"],"headerTitleUrl":[1,"header-title-url"],"logoLinkUrl":[1,"logo-link-url"],"logoImgUrl":[1,"logo-img-url"],"logoAltText":[1,"logo-alt-text"],"mobileMenuOpen":[32],"displayHamburger":[32]}]]],["admiralty-progress-bar.cjs",[[2,"admiralty-progress-bar",{"label":[1],"progression":[2],"error":[4],"progressionValue":[32]}]]],["admiralty-breadcrumbs.cjs",[[6,"admiralty-breadcrumbs"]]],["admiralty-card.cjs",[[6,"admiralty-card",{"heading":[1]}]]],["admiralty-checkbox.cjs",[[2,"admiralty-checkbox",{"checkboxRight":[4,"checkbox-right"],"disabled":[4],"name":[1],"checked":[1028],"value":[8],"labelText":[1,"label-text"]}]]],["admiralty-footer.cjs",[[6,"admiralty-footer",{"imageLink":[1,"image-link"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"text":[1]}]]],["admiralty-header-menu-item.cjs",[[6,"admiralty-header-menu-item",{"menuTitle":[1,"menu-title"],"active":[4]}]]],["admiralty-header-profile.cjs",[[2,"admiralty-header-profile",{"isSignedIn":[4,"is-signed-in"],"signedInText":[1,"signed-in-text"],"displaySubmenu":[32]}]]],["admiralty-header-sub-menu-item.cjs",[[2,"admiralty-header-sub-menu-item",{"menuTitle":[1,"menu-title"]}]]],["admiralty-hr.cjs",[[2,"admiralty-hr"]]],["admiralty-link.cjs",[[6,"admiralty-link",{"href":[1],"newTab":[4,"new-tab"]}]]],["admiralty-paginator-wrapper.cjs",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["admiralty-phase-banner.cjs",[[2,"admiralty-phase-banner",{"phase":[1],"link":[1]}]]],["admiralty-radio.cjs",[[6,"admiralty-radio",{"name":[1],"value":[1025],"disabled":[4],"checked":[1028],"buttonTabindex":[32],"setButtonTabindex":[64]}]]],["admiralty-radio-group.cjs",[[6,"admiralty-radio-group",{"name":[1],"value":[1032],"displayVertical":[4,"display-vertical"]}]]],["admiralty-side-nav.cjs",[[6,"admiralty-side-nav",{"label":[1]}]]],["admiralty-side-nav-item.cjs",[[2,"admiralty-side-nav-item",{"sideNavItemId":[1,"side-nav-item-id"],"headingTitle":[1,"heading-title"],"navActive":[4,"nav-active"]}]]],["admiralty-side-nav-wrapper.cjs",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["admiralty-tab.cjs",[[6,"admiralty-tab",{"label":[1],"tabLabelId":[1,"tab-label-id"],"tabContentId":[1,"tab-content-id"]}]]],["admiralty-tab-group.cjs",[[6,"admiralty-tab-group",{"selectedIndex":[1026,"selected-index"]}]]],["admiralty-table.cjs",[[6,"admiralty-table",{"caption":[1]}]]],["admiralty-table-body.cjs",[[6,"admiralty-table-body"]]],["admiralty-table-cell.cjs",[[6,"admiralty-table-cell"]]],["admiralty-table-header.cjs",[[6,"admiralty-table-header"]]],["admiralty-table-header-cell.cjs",[[6,"admiralty-table-header-cell"]]],["admiralty-table-row.cjs",[[6,"admiralty-table-row"]]],["admiralty-type-ahead-item.cjs",[[2,"admiralty-type-ahead-item",{"value":[1]}]]],["admiralty-icon.cjs",[[1,"admiralty-icon",{"iconName":[1,"icon-name"],"iconPrefix":[1,"icon-prefix"]}]]],["admiralty-input.cjs",[[2,"admiralty-input",{"name":[1],"label":[1],"hint":[1],"disabled":[4],"type":[1],"placeholder":[1],"width":[2],"required":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"autocomplete":[1],"value":[1032]}]]],["admiralty-expansion.cjs",[[6,"admiralty-expansion",{"heading":[1],"expanded":[1540],"alignHeadingRight":[4,"align-heading-right"],"hideBorder":[4,"hide-border"]}]]],["admiralty-button.cjs",[[6,"admiralty-button",{"variant":[1],"icon":[1],"disabled":[4],"type":[1]}]]],["admiralty-hint_3.cjs",[[6,"admiralty-input-error"],[6,"admiralty-hint",{"disabled":[4]}],[6,"admiralty-label",{"disabled":[4],"for":[1]}]]]], options);
+  return index.bootstrapLazy([["admiralty-type-ahead.cjs",[[6,"admiralty-type-ahead",{"value":[1],"label":[1],"placeholder":[1],"resultsOnInitFocus":[4,"results-on-init-focus"],"filterResult":[32]}]]],["admiralty-select.cjs",[[2,"admiralty-select",{"disabled":[4],"error":[4],"errorHint":[1,"error-hint"],"hint":[1],"label":[1],"width":[2]}]]],["admiralty-textarea.cjs",[[2,"admiralty-textarea",{"label":[1],"text":[1],"hint":[1],"width":[2],"disabled":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"]}]]],["admiralty-colour-block.cjs",[[6,"admiralty-colour-block",{"width":[2],"height":[2],"heading":[1],"colour":[1],"clickAction":[16],"actionText":[1,"action-text"]}]]],["admiralty-filter.cjs",[[6,"admiralty-filter",{"filterTitle":[1,"filter-title"]}]]],["admiralty-filter-group.cjs",[[6,"admiralty-filter-group",{"groupTitle":[1,"group-title"]}]]],["admiralty-paginator.cjs",[[2,"admiralty-paginator",{"pages":[2],"currentPage":[2,"current-page"],"label":[1]}]]],["admiralty-breadcrumb.cjs",[[6,"admiralty-breadcrumb",{"active":[4],"first":[4],"href":[1]}]]],["admiralty-dialogue.cjs",[[6,"admiralty-dialogue",{"type":[1],"heading":[1]}]]],["admiralty-file-input.cjs",[[2,"admiralty-file-input",{"label":[1],"multiple":[4],"files":[32]}]]],["admiralty-header.cjs",[[6,"admiralty-header",{"headerTitle":[1,"header-title"],"headerTitleUrl":[1,"header-title-url"],"logoLinkUrl":[1,"logo-link-url"],"logoImgUrl":[1,"logo-img-url"],"logoAltText":[1,"logo-alt-text"],"mobileMenuOpen":[32],"displayHamburger":[32]}]]],["admiralty-progress-bar.cjs",[[2,"admiralty-progress-bar",{"label":[1],"progression":[2],"error":[4],"progressionValue":[32]}]]],["admiralty-read-more.cjs",[[6,"admiralty-read-more",{"heading":[1],"expanded":[32]}]]],["admiralty-breadcrumbs.cjs",[[6,"admiralty-breadcrumbs"]]],["admiralty-card.cjs",[[6,"admiralty-card",{"heading":[1]}]]],["admiralty-checkbox.cjs",[[2,"admiralty-checkbox",{"checkboxRight":[4,"checkbox-right"],"disabled":[4],"name":[1],"checked":[1028],"value":[8],"labelText":[1,"label-text"]}]]],["admiralty-footer.cjs",[[6,"admiralty-footer",{"imageLink":[1,"image-link"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"text":[1]}]]],["admiralty-header-menu-item.cjs",[[6,"admiralty-header-menu-item",{"menuTitle":[1,"menu-title"],"active":[4]}]]],["admiralty-header-profile.cjs",[[2,"admiralty-header-profile",{"isSignedIn":[4,"is-signed-in"],"signedInText":[1,"signed-in-text"],"displaySubmenu":[32]}]]],["admiralty-header-sub-menu-item.cjs",[[2,"admiralty-header-sub-menu-item",{"menuTitle":[1,"menu-title"]}]]],["admiralty-hr.cjs",[[2,"admiralty-hr"]]],["admiralty-link.cjs",[[6,"admiralty-link",{"href":[1],"newTab":[4,"new-tab"]}]]],["admiralty-paginator-wrapper.cjs",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["admiralty-phase-banner.cjs",[[2,"admiralty-phase-banner",{"phase":[1],"link":[1]}]]],["admiralty-radio.cjs",[[6,"admiralty-radio",{"name":[1],"value":[1025],"disabled":[4],"checked":[1028],"buttonTabindex":[32],"setButtonTabindex":[64]}]]],["admiralty-radio-group.cjs",[[6,"admiralty-radio-group",{"name":[1],"value":[1032],"displayVertical":[4,"display-vertical"]}]]],["admiralty-side-nav.cjs",[[6,"admiralty-side-nav",{"label":[1]}]]],["admiralty-side-nav-item.cjs",[[2,"admiralty-side-nav-item",{"sideNavItemId":[1,"side-nav-item-id"],"headingTitle":[1,"heading-title"],"navActive":[4,"nav-active"]}]]],["admiralty-side-nav-wrapper.cjs",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["admiralty-tab.cjs",[[6,"admiralty-tab",{"label":[1],"tabLabelId":[1,"tab-label-id"],"tabContentId":[1,"tab-content-id"]}]]],["admiralty-tab-group.cjs",[[6,"admiralty-tab-group",{"selectedIndex":[1026,"selected-index"]}]]],["admiralty-table.cjs",[[6,"admiralty-table",{"caption":[1]}]]],["admiralty-table-body.cjs",[[6,"admiralty-table-body"]]],["admiralty-table-cell.cjs",[[6,"admiralty-table-cell"]]],["admiralty-table-header.cjs",[[6,"admiralty-table-header"]]],["admiralty-table-header-cell.cjs",[[6,"admiralty-table-header-cell"]]],["admiralty-table-row.cjs",[[6,"admiralty-table-row"]]],["admiralty-type-ahead-item.cjs",[[2,"admiralty-type-ahead-item",{"value":[1]}]]],["admiralty-icon.cjs",[[1,"admiralty-icon",{"iconName":[1,"icon-name"],"iconPrefix":[1,"icon-prefix"]}]]],["admiralty-input.cjs",[[2,"admiralty-input",{"name":[1],"label":[1],"hint":[1],"disabled":[4],"type":[1],"placeholder":[1],"width":[2],"required":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"autocomplete":[1],"value":[1032]}]]],["admiralty-expansion.cjs",[[6,"admiralty-expansion",{"heading":[1],"expanded":[1540],"alignHeadingRight":[4,"align-heading-right"],"hideBorder":[4,"hide-border"]}]]],["admiralty-button.cjs",[[6,"admiralty-button",{"variant":[1],"icon":[1],"disabled":[4],"type":[1]}]]],["admiralty-hint_3.cjs",[[6,"admiralty-input-error"],[6,"admiralty-hint",{"disabled":[4]}],[6,"admiralty-label",{"disabled":[4],"for":[1]}]]]], options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -29,6 +29,7 @@
     "./components/progress-bar/progress-bar.js",
     "./components/radio/radio.js",
     "./components/radio-group/radio-group.js",
+    "./components/read-more/read-more.js",
     "./components/select/select.js",
     "./components/side-nav/side-nav.stories.data.js",
     "./components/side-nav/side-nav.js",

package/dist/collection/components/read-more/read-more.css

@@ -0,0 +1,55 @@
+/* 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 */
+section.expansion {
+  padding: 2px 0;
+}
+section.expansion .expansion-content {
+  display: none;
+  max-height: 0;
+  overflow: visible;
+  border-left: 4px solid #0177c1;
+}
+section.expansion.expanded .expansion-content {
+  display: block;
+  max-height: initial;
+  padding: 2px 5px;
+}
+section.expansion button {
+  background-color: transparent;
+  border: none;
+  white-space: unset;
+  color: initial;
+  cursor: pointer;
+  margin: 8px 0px;
+  padding: 4px;
+  align-items: baseline;
+  text-align: left;
+  text-decoration: underline;
+}
+section.expansion button.expanded span {
+  font-weight: normal;
+}
+section.expansion button .expansion-heading-icon {
+  margin-left: 5px;
+  margin-right: 8px;
+  vertical-align: top;
+}
+section.expansion button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px #ffdd00;
+}

package/dist/collection/components/read-more/read-more.js

@@ -0,0 +1,82 @@
+import { h } from '@stencil/core';
+import { faArrowDown, faArrowRight } from '@fortawesome/free-solid-svg-icons';
+let nextId = 0;
+export class ReadMoreComponent {
+  constructor() {
+    this.id = `admiralty-read-more-${++nextId}`;
+    this.headerId = `${this.id}-header`;
+    this.contentId = `${this.id}-content`;
+    this.heading = undefined;
+    this.expanded = false;
+  }
+  get expansionIcon() {
+    return this.expanded ? faArrowDown : faArrowRight;
+  }
+  onToggle() {
+    this.expanded = !this.expanded;
+    this.admiraltyToggled.emit(this.expanded);
+  }
+  render() {
+    return (h("section", { class: {
+        expansion: true,
+        expanded: this.expanded,
+      } }, h("button", { id: this.headerId, type: "button", "aria-expanded": this.expanded, "aria-controls": this.contentId, class: { expanded: this.expanded }, onClick: this.onToggle.bind(this) }, h("admiralty-icon", { class: "expansion-heading-icon", "icon-name": this.expansionIcon.iconName }), h("span", null, this.heading), h("span", { class: "visually-hidden" }, ", ", this.expanded ? 'Hide' : 'Show', " this section")), h("div", { class: "expansion-content", id: this.contentId, "aria-labelledby": this.headerId, hidden: !this.expanded }, h("slot", null))));
+  }
+  static get is() { return "admiralty-read-more"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["read-more.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["read-more.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The text to display in the heading of the readmore component."
+        },
+        "attribute": "heading",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "expanded": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "admiraltyToggled",
+        "name": "admiraltyToggled",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "The event that is dispatched when the expanded status is toggled."
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
+}
+//# sourceMappingURL=read-more.js.map

package/dist/collection/components/read-more/read-more.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"read-more.js","sourceRoot":"","sources":["../../../src/components/read-more/read-more.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAgB,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAG9E,IAAI,MAAM,GAAG,CAAC,CAAC;AAOf,MAAM,OAAO,iBAAiB;;IAa5B,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;;oBAVrB,KAAK;;EAYzB,IAAI,aAAa;IACf,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAE,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC;EACrD,CAAC;EAED,QAAQ;IACN,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC/B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;EAC5C,CAAC;EAED,MAAM;IACJ,OAAO,CACL,eACE,KAAK,EAAE;QACL,SAAS,EAAE,IAAI;QACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB;MAED,cACE,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,QAAQ,mBACb,IAAI,CAAC,SAAS,EAC7B,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAClC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;QAEjC,sBAAgB,KAAK,EAAC,wBAAwB,eAAY,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAmB;QACxG,gBAAO,IAAI,CAAC,OAAO,CAAQ;QAC3B,YAAM,KAAK,EAAC,iBAAiB;;UAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;0BAAqB,CAC9E;MACT,WAAK,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,SAAS,qBAAmB,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ;QACvG,eAAa,CACT,CACE,CACX,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, EventEmitter, Prop, State, Event, h } from '@stencil/core';\r\nimport { faArrowDown, faArrowRight } from '@fortawesome/free-solid-svg-icons';\r\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core';\r\n\r\nlet nextId = 0;\r\n\r\n@Component({\r\n  tag: 'admiralty-read-more',\r\n  styleUrl: 'read-more.scss',\r\n  scoped: true,\r\n})\r\nexport class ReadMoreComponent {\r\n  /**\r\n   * The text to display in the heading of the readmore component.\r\n   */\r\n  @Prop() heading: string;\r\n\r\n  @State() expanded = false;\r\n\r\n  /**\r\n   * The event that is dispatched when the expanded status is toggled.\r\n   */\r\n  @Event() admiraltyToggled: EventEmitter<boolean>;\r\n\r\n  id: string = `admiralty-read-more-${++nextId}`;\r\n\r\n  headerId: string = `${this.id}-header`;\r\n  contentId: string = `${this.id}-content`;\r\n\r\n  get expansionIcon(): IconDefinition {\r\n    return this.expanded ?  faArrowDown : faArrowRight;\r\n  }\r\n\r\n  onToggle() {\r\n    this.expanded = !this.expanded;\r\n    this.admiraltyToggled.emit(this.expanded);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <section\r\n        class={{\r\n          expansion: true,\r\n          expanded: this.expanded,\r\n        }}\r\n      >\r\n        <button\r\n          id={this.headerId}\r\n          type=\"button\"\r\n          aria-expanded={this.expanded}\r\n          aria-controls={this.contentId}\r\n          class={{ expanded: this.expanded }}\r\n          onClick={this.onToggle.bind(this)}\r\n        >\r\n          <admiralty-icon class=\"expansion-heading-icon\" icon-name={this.expansionIcon.iconName}></admiralty-icon>\r\n          <span>{this.heading}</span>\r\n          <span class=\"visually-hidden\">, {this.expanded ? 'Hide' : 'Show'} this section</span>\r\n        </button>\r\n        <div class=\"expansion-content\" id={this.contentId} aria-labelledby={this.headerId} hidden={!this.expanded}>\r\n          <slot></slot>\r\n        </div>\r\n      </section>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/components/admiralty-read-more.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AdmiraltyReadMore extends Components.AdmiraltyReadMore, HTMLElement {}
+export const AdmiraltyReadMore: {
+  prototype: AdmiraltyReadMore;
+  new (): AdmiraltyReadMore;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/admiralty-read-more.js

@@ -0,0 +1,60 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { l as faArrowDown, m as faArrowRight, d as defineCustomElement$2 } from './icon.js';
+
+const readMoreCss = "section.expansion.sc-admiralty-read-more{padding:2px 0}section.expansion.sc-admiralty-read-more .expansion-content.sc-admiralty-read-more{display:none;max-height:0;overflow:visible;border-left:4px solid #0177c1}section.expansion.expanded.sc-admiralty-read-more .expansion-content.sc-admiralty-read-more{display:block;max-height:initial;padding:2px 5px}section.expansion.sc-admiralty-read-more button.sc-admiralty-read-more{background-color:transparent;border:none;white-space:unset;color:initial;cursor:pointer;margin:8px 0px;padding:4px;align-items:baseline;text-align:left;text-decoration:underline}section.expansion.sc-admiralty-read-more button.expanded.sc-admiralty-read-more span.sc-admiralty-read-more{font-weight:normal}section.expansion.sc-admiralty-read-more button.sc-admiralty-read-more .expansion-heading-icon.sc-admiralty-read-more{margin-left:5px;margin-right:8px;vertical-align:top}section.expansion.sc-admiralty-read-more button.sc-admiralty-read-more:focus{outline:none;box-shadow:0 0 0 3px #ffdd00}";
+
+let nextId = 0;
+const ReadMoreComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.admiraltyToggled = createEvent(this, "admiraltyToggled", 7);
+    this.id = `admiralty-read-more-${++nextId}`;
+    this.headerId = `${this.id}-header`;
+    this.contentId = `${this.id}-content`;
+    this.heading = undefined;
+    this.expanded = false;
+  }
+  get expansionIcon() {
+    return this.expanded ? faArrowDown : faArrowRight;
+  }
+  onToggle() {
+    this.expanded = !this.expanded;
+    this.admiraltyToggled.emit(this.expanded);
+  }
+  render() {
+    return (h("section", { class: {
+        expansion: true,
+        expanded: this.expanded,
+      } }, h("button", { id: this.headerId, type: "button", "aria-expanded": this.expanded, "aria-controls": this.contentId, class: { expanded: this.expanded }, onClick: this.onToggle.bind(this) }, h("admiralty-icon", { class: "expansion-heading-icon", "icon-name": this.expansionIcon.iconName }), h("span", null, this.heading), h("span", { class: "visually-hidden" }, ", ", this.expanded ? 'Hide' : 'Show', " this section")), h("div", { class: "expansion-content", id: this.contentId, "aria-labelledby": this.headerId, hidden: !this.expanded }, h("slot", null))));
+  }
+  static get style() { return readMoreCss; }
+}, [6, "admiralty-read-more", {
+    "heading": [1],
+    "expanded": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["admiralty-read-more", "admiralty-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "admiralty-read-more":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ReadMoreComponent);
+      }
+      break;
+    case "admiralty-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const AdmiraltyReadMore = ReadMoreComponent;
+const defineCustomElement = defineCustomElement$1;
+
+export { AdmiraltyReadMore, defineCustomElement };
+
+//# sourceMappingURL=admiralty-read-more.js.map

package/dist/components/admiralty-read-more.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-read-more.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,2/BAA2/B;;ACI/gC,IAAI,MAAM,GAAG,CAAC,CAAC;MAOF,iBAAiB;;;;;IAa5B,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;;oBAVrB,KAAK;;EAYzB,IAAI,aAAa;IACf,OAAO,IAAI,CAAC,QAAQ,GAAI,WAAW,GAAG,YAAY,CAAC;GACpD;EAED,QAAQ;IACN,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC/B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GAC3C;EAED,MAAM;IACJ,QACE,eACE,KAAK,EAAE;QACL,SAAS,EAAE,IAAI;QACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,cACE,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,QAAQ,mBACb,IAAI,CAAC,SAAS,EAC7B,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAClC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAEjC,sBAAgB,KAAK,EAAC,wBAAwB,eAAY,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAmB,EACxG,gBAAO,IAAI,CAAC,OAAO,CAAQ,EAC3B,YAAM,KAAK,EAAC,iBAAiB,UAAI,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,MAAM,kBAAqB,CAC9E,EACT,WAAK,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,SAAS,qBAAmB,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,IACvG,eAAa,CACT,CACE,EACV;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/read-more/read-more.scss?tag=admiralty-read-more&encapsulation=scoped","./src/components/read-more/read-more.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\r\n@use \"../../scss/vars/typography\";\r\n\r\nsection.expansion {\r\n  padding: 2px 0;\r\n\r\n  .expansion-content {\r\n    display: none;\r\n    max-height: 0;\r\n    overflow: visible;\r\n    border-left: 4px solid colours.$colour-utility-info;\r\n  }\r\n  &.expanded .expansion-content {\r\n    display: block;\r\n    max-height: initial;\r\n    padding: 2px 5px;\r\n  }\r\n\r\n  button {\r\n    background-color: transparent;\r\n    border: none;\r\n    white-space: unset;\r\n    color: initial;\r\n    cursor: pointer;\r\n    margin: 8px 0px;\r\n    padding: 4px;\r\n    align-items: baseline;\r\n    text-align: left;\r\n    text-decoration: underline;\r\n\r\n    &.expanded span {\r\n      font-weight: typography.$font-weight-medium;\r\n    }\r\n\r\n    .expansion-heading-icon {\r\n      margin-left: 5px;\r\n      margin-right: 8px;\r\n      vertical-align: top;\r\n    }\r\n\r\n\r\n    &:focus {\r\n      outline: none;\r\n      box-shadow: 0 0 0 3px colours.$colour-utility-focus;\r\n    }\r\n  }\r\n}\r\n","import { Component, EventEmitter, Prop, State, Event, h } from '@stencil/core';\r\nimport { faArrowDown, faArrowRight } from '@fortawesome/free-solid-svg-icons';\r\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core';\r\n\r\nlet nextId = 0;\r\n\r\n@Component({\r\n  tag: 'admiralty-read-more',\r\n  styleUrl: 'read-more.scss',\r\n  scoped: true,\r\n})\r\nexport class ReadMoreComponent {\r\n  /**\r\n   * The text to display in the heading of the readmore component.\r\n   */\r\n  @Prop() heading: string;\r\n\r\n  @State() expanded = false;\r\n\r\n  /**\r\n   * The event that is dispatched when the expanded status is toggled.\r\n   */\r\n  @Event() admiraltyToggled: EventEmitter<boolean>;\r\n\r\n  id: string = `admiralty-read-more-${++nextId}`;\r\n\r\n  headerId: string = `${this.id}-header`;\r\n  contentId: string = `${this.id}-content`;\r\n\r\n  get expansionIcon(): IconDefinition {\r\n    return this.expanded ?  faArrowDown : faArrowRight;\r\n  }\r\n\r\n  onToggle() {\r\n    this.expanded = !this.expanded;\r\n    this.admiraltyToggled.emit(this.expanded);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <section\r\n        class={{\r\n          expansion: true,\r\n          expanded: this.expanded,\r\n        }}\r\n      >\r\n        <button\r\n          id={this.headerId}\r\n          type=\"button\"\r\n          aria-expanded={this.expanded}\r\n          aria-controls={this.contentId}\r\n          class={{ expanded: this.expanded }}\r\n          onClick={this.onToggle.bind(this)}\r\n        >\r\n          <admiralty-icon class=\"expansion-heading-icon\" icon-name={this.expansionIcon.iconName}></admiralty-icon>\r\n          <span>{this.heading}</span>\r\n          <span class=\"visually-hidden\">, {this.expanded ? 'Hide' : 'Show'} this section</span>\r\n        </button>\r\n        <div class=\"expansion-content\" id={this.contentId} aria-labelledby={this.headerId} hidden={!this.expanded}>\r\n          <slot></slot>\r\n        </div>\r\n      </section>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/icon.js

@@ -16524,6 +16524,6 @@ function defineCustomElement() {
   } });
 }
 
-export { IconComponent as I, faExclamation as a, faCheck as b, faTriangleExclamation as c, defineCustomElement as d, faCircleInfo as e, faChevronRight as f, faChevronUp as g, faChevronDown as h, faTimes as i, faBars as j, faChevronLeft as k };
+export { IconComponent as I, faExclamation as a, faCheck as b, faTriangleExclamation as c, defineCustomElement as d, faCircleInfo as e, faChevronRight as f, faChevronUp as g, faChevronDown as h, faTimes as i, faBars as j, faChevronLeft as k, faArrowDown as l, faArrowRight as m };
 
 //# sourceMappingURL=icon.js.map