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/components/admiralty-read-more.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"admiralty-read-more.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,QACE,gEACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAED,+DACE,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,QAAQ,mBACb,IAAI,CAAC,SAAS,EAC7B,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAClC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAEjC,uEAAgB,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAE,IAAI,CAAC,aAAa,GAAmB,EAC1F,+DAAO,IAAI,CAAC,OAAO,CAAQ,EAC3B,6DAAM,KAAK,EAAC,iBAAiB,UAAI,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,MAAM,kBAAqB,CAC9E,EACT,4DAAK,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,SAAS,qBAAmB,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,IACvG,8DAAa,CACT,CACE,EACV;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/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.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,QACE,gEACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAED,+DACE,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,QAAQ,mBACb,IAAI,CAAC,SAAS,EAC7B,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAClC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAEjC,uEAAgB,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAE,IAAI,CAAC,aAAa,GAAmB,EAC1F,+DAAO,IAAI,CAAC,OAAO,CAAQ,EAC3B,6DAAM,KAAK,EAAC,iBAAiB,UAAI,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,MAAM,kBAAqB,CAC9E,EACT,4DAAK,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,SAAS,qBAAmB,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,IACvG,8DAAa,CACT,CACE,EACV;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/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/components/admiralty-tab-group.js CHANGED Viewed

@@ -13,7 +13,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/components/admiralty-tab-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"admiralty-tab-group.js","mappings":"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","names":[],"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.js","mappings":"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","names":[],"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/components/admiralty-text-side-bar-item.js CHANGED Viewed

