npm - @ukho/admiralty-core - Versions diffs - 5.2.0-next.5 → 5.2.0-next.7 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (173) hide show

package/dist/cjs/admiralty-footer.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"admiralty-footer.entry.cjs.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,QACEA,sFAAa,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC,OAAO,IAAI,EAAE,KAAK,EAAE,gBAAgB,EAAC,IAC3E,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC,OAAO,IAAIA,kEAAK,KAAK,EAAC,iBAAiB,IAClEA,kEAAK,KAAK,EAAC,YAAY,IACrBA,gEAAG,IAAI,EAAE,IAAI,CAAC,SAAS,IACrBA,kEAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC7C,CACA,CACF,EACNA,kEAAK,KAAK,EAAC,gBAAgB,IACzBA,8FAAgB,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,IAC9JA,mEAAM,YAAY,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,GAAS,CACtD,EACNA,kEAAK,KAAK,EAAC,aAAa,IACtBA,kEAAI,IAAI,CAAC,IAAI,CAAK,CACd,CACF,CACC,EACT;KACH;;;;;;;","names":["h"],"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}
1	+ {"file":"admiralty-footer.entry.cjs.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,QACEA,sFAAa,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC,OAAO,IAAI,EAAE,KAAK,EAAE,gBAAgB,EAAC,IAC3E,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC,OAAO,IAAIA,kEAAK,KAAK,EAAC,iBAAiB,IAClEA,kEAAK,KAAK,EAAC,YAAY,IACrBA,gEAAG,IAAI,EAAE,IAAI,CAAC,SAAS,IACrBA,kEAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC7C,CACA,CACF,EACNA,kEAAK,KAAK,EAAC,gBAAgB,IACzBA,8FAAgB,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,IAC9JA,mEAAM,YAAY,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,GAAS,CACtD,EACNA,kEAAK,KAAK,EAAC,aAAa,IACtBA,kEAAI,IAAI,CAAC,IAAI,CAAK,CACd,CACF,CACC,EACT;KACH;;;;;;;","names":["h"],"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/cjs/admiralty-header-menu-item.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-2aa80b51.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/cjs/admiralty-header-menu-item.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"admiralty-header-menu-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,~~u4HAAu4H~~,CAAC;~~AACl6H~~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","names":["h","Host"],"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}
1	+ {"file":"admiralty-header-menu-item.entry.cjs.js","mappings":"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","names":["h","Host"],"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/cjs/admiralty-header-profile.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-2aa80b51.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/cjs/admiralty-header-profile.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"admiralty-header-profile.entry.cjs.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,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAC,gBAAgB,IACxB,UAAU,IACTA,qBACEA,iBAAK,KAAK,EAAC,SAAS,EAAC,YAAY,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,IAChHA,oBAAQ,OAAO,EAAE,IAAI,CAAC,mBAAmB,IACvCA,sBAAO,YAAY,CAAQ,CACpB,EACR,CAAC,UAAU,IACVA,iBAAK,KAAK,EAAC,uBAAuB,IAChCA,oBAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IAC3DA,oCAAuB,CAChB,EACTA,oBAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,IACvDA,gCAAmB,CACZ,CACL,IACJ,IAAI,CACJ,EACL,CAAC,UAAU,IACVA,iBAAK,KAAK,EAAC,aAAa,IACtBA,oBAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IAC3DA,qCAAyB,CAClB,EACTA,oBAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,IACvDA,iCAAqB,CACd,CACL,IACJ,IAAI,CACJ,KAENA,oBAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,IACtDA,gCAAoB,CACb,CACV,CACG,CACD,EACP;KACH;;;;;;;","names":["h","Host"],"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}
1	+ {"file":"admiralty-header-profile.entry.cjs.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,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAC,gBAAgB,IACxB,UAAU,IACTA,qBACEA,iBAAK,KAAK,EAAC,SAAS,EAAC,YAAY,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,IAChHA,oBAAQ,OAAO,EAAE,IAAI,CAAC,mBAAmB,IACvCA,sBAAO,YAAY,CAAQ,CACpB,EACR,CAAC,UAAU,IACVA,iBAAK,KAAK,EAAC,uBAAuB,IAChCA,oBAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IAC3DA,oCAAuB,CAChB,EACTA,oBAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,IACvDA,gCAAmB,CACZ,CACL,IACJ,IAAI,CACJ,EACL,CAAC,UAAU,IACVA,iBAAK,KAAK,EAAC,aAAa,IACtBA,oBAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IAC3DA,qCAAyB,CAClB,EACTA,oBAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,IACvDA,iCAAqB,CACd,CACL,IACJ,IAAI,CACJ,KAENA,oBAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,IACtDA,gCAAoB,CACb,CACV,CACG,CACD,EACP;KACH;;;;;;;","names":["h","Host"],"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/cjs/admiralty-header-sub-menu-item.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-2aa80b51.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/cjs/admiralty-header-sub-menu-item.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"admiralty-header-sub-menu-item.entry.cjs.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,QACEA,QAACC,UAAI,uDACF,IAAI,CAAC,IAAI,IACRD,iBAAK,KAAK,EAAC,sBAAsB,EAAC,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,IACnEA,eAAG,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,IAClE,IAAI,CAAC,SAAS,EACfA,qBAAa,CACX,CACA,KAENA,oBAAQ,KAAK,EAAC,sBAAsB,EAAC,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,IACtEA,kBAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAQ,CACpC,CACV,CACI,EACP;KACH;;;;;;","names":["h","Host"],"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}
1	+ {"file":"admiralty-header-sub-menu-item.entry.cjs.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,QACEA,QAACC,UAAI,uDACF,IAAI,CAAC,IAAI,IACRD,iBAAK,KAAK,EAAC,sBAAsB,EAAC,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,IACnEA,eAAG,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,IAClE,IAAI,CAAC,SAAS,EACfA,qBAAa,CACX,CACA,KAENA,oBAAQ,KAAK,EAAC,sBAAsB,EAAC,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,IACtEA,kBAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAQ,CACpC,CACV,CACI,EACP;KACH;;;;;;","names":["h","Host"],"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/cjs/admiralty-header.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-2aa80b51.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/cjs/admiralty-header.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"admiralty-header.entry.cjs.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;;YAEnCA,iBAAW,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,QACEC,kEAAK,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ,IACzCA,kEAAK,KAAK,EAAC,aAAa,IACtBA,kEAAK,KAAK,EAAC,iBAAiB,IAC1BA,gEAAG,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,WAAW,IACtCA,kEAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,UAAU,GAAI,CAC7D,EACJA,kEAAK,KAAK,EAAC,oBAAoB,GAAO,EACrC,IAAI,CAAC,WAAW,IACfA,gBAAI,KAAK,EAAC,cAAc,IACtBA,eAAG,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,cAAc,IACzD,WAAW,CACV,CACD,IACH,IAAI,CACJ,EACNA,kEAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,cAAc,gBAAY,iBAAiB,IACtEA,kEAAK,KAAK,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,CAAC,gBAAgB,EAAE,IACpFA,qEAAQ,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE,mBAAiB,IAAI,CAAC,cAAc,gBAAc,IAAI,CAAC,cAAc,GAAG,WAAW,GAAG,WAAW,IAC5IA,6EAAgB,IAAI,EAAE,IAAI,CAAC,cAAc,GAAG,eAAe,GAAG,cAAc,GAAmB,CACxF,CACL,EACNA,kEAAK,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,CAAC,cAAc,EAAE,IAC7EA,kEAAK,KAAK,EAAC,YAAY,IACrBA,mEAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EACNA,kEAAK,KAAK,EAAC,gBAAgB,IACzBA,mEAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACF,CACF,EACN;KACH;;;;;;;","names":["forceUpdate","h"],"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}
1	+ {"file":"admiralty-header.entry.cjs.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;;YAEnCA,iBAAW,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,QACEC,kEAAK,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ,IACzCA,kEAAK,KAAK,EAAC,aAAa,IACtBA,kEAAK,KAAK,EAAC,iBAAiB,IAC1BA,gEAAG,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,WAAW,IACtCA,kEAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,UAAU,GAAI,CAC7D,EACJA,kEAAK,KAAK,EAAC,oBAAoB,GAAO,EACrC,IAAI,CAAC,WAAW,IACfA,gBAAI,KAAK,EAAC,cAAc,IACtBA,eAAG,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,cAAc,IACzD,WAAW,CACV,CACD,IACH,IAAI,CACJ,EACNA,kEAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,cAAc,gBAAY,iBAAiB,IACtEA,kEAAK,KAAK,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,CAAC,gBAAgB,EAAE,IACpFA,qEAAQ,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE,mBAAiB,IAAI,CAAC,cAAc,gBAAc,IAAI,CAAC,cAAc,GAAG,WAAW,GAAG,WAAW,IAC5IA,6EAAgB,IAAI,EAAE,IAAI,CAAC,cAAc,GAAG,eAAe,GAAG,cAAc,GAAmB,CACxF,CACL,EACNA,kEAAK,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,CAAC,cAAc,EAAE,IAC7EA,kEAAK,KAAK,EAAC,YAAY,IACrBA,mEAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EACNA,kEAAK,KAAK,EAAC,gBAAgB,IACzBA,mEAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACF,CACF,EACN;KACH;;;;;;;","names":["forceUpdate","h"],"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}

package/dist/cjs/admiralty-radio.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-2aa80b51.js');
-const radioCss = ".visually-hidden.sc-admiralty-radio: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-radio{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-radio{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-radio{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-radio{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-radio{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-radio{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-radio{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-radio{display:none}}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio{appearance:none;border:2px solid var(--admiralty-colour-primary);border-radius:1rem;height:1.625rem;width:1.625rem;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-right:var(--admiralty-radio-input-margin-right, 18px)}.admiralty-radio.sc-admiralty-radio input.invalid.sc-admiralty-radio{border-color:var(--admiralty-colour-danger)}.admiralty-radio.sc-admiralty-radio input.invalid.sc-admiralty-radio:focus-visible{border-color:unset;outline:3px solid var(--admiralty-focus-colour)}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:checked:after{border-radius:100%;background-color:var(--admiralty-colour-primary);width:0.75rem;height:0.75rem;content:\" \"}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:disabled{border:2px solid var(--admiralty-disabled-colour)}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:focus{outline:4px solid var(--admiralty-focus-colour);outline-offset:0;border-width:3.5px}.admiralty-radio.sc-admiralty-radio label.sc-admiralty-radio{font-weight:var(--admiralty-radio-label-font-weight, var(--admiralty-font-weight-normal));position:relative;top:2px}.conditional.sc-admiralty-radio{margin:var(--admiralty-radio-conditional-margin, 10px var(--admiralty-spacing-0) var(--admiralty-spacing-0) 13px);padding-left:var(--admiralty-radio-conditional-padding-left, 30px);border-left:4px solid lightgrey}.conditional.sc-admiralty-radio:empty{margin:var(--admiralty-radio-conditional-margin-empty, var(--admiralty-spacing-0))}.conditional.unchecked.sc-admiralty-radio{display:none}";
+const radioCss = ".visually-hidden.sc-admiralty-radio: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-radio{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-radio{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-radio{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-radio{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-radio{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-radio{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-radio{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-radio{display:none}}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio{appearance:none;border:2px solid var(--admiralty-colour-primary);border-radius:1rem;height:1.625rem;width:1.625rem;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-right:var(--admiralty-radio-input-margin-right, 18px)}.admiralty-radio.sc-admiralty-radio input.invalid.sc-admiralty-radio{border-color:var(--admiralty-colour-danger)}.admiralty-radio.sc-admiralty-radio input.invalid.sc-admiralty-radio:focus-visible{border-color:unset;outline:3px solid var(--admiralty-focus-colour)}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:checked:after{border-radius:100%;background-color:var(--admiralty-colour-primary);width:0.75rem;height:0.75rem;content:\" \"}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:disabled{border:2px solid var(--admiralty-disabled-colour)}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:focus{border-color:var(--admiralty-focus-colour);border-width:3.5px}.admiralty-radio.sc-admiralty-radio label.sc-admiralty-radio{font-weight:var(--admiralty-radio-label-font-weight, var(--admiralty-font-weight-normal));position:relative;top:2px}.conditional.sc-admiralty-radio{margin:var(--admiralty-radio-conditional-margin, 10px var(--admiralty-spacing-0) var(--admiralty-spacing-0) 13px);padding-left:var(--admiralty-radio-conditional-padding-left, 30px);border-left:4px solid lightgrey}.conditional.sc-admiralty-radio:empty{margin:var(--admiralty-radio-conditional-margin-empty, var(--admiralty-spacing-0))}.conditional.unchecked.sc-admiralty-radio{display:none}";
 const AdmiraltyRadioStyle0 = radioCss;
 const RadioComponent = class {

package/dist/cjs/admiralty-radio.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"admiralty-radio.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,~~0lFAA0lF~~,CAAC;~~AAC5mF~~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","names":["h","Host"],"sources":["src/components/radio/radio.scss?tag=admiralty-radio&encapsulation=scoped","src/components/radio/radio.tsx"],"sourcesContent":["@import 'radio.vars';\n\n.admiralty-radio {\n input {\n appearance: none;\n border: 2px solid $radio-border-colour;\n border-radius: 1rem;\n height: 1.625rem;\n width: 1.625rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n margin-right: $radio-input-margin-right;\n\n &.invalid {\n border-color: $radio-invalid-border-colour;\n\n &:focus-visible {\n border-color: unset;\n outline: 3px solid $radio-focus-colour;\n }\n }\n\n &:checked:after {\n border-radius: 100%;\n background-color: $radio-checked-background-colour;\n width: 0.75rem;\n height: 0.75rem;\n content: ' ';\n }\n\n &:disabled {\n border: 2px solid $radio-disabled-border-colour;\n }\n\n &:focus {\n ~~outline~~: ~~4px solid~~ $radio-focus-colour;\n ~~outline-offset: 0;\n~~ border-width: 3.5px;\n }\n }\n label {\n font-weight: $radio-label-font-weight;\n position: relative;\n top: 2px;\n }\n}\n\n.conditional {\n margin: $radio-conditional-margin;\n padding-left: $radio-conditional-padding-left;\n border-left: 4px solid lightgrey;\n &:empty {\n margin: $radio-conditional-margin-empty;\n }\n &.unchecked {\n display: none;\n }\n}\n","import { Element, Component, Event, h, Prop, Watch, Host, State, Method, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'admiralty-radio',\n styleUrl: 'radio.scss',\n scoped: true,\n})\nexport class RadioComponent {\n private internalId = ++radioButtonIds;\n private nativeInput!: HTMLInputElement;\n private radioGroup: HTMLAdmiraltyRadioGroupElement \| null = null;\n\n @Element() el!: HTMLElement;\n\n /*\n The tabindex of the radio button.\n * @internal\n /\n @State() buttonTabindex = -1;\n\n /\n The name of the radio button for use on selection within a radio group\n /\n @Prop() name: string;\n /\n The value of the radio button for use on selection within a radio group\n /\n @Prop({ mutable: true }) value: string \| null;\n /\n Determines whether the radio button is disabled. A button in disabled state will not fire click output events.\n /\n @Prop() disabled?: boolean = false;\n\n /\n Determines whether the radio button is selected (or checked)\n /\n @Prop({ mutable: true }) checked?: boolean = false;\n\n /\n Determines whether to add the invalid stying to the radio button\n /\n @Prop() invalid: boolean = false;\n\n /\n Emitted when the radio button gains focus.\n /\n @Event() admiraltyFocus!: EventEmitter<void>;\n\n /\n Emitted when the radio button loses focus.\n /\n @Event() admiraltyBlur!: EventEmitter<void>;\n\n /\n Emitted when the radio is selected\n /\n @Event() admiraltyChange!: EventEmitter<void>;\n\n @Watch('value')\n valueChanged() {\n /\n The new value of the radio may\n * match the radio group's value,\n * so we see if it should be checked.\n /\n this.updateState();\n }\n\n connectedCallback() {\n if (this.value === undefined) {\n // radio buttons should always be used with a value\n this.value = `admiralty-radio-${this.internalId}`;\n }\n const radioGroup = (this.radioGroup = this.el.closest('admiralty-radio-group'));\n\n if (radioGroup) {\n this.updateState();\n radioGroup.addEventListener('admiraltyChange', this.updateState);\n }\n }\n\n disconnectedCallback() {\n const radioGroup = this.radioGroup;\n if (radioGroup) {\n radioGroup.removeEventListener('admiraltyChange', this.updateState);\n this.radioGroup = null;\n }\n }\n\n /* @internal */\n @Method()\n async setButtonTabindex(value: number) {\n this.buttonTabindex = value;\n }\n\n private updateState = () => {\n if (this.radioGroup) {\n this.checked = this.radioGroup.value === this.value;\n if (this.nativeInput && this.checked) {\n this.nativeInput.focus();\n }\n }\n };\n\n private onClick = () => {\n this.checked = this.nativeInput.checked;\n };\n\n private onFocus = () => {\n this.admiraltyFocus.emit();\n };\n\n private onBlur = () => {\n this.admiraltyBlur.emit();\n };\n\n render() {\n const { buttonTabindex, checked, disabled, name, value } = this;\n const id = this.el.id != '' ? this.el.id : `admiralty-radio-${this.internalId}`;\n const inputId = `${id}-input`;\n return (\n <Host>\n <div class={{ 'admiralty-radio': true, 'checked': checked }}>\n <input\n class={{ 'invalid': this.invalid, 'admiralty-radio': true }}\n aria-checked={`${checked}`}\n aria-hidden={disabled ? 'true' : null}\n aria-labelledby={inputId}\n id={inputId}\n name={name}\n tabindex={buttonTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n type=\"radio\"\n value={value}\n checked={checked}\n disabled={disabled ? true : null}\n ref={nativeEl => (this.nativeInput = nativeEl as HTMLInputElement)}\n />\n <label htmlFor={inputId}>\n <slot />\n </label>\n </div>\n <div class={{ conditional: true, checked: checked, unchecked: !checked }}>\n <slot name=\"conditional\"></slot>\n </div>\n </Host>\n );\n }\n}\n\nlet radioButtonIds = 0;\n"],"version":3}
1	+ {"file":"admiralty-radio.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/radio/radio.scss?tag=admiralty-radio&encapsulation=scoped","src/components/radio/radio.tsx"],"sourcesContent":["@import 'radio.vars';\n\n.admiralty-radio {\n input {\n appearance: none;\n border: 2px solid $radio-border-colour;\n border-radius: 1rem;\n height: 1.625rem;\n width: 1.625rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n margin-right: $radio-input-margin-right;\n\n &.invalid {\n border-color: $radio-invalid-border-colour;\n\n &:focus-visible {\n border-color: unset;\n outline: 3px solid $radio-focus-colour;\n }\n }\n\n &:checked:after {\n border-radius: 100%;\n background-color: $radio-checked-background-colour;\n width: 0.75rem;\n height: 0.75rem;\n content: ' ';\n }\n\n &:disabled {\n border: 2px solid $radio-disabled-border-colour;\n }\n\n &:focus {\n border-color: $radio-focus-colour;\n border-width: 3.5px;\n }\n }\n label {\n font-weight: $radio-label-font-weight;\n position: relative;\n top: 2px;\n }\n}\n\n.conditional {\n margin: $radio-conditional-margin;\n padding-left: $radio-conditional-padding-left;\n border-left: 4px solid lightgrey;\n &:empty {\n margin: $radio-conditional-margin-empty;\n }\n &.unchecked {\n display: none;\n }\n}\n","import { Element, Component, Event, h, Prop, Watch, Host, State, Method, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'admiralty-radio',\n styleUrl: 'radio.scss',\n scoped: true,\n})\nexport class RadioComponent {\n private internalId = ++radioButtonIds;\n private nativeInput!: HTMLInputElement;\n private radioGroup: HTMLAdmiraltyRadioGroupElement \| null = null;\n\n @Element() el!: HTMLElement;\n\n /*\n The tabindex of the radio button.\n * @internal\n /\n @State() buttonTabindex = -1;\n\n /\n The name of the radio button for use on selection within a radio group\n /\n @Prop() name: string;\n /\n The value of the radio button for use on selection within a radio group\n /\n @Prop({ mutable: true }) value: string \| null;\n /\n Determines whether the radio button is disabled. A button in disabled state will not fire click output events.\n /\n @Prop() disabled?: boolean = false;\n\n /\n Determines whether the radio button is selected (or checked)\n /\n @Prop({ mutable: true }) checked?: boolean = false;\n\n /\n Determines whether to add the invalid stying to the radio button\n /\n @Prop() invalid: boolean = false;\n\n /\n Emitted when the radio button gains focus.\n /\n @Event() admiraltyFocus!: EventEmitter<void>;\n\n /\n Emitted when the radio button loses focus.\n /\n @Event() admiraltyBlur!: EventEmitter<void>;\n\n /\n Emitted when the radio is selected\n /\n @Event() admiraltyChange!: EventEmitter<void>;\n\n @Watch('value')\n valueChanged() {\n /\n The new value of the radio may\n * match the radio group's value,\n * so we see if it should be checked.\n /\n this.updateState();\n }\n\n connectedCallback() {\n if (this.value === undefined) {\n // radio buttons should always be used with a value\n this.value = `admiralty-radio-${this.internalId}`;\n }\n const radioGroup = (this.radioGroup = this.el.closest('admiralty-radio-group'));\n\n if (radioGroup) {\n this.updateState();\n radioGroup.addEventListener('admiraltyChange', this.updateState);\n }\n }\n\n disconnectedCallback() {\n const radioGroup = this.radioGroup;\n if (radioGroup) {\n radioGroup.removeEventListener('admiraltyChange', this.updateState);\n this.radioGroup = null;\n }\n }\n\n /* @internal */\n @Method()\n async setButtonTabindex(value: number) {\n this.buttonTabindex = value;\n }\n\n private updateState = () => {\n if (this.radioGroup) {\n this.checked = this.radioGroup.value === this.value;\n if (this.nativeInput && this.checked) {\n this.nativeInput.focus();\n }\n }\n };\n\n private onClick = () => {\n this.checked = this.nativeInput.checked;\n };\n\n private onFocus = () => {\n this.admiraltyFocus.emit();\n };\n\n private onBlur = () => {\n this.admiraltyBlur.emit();\n };\n\n render() {\n const { buttonTabindex, checked, disabled, name, value } = this;\n const id = this.el.id != '' ? this.el.id : `admiralty-radio-${this.internalId}`;\n const inputId = `${id}-input`;\n return (\n <Host>\n <div class={{ 'admiralty-radio': true, 'checked': checked }}>\n <input\n class={{ 'invalid': this.invalid, 'admiralty-radio': true }}\n aria-checked={`${checked}`}\n aria-hidden={disabled ? 'true' : null}\n aria-labelledby={inputId}\n id={inputId}\n name={name}\n tabindex={buttonTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n type=\"radio\"\n value={value}\n checked={checked}\n disabled={disabled ? true : null}\n ref={nativeEl => (this.nativeInput = nativeEl as HTMLInputElement)}\n />\n <label htmlFor={inputId}>\n <slot />\n </label>\n </div>\n <div class={{ conditional: true, checked: checked, unchecked: !checked }}>\n <slot name=\"conditional\"></slot>\n </div>\n </Host>\n );\n }\n}\n\nlet radioButtonIds = 0;\n"],"version":3}

