@ukho/admiralty-core 5.2.0-next.2 → 5.2.0-next.3

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 (19) hide show
  1. package/dist/admiralty/admiralty.esm.js +1 -1
  2. package/dist/admiralty/{p-876d0c92.entry.js → p-f3b69fbc.entry.js} +2 -2
  3. package/dist/admiralty/{p-876d0c92.entry.js.map → p-f3b69fbc.entry.js.map} +1 -1
  4. package/dist/cjs/admiralty-button.cjs.entry.js +1 -1
  5. package/dist/cjs/admiralty-button.cjs.entry.js.map +1 -1
  6. package/dist/collection/components/button/button.js +2 -2
  7. package/dist/collection/components/button/button.js.map +1 -1
  8. package/dist/components/admiralty-button.js +1 -1
  9. package/dist/components/admiralty-colour-block.js +1 -1
  10. package/dist/components/admiralty-filter.js +1 -1
  11. package/dist/components/admiralty-paginator.js +1 -1
  12. package/dist/components/{p-49b5109b.js → p-a208e1b2.js} +2 -2
  13. package/dist/components/{p-49b5109b.js.map → p-a208e1b2.js.map} +1 -1
  14. package/dist/esm/admiralty-button.entry.js +1 -1
  15. package/dist/esm/admiralty-button.entry.js.map +1 -1
  16. package/dist/types/components/button/button.d.ts +1 -1
  17. package/dist/types/components.d.ts +2 -2
  18. package/docs/docs.json +2 -2
  19. package/package.json +2 -6