@@ -7,7 +7,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 = /*@__PURE__*/ proxyCustomElement(class TextSideBarItemComponent extends H {

package/dist/components/admiralty-text-side-bar-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"admiralty-text-side-bar-item.js","mappings":"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","names":[],"sources":["src/components/text-side-bar-item/text-side-bar-item.types.ts","src/components/text-side-bar-item/text-side-bar-item.scss?tag=admiralty-text-side-bar-item&encapsulation=scoped","src/components/text-side-bar-item/text-side-bar-item.tsx"],"sourcesContent":["export type TextSideBarItemVariant = 'expandable' \| 'text' \| 'textLink';\nexport const TextSideBarItemVariant = {\n Expandable: 'expandable' as TextSideBarItemVariant,\n Text: 'text' as TextSideBarItemVariant,\n TextLink: 'textLink' as TextSideBarItemVariant\n}\n","@import 'text-side-bar-item.vars.scss';\n\n:host {\n --admiralty-icon-font-size: var(--admiralty-font-size-2);\n}\n\nli {\n display: flex;\n justify-content: center;\n list-style: none;\n margin: 0 0 0 1px;\n &:before {\n content: '';\n display: none;\n }\n}\n\n.expandable-item {\n flex: 1;\n display: flex;\n flex-flow: column;\n\n .expandable-item-button {\n display: inline-flex;\n align-items: center;\n font-size: $expandable-side-bar-item-font-size;\n white-space: nowrap;\n font-weight: $expandable-side-bar-item-font-weight;\n background-color: unset;\n cursor: pointer;\n padding: .3rem .5rem;\n overflow-wrap: break-word;\n color: $expandable-side-bar-item-text-colour;\n\n &:hover {\n color: $text-link-font-colour;\n font-weight: $expandable-side-bar-item-font-weight;\n background-color: $text-link-background-hover-colour;\n }\n\n &:focus-visible,\n &.active:focus-visible {\n outline: none;\n box-shadow: inset 0 -4px 0 0 $text-link-focus-text-colour;\n background-color: $text-link-focus-background-colour;\n color: $text-link-focus-text-colour;\n }\n\n &.active {\n font-weight: 500;\n background-color: $text-link-active-background-colour;\n color: $text-link-active-text-colour;\n }\n\n &:active {\n background-color: $text-link-focus-background-colour;\n color: $text-link-focus-text-colour;\n box-shadow: inset 0 -4px 0 0 $text-link-focus-text-colour;\n }\n\n .slot {\n line-height: 2.5rem;\n }\n\n .icon {\n display: flex;\n width: 100%;\n justify-content: right;\n font-size: $expandable-side-bar-item-icon-font-size;\n }\n\n .expansion-content {\n display: none;\n max-height: 0;\n overflow: visible;\n }\n &.expanded .expansion-content {\n display: block;\n max-height: initial;\n padding: 12px 0;\n }\n }\n}\n\n.text-link {\n all: unset;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n justify-content: left;\n flex: 1;\n user-select: none;\n text-decoration: none;\n text-align: left;\n color: $text-side-bar-item-text-colour;\n font-weight: $text-link-font-weight;\n font-size: $expandable-side-bar-item-font-size;\n padding: .5rem 1.5rem;\n\n &.is-main-link {\n font-weight: $text-link-is-main-font-weight;\n padding: .5rem;\n }\n\n &:hover {\n color: $text-link-font-colour;\n font-weight: $expandable-side-bar-item-font-weight;\n background-color: $text-link-background-hover-colour;\n }\n\n &:focus-visible,\n &.active:focus-visible {\n outline: none;\n box-shadow: inset 0 -4px 0 0 $text-link-focus-text-colour;\n background-color: $text-link-focus-background-colour;\n color: $text-link-focus-text-colour;\n }\n\n &.active {\n font-weight: $text-link-active-font-weight;\n background-color: $text-link-active-background-colour;\n color: $text-link-active-text-colour;\n }\n\n &:active {\n background-color: $text-link-focus-background-colour;\n color: $text-link-focus-text-colour;\n box-shadow: inset 0 -4px 0 0 $text-link-focus-text-colour;\n }\n}\n","import { Component, Event, EventEmitter, Prop, h, Element, Watch, Host } from '@stencil/core';\nimport { TextSideBarItemVariant } from \"./text-side-bar-item.types\";\n\n/*\n @slot The text to display under the icon for secondary variant\n /\n@Component({\n tag: 'admiralty-text-side-bar-item',\n styleUrl: 'text-side-bar-item.scss',\n scoped: true,\n})\nexport class TextSideBarItemComponent {\n private internalId: number = ++nextId;\n\n @Element() el!: HTMLAdmiraltyTextSideBarItemElement;\n /\n The type of text side bar item to render. Valid values are `primary` and `secondary`.\n * Default value is `primary`.\n /\n @Prop() variant: TextSideBarItemVariant = TextSideBarItemVariant.Expandable;\n\n /\n The event that is dispatched when the expanded status is toggled.\n /\n @Event() toggled: EventEmitter<boolean>;\n\n /\n Whether the component is expanded.\n /\n @Prop({ mutable: true, reflect: true }) expanded = false;\n\n /\n The name of the icon to display. A full list of available icons can be viewed at [https://fonts.google.com/icons](https://fonts.google.com/icons)\n /\n @Prop() icon: string;\n /\n The URL to link to.\n /\n @Prop() href: string;\n\n /\n Item text for the button or link depending on variant\n /\n @Prop() itemText: string;\n\n /\n Causes the default browser redirect to be suppressed. Can be used in conjunction with the\n * `onTextSideBarItemClick` event to use a navigation router and prevent a full page reload when navigating.\n /\n @Prop() suppressRedirect?: boolean = false;\n\n /\n Represents whether this SideBarItem is 'active' and will be styled differently than SideBarItems\n * that are not 'active'. There should only be one SideBarItem that is 'active' per SideBar.\n /\n @Prop({ mutable: true, reflect: true }) active: boolean = false; // { mutable: true, reflect: true }\n\n /\n An event emitted when this Side Bar item is selected containing the sideBarItemId\n */\n @Event() textSideBarItemClick: EventEmitter<string>;\n\n @Watch('active')\n handleActiveChange(newValue: boolean) {\n const anchor = this.el.querySelector('a');\n if (anchor) {\n anchor.classList.toggle('active', newValue)\n }\n }\n\n componentDidLoad() {\n this.handleActiveChange(this.active)\n }\n\n onToggle() {\n this.expanded = !this.expanded;\n\n if (this.expanded) {\n this.el.dispatchEvent(new CustomEvent('text-side-bar-item-active', {\n detail: { id: this.internalId },\n bubbles: true,\n composed: true\n }))\n }\n\n this.toggled.emit(this.expanded);\n }\n\n handleMouseDown(id: string) {\n this.active = true;\n const allItems = document.querySelectorAll('admiralty-text-side-bar-item');\n allItems.forEach(item => {\n let anchor: any = (item.shadowRoot ?? item).querySelector('a');\n if (anchor && anchor.id.toString() === id.toString()) {\n anchor.classList.add('active')\n } else {\n if(anchor === null) {\n anchor = (item.shadowRoot ?? item).querySelector('button');\n }\n anchor.classList.remove('active');\n }\n })\n }\n\n handleClick(ev: MouseEvent): CustomEvent<string> {\n if (this.suppressRedirect) {\n ev.preventDefault();\n }\n ev.stopPropagation();\n\n this.el.dispatchEvent(new CustomEvent('text-side-bar-item-active', {\n detail: { id: this.internalId },\n bubbles: true,\n composed: true\n }));\n\n // BUG: when changing this to object it the item loses active state for some reason when click elsewhere.\n return this.textSideBarItemClick.emit(this.href);\n }\n\n getExpansionIcon(): string {\n return this.expanded ? 'keyboard-arrow-up-rounded' : 'keyboard-arrow-down-rounded';\n }\n\n render() {\n return (\n <Host data-text-side-bar-item-id={'text-side-bar-item-' + this.internalId}>\n <li>\n {this.variant === TextSideBarItemVariant.Expandable &&\n <div class=\"expandable-item\">\n <button id={\"text-side-bar-item-button-\" + this.internalId}\n class={{ 'expandable-item-button': true, 'active': this.active }}\n onClick={() => this.onToggle()}>\n {this.itemText}\n <div class=\"icon\">\n <admiralty-icon size={30} name={this.getExpansionIcon()}></admiralty-icon>\n </div>\n </button>\n <div class=\"slot\" hidden={!this.expanded}>\n <slot></slot>\n </div>\n </div>\n }\n\n {this.variant === TextSideBarItemVariant.Text &&\n <a id={\"text-side-bar-item-anchor-\" + this.internalId}\n class={{ 'text-link': true, 'active': this.active }}\n href={this.href}\n onMouseDown={() => this.handleMouseDown(\"text-side-bar-item-anchor-\" + this.internalId)}\n onClick={ev => this.handleClick(ev)}>\n {this.itemText}\n </a>\n }\n\n {this.variant === TextSideBarItemVariant.TextLink &&\n <a id={\"text-side-bar-item-anchor-\" + this.internalId}\n class={{ 'text-link is-main-link': true, 'active': this.active }}\n href={this.href}\n onMouseDown={() => this.handleMouseDown(\"text-side-bar-item-anchor-\" + this.internalId)}\n onClick={ev => this.handleClick(ev)}>\n {this.itemText}\n </a>\n }\n </li>\n </Host>\n );\n }\n}\nlet nextId = 0;\n"],"version":3}
1	+ {"file":"admiralty-text-side-bar-item.js","mappings":"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","names":[],"sources":["src/components/text-side-bar-item/text-side-bar-item.types.ts","src/components/text-side-bar-item/text-side-bar-item.scss?tag=admiralty-text-side-bar-item&encapsulation=scoped","src/components/text-side-bar-item/text-side-bar-item.tsx"],"sourcesContent":["export type TextSideBarItemVariant = 'expandable' \| 'text' \| 'textLink';\nexport const TextSideBarItemVariant = {\n Expandable: 'expandable' as TextSideBarItemVariant,\n Text: 'text' as TextSideBarItemVariant,\n TextLink: 'textLink' as TextSideBarItemVariant\n}\n","@import 'text-side-bar-item.vars.scss';\n\n:host {\n --admiralty-icon-font-size: var(--admiralty-font-size-2);\n}\n\nli {\n display: flex;\n justify-content: center;\n list-style: none;\n margin: 0 0 0 1px;\n &:before {\n content: '';\n display: none;\n }\n}\n\n.expandable-item {\n flex: 1;\n display: flex;\n flex-flow: column;\n background-color: $side-bar-background-colour;\n\n .expandable-item-button {\n display: inline-flex;\n align-items: center;\n font-size: $expandable-side-bar-item-font-size;\n white-space: nowrap;\n font-weight: $expandable-side-bar-item-font-weight;\n background-color: $side-bar-background-colour;\n cursor: pointer;\n padding: .3rem .5rem;\n overflow-wrap: break-word;\n color: $expandable-side-bar-item-text-colour;\n\n &:hover {\n color: $text-link-font-colour;\n font-weight: $expandable-side-bar-item-font-weight;\n background-color: $text-link-background-hover-colour;\n }\n\n &:focus-visible,\n &.active:focus-visible {\n outline: none;\n box-shadow: inset 0 -4px 0 0 $text-side-bar-focus-border-colour;\n background-color: $text-side-bar-focus-background-colour;\n color: $text-link-focus-text-colour;\n }\n\n &.active {\n font-weight: 500;\n background-color: $text-side-bar-item-active-background-colour;\n color: $text-link-active-text-colour;\n border-top: 2px solid $text-side-bar-item-active-border-colour;\n border-bottom: 2px solid $text-side-bar-item-active-border-colour;\n }\n\n &:active {\n background-color: $text-link-focus-background-colour;\n color: $text-side-bar-focus-text-color;\n box-shadow: inset 0 -4px 0 0 $text-side-bar-focus-text-color;\n }\n\n .slot {\n line-height: 2.5rem;\n }\n\n .icon {\n display: flex;\n width: 100%;\n justify-content: right;\n font-size: $expandable-side-bar-item-icon-font-size;\n }\n\n .expansion-content {\n display: none;\n max-height: 0;\n overflow: visible;\n }\n\n &.expanded .expansion-content {\n display: block;\n max-height: initial;\n padding: 12px 0;\n }\n }\n}\n\n.text-link {\n all: unset;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n justify-content: left;\n flex: 1;\n user-select: none;\n text-decoration: none;\n text-align: left;\n color: $text-side-bar-item-text-colour;\n font-weight: $text-link-font-weight;\n font-size: $expandable-side-bar-item-font-size;\n padding: .5rem 1.5rem;\n\n &.is-main-link {\n font-weight: $text-link-is-main-font-weight;\n padding: .5rem;\n }\n\n &:hover {\n color: $text-link-font-colour;\n font-weight: $expandable-side-bar-item-font-weight;\n background-color: $text-link-background-hover-colour;\n }\n\n &:focus-visible,\n &.active:focus-visible {\n outline: none;\n box-shadow: inset 0 -4px 0 0 $text-side-bar-focus-border-colour;\n background-color: $text-side-bar-focus-background-colour;\n color: $text-link-focus-text-colour;\n }\n\n &.active {\n font-weight: $text-link-active-font-weight;\n background-color: $text-side-bar-item-active-background-colour;\n color: $text-link-active-text-colour;\n border-top: 2px solid $text-side-bar-item-active-border-colour;\n border-bottom: 2px solid $text-side-bar-item-active-border-colour;\n }\n\n &:active {\n background-color: $text-link-focus-background-colour;\n color: $text-side-bar-focus-text-color;\n box-shadow: inset 0 -4px 0 0 $text-side-bar-focus-text-color;\n }\n}\n","import { Component, Event, EventEmitter, Prop, h, Element, Watch, Host } from '@stencil/core';\nimport { TextSideBarItemVariant } from \"./text-side-bar-item.types\";\n\n/*\n @slot The text to display under the icon for secondary variant\n /\n@Component({\n tag: 'admiralty-text-side-bar-item',\n styleUrl: 'text-side-bar-item.scss',\n scoped: true,\n})\nexport class TextSideBarItemComponent {\n private internalId: number = ++nextId;\n\n @Element() el!: HTMLAdmiraltyTextSideBarItemElement;\n /\n The type of text side bar item to render. Valid values are `primary` and `secondary`.\n * Default value is `primary`.\n /\n @Prop() variant: TextSideBarItemVariant = TextSideBarItemVariant.Expandable;\n\n /\n The event that is dispatched when the expanded status is toggled.\n /\n @Event() toggled: EventEmitter<boolean>;\n\n /\n Whether the component is expanded.\n /\n @Prop({ mutable: true, reflect: true }) expanded = false;\n\n /\n The name of the icon to display. A full list of available icons can be viewed at [https://fonts.google.com/icons](https://fonts.google.com/icons)\n /\n @Prop() icon: string;\n /\n The URL to link to.\n /\n @Prop() href: string;\n\n /\n Item text for the button or link depending on variant\n /\n @Prop() itemText: string;\n\n /\n Causes the default browser redirect to be suppressed. Can be used in conjunction with the\n * `onTextSideBarItemClick` event to use a navigation router and prevent a full page reload when navigating.\n /\n @Prop() suppressRedirect?: boolean = false;\n\n /\n Represents whether this SideBarItem is 'active' and will be styled differently than SideBarItems\n * that are not 'active'. There should only be one SideBarItem that is 'active' per SideBar.\n /\n @Prop({ mutable: true, reflect: true }) active: boolean = false; // { mutable: true, reflect: true }\n\n /\n An event emitted when this Side Bar item is selected containing the sideBarItemId\n */\n @Event() textSideBarItemClick: EventEmitter<string>;\n\n @Watch('active')\n handleActiveChange(newValue: boolean) {\n const anchor = this.el.querySelector('a');\n if (anchor) {\n anchor.classList.toggle('active', newValue)\n }\n }\n\n componentDidLoad() {\n this.handleActiveChange(this.active)\n }\n\n onToggle() {\n this.expanded = !this.expanded;\n\n if (this.expanded) {\n this.el.dispatchEvent(new CustomEvent('text-side-bar-item-active', {\n detail: { id: this.internalId },\n bubbles: true,\n composed: true\n }))\n }\n\n this.toggled.emit(this.expanded);\n }\n\n handleMouseDown(id: string) {\n this.active = true;\n const allItems = document.querySelectorAll('admiralty-text-side-bar-item');\n allItems.forEach(item => {\n let anchor: any = (item.shadowRoot ?? item).querySelector('a');\n if (anchor && anchor.id.toString() === id.toString()) {\n anchor.classList.add('active')\n } else {\n if(anchor === null) {\n anchor = (item.shadowRoot ?? item).querySelector('button');\n }\n anchor.classList.remove('active');\n }\n })\n }\n\n handleClick(ev: MouseEvent): CustomEvent<string> {\n if (this.suppressRedirect) {\n ev.preventDefault();\n }\n ev.stopPropagation();\n\n this.el.dispatchEvent(new CustomEvent('text-side-bar-item-active', {\n detail: { id: this.internalId },\n bubbles: true,\n composed: true\n }));\n\n // BUG: when changing this to object it the item loses active state for some reason when click elsewhere.\n return this.textSideBarItemClick.emit(this.href);\n }\n\n getExpansionIcon(): string {\n return this.expanded ? 'keyboard-arrow-up-rounded' : 'keyboard-arrow-down-rounded';\n }\n\n render() {\n return (\n <Host data-text-side-bar-item-id={'text-side-bar-item-' + this.internalId}>\n <li>\n {this.variant === TextSideBarItemVariant.Expandable &&\n <div class=\"expandable-item\">\n <button id={\"text-side-bar-item-button-\" + this.internalId}\n class={{ 'expandable-item-button': true, 'active': this.active }}\n onClick={() => this.onToggle()}>\n {this.itemText}\n <div class=\"icon\">\n <admiralty-icon size={30} name={this.getExpansionIcon()}></admiralty-icon>\n </div>\n </button>\n <div class=\"slot\" hidden={!this.expanded}>\n <slot></slot>\n </div>\n </div>\n }\n\n {this.variant === TextSideBarItemVariant.Text &&\n <a id={\"text-side-bar-item-anchor-\" + this.internalId}\n class={{ 'text-link': true, 'active': this.active }}\n href={this.href}\n onMouseDown={() => this.handleMouseDown(\"text-side-bar-item-anchor-\" + this.internalId)}\n onClick={ev => this.handleClick(ev)}>\n {this.itemText}\n </a>\n }\n\n {this.variant === TextSideBarItemVariant.TextLink &&\n <a id={\"text-side-bar-item-anchor-\" + this.internalId}\n class={{ 'text-link is-main-link': true, 'active': this.active }}\n href={this.href}\n onMouseDown={() => this.handleMouseDown(\"text-side-bar-item-anchor-\" + this.internalId)}\n onClick={ev => this.handleClick(ev)}>\n {this.itemText}\n </a>\n }\n </li>\n </Host>\n );\n }\n}\nlet nextId = 0;\n"],"version":3}

package/dist/components/admiralty-text-side-bar.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './p-7dd465c9.js';
-const textSideBarCss = ".visually-hidden.sc-admiralty-text-side-bar: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{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-text-side-bar{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-text-side-bar{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-text-side-bar{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-text-side-bar{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-text-side-bar{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-text-side-bar{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-text-side-bar{display:none}}.sc-admiralty-text-side-bar-h{border-right:1px solid var(--admiralty-text-side-bar-right-border, var(--admiralty-colour-light))}nav.sc-admiralty-text-side-bar{display:flex;flex-direction:column;justify-content:space-between;height:100%;background-color:var(--admiralty-colour-primary-contrast)}ul.sc-admiralty-text-side-bar{display:flex;flex-direction:column}.logo.sc-admiralty-text-side-bar{height:50px;margin:24px 0 20px}";
+const textSideBarCss = ".visually-hidden.sc-admiralty-text-side-bar: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{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-text-side-bar{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-text-side-bar{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-text-side-bar{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-text-side-bar{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-text-side-bar{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-text-side-bar{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-text-side-bar{display:none}}.sc-admiralty-text-side-bar-h{border-right:1px solid var(--admiralty-text-side-bar-right-border, var(--admiralty-colour-light))}@media (prefers-color-scheme: dark){.sc-admiralty-text-side-bar-h{color-scheme:dark}}nav.sc-admiralty-text-side-bar{display:flex;flex-direction:column;justify-content:space-between;height:100%;background-color:var(--admiralty-header-background-colour)}ul.sc-admiralty-text-side-bar{display:flex;flex-direction:column}.logo.sc-admiralty-text-side-bar{height:50px;margin:24px 0 20px}";
 const AdmiraltyTextSideBarStyle0 = textSideBarCss;
 const TextSideBarComponent = /*@__PURE__*/ proxyCustomElement(class TextSideBarComponent extends H {

package/dist/components/admiralty-text-side-bar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"admiralty-text-side-bar.js","mappings":";;AAAA,MAAM,cAAc,GAAG,~~k+CAAk+C~~,CAAC;~~AAC1/C~~,mCAAe,cAAc;;MCWhB,oBAAoB;;;;;wBASH,IAAI;0BAIH,oBAAoB;gCAKd,OAAO;;IAE1C,MAAM;QACJ,QACE,0EAAiB,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,KAAK,EAAE,GAAG,IAAI,CAAC,gBAAgB,GAAG,OAAO,GAAG,OAAO,EAAE,IAC7I,6DACE,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACvB,EACL,6DACE,6DAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,IAAI,CAAC,QAAQ,GAAG,WAAK,KAAK,EAAC,MAAM,EAAC,GAAG,EAAE,IAAI,CAAC,UAAU,EAAE,GAAG,EAAC,WAAW,iBAAa,MAAM,GAAG,GAAG,IAAI,CAClG,CACD,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/text-side-bar/text-side-bar.scss?tag=admiralty-text-side-bar&encapsulation=scoped","src/components/text-side-bar/text-side-bar.tsx"],"sourcesContent":["@import 'text-side-bar.vars';\n\n:host {\n border-right: 1px solid $side-bar-right-border-colour;\n}\n\nnav {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n background-color: $side-bar-background-colour;\n}\n\nul {\n display: flex;\n flex-direction: column;\n}\n\n.logo {\n height: 50px;\n margin: 24px 0 20px;\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\n\n/*\n @slot items - 'admiralty-text-side-bar-item' components should be placed here in the items slot\n * @slot footer - additional 'admiralty-text-side-bar-item' components can be placed in the footer slot\n * to display at the bottom of the text side bar.\n /\n@Component({\n tag: 'admiralty-text-side-bar',\n styleUrl: 'text-side-bar.scss',\n scoped: true,\n})\nexport class TextSideBarComponent {\n @Element() el!: HTMLAdmiraltyTextSideBarElement;\n /\n A label for accessibility purposes to describe what this navigation is for.\n /\n @Prop() label: string;\n /\n Set this to false to hide the logo that is displayed in the bottom of the side bar.\n /\n @Prop() showLogo: boolean = true;\n /\n The URI of the logo image\n /\n @Prop() logoImgUrl: string = 'svg/UKHO crest.svg';\n\n /\n Sets the sidebar width\n */\n @Prop() textSideBarWidth: string = '150px';\n\n render() {\n return (\n <nav aria-label={this.label} style={{ width: this.textSideBarWidth ? this.textSideBarWidth !== '' ? this.textSideBarWidth : '100px' : '100px' }}>\n <ul>\n <slot name=\"items\"></slot>\n </ul>\n <ul>\n <slot name=\"footer\"></slot>\n {this.showLogo ? <img class=\"logo\" src={this.logoImgUrl} alt=\"UKHO Logo\" aria-hidden=\"true\" /> : null}\n </ul>\n </nav>\n );\n }\n}\n"],"version":3}
1	+ {"file":"admiralty-text-side-bar.js","mappings":";;AAAA,MAAM,cAAc,GAAG,wjDAAwjD,CAAC;AAChlD,mCAAe,cAAc;;MCWhB,oBAAoB;;;;;wBASH,IAAI;0BAIH,oBAAoB;gCAKd,OAAO;;IAE1C,MAAM;QACJ,QACE,0EAAiB,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,KAAK,EAAE,GAAG,IAAI,CAAC,gBAAgB,GAAG,OAAO,GAAG,OAAO,EAAE,IAC7I,6DACE,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACvB,EACL,6DACE,6DAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,IAAI,CAAC,QAAQ,GAAG,WAAK,KAAK,EAAC,MAAM,EAAC,GAAG,EAAE,IAAI,CAAC,UAAU,EAAE,GAAG,EAAC,WAAW,iBAAa,MAAM,GAAG,GAAG,IAAI,CAClG,CACD,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/text-side-bar/text-side-bar.scss?tag=admiralty-text-side-bar&encapsulation=scoped","src/components/text-side-bar/text-side-bar.tsx"],"sourcesContent":["@import 'text-side-bar.vars';\n\n:host {\n border-right: 1px solid $side-bar-right-border-colour;\n}\n\n@media(prefers-color-scheme: dark) { // Changes browser scrollbar to dark\n :host {\n color-scheme: dark;\n }\n}\n\nnav {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n background-color: $side-bar-background-colour;\n}\n\nul {\n display: flex;\n flex-direction: column;\n}\n\n.logo {\n height: 50px;\n margin: 24px 0 20px;\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\n\n/*\n @slot items - 'admiralty-text-side-bar-item' components should be placed here in the items slot\n * @slot footer - additional 'admiralty-text-side-bar-item' components can be placed in the footer slot\n * to display at the bottom of the text side bar.\n /\n@Component({\n tag: 'admiralty-text-side-bar',\n styleUrl: 'text-side-bar.scss',\n scoped: true,\n})\nexport class TextSideBarComponent {\n @Element() el!: HTMLAdmiraltyTextSideBarElement;\n /\n A label for accessibility purposes to describe what this navigation is for.\n /\n @Prop() label: string;\n /\n Set this to false to hide the logo that is displayed in the bottom of the side bar.\n /\n @Prop() showLogo: boolean = true;\n /\n The URI of the logo image\n /\n @Prop() logoImgUrl: string = 'svg/UKHO crest.svg';\n\n /\n Sets the sidebar width\n */\n @Prop() textSideBarWidth: string = '150px';\n\n render() {\n return (\n <nav aria-label={this.label} style={{ width: this.textSideBarWidth ? this.textSideBarWidth !== '' ? this.textSideBarWidth : '100px' : '100px' }}>\n <ul>\n <slot name=\"items\"></slot>\n </ul>\n <ul>\n <slot name=\"footer\"></slot>\n {this.showLogo ? <img class=\"logo\" src={this.logoImgUrl} alt=\"UKHO Logo\" aria-hidden=\"true\" /> : null}\n </ul>\n </nav>\n );\n }\n}\n"],"version":3}