package/dist/cjs/admiralty-read-more.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-2aa80b51.js');
-const readMoreCss = ".visually-hidden.sc-admiralty-read-more: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-read-more{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-read-more{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-read-more{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-read-more{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-read-more{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-read-more{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-read-more{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-read-more{display:none}}section.expansion.sc-admiralty-read-more{padding:var(--admiralty-read-more-padding, 2px var(--admiralty-spacing-0))}section.expansion.sc-admiralty-read-more .expansion-content.sc-admiralty-read-more{display:none;max-height:0;overflow:visible;border-left:4px solid var(--admiralty-colour-info)}section.expansion.expanded.sc-admiralty-read-more .expansion-content.sc-admiralty-read-more{display:block;max-height:initial;padding:var(--admiralty-read-more-expanded-content-padding, 2px 5px 2px 33px)}section.expansion.sc-admiralty-read-more button.sc-admiralty-read-more{background-color:transparent;border:none;white-space:unset;color:var(--admiralty-text-color);font-weight:unset;cursor:pointer;margin:var(--admiralty-read-more-button-margin, var(--admiralty-spacing-2) var(--admiralty-spacing-0));padding:var(--admiralty-read-more-button-padding, var(--admiralty-spacing-1));align-items:baseline;text-align:left;text-decoration:underline;text-underline-offset:0.15em}section.expansion.sc-admiralty-read-more button.expanded.sc-admiralty-read-more span.sc-admiralty-read-more{font-weight:var(--admiralty-read-more-font-weight, var(--admiralty-font-weight-medium))}section.expansion.sc-admiralty-read-more button.sc-admiralty-read-more .expansion-heading-icon.sc-admiralty-read-more{margin:var(--admiralty-read-more-expansion-heading-icon-margin, 1px var(--admiralty-spacing-2) 1px 5px);vertical-align:top}section.expansion.sc-admiralty-read-more button.sc-admiralty-read-more:hover{text-decoration-thickness:0.15em}section.expansion.sc-admiralty-read-more button.sc-admiralty-read-more: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 readMoreCss = ".visually-hidden.sc-admiralty-read-more: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-read-more{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-read-more{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-read-more{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-read-more{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-read-more{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-read-more{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-read-more{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-read-more{display:none}}section.expansion.sc-admiralty-read-more{padding:var(--admiralty-read-more-padding, 2px var(--admiralty-spacing-0))}section.expansion.sc-admiralty-read-more .expansion-content.sc-admiralty-read-more{display:none;max-height:0;overflow:visible;border-left:4px solid var(--admiralty-colour-info)}section.expansion.expanded.sc-admiralty-read-more .expansion-content.sc-admiralty-read-more{display:block;max-height:initial;padding:var(--admiralty-read-more-expanded-content-padding, 2px 5px 2px 33px)}section.expansion.sc-admiralty-read-more button.sc-admiralty-read-more{background-color:transparent;border:none;white-space:unset;color:var(--admiralty-text-color);font-weight:unset;cursor:pointer;margin:var(--admiralty-read-more-button-margin, var(--admiralty-spacing-2) var(--admiralty-spacing-0));padding:var(--admiralty-read-more-button-padding, var(--admiralty-spacing-1));align-items:baseline;text-align:left;text-decoration:underline;text-underline-offset:0.15em}section.expansion.sc-admiralty-read-more button.expanded.sc-admiralty-read-more span.sc-admiralty-read-more{font-weight:var(--admiralty-read-more-font-weight, var(--admiralty-font-weight-medium))}section.expansion.sc-admiralty-read-more button.sc-admiralty-read-more .expansion-heading-icon.sc-admiralty-read-more{margin:var(--admiralty-read-more-expansion-heading-icon-margin, 1px var(--admiralty-spacing-2) 1px 5px);vertical-align:top}section.expansion.sc-admiralty-read-more button.sc-admiralty-read-more:hover{text-decoration-thickness:0.15em}section.expansion.sc-admiralty-read-more button.sc-admiralty-read-more: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}";
 const AdmiraltyReadMoreStyle0 = readMoreCss;
 let nextId = 0;

package/dist/cjs/admiralty-read-more.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"admiralty-read-more.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,~~syFAAsyF~~,CAAC;~~AAC3zF~~,gCAAe,WAAW;;ACC1B,IAAI,MAAM,GAAG,CAAC,CAAC;MAOF,iBAAiB;;;;QAa5B,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;;wBAV7B,KAAK;;IAYzB,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,QAAQ,GAAG,wBAAwB,GAAG,uBAAuB,CAAC;KAC3E;IAED,QAAQ;QACN,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC3C;IAED,MAAM;QACJ,QACEA,sEACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAEDA,qEACE,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,QAAQ,mBACb,IAAI,CAAC,SAAS,EAC7B,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAClC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAEjCA,6EAAgB,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAE,IAAI,CAAC,aAAa,GAAmB,EAC1FA,qEAAO,IAAI,CAAC,OAAO,CAAQ,EAC3BA,mEAAM,KAAK,EAAC,iBAAiB,UAAI,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,MAAM,kBAAqB,CAC9E,EACTA,kEAAK,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,SAAS,qBAAmB,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,IACvGA,oEAAa,CACT,CACE,EACV;KACH;;;;;;","names":["h"],"sources":["src/components/read-more/read-more.scss?tag=admiralty-read-more&encapsulation=scoped","src/components/read-more/read-more.tsx"],"sourcesContent":["@import 'read-more.vars.scss';\n\nsection.expansion {\n padding: $read-more-padding;\n\n .expansion-content {\n display: none;\n max-height: 0;\n overflow: visible;\n border-left: 4px solid $read-more-border-colour;\n }\n &.expanded .expansion-content {\n display: block;\n max-height: initial;\n padding: $read-more-expanded-content-padding;\n }\n\n button {\n background-color: transparent;\n border: none;\n white-space: unset;\n color: $read-more-text-colour;\n font-weight: unset;\n cursor: pointer;\n margin: $read-more-button-margin;\n padding: $read-more-button-padding;\n align-items: baseline;\n text-align: left;\n text-decoration: underline;\n text-underline-offset: 0.15em;\n\n &.expanded span {\n font-weight: $read-more-font-weight;\n }\n\n .expansion-heading-icon {\n margin: $read-more-button-expansion-heading-icon-margin;\n vertical-align: top;\n }\n\n &:hover {\n text-decoration-thickness: 0.15em;\n }\n\n &:focus {\n @include focus-highlight;\n }\n }\n}\n","import { Component, EventEmitter, Prop, State, Event, h } from '@stencil/core';\n\nlet nextId = 0;\n\n@Component({\n tag: 'admiralty-read-more',\n styleUrl: 'read-more.scss',\n scoped: true,\n})\nexport class ReadMoreComponent {\n /*\n The text to display in the heading of the readmore component.\n /\n @Prop() heading: string;\n\n @State() expanded = false;\n\n /\n The event that is dispatched when the expanded status is toggled.\n */\n @Event() admiraltyToggled: EventEmitter<boolean>;\n\n internalId: string = `admiralty-read-more-${++nextId}`;\n\n headerId: string = `${this.internalId}-header`;\n contentId: string = `${this.internalId}-content`;\n\n get expansionIcon(): string {\n return this.expanded ? 'arrow-downward-rounded' : 'arrow-forward-rounded';\n }\n\n onToggle() {\n this.expanded = !this.expanded;\n this.admiraltyToggled.emit(this.expanded);\n }\n\n render() {\n return (\n <section\n class={{\n expansion: true,\n expanded: this.expanded,\n }}\n >\n <button\n id={this.headerId}\n type=\"button\"\n aria-expanded={this.expanded}\n aria-controls={this.contentId}\n class={{ expanded: this.expanded }}\n onClick={this.onToggle.bind(this)}\n >\n <admiralty-icon class=\"expansion-heading-icon\" name={this.expansionIcon}></admiralty-icon>\n <span>{this.heading}</span>\n <span class=\"visually-hidden\">, {this.expanded ? \"Hide\" : \"Show\"} this section</span>\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}
1	+ {"file":"admiralty-read-more.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,4yFAA4yF,CAAC;AACj0F,gCAAe,WAAW;;ACC1B,IAAI,MAAM,GAAG,CAAC,CAAC;MAOF,iBAAiB;;;;QAa5B,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;;wBAV7B,KAAK;;IAYzB,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,QAAQ,GAAG,wBAAwB,GAAG,uBAAuB,CAAC;KAC3E;IAED,QAAQ;QACN,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC3C;IAED,MAAM;QACJ,QACEA,sEACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAEDA,qEACE,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,QAAQ,mBACb,IAAI,CAAC,SAAS,EAC7B,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAClC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAEjCA,6EAAgB,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAE,IAAI,CAAC,aAAa,GAAmB,EAC1FA,qEAAO,IAAI,CAAC,OAAO,CAAQ,EAC3BA,mEAAM,KAAK,EAAC,iBAAiB,UAAI,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,MAAM,kBAAqB,CAC9E,EACTA,kEAAK,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,SAAS,qBAAmB,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,IACvGA,oEAAa,CACT,CACE,EACV;KACH;;;;;;","names":["h"],"sources":["src/components/read-more/read-more.scss?tag=admiralty-read-more&encapsulation=scoped","src/components/read-more/read-more.tsx"],"sourcesContent":["@import 'read-more.vars.scss';\n\nsection.expansion {\n padding: $read-more-padding;\n\n .expansion-content {\n display: none;\n max-height: 0;\n overflow: visible;\n border-left: 4px solid $read-more-border-colour;\n }\n &.expanded .expansion-content {\n display: block;\n max-height: initial;\n padding: $read-more-expanded-content-padding;\n }\n\n button {\n background-color: transparent;\n border: none;\n white-space: unset;\n color: $read-more-text-colour;\n font-weight: unset;\n cursor: pointer;\n margin: $read-more-button-margin;\n padding: $read-more-button-padding;\n align-items: baseline;\n text-align: left;\n text-decoration: underline;\n text-underline-offset: 0.15em;\n\n &.expanded span {\n font-weight: $read-more-font-weight;\n }\n\n .expansion-heading-icon {\n margin: $read-more-button-expansion-heading-icon-margin;\n vertical-align: top;\n }\n\n &:hover {\n text-decoration-thickness: 0.15em;\n }\n\n &:focus {\n @include focus-highlight;\n }\n }\n}\n","import { Component, EventEmitter, Prop, State, Event, h } from '@stencil/core';\n\nlet nextId = 0;\n\n@Component({\n tag: 'admiralty-read-more',\n styleUrl: 'read-more.scss',\n scoped: true,\n})\nexport class ReadMoreComponent {\n /*\n The text to display in the heading of the readmore component.\n /\n @Prop() heading: string;\n\n @State() expanded = false;\n\n /\n The event that is dispatched when the expanded status is toggled.\n */\n @Event() admiraltyToggled: EventEmitter<boolean>;\n\n internalId: string = `admiralty-read-more-${++nextId}`;\n\n headerId: string = `${this.internalId}-header`;\n contentId: string = `${this.internalId}-content`;\n\n get expansionIcon(): string {\n return this.expanded ? 'arrow-downward-rounded' : 'arrow-forward-rounded';\n }\n\n onToggle() {\n this.expanded = !this.expanded;\n this.admiraltyToggled.emit(this.expanded);\n }\n\n render() {\n return (\n <section\n class={{\n expansion: true,\n expanded: this.expanded,\n }}\n >\n <button\n id={this.headerId}\n type=\"button\"\n aria-expanded={this.expanded}\n aria-controls={this.contentId}\n class={{ expanded: this.expanded }}\n onClick={this.onToggle.bind(this)}\n >\n <admiralty-icon class=\"expansion-heading-icon\" name={this.expansionIcon}></admiralty-icon>\n <span>{this.heading}</span>\n <span class=\"visually-hidden\">, {this.expanded ? \"Hide\" : \"Show\"} this section</span>\n </button>\n <div class=\"expansion-content\" id={this.contentId} aria-labelledby={this.headerId} hidden={!this.expanded}>\n <slot></slot>\n </div>\n </section>\n );\n }\n}\n"],"version":3}

package/dist/cjs/admiralty-tab-group.cjs.entry.js CHANGED Viewed

@@ -17,7 +17,7 @@ var Keys;
     Keys["SPACE"] = " ";
 })(Keys || (Keys = {}));
-const tabGroupCss = ".visually-hidden.sc-admiralty-tab-group: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-tab-group{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-tab-group{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-tab-group{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-tab-group{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-tab-group{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-tab-group{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-tab-group{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-tab-group{display:none}}.tab-group-headers.sc-admiralty-tab-group{width:100%}hr.sc-admiralty-tab-group{width:100%;height:2px;margin:var(--admiralty-tab-group-horizontal-rule-margin, 6px var(--admiralty-spacing-0));background-color:var(--admiralty-colour-light)}.headers.sc-admiralty-tab-group{overflow-x:auto;white-space:nowrap;display:flex;flex-wrap:wrap}.headers.sc-admiralty-tab-group .heading.sc-admiralty-tab-group{cursor:pointer;padding:var(--admiralty-tab-group-heading-padding, 10px);height:42px;max-width:fit-content;box-sizing:border-box;user-select:none;text-align:center;text-decoration:none;color:var(--admiralty-colour-primary);background-color:unset;font-weight:var(--admiralty-tab-group-font-weight, var(--admiralty-font-weight-medium));font-size:var(--admiralty-tab-group-font-size, var(--admiralty-font-size-0));margin-left:var(--admiralty-tab-group-heading-margin-left, var(--admiralty-spacing-1))}.headers.sc-admiralty-tab-group .heading.sc-admiralty-tab-group:first-child{margin-left:var(--admiralty-tab-group-heading-first-child-margin-left, var(--admiralty-spacing-0))}@media (max-width: 1023px){.headers.sc-admiralty-tab-group .heading.sc-admiralty-tab-group{font-size:var(--admiralty-tab-group-not-desktop-font-size, var(--admiralty-font-size--1));line-height:18px;padding:var(--admiralty-tab-group-heading-not-desktop-padding, var(--admiralty-spacing-2));height:unset;width:unset}}.headers.sc-admiralty-tab-group .heading.sc-admiralty-tab-group:focus-visible{box-shadow:var(--admiralty-focus-colour) inset 0 0 0 2px}.headers.sc-admiralty-tab-group .heading.sc-admiralty-tab-group:focus,.headers.sc-admiralty-tab-group .heading.active.sc-admiralty-tab-group: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;box-shadow:0px -4px var(--admiralty-text-colour) inset}.headers.sc-admiralty-tab-group .heading.sc-admiralty-tab-group:hover{background-color:var(--admiralty-hover-background-colour);color:var(--admiralty-colour-primary);box-shadow:unset}.headers.sc-admiralty-tab-group .heading.active.sc-admiralty-tab-group{background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast)}";
+const tabGroupCss = ".visually-hidden.sc-admiralty-tab-group: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-tab-group{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-tab-group{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-tab-group{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-tab-group{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-tab-group{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-tab-group{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-tab-group{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-tab-group{display:none}}.tab-group-headers.sc-admiralty-tab-group{width:100%}hr.sc-admiralty-tab-group{width:100%;height:2px;margin:var(--admiralty-tab-group-horizontal-rule-margin, 6px var(--admiralty-spacing-0));background-color:var(--admiralty-colour-light)}.headers.sc-admiralty-tab-group{overflow-x:auto;white-space:nowrap;display:flex;flex-wrap:wrap}.headers.sc-admiralty-tab-group .heading.sc-admiralty-tab-group{cursor:pointer;padding:var(--admiralty-tab-group-heading-padding, 10px);height:42px;max-width:fit-content;box-sizing:border-box;user-select:none;text-align:center;text-decoration:none;color:var(--admiralty-colour-primary);background-color:unset;font-weight:var(--admiralty-tab-group-font-weight, var(--admiralty-font-weight-medium));font-size:var(--admiralty-tab-group-font-size, var(--admiralty-font-size-0));margin-left:var(--admiralty-tab-group-heading-margin-left, var(--admiralty-spacing-1))}.headers.sc-admiralty-tab-group .heading.sc-admiralty-tab-group:first-child{margin-left:var(--admiralty-tab-group-heading-first-child-margin-left, var(--admiralty-spacing-0))}@media (max-width: 1023px){.headers.sc-admiralty-tab-group .heading.sc-admiralty-tab-group{font-size:var(--admiralty-tab-group-not-desktop-font-size, var(--admiralty-font-size--1));line-height:18px;padding:var(--admiralty-tab-group-heading-not-desktop-padding, var(--admiralty-spacing-2));height:unset;width:unset}}.headers.sc-admiralty-tab-group .heading.sc-admiralty-tab-group:focus-visible{box-shadow:var(--admiralty-focus-colour) inset 0 0 0 2px}.headers.sc-admiralty-tab-group .heading.sc-admiralty-tab-group:focus,.headers.sc-admiralty-tab-group .heading.active.sc-admiralty-tab-group: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;box-shadow:0px -4px var(--admiralty-text-colour) inset}.headers.sc-admiralty-tab-group .heading.sc-admiralty-tab-group:hover{background-color:var(--admiralty-hover-background-colour);color:var(--admiralty-colour-primary);box-shadow:unset}.headers.sc-admiralty-tab-group .heading.active.sc-admiralty-tab-group{background-color:var(--tab-group-active-background-colour);color:var(--admiralty-colour-secondary-contrast);box-shadow:0px -4px var(--tab-group-active-shadow-colour) inset}";
 const AdmiraltyTabGroupStyle0 = tabGroupCss;
 let nextId = 0;

package/dist/cjs/admiralty-tab-group.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"admiralty-tab-group.entry.cjs.js","mappings":"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","names":["forceUpdate","h","Host"],"sources":["src/components/Keys.ts","src/components/tab-group/tab-group.scss?tag=admiralty-tab-group&encapsulation=scoped","src/components/tab-group/tab-group.tsx"],"sourcesContent":["export enum Keys {\n UP_ARROW = 'ArrowUp',\n DOWN_ARROW = 'ArrowDown',\n LEFT_ARROW = 'ArrowLeft',\n RIGHT_ARROW = 'ArrowRight',\n ENTER = 'Enter',\n TAB = 'Tab',\n HOME = 'Home',\n END = 'End',\n SPACE = ' '\n}\n","@import 'tab-group.vars';\n\n.tab-group-headers {\n width: 100%;\n}\n\nhr {\n width: 100%;\n height: 2px;\n margin: $tab-group-horizontal-rule-margin;\n background-color: $tab-group-separator-colour;\n}\n\n.headers {\n overflow-x: auto;\n white-space: nowrap;\n display: flex;\n flex-wrap: wrap;\n\n .heading {\n cursor: pointer;\n padding: $tab-group-heading-padding;\n height: 42px;\n max-width: fit-content;\n box-sizing: border-box;\n user-select: none;\n\n text-align: center;\n text-decoration: none;\n color: $tab-group-heading-text-colour;\n background-color: unset;\n font-weight: $tab-group-heading-text-weight;\n font-size: $tab-group-heading-text-font;\n margin-left: $tab-group-heading-margin-left;\n\n &:first-child {\n margin-left: $tab-group-heading-first-child-margin-left;\n }\n\n @include not-desktop {\n font-size: $tab-group-heading-not-desktop-text-font;\n line-height: 18px;\n padding: $tab-group-heading-not-desktop-padding;\n height: unset;\n width: unset;\n }\n\n &:focus-visible {\n box-shadow: $tab-group-focus-colour inset 0 0 0 2px;\n }\n\n &:focus,\n &.active:focus {\n @include focus-highlight;\n box-shadow: 0px -4px $tab-group-focus-text-colour inset;\n }\n\n &:hover {\n background-color: $tab-group-heading-hover-background-colour;\n color: $tab-group-heading-text-colour;\n box-shadow: unset;\n }\n\n &.active {\n background-color: $tab-group-active-background-colour;\n color: $tab-group-active-text-colour;\n }\n }\n}\n","import { Component, Element, Prop, Event, h, EventEmitter, Host, forceUpdate } from '@stencil/core';\nimport { Keys } from '../Keys';\n\ninterface TabInfo {\n label: string;\n index: number;\n}\n\nlet nextId = 0;\n\n@Component({\n tag: 'admiralty-tab-group',\n styleUrl: 'tab-group.scss',\n scoped: true,\n})\nexport class TabGroupComponent {\n @Element() el: HTMLElement;\n\n @Prop({ mutable: true }) selectedIndex = 0;\n\n @Event() admiraltyTabSelected: EventEmitter<number>;\n\n private _groupId = nextId++;\n\n private _tabs: TabInfo[] = [];\n private _tabHeaders: HTMLElement[] = [];\n\n handleSelectedTab(idx: number) {\n const oldContent = this.el.querySelector(`.tab-content#${this.getTabContentId(this.selectedIndex)}`);\n oldContent.classList.remove('active');\n oldContent.setAttribute('tabindex', this.getTabIndex(idx).toString());\n\n this.selectedIndex = idx;\n this.setSelectedTabContent();\n\n this.admiraltyTabSelected.emit(idx);\n }\n\n private setSelectedTabContent() {\n const activeContent = this.el.querySelector(`.tab-content#${this.getTabContentId(this.selectedIndex)}`);\n activeContent.classList.add('active');\n activeContent.setAttribute('tabindex', this.getTabIndex(this.selectedIndex).toString());\n }\n\n private getTabIndex(index: number): number \| null {\n return this.selectedIndex === index ? 0 : -1;\n }\n\n private getTabContentId(i: number): string {\n return `tab-panel-${this._groupId}-${i}`;\n }\n\n private getTabLabelId(i: number): string {\n return `tab-label-${this._groupId}-${i}`;\n }\n\n handleKeyDown(event: KeyboardEvent): void {\n const tgt = event.target as HTMLElement;\n let processed = false;\n\n switch (event.key) {\n case Keys.LEFT_ARROW:\n this.moveFocusToPreviousTab(tgt);\n processed = true;\n break;\n case Keys.RIGHT_ARROW:\n this.moveFocusToNextTab(tgt);\n processed = true;\n break;\n\n case Keys.HOME:\n this.moveFocusToTabHeader(this._tabHeaders[0]);\n processed = true;\n break;\n\n case Keys.END:\n this.moveFocusToTabHeader(this._tabHeaders[this._tabHeaders.length - 1]);\n processed = true;\n break;\n default:\n break;\n }\n\n if (processed) {\n event.stopPropagation();\n event.preventDefault();\n }\n }\n\n private moveFocusToTabHeader(header: HTMLElement) {\n header.focus();\n }\n\n private moveFocusToPreviousTab(currentHeader: HTMLElement) {\n const firstTab = this._tabHeaders[0];\n const lastTab = this._tabHeaders[this._tabHeaders.length - 1];\n\n if (currentHeader === firstTab) {\n this.moveFocusToTabHeader(lastTab);\n } else {\n const index = this._tabHeaders.indexOf(currentHeader);\n this.moveFocusToTabHeader(this._tabHeaders[index - 1]);\n }\n }\n\n private moveFocusToNextTab(currentHeader: HTMLElement) {\n const firstTab = this._tabHeaders[0];\n const lastTab = this._tabHeaders[this._tabHeaders.length - 1];\n\n if (currentHeader === lastTab) {\n this.moveFocusToTabHeader(firstTab);\n } else {\n const index = this._tabHeaders.indexOf(currentHeader);\n this.moveFocusToTabHeader(this._tabHeaders[index + 1]);\n }\n }\n\n componentWillLoad() {\n const tabItems = this.el.querySelectorAll('admiralty-tab');\n\n this._tabs = [];\n\n if (tabItems.length > 0) {\n let idx = 0;\n tabItems.forEach(t => {\n t.tabLabelId = this.getTabLabelId(idx);\n t.tabContentId = this.getTabContentId(idx);\n\n this._tabs.push({ label: t.label, index: idx });\n ++idx;\n });\n\n this.selectedIndex = Math.max(0, Math.min(this.selectedIndex, tabItems.length - 1));\n }\n }\n\n componentDidLoad() {\n this._tabHeaders = Array.from(this.el.querySelectorAll('[role=\"tab\"]'));\n\n const tabItems = this.el.querySelectorAll('admiralty-tab .tab-content');\n\n if (tabItems.length > 0) {\n const tabContent = this.el.querySelector('hr');\n tabContent.after(...Array.from(tabItems));\n\n this.setSelectedTabContent();\n forceUpdate(this);\n }\n }\n\n render() {\n const createHeaders = () =>\n Array.from(this._tabs).map(tab => (\n <button\n class={{ heading: true, active: tab.index === this.selectedIndex }}\n id={this.getTabLabelId(tab.index)}\n role=\"tab\"\n tabIndex={this.getTabIndex(tab.index)}\n aria-setsize={this._tabs.length}\n aria-selected={`${tab.index === this.selectedIndex}`}\n aria-controls={this.getTabContentId(tab.index)}\n onClick={_ev => this.handleSelectedTab(tab.index)}\n onKeyDown={ev => this.handleKeyDown(ev)}\n >\n {tab.label}\n </button>\n ));\n\n return (\n <Host>\n <div class=\"tab-group-headers\" role=\"tablist\">\n <div class=\"headers\">{createHeaders()}</div>\n </div>\n <hr />\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"admiralty-tab-group.entry.cjs.js","mappings":"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","names":["forceUpdate","h","Host"],"sources":["src/components/Keys.ts","src/components/tab-group/tab-group.scss?tag=admiralty-tab-group&encapsulation=scoped","src/components/tab-group/tab-group.tsx"],"sourcesContent":["export enum Keys {\n UP_ARROW = 'ArrowUp',\n DOWN_ARROW = 'ArrowDown',\n LEFT_ARROW = 'ArrowLeft',\n RIGHT_ARROW = 'ArrowRight',\n ENTER = 'Enter',\n TAB = 'Tab',\n HOME = 'Home',\n END = 'End',\n SPACE = ' '\n}\n","@import 'tab-group.vars';\n\n.tab-group-headers {\n width: 100%;\n}\n\nhr {\n width: 100%;\n height: 2px;\n margin: $tab-group-horizontal-rule-margin;\n background-color: $tab-group-separator-colour;\n}\n\n.headers {\n overflow-x: auto;\n white-space: nowrap;\n display: flex;\n flex-wrap: wrap;\n\n .heading {\n cursor: pointer;\n padding: $tab-group-heading-padding;\n height: 42px;\n max-width: fit-content;\n box-sizing: border-box;\n user-select: none;\n\n text-align: center;\n text-decoration: none;\n color: $tab-group-heading-text-colour;\n background-color: unset;\n font-weight: $tab-group-heading-text-weight;\n font-size: $tab-group-heading-text-font;\n margin-left: $tab-group-heading-margin-left;\n\n &:first-child {\n margin-left: $tab-group-heading-first-child-margin-left;\n }\n\n @include not-desktop {\n font-size: $tab-group-heading-not-desktop-text-font;\n line-height: 18px;\n padding: $tab-group-heading-not-desktop-padding;\n height: unset;\n width: unset;\n }\n\n &:focus-visible {\n box-shadow: $tab-group-focus-colour inset 0 0 0 2px;\n }\n\n &:focus,\n &.active:focus {\n @include focus-highlight;\n box-shadow: 0px -4px $tab-group-focus-text-colour inset;\n }\n\n &:hover {\n background-color: $tab-group-heading-hover-background-colour;\n color: $tab-group-heading-text-colour;\n box-shadow: unset;\n }\n\n &.active {\n background-color: $tab-group-active-background-colour;\n color: $tab-group-active-text-colour;\n box-shadow: 0px -4px $tab-group-active-shadow-colour inset;\n }\n }\n}\n","import { Component, Element, Prop, Event, h, EventEmitter, Host, forceUpdate } from '@stencil/core';\nimport { Keys } from '../Keys';\n\ninterface TabInfo {\n label: string;\n index: number;\n}\n\nlet nextId = 0;\n\n@Component({\n tag: 'admiralty-tab-group',\n styleUrl: 'tab-group.scss',\n scoped: true,\n})\nexport class TabGroupComponent {\n @Element() el: HTMLElement;\n\n @Prop({ mutable: true }) selectedIndex = 0;\n\n @Event() admiraltyTabSelected: EventEmitter<number>;\n\n private _groupId = nextId++;\n\n private _tabs: TabInfo[] = [];\n private _tabHeaders: HTMLElement[] = [];\n\n handleSelectedTab(idx: number) {\n const oldContent = this.el.querySelector(`.tab-content#${this.getTabContentId(this.selectedIndex)}`);\n oldContent.classList.remove('active');\n oldContent.setAttribute('tabindex', this.getTabIndex(idx).toString());\n\n this.selectedIndex = idx;\n this.setSelectedTabContent();\n\n this.admiraltyTabSelected.emit(idx);\n }\n\n private setSelectedTabContent() {\n const activeContent = this.el.querySelector(`.tab-content#${this.getTabContentId(this.selectedIndex)}`);\n activeContent.classList.add('active');\n activeContent.setAttribute('tabindex', this.getTabIndex(this.selectedIndex).toString());\n }\n\n private getTabIndex(index: number): number \| null {\n return this.selectedIndex === index ? 0 : -1;\n }\n\n private getTabContentId(i: number): string {\n return `tab-panel-${this._groupId}-${i}`;\n }\n\n private getTabLabelId(i: number): string {\n return `tab-label-${this._groupId}-${i}`;\n }\n\n handleKeyDown(event: KeyboardEvent): void {\n const tgt = event.target as HTMLElement;\n let processed = false;\n\n switch (event.key) {\n case Keys.LEFT_ARROW:\n this.moveFocusToPreviousTab(tgt);\n processed = true;\n break;\n case Keys.RIGHT_ARROW:\n this.moveFocusToNextTab(tgt);\n processed = true;\n break;\n\n case Keys.HOME:\n this.moveFocusToTabHeader(this._tabHeaders[0]);\n processed = true;\n break;\n\n case Keys.END:\n this.moveFocusToTabHeader(this._tabHeaders[this._tabHeaders.length - 1]);\n processed = true;\n break;\n default:\n break;\n }\n\n if (processed) {\n event.stopPropagation();\n event.preventDefault();\n }\n }\n\n private moveFocusToTabHeader(header: HTMLElement) {\n header.focus();\n }\n\n private moveFocusToPreviousTab(currentHeader: HTMLElement) {\n const firstTab = this._tabHeaders[0];\n const lastTab = this._tabHeaders[this._tabHeaders.length - 1];\n\n if (currentHeader === firstTab) {\n this.moveFocusToTabHeader(lastTab);\n } else {\n const index = this._tabHeaders.indexOf(currentHeader);\n this.moveFocusToTabHeader(this._tabHeaders[index - 1]);\n }\n }\n\n private moveFocusToNextTab(currentHeader: HTMLElement) {\n const firstTab = this._tabHeaders[0];\n const lastTab = this._tabHeaders[this._tabHeaders.length - 1];\n\n if (currentHeader === lastTab) {\n this.moveFocusToTabHeader(firstTab);\n } else {\n const index = this._tabHeaders.indexOf(currentHeader);\n this.moveFocusToTabHeader(this._tabHeaders[index + 1]);\n }\n }\n\n componentWillLoad() {\n const tabItems = this.el.querySelectorAll('admiralty-tab');\n\n this._tabs = [];\n\n if (tabItems.length > 0) {\n let idx = 0;\n tabItems.forEach(t => {\n t.tabLabelId = this.getTabLabelId(idx);\n t.tabContentId = this.getTabContentId(idx);\n\n this._tabs.push({ label: t.label, index: idx });\n ++idx;\n });\n\n this.selectedIndex = Math.max(0, Math.min(this.selectedIndex, tabItems.length - 1));\n }\n }\n\n componentDidLoad() {\n this._tabHeaders = Array.from(this.el.querySelectorAll('[role=\"tab\"]'));\n\n const tabItems = this.el.querySelectorAll('admiralty-tab .tab-content');\n\n if (tabItems.length > 0) {\n const tabContent = this.el.querySelector('hr');\n tabContent.after(...Array.from(tabItems));\n\n this.setSelectedTabContent();\n forceUpdate(this);\n }\n }\n\n render() {\n const createHeaders = () =>\n Array.from(this._tabs).map(tab => (\n <button\n class={{ heading: true, active: tab.index === this.selectedIndex }}\n id={this.getTabLabelId(tab.index)}\n role=\"tab\"\n tabIndex={this.getTabIndex(tab.index)}\n aria-setsize={this._tabs.length}\n aria-selected={`${tab.index === this.selectedIndex}`}\n aria-controls={this.getTabContentId(tab.index)}\n onClick={_ev => this.handleSelectedTab(tab.index)}\n onKeyDown={ev => this.handleKeyDown(ev)}\n >\n {tab.label}\n </button>\n ));\n\n return (\n <Host>\n <div class=\"tab-group-headers\" role=\"tablist\">\n <div class=\"headers\">{createHeaders()}</div>\n </div>\n <hr />\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/admiralty-text-side-bar-item.cjs.entry.js CHANGED Viewed

@@ -10,7 +10,7 @@ const TextSideBarItemVariant = {
     TextLink: 'textLink'
 };
-const textSideBarItemCss = ".visually-hidden.sc-admiralty-text-side-bar-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-text-side-bar-item{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-text-side-bar-item{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-text-side-bar-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-text-side-bar-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-text-side-bar-item{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-text-side-bar-item{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-text-side-bar-item{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-text-side-bar-item{display:none}}.sc-admiralty-text-side-bar-item-h{--admiralty-icon-font-size:var(--admiralty-font-size-2)}li.sc-admiralty-text-side-bar-item{display:flex;justify-content:center;list-style:none;margin:0 0 0 1px}li.sc-admiralty-text-side-bar-item:before{content:\"\";display:none}.expandable-item.sc-admiralty-text-side-bar-item{flex:1;display:flex;flex-flow:column}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.sc-admiralty-text-side-bar-item{display:inline-flex;align-items:center;font-size:var(--admiralty-side-bar-item-font-size, var(--admiralty-font-size-0));white-space:nowrap;font-weight:var(--admiralty-side-bar-item-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;padding:0.3rem 0.5rem;overflow-wrap:break-word;color:var(--admiralty-side-bar-item-text-colour, var(--admiralty-colour-primary))}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.sc-admiralty-text-side-bar-item:hover{color:var(--admiralty-colour-primary);font-weight:var(--admiralty-side-bar-item-font-weight, var(--admiralty-font-weight-medium));background-color:var(--admiralty-hover-background-colour)}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.sc-admiralty-text-side-bar-item:focus-visible,.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.active.sc-admiralty-text-side-bar-item:focus-visible{outline:none;box-shadow:inset 0 -4px 0 0 var(--admiralty-colour-primary);background-color:var(--admiralty-focus-colour);color:var(--admiralty-colour-primary)}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.active.sc-admiralty-text-side-bar-item{font-weight:500;background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast)}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.sc-admiralty-text-side-bar-item:active{background-color:var(--admiralty-focus-colour);color:var(--admiralty-colour-primary);box-shadow:inset 0 -4px 0 0 var(--admiralty-colour-primary)}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.sc-admiralty-text-side-bar-item .slot.sc-admiralty-text-side-bar-item{line-height:2.5rem}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.sc-admiralty-text-side-bar-item .icon.sc-admiralty-text-side-bar-item{display:flex;width:100%;justify-content:right;font-size:var(--admiralty-side-bar-item-icon-font-size, var(--admiralty-font-size-4))}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.sc-admiralty-text-side-bar-item .expansion-content.sc-admiralty-text-side-bar-item{display:none;max-height:0;overflow:visible}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.expanded.sc-admiralty-text-side-bar-item .expansion-content.sc-admiralty-text-side-bar-item{display:block;max-height:initial;padding:12px 0}.text-link.sc-admiralty-text-side-bar-item{all:unset;cursor:pointer;display:flex;flex-direction:column;justify-content:left;flex:1;user-select:none;text-decoration:none;text-align:left;color:var(--admiralty-text-colour);font-weight:var(--admiralty-text-link-font-weight, var(--admiralty-font-weight-normal));font-size:var(--admiralty-side-bar-item-font-size, var(--admiralty-font-size-0));padding:0.5rem 1.5rem}.text-link.is-main-link.sc-admiralty-text-side-bar-item{font-weight:var(--admiralty-text-link-is-main-font-weight, var(--admiralty-font-weight-medium));padding:0.5rem}.text-link.sc-admiralty-text-side-bar-item:hover{color:var(--admiralty-colour-primary);font-weight:var(--admiralty-side-bar-item-font-weight, var(--admiralty-font-weight-medium));background-color:var(--admiralty-hover-background-colour)}.text-link.sc-admiralty-text-side-bar-item:focus-visible,.text-link.active.sc-admiralty-text-side-bar-item:focus-visible{outline:none;box-shadow:inset 0 -4px 0 0 var(--admiralty-colour-primary);background-color:var(--admiralty-focus-colour);color:var(--admiralty-colour-primary)}.text-link.active.sc-admiralty-text-side-bar-item{font-weight:var(--admiralty-text-link-active-font-weight, var(--admiralty-font-weight-medium));background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast)}.text-link.sc-admiralty-text-side-bar-item:active{background-color:var(--admiralty-focus-colour);color:var(--admiralty-colour-primary);box-shadow:inset 0 -4px 0 0 var(--admiralty-colour-primary)}";
+const textSideBarItemCss = ".visually-hidden.sc-admiralty-text-side-bar-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-text-side-bar-item{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-text-side-bar-item{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-text-side-bar-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-text-side-bar-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-text-side-bar-item{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-text-side-bar-item{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-text-side-bar-item{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-text-side-bar-item{display:none}}.sc-admiralty-text-side-bar-item-h{--admiralty-icon-font-size:var(--admiralty-font-size-2)}li.sc-admiralty-text-side-bar-item{display:flex;justify-content:center;list-style:none;margin:0 0 0 1px}li.sc-admiralty-text-side-bar-item:before{content:\"\";display:none}.expandable-item.sc-admiralty-text-side-bar-item{flex:1;display:flex;flex-flow:column;background-color:var(--admiralty-header-background-colour)}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.sc-admiralty-text-side-bar-item{display:inline-flex;align-items:center;font-size:var(--admiralty-side-bar-item-font-size, var(--admiralty-font-size-0));white-space:nowrap;font-weight:var(--admiralty-side-bar-item-font-weight, var(--admiralty-font-weight-medium));background-color:var(--admiralty-header-background-colour);cursor:pointer;padding:0.3rem 0.5rem;overflow-wrap:break-word;color:var(--admiralty-side-bar-item-text-colour, var(--admiralty-colour-primary))}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.sc-admiralty-text-side-bar-item:hover{color:var(--admiralty-colour-primary);font-weight:var(--admiralty-side-bar-item-font-weight, var(--admiralty-font-weight-medium));background-color:var(--admiralty-hover-background-colour)}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.sc-admiralty-text-side-bar-item:focus-visible,.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.active.sc-admiralty-text-side-bar-item:focus-visible{outline:none;box-shadow:inset 0 -4px 0 0 var(--text-side-bar-item-focus-border-colour);background-color:var(--text-side-bar-focus-background-colour);color:var(--admiralty-colour-primary)}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.active.sc-admiralty-text-side-bar-item{font-weight:500;background-color:var(--text-side-bar-item-active-background-colour);color:var(--admiralty-colour-secondary-contrast);border-top:2px solid var(--admiralty-colour-secondary-contrast);border-bottom:2px solid var(--admiralty-colour-secondary-contrast)}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.sc-admiralty-text-side-bar-item:active{background-color:var(--admiralty-focus-colour);color:var(--admiralty-focus-contrast);box-shadow:inset 0 -4px 0 0 var(--admiralty-focus-contrast)}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.sc-admiralty-text-side-bar-item .slot.sc-admiralty-text-side-bar-item{line-height:2.5rem}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.sc-admiralty-text-side-bar-item .icon.sc-admiralty-text-side-bar-item{display:flex;width:100%;justify-content:right;font-size:var(--admiralty-side-bar-item-icon-font-size, var(--admiralty-font-size-4))}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.sc-admiralty-text-side-bar-item .expansion-content.sc-admiralty-text-side-bar-item{display:none;max-height:0;overflow:visible}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.expanded.sc-admiralty-text-side-bar-item .expansion-content.sc-admiralty-text-side-bar-item{display:block;max-height:initial;padding:12px 0}.text-link.sc-admiralty-text-side-bar-item{all:unset;cursor:pointer;display:flex;flex-direction:column;justify-content:left;flex:1;user-select:none;text-decoration:none;text-align:left;color:var(--admiralty-text-colour);font-weight:var(--admiralty-text-link-font-weight, var(--admiralty-font-weight-normal));font-size:var(--admiralty-side-bar-item-font-size, var(--admiralty-font-size-0));padding:0.5rem 1.5rem}.text-link.is-main-link.sc-admiralty-text-side-bar-item{font-weight:var(--admiralty-text-link-is-main-font-weight, var(--admiralty-font-weight-medium));padding:0.5rem}.text-link.sc-admiralty-text-side-bar-item:hover{color:var(--admiralty-colour-primary);font-weight:var(--admiralty-side-bar-item-font-weight, var(--admiralty-font-weight-medium));background-color:var(--admiralty-hover-background-colour)}.text-link.sc-admiralty-text-side-bar-item:focus-visible,.text-link.active.sc-admiralty-text-side-bar-item:focus-visible{outline:none;box-shadow:inset 0 -4px 0 0 var(--text-side-bar-item-focus-border-colour);background-color:var(--text-side-bar-focus-background-colour);color:var(--admiralty-colour-primary)}.text-link.active.sc-admiralty-text-side-bar-item{font-weight:var(--admiralty-text-link-active-font-weight, var(--admiralty-font-weight-medium));background-color:var(--text-side-bar-item-active-background-colour);color:var(--admiralty-colour-secondary-contrast);border-top:2px solid var(--admiralty-colour-secondary-contrast);border-bottom:2px solid var(--admiralty-colour-secondary-contrast)}.text-link.sc-admiralty-text-side-bar-item:active{background-color:var(--admiralty-focus-colour);color:var(--admiralty-focus-contrast);box-shadow:inset 0 -4px 0 0 var(--admiralty-focus-contrast)}";
 const AdmiraltyTextSideBarItemStyle0 = textSideBarItemCss;
 const TextSideBarItemComponent = class {