package/dist/admiralty/admiralty.esm.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,b as a}from"./p-71979ff5.js";export{s as setNonce}from"./p-71979ff5.js";import{g as i}from"./p-e1255160.js";var l=()=>{const a=import.meta.url;const i={};if(a!==""){i.resourcesUrl=new URL(".",a).href}return e(i)};l().then((async e=>{await i();return a([["p-69153f62",[[2,"admiralty-autocomplete",{autoselect:[4],cssNamespace:[1,"css-namespace"],displayMenu:[1,"display-menu"],minLength:[2,"min-length"],name:[1],placeholder:[1],confirmOnBlur:[4,"confirm-on-blur"],showNoOptionsFound:[4,"show-no-options-found"],showAllValues:[4,"show-all-values"],required:[4],assistiveHint:[1,"assistive-hint"],menuAttributes:[8,"menu-attributes"],inputClasses:[1,"input-classes"],menuClasses:[1,"menu-classes"],label:[1],hint:[1],invalid:[4],invalidMessage:[1,"invalid-message"],disabled:[4],value:[1025],filterFunction:[16],focused:[32],hovered:[32],menuOpen:[32],options:[32],option:[32],query:[32],validChoiceMade:[32],selected:[32],ariaHint:[32]},null,{value:["onValueChange"],focused:["onFocusedChange"]}]]],["p-0e488477",[[2,"admiralty-input",{name:[1],label:[1],hint:[1],disabled:[4],type:[1],placeholder:[1],width:[2],required:[4],invalid:[4],invalidMessage:[1,"invalid-message"],autocomplete:[1],value:[1032]},null,{value:["valueChanged"]}]]],["p-95c7afbe",[[6,"admiralty-select",{disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],hint:[1],label:[1],width:[2],value:[1032]},null,{value:["valueChanged"]}]]],["p-7e3602b1",[[2,"admiralty-textarea",{label:[1],hint:[1],width:[2],disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],value:[1032]},null,{value:["valueChanged"]}]]],["p-4b7cc86d",[[6,"admiralty-radio-group",{name:[1],label:[1],hint:[1],disabled:[4],value:[1032],displayVertical:[4,"display-vertical"],invalid:[4],invalidMessage:[1,"invalid-message"]},null,{value:["valueChanged"],invalid:["invalidChanged"]}]]],["p-206173ff",[[6,"admiralty-colour-block",{width:[2],height:[2],heading:[1],colour:[1],href:[1],linkText:[1,"link-text"],suppressRedirect:[4,"suppress-redirect"],enableCardEvent:[4,"enable-card-event"],actionText:[1,"action-text"]}]]],["p-ee0d714b",[[6,"admiralty-error-summary",{heading:[1]}]]],["p-72a77397",[[2,"admiralty-file-input",{label:[1],multiple:[4],invalid:[4],invalidMessage:[1,"invalid-message"],files:[32]}]]],["p-cd33d32a",[[6,"admiralty-filter",{filterTitle:[1,"filter-title"]}]]],["p-ae15e60d",[[6,"admiralty-filter-group",{groupTitle:[1,"group-title"]}]]],["p-2e30e61d",[[2,"admiralty-paginator",{pages:[2],currentPage:[2,"current-page"],label:[1]}]]],["p-f6241aea",[[6,"admiralty-breadcrumb",{active:[4],first:[4],href:[1]}]]],["p-bf6c9019",[[6,"admiralty-header",{headerTitle:[1,"header-title"],headerTitleUrl:[1,"header-title-url"],logoLinkUrl:[1,"logo-link-url"],logoImgUrl:[1,"logo-img-url"],logoAltText:[1,"logo-alt-text"],mobileMenuOpen:[32],displayHamburger:[32]}]]],["p-3872dc88",[[2,"admiralty-icon-side-bar-item",{expanded:[1540],icon:[1],href:[1],itemText:[1,"item-text"],suppressRedirect:[4,"suppress-redirect"],active:[1540]},null,{active:["handleActiveChange"]}]]],["p-2a5020e7",[[2,"admiralty-pill",{text:[1],number:[1],label:[1],colour:[1],selected:[4]}]]],["p-c56c0670",[[2,"admiralty-progress-bar",{label:[1],progression:[2],error:[4],progressionValue:[32]},null,{progression:["progressionChanged"]}]]],["p-add31457",[[6,"admiralty-read-more",{heading:[1],expanded:[32]}]]],["p-c31c6935",[[6,"admiralty-text-side-bar-item",{variant:[1],expanded:[1540],icon:[1],href:[1],itemText:[1,"item-text"],suppressRedirect:[4,"suppress-redirect"],active:[1540]},null,{active:["handleActiveChange"]}]]],["p-86def5ca",[[2,"admiralty-autocomplete-option",{value:[8]}]]],["p-ecc4c552",[[6,"admiralty-breadcrumbs"]]],["p-18040ebd",[[6,"admiralty-card",{heading:[1]}]]],["p-cb76daf8",[[2,"admiralty-checkbox",{checkboxRight:[4,"checkbox-right"],disabled:[4],name:[1],checked:[1540],value:[8],labelText:[1,"label-text"],labelHidden:[4,"label-hidden"]},null,{checked:["checkedChanged"]}]]],["p-c8678d01",[[6,"admiralty-footer",{variant:[1],imageLink:[1,"image-link"],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],text:[1],hasSlotContent:[32]},[[2,"slotchange","handleSlotChange"]]]]],["p-564fc7f6",[[6,"admiralty-header-menu-item",{menuTitle:[1,"menu-title"],active:[4]}]]],["p-67449ca4",[[6,"admiralty-header-menu-link",{menuTitle:[1,"menu-title"],active:[4],href:[1],suppressRedirect:[4,"suppress-redirect"]}]]],["p-d09a057f",[[2,"admiralty-header-profile",{isSignedIn:[4,"is-signed-in"],signedInText:[1,"signed-in-text"],signInOnly:[4,"sign-in-only"]}]]],["p-0b4ce33e",[[6,"admiralty-header-sub-menu-item",{menuTitle:[1,"menu-title"],href:[1],suppressRedirect:[4,"suppress-redirect"]}]]],["p-63f82d75",[[2,"admiralty-hr"]]],["p-da58b343",[[6,"admiralty-icon-side-bar",{label:[1],showLogo:[4,"show-logo"],logoImgUrl:[1,"logo-img-url"],iconSideBarWidth:[1,"icon-side-bar-width"]}]]],["p-bf5c3780",[[4,"admiralty-icon-side-bar-wrapper",null,[[0,"iconSideBarItemClick","onIconSideBarItemSelected"]]]]],["p-a9229ed5",[[6,"admiralty-link",{href:[1],newTab:[4,"new-tab"]}]]],["p-aa89e3b2",[[6,"admiralty-modal-dialog",{heading:[1],label:[1],description:[1],show:[4]}]]],["p-7480ba90",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["p-b807c5e3",[[2,"admiralty-phase-banner",{phase:[1],link:[1]}]]],["p-f5c4718d",[[6,"admiralty-radio",{name:[1],value:[1025],disabled:[4],checked:[1028],invalid:[4],buttonTabindex:[32],setButtonTabindex:[64]},null,{value:["valueChanged"]}]]],["p-e7075f12",[[6,"admiralty-side-nav",{label:[1]}]]],["p-a81ff0c4",[[2,"admiralty-side-nav-item",{sideNavItemId:[1,"side-nav-item-id"],headingTitle:[1,"heading-title"],navActive:[4,"nav-active"]}]]],["p-7403ab29",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["p-2d628030",[[2,"admiralty-skeleton",{height:[1],width:[1],radius:[1],noAnimation:[1540,"no-animation"]}]]],["p-f866f801",[[2,"admiralty-skip-link",{href:[1]}]]],["p-3d8475a9",[[6,"admiralty-tab",{label:[1],tabLabelId:[1,"tab-label-id"],tabContentId:[1,"tab-content-id"]}]]],["p-36c8fb96",[[6,"admiralty-tab-group",{selectedIndex:[1026,"selected-index"]}]]],["p-52792173",[[6,"admiralty-table",{caption:[1]}]]],["p-fefc441c",[[6,"admiralty-table-body"]]],["p-e39c311d",[[6,"admiralty-table-cell"]]],["p-7d189c0b",[[6,"admiralty-table-header"]]],["p-99086df2",[[6,"admiralty-table-header-cell"]]],["p-c0c1587a",[[6,"admiralty-table-row"]]],["p-1c834d2d",[[6,"admiralty-text-side-bar",{label:[1],showLogo:[4,"show-logo"],logoImgUrl:[1,"logo-img-url"],textSideBarWidth:[1,"text-side-bar-width"]}]]],["p-c6ae89e0",[[4,"admiralty-text-side-bar-wrapper",null,[[0,"textSideBarItemClick","ontextSideBarItemSelected"]]]]],["p-f8d658fd",[[1,"admiralty-icon",{name:[1],size:[8]}]]],["p-e9cedf6c",[[6,"admiralty-dialogue",{type:[1],heading:[1],sectionRole:[1,"section-role"]}]]],["p-d3811854",[[6,"admiralty-expansion",{heading:[1],expanded:[1540],alignHeadingRight:[4,"align-heading-right"],hideBorder:[4,"hide-border"]}]]],["p-876d0c92",[[6,"admiralty-button",{variant:[1],icon:[1],disabled:[516],borderless:[4],type:[1],form:[1],name:[1],value:[1]}]]],["p-91ed7a1d",[[6,"admiralty-hint",{disabled:[4]}],[6,"admiralty-label",{disabled:[4],for:[1]}],[6,"admiralty-input-invalid"]]]],e)}));
1
+ import{p as e,b as a}from"./p-71979ff5.js";export{s as setNonce}from"./p-71979ff5.js";import{g as i}from"./p-e1255160.js";var l=()=>{const a=import.meta.url;const i={};if(a!==""){i.resourcesUrl=new URL(".",a).href}return e(i)};l().then((async e=>{await i();return a([["p-69153f62",[[2,"admiralty-autocomplete",{autoselect:[4],cssNamespace:[1,"css-namespace"],displayMenu:[1,"display-menu"],minLength:[2,"min-length"],name:[1],placeholder:[1],confirmOnBlur:[4,"confirm-on-blur"],showNoOptionsFound:[4,"show-no-options-found"],showAllValues:[4,"show-all-values"],required:[4],assistiveHint:[1,"assistive-hint"],menuAttributes:[8,"menu-attributes"],inputClasses:[1,"input-classes"],menuClasses:[1,"menu-classes"],label:[1],hint:[1],invalid:[4],invalidMessage:[1,"invalid-message"],disabled:[4],value:[1025],filterFunction:[16],focused:[32],hovered:[32],menuOpen:[32],options:[32],option:[32],query:[32],validChoiceMade:[32],selected:[32],ariaHint:[32]},null,{value:["onValueChange"],focused:["onFocusedChange"]}]]],["p-0e488477",[[2,"admiralty-input",{name:[1],label:[1],hint:[1],disabled:[4],type:[1],placeholder:[1],width:[2],required:[4],invalid:[4],invalidMessage:[1,"invalid-message"],autocomplete:[1],value:[1032]},null,{value:["valueChanged"]}]]],["p-95c7afbe",[[6,"admiralty-select",{disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],hint:[1],label:[1],width:[2],value:[1032]},null,{value:["valueChanged"]}]]],["p-7e3602b1",[[2,"admiralty-textarea",{label:[1],hint:[1],width:[2],disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],value:[1032]},null,{value:["valueChanged"]}]]],["p-4b7cc86d",[[6,"admiralty-radio-group",{name:[1],label:[1],hint:[1],disabled:[4],value:[1032],displayVertical:[4,"display-vertical"],invalid:[4],invalidMessage:[1,"invalid-message"]},null,{value:["valueChanged"],invalid:["invalidChanged"]}]]],["p-206173ff",[[6,"admiralty-colour-block",{width:[2],height:[2],heading:[1],colour:[1],href:[1],linkText:[1,"link-text"],suppressRedirect:[4,"suppress-redirect"],enableCardEvent:[4,"enable-card-event"],actionText:[1,"action-text"]}]]],["p-ee0d714b",[[6,"admiralty-error-summary",{heading:[1]}]]],["p-72a77397",[[2,"admiralty-file-input",{label:[1],multiple:[4],invalid:[4],invalidMessage:[1,"invalid-message"],files:[32]}]]],["p-cd33d32a",[[6,"admiralty-filter",{filterTitle:[1,"filter-title"]}]]],["p-ae15e60d",[[6,"admiralty-filter-group",{groupTitle:[1,"group-title"]}]]],["p-2e30e61d",[[2,"admiralty-paginator",{pages:[2],currentPage:[2,"current-page"],label:[1]}]]],["p-f6241aea",[[6,"admiralty-breadcrumb",{active:[4],first:[4],href:[1]}]]],["p-bf6c9019",[[6,"admiralty-header",{headerTitle:[1,"header-title"],headerTitleUrl:[1,"header-title-url"],logoLinkUrl:[1,"logo-link-url"],logoImgUrl:[1,"logo-img-url"],logoAltText:[1,"logo-alt-text"],mobileMenuOpen:[32],displayHamburger:[32]}]]],["p-3872dc88",[[2,"admiralty-icon-side-bar-item",{expanded:[1540],icon:[1],href:[1],itemText:[1,"item-text"],suppressRedirect:[4,"suppress-redirect"],active:[1540]},null,{active:["handleActiveChange"]}]]],["p-2a5020e7",[[2,"admiralty-pill",{text:[1],number:[1],label:[1],colour:[1],selected:[4]}]]],["p-c56c0670",[[2,"admiralty-progress-bar",{label:[1],progression:[2],error:[4],progressionValue:[32]},null,{progression:["progressionChanged"]}]]],["p-add31457",[[6,"admiralty-read-more",{heading:[1],expanded:[32]}]]],["p-c31c6935",[[6,"admiralty-text-side-bar-item",{variant:[1],expanded:[1540],icon:[1],href:[1],itemText:[1,"item-text"],suppressRedirect:[4,"suppress-redirect"],active:[1540]},null,{active:["handleActiveChange"]}]]],["p-86def5ca",[[2,"admiralty-autocomplete-option",{value:[8]}]]],["p-ecc4c552",[[6,"admiralty-breadcrumbs"]]],["p-18040ebd",[[6,"admiralty-card",{heading:[1]}]]],["p-cb76daf8",[[2,"admiralty-checkbox",{checkboxRight:[4,"checkbox-right"],disabled:[4],name:[1],checked:[1540],value:[8],labelText:[1,"label-text"],labelHidden:[4,"label-hidden"]},null,{checked:["checkedChanged"]}]]],["p-c8678d01",[[6,"admiralty-footer",{variant:[1],imageLink:[1,"image-link"],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],text:[1],hasSlotContent:[32]},[[2,"slotchange","handleSlotChange"]]]]],["p-564fc7f6",[[6,"admiralty-header-menu-item",{menuTitle:[1,"menu-title"],active:[4]}]]],["p-67449ca4",[[6,"admiralty-header-menu-link",{menuTitle:[1,"menu-title"],active:[4],href:[1],suppressRedirect:[4,"suppress-redirect"]}]]],["p-d09a057f",[[2,"admiralty-header-profile",{isSignedIn:[4,"is-signed-in"],signedInText:[1,"signed-in-text"],signInOnly:[4,"sign-in-only"]}]]],["p-0b4ce33e",[[6,"admiralty-header-sub-menu-item",{menuTitle:[1,"menu-title"],href:[1],suppressRedirect:[4,"suppress-redirect"]}]]],["p-63f82d75",[[2,"admiralty-hr"]]],["p-da58b343",[[6,"admiralty-icon-side-bar",{label:[1],showLogo:[4,"show-logo"],logoImgUrl:[1,"logo-img-url"],iconSideBarWidth:[1,"icon-side-bar-width"]}]]],["p-bf5c3780",[[4,"admiralty-icon-side-bar-wrapper",null,[[0,"iconSideBarItemClick","onIconSideBarItemSelected"]]]]],["p-a9229ed5",[[6,"admiralty-link",{href:[1],newTab:[4,"new-tab"]}]]],["p-aa89e3b2",[[6,"admiralty-modal-dialog",{heading:[1],label:[1],description:[1],show:[4]}]]],["p-7480ba90",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["p-b807c5e3",[[2,"admiralty-phase-banner",{phase:[1],link:[1]}]]],["p-f5c4718d",[[6,"admiralty-radio",{name:[1],value:[1025],disabled:[4],checked:[1028],invalid:[4],buttonTabindex:[32],setButtonTabindex:[64]},null,{value:["valueChanged"]}]]],["p-e7075f12",[[6,"admiralty-side-nav",{label:[1]}]]],["p-a81ff0c4",[[2,"admiralty-side-nav-item",{sideNavItemId:[1,"side-nav-item-id"],headingTitle:[1,"heading-title"],navActive:[4,"nav-active"]}]]],["p-7403ab29",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["p-2d628030",[[2,"admiralty-skeleton",{height:[1],width:[1],radius:[1],noAnimation:[1540,"no-animation"]}]]],["p-f866f801",[[2,"admiralty-skip-link",{href:[1]}]]],["p-3d8475a9",[[6,"admiralty-tab",{label:[1],tabLabelId:[1,"tab-label-id"],tabContentId:[1,"tab-content-id"]}]]],["p-36c8fb96",[[6,"admiralty-tab-group",{selectedIndex:[1026,"selected-index"]}]]],["p-52792173",[[6,"admiralty-table",{caption:[1]}]]],["p-fefc441c",[[6,"admiralty-table-body"]]],["p-e39c311d",[[6,"admiralty-table-cell"]]],["p-7d189c0b",[[6,"admiralty-table-header"]]],["p-99086df2",[[6,"admiralty-table-header-cell"]]],["p-c0c1587a",[[6,"admiralty-table-row"]]],["p-1c834d2d",[[6,"admiralty-text-side-bar",{label:[1],showLogo:[4,"show-logo"],logoImgUrl:[1,"logo-img-url"],textSideBarWidth:[1,"text-side-bar-width"]}]]],["p-c6ae89e0",[[4,"admiralty-text-side-bar-wrapper",null,[[0,"textSideBarItemClick","ontextSideBarItemSelected"]]]]],["p-f8d658fd",[[1,"admiralty-icon",{name:[1],size:[8]}]]],["p-e9cedf6c",[[6,"admiralty-dialogue",{type:[1],heading:[1],sectionRole:[1,"section-role"]}]]],["p-d3811854",[[6,"admiralty-expansion",{heading:[1],expanded:[1540],alignHeadingRight:[4,"align-heading-right"],hideBorder:[4,"hide-border"]}]]],["p-f3b69fbc",[[6,"admiralty-button",{variant:[1],icon:[1],disabled:[516],borderless:[4],type:[1],form:[1],name:[1],value:[1]}]]],["p-91ed7a1d",[[6,"admiralty-hint",{disabled:[4]}],[6,"admiralty-label",{disabled:[4],for:[1]}],[6,"admiralty-input-invalid"]]]],e)}));
2
2
  //# sourceMappingURL=admiralty.esm.js.map
