@ukho/admiralty-core 5.2.0-next.5 → 5.2.0-next.7

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

@@ -1 +1 @@
-{"file":"admiralty-button.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,s3iBAAs3iB,CAAC;AACz4iB,8BAAe,SAAS;;MCOX,eAAe;;;uBAMO,SAAS;;wBAQN,KAAK;0BAMpB,KAAK;oBAIoB,QAAQ;;;;;IAgBtD,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;QAE7D,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QACnC,MAAM,KAAK,kDACL,IAAI,IAAI,EAAE,IAAI,EAAE,KAChB,IAAI,IAAI,EAAE,IAAI,EAAE,KAChB,KAAK,IAAI,EAAE,KAAK,EAAE,EACvB,CAAC;QAEF,QACE,6EAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,IAAM,KAAK,GACvH,8DAAa,EACZ,IAAI,CAAC,IAAI,GAAG,sBAAgB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,cAAc,GAAG,cAAc,GAAG,EAAE,EAAE,GAAmB,GAAG,SAAS,CACtH,EACT;KACH;;;;;;;","names":[],"sources":["src/components/button/button.scss?tag=admiralty-button&encapsulation=scoped","src/components/button/button.tsx"],"sourcesContent":["@import 'button.vars';\n\n@mixin button-defaults {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  font-size: $button-font-size;\n  line-height: $button-line-height;\n  font-weight: $button-font-weight;\n  background-color: unset;\n  cursor: pointer;\n\n  &:focus {\n    outline: none;\n    color: $button-focus-text-colour;\n    background-color: $button-focus-colour;\n    border: none;\n    border-bottom: 4px solid $button-focus-text-colour;\n    padding: $button-focus-padding;\n\n    ::slotted(*) {\n      color: $button-focus-text-colour !important;\n    }\n  }\n\n  &:disabled {\n    cursor: default;\n    * {\n      pointer-events: none;\n    }\n  }\n\n  i {\n    display: inline-block;\n    font-size: $button-font-size;\n    color: $button-icon-colour;\n    padding: $button-defaults-idiomatic-padding;\n  }\n}\n\n@mixin button {\n  @include button-defaults;\n  height: 44px;\n  padding: $button-defaults-padding;\n  white-space: nowrap;\n  min-width: 50px;\n\n  @include not-desktop {\n    min-width: unset;\n    max-width: 200px;\n    width: 100%;\n    height: 44px;\n    padding: $button-not-desktop-padding;\n  }\n\n  i {\n    display: inline-block;\n    font-size: $button-idiomatic-font-size;\n    color: $button-icon-colour;\n    padding-left: $button-idiomatic-padding-left;\n  }\n}\n\n/* Primary Buttons */\nbutton.primary {\n  @include button;\n  background-color: $button-colour-standard;\n  color: $button-text-colour-standard;\n  border: 2px solid $button-border-colour-standard;\n\n  &:hover {\n    background-color: $button-hover-colour-standard;\n    border: 2px solid $button-hover-colour-standard;\n    color: $button-hover-text-colour-standard;\n    border-color: $button-hover-border-colour-standard;\n    padding: $button-primary-hover-padding;\n  }\n\n  &:hover:focus {\n    padding: $button-primary-hover-focus-padding;\n  }\n\n  &:hover:focus:active {\n    padding: $button-primary-hover-focus-active-padding;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-standard;\n    border: 2px solid $button-active-border-colour-standard;\n    color: $button-active-text-colour-standard;\n\n    i {\n      color: $button-active-text-colour-standard;\n    }\n\n    p {\n      color: $button-active-text-colour-standard;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-border-colour-deselected;\n  }\n}\n\n/* Secondary Buttons */\nbutton.secondary {\n  @include button;\n  background-color: $button-colour-secondary;\n  color: $button-text-colour-secondary;\n  border: 2px solid $button-border-colour-secondary;\n\n  &:hover {\n    background-color: $button-hover-colour-secondary;\n    color: $button-hover-text-colour-secondary;\n    border: 2px solid $button-hover-border-colour-secondary;\n    padding: $button-secondary-hover-padding;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-secondary;\n    border: 2px solid $button-active-border-colour-secondary;\n    color: $button-active-text-colour-secondary;\n\n    i {\n      color: $button-active-text-colour-secondary;\n    }\n\n    p {\n      color: $button-active-text-colour-secondary;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-border-colour-deselected;\n  }\n\n  i {\n    color: $button-text-colour-secondary;\n  }\n}\n\n/* Warning Buttons */\nbutton.warning {\n  @include button;\n  background-color: $button-colour-warning;\n  color: $button-text-colour-warning;\n  border: 2px solid $button-border-colour-warning;\n\n  &:hover {\n    background-color: $button-hover-colour-warning;\n    color: $button-text-colour-warning;\n    border: 2px solid $button-hover-border-colour-warning;\n    padding: $button-warning-hover-padding;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-warning;\n    border: 2px solid $button-active-border-colour-warning;\n    color: $button-active-text-colour-warning;\n\n    i {\n      color: $button-active-text-colour-warning;\n    }\n\n    p {\n      color: $button-active-text-colour-warning;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-border-colour-deselected;\n    & > * {\n      opacity: 0.5;\n    }\n  }\n\n  i {\n    color: $button-text-colour-warning;\n  }\n}\n\n/* Text Buttons */\nbutton.text {\n  @include button-defaults;\n  color: $button-text-colour-secondary;\n\n  &:enabled:active {\n    color: $button-text-colour-secondary;\n\n    i {\n      color: $button-text-colour-secondary;\n    }\n\n    p {\n      color: $button-text-colour-secondary;\n    }\n  }\n\n  &:disabled {\n    color: $button-colour-deselected;\n    & > * {\n      opacity: 0.5;\n    }\n  }\n\n  &:focus {\n    border: none;\n    box-shadow:\n      0 -2px $button-focus-colour,\n      0 4px $button-focus-text-colour;\n    text-decoration: none;\n    padding: $button-text-focus-padding;\n    ::slotted(*) {\n      color: $button-focus-text-colour !important;\n    }\n  }\n\n  i {\n    color: $button-text-colour-secondary;\n  }\n}\n\n/* Icon Buttons */\nbutton.icon {\n  @include button-defaults;\n  min-height: 44px;\n  min-width: 50px;\n\n  background-color: $button-colour-icon;\n  color: $button-text-colour-icon;\n  border: 2px solid $button-border-colour-icon;\n  padding: $button-icon-padding;\n\n  &:focus {\n    padding: $button-icon-focus-padding;\n  }\n\n  &:hover {\n    background-color: $button-hover-colour-icon;\n    border: 2px solid $button-hover-border-colour-icon;\n    padding: $button-icon-hover-padding;\n  }\n\n  admiralty-icon {\n    &.icon-padding {\n      padding-left: 8px;\n    }\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-icon;\n    color: $button-active-text-colour-icon;\n    border: 2px solid $button-active-border-colour-icon;\n\n    admiralty-icon {\n      color: $button-active-text-colour-icon !important;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-disabled-colour-icon;\n    border: 2px solid $button-disabled-colour-icon;\n    opacity: 0.3;\n  }\n\n  &.borderless {\n    border: none;\n    background-color: yellow;\n  }\n\n  &:active:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-disabled-colour-icon;\n    opacity: 0.3;\n  }\n\n  i {\n    margin: auto;\n    font-size: unset;\n    color: unset;\n    padding-left: unset;\n  }\n}\nbutton.icon-secondary {\n  @include button-defaults;\n  min-height: 44px;\n  min-width: 50px;\n\n  background-color: $button-colour-icon-secondary;\n  color: $button-text-colour-icon-secondary;\n  border: 2px solid $button-border-colour-icon-secondary;\n  padding: 9px;\n\n  &:focus {\n    padding: 11px 11px 8px;\n  }\n\n  &:hover {\n    background-color: $button-hover-colour-icon-secondary;\n    border: 2px solid $button-hover-border-colour-icon-secondary;\n    padding: 9px;\n  }\n\n  admiralty-icon {\n    &.icon-padding {\n      padding-left: 8px;\n    }\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-icon-secondary;\n    color: $button-active-text-colour-icon-secondary;\n    border: 2px solid $button-active-border-colour-icon-secondary;\n    border: 2px solid transparent;\n\n    admiralty-icon {\n      color: $button-active-text-colour-icon-secondary !important;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-disabled-colour-icon;\n    border: 2px solid $button-active-border-colour-icon;\n    opacity: 0.3;\n  }\n\n  &.borderless {\n    border: none;\n  }\n\n  &:active:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-active-border-colour-icon;\n    opacity: 0.3;\n  }\n\n  i {\n    margin: $button-icon-idiomatic-margin;\n    font-size: unset;\n    color: unset;\n    padding-left: $button-icon-idiomatic-padding;\n  }\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\nimport { ButtonVariant } from './button.types';\n\n@Component({\n  tag: 'admiralty-button',\n  styleUrl: 'button.scss',\n  scoped: true,\n})\nexport class ButtonComponent {\n  @Element() el: HTMLElement;\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 = 'primary';\n  /**\n   * When passed Material Icon name, then an icon will be rendered.\n   */\n  @Prop() icon: string;\n  /**\n   * Determines whether the button is disabled. A button in disabled state will not fire click output events.\n   */\n  @Prop({ reflect: true }) disabled = false;\n  /**\n   * The default behavior of the button. Valid values are `button`, `submit` and `reset`.\n   * Default value is `submit`.\n   */\n\n  @Prop() borderless = false;\n  /**\n   * Default value is false\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'submit';\n  /**\n   * The `<form>` element to associate the button with (its form owner).\n   */\n  @Prop() form: string;\n  /**\n   * The name of the button, submitted as a pair with the button's value as part of the form data,\n   * when that button is used to submit the form.\n   */\n  @Prop() name: string;\n  /**\n   * Defines the value associated with the button's name when it's submitted with the form data.\n   * This value is passed to the server in params when the form is submitted using this button.\n   */\n  @Prop() value: string;\n\n  render() {\n    const hasTextContent = this.el.textContent.trim().length > 0;\n\n    const { form, name, value } = this;\n    const props = {\n      ...(form && { form }),\n      ...(name && { name }),\n      ...(value && { value }),\n    };\n\n    return (\n      <button type={this.type} disabled={this.disabled} class={{ [this.variant]: true, borderless: this.borderless }} {...props}>\n        <slot></slot>\n        {this.icon ? <admiralty-icon name={this.icon} class={`${hasTextContent ? 'icon-padding' : ''}`}></admiralty-icon> : undefined}\n      </button>\n    );\n  }\n}\n"],"version":3}
+{"file":"admiralty-button.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,k7iBAAk7iB,CAAC;AACr8iB,8BAAe,SAAS;;MCOX,eAAe;;;uBAMO,SAAS;;wBAQN,KAAK;0BAMpB,KAAK;oBAIoB,QAAQ;;;;;IAgBtD,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;QAE7D,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QACnC,MAAM,KAAK,kDACL,IAAI,IAAI,EAAE,IAAI,EAAE,KAChB,IAAI,IAAI,EAAE,IAAI,EAAE,KAChB,KAAK,IAAI,EAAE,KAAK,EAAE,EACvB,CAAC;QAEF,QACE,6EAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,IAAM,KAAK,GACvH,8DAAa,EACZ,IAAI,CAAC,IAAI,GAAG,sBAAgB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,cAAc,GAAG,cAAc,GAAG,EAAE,EAAE,GAAmB,GAAG,SAAS,CACtH,EACT;KACH;;;;;;;","names":[],"sources":["src/components/button/button.scss?tag=admiralty-button&encapsulation=scoped","src/components/button/button.tsx"],"sourcesContent":["@import 'button.vars';\n\n@mixin button-defaults {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  font-size: $button-font-size;\n  line-height: $button-line-height;\n  font-weight: $button-font-weight;\n  background-color: unset;\n  cursor: pointer;\n\n  &:focus {\n    outline: none;\n    color: $button-focus-text-colour;\n    background-color: $button-focus-colour;\n    border: none;\n    border-bottom: 4px solid $button-focus-text-colour;\n    padding: $button-focus-padding;\n\n    ::slotted(*) {\n      color: $button-focus-text-colour !important;\n    }\n  }\n\n  &:disabled {\n    cursor: default;\n    * {\n      pointer-events: none;\n    }\n  }\n\n  i {\n    display: inline-block;\n    font-size: $button-font-size;\n    color: $button-icon-colour;\n    padding: $button-defaults-idiomatic-padding;\n  }\n}\n\n@mixin button {\n  @include button-defaults;\n  height: 44px;\n  padding: $button-defaults-padding;\n  white-space: nowrap;\n  min-width: 50px;\n\n  @include not-desktop {\n    min-width: unset;\n    max-width: 200px;\n    width: 100%;\n    height: 44px;\n    padding: $button-not-desktop-padding;\n  }\n\n  i {\n    display: inline-block;\n    font-size: $button-idiomatic-font-size;\n    color: $button-icon-colour;\n    padding-left: $button-idiomatic-padding-left;\n  }\n}\n\n/* Primary Buttons */\nbutton.primary {\n  @include button;\n  background-color: $button-colour-standard;\n  color: $button-text-colour-standard;\n  border: 2px solid $button-border-colour-standard;\n\n  &:hover {\n    background-color: $button-hover-colour-standard;\n    border: 2px solid $button-hover-colour-standard;\n    color: $button-hover-text-colour-standard;\n    border-color: $button-hover-border-colour-standard;\n    padding: $button-primary-hover-padding;\n  }\n\n  &:hover:focus {\n    padding: $button-primary-hover-focus-padding;\n  }\n\n  &:hover:focus:active {\n    padding: $button-primary-hover-focus-active-padding;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-standard;\n    border: 2px solid $button-active-border-colour-standard;\n    color: $button-active-text-colour-standard;\n\n    i {\n      color: $button-active-text-colour-standard;\n    }\n\n    p {\n      color: $button-active-text-colour-standard;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-border-colour-deselected;\n  }\n}\n\n/* Secondary Buttons */\nbutton.secondary {\n  @include button;\n  background-color: $button-colour-secondary;\n  color: $button-text-colour-secondary;\n  border: 2px solid $button-border-colour-secondary;\n\n  &:hover {\n    background-color: $button-hover-colour-secondary;\n    color: $button-hover-text-colour-secondary;\n    border: 2px solid $button-hover-border-colour-secondary;\n    padding: $button-secondary-hover-padding;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-secondary;\n    border: 2px solid $button-active-border-colour-secondary;\n    color: $button-active-text-colour-secondary;\n\n    i {\n      color: $button-active-text-colour-secondary;\n    }\n\n    p {\n      color: $button-active-text-colour-secondary;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-border-colour-deselected;\n  }\n\n  i {\n    color: $button-text-colour-secondary;\n  }\n}\n\n/* Warning Buttons */\nbutton.warning {\n  @include button;\n  background-color: $button-colour-warning;\n  color: $button-text-colour-warning;\n  border: 2px solid $button-border-colour-warning;\n\n  &:hover {\n    background-color: $button-hover-colour-warning;\n    color: $button-text-colour-warning;\n    border: 2px solid $button-hover-border-colour-warning;\n    padding: $button-warning-hover-padding;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-warning;\n    border: 2px solid $button-active-border-colour-warning;\n    color: $button-active-text-colour-warning;\n\n    i {\n      color: $button-active-text-colour-warning;\n    }\n\n    p {\n      color: $button-active-text-colour-warning;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-border-colour-deselected;\n    & > * {\n      opacity: 0.5;\n    }\n  }\n\n  i {\n    color: $button-text-colour-warning;\n  }\n}\n\n/* Text Buttons */\nbutton.text {\n  @include button-defaults;\n  color: $button-text-colour-secondary;\n\n  &:enabled:active {\n    color: $button-text-colour-secondary;\n\n    i {\n      color: $button-text-colour-secondary;\n    }\n\n    p {\n      color: $button-text-colour-secondary;\n    }\n  }\n\n  &:disabled {\n    color: $button-colour-deselected;\n    & > * {\n      opacity: 0.5;\n    }\n  }\n\n  &:focus {\n    border: none;\n    box-shadow:\n      0 -2px $button-focus-colour,\n      0 4px $button-focus-text-colour;\n    text-decoration: none;\n    padding: $button-text-focus-padding;\n    ::slotted(*) {\n      color: $button-focus-text-colour !important;\n    }\n  }\n\n  i {\n    color: $button-text-colour-secondary;\n  }\n}\n\n/* Icon Buttons */\nbutton.icon {\n  @include button-defaults;\n  min-height: 44px;\n  min-width: 50px;\n\n  background-color: $button-colour-icon;\n  color: $button-text-colour-icon;\n  border: 2px solid $button-border-colour-icon;\n  padding: $button-icon-padding;\n\n  &:focus {\n    padding: $button-icon-focus-padding;\n  }\n\n  &:hover {\n    background-color: $button-hover-colour-icon;\n    border: 2px solid $button-hover-border-colour-icon;\n    padding: $button-icon-hover-padding;\n  }\n\n  admiralty-icon {\n    &.icon-padding {\n      padding-left: 8px;\n    }\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-icon;\n    color: $button-active-text-colour-icon;\n    border: 2px solid $button-active-border-colour-icon;\n\n    admiralty-icon {\n      color: $button-active-text-colour-icon !important;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-disabled-colour-icon;\n    border: 2px solid $button-disabled-colour-icon;\n    opacity: 0.3;\n  }\n\n  &.borderless {\n    border: none;\n    background-color: yellow;\n  }\n\n  &:active:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-disabled-colour-icon;\n    opacity: 0.3;\n  }\n\n  i {\n    margin: auto;\n    font-size: unset;\n    color: unset;\n    padding-left: unset;\n  }\n}\nbutton.icon-secondary {\n  @include button-defaults;\n  min-height: 44px;\n  min-width: 50px;\n\n  background-color: $button-colour-icon-secondary;\n  color: $button-text-colour-icon-secondary;\n  border: 2px solid $button-border-colour-icon-secondary;\n  padding: 9px;\n\n  &:focus {\n    padding: 11px 11px 8px;\n  }\n\n  &:hover {\n    background-color: $button-hover-colour-icon-secondary;\n    border: 2px solid $button-hover-border-colour-icon-secondary;\n    padding: 9px;\n  }\n\n  admiralty-icon {\n    &.icon-padding {\n      padding-left: 8px;\n    }\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-icon-secondary;\n    color: $button-active-text-colour-icon-secondary;\n    border: 2px solid $button-active-border-colour-icon-secondary;\n    border: 2px solid transparent;\n\n    admiralty-icon {\n      color: $button-active-text-colour-icon-secondary !important;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-disabled-colour-icon;\n    border: 2px solid $button-active-border-colour-icon;\n    opacity: 0.3;\n  }\n\n  &.borderless {\n    border: none;\n  }\n\n  &:active:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-active-border-colour-icon;\n    opacity: 0.3;\n  }\n\n  i {\n    margin: $button-icon-idiomatic-margin;\n    font-size: unset;\n    color: unset;\n    padding-left: $button-icon-idiomatic-padding;\n  }\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\nimport { ButtonVariant } from './button.types';\n\n@Component({\n  tag: 'admiralty-button',\n  styleUrl: 'button.scss',\n  scoped: true,\n})\nexport class ButtonComponent {\n  @Element() el: HTMLElement;\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 = 'primary';\n  /**\n   * When passed Material Icon name, then an icon will be rendered.\n   */\n  @Prop() icon: string;\n  /**\n   * Determines whether the button is disabled. A button in disabled state will not fire click output events.\n   */\n  @Prop({ reflect: true }) disabled = false;\n  /**\n   * The default behavior of the button. Valid values are `button`, `submit` and `reset`.\n   * Default value is `submit`.\n   */\n\n  @Prop() borderless = false;\n  /**\n   * Default value is false\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'submit';\n  /**\n   * The `<form>` element to associate the button with (its form owner).\n   */\n  @Prop() form: string;\n  /**\n   * The name of the button, submitted as a pair with the button's value as part of the form data,\n   * when that button is used to submit the form.\n   */\n  @Prop() name: string;\n  /**\n   * Defines the value associated with the button's name when it's submitted with the form data.\n   * This value is passed to the server in params when the form is submitted using this button.\n   */\n  @Prop() value: string;\n\n  render() {\n    const hasTextContent = this.el.textContent.trim().length > 0;\n\n    const { form, name, value } = this;\n    const props = {\n      ...(form && { form }),\n      ...(name && { name }),\n      ...(value && { value }),\n    };\n\n    return (\n      <button type={this.type} disabled={this.disabled} class={{ [this.variant]: true, borderless: this.borderless }} {...props}>\n        <slot></slot>\n        {this.icon ? <admiralty-icon name={this.icon} class={`${hasTextContent ? 'icon-padding' : ''}`}></admiralty-icon> : undefined}\n      </button>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h } from './index-60c25452.js';
 
-const cardCss = ".visually-hidden.sc-admiralty-card:not(:focus):not(:active){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}@media (max-width: 1023px){.desktop-only.sc-admiralty-card{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-card{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-card{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-card{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-card{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-card{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-card{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-card{display:none}}.visually-hidden.sc-admiralty-card:not(:focus):not(:active){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}@media (max-width: 1023px){.desktop-only.sc-admiralty-card{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-card{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-card{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-card{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-card{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-card{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-card{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-card{display:none}}.card.sc-admiralty-card{display:flex;flex-direction:column;border:1px solid var(--admiralty-card-border-colour, var(--admiralty-colour-light));background-color:var(--admiralty-card-background-colour, var(--admiralty-background-colour))}.card.sc-admiralty-card>h6.sc-admiralty-card{font-size:var(--admiralty-card-heading-font-size, var(--admiralty-font-size-0));height:60px;line-height:60px;border:1px solid var(--admiralty-card-heading-border-colour, var(--admiralty-colour-primary));color:var(--admiralty-card-heading-text-colour, var(--admiralty-colour-primary-contrast));background-color:var(--admiralty-card-heading-colour, var(--admiralty-colour-primary));margin:var(--admiralty-card-heading-margin, var(--admiralty-spacing-0));padding:var(--admiralty-card-heading-padding, var(--admiralty-spacing-0) var(--admiralty-spacing-7))}@media (max-width: 1023px){.card.sc-admiralty-card>h6.sc-admiralty-card{padding:var(--admiralty-card-heading-not-desktop-padding, var(--admiralty-spacing-0) var(--admiralty-spacing-4));height:48px;line-height:48px}}.card.sc-admiralty-card>div.sc-admiralty-card{border-top:none;flex-grow:1;padding:var(--admiralty-card-padding, 30px)}@media (max-width: 1023px){.card.sc-admiralty-card>div.sc-admiralty-card{padding:var(--admiralty-card-not-desktop-padding, var(--admiralty-spacing-6) 18px)}}";
+const cardCss = ".visually-hidden.sc-admiralty-card:not(:focus):not(:active){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}@media (max-width: 1023px){.desktop-only.sc-admiralty-card{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-card{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-card{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-card{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-card{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-card{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-card{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-card{display:none}}.visually-hidden.sc-admiralty-card:not(:focus):not(:active){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}@media (max-width: 1023px){.desktop-only.sc-admiralty-card{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-card{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-card{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-card{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-card{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-card{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-card{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-card{display:none}}.card.sc-admiralty-card{display:flex;flex-direction:column;border:1px solid var(--admiralty-card-border-colour, var(--admiralty-colour-light));background-color:var(--admiralty-card-background-colour)}.card.sc-admiralty-card>h6.sc-admiralty-card{font-size:var(--admiralty-card-heading-font-size, var(--admiralty-font-size-0));height:60px;line-height:60px;border:1px solid var(--admiralty-card-heading-border-colour);color:var(--admiralty-card-heading-text-colour, var(--admiralty-colour-primary-contrast));background-color:var(--admiralty-card-heading-colour);margin:var(--admiralty-card-heading-margin, var(--admiralty-spacing-0));padding:var(--admiralty-card-heading-padding, var(--admiralty-spacing-0) var(--admiralty-spacing-7))}@media (max-width: 1023px){.card.sc-admiralty-card>h6.sc-admiralty-card{padding:var(--admiralty-card-heading-not-desktop-padding, var(--admiralty-spacing-0) var(--admiralty-spacing-4));height:48px;line-height:48px}}.card.sc-admiralty-card>div.sc-admiralty-card{border-top:none;flex-grow:1;padding:var(--admiralty-card-padding, 30px)}@media (max-width: 1023px){.card.sc-admiralty-card>div.sc-admiralty-card{padding:var(--admiralty-card-not-desktop-padding, var(--admiralty-spacing-6) 18px)}}";
 const AdmiraltyCardStyle0 = cardCss;
 
 const CardComponent = class {

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

@@ -1 +1 @@
-{"file":"admiralty-card.entry.js","mappings":";;AAAA,MAAM,OAAO,GAAG,8vGAA8vG,CAAC;AAC/wG,4BAAe,OAAO;;MCMT,aAAa;;;;;IAMxB,MAAM;QACJ,QACE,gEAAS,KAAK,EAAC,MAAM,IAClB,IAAI,CAAC,OAAO,GAAG,cAAK,IAAI,CAAC,OAAO,CAAM,GAAG,IAAI,EAC9C,8DACE,8DAAa,CACT,CACE,EACV;KACH;;;;;;","names":[],"sources":["src/components/card/card.scss?tag=admiralty-card&encapsulation=scoped","src/components/card/card.tsx"],"sourcesContent":["@import 'card.vars';\n@import '../../styles/vars/globals';\n\n.card {\n  display: flex;\n  flex-direction: column;\n  border: 1px solid $card-border-colour;\n  background-color: $card-background-colour;\n\n  & > h6 {\n    font-size: $card-heading-font-size;\n    height: 60px;\n    line-height: 60px;\n    border: 1px solid $card-heading-border-colour;\n    color: $card-heading-text-colour;\n    background-color: $card-heading-colour;\n    margin: $card-heading-margin;\n    padding: $card-heading-padding;\n\n    @include not-desktop {\n      padding: $card-heading-not-desktop-padding;\n      height: 48px;\n      line-height: 48px;\n    }\n  }\n\n  & > div {\n    border-top: none;\n    flex-grow: 1;\n    padding: $card-padding;\n    @include not-desktop {\n      padding: $card-padding-not-desktop;\n    }\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-card',\n  styleUrl: 'card.scss',\n  scoped: true,\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}
+{"file":"admiralty-card.entry.js","mappings":";;AAAA,MAAM,OAAO,GAAG,wpGAAwpG,CAAC;AACzqG,4BAAe,OAAO;;MCMT,aAAa;;;;;IAMxB,MAAM;QACJ,QACE,gEAAS,KAAK,EAAC,MAAM,IAClB,IAAI,CAAC,OAAO,GAAG,cAAK,IAAI,CAAC,OAAO,CAAM,GAAG,IAAI,EAC9C,8DACE,8DAAa,CACT,CACE,EACV;KACH;;;;;;","names":[],"sources":["src/components/card/card.scss?tag=admiralty-card&encapsulation=scoped","src/components/card/card.tsx"],"sourcesContent":["@import 'card.vars';\n@import '../../styles/vars/globals';\n\n.card {\n  display: flex;\n  flex-direction: column;\n  border: 1px solid $card-border-colour;\n  background-color: $card-background-colour;\n\n  & > h6 {\n    font-size: $card-heading-font-size;\n    height: 60px;\n    line-height: 60px;\n    border: 1px solid $card-heading-border-colour;\n    color: $card-heading-text-colour;\n    background-color: $card-heading-colour;\n    margin: $card-heading-margin;\n    padding: $card-heading-padding;\n\n    @include not-desktop {\n      padding: $card-heading-not-desktop-padding;\n      height: 48px;\n      line-height: 48px;\n    }\n  }\n\n  & > div {\n    border-top: none;\n    flex-grow: 1;\n    padding: $card-padding;\n    @include not-desktop {\n      padding: $card-padding-not-desktop;\n    }\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-card',\n  styleUrl: 'card.scss',\n  scoped: true,\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/esm/admiralty-colour-block.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h } from './index-60c25452.js';
 
-const colourBlockCss = ".visually-hidden.sc-admiralty-colour-block:not(:focus):not(:active){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}@media (max-width: 1023px){.desktop-only.sc-admiralty-colour-block{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-colour-block{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-colour-block{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-colour-block{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-colour-block{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-colour-block{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-colour-block{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-colour-block{display:none}}.colourBlock.sc-admiralty-colour-block{height:100%;width:100%;max-width:100%;padding:var(--admiralty-colour-block-padding, 30px 18px);display:flex;flex-direction:column;box-sizing:border-box}.colourBlock.sc-admiralty-colour-block .content.sc-admiralty-colour-block{flex-grow:1}.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block{align-self:flex-end;cursor:pointer}.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block:focus *.sc-admiralty-colour-block{color:var(--admiralty-text-colour) !important}.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block span.sc-admiralty-colour-block{font-weight:var(--admiralty-colour-block-action-font-weight, var(--admiralty-font-weight-medium));font-size:var(--admiralty-colour-block-action-font-size, var(--admiralty-font-size-1));line-height:30px}@media (max-width: 1023px){.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block span.sc-admiralty-colour-block{font-size:var(--admiralty-colour-block-action-not-desktop-font-size, var(--admiralty-font-size-0));line-height:30px}}.colourBlock.admiralty-blue.sc-admiralty-colour-block{background-color:var(--admiralty-colour-primary)}.colourBlock.admiralty-blue.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--admiralty-colour-primary-contrast)}.colourBlock.teal.sc-admiralty-colour-block{background-color:var(--admiralty-colour-secondary)}.colourBlock.teal.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--admiralty-colour-secondary-contrast)}.colourBlock.bright-blue.sc-admiralty-colour-block{background-color:var(--admiralty-colour-tertiary);color:var(--admiralty-colour-primary)}.colourBlock.bright-blue.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--admiralty-colour-primary)}";
+const colourBlockCss = ".visually-hidden.sc-admiralty-colour-block:not(:focus):not(:active){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}@media (max-width: 1023px){.desktop-only.sc-admiralty-colour-block{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-colour-block{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-colour-block{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-colour-block{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-colour-block{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-colour-block{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-colour-block{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-colour-block{display:none}}.colourBlock.sc-admiralty-colour-block{height:100%;width:100%;max-width:100%;padding:var(--admiralty-colour-block-padding, 30px 18px);display:flex;flex-direction:column;box-sizing:border-box}.colourBlock.sc-admiralty-colour-block .content.sc-admiralty-colour-block{flex-grow:1}.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block{align-self:flex-end;cursor:pointer}.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block:focus *.sc-admiralty-colour-block{color:var(--admiralty-focus-contrast) !important}.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block span.sc-admiralty-colour-block{font-weight:var(--admiralty-colour-block-action-font-weight, var(--admiralty-font-weight-medium));font-size:var(--admiralty-colour-block-action-font-size, var(--admiralty-font-size-1));line-height:30px}@media (max-width: 1023px){.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block span.sc-admiralty-colour-block{font-size:var(--admiralty-colour-block-action-not-desktop-font-size, var(--admiralty-font-size-0));line-height:30px}}.colourBlock.admiralty-blue.sc-admiralty-colour-block{background-color:var(--colour-block-blue-background-colour)}.colourBlock.admiralty-blue.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--colour-block-blue-text-colour)}.colourBlock.teal.sc-admiralty-colour-block{background-color:var(--admiralty-colour-secondary)}.colourBlock.teal.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--admiralty-colour-secondary-contrast)}.colourBlock.bright-blue.sc-admiralty-colour-block{background-color:var(--admiralty-colour-tertiary)}.colourBlock.bright-blue.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--colour-block-bright-blue-text-colour)}.colourBlock.bright-blue.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--colour-block-bright-blue-text-colour)}";
 const AdmiraltyColourBlockStyle0 = colourBlockCss;
 
 const ColourBlockComponent = class {

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

@@ -1 +1 @@
-{"file":"admiralty-colour-block.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,i3FAAi3F,CAAC;AACz4F,mCAAe,cAAc;;MCMhB,oBAAoB;;;;;;;sBAgB6B,gBAAgB;;;gCAcxC,KAAK;+BAKN,KAAK;;;IAMxC,iBAAiB,CAAC,EAAc;QAC9B,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,EAAE,CAAC,cAAc,EAAE,CAAC;SACrB;QACD,EAAE,CAAC,eAAe,EAAE,CAAC;QACrB,IAAI,CAAC,sBAAsB,CAAC,IAAI,EAAE,CAAC;KACpC;IAQD,MAAM;QACJ,QACE,4DACE,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI;aACpB,EACD,KAAK,kBACH,MAAM,EAAE,IAAI,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,IAAI,GAAG,IAAI,EAC/C,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,IAAI,KACxC,IAAI,CAAC,eAAe,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAEnD,OAAO,EAAE,EAAE,KAAK,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,iBAAiB,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,IAEzE,6DAAK,IAAI,CAAC,OAAO,CAAM,EACvB,4DACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,YAAY,EAAE,IAAI,CAAC,MAAM,KAAK,gBAAgB,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM;aACzE,IAED,8DAAa,CACT,EACL,IAAI,CAAC,UAAU,IACd,wBAAkB,OAAO,EAAC,MAAM,EAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,iBAAiB,CAAC,EAAE,CAAC,IAC5F,gBAAO,IAAI,CAAC,UAAU,CAAQ,CACb,IACjB,IAAI,EACP,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,IACzB,SAAG,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,iBAAiB,CAAC,EAAE,CAAC,IAC/E,gBAAO,IAAI,CAAC,QAAQ,CAAQ,CAC1B,IACF,IAAI,CACJ,EACN;KACH;;;;;;","names":[],"sources":["src/components/colour-block/colour-block.scss?tag=admiralty-colour-block&encapsulation=scoped","src/components/colour-block/colour-block.tsx"],"sourcesContent":["@import 'colour-block.vars';\n\n.colourBlock {\n  height: 100%;\n  width: 100%;\n  max-width: 100%;\n  padding: $colour-block-padding;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n\n  .content {\n    flex-grow: 1;\n  }\n\n  .clickAction {\n    align-self: flex-end;\n    cursor: pointer;\n\n    &:focus * {\n      color: $colour-block-focus-text-colour !important;\n    }\n\n    span {\n      font-weight: $colour-block-action-font-weight;\n      font-size: $colour-block-action-text-size;\n      line-height: $colour-block-action-line-height;\n\n      @include not-desktop {\n        font-size: $colour-block-action-not-desktop-text-size;\n        line-height: 30px;\n      }\n    }\n  }\n\n  &.admiralty-blue {\n    background-color: $primary-colour-block-colour;\n    * {\n      color: $primary-colour-block-text-colour;\n    }\n  }\n\n  &.teal {\n    background-color: $secondary-colour-block-colour;\n    * {\n      color: $secondary-colour-block-text-colour;\n    }\n  }\n\n  &.bright-blue {\n    background-color: $tertiary-colour-block-colour;\n    color: $tertiary-colour-block-text-colour;\n    .clickAction * {\n      color: $tertiary-colour-block-text-colour;\n    }\n  }\n}\n","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-colour-block',\n  styleUrl: 'colour-block.scss',\n  scoped: true,\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 URL to link to.\n   */\n  @Prop() href: string;\n  /**\n   * The link text.\n   */\n  @Prop() linkText: string;\n  /**\n   * Causes the default browser redirect to be suppressed. Can be used in conjunction with the\n   * `colourBlockLinkClicked` event to use a navigation router and prevent a full page reload\n   * when navigating.\n   */\n  @Prop() suppressRedirect: boolean = false;\n  /**\n   * Allow the card to be clicked. Will emit a `colourBlockLinkClicked` event. A value for `href`\n   * should also be provided to ensure the component conforms to accessibility standards.\n   */\n  @Prop() enableCardEvent: boolean = false;\n  /**\n   * An event emitted when this Colour Block link is clicked\n   */\n  @Event() colourBlockLinkClicked: EventEmitter<string>;\n\n  handleClickAction(ev: MouseEvent) {\n    if (this.suppressRedirect) {\n      ev.preventDefault();\n    }\n    ev.stopPropagation();\n    this.colourBlockLinkClicked.emit();\n  }\n\n  /**\n   * The text to display on the action button\n   * @deprecated in favour of `href` and `linkText`\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          ...(this.enableCardEvent && { cursor: 'pointer' }),\n        }}\n        onClick={ev => (this.enableCardEvent ? this.handleClickAction(ev) : null)}\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.actionText ? (\n          <admiralty-button variant=\"text\" class=\"clickAction\" onClick={ev => this.handleClickAction(ev)}>\n            <span>{this.actionText}</span>\n          </admiralty-button>\n        ) : null}\n        {this.linkText && this.href ? (\n          <a class=\"clickAction\" href={this.href} onClick={ev => this.handleClickAction(ev)}>\n            <span>{this.linkText}</span>\n          </a>\n        ) : null}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"admiralty-colour-block.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,k+FAAk+F,CAAC;AAC1/F,mCAAe,cAAc;;MCMhB,oBAAoB;;;;;;;sBAgB6B,gBAAgB;;;gCAcxC,KAAK;+BAKN,KAAK;;;IAMxC,iBAAiB,CAAC,EAAc;QAC9B,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,EAAE,CAAC,cAAc,EAAE,CAAC;SACrB;QACD,EAAE,CAAC,eAAe,EAAE,CAAC;QACrB,IAAI,CAAC,sBAAsB,CAAC,IAAI,EAAE,CAAC;KACpC;IAQD,MAAM;QACJ,QACE,4DACE,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI;aACpB,EACD,KAAK,kBACH,MAAM,EAAE,IAAI,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,IAAI,GAAG,IAAI,EAC/C,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,IAAI,KACxC,IAAI,CAAC,eAAe,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAEnD,OAAO,EAAE,EAAE,KAAK,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,iBAAiB,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,IAEzE,6DAAK,IAAI,CAAC,OAAO,CAAM,EACvB,4DACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,YAAY,EAAE,IAAI,CAAC,MAAM,KAAK,gBAAgB,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM;aACzE,IAED,8DAAa,CACT,EACL,IAAI,CAAC,UAAU,IACd,wBAAkB,OAAO,EAAC,MAAM,EAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,iBAAiB,CAAC,EAAE,CAAC,IAC5F,gBAAO,IAAI,CAAC,UAAU,CAAQ,CACb,IACjB,IAAI,EACP,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,IACzB,SAAG,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,iBAAiB,CAAC,EAAE,CAAC,IAC/E,gBAAO,IAAI,CAAC,QAAQ,CAAQ,CAC1B,IACF,IAAI,CACJ,EACN;KACH;;;;;;","names":[],"sources":["src/components/colour-block/colour-block.scss?tag=admiralty-colour-block&encapsulation=scoped","src/components/colour-block/colour-block.tsx"],"sourcesContent":["@import 'colour-block.vars';\n\n.colourBlock {\n  height: 100%;\n  width: 100%;\n  max-width: 100%;\n  padding: $colour-block-padding;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n\n  .content {\n    flex-grow: 1;\n  }\n\n  .clickAction {\n    align-self: flex-end;\n    cursor: pointer;\n\n    &:focus * {\n      color: $colour-block-focus-text-colour !important;\n    }\n\n    span {\n      font-weight: $colour-block-action-font-weight;\n      font-size: $colour-block-action-text-size;\n      line-height: $colour-block-action-line-height;\n\n      @include not-desktop {\n        font-size: $colour-block-action-not-desktop-text-size;\n        line-height: 30px;\n      }\n    }\n  }\n\n  &.admiralty-blue {\n    background-color: $primary-colour-block-colour;\n    * {\n      color: $primary-colour-block-text-colour;\n    }\n  }\n\n  &.teal {\n    background-color: $secondary-colour-block-colour;\n    * {\n      color: $secondary-colour-block-text-colour;\n    }\n  }\n\n  &.bright-blue {\n    background-color: $tertiary-colour-block-colour;\n    * {\n      color: $tertiary-colour-block-text-colour;\n    }\n    .clickAction * {\n      color: $tertiary-colour-block-text-colour;\n    }\n  }\n}\n","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-colour-block',\n  styleUrl: 'colour-block.scss',\n  scoped: true,\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 URL to link to.\n   */\n  @Prop() href: string;\n  /**\n   * The link text.\n   */\n  @Prop() linkText: string;\n  /**\n   * Causes the default browser redirect to be suppressed. Can be used in conjunction with the\n   * `colourBlockLinkClicked` event to use a navigation router and prevent a full page reload\n   * when navigating.\n   */\n  @Prop() suppressRedirect: boolean = false;\n  /**\n   * Allow the card to be clicked. Will emit a `colourBlockLinkClicked` event. A value for `href`\n   * should also be provided to ensure the component conforms to accessibility standards.\n   */\n  @Prop() enableCardEvent: boolean = false;\n  /**\n   * An event emitted when this Colour Block link is clicked\n   */\n  @Event() colourBlockLinkClicked: EventEmitter<string>;\n\n  handleClickAction(ev: MouseEvent) {\n    if (this.suppressRedirect) {\n      ev.preventDefault();\n    }\n    ev.stopPropagation();\n    this.colourBlockLinkClicked.emit();\n  }\n\n  /**\n   * The text to display on the action button\n   * @deprecated in favour of `href` and `linkText`\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          ...(this.enableCardEvent && { cursor: 'pointer' }),\n        }}\n        onClick={ev => (this.enableCardEvent ? this.handleClickAction(ev) : null)}\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.actionText ? (\n          <admiralty-button variant=\"text\" class=\"clickAction\" onClick={ev => this.handleClickAction(ev)}>\n            <span>{this.actionText}</span>\n          </admiralty-button>\n        ) : null}\n        {this.linkText && this.href ? (\n          <a class=\"clickAction\" href={this.href} onClick={ev => this.handleClickAction(ev)}>\n            <span>{this.linkText}</span>\n          </a>\n        ) : null}\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h } from './index-60c25452.js';
 
-const expansionCss = ".visually-hidden.sc-admiralty-expansion:not(:focus):not(:active){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}@media (max-width: 1023px){.desktop-only.sc-admiralty-expansion{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-expansion{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-expansion{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-expansion{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-expansion{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-expansion{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-expansion{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-expansion{display:none}}section.expansion.sc-admiralty-expansion{padding:var(--admiralty-expansion-padding, 2px 0);border-bottom:1px solid transparent}section.expansion.bordered.sc-admiralty-expansion{border-bottom:1px solid var(--admiralty-colour-light)}section.expansion.sc-admiralty-expansion .expansion-content.sc-admiralty-expansion{display:none;max-height:0;overflow:visible}section.expansion.expanded.sc-admiralty-expansion .expansion-content.sc-admiralty-expansion{display:block;max-height:initial;padding-bottom:var(--admiralty-expansion-content-padding-bottom, var(--admiralty-spacing-3))}section.expansion.sc-admiralty-expansion button.sc-admiralty-expansion{background-color:transparent;border:none;height:initial;min-width:unset;max-width:unset;white-space:unset;cursor:pointer;margin:var(--admiralty-expansion-button-margin, 10px var(--admiralty-spacing-0) 22px);padding:var(--admiralty-expansion-button-padding, var(--admiralty-spacing-0));display:flex;align-items:center;width:100%;text-align:left;position:relative}section.expansion.sc-admiralty-expansion button.sc-admiralty-expansion .expansion-heading-icon.sc-admiralty-expansion{color:var(--admiralty-colour-primary);font-size:var(--admiralty-font-size-5);margin-left:var(--admiralty-expansion-button-icon-margin-left, 30px)}section.expansion.sc-admiralty-expansion button.sc-admiralty-expansion:focus{outline:none}section.expansion.sc-admiralty-expansion button.sc-admiralty-expansion h3.sc-admiralty-expansion{flex-grow:1;margin-bottom:var(--admiralty-expansion-button-heading-margin-bottom, var(--admiralty-spacing-0));font-size:var(--admiralty-expansion-title-font-size, var(--admiralty-font-size-1));font-weight:var(--admiralty-expansion-title-font-weight, var(--admiralty-font-weight-medium))}section.expansion.sc-admiralty-expansion button.sc-admiralty-expansion h3.expansion-heading-right-align.sc-admiralty-expansion{text-align:right}section.expansion.sc-admiralty-expansion button.sc-admiralty-expansion:focus{outline:3px solid transparent;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);box-shadow:0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-text-colour);text-decoration:none}";
+const expansionCss = ".visually-hidden.sc-admiralty-expansion:not(:focus):not(:active){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}@media (max-width: 1023px){.desktop-only.sc-admiralty-expansion{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-expansion{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-expansion{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-expansion{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-expansion{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-expansion{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-expansion{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-expansion{display:none}}section.expansion.sc-admiralty-expansion{padding:var(--admiralty-expansion-padding, 2px 0);border-bottom:1px solid transparent}section.expansion.bordered.sc-admiralty-expansion{border-bottom:1px solid var(--admiralty-colour-light)}section.expansion.sc-admiralty-expansion .expansion-content.sc-admiralty-expansion{display:none;max-height:0;overflow:visible}section.expansion.expanded.sc-admiralty-expansion .expansion-content.sc-admiralty-expansion{display:block;max-height:initial;padding-bottom:var(--admiralty-expansion-content-padding-bottom, var(--admiralty-spacing-3))}section.expansion.sc-admiralty-expansion button.sc-admiralty-expansion{background-color:transparent;border:none;height:initial;min-width:unset;max-width:unset;white-space:unset;cursor:pointer;margin:var(--admiralty-expansion-button-margin, 10px var(--admiralty-spacing-0) 22px);padding:var(--admiralty-expansion-button-padding, var(--admiralty-spacing-0));display:flex;align-items:center;width:100%;text-align:left;position:relative}section.expansion.sc-admiralty-expansion button.sc-admiralty-expansion .expansion-heading-icon.sc-admiralty-expansion{color:var(--admiralty-colour-primary);font-size:var(--admiralty-font-size-5);margin-left:var(--admiralty-expansion-button-icon-margin-left, 30px)}section.expansion.sc-admiralty-expansion button.sc-admiralty-expansion:focus{outline:none}section.expansion.sc-admiralty-expansion button.sc-admiralty-expansion h3.sc-admiralty-expansion{flex-grow:1;margin-bottom:var(--admiralty-expansion-button-heading-margin-bottom, var(--admiralty-spacing-0));font-size:var(--admiralty-expansion-title-font-size, var(--admiralty-font-size-1));font-weight:var(--admiralty-expansion-title-font-weight, var(--admiralty-font-weight-medium))}section.expansion.sc-admiralty-expansion button.sc-admiralty-expansion h3.expansion-heading-right-align.sc-admiralty-expansion{text-align:right}section.expansion.sc-admiralty-expansion button.sc-admiralty-expansion:focus{outline:3px solid transparent;color:var(--admiralty-focus-contrast);background-color:var(--admiralty-focus-colour);box-shadow:0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-focus-contrast);text-decoration:none}section.expansion.sc-admiralty-expansion button.sc-admiralty-expansion:focus h3.sc-admiralty-expansion{color:black}";
 const AdmiraltyExpansionStyle0 = expansionCss;
 
 let nextId = 0;

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

@@ -1 +1 @@
-{"file":"admiralty-expansion.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,+pGAA+pG,CAAC;AACrrG,iCAAe,YAAY;;ACC3B,IAAI,MAAM,GAAG,CAAC,CAAC;MAOF,kBAAkB;;;;QA0B7B,eAAU,GAAW,uBAAuB,EAAE,MAAM,EAAE,CAAC;QAEvD,aAAQ,GAAW,GAAG,IAAI,CAAC,UAAU,SAAS,CAAC;QAC/C,cAAS,GAAW,GAAG,IAAI,CAAC,UAAU,UAAU,CAAC;;wBApBE,KAAK;iCAK5B,KAAK;0BAKZ,KAAK;;IAY1B,QAAQ;QACN,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAClC;IAED,gBAAgB;QACd,OAAO,IAAI,CAAC,QAAQ,GAAG,2BAA2B,GAAG,6BAA6B,CAAC;KACpF;IAED,MAAM;QACJ,QACE,gEACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,CAAC,IAAI,CAAC,UAAU;aAC3B,IAED,+DAAQ,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,IACtK,2DAAI,KAAK,EAAE,EAAE,+BAA+B,EAAE,IAAI,CAAC,iBAAiB,EAAE,IAAG,IAAI,CAAC,OAAO,CAAM,EAC3F,6DAAM,KAAK,EAAC,iBAAiB,UAAI,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,MAAM,kBAAqB,EACrF,uEAAgB,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAmB,CACxF,EACT,4DAAK,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,SAAS,qBAAmB,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,IACvG,8DAAa,CACT,CACE,EACV;KACH;;;;;;","names":[],"sources":["src/components/expansion/expansion.scss?tag=admiralty-expansion&encapsulation=scoped","src/components/expansion/expansion.tsx"],"sourcesContent":["@import 'expansion.vars';\n\nsection.expansion {\n  padding: $expansion-padding;\n  border-bottom: 1px solid transparent;\n  &.bordered {\n    border-bottom: 1px solid $expansion-border-colour;\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: $expansion-content-padding-bottom;\n  }\n\n  button {\n    background-color: transparent;\n    border: none;\n    height: initial;\n    min-width: unset;\n    max-width: unset;\n    white-space: unset;\n    cursor: pointer;\n    margin: $expansion-button-margin;\n    padding: $expansion-button-padding;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    text-align: left;\n    position: relative;\n\n    .expansion-heading-icon {\n      color: $expansion-header-icon-colour;\n      font-size: $expansion-header-icon-size;\n      margin-left: $expansion-button-icon-margin-left;\n    }\n    &:focus {\n      outline: none;\n    }\n    h3 {\n      flex-grow: 1;\n      margin-bottom: $expansion-button-heading-margin-bottom;\n      font-size: $expansion-title-text-size;\n      font-weight: $expansion-title-text-weight;\n\n      &.expansion-heading-right-align {\n        text-align: right;\n      }\n    }\n\n    &:focus {\n      @include focus-highlight;\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\n\nlet nextId = 0;\n\n@Component({\n  tag: 'admiralty-expansion',\n  styleUrl: 'expansion.scss',\n  scoped: true,\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  internalId: string = `admiralty-expansion-${++nextId}`;\n\n  headerId: string = `${this.internalId}-header`;\n  contentId: string = `${this.internalId}-content`;\n\n  onToggle() {\n    this.expanded = !this.expanded;\n    this.toggled.emit(this.expanded);\n  }\n\n  getExpansionIcon(): string {\n    return this.expanded ? 'keyboard-arrow-up-rounded' : 'keyboard-arrow-down-rounded';\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\" name={this.getExpansionIcon()}></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}
+{"file":"admiralty-expansion.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,wxGAAwxG,CAAC;AAC9yG,iCAAe,YAAY;;ACC3B,IAAI,MAAM,GAAG,CAAC,CAAC;MAOF,kBAAkB;;;;QA0B7B,eAAU,GAAW,uBAAuB,EAAE,MAAM,EAAE,CAAC;QAEvD,aAAQ,GAAW,GAAG,IAAI,CAAC,UAAU,SAAS,CAAC;QAC/C,cAAS,GAAW,GAAG,IAAI,CAAC,UAAU,UAAU,CAAC;;wBApBE,KAAK;iCAK5B,KAAK;0BAKZ,KAAK;;IAY1B,QAAQ;QACN,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAClC;IAED,gBAAgB;QACd,OAAO,IAAI,CAAC,QAAQ,GAAG,2BAA2B,GAAG,6BAA6B,CAAC;KACpF;IAED,MAAM;QACJ,QACE,gEACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,CAAC,IAAI,CAAC,UAAU;aAC3B,IAED,+DAAQ,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,IACtK,2DAAI,KAAK,EAAE,EAAE,+BAA+B,EAAE,IAAI,CAAC,iBAAiB,EAAE,IAAG,IAAI,CAAC,OAAO,CAAM,EAC3F,6DAAM,KAAK,EAAC,iBAAiB,UAAI,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,MAAM,kBAAqB,EACrF,uEAAgB,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAmB,CACxF,EACT,4DAAK,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,SAAS,qBAAmB,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,IACvG,8DAAa,CACT,CACE,EACV;KACH;;;;;;","names":[],"sources":["src/components/expansion/expansion.scss?tag=admiralty-expansion&encapsulation=scoped","src/components/expansion/expansion.tsx"],"sourcesContent":["@import 'expansion.vars';\n\nsection.expansion {\n  padding: $expansion-padding;\n  border-bottom: 1px solid transparent;\n  &.bordered {\n    border-bottom: 1px solid $expansion-border-colour;\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: $expansion-content-padding-bottom;\n  }\n\n  button {\n    background-color: transparent;\n    border: none;\n    height: initial;\n    min-width: unset;\n    max-width: unset;\n    white-space: unset;\n    cursor: pointer;\n    margin: $expansion-button-margin;\n    padding: $expansion-button-padding;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    text-align: left;\n    position: relative;\n\n    .expansion-heading-icon {\n      color: $expansion-header-icon-colour;\n      font-size: $expansion-header-icon-size;\n      margin-left: $expansion-button-icon-margin-left;\n    }\n    &:focus {\n      outline: none;\n    }\n    h3 {\n      flex-grow: 1;\n      margin-bottom: $expansion-button-heading-margin-bottom;\n      font-size: $expansion-title-text-size;\n      font-weight: $expansion-title-text-weight;\n\n      &.expansion-heading-right-align {\n        text-align: right;\n      }\n    }\n\n    &:focus {\n      @include focus-highlight;\n    }\n\n    &:focus h3 {\n      color: black;\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\n\nlet nextId = 0;\n\n@Component({\n  tag: 'admiralty-expansion',\n  styleUrl: 'expansion.scss',\n  scoped: true,\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  internalId: string = `admiralty-expansion-${++nextId}`;\n\n  headerId: string = `${this.internalId}-header`;\n  contentId: string = `${this.internalId}-content`;\n\n  onToggle() {\n    this.expanded = !this.expanded;\n    this.toggled.emit(this.expanded);\n  }\n\n  getExpansionIcon(): string {\n    return this.expanded ? 'keyboard-arrow-up-rounded' : 'keyboard-arrow-down-rounded';\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\" name={this.getExpansionIcon()}></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/esm/admiralty-footer.entry.js

@@ -5,7 +5,7 @@ const FooterType = {
     Compact: 'compact'
 };
 
-const footerCss = ".visually-hidden.sc-admiralty-footer:not(:focus):not(:active){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}@media (max-width: 1023px){.desktop-only.sc-admiralty-footer{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-footer{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-footer{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-footer{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-footer{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-footer{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-footer{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-footer{display:none}}footer.sc-admiralty-footer{padding:var(--admiralty-footer-padding, 1.25rem 1rem 1.5rem 1rem);border-top:var(--admiralty-colour-primary) 0.375rem solid;background:var(--admiralty-background-colour-tint);display:flex;flex-direction:column}@media (min-width: 481px){footer.sc-admiralty-footer{flex-direction:row;padding:var(--admiralty-footer-desktop-padding, 1.75rem 1.5rem 1.875rem 1rem);gap:1rem}}footer.sc-admiralty-footer .footer-branding.sc-admiralty-footer .footer-img.sc-admiralty-footer{height:var(--admiralty-footer-img-height, 86px);margin-bottom:var(--admiralty-footer-branding-image-margin-bottom, 1rem);box-sizing:border-box}@media (min-width: 481px){footer.sc-admiralty-footer .footer-branding.sc-admiralty-footer .footer-img.sc-admiralty-footer{height:var(--admiralty-footer-img-desktop-height, 100px);margin-bottom:var(--admiralty-footer-branding-image-desktop-margin-bottom, var(--admiralty-spacing-0))}}footer.sc-admiralty-footer .footer-branding.sc-admiralty-footer .footer-img.sc-admiralty-footer a.sc-admiralty-footer{display:block;height:100%;width:min-content}footer.sc-admiralty-footer .footer-branding.sc-admiralty-footer .footer-img.sc-admiralty-footer img.sc-admiralty-footer{height:100%}@media (min-width: 481px){footer.sc-admiralty-footer .footer-content.sc-admiralty-footer{display:flex;flex-grow:1;flex-direction:column}}footer.sc-admiralty-footer .footer-content.sc-admiralty-footer .footer-links.sc-admiralty-footer{display:flex;flex-direction:column;align-self:flex-start;margin-left:var(--admiralty-footer-content-links-margin-left, 0.125rem);gap:0.5rem;flex-grow:1}@media (min-width: 481px){footer.sc-admiralty-footer .footer-content.sc-admiralty-footer .footer-links.sc-admiralty-footer{flex-direction:row;align-self:flex-end;margin-left:var(--admiralty-footer-content-links-desktop-margin-left, var(--admiralty-spacing-0));gap:1.5rem}}footer .footer-content .footer-links.sc-admiralty-footer-s>admiralty-link a,footer .footer-content .footer-links .sc-admiralty-footer-s>admiralty-link a{font-weight:var(--admiralty-footer-links-font-weight, var(--admiralty-font-weight-medium))}footer.sc-admiralty-footer .footer-content.sc-admiralty-footer .footer-text.sc-admiralty-footer{align-self:flex-start;margin-left:var(--admiralty-footer-content-text-margin-left, 0.125rem);margin-top:var(--admiralty-footer-content-text-margin-top, 1rem)}@media (min-width: 481px){footer.sc-admiralty-footer .footer-content.sc-admiralty-footer .footer-text.sc-admiralty-footer{align-self:flex-end;margin-left:var(--admiralty-footer-content-text-desktop-margin-left, var(--admiralty-spacing-0))}}footer.sc-admiralty-footer .footer-content.sc-admiralty-footer .footer-text.sc-admiralty-footer p.sc-admiralty-footer{margin:var(--admiralty-footer-content-text-paragraph-margin, var(--admiralty-spacing-0));font-weight:var(--admiralty-footer-text-weight, var(--admiralty-font-weight-normal));color:var(--admiralty-text-colour)}@media (min-width: 481px){footer.sc-admiralty-footer .footer-content.sc-admiralty-footer .footer-text.sc-admiralty-footer p.sc-admiralty-footer{text-align:right}}footer.footer-compact.sc-admiralty-footer{display:inline-flex;width:auto;justify-content:center;align-items:center;flex-wrap:wrap;padding:var(--admiralty-footer-compact-padding, 0.5rem 0.5rem);gap:0.5rem;opacity:0.7;background-color:var(--admiralty-footer-compact-background-colour, var(--admiralty-background-colour));border-radius:0.625rem 0 0 0;border-bottom:3px solid var(--admiralty-colour-primary);border-top:none}footer.footer-compact.sc-admiralty-footer .footer-content.sc-admiralty-footer{display:flex;flex-direction:row-reverse;flex-wrap:wrap}@media (max-width: 479px) and (min-width: 0px){footer.footer-compact.sc-admiralty-footer .footer-content.sc-admiralty-footer{justify-content:center;flex-direction:column-reverse}}@media (max-width: 1023px){footer.footer-compact.sc-admiralty-footer .footer-content.sc-admiralty-footer{flex-direction:column-reverse}}footer.footer-compact.sc-admiralty-footer .footer-content.sc-admiralty-footer .footer-links.sc-admiralty-footer{font-size:var(--admiralty-footer-compact-font-size, var(--admiralty-font-size--3));justify-content:flex-end;line-height:0.95rem;flex-flow:nowrap;column-gap:1.25rem;flex-wrap:wrap}@media (max-width: 479px) and (min-width: 0px){footer.footer-compact.sc-admiralty-footer .footer-content.sc-admiralty-footer .footer-links.sc-admiralty-footer{place-self:flex-end}}@media (max-width: 1023px){footer.footer-compact.sc-admiralty-footer .footer-content.sc-admiralty-footer .footer-links.sc-admiralty-footer{row-gap:0}footer.footer-compact.sc-admiralty-footer .footer-content.sc-admiralty-footer .footer-links.text-padding.sc-admiralty-footer{padding-top:var(--admiralty-footer-compact-links-not-desktop-padding-top, 0.2rem);row-gap:0.2rem}}footer.footer-compact.sc-admiralty-footer .footer-content.sc-admiralty-footer .footer-links.text-padding.sc-admiralty-footer{margin-left:var(--admiralty-footer-compact-links-margin-left, 1.25rem)}footer.footer-compact.sc-admiralty-footer .footer-content.sc-admiralty-footer .footer-text.sc-admiralty-footer{width:14.3rem;height:1.1875rem;flex-shrink:0;align-self:flex-end;margin-left:var(--admiralty-footer-compact-content-text-margin-left, var(--admiralty-spacing-0));margin-top:var(--admiralty-footer-compact-content-text-margin-top, var(--admiralty-spacing-0))}@media (max-width: 479px) and (min-width: 0px){footer.footer-compact.sc-admiralty-footer .footer-content.sc-admiralty-footer .footer-text.sc-admiralty-footer{margin-right:var(--admiralty-footer-compact-content-text-phone-margin-right, var(--admiralty-spacing-0))}}footer.footer-compact.sc-admiralty-footer .footer-content.sc-admiralty-footer .footer-text.sc-admiralty-footer p.sc-admiralty-footer{color:var(--admiralty-footer-compact-text-colour, var(--admiralty-colour-primary));font-size:var(--admiralty-footer-compact-font-size, var(--admiralty-font-size--3));font-style:normal;font-weight:var(--admiralty-footer-compact-font-weight, var(--admiralty-font-weight-normal));line-height:1.5rem}";
+const footerCss = ".visually-hidden.sc-admiralty-footer:not(:focus):not(:active){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}@media (max-width: 1023px){.desktop-only.sc-admiralty-footer{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-footer{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-footer{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-footer{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-footer{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-footer{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-footer{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-footer{display:none}}footer.sc-admiralty-footer{padding:var(--admiralty-footer-padding, 1.25rem 1rem 1.5rem 1rem);border-top:var(--admiralty-colour-primary) 0.375rem solid;background:var(--admiralty-background-colour-tint);display:flex;flex-direction:column}@media (min-width: 481px){footer.sc-admiralty-footer{flex-direction:row;padding:var(--admiralty-footer-desktop-padding, 1.75rem 1.5rem 1.875rem 1rem);gap:1rem}}footer.sc-admiralty-footer .footer-branding.sc-admiralty-footer .footer-img.sc-admiralty-footer{height:var(--admiralty-footer-img-height, 86px);margin-bottom:var(--admiralty-footer-branding-image-margin-bottom, 1rem);box-sizing:border-box}@media (min-width: 481px){footer.sc-admiralty-footer .footer-branding.sc-admiralty-footer .footer-img.sc-admiralty-footer{height:var(--admiralty-footer-img-desktop-height, 100px);margin-bottom:var(--admiralty-footer-branding-image-desktop-margin-bottom, var(--admiralty-spacing-0))}}footer.sc-admiralty-footer .footer-branding.sc-admiralty-footer .footer-img.sc-admiralty-footer a.sc-admiralty-footer{display:block;height:100%;width:min-content}footer.sc-admiralty-footer .footer-branding.sc-admiralty-footer .footer-img.sc-admiralty-footer img.sc-admiralty-footer{height:100%}@media (prefers-color-scheme: dark){footer.sc-admiralty-footer img.sc-admiralty-footer{filter:invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg)}}@media (min-width: 481px){footer.sc-admiralty-footer .footer-content.sc-admiralty-footer{display:flex;flex-grow:1;flex-direction:column}}footer.sc-admiralty-footer .footer-content.sc-admiralty-footer .footer-links.sc-admiralty-footer{display:flex;flex-direction:column;align-self:flex-start;margin-left:var(--admiralty-footer-content-links-margin-left, 0.125rem);gap:0.5rem;flex-grow:1}@media (min-width: 481px){footer.sc-admiralty-footer .footer-content.sc-admiralty-footer .footer-links.sc-admiralty-footer{flex-direction:row;align-self:flex-end;margin-left:var(--admiralty-footer-content-links-desktop-margin-left, var(--admiralty-spacing-0));gap:1.5rem}}footer .footer-content .footer-links.sc-admiralty-footer-s>admiralty-link a,footer .footer-content .footer-links .sc-admiralty-footer-s>admiralty-link a{font-weight:var(--admiralty-footer-links-font-weight, var(--admiralty-font-weight-medium))}footer.sc-admiralty-footer .footer-content.sc-admiralty-footer .footer-text.sc-admiralty-footer{align-self:flex-start;margin-left:var(--admiralty-footer-content-text-margin-left, 0.125rem);margin-top:var(--admiralty-footer-content-text-margin-top, 1rem)}@media (min-width: 481px){footer.sc-admiralty-footer .footer-content.sc-admiralty-footer .footer-text.sc-admiralty-footer{align-self:flex-end;margin-left:var(--admiralty-footer-content-text-desktop-margin-left, var(--admiralty-spacing-0))}}footer.sc-admiralty-footer .footer-content.sc-admiralty-footer .footer-text.sc-admiralty-footer p.sc-admiralty-footer{margin:var(--admiralty-footer-content-text-paragraph-margin, var(--admiralty-spacing-0));font-weight:var(--admiralty-footer-text-weight, var(--admiralty-font-weight-normal));color:var(--admiralty-text-colour)}@media (min-width: 481px){footer.sc-admiralty-footer .footer-content.sc-admiralty-footer .footer-text.sc-admiralty-footer p.sc-admiralty-footer{text-align:right}}footer.footer-compact.sc-admiralty-footer{display:inline-flex;width:auto;justify-content:center;align-items:center;flex-wrap:wrap;padding:var(--admiralty-footer-compact-padding, 0.5rem 0.5rem);gap:0.5rem;opacity:0.7;background-color:var(--admiralty-footer-compact-background-colour, var(--admiralty-background-colour));border-radius:0.625rem 0 0 0;border-bottom:3px solid var(--admiralty-colour-primary);border-top:none}footer.footer-compact.sc-admiralty-footer .footer-content.sc-admiralty-footer{display:flex;flex-direction:row-reverse;flex-wrap:wrap}@media (max-width: 479px) and (min-width: 0px){footer.footer-compact.sc-admiralty-footer .footer-content.sc-admiralty-footer{justify-content:center;flex-direction:column-reverse}}@media (max-width: 1023px){footer.footer-compact.sc-admiralty-footer .footer-content.sc-admiralty-footer{flex-direction:column-reverse}}footer.footer-compact.sc-admiralty-footer .footer-content.sc-admiralty-footer .footer-links.sc-admiralty-footer{font-size:var(--admiralty-footer-compact-font-size, var(--admiralty-font-size--3));justify-content:flex-end;line-height:0.95rem;flex-flow:nowrap;column-gap:1.25rem;flex-wrap:wrap}@media (max-width: 479px) and (min-width: 0px){footer.footer-compact.sc-admiralty-footer .footer-content.sc-admiralty-footer .footer-links.sc-admiralty-footer{place-self:flex-end}}@media (max-width: 1023px){footer.footer-compact.sc-admiralty-footer .footer-content.sc-admiralty-footer .footer-links.sc-admiralty-footer{row-gap:0}footer.footer-compact.sc-admiralty-footer .footer-content.sc-admiralty-footer .footer-links.text-padding.sc-admiralty-footer{padding-top:var(--admiralty-footer-compact-links-not-desktop-padding-top, 0.2rem);row-gap:0.2rem}}footer.footer-compact.sc-admiralty-footer .footer-content.sc-admiralty-footer .footer-links.text-padding.sc-admiralty-footer{margin-left:var(--admiralty-footer-compact-links-margin-left, 1.25rem)}footer.footer-compact.sc-admiralty-footer .footer-content.sc-admiralty-footer .footer-text.sc-admiralty-footer{width:14.3rem;height:1.1875rem;flex-shrink:0;align-self:flex-end;margin-left:var(--admiralty-footer-compact-content-text-margin-left, var(--admiralty-spacing-0));margin-top:var(--admiralty-footer-compact-content-text-margin-top, var(--admiralty-spacing-0))}@media (max-width: 479px) and (min-width: 0px){footer.footer-compact.sc-admiralty-footer .footer-content.sc-admiralty-footer .footer-text.sc-admiralty-footer{margin-right:var(--admiralty-footer-compact-content-text-phone-margin-right, var(--admiralty-spacing-0))}}footer.footer-compact.sc-admiralty-footer .footer-content.sc-admiralty-footer .footer-text.sc-admiralty-footer p.sc-admiralty-footer{color:var(--admiralty-footer-compact-text-colour, var(--admiralty-colour-primary));font-size:var(--admiralty-footer-compact-font-size, var(--admiralty-font-size--3));font-style:normal;font-weight:var(--admiralty-footer-compact-font-weight, var(--admiralty-font-weight-normal));line-height:1.5rem}@media (prefers-color-scheme: dark){footer.footer-compact.sc-admiralty-footer{opacity:1}}";
 const AdmiraltyFooterStyle0 = footerCss;
 
 const FooterComponent = class {

package/dist/esm/admiralty-footer.entry.js.map

@@ -1 +1 @@
-{"file":"admiralty-footer.entry.js","mappings":";;AACO,MAAM,UAAU,GAAG;IACxB,QAAQ,EAAE,UAAyB;IACnC,OAAO,EAAE,SAAwB;CAClC;;ACJD,MAAM,SAAS,GAAG,86NAA86N,CAAC;AACj8N,8BAAe,SAAS;;MCWX,eAAe;;;uBAOK,UAAU,CAAC,QAAQ;yBAI9B,8BAA8B;wBAI/B,2BAA2B;wBAK3B,4DAA4D;oBAKhE,qBAAqB,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,yBAAyB;8BAElD,KAAK;;IAExC,kBAAkB;QAChB,IAAI,CAAC,gBAAgB,EAAE,CAAA;KACxB;IAGD,gBAAgB;QACd,IAAI,CAAC,gBAAgB,EAAE,CAAA;KACxB;IAED,gBAAgB;QACd,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,gBAAgB,CAAyC,CAAA;QAChG,IAAI,KAAK,EAAE;YACT,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;SACxC;KACF;IAED,MAAM;QACJ,QACE,gFAAa,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC,OAAO,IAAI,EAAE,KAAK,EAAE,gBAAgB,EAAC,IAC3E,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC,OAAO,IAAI,4DAAK,KAAK,EAAC,iBAAiB,IAClE,4DAAK,KAAK,EAAC,YAAY,IACrB,0DAAG,IAAI,EAAE,IAAI,CAAC,SAAS,IACrB,4DAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC7C,CACA,CACF,EACN,4DAAK,KAAK,EAAC,gBAAgB,IACzB,wFAAgB,cAAc,KAAM,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC,OAAO,GAAG,EAAC,KAAK,EAAE,2BAA2B,EAAC,GAAG,EAAE,KAAK,EAAE,cAAc,EAAC,IAC9J,6DAAM,YAAY,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,GAAS,CACtD,EACN,4DAAK,KAAK,EAAC,aAAa,IACtB,4DAAI,IAAI,CAAC,IAAI,CAAK,CACd,CACF,CACC,EACT;KACH;;;;;;;","names":[],"sources":["src/components/footer/footer.types.ts","src/components/footer/footer.scss?tag=admiralty-footer&encapsulation=scoped","src/components/footer/footer.tsx"],"sourcesContent":["export type FooterTypes = 'standard' | 'compact';\nexport const FooterType = {\n  Standard: 'standard' as FooterTypes,\n  Compact: 'compact' as FooterTypes\n};\n","@import 'footer.vars';\n\nfooter {\n  @include tablet-or-desktop {\n    flex-direction: row;\n    padding: $footer-desktop-padding;\n    gap: 1rem;\n  }\n\n  padding: $footer-padding;\n  border-top: $footer-border-colour 0.375rem solid;\n  background: $footer-background-colour;\n  display: flex;\n  flex-direction: column;\n\n  .footer-branding {\n    .footer-img {\n      @include tablet-or-desktop {\n        height: $footer-branding-image-desktop-height; // 100px;\n        margin-bottom: $footer-branding-image-desktop-margin-bottom;\n      }\n      height: $footer-branding-image-height; // 86px;\n      margin-bottom: $footer-branding-image-margin-bottom;\n      box-sizing: border-box;\n\n      a {\n        display: block;\n        height: 100%;\n        width: min-content;\n      }\n\n      img {\n        height: 100%;\n      }\n    }\n  }\n\n  .footer-content {\n    @include tablet-or-desktop {\n      display: flex;\n      flex-grow: 1;\n      flex-direction: column;\n    }\n    .footer-links {\n      @include tablet-or-desktop {\n        flex-direction: row;\n        align-self: flex-end;\n        margin-left: $footer-content-links-desktop-margin-left;\n        gap: 1.5rem;\n      }\n      display: flex;\n      flex-direction: column;\n      align-self: flex-start;\n      margin-left: $footer-content-links-margin-left;\n      gap: 0.5rem;\n      flex-grow: 1;\n\n      ::slotted(admiralty-link) {\n        a {\n          font-weight: $footer-links-font-weight;\n        }\n      }\n    }\n\n    .footer-text {\n      @include tablet-or-desktop {\n        align-self: flex-end;\n        margin-left: $footer-content-text-desktop-margin-left;\n      }\n      align-self: flex-start;\n      margin-left: $footer-content-text-margin-left;\n      margin-top: $footer-content-text-margin-top;\n      p {\n        @include tablet-or-desktop {\n          text-align: right;\n        }\n        margin: $footer-content-text-paragraph-margin;\n        font-weight: $footer-text-weight;\n        color: $footer-text-colour;\n      }\n    }\n  }\n}\n\nfooter.footer-compact {\n  display: inline-flex;\n  width: auto;\n  justify-content: center;\n  align-items: center;\n  flex-wrap: wrap;\n  padding: $footer-compact-padding;\n  gap: 0.5rem;\n  opacity: .70;\n  background-color: $footer-compact-background-colour;\n\n  border-radius: 0.625rem 0 0 0;\n  border-bottom: 3px solid $footer-border-colour;\n  border-top: none;\n\n  .footer-content {\n    @include phone-only {\n      justify-content: center;\n      flex-direction: column-reverse;\n    }\n\n    @include not-desktop {\n      flex-direction: column-reverse;\n    }\n\n    display: flex;\n    flex-direction: row-reverse;\n    flex-wrap: wrap;\n\n    .footer-links {\n      @include phone-only {\n        place-self: flex-end;\n      }\n\n      @include not-desktop {\n        row-gap: 0;\n\n        &.text-padding {\n          padding-top: $footer-compact-links-not-desktop-padding-top;\n          row-gap: .2rem;\n        }\n      }\n\n      font-size: $footer-compact-font-size;\n      justify-content: flex-end;\n      line-height: .95rem;\n      flex-flow: nowrap;\n      column-gap: 1.25rem; // gap\n      flex-wrap: wrap;\n\n      &.text-padding {\n        margin-left: $footer-compact-links-margin-left;\n      }\n    }\n\n    .footer-text {\n      @include phone-only {\n        margin-right: $footer-compact-content-text-phone-margin-right;\n      }\n\n      width: 14.3rem;\n      height: 1.1875rem;\n      flex-shrink: 0;\n\n      align-self: flex-end;\n      margin-left: $footer-compact-content-text-margin-left;\n      margin-top: $footer-compact-content-text-margin-top;\n\n      p {\n        color: $footer-compact-text-colour;\n        font-size: $footer-compact-font-size;\n        font-style: normal;\n        font-weight: $footer-compact-font-weight;\n        line-height: 1.5rem;\n      }\n    }\n  }\n}\n","import { Component, Prop, h, State, Listen, Element } from '@stencil/core';\nimport { FooterType, FooterTypes } from './footer.types';\n\n/**\n * @slot - Footer links should be placed in the slot e.g.\n * `<admiralty-link href=\"http://www.example.com\">Privacy Policy</admiralty-link>`\n */\n@Component({\n  tag: 'admiralty-footer',\n  styleUrl: 'footer.scss',\n  scoped: true\n})\nexport class FooterComponent {\n  @Element() el: HTMLElement;\n\n  /**\n   * The type of footer to render. Valid values are `standard`, `compact`.\n   * Default value is `standard`.\n   */\n  @Prop() variant: FooterTypes = FooterType.Standard;\n  /**\n   * The URL that the image links to.\n   */\n  @Prop() imageLink = 'https://www.admiralty.co.uk/';\n  /**\n   * The source of the image displayed in the footer.\n   */\n  @Prop() imageSrc = 'svg/UKHO stacked logo.svg';\n  /**\n   * A description for the image displayed in the footer. This might be shown if the image\n   * fails to load or get read out by screen readers.\n   */\n  @Prop() imageAlt = 'Admiralty Maritime Data Solutions | UK Hydrographic Office';\n  /**\n   * The text to display in the footer. The default value displays crown copyright, the\n   * current year and `UK Hydrographic Office`.\n   */\n  @Prop() text = `© Crown copyright ${new Date().getFullYear()} UK Hydrographic Office`;\n\n  @State() hasSlotContent: boolean = false;\n\n  componentDidRender(): void {\n    this.checkSlotContent()\n  }\n\n  @Listen('slotchange', { capture: true })\n  handleSlotChange() {\n    this.checkSlotContent()\n  }\n\n  checkSlotContent(): void {\n    const links = this.el.querySelectorAll('admiralty-link') as NodeListOf<HTMLAdmiraltyLinkElement>\n    if (links) {\n      this.hasSlotContent = links.length > 0;\n    }\n  }\n\n  render() {\n    return (\n      <footer {...(this.variant === FooterType.Compact && { class: 'footer-compact'})}>\n        {this.variant !== FooterType.Compact && <div class=\"footer-branding\">\n          <div class=\"footer-img\">\n            <a href={this.imageLink}>\n              <img src={this.imageSrc} alt={this.imageAlt} />\n            </a>\n          </div>\n        </div>}\n        <div class=\"footer-content\">\n          <nav aria-label=\"Footer Links\" {...(this.hasSlotContent && this.variant === FooterType.Compact ? {class: 'footer-links text-padding'} : { class: 'footer-links'})}>\n            <slot onSlotchange={() => this.handleSlotChange()}></slot>\n          </nav>\n          <div class=\"footer-text\">\n            <p>{this.text}</p>\n          </div>\n        </div>\n      </footer>\n    );\n  }\n}\n"],"version":3}
+{"file":"admiralty-footer.entry.js","mappings":";;AACO,MAAM,UAAU,GAAG;IACxB,QAAQ,EAAE,UAAyB;IACnC,OAAO,EAAE,SAAwB;CAClC;;ACJD,MAAM,SAAS,GAAG,6pOAA6pO,CAAC;AAChrO,8BAAe,SAAS;;MCWX,eAAe;;;uBAOK,UAAU,CAAC,QAAQ;yBAI9B,8BAA8B;wBAI/B,2BAA2B;wBAK3B,4DAA4D;oBAKhE,qBAAqB,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,yBAAyB;8BAElD,KAAK;;IAExC,kBAAkB;QAChB,IAAI,CAAC,gBAAgB,EAAE,CAAA;KACxB;IAGD,gBAAgB;QACd,IAAI,CAAC,gBAAgB,EAAE,CAAA;KACxB;IAED,gBAAgB;QACd,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,gBAAgB,CAAyC,CAAA;QAChG,IAAI,KAAK,EAAE;YACT,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;SACxC;KACF;IAED,MAAM;QACJ,QACE,gFAAa,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC,OAAO,IAAI,EAAE,KAAK,EAAE,gBAAgB,EAAC,IAC3E,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC,OAAO,IAAI,4DAAK,KAAK,EAAC,iBAAiB,IAClE,4DAAK,KAAK,EAAC,YAAY,IACrB,0DAAG,IAAI,EAAE,IAAI,CAAC,SAAS,IACrB,4DAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC7C,CACA,CACF,EACN,4DAAK,KAAK,EAAC,gBAAgB,IACzB,wFAAgB,cAAc,KAAM,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC,OAAO,GAAG,EAAC,KAAK,EAAE,2BAA2B,EAAC,GAAG,EAAE,KAAK,EAAE,cAAc,EAAC,IAC9J,6DAAM,YAAY,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,GAAS,CACtD,EACN,4DAAK,KAAK,EAAC,aAAa,IACtB,4DAAI,IAAI,CAAC,IAAI,CAAK,CACd,CACF,CACC,EACT;KACH;;;;;;;","names":[],"sources":["src/components/footer/footer.types.ts","src/components/footer/footer.scss?tag=admiralty-footer&encapsulation=scoped","src/components/footer/footer.tsx"],"sourcesContent":["export type FooterTypes = 'standard' | 'compact';\nexport const FooterType = {\n  Standard: 'standard' as FooterTypes,\n  Compact: 'compact' as FooterTypes\n};\n","@import 'footer.vars';\n\nfooter {\n  @include tablet-or-desktop {\n    flex-direction: row;\n    padding: $footer-desktop-padding;\n    gap: 1rem;\n  }\n\n  padding: $footer-padding;\n  border-top: $footer-border-colour 0.375rem solid;\n  background: $footer-background-colour;\n  display: flex;\n  flex-direction: column;\n\n  .footer-branding {\n    .footer-img {\n      @include tablet-or-desktop {\n        height: $footer-branding-image-desktop-height; // 100px;\n        margin-bottom: $footer-branding-image-desktop-margin-bottom;\n      }\n      height: $footer-branding-image-height; // 86px;\n      margin-bottom: $footer-branding-image-margin-bottom;\n      box-sizing: border-box;\n\n      a {\n        display: block;\n        height: 100%;\n        width: min-content;\n      }\n\n      img {\n        height: 100%;\n      }\n    }\n  }\n\n  @media (prefers-color-scheme: dark) {\n    img {\n      filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg);\n    }\n  }\n\n  .footer-content {\n    @include tablet-or-desktop {\n      display: flex;\n      flex-grow: 1;\n      flex-direction: column;\n    }\n    .footer-links {\n      @include tablet-or-desktop {\n        flex-direction: row;\n        align-self: flex-end;\n        margin-left: $footer-content-links-desktop-margin-left;\n        gap: 1.5rem;\n      }\n      display: flex;\n      flex-direction: column;\n      align-self: flex-start;\n      margin-left: $footer-content-links-margin-left;\n      gap: 0.5rem;\n      flex-grow: 1;\n\n      ::slotted(admiralty-link) {\n        a {\n          font-weight: $footer-links-font-weight;\n        }\n      }\n    }\n\n    .footer-text {\n      @include tablet-or-desktop {\n        align-self: flex-end;\n        margin-left: $footer-content-text-desktop-margin-left;\n      }\n      align-self: flex-start;\n      margin-left: $footer-content-text-margin-left;\n      margin-top: $footer-content-text-margin-top;\n      p {\n        @include tablet-or-desktop {\n          text-align: right;\n        }\n        margin: $footer-content-text-paragraph-margin;\n        font-weight: $footer-text-weight;\n        color: $footer-text-colour;\n      }\n    }\n  }\n}\n\nfooter.footer-compact {\n  display: inline-flex;\n  width: auto;\n  justify-content: center;\n  align-items: center;\n  flex-wrap: wrap;\n  padding: $footer-compact-padding;\n  gap: 0.5rem;\n  opacity: .70;\n  background-color: $footer-compact-background-colour;\n\n  border-radius: 0.625rem 0 0 0;\n  border-bottom: 3px solid $footer-border-colour;\n  border-top: none;\n\n  .footer-content {\n    @include phone-only {\n      justify-content: center;\n      flex-direction: column-reverse;\n    }\n\n    @include not-desktop {\n      flex-direction: column-reverse;\n    }\n\n    display: flex;\n    flex-direction: row-reverse;\n    flex-wrap: wrap;\n\n    .footer-links {\n      @include phone-only {\n        place-self: flex-end;\n      }\n\n      @include not-desktop {\n        row-gap: 0;\n\n        &.text-padding {\n          padding-top: $footer-compact-links-not-desktop-padding-top;\n          row-gap: .2rem;\n        }\n      }\n\n      font-size: $footer-compact-font-size;\n      justify-content: flex-end;\n      line-height: .95rem;\n      flex-flow: nowrap;\n      column-gap: 1.25rem; // gap\n      flex-wrap: wrap;\n\n      &.text-padding {\n        margin-left: $footer-compact-links-margin-left;\n      }\n    }\n\n    .footer-text {\n      @include phone-only {\n        margin-right: $footer-compact-content-text-phone-margin-right;\n      }\n\n      width: 14.3rem;\n      height: 1.1875rem;\n      flex-shrink: 0;\n\n      align-self: flex-end;\n      margin-left: $footer-compact-content-text-margin-left;\n      margin-top: $footer-compact-content-text-margin-top;\n\n      p {\n        color: $footer-compact-text-colour;\n        font-size: $footer-compact-font-size;\n        font-style: normal;\n        font-weight: $footer-compact-font-weight;\n        line-height: 1.5rem;\n      }\n    }\n  }\n}\n\n@media (prefers-color-scheme: dark) { // Avoid clash with backgrounds in darkmode\n  footer.footer-compact {\n    opacity: 1;\n  }\n}\n","import { Component, Prop, h, State, Listen, Element } from '@stencil/core';\nimport { FooterType, FooterTypes } from './footer.types';\n\n/**\n * @slot - Footer links should be placed in the slot e.g.\n * `<admiralty-link href=\"http://www.example.com\">Privacy Policy</admiralty-link>`\n */\n@Component({\n  tag: 'admiralty-footer',\n  styleUrl: 'footer.scss',\n  scoped: true\n})\nexport class FooterComponent {\n  @Element() el: HTMLElement;\n\n  /**\n   * The type of footer to render. Valid values are `standard`, `compact`.\n   * Default value is `standard`.\n   */\n  @Prop() variant: FooterTypes = FooterType.Standard;\n  /**\n   * The URL that the image links to.\n   */\n  @Prop() imageLink = 'https://www.admiralty.co.uk/';\n  /**\n   * The source of the image displayed in the footer.\n   */\n  @Prop() imageSrc = 'svg/UKHO stacked logo.svg';\n  /**\n   * A description for the image displayed in the footer. This might be shown if the image\n   * fails to load or get read out by screen readers.\n   */\n  @Prop() imageAlt = 'Admiralty Maritime Data Solutions | UK Hydrographic Office';\n  /**\n   * The text to display in the footer. The default value displays crown copyright, the\n   * current year and `UK Hydrographic Office`.\n   */\n  @Prop() text = `© Crown copyright ${new Date().getFullYear()} UK Hydrographic Office`;\n\n  @State() hasSlotContent: boolean = false;\n\n  componentDidRender(): void {\n    this.checkSlotContent()\n  }\n\n  @Listen('slotchange', { capture: true })\n  handleSlotChange() {\n    this.checkSlotContent()\n  }\n\n  checkSlotContent(): void {\n    const links = this.el.querySelectorAll('admiralty-link') as NodeListOf<HTMLAdmiraltyLinkElement>\n    if (links) {\n      this.hasSlotContent = links.length > 0;\n    }\n  }\n\n  render() {\n    return (\n      <footer {...(this.variant === FooterType.Compact && { class: 'footer-compact'})}>\n        {this.variant !== FooterType.Compact && <div class=\"footer-branding\">\n          <div class=\"footer-img\">\n            <a href={this.imageLink}>\n              <img src={this.imageSrc} alt={this.imageAlt} />\n            </a>\n          </div>\n        </div>}\n        <div class=\"footer-content\">\n          <nav aria-label=\"Footer Links\" {...(this.hasSlotContent && this.variant === FooterType.Compact ? {class: 'footer-links text-padding'} : { class: 'footer-links'})}>\n            <slot onSlotchange={() => this.handleSlotChange()}></slot>\n          </nav>\n          <div class=\"footer-text\">\n            <p>{this.text}</p>\n          </div>\n        </div>\n      </footer>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/admiralty-header-menu-item.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-60c25452.js';
 
-const headerMenuItemCss = ".visually-hidden.sc-admiralty-header-menu-item:not(:focus):not(:active){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}@media (max-width: 1023px){.desktop-only.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header-menu-item{display:none}}.menu-item.sc-admiralty-header-menu-item{cursor:pointer}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item div.sc-admiralty-header-menu-item{font-size:var(--admiralty-header-menu-title-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary)}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item:focus div.sc-admiralty-header-menu-item{outline:3px solid transparent;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);box-shadow:0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-text-colour);text-decoration:none}button.sc-admiralty-header-menu-item{all:unset;height:100%;width:100%}@media (min-width: 1024px){.menu-item.sc-admiralty-header-menu-item{display:flex;flex:0;flex-direction:column;height:100%;justify-content:center;line-height:1.33em;margin-bottom:var(--admiralty-header-menu-item-desktop-margin-bottom, var(--admiralty-spacing-0));min-width:4em;max-width:11.1em;padding:var(--admiralty-header-menu-item-desktop-padding, var(--admiralty-spacing-0) 1.65em);position:relative;text-align:center}.menu-item.sc-admiralty-header-menu-item:hover{box-shadow:inset 0 -5px var(--admiralty-colour-primary);background-color:var(--admiralty-hover-background-colour)}.menu-item.sc-admiralty-header-menu-item:hover .sub-menu.sc-admiralty-header-menu-item{display:flex}.menu-item.active.sc-admiralty-header-menu-item{box-shadow:inset 0 -5px var(--admiralty-colour-primary)}.menu-item.active.sc-admiralty-header-menu-item .sub-menu.sc-admiralty-header-menu-item{display:flex}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item div.sc-admiralty-header-menu-item{font-weight:var(--admiralty-header-menu-title-font-weight, var(--admiralty-font-weight-medium))}.menu-item.sc-admiralty-header-menu-item .sub-menu.sc-admiralty-header-menu-item{display:none;flex-direction:column;position:absolute;border:1px solid var(--admiralty-colour-light);right:0;top:100%}.menu-item.sc-admiralty-header-menu-item .sub-menu.desktop-visible.sc-admiralty-header-menu-item{display:flex}.menu-item.sc-admiralty-header-menu-item .sub-menu.desktop-hide.sc-admiralty-header-menu-item{display:none}}@media (max-width: 1023px){.menu-item.sc-admiralty-header-menu-item{display:block;box-sizing:border-box;background-color:unset;text-align:unset;text-decoration:unset}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item div.sc-admiralty-header-menu-item{display:inline-block;margin:var(--admiralty-header-menu-item-title-not-desktop-margin, var(--admiralty-spacing-3));font-weight:var(--admiralty-header-menu-title-font-weight, var(--admiralty-font-weight-medium))}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item:hover{background-color:var(--admiralty-hover-background-colour)}}";
+const headerMenuItemCss = ".visually-hidden.sc-admiralty-header-menu-item:not(:focus):not(:active){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}@media (max-width: 1023px){.desktop-only.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header-menu-item{display:none}}.menu-item.sc-admiralty-header-menu-item{cursor:pointer}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item div.sc-admiralty-header-menu-item{font-size:var(--admiralty-header-menu-title-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary)}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item:focus div.sc-admiralty-header-menu-item{outline:3px solid transparent;color:var(--admiralty-focus-contrast);background-color:var(--admiralty-focus-colour);box-shadow:0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-focus-contrast);text-decoration:none}button.sc-admiralty-header-menu-item{all:unset;height:100%;width:100%}@media (min-width: 1024px){.menu-item.sc-admiralty-header-menu-item{display:flex;flex:0;flex-direction:column;height:100%;justify-content:center;line-height:1.33em;margin-bottom:var(--admiralty-header-menu-item-desktop-margin-bottom, var(--admiralty-spacing-0));min-width:4em;max-width:11.1em;padding:var(--admiralty-header-menu-item-desktop-padding, var(--admiralty-spacing-0) 1.65em);position:relative;text-align:center}.menu-item.sc-admiralty-header-menu-item:hover{box-shadow:inset 0 -5px var(--admiralty-colour-primary);background-color:var(--admiralty-hover-background-colour)}.menu-item.sc-admiralty-header-menu-item:hover .sub-menu.sc-admiralty-header-menu-item{display:flex}.menu-item.active.sc-admiralty-header-menu-item{box-shadow:inset 0 -5px var(--admiralty-colour-primary)}.menu-item.active.sc-admiralty-header-menu-item .sub-menu.sc-admiralty-header-menu-item{display:flex}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item div.sc-admiralty-header-menu-item{font-weight:var(--admiralty-header-menu-title-font-weight, var(--admiralty-font-weight-medium))}.menu-item.sc-admiralty-header-menu-item .sub-menu.sc-admiralty-header-menu-item{display:none;flex-direction:column;position:absolute;border:1px solid var(--admiralty-colour-light);right:0;top:100%}.menu-item.sc-admiralty-header-menu-item .sub-menu.desktop-visible.sc-admiralty-header-menu-item{display:flex}.menu-item.sc-admiralty-header-menu-item .sub-menu.desktop-hide.sc-admiralty-header-menu-item{display:none}}@media (max-width: 1023px){.menu-item.sc-admiralty-header-menu-item{display:block;box-sizing:border-box;background-color:unset;text-align:unset;text-decoration:unset}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item div.sc-admiralty-header-menu-item{display:inline-block;margin:var(--admiralty-header-menu-item-title-not-desktop-margin, var(--admiralty-spacing-3));font-weight:var(--admiralty-header-menu-title-font-weight, var(--admiralty-font-weight-medium))}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item:hover{background-color:var(--admiralty-hover-background-colour)}}";
 const AdmiraltyHeaderMenuItemStyle0 = headerMenuItemCss;
 
 const HeaderMenuItemComponent = class {

package/dist/esm/admiralty-header-menu-item.entry.js.map

@@ -1 +1 @@
-{"file":"admiralty-header-menu-item.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,u4HAAu4H,CAAC;AACl6H,sCAAe,iBAAiB;;MCSnB,uBAAuB;;;;;sBAWP,KAAK;;IAUhC,iBAAiB;;QAEf,IAAI;YACF,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gCAAgC,CAAC,CAAC;YAC/E,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;YAE1B,IAAI,IAAI,CAAC,aAAa,EAAE;gBACtB,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;aAC1D;SACF;QAAC,OAAO,CAAC,EAAE;YACV,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC5B;KACF;IAEO,aAAa;QACnB,MAAM,OAAO,GAAmB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAEtE,IAAI,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;YAC9C,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;YACzC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;SAC1C;aAAM;YACL,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;YACtC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;SAC7C;KACF;IAEO,YAAY;QAClB,MAAM,OAAO,GAAmB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QACtE,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;KACvC;IAED,WAAW,CAAC,EAAc;QACxB,EAAE,CAAC,eAAe,EAAE,CAAC;QAErB,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;YAE1D,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;QACD,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;KAClC;;;;;IAMD,eAAe;QACb,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;YAE1D,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;KACF;;;;;IAMD,cAAc,CAAC,GAAU;QACvB,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;YACzD,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;KACF;IAED,cAAc,CAAC,EAAc;;QAC3B,MAAM,aAAa,GAAQ,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,aAAa,CAAC;QAE7C,IAAI,CAAA,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,SAAS,0CAAE,OAAO,CAAC,QAAQ,CAAC,MAAK,CAAC,CAAC,EAAE;YACtD,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;KACF;IAED,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QACnC,IAAI,SAAS,GAAG,YAAY,CAAC;QAC7B,SAAS,IAAI,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAC;QAEpC,QACE,EAAC,IAAI,qDAAC,WAAW,EAAE,CAAC,IAAI,IAAI,CAAC,eAAe,EAAE,EAAE,UAAU,EAAE,CAAC,EAAS,KAAK,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,IAChG,4DAAK,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,IACxD,+DAAQ,KAAK,EAAC,YAAY,IACxB,8DAAM,SAAS,CAAO,CACf,EACT,4DAAK,KAAK,EAAC,uBAAuB,EAAC,UAAU,EAAE,EAAE,IAAI,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,IAC1E,8DAAQ,CACJ,CACF,CACD,EACP;KACH;;;;;;;","names":[],"sources":["src/components/header-menu-item/header-menu-item.scss?tag=admiralty-header-menu-item&encapsulation=scoped","src/components/header-menu-item/header-menu-item.tsx"],"sourcesContent":["@import 'header-menu-item.vars';\n\n@mixin active {\n  box-shadow: inset 0 -5px $header-menu-item-active-colour;\n}\n\n.menu-item {\n  cursor: pointer;\n\n  .menu-title {\n    div {\n      font-size: $header-menu-item-title-text-size;\n      color: $header-menu-item-title-text-colour;\n    }\n\n    &:focus div {\n      @include focus-highlight;\n    }\n  }\n}\n\nbutton {\n  all: unset;\n  height: 100%;\n  width: 100%;\n}\n\n@include desktop-only {\n  .menu-item {\n    display: flex;\n    flex: 0;\n    flex-direction: column;\n    height: 100%;\n    justify-content: center;\n    line-height: 1.33em;\n    margin-bottom: $header-menu-item-desktop-margin-bottom;\n    min-width: 4em;\n    max-width: 11.1em;\n    padding: $header-menu-item-desktop-padding;\n    position: relative;\n    text-align: center;\n\n    &:hover {\n      @include active;\n      background-color: $header-menu-item-hover-background-colour;\n\n      .sub-menu {\n        display: flex;\n      }\n    }\n\n    &.active {\n      @include active;\n\n      .sub-menu {\n        display: flex;\n      }\n    }\n\n    .menu-title div {\n      font-weight: $header-menu-item-title-text-weight;\n    }\n\n    .sub-menu {\n      display: none;\n      flex-direction: column;\n      position: absolute;\n      border: 1px solid $header-menu-item-divider-colour;\n      right: 0;\n      top: 100%;\n\n      &.desktop-visible {\n        display: flex;\n      }\n\n      &.desktop-hide {\n        display: none;\n      }\n    }\n  }\n}\n\n@include not-desktop {\n  .menu-item {\n    display: block;\n    box-sizing: border-box;\n    background-color: unset;\n    text-align: unset;\n    text-decoration: unset;\n\n    .menu-title {\n      div {\n        display: inline-block;\n        margin: $header-menu-item-title-not-desktop-margin;\n        font-weight: $header-menu-item-title-text-weight;\n      }\n\n      &:hover {\n        background-color: $header-menu-item-hover-background-colour;\n      }\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n/**\n * @slot - 'admiralty-sub-header-menu-item' a number of components can be placed here to add sub items\n */\n@Component({\n  tag: 'admiralty-header-menu-item',\n  styleUrl: 'header-menu-item.scss',\n  scoped: true,\n})\nexport class HeaderMenuItemComponent {\n  @Element() el: HTMLElement;\n\n  /**\n   * The text that will be displayed in the menu\n   */\n  @Prop() menuTitle: string;\n\n  /**\n   * Whether the item is active\n   */\n  @Prop() active?: boolean = false;\n\n  /**\n   * The event that is fired when a user clicks on the menu\n   */\n  @Event() menuItemClick: EventEmitter<void>;\n\n  subMenuExists: boolean;\n  subMenuSelector: HTMLElement;\n\n  connectedCallback() {\n    // check if submenu exists on this menu item\n    try {\n      this.subMenuSelector = this.el.querySelector('admiralty-header-sub-menu-item');\n      this.subMenuExists = true;\n\n      if (this.subMenuExists) {\n        this.subMenuSelector.setAttribute('aria-hidden', 'true');\n      }\n    } catch (e) {\n      this.subMenuExists = false;\n    }\n  }\n\n  private toggleSubMenu() {\n    const subMenu: HTMLDivElement = this.el.querySelector('div.sub-menu');\n\n    if (subMenu.classList.contains('desktop-hide')) {\n      subMenu.classList.add('desktop-visible');\n      subMenu.classList.remove('desktop-hide');\n    } else {\n      subMenu.classList.add('desktop-hide');\n      subMenu.classList.remove('desktop-visible');\n    }\n  }\n\n  private closeSubMenu() {\n    const subMenu: HTMLDivElement = this.el.querySelector('div.sub-menu');\n    subMenu.classList.add('desktop-hide');\n  }\n\n  handleClick(ev: MouseEvent): CustomEvent<void> {\n    ev.stopPropagation();\n\n    if (this.subMenuExists) {\n      this.subMenuSelector.setAttribute('aria-hidden', 'false');\n\n      this.toggleSubMenu();\n    }\n    return this.menuItemClick.emit();\n  }\n\n  /**\n   * Handles mouseover events, used to set the aria hidden attribute when submenu\n   * is visible\n   */\n  handleMouseOver(): void {\n    if (this.subMenuExists) {\n      this.subMenuSelector.setAttribute('aria-hidden', 'false');\n\n      this.toggleSubMenu();\n    }\n  }\n\n  /**\n   * Handles mouseout events, used to set the aria hidden attribute when submenu\n   * is no longer visible\n   */\n  handleMouseOut(_ev: Event): void {\n    if (this.subMenuExists) {\n      this.subMenuSelector.setAttribute('aria-hidden', 'true');\n      this.closeSubMenu();\n    }\n  }\n\n  handleFocusOut(ev: FocusEvent) {\n    const relatedTarget: any = ev?.relatedTarget;\n\n    if (relatedTarget?.outerHTML?.indexOf('button') !== -1) {\n      this.closeSubMenu();\n    }\n  }\n\n  render() {\n    const { active, menuTitle } = this;\n    let menuClass = 'menu-item ';\n    menuClass += active ? 'active' : '';\n\n    return (\n      <Host onMouseOver={_ => this.handleMouseOver()} onMouseOut={(ev: Event) => this.handleMouseOut(ev)}>\n        <div class={menuClass} onClick={ev => this.handleClick(ev)}>\n          <button class=\"menu-title\">\n            <div>{menuTitle}</div>\n          </button>\n          <div class=\"sub-menu desktop-hide\" onFocusout={ev => this.handleFocusOut(ev)}>\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"admiralty-header-menu-item.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,64HAA64H,CAAC;AACx6H,sCAAe,iBAAiB;;MCSnB,uBAAuB;;;;;sBAWP,KAAK;;IAUhC,iBAAiB;;QAEf,IAAI;YACF,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gCAAgC,CAAC,CAAC;YAC/E,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;YAE1B,IAAI,IAAI,CAAC,aAAa,EAAE;gBACtB,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;aAC1D;SACF;QAAC,OAAO,CAAC,EAAE;YACV,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC5B;KACF;IAEO,aAAa;QACnB,MAAM,OAAO,GAAmB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAEtE,IAAI,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;YAC9C,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;YACzC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;SAC1C;aAAM;YACL,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;YACtC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;SAC7C;KACF;IAEO,YAAY;QAClB,MAAM,OAAO,GAAmB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QACtE,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;KACvC;IAED,WAAW,CAAC,EAAc;QACxB,EAAE,CAAC,eAAe,EAAE,CAAC;QAErB,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;YAE1D,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;QACD,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;KAClC;;;;;IAMD,eAAe;QACb,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;YAE1D,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;KACF;;;;;IAMD,cAAc,CAAC,GAAU;QACvB,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;YACzD,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;KACF;IAED,cAAc,CAAC,EAAc;;QAC3B,MAAM,aAAa,GAAQ,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,aAAa,CAAC;QAE7C,IAAI,CAAA,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,SAAS,0CAAE,OAAO,CAAC,QAAQ,CAAC,MAAK,CAAC,CAAC,EAAE;YACtD,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;KACF;IAED,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QACnC,IAAI,SAAS,GAAG,YAAY,CAAC;QAC7B,SAAS,IAAI,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAC;QAEpC,QACE,EAAC,IAAI,qDAAC,WAAW,EAAE,CAAC,IAAI,IAAI,CAAC,eAAe,EAAE,EAAE,UAAU,EAAE,CAAC,EAAS,KAAK,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,IAChG,4DAAK,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,IACxD,+DAAQ,KAAK,EAAC,YAAY,IACxB,8DAAM,SAAS,CAAO,CACf,EACT,4DAAK,KAAK,EAAC,uBAAuB,EAAC,UAAU,EAAE,EAAE,IAAI,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,IAC1E,8DAAQ,CACJ,CACF,CACD,EACP;KACH;;;;;;;","names":[],"sources":["src/components/header-menu-item/header-menu-item.scss?tag=admiralty-header-menu-item&encapsulation=scoped","src/components/header-menu-item/header-menu-item.tsx"],"sourcesContent":["@import 'header-menu-item.vars';\n\n@mixin active {\n  box-shadow: inset 0 -5px $header-menu-item-active-colour;\n}\n\n.menu-item {\n  cursor: pointer;\n\n  .menu-title {\n    div {\n      font-size: $header-menu-item-title-text-size;\n      color: $header-menu-item-title-text-colour;\n    }\n\n    &:focus div {\n      @include focus-highlight;\n    }\n  }\n}\n\nbutton {\n  all: unset;\n  height: 100%;\n  width: 100%;\n}\n\n@include desktop-only {\n  .menu-item {\n    display: flex;\n    flex: 0;\n    flex-direction: column;\n    height: 100%;\n    justify-content: center;\n    line-height: 1.33em;\n    margin-bottom: $header-menu-item-desktop-margin-bottom;\n    min-width: 4em;\n    max-width: 11.1em;\n    padding: $header-menu-item-desktop-padding;\n    position: relative;\n    text-align: center;\n\n    &:hover {\n      @include active;\n      background-color: $header-menu-item-hover-background-colour;\n\n      .sub-menu {\n        display: flex;\n      }\n    }\n\n    &.active {\n      @include active;\n\n      .sub-menu {\n        display: flex;\n      }\n    }\n\n    .menu-title div {\n      font-weight: $header-menu-item-title-text-weight;\n    }\n\n    .sub-menu {\n      display: none;\n      flex-direction: column;\n      position: absolute;\n      border: 1px solid $header-menu-item-divider-colour;\n      right: 0;\n      top: 100%;\n\n      &.desktop-visible {\n        display: flex;\n      }\n\n      &.desktop-hide {\n        display: none;\n      }\n    }\n  }\n}\n\n@include not-desktop {\n  .menu-item {\n    display: block;\n    box-sizing: border-box;\n    background-color: unset;\n    text-align: unset;\n    text-decoration: unset;\n\n    .menu-title {\n      div {\n        display: inline-block;\n        margin: $header-menu-item-title-not-desktop-margin;\n        font-weight: $header-menu-item-title-text-weight;\n      }\n\n      &:hover {\n        background-color: $header-menu-item-hover-background-colour;\n      }\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n/**\n * @slot - 'admiralty-sub-header-menu-item' a number of components can be placed here to add sub items\n */\n@Component({\n  tag: 'admiralty-header-menu-item',\n  styleUrl: 'header-menu-item.scss',\n  scoped: true,\n})\nexport class HeaderMenuItemComponent {\n  @Element() el: HTMLElement;\n\n  /**\n   * The text that will be displayed in the menu\n   */\n  @Prop() menuTitle: string;\n\n  /**\n   * Whether the item is active\n   */\n  @Prop() active?: boolean = false;\n\n  /**\n   * The event that is fired when a user clicks on the menu\n   */\n  @Event() menuItemClick: EventEmitter<void>;\n\n  subMenuExists: boolean;\n  subMenuSelector: HTMLElement;\n\n  connectedCallback() {\n    // check if submenu exists on this menu item\n    try {\n      this.subMenuSelector = this.el.querySelector('admiralty-header-sub-menu-item');\n      this.subMenuExists = true;\n\n      if (this.subMenuExists) {\n        this.subMenuSelector.setAttribute('aria-hidden', 'true');\n      }\n    } catch (e) {\n      this.subMenuExists = false;\n    }\n  }\n\n  private toggleSubMenu() {\n    const subMenu: HTMLDivElement = this.el.querySelector('div.sub-menu');\n\n    if (subMenu.classList.contains('desktop-hide')) {\n      subMenu.classList.add('desktop-visible');\n      subMenu.classList.remove('desktop-hide');\n    } else {\n      subMenu.classList.add('desktop-hide');\n      subMenu.classList.remove('desktop-visible');\n    }\n  }\n\n  private closeSubMenu() {\n    const subMenu: HTMLDivElement = this.el.querySelector('div.sub-menu');\n    subMenu.classList.add('desktop-hide');\n  }\n\n  handleClick(ev: MouseEvent): CustomEvent<void> {\n    ev.stopPropagation();\n\n    if (this.subMenuExists) {\n      this.subMenuSelector.setAttribute('aria-hidden', 'false');\n\n      this.toggleSubMenu();\n    }\n    return this.menuItemClick.emit();\n  }\n\n  /**\n   * Handles mouseover events, used to set the aria hidden attribute when submenu\n   * is visible\n   */\n  handleMouseOver(): void {\n    if (this.subMenuExists) {\n      this.subMenuSelector.setAttribute('aria-hidden', 'false');\n\n      this.toggleSubMenu();\n    }\n  }\n\n  /**\n   * Handles mouseout events, used to set the aria hidden attribute when submenu\n   * is no longer visible\n   */\n  handleMouseOut(_ev: Event): void {\n    if (this.subMenuExists) {\n      this.subMenuSelector.setAttribute('aria-hidden', 'true');\n      this.closeSubMenu();\n    }\n  }\n\n  handleFocusOut(ev: FocusEvent) {\n    const relatedTarget: any = ev?.relatedTarget;\n\n    if (relatedTarget?.outerHTML?.indexOf('button') !== -1) {\n      this.closeSubMenu();\n    }\n  }\n\n  render() {\n    const { active, menuTitle } = this;\n    let menuClass = 'menu-item ';\n    menuClass += active ? 'active' : '';\n\n    return (\n      <Host onMouseOver={_ => this.handleMouseOver()} onMouseOut={(ev: Event) => this.handleMouseOut(ev)}>\n        <div class={menuClass} onClick={ev => this.handleClick(ev)}>\n          <button class=\"menu-title\">\n            <div>{menuTitle}</div>\n          </button>\n          <div class=\"sub-menu desktop-hide\" onFocusout={ev => this.handleFocusOut(ev)}>\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/admiralty-header-profile.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-60c25452.js';
 
-const headerProfileCss = ".visually-hidden.sc-admiralty-header-profile:not(:focus):not(:active){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}@media (max-width: 1023px){.desktop-only.sc-admiralty-header-profile{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header-profile{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header-profile{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header-profile{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header-profile{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header-profile{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header-profile{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header-profile{display:none}}.header-profile.sc-admiralty-header-profile{color:var(--admiralty-colour-primary);cursor:pointer}.header-profile.sc-admiralty-header-profile>div.sc-admiralty-header-profile{display:flex}@media (min-width: 1024px){.header-profile.sc-admiralty-header-profile{display:flex;flex:0;flex-direction:column;font-size:var(--admiralty-header-profile-font-size, var(--admiralty-font-size-0)) !important;height:100%;justify-content:center;line-height:1.33em;margin-bottom:var(--admiralty-header-profile-desktop-only-margin-bottom, var(--admiralty-spacing-0));min-width:4em;max-width:11.1em;padding:var(--admiralty-header-profile-desktop-only-padding, var(--admiralty-spacing-0) 1.65em);position:relative;text-align:center}.header-profile.sc-admiralty-header-profile .not-desktop.sc-admiralty-header-profile{display:none}.header-profile.sc-admiralty-header-profile button.sc-admiralty-header-profile{all:unset;height:100%;width:100%}.header-profile.sc-admiralty-header-profile button.sc-admiralty-header-profile span.sc-admiralty-header-profile{color:var(--admiralty-colour-primary);font-weight:var(--admiralty-header-profile-font-weight, var(--admiralty-font-weight-medium));padding:var(--admiralty-header-profile-desktop-only-button-padding, var(--admiralty-spacing-1) var(--admiralty-spacing-0))}.header-profile.sc-admiralty-header-profile button.sc-admiralty-header-profile:focus span.sc-admiralty-header-profile,.header-profile.sc-admiralty-header-profile button.sc-admiralty-header-profile:focus div.sc-admiralty-header-profile{outline:3px solid transparent;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);box-shadow:0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-text-colour);text-decoration:none}.header-profile.sc-admiralty-header-profile:hover{box-shadow:inset 0 -5px var(--admiralty-colour-primary);background-color:var(--admiralty-hover-background-colour)}.header-profile.sc-admiralty-header-profile:hover .desktop.sc-admiralty-header-profile .sub-menu.sc-admiralty-header-profile{display:flex}.header-profile.active.sc-admiralty-header-profile{box-shadow:inset 0 -5px var(--admiralty-colour-primary)}.header-profile.active.sc-admiralty-header-profile .sub-menu.sc-admiralty-header-profile{display:flex}.header-profile.sc-admiralty-header-profile .sub-menu.sc-admiralty-header-profile{display:none;flex-direction:column;font-size:var(--admiralty-header-profile-font-size, var(--admiralty-font-size-0));position:absolute;top:100%;right:0;border:1px solid var(--admiralty-colour-light);width:300px}.header-profile.sc-admiralty-header-profile .sub-menu.desktop-visible.sc-admiralty-header-profile{display:flex}.header-profile.sc-admiralty-header-profile .sub-menu.desktop-hide.sc-admiralty-header-profile{display:none}.header-profile.sc-admiralty-header-profile .sub-menu.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile{box-sizing:content-box;margin:var(--admiralty-header-profile-desktop-only-sub-menu-item-margin, var(--admiralty-spacing-0));width:100%;all:unset;box-sizing:border-box;display:block;font-weight:var(--admiralty-header-profile-sub-item-font-weight, var(--admiralty-font-weight-normal));height:100%;padding:var(--admiralty-header-profile-desktop-only-sub-menu-item-padding, 10px);text-align:left;width:100%}.header-profile.sc-admiralty-header-profile .sub-menu.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile:hover{background-color:var(--admiralty-hover-background-colour)}}@media (max-width: 1023px){.header-profile.sc-admiralty-header-profile{border-top:1px solid var(--admiralty-colour-light)}.header-profile.sc-admiralty-header-profile .desktop.sc-admiralty-header-profile{display:none}.header-profile.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile{display:block;box-sizing:border-box;background-color:unset;text-align:unset;text-decoration:unset;width:100%;padding:var(--admiralty-header-profile-not-desktop-sub-menu-item-padding, var(--admiralty-spacing-3))}.header-profile.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile span.sc-admiralty-header-profile{padding:var(--admiralty-header-profile-not-desktop-sub-menu-item-span-padding, var(--admiralty-spacing-1) var(--admiralty-spacing-0));color:var(--admiralty-colour-primary);font-size:var(--admiralty-header-profile-font-size, var(--admiralty-font-size-0));font-weight:var(--admiralty-header-profile-font-weight, var(--admiralty-font-weight-medium))}.header-profile.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile:hover{background-color:var(--admiralty-hover-background-colour)}.header-profile.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile:focus{outline:none}.header-profile.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile:focus span.sc-admiralty-header-profile{outline:3px solid transparent;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);box-shadow:0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-text-colour);text-decoration:none}}";
+const headerProfileCss = ".visually-hidden.sc-admiralty-header-profile:not(:focus):not(:active){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}@media (max-width: 1023px){.desktop-only.sc-admiralty-header-profile{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header-profile{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header-profile{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header-profile{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header-profile{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header-profile{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header-profile{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header-profile{display:none}}.header-profile.sc-admiralty-header-profile{color:var(--admiralty-colour-primary);cursor:pointer}.header-profile.sc-admiralty-header-profile>div.sc-admiralty-header-profile{display:flex}@media (min-width: 1024px){.header-profile.sc-admiralty-header-profile{display:flex;flex:0;flex-direction:column;font-size:var(--admiralty-header-profile-font-size, var(--admiralty-font-size-0)) !important;height:100%;justify-content:center;line-height:1.33em;margin-bottom:var(--admiralty-header-profile-desktop-only-margin-bottom, var(--admiralty-spacing-0));min-width:4em;max-width:11.1em;padding:var(--admiralty-header-profile-desktop-only-padding, var(--admiralty-spacing-0) 1.65em);position:relative;text-align:center}.header-profile.sc-admiralty-header-profile .not-desktop.sc-admiralty-header-profile{display:none}.header-profile.sc-admiralty-header-profile button.sc-admiralty-header-profile{all:unset;height:100%;width:100%}.header-profile.sc-admiralty-header-profile button.sc-admiralty-header-profile span.sc-admiralty-header-profile{color:var(--admiralty-colour-primary);font-weight:var(--admiralty-header-profile-font-weight, var(--admiralty-font-weight-medium));padding:var(--admiralty-header-profile-desktop-only-button-padding, var(--admiralty-spacing-1) var(--admiralty-spacing-0))}.header-profile.sc-admiralty-header-profile button.sc-admiralty-header-profile:focus span.sc-admiralty-header-profile,.header-profile.sc-admiralty-header-profile button.sc-admiralty-header-profile:focus div.sc-admiralty-header-profile{outline:3px solid transparent;color:var(--admiralty-focus-contrast);background-color:var(--admiralty-focus-colour);box-shadow:0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-focus-contrast);text-decoration:none}.header-profile.sc-admiralty-header-profile:hover{box-shadow:inset 0 -5px var(--admiralty-colour-primary);background-color:var(--admiralty-hover-background-colour)}.header-profile.sc-admiralty-header-profile:hover .desktop.sc-admiralty-header-profile .sub-menu.sc-admiralty-header-profile{display:flex}.header-profile.active.sc-admiralty-header-profile{box-shadow:inset 0 -5px var(--admiralty-colour-primary)}.header-profile.active.sc-admiralty-header-profile .sub-menu.sc-admiralty-header-profile{display:flex}.header-profile.sc-admiralty-header-profile .sub-menu.sc-admiralty-header-profile{display:none;flex-direction:column;font-size:var(--admiralty-header-profile-font-size, var(--admiralty-font-size-0));position:absolute;top:100%;right:0;border:1px solid var(--admiralty-colour-light);width:300px}.header-profile.sc-admiralty-header-profile .sub-menu.desktop-visible.sc-admiralty-header-profile{display:flex}.header-profile.sc-admiralty-header-profile .sub-menu.desktop-hide.sc-admiralty-header-profile{display:none}.header-profile.sc-admiralty-header-profile .sub-menu.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile{box-sizing:content-box;margin:var(--admiralty-header-profile-desktop-only-sub-menu-item-margin, var(--admiralty-spacing-0));width:100%;all:unset;box-sizing:border-box;display:block;font-weight:var(--admiralty-header-profile-sub-item-font-weight, var(--admiralty-font-weight-normal));height:100%;padding:var(--admiralty-header-profile-desktop-only-sub-menu-item-padding, 10px);text-align:left;width:100%}.header-profile.sc-admiralty-header-profile .sub-menu.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile:hover{background-color:var(--admiralty-hover-background-colour)}}@media (max-width: 1023px){.header-profile.sc-admiralty-header-profile{border-top:1px solid var(--admiralty-colour-light)}.header-profile.sc-admiralty-header-profile .desktop.sc-admiralty-header-profile{display:none}.header-profile.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile{display:block;box-sizing:border-box;background-color:unset;text-align:unset;text-decoration:unset;width:100%;padding:var(--admiralty-header-profile-not-desktop-sub-menu-item-padding, var(--admiralty-spacing-3))}.header-profile.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile span.sc-admiralty-header-profile{padding:var(--admiralty-header-profile-not-desktop-sub-menu-item-span-padding, var(--admiralty-spacing-1) var(--admiralty-spacing-0));color:var(--admiralty-colour-primary);font-size:var(--admiralty-header-profile-font-size, var(--admiralty-font-size-0));font-weight:var(--admiralty-header-profile-font-weight, var(--admiralty-font-weight-medium))}.header-profile.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile:hover{background-color:var(--admiralty-hover-background-colour)}.header-profile.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile:focus{outline:none}.header-profile.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile:focus span.sc-admiralty-header-profile{outline:3px solid transparent;color:var(--admiralty-focus-contrast);background-color:var(--admiralty-focus-colour);box-shadow:0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-focus-contrast);text-decoration:none}}";
 const AdmiraltyHeaderProfileStyle0 = headerProfileCss;
 
 const HeaderProfileComponent = class {

package/dist/esm/admiralty-header-profile.entry.js.map

@@ -1 +1 @@
-{"file":"admiralty-header-profile.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,ygMAAygM,CAAC;AACniM,qCAAe,gBAAgB;;MCMlB,sBAAsB;;;;;;QAsCjC,iBAAY,GAAG;YACb,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;SAC3B,CAAC;QAEF,kBAAa,GAAG;YACd,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;SAC5B,CAAC;QAEF,sBAAiB,GAAG;YAClB,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;SAChC,CAAC;QAEF,kBAAa,GAAG;YACd,MAAM,OAAO,GAAmB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;YACtE,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;SACvC,CAAC;QAEF,mBAAc,GAAG,CAAC,QAAiB;YACjC,MAAM,OAAO,GAAmB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;YAEtE,IAAI,QAAQ,EAAE;gBACZ,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;gBACzC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;aAC1C;iBAAM;gBACL,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;gBACtC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;aAC7C;SACF,CAAC;QAEF,wBAAmB,GAAG,CAAC,EAAc;YACnC,EAAE,CAAC,eAAe,EAAE,CAAC;YACrB,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;SAC5B,CAAC;0BAhE4B,KAAK;4BAKJ,SAAS;0BAOV,KAAK;;IAsDnC,MAAM;QACJ,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QACpD,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,gBAAgB,IACxB,UAAU,IACT,eACE,WAAK,KAAK,EAAC,SAAS,EAAC,YAAY,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,IAChH,cAAQ,OAAO,EAAE,IAAI,CAAC,mBAAmB,IACvC,gBAAO,YAAY,CAAQ,CACpB,EACR,CAAC,UAAU,IACV,WAAK,KAAK,EAAC,uBAAuB,IAChC,cAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IAC3D,8BAAuB,CAChB,EACT,cAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,IACvD,0BAAmB,CACZ,CACL,IACJ,IAAI,CACJ,EACL,CAAC,UAAU,IACV,WAAK,KAAK,EAAC,aAAa,IACtB,cAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IAC3D,+BAAyB,CAClB,EACT,cAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,IACvD,2BAAqB,CACd,CACL,IACJ,IAAI,CACJ,KAEN,cAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,IACtD,0BAAoB,CACb,CACV,CACG,CACD,EACP;KACH;;;;;;;","names":[],"sources":["src/components/header-profile/header-profile.scss?tag=admiralty-header-profile&encapsulation=scoped","src/components/header-profile/header-profile.tsx"],"sourcesContent":["@import 'header-profile.vars';\n\n@mixin active {\n  box-shadow: inset 0 -5px $header-profile-active-colour;\n}\n\n.header-profile {\n  color: $header-profile-text-colour;\n  cursor: pointer;\n\n  & > div {\n    display: flex;\n  }\n\n  @include desktop-only {\n    .not-desktop {\n      display: none;\n    }\n\n    display: flex;\n    flex: 0;\n    flex-direction: column;\n    font-size: $header-profile-text-size !important;\n    height: 100%;\n    justify-content: center;\n    line-height: 1.33em;\n    margin-bottom: $header-profile-desktop-only-margin-bottom;\n    min-width: 4em;\n    max-width: 11.1em;\n    padding: $header-profile-desktop-only-padding;\n    position: relative;\n    text-align: center;\n\n    button {\n      all: unset;\n      height: 100%;\n      width: 100%;\n      span {\n        color: $header-profile-text-colour;\n        font-weight: $header-profile-text-weight;\n        padding: $header-profile-desktop-only-button-padding;\n      }\n\n      &:focus span,\n      &:focus div {\n        @include focus-highlight;\n      }\n    }\n\n    &:hover {\n      @include active;\n      background-color: $header-profile-hover-background-colour;\n\n      .desktop .sub-menu {\n        display: flex;\n      }\n    }\n\n    &.active {\n      @include active;\n\n      .sub-menu {\n        display: flex;\n      }\n    }\n\n    .sub-menu {\n      display: none;\n      flex-direction: column;\n      font-size: $header-profile-text-size;\n      position: absolute;\n      top: 100%;\n      right: 0;\n      border: 1px solid $header-profile-divider-colour;\n      width: 300px;\n\n      &.desktop-visible {\n        display: flex;\n      }\n\n      &.desktop-hide {\n        display: none;\n      }\n\n      .sub-menu-item {\n        box-sizing: content-box;\n        margin: $header-profile-desktop-only-sub-menu-item-margin;\n        width: 100%;\n\n        all: unset;\n        box-sizing: border-box;\n        display: block;\n        font-weight: $header-profile-sub-item-text-weight;\n        height: 100%;\n        padding: $header-profile-desktop-only-sub-menu-item-padding;\n        text-align: left;\n        width: 100%;\n\n        &:hover {\n          background-color: $header-profile-hover-background-colour;\n        }\n      }\n    }\n  }\n\n  @include not-desktop {\n    .desktop {\n      display: none;\n    }\n\n    border-top: 1px solid $header-profile-divider-colour;\n\n    .sub-menu-item {\n      display: block;\n      box-sizing: border-box;\n      background-color: unset;\n      text-align: unset;\n      text-decoration: unset;\n      width: 100%;\n      padding: $header-profile-not-desktop-sub-menu-item-padding;\n\n      span {\n        padding: $header-profile-not-desktop-sub-menu-item-span-padding;\n        color: $header-profile-text-colour;\n        font-size: $header-profile-text-size;\n        font-weight: $header-profile-text-weight;\n      }\n\n      &:hover {\n        background-color: $header-profile-hover-background-colour;\n      }\n\n      &:focus {\n        outline: none;\n        span {\n          @include focus-highlight;\n        }\n      }\n    }\n  }\n}\n","import { Component, Event, Host, h, Prop, EventEmitter, Element } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-header-profile',\n  styleUrl: 'header-profile.scss',\n  scoped: true,\n})\nexport class HeaderProfileComponent {\n  @Element() el: HTMLElement;\n\n  /**\n   * A boolean to indicate if the user is signed in or not\n   */\n  @Prop() isSignedIn: boolean = false;\n\n  /**\n   * The text that is displayed after the user signs in\n   */\n  @Prop() signedInText: string = 'replace';\n\n  /**\n   * A boolean to indicate if the component should hide\n   * the sign-out and account buttons, useful for internal\n   * sites where the user must be always signed in.\n   */\n  @Prop() signInOnly: boolean = false;\n\n  /**\n   * The event that is fired when the user clicks on\n   * the sign in button\n   */\n  @Event() signInClicked: EventEmitter<void>;\n\n  /**\n   * The event that is fired when the user clicks on the\n   * 'Your account' button\n   */\n  @Event() yourAccountClicked: EventEmitter<void>;\n\n  /**\n   * The event that is fired when the user clicks on the\n   * 'sign out' button\n   */\n  @Event() signOutClicked: EventEmitter<void>;\n\n  handleSignIn = () => {\n    this.signInClicked.emit();\n  };\n\n  handleSignOut = () => {\n    this.signOutClicked.emit();\n  };\n\n  handleYourAccount = () => {\n    this.yourAccountClicked.emit();\n  };\n\n  closeDropdown = () => {\n    const subMenu: HTMLDivElement = this.el.querySelector('div.sub-menu');\n    subMenu.classList.add('desktop-hide');\n  };\n\n  toggleDropdown = (showMenu: boolean) => {\n    const subMenu: HTMLDivElement = this.el.querySelector('div.sub-menu');\n\n    if (showMenu) {\n      subMenu.classList.add('desktop-visible');\n      subMenu.classList.remove('desktop-hide');\n    } else {\n      subMenu.classList.add('desktop-hide');\n      subMenu.classList.remove('desktop-visible');\n    }\n  };\n\n  handleClickSignedIn = (ev: MouseEvent) => {\n    ev.stopPropagation();\n    this.toggleDropdown(false);\n  };\n\n  render() {\n    let { isSignedIn, signedInText, signInOnly } = this;\n    return (\n      <Host>\n        <div class=\"header-profile\">\n          {isSignedIn ? (\n            <div>\n              <div class=\"desktop\" onMouseEnter={() => this.toggleDropdown(true)} onMouseLeave={() => this.toggleDropdown(false)}>\n                <button onClick={this.handleClickSignedIn}>\n                  <span>{signedInText}</span>\n                </button>\n                {!signInOnly ? (\n                  <div class=\"sub-menu desktop-hide\">\n                    <button class=\"sub-menu-item\" onClick={this.handleYourAccount}>\n                      <div>Your Account</div>\n                    </button>\n                    <button class=\"sub-menu-item\" onClick={this.handleSignOut}>\n                      <div>Sign Out</div>\n                    </button>\n                  </div>\n                ) : null}\n              </div>\n              {!signInOnly ? (\n                <div class=\"not-desktop\">\n                  <button class=\"sub-menu-item\" onClick={this.handleYourAccount}>\n                    <span>Your Account</span>\n                  </button>\n                  <button class=\"sub-menu-item\" onClick={this.handleSignOut}>\n                    <span>Sign Out</span>\n                  </button>\n                </div>\n              ) : null}\n            </div>\n          ) : (\n            <button class=\"sub-menu-item\" onClick={this.handleSignIn}>\n              <span>Sign In</span>\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"admiralty-header-profile.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,qhMAAqhM,CAAC;AAC/iM,qCAAe,gBAAgB;;MCMlB,sBAAsB;;;;;;QAsCjC,iBAAY,GAAG;YACb,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;SAC3B,CAAC;QAEF,kBAAa,GAAG;YACd,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;SAC5B,CAAC;QAEF,sBAAiB,GAAG;YAClB,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;SAChC,CAAC;QAEF,kBAAa,GAAG;YACd,MAAM,OAAO,GAAmB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;YACtE,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;SACvC,CAAC;QAEF,mBAAc,GAAG,CAAC,QAAiB;YACjC,MAAM,OAAO,GAAmB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;YAEtE,IAAI,QAAQ,EAAE;gBACZ,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;gBACzC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;aAC1C;iBAAM;gBACL,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;gBACtC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;aAC7C;SACF,CAAC;QAEF,wBAAmB,GAAG,CAAC,EAAc;YACnC,EAAE,CAAC,eAAe,EAAE,CAAC;YACrB,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;SAC5B,CAAC;0BAhE4B,KAAK;4BAKJ,SAAS;0BAOV,KAAK;;IAsDnC,MAAM;QACJ,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QACpD,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,gBAAgB,IACxB,UAAU,IACT,eACE,WAAK,KAAK,EAAC,SAAS,EAAC,YAAY,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,IAChH,cAAQ,OAAO,EAAE,IAAI,CAAC,mBAAmB,IACvC,gBAAO,YAAY,CAAQ,CACpB,EACR,CAAC,UAAU,IACV,WAAK,KAAK,EAAC,uBAAuB,IAChC,cAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IAC3D,8BAAuB,CAChB,EACT,cAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,IACvD,0BAAmB,CACZ,CACL,IACJ,IAAI,CACJ,EACL,CAAC,UAAU,IACV,WAAK,KAAK,EAAC,aAAa,IACtB,cAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IAC3D,+BAAyB,CAClB,EACT,cAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,IACvD,2BAAqB,CACd,CACL,IACJ,IAAI,CACJ,KAEN,cAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,IACtD,0BAAoB,CACb,CACV,CACG,CACD,EACP;KACH;;;;;;;","names":[],"sources":["src/components/header-profile/header-profile.scss?tag=admiralty-header-profile&encapsulation=scoped","src/components/header-profile/header-profile.tsx"],"sourcesContent":["@import 'header-profile.vars';\n\n@mixin active {\n  box-shadow: inset 0 -5px $header-profile-active-colour;\n}\n\n.header-profile {\n  color: $header-profile-text-colour;\n  cursor: pointer;\n\n  & > div {\n    display: flex;\n  }\n\n  @include desktop-only {\n    .not-desktop {\n      display: none;\n    }\n\n    display: flex;\n    flex: 0;\n    flex-direction: column;\n    font-size: $header-profile-text-size !important;\n    height: 100%;\n    justify-content: center;\n    line-height: 1.33em;\n    margin-bottom: $header-profile-desktop-only-margin-bottom;\n    min-width: 4em;\n    max-width: 11.1em;\n    padding: $header-profile-desktop-only-padding;\n    position: relative;\n    text-align: center;\n\n    button {\n      all: unset;\n      height: 100%;\n      width: 100%;\n      span {\n        color: $header-profile-text-colour;\n        font-weight: $header-profile-text-weight;\n        padding: $header-profile-desktop-only-button-padding;\n      }\n\n      &:focus span,\n      &:focus div {\n        @include focus-highlight;\n      }\n    }\n\n    &:hover {\n      @include active;\n      background-color: $header-profile-hover-background-colour;\n\n      .desktop .sub-menu {\n        display: flex;\n      }\n    }\n\n    &.active {\n      @include active;\n\n      .sub-menu {\n        display: flex;\n      }\n    }\n\n    .sub-menu {\n      display: none;\n      flex-direction: column;\n      font-size: $header-profile-text-size;\n      position: absolute;\n      top: 100%;\n      right: 0;\n      border: 1px solid $header-profile-divider-colour;\n      width: 300px;\n\n      &.desktop-visible {\n        display: flex;\n      }\n\n      &.desktop-hide {\n        display: none;\n      }\n\n      .sub-menu-item {\n        box-sizing: content-box;\n        margin: $header-profile-desktop-only-sub-menu-item-margin;\n        width: 100%;\n\n        all: unset;\n        box-sizing: border-box;\n        display: block;\n        font-weight: $header-profile-sub-item-text-weight;\n        height: 100%;\n        padding: $header-profile-desktop-only-sub-menu-item-padding;\n        text-align: left;\n        width: 100%;\n\n        &:hover {\n          background-color: $header-profile-hover-background-colour;\n        }\n      }\n    }\n  }\n\n  @include not-desktop {\n    .desktop {\n      display: none;\n    }\n\n    border-top: 1px solid $header-profile-divider-colour;\n\n    .sub-menu-item {\n      display: block;\n      box-sizing: border-box;\n      background-color: unset;\n      text-align: unset;\n      text-decoration: unset;\n      width: 100%;\n      padding: $header-profile-not-desktop-sub-menu-item-padding;\n\n      span {\n        padding: $header-profile-not-desktop-sub-menu-item-span-padding;\n        color: $header-profile-text-colour;\n        font-size: $header-profile-text-size;\n        font-weight: $header-profile-text-weight;\n      }\n\n      &:hover {\n        background-color: $header-profile-hover-background-colour;\n      }\n\n      &:focus {\n        outline: none;\n        span {\n          @include focus-highlight;\n        }\n      }\n    }\n  }\n}\n","import { Component, Event, Host, h, Prop, EventEmitter, Element } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-header-profile',\n  styleUrl: 'header-profile.scss',\n  scoped: true,\n})\nexport class HeaderProfileComponent {\n  @Element() el: HTMLElement;\n\n  /**\n   * A boolean to indicate if the user is signed in or not\n   */\n  @Prop() isSignedIn: boolean = false;\n\n  /**\n   * The text that is displayed after the user signs in\n   */\n  @Prop() signedInText: string = 'replace';\n\n  /**\n   * A boolean to indicate if the component should hide\n   * the sign-out and account buttons, useful for internal\n   * sites where the user must be always signed in.\n   */\n  @Prop() signInOnly: boolean = false;\n\n  /**\n   * The event that is fired when the user clicks on\n   * the sign in button\n   */\n  @Event() signInClicked: EventEmitter<void>;\n\n  /**\n   * The event that is fired when the user clicks on the\n   * 'Your account' button\n   */\n  @Event() yourAccountClicked: EventEmitter<void>;\n\n  /**\n   * The event that is fired when the user clicks on the\n   * 'sign out' button\n   */\n  @Event() signOutClicked: EventEmitter<void>;\n\n  handleSignIn = () => {\n    this.signInClicked.emit();\n  };\n\n  handleSignOut = () => {\n    this.signOutClicked.emit();\n  };\n\n  handleYourAccount = () => {\n    this.yourAccountClicked.emit();\n  };\n\n  closeDropdown = () => {\n    const subMenu: HTMLDivElement = this.el.querySelector('div.sub-menu');\n    subMenu.classList.add('desktop-hide');\n  };\n\n  toggleDropdown = (showMenu: boolean) => {\n    const subMenu: HTMLDivElement = this.el.querySelector('div.sub-menu');\n\n    if (showMenu) {\n      subMenu.classList.add('desktop-visible');\n      subMenu.classList.remove('desktop-hide');\n    } else {\n      subMenu.classList.add('desktop-hide');\n      subMenu.classList.remove('desktop-visible');\n    }\n  };\n\n  handleClickSignedIn = (ev: MouseEvent) => {\n    ev.stopPropagation();\n    this.toggleDropdown(false);\n  };\n\n  render() {\n    let { isSignedIn, signedInText, signInOnly } = this;\n    return (\n      <Host>\n        <div class=\"header-profile\">\n          {isSignedIn ? (\n            <div>\n              <div class=\"desktop\" onMouseEnter={() => this.toggleDropdown(true)} onMouseLeave={() => this.toggleDropdown(false)}>\n                <button onClick={this.handleClickSignedIn}>\n                  <span>{signedInText}</span>\n                </button>\n                {!signInOnly ? (\n                  <div class=\"sub-menu desktop-hide\">\n                    <button class=\"sub-menu-item\" onClick={this.handleYourAccount}>\n                      <div>Your Account</div>\n                    </button>\n                    <button class=\"sub-menu-item\" onClick={this.handleSignOut}>\n                      <div>Sign Out</div>\n                    </button>\n                  </div>\n                ) : null}\n              </div>\n              {!signInOnly ? (\n                <div class=\"not-desktop\">\n                  <button class=\"sub-menu-item\" onClick={this.handleYourAccount}>\n                    <span>Your Account</span>\n                  </button>\n                  <button class=\"sub-menu-item\" onClick={this.handleSignOut}>\n                    <span>Sign Out</span>\n                  </button>\n                </div>\n              ) : null}\n            </div>\n          ) : (\n            <button class=\"sub-menu-item\" onClick={this.handleSignIn}>\n              <span>Sign In</span>\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/admiralty-header-sub-menu-item.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-60c25452.js';
 
-const headerSubMenuItemCss = ".visually-hidden.sc-admiralty-header-sub-menu-item:not(:focus):not(:active){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}@media (max-width: 1023px){.desktop-only.sc-admiralty-header-sub-menu-item{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header-sub-menu-item{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header-sub-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header-sub-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header-sub-menu-item{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header-sub-menu-item{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header-sub-menu-item{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header-sub-menu-item{display:none}}.header-sub-menu-item.sc-admiralty-header-sub-menu-item{background-color:var(--admiralty-background-colour)}.header-sub-menu-item.sc-admiralty-header-sub-menu-item .title.sc-admiralty-header-sub-menu-item{font-size:var(--admiralty-header-sub-menu-item-font-size, var(--admiralty-font-size-0));font-weight:var(--admiralty-header-sub-menu-item-font-weight, var(--admiralty-font-weight-normal))}.header-sub-menu-item.sc-admiralty-header-sub-menu-item a.sc-admiralty-header-sub-menu-item{text-decoration:none}.header-sub-menu-item.sc-admiralty-header-sub-menu-item:focus{outline:none}.header-sub-menu-item.sc-admiralty-header-sub-menu-item:focus span.sc-admiralty-header-sub-menu-item{outline:3px solid transparent;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);box-shadow:0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-text-colour);text-decoration:none}@media (min-width: 1024px){.header-sub-menu-item.sc-admiralty-header-sub-menu-item{box-sizing:border-box;color:var(--admiralty-colour-primary);display:block;margin-bottom:var(--admiralty-header-sub-menu-item-desktop-margin-bottom, var(--admiralty-spacing-0));padding:var(--admiralty-header-sub-menu-item-desktop-padding, 10px);text-align:left;width:300px}.header-sub-menu-item.sc-admiralty-header-sub-menu-item .title.sc-admiralty-header-sub-menu-item{display:block}.header-sub-menu-item.sc-admiralty-header-sub-menu-item:hover{background-color:var(--admiralty-hover-background-colour)}}@media (max-width: 1023px){.header-sub-menu-item.sc-admiralty-header-sub-menu-item{display:block;box-sizing:border-box;padding:var(--admiralty-header-sub-menu-item-not-desktop-padding, var(--admiralty-spacing-3) var(--admiralty-spacing-6));cursor:pointer;color:var(--admiralty-colour-primary);font-weight:var(--admiralty-header-sub-menu-item-not-desktop-font-weight, var(--admiralty-font-weight-medium));background-color:unset;text-align:unset;text-decoration:unset}.header-sub-menu-item.sc-admiralty-header-sub-menu-item:hover{background-color:var(--admiralty-hover-background-colour)}.header-sub-menu-item.sc-admiralty-header-sub-menu-item:focus .title.sc-admiralty-header-sub-menu-item{box-shadow:0 -4px var(--admiralty-focus-colour), 0 4px var(--admiralty-colour-primary)}}";
+const headerSubMenuItemCss = ".visually-hidden.sc-admiralty-header-sub-menu-item:not(:focus):not(:active){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}@media (max-width: 1023px){.desktop-only.sc-admiralty-header-sub-menu-item{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header-sub-menu-item{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header-sub-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header-sub-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header-sub-menu-item{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header-sub-menu-item{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header-sub-menu-item{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header-sub-menu-item{display:none}}.header-sub-menu-item.sc-admiralty-header-sub-menu-item{background-color:var(--admiralty-background-colour)}.header-sub-menu-item.sc-admiralty-header-sub-menu-item .title.sc-admiralty-header-sub-menu-item{font-size:var(--admiralty-header-sub-menu-item-font-size, var(--admiralty-font-size-0));font-weight:var(--admiralty-header-sub-menu-item-font-weight, var(--admiralty-font-weight-normal))}.header-sub-menu-item.sc-admiralty-header-sub-menu-item a.sc-admiralty-header-sub-menu-item{text-decoration:none}.header-sub-menu-item.sc-admiralty-header-sub-menu-item:focus{outline:none}.header-sub-menu-item.sc-admiralty-header-sub-menu-item:focus span.sc-admiralty-header-sub-menu-item{outline:3px solid transparent;color:var(--admiralty-focus-contrast);background-color:var(--admiralty-focus-colour);box-shadow:0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-focus-contrast);text-decoration:none}@media (min-width: 1024px){.header-sub-menu-item.sc-admiralty-header-sub-menu-item{box-sizing:border-box;color:var(--admiralty-colour-primary);display:block;margin-bottom:var(--admiralty-header-sub-menu-item-desktop-margin-bottom, var(--admiralty-spacing-0));padding:var(--admiralty-header-sub-menu-item-desktop-padding, 10px);text-align:left;width:300px}.header-sub-menu-item.sc-admiralty-header-sub-menu-item .title.sc-admiralty-header-sub-menu-item{display:block}.header-sub-menu-item.sc-admiralty-header-sub-menu-item:hover{background-color:var(--admiralty-hover-background-colour)}}@media (max-width: 1023px){.header-sub-menu-item.sc-admiralty-header-sub-menu-item{display:block;box-sizing:border-box;padding:var(--admiralty-header-sub-menu-item-not-desktop-padding, var(--admiralty-spacing-3) var(--admiralty-spacing-6));cursor:pointer;color:var(--admiralty-colour-primary);font-weight:var(--admiralty-header-sub-menu-item-not-desktop-font-weight, var(--admiralty-font-weight-medium));background-color:unset;text-align:unset;text-decoration:unset}.header-sub-menu-item.sc-admiralty-header-sub-menu-item:hover{background-color:var(--admiralty-hover-background-colour)}.header-sub-menu-item.sc-admiralty-header-sub-menu-item:focus .title.sc-admiralty-header-sub-menu-item{box-shadow:0 -4px var(--admiralty-focus-colour), 0 4px var(--admiralty-colour-primary)}}";
 const AdmiraltyHeaderSubMenuItemStyle0 = headerSubMenuItemCss;
 
 const HeaderSubMenuItemComponent = class {

package/dist/esm/admiralty-header-sub-menu-item.entry.js.map

@@ -1 +1 @@
-{"file":"admiralty-header-sub-menu-item.entry.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,g1GAAg1G,CAAC;AAC92G,yCAAe,oBAAoB;;MCMtB,0BAA0B;;;;;;gCAeA,KAAK;;IAQ1C,WAAW,CAAC,EAAc;QACxB,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,EAAE,CAAC,cAAc,EAAE,CAAC;SACrB;QACD,EAAE,CAAC,eAAe,EAAE,CAAC;QAErB,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KACnD;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,IAAI,IACR,WAAK,KAAK,EAAC,sBAAsB,EAAC,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,IACnE,SAAG,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,IAClE,IAAI,CAAC,SAAS,EACf,eAAa,CACX,CACA,KAEN,cAAQ,KAAK,EAAC,sBAAsB,EAAC,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,IACtE,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAQ,CACpC,CACV,CACI,EACP;KACH;;;;;;","names":[],"sources":["src/components/header-sub-menu-item/header-sub-menu-item.scss?tag=admiralty-header-sub-menu-item&encapsulation=scoped","src/components/header-sub-menu-item/header-sub-menu-item.tsx"],"sourcesContent":["@import 'header-sub-menu-item.vars';\n\n@mixin active {\n  background-color: $header-sub-menu-item-hover-background-colour;\n}\n\n.header-sub-menu-item {\n  background-color: $header-sub-menu-item-background-colour;\n\n  .title {\n    font-size: $header-sub-menu-item-text-size;\n    font-weight: $header-sub-menu-item-text-weight;\n  }\n\n  a {\n    text-decoration: none;\n  }\n\n  &:focus {\n    outline: none;\n\n    span {\n      @include focus-highlight;\n    }\n  }\n\n  @include desktop-only {\n    box-sizing: border-box;\n    color: $header-sub-menu-item-text-colour;\n    display: block;\n    margin-bottom: $header-sub-menu-item-desktop-margin-bottom;\n    padding: $header-sub-menu-item-desktop-padding;\n    text-align: left;\n    width: 300px;\n\n    .title {\n      display: block;\n    }\n\n    &:hover {\n      @include active;\n    }\n  }\n\n  @include not-desktop {\n    display: block;\n    box-sizing: border-box;\n    padding: $header-sub-menu-item-not-desktop-padding;\n    cursor: pointer;\n    color: $header-sub-menu-item-text-colour;\n    font-weight: $header-sub-menu-item-not-desktop-text-weight;\n    background-color: unset;\n    text-align: unset;\n    text-decoration: unset;\n\n    &:hover {\n      @include active;\n    }\n\n    &:focus {\n      .title {\n        box-shadow: 0 -4px $header-sub-menu-item-focus-colour, 0 4px $header-sub-menu-item-text-colour;\n      }\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-header-sub-menu-item',\n  styleUrl: 'header-sub-menu-item.scss',\n  scoped: true,\n})\nexport class HeaderSubMenuItemComponent {\n  /**\n   * The text that will be displayed in the menu\n   */\n  @Prop() menuTitle: string;\n\n  /**\n   * The URL to link to.\n   */\n  @Prop() href: string;\n\n  /**\n   * Causes the default browser redirect to be suppressed. Can be used in conjunction with the\n   * `onMenuItemClick` event to use a navigation router and prevent a full page reload when navigating.\n   */\n  @Prop() suppressRedirect?: boolean = false;\n\n  /**\n   * The event that is fired when a user clicks on the menu item.\n   * Event contains the menu item text.\n   */\n  @Event() subMenuItemClick: EventEmitter<string>;\n\n  handleClick(ev: MouseEvent): CustomEvent<string> {\n    if (this.suppressRedirect) {\n      ev.preventDefault();\n    }\n    ev.stopPropagation();\n\n    return this.subMenuItemClick.emit(this.menuTitle);\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.href ? (\n          <div class=\"header-sub-menu-item\" onClick={ev => this.handleClick(ev)}>\n            <a class=\"title\" href={this.href} onClick={ev => this.handleClick(ev)}>\n              {this.menuTitle}\n              <slot></slot>\n            </a>\n          </div>\n        ) : (\n          <button class=\"header-sub-menu-item\" onClick={ev => this.handleClick(ev)}>\n            <span class=\"title\">{this.menuTitle}</span>\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"admiralty-header-sub-menu-item.entry.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,s1GAAs1G,CAAC;AACp3G,yCAAe,oBAAoB;;MCMtB,0BAA0B;;;;;;gCAeA,KAAK;;IAQ1C,WAAW,CAAC,EAAc;QACxB,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,EAAE,CAAC,cAAc,EAAE,CAAC;SACrB;QACD,EAAE,CAAC,eAAe,EAAE,CAAC;QAErB,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KACnD;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,IAAI,IACR,WAAK,KAAK,EAAC,sBAAsB,EAAC,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,IACnE,SAAG,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,IAClE,IAAI,CAAC,SAAS,EACf,eAAa,CACX,CACA,KAEN,cAAQ,KAAK,EAAC,sBAAsB,EAAC,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,IACtE,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAQ,CACpC,CACV,CACI,EACP;KACH;;;;;;","names":[],"sources":["src/components/header-sub-menu-item/header-sub-menu-item.scss?tag=admiralty-header-sub-menu-item&encapsulation=scoped","src/components/header-sub-menu-item/header-sub-menu-item.tsx"],"sourcesContent":["@import 'header-sub-menu-item.vars';\n\n@mixin active {\n  background-color: $header-sub-menu-item-hover-background-colour;\n}\n\n.header-sub-menu-item {\n  background-color: $header-sub-menu-item-background-colour;\n\n  .title {\n    font-size: $header-sub-menu-item-text-size;\n    font-weight: $header-sub-menu-item-text-weight;\n  }\n\n  a {\n    text-decoration: none;\n  }\n\n  &:focus {\n    outline: none;\n\n    span {\n      @include focus-highlight;\n    }\n  }\n\n  @include desktop-only {\n    box-sizing: border-box;\n    color: $header-sub-menu-item-text-colour;\n    display: block;\n    margin-bottom: $header-sub-menu-item-desktop-margin-bottom;\n    padding: $header-sub-menu-item-desktop-padding;\n    text-align: left;\n    width: 300px;\n\n    .title {\n      display: block;\n    }\n\n    &:hover {\n      @include active;\n    }\n  }\n\n  @include not-desktop {\n    display: block;\n    box-sizing: border-box;\n    padding: $header-sub-menu-item-not-desktop-padding;\n    cursor: pointer;\n    color: $header-sub-menu-item-text-colour;\n    font-weight: $header-sub-menu-item-not-desktop-text-weight;\n    background-color: unset;\n    text-align: unset;\n    text-decoration: unset;\n\n    &:hover {\n      @include active;\n    }\n\n    &:focus {\n      .title {\n        box-shadow: 0 -4px $header-sub-menu-item-focus-colour, 0 4px $header-sub-menu-item-text-colour;\n      }\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-header-sub-menu-item',\n  styleUrl: 'header-sub-menu-item.scss',\n  scoped: true,\n})\nexport class HeaderSubMenuItemComponent {\n  /**\n   * The text that will be displayed in the menu\n   */\n  @Prop() menuTitle: string;\n\n  /**\n   * The URL to link to.\n   */\n  @Prop() href: string;\n\n  /**\n   * Causes the default browser redirect to be suppressed. Can be used in conjunction with the\n   * `onMenuItemClick` event to use a navigation router and prevent a full page reload when navigating.\n   */\n  @Prop() suppressRedirect?: boolean = false;\n\n  /**\n   * The event that is fired when a user clicks on the menu item.\n   * Event contains the menu item text.\n   */\n  @Event() subMenuItemClick: EventEmitter<string>;\n\n  handleClick(ev: MouseEvent): CustomEvent<string> {\n    if (this.suppressRedirect) {\n      ev.preventDefault();\n    }\n    ev.stopPropagation();\n\n    return this.subMenuItemClick.emit(this.menuTitle);\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.href ? (\n          <div class=\"header-sub-menu-item\" onClick={ev => this.handleClick(ev)}>\n            <a class=\"title\" href={this.href} onClick={ev => this.handleClick(ev)}>\n              {this.menuTitle}\n              <slot></slot>\n            </a>\n          </div>\n        ) : (\n          <button class=\"header-sub-menu-item\" onClick={ev => this.handleClick(ev)}>\n            <span class=\"title\">{this.menuTitle}</span>\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/admiralty-header.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, f as forceUpdate, h, g as getElement } from './index-60c25452.js';
 
-const headerCss = ".visually-hidden.sc-admiralty-header:not(:focus):not(:active){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}@media (max-width: 1023px){.desktop-only.sc-admiralty-header{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header{display:none}}.admiralty-header.sc-admiralty-header{font-size:var(--admiralty-header-font-size, var(--admiralty-font-size-0));font-weight:var(--admiralty-header-font-weight, var(--admiralty-font-weight-normal));line-height:24px}.header-menu.sc-admiralty-header{border-bottom:1px solid var(--admiralty-colour-light);display:flex;flex-direction:row;background-color:var(--admiralty-background-colour);height:5em;min-height:5em;position:relative}@media (max-width: 1023px){.header-menu.sc-admiralty-header{height:56px;min-height:56px;position:relative}}.header-branding.sc-admiralty-header{display:flex;flex-direction:row;flex-grow:1;font-size:var(--admiralty-header-brand-font-size, var(--admiralty-font-size-0));padding:var(--admiralty-header-branding-padding, 1.3em 0 1.3em 1.3em)}@media (max-width: 1023px){.header-branding.sc-admiralty-header{padding:var(--admiralty-header-branding-not-desktop-padding, var(--admiralty-spacing-3) var(--admiralty-spacing-0) var(--admiralty-spacing-3) var(--admiralty-spacing-3));flex-grow:1}}.header-branding.sc-admiralty-header a.header-logo.sc-admiralty-header{background-color:transparent;color:var(--admiralty-colour-primary)}.header-branding.sc-admiralty-header a.header-logo.sc-admiralty-header img.sc-admiralty-header{height:100%;width:9em}.header-branding.sc-admiralty-header a.header-logo.sc-admiralty-header:focus{outline:3px solid transparent;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);box-shadow:0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-text-colour);text-decoration:none}.header-branding.sc-admiralty-header .vertical-seperator.sc-admiralty-header{border-right:1px solid var(--admiralty-colour-light);margin:var(--admiralty-header-vertical-separator-margin, var(--admiralty-spacing-0) var(--admiralty-spacing-6))}@media (max-width: 1023px){.header-branding.sc-admiralty-header .vertical-seperator.sc-admiralty-header{margin:var(--admiralty-header-vertical-separator-not-desktop-margin, var(--admiralty-spacing-0) var(--admiralty-spacing-3))}}.header-branding.sc-admiralty-header .header-title.sc-admiralty-header{display:flex;flex-direction:column;flex-grow:1;justify-content:center;font-size:var(--admiralty-header-title-not-desktop-font-size, var(--admiralty-font-size-2));line-height:2em;margin-top:var(--admiralty-header-title-margin-top, var(--admiralty-spacing-1));margin-bottom:var(--admiralty-header-title-margin-bottom, var(--admiralty-spacing-unset));user-select:none}@media (max-width: 1023px){.header-branding.sc-admiralty-header .header-title.sc-admiralty-header{font-size:var(--admiralty-header-title-font-size, var(--admiralty-font-size-4));line-height:24px;white-space:pre-wrap}}.header-branding.sc-admiralty-header .header-title.sc-admiralty-header a.sc-admiralty-header{cursor:pointer;font-size:var(--admiralty-font-size-3);font-weight:var(--admiralty-header-title-font-weight, var(--admiralty-font-weight-medium));line-height:1;max-width:fit-content;text-decoration:none}@media (max-width: 1023px){.header-branding.sc-admiralty-header .header-title.sc-admiralty-header a.sc-admiralty-header{font-size:var(--admiralty-font-size-2)}}.header-menus.sc-admiralty-header{display:flex;justify-content:flex-end}.header-menus.sc-admiralty-header .mobile-menu-toggle.sc-admiralty-header{display:none;flex-direction:column;justify-content:center}@media (max-width: 1023px){.header-menus.sc-admiralty-header .mobile-menu-toggle.display-hamburger.sc-admiralty-header{display:flex}}.header-menus.sc-admiralty-header .mobile-menu-toggle.sc-admiralty-header button.sc-admiralty-header{background-color:unset}.header-menus.sc-admiralty-header .mobile-menu-toggle.sc-admiralty-header button.sc-admiralty-header admiralty-icon.sc-admiralty-header{font-size:var(--admiralty-header-menu-icon-font-size, var(--admiralty-font-size-2));font-weight:var(--admiralty-header-menu-icon-font-weight, var(--admiralty-font-weight-bold));padding:var(--admiralty-header-menu-mobile-button-icon-padding, var(--admiralty-spacing-3));cursor:pointer;min-width:24px;min-height:24px;text-align:center;user-select:none;color:var(--admiralty-colour-primary)}.header-menus.sc-admiralty-header .mobile-menu-toggle.sc-admiralty-header button.sc-admiralty-header:focus{outline:3px solid transparent;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);box-shadow:0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-text-colour);text-decoration:none;outline:none;box-shadow:0 -4px var(--admiralty-text-colour) inset}@media (max-width: 1023px){.header-menus.sc-admiralty-header .menu-sections.sc-admiralty-header{display:none;min-height:56px;position:relative;right:0;position:absolute;top:100%;z-index:999;min-width:100%;background-color:var(--admiralty-background-colour);border:1px solid var(--admiralty-colour-light)}}@media (max-width: 1023px) and (max-width: 1023px) and (min-width: 480px){.header-menus.sc-admiralty-header .menu-sections.sc-admiralty-header{min-width:50%;margin-left:var(--admiralty-header-menu-section-tablet-only-margin-left, 50%)}}@media (max-width: 1023px){.header-menus.sc-admiralty-header .menu-sections.mob-menus-visible.sc-admiralty-header{display:block}}@media (min-width: 1024px){.header-menus.sc-admiralty-header .menu-sections.sc-admiralty-header,.header-menus.sc-admiralty-header .menu-items.sc-admiralty-header,.header-menus.sc-admiralty-header .header-profile.sc-admiralty-header{display:flex;flex:0;flex-direction:row}}";
+const headerCss = ".visually-hidden.sc-admiralty-header:not(:focus):not(:active){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}@media (max-width: 1023px){.desktop-only.sc-admiralty-header{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header{display:none}}.admiralty-header.sc-admiralty-header{font-size:var(--admiralty-header-font-size, var(--admiralty-font-size-0));font-weight:var(--admiralty-header-font-weight, var(--admiralty-font-weight-normal));line-height:24px}.header-menu.sc-admiralty-header{border-bottom:1px solid var(--admiralty-colour-light);display:flex;flex-direction:row;background-color:var(--admiralty-header-background-colour);height:5em;min-height:5em;position:relative}@media (max-width: 1023px){.header-menu.sc-admiralty-header{height:56px;min-height:56px;position:relative}}.header-branding.sc-admiralty-header{display:flex;flex-direction:row;flex-grow:1;font-size:var(--admiralty-header-brand-font-size, var(--admiralty-font-size-0));padding:var(--admiralty-header-branding-padding, 1.3em 0 1.3em 1.3em)}@media (max-width: 1023px){.header-branding.sc-admiralty-header{padding:var(--admiralty-header-branding-not-desktop-padding, var(--admiralty-spacing-3) var(--admiralty-spacing-0) var(--admiralty-spacing-3) var(--admiralty-spacing-3));flex-grow:1}}.header-branding.sc-admiralty-header a.header-logo.sc-admiralty-header{background-color:transparent;color:var(--admiralty-colour-primary)}.header-branding.sc-admiralty-header a.header-logo.sc-admiralty-header img.sc-admiralty-header{height:100%;width:9em}.header-branding.sc-admiralty-header a.header-logo.sc-admiralty-header:focus{outline:3px solid transparent;color:var(--admiralty-focus-contrast);background-color:var(--admiralty-focus-colour);box-shadow:0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-focus-contrast);text-decoration:none}@media (prefers-color-scheme: dark){.header-branding.sc-admiralty-header img.sc-admiralty-header{filter:invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg)}}.header-branding.sc-admiralty-header .vertical-seperator.sc-admiralty-header{border-right:1px solid var(--admiralty-colour-light);margin:var(--admiralty-header-vertical-separator-margin, var(--admiralty-spacing-0) var(--admiralty-spacing-6))}@media (max-width: 1023px){.header-branding.sc-admiralty-header .vertical-seperator.sc-admiralty-header{margin:var(--admiralty-header-vertical-separator-not-desktop-margin, var(--admiralty-spacing-0) var(--admiralty-spacing-3))}}.header-branding.sc-admiralty-header .header-title.sc-admiralty-header{display:flex;flex-direction:column;flex-grow:1;justify-content:center;font-size:var(--admiralty-header-title-not-desktop-font-size, var(--admiralty-font-size-2));line-height:2em;margin-top:var(--admiralty-header-title-margin-top, var(--admiralty-spacing-1));margin-bottom:var(--admiralty-header-title-margin-bottom, var(--admiralty-spacing-unset));user-select:none}@media (max-width: 1023px){.header-branding.sc-admiralty-header .header-title.sc-admiralty-header{font-size:var(--admiralty-header-title-font-size, var(--admiralty-font-size-4));line-height:24px;white-space:pre-wrap}}.header-branding.sc-admiralty-header .header-title.sc-admiralty-header a.sc-admiralty-header{cursor:pointer;font-size:var(--admiralty-font-size-3);font-weight:var(--admiralty-header-title-font-weight, var(--admiralty-font-weight-medium));line-height:1;max-width:fit-content;text-decoration:none}@media (max-width: 1023px){.header-branding.sc-admiralty-header .header-title.sc-admiralty-header a.sc-admiralty-header{font-size:var(--admiralty-font-size-2)}}.header-menus.sc-admiralty-header{display:flex;justify-content:flex-end}.header-menus.sc-admiralty-header .mobile-menu-toggle.sc-admiralty-header{display:none;flex-direction:column;justify-content:center}@media (max-width: 1023px){.header-menus.sc-admiralty-header .mobile-menu-toggle.display-hamburger.sc-admiralty-header{display:flex}}.header-menus.sc-admiralty-header .mobile-menu-toggle.sc-admiralty-header button.sc-admiralty-header{background-color:unset}.header-menus.sc-admiralty-header .mobile-menu-toggle.sc-admiralty-header button.sc-admiralty-header admiralty-icon.sc-admiralty-header{font-size:var(--admiralty-header-menu-icon-font-size, var(--admiralty-font-size-2));font-weight:var(--admiralty-header-menu-icon-font-weight, var(--admiralty-font-weight-bold));padding:var(--admiralty-header-menu-mobile-button-icon-padding, var(--admiralty-spacing-3));cursor:pointer;min-width:24px;min-height:24px;text-align:center;user-select:none;color:var(--admiralty-colour-primary)}.header-menus.sc-admiralty-header .mobile-menu-toggle.sc-admiralty-header button.sc-admiralty-header:focus{outline:3px solid transparent;color:var(--admiralty-focus-contrast);background-color:var(--admiralty-focus-colour);box-shadow:0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-focus-contrast);text-decoration:none;outline:none;box-shadow:0 -4px var(--admiralty-text-colour) inset}@media (max-width: 1023px){.header-menus.sc-admiralty-header .menu-sections.sc-admiralty-header{display:none;min-height:56px;position:relative;right:0;position:absolute;top:100%;z-index:999;min-width:100%;background-color:var(--admiralty-header-background-colour);border:1px solid var(--admiralty-colour-light)}}@media (max-width: 1023px) and (max-width: 1023px) and (min-width: 480px){.header-menus.sc-admiralty-header .menu-sections.sc-admiralty-header{min-width:50%;margin-left:var(--admiralty-header-menu-section-tablet-only-margin-left, 50%)}}@media (max-width: 1023px){.header-menus.sc-admiralty-header .menu-sections.mob-menus-visible.sc-admiralty-header{display:block}}@media (min-width: 1024px){.header-menus.sc-admiralty-header .menu-sections.sc-admiralty-header,.header-menus.sc-admiralty-header .menu-items.sc-admiralty-header,.header-menus.sc-admiralty-header .header-profile.sc-admiralty-header{display:flex;flex:0;flex-direction:row}}";
 const AdmiraltyHeaderStyle0 = headerCss;
 
 const HeaderComponent = class {

package/dist/esm/admiralty-header.entry.js.map

@@ -1 +1 @@
-{"file":"admiralty-header.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,+0MAA+0M,CAAC;AACl2M,8BAAe,SAAS;;MCUX,eAAe;;;;;8BAUO,IAAI;2BAKP,8BAA8B;0BAK/B,gCAAgC;2BAK/B,WAAW;8BAOf,KAAK;gCAEH,KAAK;;IAIjC,iBAAiB;QACf,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC;;YAEnC,WAAW,CAAC,IAAI,CAAC,CAAC;SACnB,CAAC,CAAC;QACH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YAC7B,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;IAED,mBAAmB;QACjB,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kFAAkF,CAAC,CAAC;QAChI,IAAI,CAAC,gBAAgB,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;KAC/C;IAEO,WAAW,CAAC,EAAc;QAChC,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAC9C;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;KAC5C;IAED,MAAM;QACJ,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAEnF,QACE,4DAAK,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ,IACzC,4DAAK,KAAK,EAAC,aAAa,IACtB,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,0DAAG,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,WAAW,IACtC,4DAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,UAAU,GAAI,CAC7D,EACJ,4DAAK,KAAK,EAAC,oBAAoB,GAAO,EACrC,IAAI,CAAC,WAAW,IACf,UAAI,KAAK,EAAC,cAAc,IACtB,SAAG,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,cAAc,IACzD,WAAW,CACV,CACD,IACH,IAAI,CACJ,EACN,4DAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,cAAc,gBAAY,iBAAiB,IACtE,4DAAK,KAAK,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,CAAC,gBAAgB,EAAE,IACpF,+DAAQ,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE,mBAAiB,IAAI,CAAC,cAAc,gBAAc,IAAI,CAAC,cAAc,GAAG,WAAW,GAAG,WAAW,IAC5I,uEAAgB,IAAI,EAAE,IAAI,CAAC,cAAc,GAAG,eAAe,GAAG,cAAc,GAAmB,CACxF,CACL,EACN,4DAAK,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,CAAC,cAAc,EAAE,IAC7E,4DAAK,KAAK,EAAC,YAAY,IACrB,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EACN,4DAAK,KAAK,EAAC,gBAAgB,IACzB,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACF,CACF,EACN;KACH;;;;;;;","names":[],"sources":["src/components/header/header.scss?tag=admiralty-header&encapsulation=scoped","src/components/header/header.tsx"],"sourcesContent":["@import 'header.vars';\n\n.admiralty-header {\n  font-size: $header-text-size;\n  font-weight: $header-text-weight;\n  line-height: $header-text-line-height;\n}\n\n.header-menu {\n  border-bottom: 1px solid $header-border-colour;\n  display: flex;\n  flex-direction: row;\n  background-color: $header-background-colour;\n  height: 5em;\n  min-height: 5em;\n  position: relative;\n\n  @include not-desktop {\n    height: 56px;\n    min-height: 56px;\n    position: relative;\n  }\n}\n\n.header-branding {\n  display: flex;\n  flex-direction: row;\n  flex-grow: 1;\n  font-size: $header-brand-text-size;\n  padding: $header-branding-padding;\n\n  @include not-desktop {\n    padding: $header-branding-not-desktop-padding;\n    flex-grow: 1;\n  }\n\n  a.header-logo {\n    background-color: transparent;\n    color: $header-logo-colour;\n\n    img {\n      height: 100%;\n      width: 9em;\n    }\n\n    &:focus {\n      @include focus-highlight;\n    }\n  }\n\n  .vertical-seperator {\n    border-right: 1px solid $header-separator-colour;\n    margin: $header-vertical-separator-margin;\n    @include not-desktop {\n      margin: $header-vertical-separator-not-desktop-margin;\n    }\n  }\n\n  .header-title {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    justify-content: center;\n    font-size: $header-title-text-size;\n    line-height: 2em;\n    margin-top: $header-title-margin-top;\n    margin-bottom: $header-title-margin-bottom;\n    user-select: none;\n\n    @include not-desktop {\n      font-size: $header-title-not-desktop-text-size;\n      line-height: 24px;\n      white-space: pre-wrap;\n    }\n\n    a {\n      cursor: pointer;\n      font-size: var(--admiralty-font-size-3);\n      font-weight: $header-title-text-weight;\n      line-height: 1;\n      max-width: fit-content;\n      text-decoration: none;\n\n      @include not-desktop {\n        font-size: var(--admiralty-font-size-2);\n      }\n    }\n  }\n}\n\n.header-menus {\n  display: flex;\n  justify-content: flex-end;\n\n  .mobile-menu-toggle {\n    display: none;\n\n    @include not-desktop {\n      &.display-hamburger {\n        display: flex;\n      }\n    }\n    flex-direction: column;\n    justify-content: center;\n\n    button {\n      background-color: unset;\n\n      admiralty-icon {\n        font-size: $header-menu-icon-font-size;\n        font-weight: $header-menu-icon-font-weight;\n        padding: $header-menu-mobile-button-icon-padding;\n        cursor: pointer;\n        min-width: 24px;\n        min-height: 24px;\n        text-align: center;\n        user-select: none;\n        color: $header-icon-colour;\n      }\n\n      &:focus {\n        @include focus-highlight;\n\n        outline: none;\n        box-shadow: 0 -4px $header-outline-colour inset;\n      }\n    }\n  }\n\n  @include not-desktop {\n    .menu-sections {\n      display: none;\n\n      min-height: 56px;\n      position: relative;\n      right: 0;\n\n      position: absolute;\n      top: 100%;\n      z-index: 999;\n      min-width: 100%;\n      @include tablet-only {\n        min-width: 50%;\n        margin-left: $header-menu-section-tablet-only-margin-left;\n      }\n\n      background-color: $header-background-colour;\n      border: 1px solid $header-border-colour;\n\n      &.mob-menus-visible {\n        display: block;\n      }\n    }\n  }\n\n  .menu-sections,\n  .menu-items,\n  .header-profile {\n    @include desktop-only {\n      display: flex;\n      flex: 0;\n      flex-direction: row;\n    }\n  }\n}\n","import { Component, Element, Prop, h, EventEmitter, Event, State, forceUpdate } from '@stencil/core';\n\n/**\n * @slot items - 'admiralty-header-menu-item menu-title' and 'admiralty-header-menu-link menu-title' components are placed here for appropriate styling and behaviour\n * @slot profile - 'admiralty-header-profile' components are placed here (the login/logout) options\n */\n@Component({\n  tag: 'admiralty-header',\n  styleUrl: 'header.scss',\n  scoped: true,\n})\nexport class HeaderComponent {\n  @Element() el: HTMLElement;\n  /**\n   * The header title that is displayed to the right of the logo\n   */\n  @Prop() headerTitle: string;\n\n  /**\n   * The url that clicking on the nav link will take you too\n   */\n  @Prop() headerTitleUrl: string = null;\n\n  /**\n   * The destination url when the logo is clicked\n   */\n  @Prop() logoLinkUrl: string = 'https://www.admiralty.co.uk/';\n\n  /**\n   * The uri of the logo image\n   */\n  @Prop() logoImgUrl: string = 'svg/Admiralty stacked logo.svg';\n\n  /**\n   * The alternate image text for the logo image\n   */\n  @Prop() logoAltText: string = 'ADMIRALTY';\n\n  /**\n   * Emits an event that can be listened to when the title in the header is clicked\n   */\n  @Event() titledClicked: EventEmitter<string>;\n\n  @State() mobileMenuOpen = false;\n\n  @State() displayHamburger = false;\n\n  observer: MutationObserver;\n\n  connectedCallback() {\n    this.observer = new MutationObserver(() => {\n      // when new menu items are added to the slots, we need to trigger a render cycle so that they render correctly\n      forceUpdate(this);\n    });\n    this.observer.observe(this.el, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    this.observer.disconnect();\n  }\n\n  componentWillRender() {\n    const childMenus = this.el.querySelectorAll('admiralty-header-menu-item, admiralty-header-menu-link, admiralty-header-profile');\n    this.displayHamburger = childMenus.length > 0;\n  }\n\n  private handleClick(ev: MouseEvent) {\n    ev.preventDefault();\n    this.titledClicked.emit(this.headerTitleUrl);\n  }\n\n  toggleMobileMenu() {\n    this.mobileMenuOpen = !this.mobileMenuOpen;\n  }\n\n  render() {\n    const { logoAltText, logoLinkUrl, logoImgUrl, headerTitle, headerTitleUrl } = this;\n\n    return (\n      <div class=\"admiralty-header\" role=\"banner\">\n        <div class=\"header-menu\">\n          <div class=\"header-branding\">\n            <a class=\"header-logo\" href={logoLinkUrl}>\n              <img class=\"header-image\" alt={logoAltText} src={logoImgUrl} />\n            </a>\n            <div class=\"vertical-seperator\"></div>\n            {this.headerTitle ? (\n              <h2 class=\"header-title\">\n                <a onClick={ev => this.handleClick(ev)} href={headerTitleUrl}>\n                  {headerTitle}\n                </a>\n              </h2>\n            ) : null}\n          </div>\n          <nav role=\"navigation\" class=\"header-menus\" aria-label=\"Site navigation\">\n            <div class={{ 'mobile-menu-toggle': true, 'display-hamburger': this.displayHamburger }}>\n              <button onClick={_ => this.toggleMobileMenu()} aria-expanded={this.mobileMenuOpen} aria-label={this.mobileMenuOpen ? 'Hide menu' : 'Show menu'}>\n                <admiralty-icon name={this.mobileMenuOpen ? \"close-rounded\" : \"menu-rounded\"}></admiralty-icon>\n              </button>\n            </div>\n            <div class={{ \"menu-sections\": true, 'mob-menus-visible': this.mobileMenuOpen }}>\n              <div class=\"menu-items\">\n                <slot name=\"items\"></slot>\n              </div>\n              <div class=\"header-profile\">\n                <slot name=\"profile\"></slot>\n              </div>\n            </div>\n          </nav>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"admiralty-header.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,ygNAAygN,CAAC;AAC5hN,8BAAe,SAAS;;MCUX,eAAe;;;;;8BAUO,IAAI;2BAKP,8BAA8B;0BAK/B,gCAAgC;2BAK/B,WAAW;8BAOf,KAAK;gCAEH,KAAK;;IAIjC,iBAAiB;QACf,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC;;YAEnC,WAAW,CAAC,IAAI,CAAC,CAAC;SACnB,CAAC,CAAC;QACH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YAC7B,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;IAED,mBAAmB;QACjB,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kFAAkF,CAAC,CAAC;QAChI,IAAI,CAAC,gBAAgB,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;KAC/C;IAEO,WAAW,CAAC,EAAc;QAChC,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAC9C;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;KAC5C;IAED,MAAM;QACJ,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAEnF,QACE,4DAAK,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ,IACzC,4DAAK,KAAK,EAAC,aAAa,IACtB,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,0DAAG,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,WAAW,IACtC,4DAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,UAAU,GAAI,CAC7D,EACJ,4DAAK,KAAK,EAAC,oBAAoB,GAAO,EACrC,IAAI,CAAC,WAAW,IACf,UAAI,KAAK,EAAC,cAAc,IACtB,SAAG,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,cAAc,IACzD,WAAW,CACV,CACD,IACH,IAAI,CACJ,EACN,4DAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,cAAc,gBAAY,iBAAiB,IACtE,4DAAK,KAAK,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,CAAC,gBAAgB,EAAE,IACpF,+DAAQ,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE,mBAAiB,IAAI,CAAC,cAAc,gBAAc,IAAI,CAAC,cAAc,GAAG,WAAW,GAAG,WAAW,IAC5I,uEAAgB,IAAI,EAAE,IAAI,CAAC,cAAc,GAAG,eAAe,GAAG,cAAc,GAAmB,CACxF,CACL,EACN,4DAAK,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,CAAC,cAAc,EAAE,IAC7E,4DAAK,KAAK,EAAC,YAAY,IACrB,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EACN,4DAAK,KAAK,EAAC,gBAAgB,IACzB,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACF,CACF,EACN;KACH;;;;;;;","names":[],"sources":["src/components/header/header.scss?tag=admiralty-header&encapsulation=scoped","src/components/header/header.tsx"],"sourcesContent":["@import 'header.vars';\n\n.admiralty-header {\n  font-size: $header-text-size;\n  font-weight: $header-text-weight;\n  line-height: $header-text-line-height;\n}\n\n.header-menu {\n  border-bottom: 1px solid $header-border-colour;\n  display: flex;\n  flex-direction: row;\n  background-color: $header-background-colour;\n  height: 5em;\n  min-height: 5em;\n  position: relative;\n\n  @include not-desktop {\n    height: 56px;\n    min-height: 56px;\n    position: relative;\n  }\n}\n\n.header-branding {\n  display: flex;\n  flex-direction: row;\n  flex-grow: 1;\n  font-size: $header-brand-text-size;\n  padding: $header-branding-padding;\n\n  @include not-desktop {\n    padding: $header-branding-not-desktop-padding;\n    flex-grow: 1;\n  }\n\n  a.header-logo {\n    background-color: transparent;\n    color: $header-logo-colour;\n\n    img {\n      height: 100%;\n      width: 9em;\n    }\n\n    &:focus {\n      @include focus-highlight;\n    }\n  }\n\n  @media (prefers-color-scheme: dark) {\n    img {\n      filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg);\n    }\n  }\n\n  .vertical-seperator {\n    border-right: 1px solid $header-separator-colour;\n    margin: $header-vertical-separator-margin;\n    @include not-desktop {\n      margin: $header-vertical-separator-not-desktop-margin;\n    }\n  }\n\n  .header-title {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    justify-content: center;\n    font-size: $header-title-text-size;\n    line-height: 2em;\n    margin-top: $header-title-margin-top;\n    margin-bottom: $header-title-margin-bottom;\n    user-select: none;\n\n    @include not-desktop {\n      font-size: $header-title-not-desktop-text-size;\n      line-height: 24px;\n      white-space: pre-wrap;\n    }\n\n    a {\n      cursor: pointer;\n      font-size: var(--admiralty-font-size-3);\n      font-weight: $header-title-text-weight;\n      line-height: 1;\n      max-width: fit-content;\n      text-decoration: none;\n\n      @include not-desktop {\n        font-size: var(--admiralty-font-size-2);\n      }\n    }\n  }\n}\n\n.header-menus {\n  display: flex;\n  justify-content: flex-end;\n\n  .mobile-menu-toggle {\n    display: none;\n\n    @include not-desktop {\n      &.display-hamburger {\n        display: flex;\n      }\n    }\n    flex-direction: column;\n    justify-content: center;\n\n    button {\n      background-color: unset;\n\n      admiralty-icon {\n        font-size: $header-menu-icon-font-size;\n        font-weight: $header-menu-icon-font-weight;\n        padding: $header-menu-mobile-button-icon-padding;\n        cursor: pointer;\n        min-width: 24px;\n        min-height: 24px;\n        text-align: center;\n        user-select: none;\n        color: $header-icon-colour;\n      }\n\n      &:focus {\n        @include focus-highlight;\n\n        outline: none;\n        box-shadow: 0 -4px $header-outline-colour inset;\n      }\n    }\n  }\n\n  @include not-desktop {\n    .menu-sections {\n      display: none;\n\n      min-height: 56px;\n      position: relative;\n      right: 0;\n\n      position: absolute;\n      top: 100%;\n      z-index: 999;\n      min-width: 100%;\n      @include tablet-only {\n        min-width: 50%;\n        margin-left: $header-menu-section-tablet-only-margin-left;\n      }\n\n      background-color: $header-background-colour;\n      border: 1px solid $header-border-colour;\n\n      &.mob-menus-visible {\n        display: block;\n      }\n    }\n  }\n\n  .menu-sections,\n  .menu-items,\n  .header-profile {\n    @include desktop-only {\n      display: flex;\n      flex: 0;\n      flex-direction: row;\n    }\n  }\n}\n","import { Component, Element, Prop, h, EventEmitter, Event, State, forceUpdate } from '@stencil/core';\n\n/**\n * @slot items - 'admiralty-header-menu-item menu-title' and 'admiralty-header-menu-link menu-title' components are placed here for appropriate styling and behaviour\n * @slot profile - 'admiralty-header-profile' components are placed here (the login/logout) options\n */\n@Component({\n  tag: 'admiralty-header',\n  styleUrl: 'header.scss',\n  scoped: true,\n})\nexport class HeaderComponent {\n  @Element() el: HTMLElement;\n  /**\n   * The header title that is displayed to the right of the logo\n   */\n  @Prop() headerTitle: string;\n\n  /**\n   * The url that clicking on the nav link will take you too\n   */\n  @Prop() headerTitleUrl: string = null;\n\n  /**\n   * The destination url when the logo is clicked\n   */\n  @Prop() logoLinkUrl: string = 'https://www.admiralty.co.uk/';\n\n  /**\n   * The uri of the logo image\n   */\n  @Prop() logoImgUrl: string = 'svg/Admiralty stacked logo.svg';\n\n  /**\n   * The alternate image text for the logo image\n   */\n  @Prop() logoAltText: string = 'ADMIRALTY';\n\n  /**\n   * Emits an event that can be listened to when the title in the header is clicked\n   */\n  @Event() titledClicked: EventEmitter<string>;\n\n  @State() mobileMenuOpen = false;\n\n  @State() displayHamburger = false;\n\n  observer: MutationObserver;\n\n  connectedCallback() {\n    this.observer = new MutationObserver(() => {\n      // when new menu items are added to the slots, we need to trigger a render cycle so that they render correctly\n      forceUpdate(this);\n    });\n    this.observer.observe(this.el, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    this.observer.disconnect();\n  }\n\n  componentWillRender() {\n    const childMenus = this.el.querySelectorAll('admiralty-header-menu-item, admiralty-header-menu-link, admiralty-header-profile');\n    this.displayHamburger = childMenus.length > 0;\n  }\n\n  private handleClick(ev: MouseEvent) {\n    ev.preventDefault();\n    this.titledClicked.emit(this.headerTitleUrl);\n  }\n\n  toggleMobileMenu() {\n    this.mobileMenuOpen = !this.mobileMenuOpen;\n  }\n\n  render() {\n    const { logoAltText, logoLinkUrl, logoImgUrl, headerTitle, headerTitleUrl } = this;\n\n    return (\n      <div class=\"admiralty-header\" role=\"banner\">\n        <div class=\"header-menu\">\n          <div class=\"header-branding\">\n            <a class=\"header-logo\" href={logoLinkUrl}>\n              <img class=\"header-image\" alt={logoAltText} src={logoImgUrl} />\n            </a>\n            <div class=\"vertical-seperator\"></div>\n            {this.headerTitle ? (\n              <h2 class=\"header-title\">\n                <a onClick={ev => this.handleClick(ev)} href={headerTitleUrl}>\n                  {headerTitle}\n                </a>\n              </h2>\n            ) : null}\n          </div>\n          <nav role=\"navigation\" class=\"header-menus\" aria-label=\"Site navigation\">\n            <div class={{ 'mobile-menu-toggle': true, 'display-hamburger': this.displayHamburger }}>\n              <button onClick={_ => this.toggleMobileMenu()} aria-expanded={this.mobileMenuOpen} aria-label={this.mobileMenuOpen ? 'Hide menu' : 'Show menu'}>\n                <admiralty-icon name={this.mobileMenuOpen ? \"close-rounded\" : \"menu-rounded\"}></admiralty-icon>\n              </button>\n            </div>\n            <div class={{ \"menu-sections\": true, 'mob-menus-visible': this.mobileMenuOpen }}>\n              <div class=\"menu-items\">\n                <slot name=\"items\"></slot>\n              </div>\n              <div class=\"header-profile\">\n                <slot name=\"profile\"></slot>\n              </div>\n            </div>\n          </nav>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}