package/dist/components/p-241ed50c.js ADDED Viewed

@@ -0,0 +1,59 @@
+import { p as proxyCustomElement, H, h } from './p-7dd465c9.js';
+import { d as defineCustomElement$1 } from './p-9bd9f5c0.js';
+const buttonCss = ".visually-hidden.sc-admiralty-button: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-button{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-button{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-button{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-button{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-button{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-button{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-button{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-button{display:none}}button.primary.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:var(--admiralty-button-defaults-padding, 10px var(--admiralty-spacing-4));white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:focus{outline:none;color:var(--admiralty-focus-contrast);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-focus-contrast);padding:var(--admiralty-button-focus-padding, var(--admiralty-spacing-3) 18px var(--admiralty-spacing-2))}button.primary:focus.sc-admiralty-button-s>*,button.primary:focus .sc-admiralty-button-s>*{color:var(--admiralty-focus-contrast) !important}button.primary.sc-admiralty-button:disabled{cursor:default}button.primary.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.primary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:var(--admiralty-button-defaults-idiomatic-padding, 10px var(--admiralty-spacing-4))}@media (max-width: 1023px){button.primary.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:var(--admiralty-button-not-desktop-padding, 10px var(--admiralty-spacing-4))}}button.primary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:var(--admiralty-button-idiomatic-padding-left, var(--admiralty-spacing-4))}button.primary.sc-admiralty-button:hover{background-color:var(--admiralty-colour-primary-shade);border:2px solid var(--admiralty-colour-primary-shade);color:var(--admiralty-colour-primary-contrast);border-color:var(--admiralty-colour-primary-shade);padding:var(--admiralty-button-primary-hover-padding, 10px var(--admiralty-spacing-4))}button.primary.sc-admiralty-button:hover:focus{padding:var(--admiralty-button-primary-hover-focus-padding, var(--admiralty-spacing-3) 18px var(--admiralty-spacing-2))}button.primary.sc-admiralty-button:hover:focus:active{padding:var(--admiralty-button-primary-hover-focus-active-padding, 10px var(--admiralty-spacing-4))}button.primary.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary-contrast);color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.secondary.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:var(--admiralty-button-defaults-padding, 10px var(--admiralty-spacing-4));white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-primary-contrast);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary)}button.secondary.sc-admiralty-button:focus{outline:none;color:var(--admiralty-focus-contrast);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-focus-contrast);padding:var(--admiralty-button-focus-padding, var(--admiralty-spacing-3) 18px var(--admiralty-spacing-2))}button.secondary:focus.sc-admiralty-button-s>*,button.secondary:focus .sc-admiralty-button-s>*{color:var(--admiralty-focus-contrast) !important}button.secondary.sc-admiralty-button:disabled{cursor:default}button.secondary.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.secondary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:var(--admiralty-button-defaults-idiomatic-padding, 10px var(--admiralty-spacing-4))}@media (max-width: 1023px){button.secondary.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:var(--admiralty-button-not-desktop-padding, 10px var(--admiralty-spacing-4))}}button.secondary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:var(--admiralty-button-idiomatic-padding-left, var(--admiralty-spacing-4))}button.secondary.sc-admiralty-button:hover{background-color:var(--admiralty-hover-background-colour);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary-shade);padding:var(--admiralty-button-secondary-hover-padding, 10px var(--admiralty-spacing-4))}button.secondary.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.secondary.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.warning.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:var(--admiralty-button-defaults-padding, 10px var(--admiralty-spacing-4));white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-danger);color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:focus{outline:none;color:var(--admiralty-focus-contrast);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-focus-contrast);padding:var(--admiralty-button-focus-padding, var(--admiralty-spacing-3) 18px var(--admiralty-spacing-2))}button.warning:focus.sc-admiralty-button-s>*,button.warning:focus .sc-admiralty-button-s>*{color:var(--admiralty-focus-contrast) !important}button.warning.sc-admiralty-button:disabled{cursor:default}button.warning.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.warning.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:var(--admiralty-button-defaults-idiomatic-padding, 10px var(--admiralty-spacing-4))}@media (max-width: 1023px){button.warning.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:var(--admiralty-button-not-desktop-padding, 10px var(--admiralty-spacing-4))}}button.warning.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:var(--admiralty-button-idiomatic-padding-left, var(--admiralty-spacing-4))}button.warning.sc-admiralty-button:hover{background-color:var(--admiralty-colour-danger-shade);color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger-shade);padding:var(--admiralty-button-warning-hover-padding, 10px var(--admiralty-spacing-4))}button.warning.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger-contrast);color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.warning.sc-admiralty-button:disabled>*.sc-admiralty-button{opacity:0.5}button.warning.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-danger-contrast)}button.text.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:focus{outline:none;color:var(--admiralty-focus-contrast);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-focus-contrast);padding:var(--admiralty-button-focus-padding, var(--admiralty-spacing-3) 18px var(--admiralty-spacing-2))}button.text:focus.sc-admiralty-button-s>*,button.text:focus .sc-admiralty-button-s>*{color:var(--admiralty-focus-contrast) !important}button.text.sc-admiralty-button:disabled{cursor:default}button.text.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.text.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:var(--admiralty-button-defaults-idiomatic-padding, 10px var(--admiralty-spacing-4))}button.text.sc-admiralty-button:enabled:active{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:disabled{color:var(--admiralty-disabled-colour)}button.text.sc-admiralty-button:disabled>*.sc-admiralty-button{opacity:0.5}button.text.sc-admiralty-button:focus{border:none;box-shadow:0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-focus-contrast);text-decoration:none;padding:var(--admiralty-button-text-focus-padding, var(--admiralty-spacing-0))}button.text:focus.sc-admiralty-button-s>*,button.text:focus .sc-admiralty-button-s>*{color:var(--admiralty-focus-contrast) !important}button.text.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.icon.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;min-height:44px;min-width:50px;background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary);padding:var(--admiralty-button-icon-padding, var(--admiralty-spacing-2))}button.icon.sc-admiralty-button:focus{outline:none;color:var(--admiralty-focus-contrast);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-focus-contrast);padding:var(--admiralty-button-focus-padding, var(--admiralty-spacing-3) 18px var(--admiralty-spacing-2))}button.icon:focus.sc-admiralty-button-s>*,button.icon:focus .sc-admiralty-button-s>*{color:var(--admiralty-focus-contrast) !important}button.icon.sc-admiralty-button:disabled{cursor:default}button.icon.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.icon.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:var(--admiralty-button-defaults-idiomatic-padding, 10px var(--admiralty-spacing-4))}button.icon.sc-admiralty-button:focus{padding:var(--admiralty-button-icon-focus-padding, var(--admiralty-spacing-3) var(--admiralty-spacing-4) var(--admiralty-spacing-2))}button.icon.sc-admiralty-button:hover{background-color:var(--admiralty-colour-primary-shade);border:2px solid var(--admiralty-colour-primary);padding:var(--admiralty-button-icon-hover-padding, var(--admiralty-spacing-2))}button.icon.sc-admiralty-button admiralty-icon.icon-padding.sc-admiralty-button{padding-left:8px}button.icon.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary-contrast);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary)}button.icon.sc-admiralty-button:enabled:active admiralty-icon.sc-admiralty-button{color:var(--admiralty-colour-primary) !important}button.icon.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour);opacity:0.3}button.icon.borderless.sc-admiralty-button{border:none;background-color:yellow}button.icon.sc-admiralty-button:active:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour);opacity:0.3}button.icon.sc-admiralty-button i.sc-admiralty-button{margin:auto;font-size:unset;color:unset;padding-left:unset}button.icon-secondary.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;min-height:44px;min-width:50px;background-color:var(--admiralty-colour-primary-contrast);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary);padding:9px}button.icon-secondary.sc-admiralty-button:focus{outline:none;color:var(--admiralty-focus-contrast);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-focus-contrast);padding:var(--admiralty-button-focus-padding, var(--admiralty-spacing-3) 18px var(--admiralty-spacing-2))}button.icon-secondary:focus.sc-admiralty-button-s>*,button.icon-secondary:focus .sc-admiralty-button-s>*{color:var(--admiralty-focus-contrast) !important}button.icon-secondary.sc-admiralty-button:disabled{cursor:default}button.icon-secondary.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.icon-secondary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:var(--admiralty-button-defaults-idiomatic-padding, 10px var(--admiralty-spacing-4))}button.icon-secondary.sc-admiralty-button:focus{padding:11px 11px 8px}button.icon-secondary.sc-admiralty-button:hover{background-color:var(--admiralty-hover-background-colour);border:2px solid var(--admiralty-colour-primary);padding:9px}button.icon-secondary.sc-admiralty-button admiralty-icon.icon-padding.sc-admiralty-button{padding-left:8px}button.icon-secondary.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary);border:2px solid transparent}button.icon-secondary.sc-admiralty-button:enabled:active admiralty-icon.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast) !important}button.icon-secondary.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-colour-primary);opacity:0.3}button.icon-secondary.borderless.sc-admiralty-button{border:none}button.icon-secondary.sc-admiralty-button:active:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-colour-primary);opacity:0.3}button.icon-secondary.sc-admiralty-button i.sc-admiralty-button{margin:var(--admiralty-button-icon-idiomatic-margin, var(--admiralty-spacing-auto));font-size:unset;color:unset;padding-left:var(--admiralty-button-icon-idiomatic-padding, var(--admiralty-spacing-unset))}";
+const AdmiraltyButtonStyle0 = buttonCss;
+const ButtonComponent = /*@__PURE__*/ proxyCustomElement(class ButtonComponent extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.variant = 'primary';
+        this.icon = undefined;
+        this.disabled = false;
+        this.borderless = false;
+        this.type = 'submit';
+        this.form = undefined;
+        this.name = undefined;
+        this.value = undefined;
+    }
+    render() {
+        const hasTextContent = this.el.textContent.trim().length > 0;
+        const { form, name, value } = this;
+        const props = Object.assign(Object.assign(Object.assign({}, (form && { form })), (name && { name })), (value && { value }));
+        return (h("button", Object.assign({ key: 'abee3f20f126864a8b0a8d05bba8efc4940a6d72', type: this.type, disabled: this.disabled, class: { [this.variant]: true, borderless: this.borderless } }, props), h("slot", { key: '83b5c5260914f49782d70fa951ea93589675fe26' }), this.icon ? h("admiralty-icon", { name: this.icon, class: `${hasTextContent ? 'icon-padding' : ''}` }) : undefined));
+    }
+    get el() { return this; }
+    static get style() { return AdmiraltyButtonStyle0; }
+}, [6, "admiralty-button", {
+        "variant": [1],
+        "icon": [1],
+        "disabled": [516],
+        "borderless": [4],
+        "type": [1],
+        "form": [1],
+        "name": [1],
+        "value": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["admiralty-button", "admiralty-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "admiralty-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ButtonComponent);
+            }
+            break;
+        case "admiralty-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+export { ButtonComponent as B, defineCustomElement as d };
+//# sourceMappingURL=p-241ed50c.js.map

package/dist/components/{p-a208e1b2.js.map → p-241ed50c.js.map} RENAMED Viewed

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

package/dist/components/{p-c3471975.js → p-30661293.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-7dd465c9.js';
 import { d as defineCustomElement$1 } from './p-9bd9f5c0.js';
-const expansionCss = ".visually-hidden.sc-admiralty-expansion:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-expansion{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-expansion{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-expansion{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-expansion{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-expansion{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-expansion{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-expansion{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-expansion{display:none}}section.expansion.sc-admiralty-expansion{padding:var(--admiralty-expansion-padding, 2px 0);border-bottom:1px solid transparent}section.expansion.bordered.sc-admiralty-expansion{border-bottom:1px solid var(--admiralty-colour-light)}section.expansion.sc-admiralty-expansion .expansion-content.sc-admiralty-expansion{display:none;max-height:0;overflow:visible}section.expansion.expanded.sc-admiralty-expansion .expansion-content.sc-admiralty-expansion{display:block;max-height:initial;padding-bottom:var(--admiralty-expansion-content-padding-bottom, var(--admiralty-spacing-3))}section.expansion.sc-admiralty-expansion button.sc-admiralty-expansion{background-color:transparent;border:none;height:initial;min-width:unset;max-width:unset;white-space:unset;cursor:pointer;margin:var(--admiralty-expansion-button-margin, 10px var(--admiralty-spacing-0) 22px);padding:var(--admiralty-expansion-button-padding, var(--admiralty-spacing-0));display:flex;align-items:center;width:100%;text-align:left;position:relative}section.expansion.sc-admiralty-expansion button.sc-admiralty-expansion .expansion-heading-icon.sc-admiralty-expansion{color:var(--admiralty-colour-primary);font-size:var(--admiralty-font-size-5);margin-left:var(--admiralty-expansion-button-icon-margin-left, 30px)}section.expansion.sc-admiralty-expansion button.sc-admiralty-expansion:focus{outline:none}section.expansion.sc-admiralty-expansion button.sc-admiralty-expansion h3.sc-admiralty-expansion{flex-grow:1;margin-bottom:var(--admiralty-expansion-button-heading-margin-bottom, var(--admiralty-spacing-0));font-size:var(--admiralty-expansion-title-font-size, var(--admiralty-font-size-1));font-weight:var(--admiralty-expansion-title-font-weight, var(--admiralty-font-weight-medium))}section.expansion.sc-admiralty-expansion button.sc-admiralty-expansion h3.expansion-heading-right-align.sc-admiralty-expansion{text-align:right}section.expansion.sc-admiralty-expansion button.sc-admiralty-expansion:focus{outline:3px solid transparent;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);box-shadow:0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-text-colour);text-decoration:none}";
+const expansionCss = ".visually-hidden.sc-admiralty-expansion:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-expansion{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-expansion{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-expansion{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-expansion{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-expansion{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-expansion{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-expansion{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-expansion{display:none}}section.expansion.sc-admiralty-expansion{padding:var(--admiralty-expansion-padding, 2px 0);border-bottom:1px solid transparent}section.expansion.bordered.sc-admiralty-expansion{border-bottom:1px solid var(--admiralty-colour-light)}section.expansion.sc-admiralty-expansion .expansion-content.sc-admiralty-expansion{display:none;max-height:0;overflow:visible}section.expansion.expanded.sc-admiralty-expansion .expansion-content.sc-admiralty-expansion{display:block;max-height:initial;padding-bottom:var(--admiralty-expansion-content-padding-bottom, var(--admiralty-spacing-3))}section.expansion.sc-admiralty-expansion button.sc-admiralty-expansion{background-color:transparent;border:none;height:initial;min-width:unset;max-width:unset;white-space:unset;cursor:pointer;margin:var(--admiralty-expansion-button-margin, 10px var(--admiralty-spacing-0) 22px);padding:var(--admiralty-expansion-button-padding, var(--admiralty-spacing-0));display:flex;align-items:center;width:100%;text-align:left;position:relative}section.expansion.sc-admiralty-expansion button.sc-admiralty-expansion .expansion-heading-icon.sc-admiralty-expansion{color:var(--admiralty-colour-primary);font-size:var(--admiralty-font-size-5);margin-left:var(--admiralty-expansion-button-icon-margin-left, 30px)}section.expansion.sc-admiralty-expansion button.sc-admiralty-expansion:focus{outline:none}section.expansion.sc-admiralty-expansion button.sc-admiralty-expansion h3.sc-admiralty-expansion{flex-grow:1;margin-bottom:var(--admiralty-expansion-button-heading-margin-bottom, var(--admiralty-spacing-0));font-size:var(--admiralty-expansion-title-font-size, var(--admiralty-font-size-1));font-weight:var(--admiralty-expansion-title-font-weight, var(--admiralty-font-weight-medium))}section.expansion.sc-admiralty-expansion button.sc-admiralty-expansion h3.expansion-heading-right-align.sc-admiralty-expansion{text-align:right}section.expansion.sc-admiralty-expansion button.sc-admiralty-expansion:focus{outline:3px solid transparent;color:var(--admiralty-focus-contrast);background-color:var(--admiralty-focus-colour);box-shadow:0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-focus-contrast);text-decoration:none}section.expansion.sc-admiralty-expansion button.sc-admiralty-expansion:focus h3.sc-admiralty-expansion{color:black}";
 const AdmiraltyExpansionStyle0 = expansionCss;
 let nextId = 0;
@@ -60,4 +60,4 @@ function defineCustomElement() {
 export { ExpansionComponent as E, defineCustomElement as d };
-//# sourceMappingURL=p-c3471975.js.map
+//# sourceMappingURL=p-30661293.js.map

package/dist/components/{p-c3471975.js.map → p-30661293.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~c3471975~~.js","mappings":";;;AAAA,MAAM,YAAY,GAAG~~,+pGAA+pG~~,CAAC;~~AACrrG~~,iCAAe,YAAY;;ACC3B,IAAI,MAAM,GAAG,CAAC,CAAC;MAOF,kBAAkB;;;;;QA0B7B,eAAU,GAAW,uBAAuB,EAAE,MAAM,EAAE,CAAC;QAEvD,aAAQ,GAAW,GAAG,IAAI,CAAC,UAAU,SAAS,CAAC;QAC/C,cAAS,GAAW,GAAG,IAAI,CAAC,UAAU,UAAU,CAAC;;wBApBE,KAAK;iCAK5B,KAAK;0BAKZ,KAAK;;IAY1B,QAAQ;QACN,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAClC;IAED,gBAAgB;QACd,OAAO,IAAI,CAAC,QAAQ,GAAG,2BAA2B,GAAG,6BAA6B,CAAC;KACpF;IAED,MAAM;QACJ,QACE,gEACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,CAAC,IAAI,CAAC,UAAU;aAC3B,IAED,+DAAQ,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,QAAQ,mBAAgB,IAAI,CAAC,QAAQ,mBAAiB,IAAI,CAAC,SAAS,EAAE,KAAK,EAAC,0BAA0B,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IACtK,2DAAI,KAAK,EAAE,EAAE,+BAA+B,EAAE,IAAI,CAAC,iBAAiB,EAAE,IAAG,IAAI,CAAC,OAAO,CAAM,EAC3F,6DAAM,KAAK,EAAC,iBAAiB,UAAI,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,MAAM,kBAAqB,EACrF,uEAAgB,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAmB,CACxF,EACT,4DAAK,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,SAAS,qBAAmB,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,IACvG,8DAAa,CACT,CACE,EACV;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/expansion/expansion.scss?tag=admiralty-expansion&encapsulation=scoped","src/components/expansion/expansion.tsx"],"sourcesContent":["@import 'expansion.vars';\n\nsection.expansion {\n padding: $expansion-padding;\n border-bottom: 1px solid transparent;\n &.bordered {\n border-bottom: 1px solid $expansion-border-colour;\n }\n\n .expansion-content {\n display: none;\n max-height: 0;\n overflow: visible;\n }\n &.expanded .expansion-content {\n display: block;\n max-height: initial;\n padding-bottom: $expansion-content-padding-bottom;\n }\n\n button {\n background-color: transparent;\n border: none;\n height: initial;\n min-width: unset;\n max-width: unset;\n white-space: unset;\n cursor: pointer;\n margin: $expansion-button-margin;\n padding: $expansion-button-padding;\n display: flex;\n align-items: center;\n width: 100%;\n text-align: left;\n position: relative;\n\n .expansion-heading-icon {\n color: $expansion-header-icon-colour;\n font-size: $expansion-header-icon-size;\n margin-left: $expansion-button-icon-margin-left;\n }\n &:focus {\n outline: none;\n }\n h3 {\n flex-grow: 1;\n margin-bottom: $expansion-button-heading-margin-bottom;\n font-size: $expansion-title-text-size;\n font-weight: $expansion-title-text-weight;\n\n &.expansion-heading-right-align {\n text-align: right;\n }\n }\n\n &:focus {\n @include focus-highlight;\n }\n }\n}\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\n\nlet nextId = 0;\n\n@Component({\n tag: 'admiralty-expansion',\n styleUrl: 'expansion.scss',\n scoped: true,\n})\nexport class ExpansionComponent {\n /*\n The text to display in the heading of the expansion component.\n /\n @Prop() heading: string;\n\n /\n Whether the component is expanded.\n /\n @Prop({ mutable: true, reflect: true }) expanded = false;\n\n /\n CWhether the heading should be right aligned.\n /\n @Prop() alignHeadingRight = false;\n\n /\n Whether the border on the bottom of the component should be hidden.\n /\n @Prop() hideBorder = false;\n\n /\n The event that is dispatched when the expanded status is toggled.\n */\n @Event() toggled: EventEmitter<boolean>;\n\n internalId: string = `admiralty-expansion-${++nextId}`;\n\n headerId: string = `${this.internalId}-header`;\n contentId: string = `${this.internalId}-content`;\n\n onToggle() {\n this.expanded = !this.expanded;\n this.toggled.emit(this.expanded);\n }\n\n getExpansionIcon(): string {\n return this.expanded ? 'keyboard-arrow-up-rounded' : 'keyboard-arrow-down-rounded';\n }\n\n render() {\n return (\n <section\n class={{\n expansion: true,\n expanded: this.expanded,\n bordered: !this.hideBorder,\n }}\n >\n <button id={this.headerId} type=\"button\" aria-expanded={this.expanded} aria-controls={this.contentId} class=\"expansion-heading-button\" onClick={this.onToggle.bind(this)}>\n <h3 class={{ 'expansion-heading-right-align': this.alignHeadingRight }}>{this.heading}</h3>\n <span class=\"visually-hidden\">, {this.expanded ? 'Hide' : 'Show'} this section</span>\n <admiralty-icon class=\"expansion-heading-icon\" name={this.getExpansionIcon()}></admiralty-icon>\n </button>\n <div class=\"expansion-content\" id={this.contentId} aria-labelledby={this.headerId} hidden={!this.expanded}>\n <slot></slot>\n </div>\n </section>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-30661293.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,wxGAAwxG,CAAC;AAC9yG,iCAAe,YAAY;;ACC3B,IAAI,MAAM,GAAG,CAAC,CAAC;MAOF,kBAAkB;;;;;QA0B7B,eAAU,GAAW,uBAAuB,EAAE,MAAM,EAAE,CAAC;QAEvD,aAAQ,GAAW,GAAG,IAAI,CAAC,UAAU,SAAS,CAAC;QAC/C,cAAS,GAAW,GAAG,IAAI,CAAC,UAAU,UAAU,CAAC;;wBApBE,KAAK;iCAK5B,KAAK;0BAKZ,KAAK;;IAY1B,QAAQ;QACN,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAClC;IAED,gBAAgB;QACd,OAAO,IAAI,CAAC,QAAQ,GAAG,2BAA2B,GAAG,6BAA6B,CAAC;KACpF;IAED,MAAM;QACJ,QACE,gEACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,CAAC,IAAI,CAAC,UAAU;aAC3B,IAED,+DAAQ,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,QAAQ,mBAAgB,IAAI,CAAC,QAAQ,mBAAiB,IAAI,CAAC,SAAS,EAAE,KAAK,EAAC,0BAA0B,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IACtK,2DAAI,KAAK,EAAE,EAAE,+BAA+B,EAAE,IAAI,CAAC,iBAAiB,EAAE,IAAG,IAAI,CAAC,OAAO,CAAM,EAC3F,6DAAM,KAAK,EAAC,iBAAiB,UAAI,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,MAAM,kBAAqB,EACrF,uEAAgB,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAmB,CACxF,EACT,4DAAK,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,SAAS,qBAAmB,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,IACvG,8DAAa,CACT,CACE,EACV;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/expansion/expansion.scss?tag=admiralty-expansion&encapsulation=scoped","src/components/expansion/expansion.tsx"],"sourcesContent":["@import 'expansion.vars';\n\nsection.expansion {\n padding: $expansion-padding;\n border-bottom: 1px solid transparent;\n &.bordered {\n border-bottom: 1px solid $expansion-border-colour;\n }\n\n .expansion-content {\n display: none;\n max-height: 0;\n overflow: visible;\n }\n &.expanded .expansion-content {\n display: block;\n max-height: initial;\n padding-bottom: $expansion-content-padding-bottom;\n }\n\n button {\n background-color: transparent;\n border: none;\n height: initial;\n min-width: unset;\n max-width: unset;\n white-space: unset;\n cursor: pointer;\n margin: $expansion-button-margin;\n padding: $expansion-button-padding;\n display: flex;\n align-items: center;\n width: 100%;\n text-align: left;\n position: relative;\n\n .expansion-heading-icon {\n color: $expansion-header-icon-colour;\n font-size: $expansion-header-icon-size;\n margin-left: $expansion-button-icon-margin-left;\n }\n &:focus {\n outline: none;\n }\n h3 {\n flex-grow: 1;\n margin-bottom: $expansion-button-heading-margin-bottom;\n font-size: $expansion-title-text-size;\n font-weight: $expansion-title-text-weight;\n\n &.expansion-heading-right-align {\n text-align: right;\n }\n }\n\n &:focus {\n @include focus-highlight;\n }\n\n &:focus h3 {\n color: black;\n }\n }\n}\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\n\nlet nextId = 0;\n\n@Component({\n tag: 'admiralty-expansion',\n styleUrl: 'expansion.scss',\n scoped: true,\n})\nexport class ExpansionComponent {\n /*\n The text to display in the heading of the expansion component.\n /\n @Prop() heading: string;\n\n /\n Whether the component is expanded.\n /\n @Prop({ mutable: true, reflect: true }) expanded = false;\n\n /\n CWhether the heading should be right aligned.\n /\n @Prop() alignHeadingRight = false;\n\n /\n Whether the border on the bottom of the component should be hidden.\n /\n @Prop() hideBorder = false;\n\n /\n The event that is dispatched when the expanded status is toggled.\n */\n @Event() toggled: EventEmitter<boolean>;\n\n internalId: string = `admiralty-expansion-${++nextId}`;\n\n headerId: string = `${this.internalId}-header`;\n contentId: string = `${this.internalId}-content`;\n\n onToggle() {\n this.expanded = !this.expanded;\n this.toggled.emit(this.expanded);\n }\n\n getExpansionIcon(): string {\n return this.expanded ? 'keyboard-arrow-up-rounded' : 'keyboard-arrow-down-rounded';\n }\n\n render() {\n return (\n <section\n class={{\n expansion: true,\n expanded: this.expanded,\n bordered: !this.hideBorder,\n }}\n >\n <button id={this.headerId} type=\"button\" aria-expanded={this.expanded} aria-controls={this.contentId} class=\"expansion-heading-button\" onClick={this.onToggle.bind(this)}>\n <h3 class={{ 'expansion-heading-right-align': this.alignHeadingRight }}>{this.heading}</h3>\n <span class=\"visually-hidden\">, {this.expanded ? 'Hide' : 'Show'} this section</span>\n <admiralty-icon class=\"expansion-heading-icon\" name={this.getExpansionIcon()}></admiralty-icon>\n </button>\n <div class=\"expansion-content\" id={this.contentId} aria-labelledby={this.headerId} hidden={!this.expanded}>\n <slot></slot>\n </div>\n </section>\n );\n }\n}\n"],"version":3}

package/dist/esm/admiralty-breadcrumb.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-60c25452.js';
-const breadcrumbCss = ".sc-admiralty-breadcrumb-h{display:flex;align-items:center}.breadcrumb-icon.sc-admiralty-breadcrumb{margin:var(--admiralty-breadcrumb-icon-margin, var(--admiralty-spacing-0) var(--admiralty-spacing-2));font-size:var(--admiralty-breadcrumb-icon-font-size, var(--admiralty-font-size--2));color:var(--admiralty-colour-primary)}a.sc-admiralty-breadcrumb{display:inline-block;font-size:var(--admiralty-breadcrumb-font-size, var(--admiralty-font-size--1));font-weight:var(--admiralty-breadcrumb-font-weight, var(--admiralty-font-weight-normal));text-decoration:none;color:var(--admiralty-text-colour);margin:var(--admiralty-breadcrumb-href-margin, var(--admiralty-spacing-2) var(--admiralty-spacing-1))}a.sc-admiralty-breadcrumb:hover{color:var(--admiralty-colour-primary);text-decoration:underline;text-underline-offset:0.15em;text-decoration-thickness:0.15em}a.sc-admiralty-breadcrumb:focus{text-decoration:none}a.active.sc-admiralty-breadcrumb{color:var(--admiralty-colour-primary);font-weight:var(--admiralty-breadcrumb-font-weight-active, var(--admiralty-font-weight-medium))}";
+const breadcrumbCss = ".sc-admiralty-breadcrumb-h{display:flex;align-items:center}.breadcrumb-icon.sc-admiralty-breadcrumb{margin:var(--admiralty-breadcrumb-icon-margin, var(--admiralty-spacing-0) var(--admiralty-spacing-2));font-size:var(--admiralty-breadcrumb-icon-font-size, var(--admiralty-font-size--2));color:var(--admiralty-colour-primary)}a.sc-admiralty-breadcrumb{display:inline-block;font-size:var(--admiralty-breadcrumb-font-size, var(--admiralty-font-size--1));font-weight:var(--admiralty-breadcrumb-font-weight, var(--admiralty-font-weight-normal));text-decoration:none;color:var(--admiralty-text-colour);margin:var(--admiralty-breadcrumb-href-margin, var(--admiralty-spacing-2) var(--admiralty-spacing-1))}a.sc-admiralty-breadcrumb:hover{color:var(--admiralty-colour-primary);text-decoration:underline;text-underline-offset:0.15em;text-decoration-thickness:0.15em}a.sc-admiralty-breadcrumb:focus{text-decoration:none;background-color:var(--admiralty-focus-colour);color:var(--admiralty-focus-contrast)}a.active.sc-admiralty-breadcrumb{color:var(--admiralty-colour-primary);font-weight:var(--admiralty-breadcrumb-font-weight-active, var(--admiralty-font-weight-medium))}";
 const AdmiraltyBreadcrumbStyle0 = breadcrumbCss;
 const BreadcrumbComponent = class {

package/dist/esm/admiralty-breadcrumb.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"admiralty-breadcrumb.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,~~qjCAAqjC~~,CAAC;~~AAC5kC~~,kCAAe,aAAa;;MCMf,mBAAmB;;;sBAMb,KAAK;;;;IAatB,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,CAAC,IAAI,CAAC,KAAK,IAAI,uEAAgB,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,2BAA2B,GAAkB,EAC1G,0DAAG,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,GAAG,IACvD,8DAAa,CACX,CACC,EACP;KACH;;;;;;","names":[],"sources":["src/components/breadcrumb/breadcrumb.scss?tag=admiralty-breadcrumb&encapsulation=scoped","src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@import \"breadcrumb.vars\";\n\n:host {\n display: flex;\n align-items: center;\n}\n\n.breadcrumb-icon {\n margin: $breadcrumb-icon-margin;\n font-size: $breadcrumb-icon-font-size;\n color: $breadcrumb-separator-colour;\n}\n\na {\n display: inline-block;\n font-size: $breadcrumb-font-size;\n font-weight: $breadcrumb-font-weight;\n text-decoration: none;\n color: $breadcrumb-font-colour;\n margin: $breadcrumb-href-margin;\n\n &:hover {\n color: $breadcrumb-font-colour-hover;\n text-decoration: underline;\n text-underline-offset: 0.15em;\n text-decoration-thickness: 0.15em;\n }\n\n &:focus {\n text-decoration: none;\n }\n\n &.active {\n color: $breadcrumb-font-colour-active;\n font-weight: $breadcrumb-font-weight-active;\n }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'admiralty-breadcrumb',\n styleUrl: 'breadcrumb.scss',\n scoped: true,\n})\nexport class BreadcrumbComponent {\n /*\n When `true` the breadcrumb will by styled to show that it is the\n * currently active breadcrumb. Defaults to `true` for the\n * last breadcrumb if it is not set on any.\n /\n @Prop() active = false;\n\n /\n @internal\n * When set to `true` the breadcrumb will not be prefixed with a chevron.\n /\n @Prop() first!: boolean;\n\n /\n Contains a URL or a URL fragment that the hyperlink points to.\n */\n @Prop() href: string \| undefined;\n\n render() {\n return (\n <Host>\n {!this.first && <admiralty-icon class=\"breadcrumb-icon\" name=\"arrow-forward-ios-rounded\"></admiralty-icon>}\n <a class={{ active: this.active }} href={this.href \|\| '#'}>\n <slot></slot>\n </a>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"admiralty-breadcrumb.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,0oCAA0oC,CAAC;AACjqC,kCAAe,aAAa;;MCMf,mBAAmB;;;sBAMb,KAAK;;;;IAatB,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,CAAC,IAAI,CAAC,KAAK,IAAI,uEAAgB,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,2BAA2B,GAAkB,EAC1G,0DAAG,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,GAAG,IACvD,8DAAa,CACX,CACC,EACP;KACH;;;;;;","names":[],"sources":["src/components/breadcrumb/breadcrumb.scss?tag=admiralty-breadcrumb&encapsulation=scoped","src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@import \"breadcrumb.vars\";\n\n:host {\n display: flex;\n align-items: center;\n}\n\n.breadcrumb-icon {\n margin: $breadcrumb-icon-margin;\n font-size: $breadcrumb-icon-font-size;\n color: $breadcrumb-separator-colour;\n}\n\na {\n display: inline-block;\n font-size: $breadcrumb-font-size;\n font-weight: $breadcrumb-font-weight;\n text-decoration: none;\n color: $breadcrumb-font-colour;\n margin: $breadcrumb-href-margin;\n\n &:hover {\n color: $breadcrumb-font-colour-hover;\n text-decoration: underline;\n text-underline-offset: 0.15em;\n text-decoration-thickness: 0.15em;\n }\n\n &:focus {\n text-decoration: none;\n background-color: $focus-background-colour;\n color: $focus-text-colour;\n }\n\n &.active {\n color: $breadcrumb-font-colour-active;\n font-weight: $breadcrumb-font-weight-active;\n }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'admiralty-breadcrumb',\n styleUrl: 'breadcrumb.scss',\n scoped: true,\n})\nexport class BreadcrumbComponent {\n /*\n When `true` the breadcrumb will by styled to show that it is the\n * currently active breadcrumb. Defaults to `true` for the\n * last breadcrumb if it is not set on any.\n /\n @Prop() active = false;\n\n /\n @internal\n * When set to `true` the breadcrumb will not be prefixed with a chevron.\n /\n @Prop() first!: boolean;\n\n /\n Contains a URL or a URL fragment that the hyperlink points to.\n */\n @Prop() href: string \| undefined;\n\n render() {\n return (\n <Host>\n {!this.first && <admiralty-icon class=\"breadcrumb-icon\" name=\"arrow-forward-ios-rounded\"></admiralty-icon>}\n <a class={{ active: this.active }} href={this.href \|\| '#'}>\n <slot></slot>\n </a>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/admiralty-button.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, g as getElement } from './index-60c25452.js';
-const buttonCss = ".visually-hidden.sc-admiralty-button: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-button{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-button{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-button{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-button{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-button{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-button{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-button{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-button{display:none}}button.primary.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:var(--admiralty-button-defaults-padding, 10px var(--admiralty-spacing-4));white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:var(--admiralty-button-focus-padding, var(--admiralty-spacing-3) 18px var(--admiralty-spacing-2))}button.primary:focus.sc-admiralty-button-s>*,button.primary:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.primary.sc-admiralty-button:disabled{cursor:default}button.primary.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.primary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:var(--admiralty-button-defaults-idiomatic-padding, 10px var(--admiralty-spacing-4))}@media (max-width: 1023px){button.primary.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:var(--admiralty-button-not-desktop-padding, 10px var(--admiralty-spacing-4))}}button.primary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:var(--admiralty-button-idiomatic-padding-left, var(--admiralty-spacing-4))}button.primary.sc-admiralty-button:hover{background-color:var(--admiralty-colour-primary-shade);border:2px solid var(--admiralty-colour-primary-shade);color:var(--admiralty-colour-primary-contrast);border-color:var(--admiralty-colour-primary-shade);padding:var(--admiralty-button-primary-hover-padding, 10px var(--admiralty-spacing-4))}button.primary.sc-admiralty-button:hover:focus{padding:var(--admiralty-button-primary-hover-focus-padding, var(--admiralty-spacing-3) 18px var(--admiralty-spacing-2))}button.primary.sc-admiralty-button:hover:focus:active{padding:var(--admiralty-button-primary-hover-focus-active-padding, 10px var(--admiralty-spacing-4))}button.primary.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary-contrast);color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.secondary.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:var(--admiralty-button-defaults-padding, 10px var(--admiralty-spacing-4));white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-primary-contrast);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary)}button.secondary.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:var(--admiralty-button-focus-padding, var(--admiralty-spacing-3) 18px var(--admiralty-spacing-2))}button.secondary:focus.sc-admiralty-button-s>*,button.secondary:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.secondary.sc-admiralty-button:disabled{cursor:default}button.secondary.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.secondary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:var(--admiralty-button-defaults-idiomatic-padding, 10px var(--admiralty-spacing-4))}@media (max-width: 1023px){button.secondary.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:var(--admiralty-button-not-desktop-padding, 10px var(--admiralty-spacing-4))}}button.secondary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:var(--admiralty-button-idiomatic-padding-left, var(--admiralty-spacing-4))}button.secondary.sc-admiralty-button:hover{background-color:var(--admiralty-hover-background-colour);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary-shade);padding:var(--admiralty-button-secondary-hover-padding, 10px var(--admiralty-spacing-4))}button.secondary.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.secondary.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.warning.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:var(--admiralty-button-defaults-padding, 10px var(--admiralty-spacing-4));white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-danger);color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:var(--admiralty-button-focus-padding, var(--admiralty-spacing-3) 18px var(--admiralty-spacing-2))}button.warning:focus.sc-admiralty-button-s>*,button.warning:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.warning.sc-admiralty-button:disabled{cursor:default}button.warning.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.warning.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:var(--admiralty-button-defaults-idiomatic-padding, 10px var(--admiralty-spacing-4))}@media (max-width: 1023px){button.warning.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:var(--admiralty-button-not-desktop-padding, 10px var(--admiralty-spacing-4))}}button.warning.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:var(--admiralty-button-idiomatic-padding-left, var(--admiralty-spacing-4))}button.warning.sc-admiralty-button:hover{background-color:var(--admiralty-colour-danger-shade);color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger-shade);padding:var(--admiralty-button-warning-hover-padding, 10px var(--admiralty-spacing-4))}button.warning.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger-contrast);color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.warning.sc-admiralty-button:disabled>*.sc-admiralty-button{opacity:0.5}button.warning.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-danger-contrast)}button.text.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:var(--admiralty-button-focus-padding, var(--admiralty-spacing-3) 18px var(--admiralty-spacing-2))}button.text:focus.sc-admiralty-button-s>*,button.text:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.text.sc-admiralty-button:disabled{cursor:default}button.text.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.text.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:var(--admiralty-button-defaults-idiomatic-padding, 10px var(--admiralty-spacing-4))}button.text.sc-admiralty-button:enabled:active{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:disabled{color:var(--admiralty-disabled-colour)}button.text.sc-admiralty-button:disabled>*.sc-admiralty-button{opacity:0.5}button.text.sc-admiralty-button:focus{border:none;box-shadow:0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-text-colour);text-decoration:none;padding:var(--admiralty-button-text-focus-padding, var(--admiralty-spacing-0))}button.text:focus.sc-admiralty-button-s>*,button.text:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.text.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.icon.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;min-height:44px;min-width:50px;background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary);padding:var(--admiralty-button-icon-padding, var(--admiralty-spacing-2))}button.icon.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:var(--admiralty-button-focus-padding, var(--admiralty-spacing-3) 18px var(--admiralty-spacing-2))}button.icon:focus.sc-admiralty-button-s>*,button.icon:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.icon.sc-admiralty-button:disabled{cursor:default}button.icon.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.icon.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:var(--admiralty-button-defaults-idiomatic-padding, 10px var(--admiralty-spacing-4))}button.icon.sc-admiralty-button:focus{padding:var(--admiralty-button-icon-focus-padding, var(--admiralty-spacing-3) var(--admiralty-spacing-4) var(--admiralty-spacing-2))}button.icon.sc-admiralty-button:hover{background-color:var(--admiralty-colour-primary-shade);border:2px solid var(--admiralty-colour-primary);padding:var(--admiralty-button-icon-hover-padding, var(--admiralty-spacing-2))}button.icon.sc-admiralty-button admiralty-icon.icon-padding.sc-admiralty-button{padding-left:8px}button.icon.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary-contrast);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary)}button.icon.sc-admiralty-button:enabled:active admiralty-icon.sc-admiralty-button{color:var(--admiralty-colour-primary) !important}button.icon.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour);opacity:0.3}button.icon.borderless.sc-admiralty-button{border:none;background-color:yellow}button.icon.sc-admiralty-button:active:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour);opacity:0.3}button.icon.sc-admiralty-button i.sc-admiralty-button{margin:auto;font-size:unset;color:unset;padding-left:unset}button.icon-secondary.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;min-height:44px;min-width:50px;background-color:var(--admiralty-colour-primary-contrast);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary);padding:9px}button.icon-secondary.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:var(--admiralty-button-focus-padding, var(--admiralty-spacing-3) 18px var(--admiralty-spacing-2))}button.icon-secondary:focus.sc-admiralty-button-s>*,button.icon-secondary:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.icon-secondary.sc-admiralty-button:disabled{cursor:default}button.icon-secondary.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.icon-secondary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:var(--admiralty-button-defaults-idiomatic-padding, 10px var(--admiralty-spacing-4))}button.icon-secondary.sc-admiralty-button:focus{padding:11px 11px 8px}button.icon-secondary.sc-admiralty-button:hover{background-color:var(--admiralty-hover-background-colour);border:2px solid var(--admiralty-colour-primary);padding:9px}button.icon-secondary.sc-admiralty-button admiralty-icon.icon-padding.sc-admiralty-button{padding-left:8px}button.icon-secondary.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary);border:2px solid transparent}button.icon-secondary.sc-admiralty-button:enabled:active admiralty-icon.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast) !important}button.icon-secondary.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-colour-primary);opacity:0.3}button.icon-secondary.borderless.sc-admiralty-button{border:none}button.icon-secondary.sc-admiralty-button:active:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-colour-primary);opacity:0.3}button.icon-secondary.sc-admiralty-button i.sc-admiralty-button{margin:var(--admiralty-button-icon-idiomatic-margin, var(--admiralty-spacing-auto));font-size:unset;color:unset;padding-left:var(--admiralty-button-icon-idiomatic-padding, var(--admiralty-spacing-unset))}";
+const buttonCss = ".visually-hidden.sc-admiralty-button: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-button{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-button{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-button{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-button{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-button{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-button{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-button{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-button{display:none}}button.primary.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:var(--admiralty-button-defaults-padding, 10px var(--admiralty-spacing-4));white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:focus{outline:none;color:var(--admiralty-focus-contrast);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-focus-contrast);padding:var(--admiralty-button-focus-padding, var(--admiralty-spacing-3) 18px var(--admiralty-spacing-2))}button.primary:focus.sc-admiralty-button-s>*,button.primary:focus .sc-admiralty-button-s>*{color:var(--admiralty-focus-contrast) !important}button.primary.sc-admiralty-button:disabled{cursor:default}button.primary.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.primary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:var(--admiralty-button-defaults-idiomatic-padding, 10px var(--admiralty-spacing-4))}@media (max-width: 1023px){button.primary.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:var(--admiralty-button-not-desktop-padding, 10px var(--admiralty-spacing-4))}}button.primary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:var(--admiralty-button-idiomatic-padding-left, var(--admiralty-spacing-4))}button.primary.sc-admiralty-button:hover{background-color:var(--admiralty-colour-primary-shade);border:2px solid var(--admiralty-colour-primary-shade);color:var(--admiralty-colour-primary-contrast);border-color:var(--admiralty-colour-primary-shade);padding:var(--admiralty-button-primary-hover-padding, 10px var(--admiralty-spacing-4))}button.primary.sc-admiralty-button:hover:focus{padding:var(--admiralty-button-primary-hover-focus-padding, var(--admiralty-spacing-3) 18px var(--admiralty-spacing-2))}button.primary.sc-admiralty-button:hover:focus:active{padding:var(--admiralty-button-primary-hover-focus-active-padding, 10px var(--admiralty-spacing-4))}button.primary.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary-contrast);color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.secondary.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:var(--admiralty-button-defaults-padding, 10px var(--admiralty-spacing-4));white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-primary-contrast);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary)}button.secondary.sc-admiralty-button:focus{outline:none;color:var(--admiralty-focus-contrast);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-focus-contrast);padding:var(--admiralty-button-focus-padding, var(--admiralty-spacing-3) 18px var(--admiralty-spacing-2))}button.secondary:focus.sc-admiralty-button-s>*,button.secondary:focus .sc-admiralty-button-s>*{color:var(--admiralty-focus-contrast) !important}button.secondary.sc-admiralty-button:disabled{cursor:default}button.secondary.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.secondary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:var(--admiralty-button-defaults-idiomatic-padding, 10px var(--admiralty-spacing-4))}@media (max-width: 1023px){button.secondary.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:var(--admiralty-button-not-desktop-padding, 10px var(--admiralty-spacing-4))}}button.secondary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:var(--admiralty-button-idiomatic-padding-left, var(--admiralty-spacing-4))}button.secondary.sc-admiralty-button:hover{background-color:var(--admiralty-hover-background-colour);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary-shade);padding:var(--admiralty-button-secondary-hover-padding, 10px var(--admiralty-spacing-4))}button.secondary.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.secondary.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.warning.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:var(--admiralty-button-defaults-padding, 10px var(--admiralty-spacing-4));white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-danger);color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:focus{outline:none;color:var(--admiralty-focus-contrast);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-focus-contrast);padding:var(--admiralty-button-focus-padding, var(--admiralty-spacing-3) 18px var(--admiralty-spacing-2))}button.warning:focus.sc-admiralty-button-s>*,button.warning:focus .sc-admiralty-button-s>*{color:var(--admiralty-focus-contrast) !important}button.warning.sc-admiralty-button:disabled{cursor:default}button.warning.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.warning.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:var(--admiralty-button-defaults-idiomatic-padding, 10px var(--admiralty-spacing-4))}@media (max-width: 1023px){button.warning.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:var(--admiralty-button-not-desktop-padding, 10px var(--admiralty-spacing-4))}}button.warning.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:var(--admiralty-button-idiomatic-padding-left, var(--admiralty-spacing-4))}button.warning.sc-admiralty-button:hover{background-color:var(--admiralty-colour-danger-shade);color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger-shade);padding:var(--admiralty-button-warning-hover-padding, 10px var(--admiralty-spacing-4))}button.warning.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger-contrast);color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.warning.sc-admiralty-button:disabled>*.sc-admiralty-button{opacity:0.5}button.warning.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-danger-contrast)}button.text.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:focus{outline:none;color:var(--admiralty-focus-contrast);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-focus-contrast);padding:var(--admiralty-button-focus-padding, var(--admiralty-spacing-3) 18px var(--admiralty-spacing-2))}button.text:focus.sc-admiralty-button-s>*,button.text:focus .sc-admiralty-button-s>*{color:var(--admiralty-focus-contrast) !important}button.text.sc-admiralty-button:disabled{cursor:default}button.text.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.text.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:var(--admiralty-button-defaults-idiomatic-padding, 10px var(--admiralty-spacing-4))}button.text.sc-admiralty-button:enabled:active{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:disabled{color:var(--admiralty-disabled-colour)}button.text.sc-admiralty-button:disabled>*.sc-admiralty-button{opacity:0.5}button.text.sc-admiralty-button:focus{border:none;box-shadow:0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-focus-contrast);text-decoration:none;padding:var(--admiralty-button-text-focus-padding, var(--admiralty-spacing-0))}button.text:focus.sc-admiralty-button-s>*,button.text:focus .sc-admiralty-button-s>*{color:var(--admiralty-focus-contrast) !important}button.text.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.icon.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;min-height:44px;min-width:50px;background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary);padding:var(--admiralty-button-icon-padding, var(--admiralty-spacing-2))}button.icon.sc-admiralty-button:focus{outline:none;color:var(--admiralty-focus-contrast);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-focus-contrast);padding:var(--admiralty-button-focus-padding, var(--admiralty-spacing-3) 18px var(--admiralty-spacing-2))}button.icon:focus.sc-admiralty-button-s>*,button.icon:focus .sc-admiralty-button-s>*{color:var(--admiralty-focus-contrast) !important}button.icon.sc-admiralty-button:disabled{cursor:default}button.icon.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.icon.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:var(--admiralty-button-defaults-idiomatic-padding, 10px var(--admiralty-spacing-4))}button.icon.sc-admiralty-button:focus{padding:var(--admiralty-button-icon-focus-padding, var(--admiralty-spacing-3) var(--admiralty-spacing-4) var(--admiralty-spacing-2))}button.icon.sc-admiralty-button:hover{background-color:var(--admiralty-colour-primary-shade);border:2px solid var(--admiralty-colour-primary);padding:var(--admiralty-button-icon-hover-padding, var(--admiralty-spacing-2))}button.icon.sc-admiralty-button admiralty-icon.icon-padding.sc-admiralty-button{padding-left:8px}button.icon.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary-contrast);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary)}button.icon.sc-admiralty-button:enabled:active admiralty-icon.sc-admiralty-button{color:var(--admiralty-colour-primary) !important}button.icon.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour);opacity:0.3}button.icon.borderless.sc-admiralty-button{border:none;background-color:yellow}button.icon.sc-admiralty-button:active:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour);opacity:0.3}button.icon.sc-admiralty-button i.sc-admiralty-button{margin:auto;font-size:unset;color:unset;padding-left:unset}button.icon-secondary.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;min-height:44px;min-width:50px;background-color:var(--admiralty-colour-primary-contrast);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary);padding:9px}button.icon-secondary.sc-admiralty-button:focus{outline:none;color:var(--admiralty-focus-contrast);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-focus-contrast);padding:var(--admiralty-button-focus-padding, var(--admiralty-spacing-3) 18px var(--admiralty-spacing-2))}button.icon-secondary:focus.sc-admiralty-button-s>*,button.icon-secondary:focus .sc-admiralty-button-s>*{color:var(--admiralty-focus-contrast) !important}button.icon-secondary.sc-admiralty-button:disabled{cursor:default}button.icon-secondary.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.icon-secondary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:var(--admiralty-button-defaults-idiomatic-padding, 10px var(--admiralty-spacing-4))}button.icon-secondary.sc-admiralty-button:focus{padding:11px 11px 8px}button.icon-secondary.sc-admiralty-button:hover{background-color:var(--admiralty-hover-background-colour);border:2px solid var(--admiralty-colour-primary);padding:9px}button.icon-secondary.sc-admiralty-button admiralty-icon.icon-padding.sc-admiralty-button{padding-left:8px}button.icon-secondary.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary);border:2px solid transparent}button.icon-secondary.sc-admiralty-button:enabled:active admiralty-icon.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast) !important}button.icon-secondary.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-colour-primary);opacity:0.3}button.icon-secondary.borderless.sc-admiralty-button{border:none}button.icon-secondary.sc-admiralty-button:active:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-colour-primary);opacity:0.3}button.icon-secondary.sc-admiralty-button i.sc-admiralty-button{margin:var(--admiralty-button-icon-idiomatic-margin, var(--admiralty-spacing-auto));font-size:unset;color:unset;padding-left:var(--admiralty-button-icon-idiomatic-padding, var(--admiralty-spacing-unset))}";
 const AdmiraltyButtonStyle0 = buttonCss;
 const ButtonComponent = class {