package/dist/admiralty/{p-876d0c92.entry.js → p-f3b69fbc.entry.js} RENAMED
@@ -1,2 +1,2 @@
1
- import{r as a,h as t,g as r}from"./p-71979ff5.js";const o=".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 i=o;const n=class{constructor(t){a(this,t);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 a=this.el.textContent.trim().length>0;const{form:r,name:o,value:i}=this;const n=Object.assign(Object.assign(Object.assign({},r&&{form:r}),o&&{name:o}),i&&{value:i});return t("button",Object.assign({key:"12ff8bfa7e7e60f8dd935d557afd4e027c896461",type:this.type,disabled:this.disabled,class:{[this.variant]:true,borderless:this.borderless}},n),t("slot",{key:"8e054caba7e052cb51ccdf12c44611bf28bfb3ee"}),this.icon?t("admiralty-icon",{name:this.icon,class:`${a?"icon-padding":""}`}):undefined)}get el(){return r(this)}};n.style=i;export{n as admiralty_button};
2
- //# sourceMappingURL=p-876d0c92.entry.js.map
1
+ import{r as a,h as t,g as r}from"./p-71979ff5.js";const o=".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 i=o;const n=class{constructor(t){a(this,t);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 a=this.el.textContent.trim().length>0;const{form:r,name:o,value:i}=this;const n=Object.assign(Object.assign(Object.assign({},r&&{form:r}),o&&{name:o}),i&&{value:i});return t("button",Object.assign({key:"abee3f20f126864a8b0a8d05bba8efc4940a6d72",type:this.type,disabled:this.disabled,class:{[this.variant]:true,borderless:this.borderless}},n),t("slot",{key:"83b5c5260914f49782d70fa951ea93589675fe26"}),this.icon?t("admiralty-icon",{name:this.icon,class:`${a?"icon-padding":""}`}):undefined)}get el(){return r(this)}};n.style=i;export{n as admiralty_button};
2
+ //# sourceMappingURL=p-f3b69fbc.entry.js.map
package/dist/admiralty/{p-876d0c92.entry.js.map → p-f3b69fbc.entry.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"names":["buttonCss","AdmiraltyButtonStyle0","ButtonComponent","render","hasTextContent","this","el","textContent","trim","length","form","name","value","props","Object","assign","h","key","type","disabled","class","variant","borderless","icon","undefined"],"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 Font Awesome 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"],"mappings":"kDAAA,MAAMA,EAAY,u3iBAClB,MAAAC,EAAeD,E,MCOFE,EAAe,M,sCAMO,U,kCAQG,M,gBAMf,M,UAIyB,S,6DAgB9C,MAAAC,GACE,MAAMC,EAAiBC,KAAKC,GAAGC,YAAYC,OAAOC,OAAS,EAE3D,MAAMC,KAAEA,EAAIC,KAAEA,EAAIC,MAAEA,GAAUP,KAC9B,MAAMQ,EAAKC,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,GACLL,GAAQ,CAAEA,SACVC,GAAQ,CAAEA,SACVC,GAAS,CAAEA,UAGjB,OACEI,EAAA,SAAAF,OAAAC,OAAA,CAAAE,IAAA,2CAAQC,KAAMb,KAAKa,KAAMC,SAAUd,KAAKc,SAAUC,MAAO,CAAC,CAACf,KAAKgB,SAAS,KAAMC,WAAcjB,KAAKiB,aAAiBT,GACjHG,EAAA,QAAAC,IAAA,6CACCZ,KAAKkB,KAAOP,EAAA,kBAAgBL,KAAMN,KAAKkB,KAAMH,MAAO,GAAGhB,EAAgB,eAAiB,OAA0BoB,U","ignoreList":[]}
1
+ {"version":3,"names":["buttonCss","AdmiraltyButtonStyle0","ButtonComponent","render","hasTextContent","this","el","textContent","trim","length","form","name","value","props","Object","assign","h","key","type","disabled","class","variant","borderless","icon","undefined"],"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"],"mappings":"kDAAA,MAAMA,EAAY,u3iBAClB,MAAAC,EAAeD,E,MCOFE,EAAe,M,sCAMO,U,kCAQG,M,gBAMf,M,UAIyB,S,6DAgB9C,MAAAC,GACE,MAAMC,EAAiBC,KAAKC,GAAGC,YAAYC,OAAOC,OAAS,EAE3D,MAAMC,KAAEA,EAAIC,KAAEA,EAAIC,MAAEA,GAAUP,KAC9B,MAAMQ,EAAKC,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,GACLL,GAAQ,CAAEA,SACVC,GAAQ,CAAEA,SACVC,GAAS,CAAEA,UAGjB,OACEI,EAAA,SAAAF,OAAAC,OAAA,CAAAE,IAAA,2CAAQC,KAAMb,KAAKa,KAAMC,SAAUd,KAAKc,SAAUC,MAAO,CAAE,CAACf,KAAKgB,SAAU,KAAMC,WAAYjB,KAAKiB,aAAkBT,GAClHG,EAAA,QAAAC,IAAA,6CACCZ,KAAKkB,KAAOP,EAAA,kBAAgBL,KAAMN,KAAKkB,KAAMH,MAAO,GAAGhB,EAAiB,eAAiB,OAA0BoB,U","ignoreList":[]}
package/dist/cjs/admiralty-button.cjs.entry.js CHANGED
@@ -23,7 +23,7 @@ const ButtonComponent = class {
23
23
  const hasTextContent = this.el.textContent.trim().length > 0;
24
24
  const { form, name, value } = this;
25
25
  const props = Object.assign(Object.assign(Object.assign({}, (form && { form })), (name && { name })), (value && { value }));
26
- return (index.h("button", Object.assign({ key: '12ff8bfa7e7e60f8dd935d557afd4e027c896461', type: this.type, disabled: this.disabled, class: { [this.variant]: true, 'borderless': this.borderless } }, props), index.h("slot", { key: '8e054caba7e052cb51ccdf12c44611bf28bfb3ee' }), this.icon ? index.h("admiralty-icon", { name: this.icon, class: `${hasTextContent ? "icon-padding" : ""}` }) : undefined));
26
+ return (index.h("button", Object.assign({ key: 'abee3f20f126864a8b0a8d05bba8efc4940a6d72', type: this.type, disabled: this.disabled, class: { [this.variant]: true, borderless: this.borderless } }, props), index.h("slot", { key: '83b5c5260914f49782d70fa951ea93589675fe26' }), this.icon ? index.h("admiralty-icon", { name: this.icon, class: `${hasTextContent ? 'icon-padding' : ''}` }) : undefined));
27
27
  }
28
28
  get el() { return index.getElement(this); }
29
29
  };
package/dist/cjs/admiralty-button.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"admiralty-button.entry.cjs.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,QACEA,mFAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAC,CAAC,IAAI,CAAC,OAAO,GAAE,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,UAAU,EAAC,IAAM,KAAK,GACtHA,oEAAa,EACZ,IAAI,CAAC,IAAI,GAAGA,4BAAgB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,cAAc,GAAE,cAAc,GAAG,EAAE,EAAE,GAAmB,GAAG,SAAS,CACrH,EACT;KACH;;;;;;;","names":["h"],"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 Font Awesome 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":"admiralty-button.entry.cjs.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,QACEA,mFAAQ,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,GACvHA,oEAAa,EACZ,IAAI,CAAC,IAAI,GAAGA,4BAAgB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,cAAc,GAAG,cAAc,GAAG,EAAE,EAAE,GAAmB,GAAG,SAAS,CACtH,EACT;KACH;;;;;;;","names":["h"],"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/collection/components/button/button.js CHANGED
@@ -14,7 +14,7 @@ export class ButtonComponent {
14
14
  const hasTextContent = this.el.textContent.trim().length > 0;
15
15
  const { form, name, value } = this;
16
16
  const props = Object.assign(Object.assign(Object.assign({}, (form && { form })), (name && { name })), (value && { value }));
17
- return (h("button", Object.assign({ key: '12ff8bfa7e7e60f8dd935d557afd4e027c896461', type: this.type, disabled: this.disabled, class: { [this.variant]: true, 'borderless': this.borderless } }, props), h("slot", { key: '8e054caba7e052cb51ccdf12c44611bf28bfb3ee' }), this.icon ? h("admiralty-icon", { name: this.icon, class: `${hasTextContent ? "icon-padding" : ""}` }) : undefined));
17
+ 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));
18
18
  }
19
19
  static get is() { return "admiralty-button"; }
20
20
  static get encapsulation() { return "scoped"; }
@@ -66,7 +66,7 @@ export class ButtonComponent {
66
66
  "optional": false,
67
67
  "docs": {
68
68
  "tags": [],
69
- "text": "When passed Font Awesome Icon name, then an icon will be rendered."
69
+ "text": "When passed Material Icon name, then an icon will be rendered."
70
70
  },
71
71
  "attribute": "icon",
72
72
  "reflect": false
package/dist/collection/components/button/button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAC,MAAM,eAAe,CAAC;AAQ3D,MAAM,OAAO,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,iDACN,CAAC,IAAI,IAAI,EAAE,IAAI,EAAE,CAAC,GAClB,CAAC,IAAI,IAAI,EAAE,IAAI,EAAE,CAAC,GAClB,CAAC,KAAK,IAAI,EAAE,KAAK,EAAE,CAAC,CACxB,CAAC;QAEF,OAAO,CACL,6EAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAC,CAAC,IAAI,CAAC,OAAO,CAAC,EAAC,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,UAAU,EAAC,IAAM,KAAK;YACtH,8DAAa;YACZ,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,sBAAgB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,cAAc,CAAA,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE,GAAmB,CAAC,CAAC,CAAC,SAAS,CACrH,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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 Font Awesome 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"]}
1
+ {"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAQ5D,MAAM,OAAO,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,iDACN,CAAC,IAAI,IAAI,EAAE,IAAI,EAAE,CAAC,GAClB,CAAC,IAAI,IAAI,EAAE,IAAI,EAAE,CAAC,GAClB,CAAC,KAAK,IAAI,EAAE,KAAK,EAAE,CAAC,CACxB,CAAC;QAEF,OAAO,CACL,6EAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,IAAM,KAAK;YACvH,8DAAa;YACZ,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,sBAAgB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE,GAAmB,CAAC,CAAC,CAAC,SAAS,CACtH,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}
package/dist/components/admiralty-button.js CHANGED
@@ -1,4 +1,4 @@
1
- import { B as ButtonComponent, d as defineCustomElement$1 } from './p-49b5109b.js';
1
+ import { B as ButtonComponent, d as defineCustomElement$1 } from './p-a208e1b2.js';
2
2
 
3
3
  const AdmiraltyButton = ButtonComponent;
4
4
  const defineCustomElement = defineCustomElement$1;
package/dist/components/admiralty-colour-block.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h } from './p-7dd465c9.js';
2
- import { d as defineCustomElement$3 } from './p-49b5109b.js';
2
+ import { d as defineCustomElement$3 } from './p-a208e1b2.js';
3
3
  import { d as defineCustomElement$2 } from './p-9bd9f5c0.js';
4
4
 
5
5
  const colourBlockCss = ".visually-hidden.sc-admiralty-colour-block:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-colour-block{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-colour-block{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-colour-block{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-colour-block{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-colour-block{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-colour-block{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-colour-block{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-colour-block{display:none}}.colourBlock.sc-admiralty-colour-block{height:100%;width:100%;max-width:100%;padding:var(--admiralty-colour-block-padding, 30px 18px);display:flex;flex-direction:column;box-sizing:border-box}.colourBlock.sc-admiralty-colour-block .content.sc-admiralty-colour-block{flex-grow:1}.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block{align-self:flex-end;cursor:pointer}.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block:focus *.sc-admiralty-colour-block{color:var(--admiralty-text-colour) !important}.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block span.sc-admiralty-colour-block{font-weight:var(--admiralty-colour-block-action-font-weight, var(--admiralty-font-weight-medium));font-size:var(--admiralty-colour-block-action-font-size, var(--admiralty-font-size-1));line-height:30px}@media (max-width: 1023px){.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block span.sc-admiralty-colour-block{font-size:var(--admiralty-colour-block-action-not-desktop-font-size, var(--admiralty-font-size-0));line-height:30px}}.colourBlock.admiralty-blue.sc-admiralty-colour-block{background-color:var(--admiralty-colour-primary)}.colourBlock.admiralty-blue.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--admiralty-colour-primary-contrast)}.colourBlock.teal.sc-admiralty-colour-block{background-color:var(--admiralty-colour-secondary)}.colourBlock.teal.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--admiralty-colour-secondary-contrast)}.colourBlock.bright-blue.sc-admiralty-colour-block{background-color:var(--admiralty-colour-tertiary);color:var(--admiralty-colour-primary)}.colourBlock.bright-blue.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--admiralty-colour-primary)}";
package/dist/components/admiralty-filter.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h } from './p-7dd465c9.js';
2
- import { d as defineCustomElement$3 } from './p-49b5109b.js';
2
+ import { d as defineCustomElement$3 } from './p-a208e1b2.js';
3
3
  import { d as defineCustomElement$2 } from './p-9bd9f5c0.js';
4
4
 
5
5
  const filterCss = ".visually-hidden.sc-admiralty-filter: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-filter{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-filter{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-filter{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-filter{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-filter{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-filter{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-filter{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-filter{display:none}}.filter-heading.sc-admiralty-filter{display:flex;justify-content:space-between;align-items:baseline}.filter-heading.sc-admiralty-filter .filter-title.sc-admiralty-filter{color:var(--admiralty-colour-primary);font-weight:var(--admiralty-filter-title-font-weight, var(--admiralty-font-weight-medium));font-size:var(--admiralty-filter-title-font-size, var(--admiralty-font-size-5));line-height:48px;margin-bottom:var(--admiralty-filter-title-margin, 18px)}.filter-heading.sc-admiralty-filter .button-wrapper.sc-admiralty-filter{position:relative;margin-left:var(--admiralty-filter-button-wrapper-margin, var(--admiralty-spacing-7))}.filter-heading.sc-admiralty-filter .button-wrapper.sc-admiralty-filter button.text-link.sc-admiralty-filter{background-color:unset;border:none;color:var(--admiralty-colour-primary);padding:var(--admiralty-filter-button-text-padding, var(--admiralty-font-size-0));min-width:unset;width:unset;height:unset;font-size:var(--admiralty-filter-reset-font-size, var(--admiralty-font-size-0));text-decoration:underline;font-weight:unset;cursor:pointer}.filter-heading.sc-admiralty-filter .button-wrapper.sc-admiralty-filter button.text-link.sc-admiralty-filter:hover{background-color:unset;border:unset}.filter-heading.sc-admiralty-filter .button-wrapper.sc-admiralty-filter button.text-link.sc-admiralty-filter:focus{outline:none}.filter-heading.sc-admiralty-filter .button-wrapper.sc-admiralty-filter button.text-link.sc-admiralty-filter:focus::after{content:\"\";position:absolute;top:-3px;bottom:0;right:-3px;left:-3px;box-shadow:0 0 0 3px var(--admiralty-focus-colour)}";
package/dist/components/admiralty-paginator.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h } from './p-7dd465c9.js';
2
- import { d as defineCustomElement$3 } from './p-49b5109b.js';
2
+ import { d as defineCustomElement$3 } from './p-a208e1b2.js';
3
3
  import { d as defineCustomElement$2 } from './p-9bd9f5c0.js';
4
4
 
5
5
  const paginatorCss = ".visually-hidden.sc-admiralty-paginator: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-paginator{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-paginator{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-paginator{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-paginator{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-paginator{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-paginator{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-paginator{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-paginator{display:none}}nav.standard.sc-admiralty-paginator{display:flex;flex-direction:row;align-items:center}nav.standard.sc-admiralty-paginator admiralty-button.sc-admiralty-paginator{margin:var(--admiralty-paginator-button-margin, 6px)}nav.standard.sc-admiralty-paginator p.sc-admiralty-paginator{padding:var(--admiralty-paginator-paragraph-padding, var(--admiralty-spacing-0) 18px var(--admiralty-spacing-0) var(--admiralty-spacing-0));margin-bottom:var(--admiralty-paginator-paragraph-margin-bottom, var(--admiralty-spacing-0))}";
package/dist/components/{p-49b5109b.js → p-a208e1b2.js} RENAMED
@@ -21,7 +21,7 @@ const ButtonComponent = /*@__PURE__*/ proxyCustomElement(class ButtonComponent e
21
21
  const hasTextContent = this.el.textContent.trim().length > 0;
22
22
  const { form, name, value } = this;
23
23
  const props = Object.assign(Object.assign(Object.assign({}, (form && { form })), (name && { name })), (value && { value }));
24
- return (h("button", Object.assign({ key: '12ff8bfa7e7e60f8dd935d557afd4e027c896461', type: this.type, disabled: this.disabled, class: { [this.variant]: true, 'borderless': this.borderless } }, props), h("slot", { key: '8e054caba7e052cb51ccdf12c44611bf28bfb3ee' }), this.icon ? h("admiralty-icon", { name: this.icon, class: `${hasTextContent ? "icon-padding" : ""}` }) : undefined));
24
+ 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));
25
25
  }
26
26
  get el() { return this; }
27
27
  static get style() { return AdmiraltyButtonStyle0; }
@@ -56,4 +56,4 @@ function defineCustomElement() {
56
56
 
57
57
  export { ButtonComponent as B, defineCustomElement as d };
58
58
 
59
- //# sourceMappingURL=p-49b5109b.js.map
59
+ //# sourceMappingURL=p-a208e1b2.js.map
package/dist/components/{p-49b5109b.js.map → p-a208e1b2.js.map} RENAMED
@@ -1 +1 @@
1
- {"file":"p-49b5109b.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,EAAC,CAAC,IAAI,CAAC,OAAO,GAAE,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,UAAU,EAAC,IAAM,KAAK,GACtH,8DAAa,EACZ,IAAI,CAAC,IAAI,GAAG,sBAAgB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,cAAc,GAAE,cAAc,GAAG,EAAE,EAAE,GAAmB,GAAG,SAAS,CACrH,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 Font Awesome 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-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}
package/dist/esm/admiralty-button.entry.js CHANGED
@@ -19,7 +19,7 @@ const ButtonComponent = class {
19
19
  const hasTextContent = this.el.textContent.trim().length > 0;
20
20
  const { form, name, value } = this;
21
21
  const props = Object.assign(Object.assign(Object.assign({}, (form && { form })), (name && { name })), (value && { value }));
22
- return (h("button", Object.assign({ key: '12ff8bfa7e7e60f8dd935d557afd4e027c896461', type: this.type, disabled: this.disabled, class: { [this.variant]: true, 'borderless': this.borderless } }, props), h("slot", { key: '8e054caba7e052cb51ccdf12c44611bf28bfb3ee' }), this.icon ? h("admiralty-icon", { name: this.icon, class: `${hasTextContent ? "icon-padding" : ""}` }) : undefined));
22
+ 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));
23
23
  }
24
24
  get el() { return getElement(this); }
25
25
  };
package/dist/esm/admiralty-button.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"admiralty-button.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,s3iBAAs3iB,CAAC;AACz4iB,8BAAe,SAAS;;MCOX,eAAe;;;uBAMO,SAAS;;wBAQN,KAAK;0BAMpB,KAAK;oBAIoB,QAAQ;;;;;IAgBtD,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;QAE7D,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QACnC,MAAM,KAAK,kDACL,IAAI,IAAI,EAAE,IAAI,EAAE,KAChB,IAAI,IAAI,EAAE,IAAI,EAAE,KAChB,KAAK,IAAI,EAAE,KAAK,EAAE,EACvB,CAAC;QAEF,QACE,6EAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAC,CAAC,IAAI,CAAC,OAAO,GAAE,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,UAAU,EAAC,IAAM,KAAK,GACtH,8DAAa,EACZ,IAAI,CAAC,IAAI,GAAG,sBAAgB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,cAAc,GAAE,cAAc,GAAG,EAAE,EAAE,GAAmB,GAAG,SAAS,CACrH,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 Font Awesome 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":"admiralty-button.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,s3iBAAs3iB,CAAC;AACz4iB,8BAAe,SAAS;;MCOX,eAAe;;;uBAMO,SAAS;;wBAQN,KAAK;0BAMpB,KAAK;oBAIoB,QAAQ;;;;;IAgBtD,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;QAE7D,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QACnC,MAAM,KAAK,kDACL,IAAI,IAAI,EAAE,IAAI,EAAE,KAChB,IAAI,IAAI,EAAE,IAAI,EAAE,KAChB,KAAK,IAAI,EAAE,KAAK,EAAE,EACvB,CAAC;QAEF,QACE,6EAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,IAAM,KAAK,GACvH,8DAAa,EACZ,IAAI,CAAC,IAAI,GAAG,sBAAgB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,cAAc,GAAG,cAAc,GAAG,EAAE,EAAE,GAAmB,GAAG,SAAS,CACtH,EACT;KACH;;;;;;;","names":[],"sources":["src/components/button/button.scss?tag=admiralty-button&encapsulation=scoped","src/components/button/button.tsx"],"sourcesContent":["@import 'button.vars';\n\n@mixin button-defaults {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n font-size: $button-font-size;\n line-height: $button-line-height;\n font-weight: $button-font-weight;\n background-color: unset;\n cursor: pointer;\n\n &:focus {\n outline: none;\n color: $button-focus-text-colour;\n background-color: $button-focus-colour;\n border: none;\n border-bottom: 4px solid $button-focus-text-colour;\n padding: $button-focus-padding;\n\n ::slotted(*) {\n color: $button-focus-text-colour !important;\n }\n }\n\n &:disabled {\n cursor: default;\n * {\n pointer-events: none;\n }\n }\n\n i {\n display: inline-block;\n font-size: $button-font-size;\n color: $button-icon-colour;\n padding: $button-defaults-idiomatic-padding;\n }\n}\n\n@mixin button {\n @include button-defaults;\n height: 44px;\n padding: $button-defaults-padding;\n white-space: nowrap;\n min-width: 50px;\n\n @include not-desktop {\n min-width: unset;\n max-width: 200px;\n width: 100%;\n height: 44px;\n padding: $button-not-desktop-padding;\n }\n\n i {\n display: inline-block;\n font-size: $button-idiomatic-font-size;\n color: $button-icon-colour;\n padding-left: $button-idiomatic-padding-left;\n }\n}\n\n/* Primary Buttons */\nbutton.primary {\n @include button;\n background-color: $button-colour-standard;\n color: $button-text-colour-standard;\n border: 2px solid $button-border-colour-standard;\n\n &:hover {\n background-color: $button-hover-colour-standard;\n border: 2px solid $button-hover-colour-standard;\n color: $button-hover-text-colour-standard;\n border-color: $button-hover-border-colour-standard;\n padding: $button-primary-hover-padding;\n }\n\n &:hover:focus {\n padding: $button-primary-hover-focus-padding;\n }\n\n &:hover:focus:active {\n padding: $button-primary-hover-focus-active-padding;\n }\n\n &:enabled:active {\n background-color: $button-active-colour-standard;\n border: 2px solid $button-active-border-colour-standard;\n color: $button-active-text-colour-standard;\n\n i {\n color: $button-active-text-colour-standard;\n }\n\n p {\n color: $button-active-text-colour-standard;\n }\n }\n\n &:disabled {\n background-color: $button-colour-deselected;\n border: 2px solid $button-border-colour-deselected;\n }\n}\n\n/* Secondary Buttons */\nbutton.secondary {\n @include button;\n background-color: $button-colour-secondary;\n color: $button-text-colour-secondary;\n border: 2px solid $button-border-colour-secondary;\n\n &:hover {\n background-color: $button-hover-colour-secondary;\n color: $button-hover-text-colour-secondary;\n border: 2px solid $button-hover-border-colour-secondary;\n padding: $button-secondary-hover-padding;\n }\n\n &:enabled:active {\n background-color: $button-active-colour-secondary;\n border: 2px solid $button-active-border-colour-secondary;\n color: $button-active-text-colour-secondary;\n\n i {\n color: $button-active-text-colour-secondary;\n }\n\n p {\n color: $button-active-text-colour-secondary;\n }\n }\n\n &:disabled {\n background-color: $button-colour-deselected;\n border: 2px solid $button-border-colour-deselected;\n }\n\n i {\n color: $button-text-colour-secondary;\n }\n}\n\n/* Warning Buttons */\nbutton.warning {\n @include button;\n background-color: $button-colour-warning;\n color: $button-text-colour-warning;\n border: 2px solid $button-border-colour-warning;\n\n &:hover {\n background-color: $button-hover-colour-warning;\n color: $button-text-colour-warning;\n border: 2px solid $button-hover-border-colour-warning;\n padding: $button-warning-hover-padding;\n }\n\n &:enabled:active {\n background-color: $button-active-colour-warning;\n border: 2px solid $button-active-border-colour-warning;\n color: $button-active-text-colour-warning;\n\n i {\n color: $button-active-text-colour-warning;\n }\n\n p {\n color: $button-active-text-colour-warning;\n }\n }\n\n &:disabled {\n background-color: $button-colour-deselected;\n border: 2px solid $button-border-colour-deselected;\n & > * {\n opacity: 0.5;\n }\n }\n\n i {\n color: $button-text-colour-warning;\n }\n}\n\n/* Text Buttons */\nbutton.text {\n @include button-defaults;\n color: $button-text-colour-secondary;\n\n &:enabled:active {\n color: $button-text-colour-secondary;\n\n i {\n color: $button-text-colour-secondary;\n }\n\n p {\n color: $button-text-colour-secondary;\n }\n }\n\n &:disabled {\n color: $button-colour-deselected;\n & > * {\n opacity: 0.5;\n }\n }\n\n &:focus {\n border: none;\n box-shadow:\n 0 -2px $button-focus-colour,\n 0 4px $button-focus-text-colour;\n text-decoration: none;\n padding: $button-text-focus-padding;\n ::slotted(*) {\n color: $button-focus-text-colour !important;\n }\n }\n\n i {\n color: $button-text-colour-secondary;\n }\n}\n\n/* Icon Buttons */\nbutton.icon {\n @include button-defaults;\n min-height: 44px;\n min-width: 50px;\n\n background-color: $button-colour-icon;\n color: $button-text-colour-icon;\n border: 2px solid $button-border-colour-icon;\n padding: $button-icon-padding;\n\n &:focus {\n padding: $button-icon-focus-padding;\n }\n\n &:hover {\n background-color: $button-hover-colour-icon;\n border: 2px solid $button-hover-border-colour-icon;\n padding: $button-icon-hover-padding;\n }\n\n admiralty-icon {\n &.icon-padding {\n padding-left: 8px;\n }\n }\n\n &:enabled:active {\n background-color: $button-active-colour-icon;\n color: $button-active-text-colour-icon;\n border: 2px solid $button-active-border-colour-icon;\n\n admiralty-icon {\n color: $button-active-text-colour-icon !important;\n }\n }\n\n &:disabled {\n background-color: $button-disabled-colour-icon;\n border: 2px solid $button-disabled-colour-icon;\n opacity: 0.3;\n }\n\n &.borderless {\n border: none;\n background-color: yellow;\n }\n\n &:active:disabled {\n background-color: $button-colour-deselected;\n border: 2px solid $button-disabled-colour-icon;\n opacity: 0.3;\n }\n\n i {\n margin: auto;\n font-size: unset;\n color: unset;\n padding-left: unset;\n }\n}\nbutton.icon-secondary {\n @include button-defaults;\n min-height: 44px;\n min-width: 50px;\n\n background-color: $button-colour-icon-secondary;\n color: $button-text-colour-icon-secondary;\n border: 2px solid $button-border-colour-icon-secondary;\n padding: 9px;\n\n &:focus {\n padding: 11px 11px 8px;\n }\n\n &:hover {\n background-color: $button-hover-colour-icon-secondary;\n border: 2px solid $button-hover-border-colour-icon-secondary;\n padding: 9px;\n }\n\n admiralty-icon {\n &.icon-padding {\n padding-left: 8px;\n }\n }\n\n &:enabled:active {\n background-color: $button-active-colour-icon-secondary;\n color: $button-active-text-colour-icon-secondary;\n border: 2px solid $button-active-border-colour-icon-secondary;\n border: 2px solid transparent;\n\n admiralty-icon {\n color: $button-active-text-colour-icon-secondary !important;\n }\n }\n\n &:disabled {\n background-color: $button-disabled-colour-icon;\n border: 2px solid $button-active-border-colour-icon;\n opacity: 0.3;\n }\n\n &.borderless {\n border: none;\n }\n\n &:active:disabled {\n background-color: $button-colour-deselected;\n border: 2px solid $button-active-border-colour-icon;\n opacity: 0.3;\n }\n\n i {\n margin: $button-icon-idiomatic-margin;\n font-size: unset;\n color: unset;\n padding-left: $button-icon-idiomatic-padding;\n }\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\nimport { ButtonVariant } from './button.types';\n\n@Component({\n tag: 'admiralty-button',\n styleUrl: 'button.scss',\n scoped: true,\n})\nexport class ButtonComponent {\n @Element() el: HTMLElement;\n /**\n * The type of button to render. Valid values are `primary`, `secondary`, `warning`, `text` and `icon`.\n * Default value is `primary`.\n */\n @Prop() variant: ButtonVariant = 'primary';\n /**\n * When passed Material Icon name, then an icon will be rendered.\n */\n @Prop() icon: string;\n /**\n * Determines whether the button is disabled. A button in disabled state will not fire click output events.\n */\n @Prop({ reflect: true }) disabled = false;\n /**\n * The default behavior of the button. Valid values are `button`, `submit` and `reset`.\n * Default value is `submit`.\n */\n\n @Prop() borderless = false;\n /**\n * Default value is false\n */\n @Prop() type: 'button' | 'submit' | 'reset' = 'submit';\n /**\n * The `<form>` element to associate the button with (its form owner).\n */\n @Prop() form: string;\n /**\n * The name of the button, submitted as a pair with the button's value as part of the form data,\n * when that button is used to submit the form.\n */\n @Prop() name: string;\n /**\n * Defines the value associated with the button's name when it's submitted with the form data.\n * This value is passed to the server in params when the form is submitted using this button.\n */\n @Prop() value: string;\n\n render() {\n const hasTextContent = this.el.textContent.trim().length > 0;\n\n const { form, name, value } = this;\n const props = {\n ...(form && { form }),\n ...(name && { name }),\n ...(value && { value }),\n };\n\n return (\n <button type={this.type} disabled={this.disabled} class={{ [this.variant]: true, borderless: this.borderless }} {...props}>\n <slot></slot>\n {this.icon ? <admiralty-icon name={this.icon} class={`${hasTextContent ? 'icon-padding' : ''}`}></admiralty-icon> : undefined}\n </button>\n );\n }\n}\n"],"version":3}
package/dist/types/components/button/button.d.ts CHANGED
@@ -7,7 +7,7 @@ export declare class ButtonComponent {
7
7
  */
8
8
  variant: ButtonVariant;
9
9
  /**
10
- * When passed Font Awesome Icon name, then an icon will be rendered.
10
+ * When passed Material Icon name, then an icon will be rendered.
11
11
  */
12
12
  icon: string;
13
13
  /**
package/dist/types/components.d.ts CHANGED
@@ -145,7 +145,7 @@ export namespace Components {
145
145
  */
146
146
  "form": string;
147
147
  /**
148
- * When passed Font Awesome Icon name, then an icon will be rendered.
148
+ * When passed Material Icon name, then an icon will be rendered.
149
149
  */
150
150
  "icon": string;
151
151
  /**
@@ -1791,7 +1791,7 @@ declare namespace LocalJSX {
1791
1791
  */
1792
1792
  "form"?: string;
1793
1793
  /**
1794
- * When passed Font Awesome Icon name, then an icon will be rendered.
1794
+ * When passed Material Icon name, then an icon will be rendered.
1795
1795
  */
1796
1796
  "icon"?: string;
1797
1797
  /**
package/docs/docs.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2025-10-31T14:48:25",
2
+ "timestamp": "2025-10-31T15:53:59",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.21.0",
@@ -841,7 +841,7 @@
841
841
  "mutable": false,
842
842
  "attr": "icon",
843
843
  "reflectToAttr": false,
844
- "docs": "When passed Font Awesome Icon name, then an icon will be rendered.",
844
+ "docs": "When passed Material Icon name, then an icon will be rendered.",
845
845
  "docsTags": [],
846
846
  "values": [
847
847
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ukho/admiralty-core",
3
- "version": "5.2.0-next.2",
3
+ "version": "5.2.0-next.3",
4
4
  "description": "Stencil Component Starter",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.js",
@@ -38,10 +38,6 @@
38
38
  "@babel/core": "^7.25.2",
39
39
  "@babel/preset-env": "^7.25.4",
40
40
  "@babel/preset-typescript": "^7.24.7",
41
- "@fortawesome/fontawesome-svg-core": "^6.6.0",
42
- "@fortawesome/free-brands-svg-icons": "^6.6.0",
43
- "@fortawesome/free-regular-svg-icons": "^6.6.0",
44
- "@fortawesome/free-solid-svg-icons": "^6.6.0",
45
41
  "@iconify-json/material-symbols": "^1.2.2",
46
42
  "@iconify/types": "^2.0.0",
47
43
  "@iconify/utils": "^2.1.33",
@@ -75,5 +71,5 @@
75
71
  "license": "MIT",
76
72
  "url": "https://github.com/UKHO/admiralty-design-system",
77
73
  "repository": "git://github.com/UKHO/admiralty-design-system.git",
78
- "gitHead": "5e0b00ae2c119ca0760d71b9ff51776b3b97d599"
74
+ "gitHead": "7259cb2e034311b25be5ed6d654fe16899a1c7ec"
79
75
  }