@ukho/admiralty-core 5.6.1 → 5.6.2--canary.668b010.0
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.
- package/dist/admiralty/admiralty.esm.js +1 -1
- package/dist/admiralty/p-b0c77391.entry.js +1 -0
- package/dist/cjs/admiralty-colour-block.cjs.entry.js +62 -4
- package/dist/collection/components/colour-block/colour-block.css +13 -0
- package/dist/collection/components/colour-block/colour-block.js +61 -3
- package/dist/components/admiralty-colour-block.js +1 -1
- package/dist/esm/admiralty-colour-block.entry.js +62 -4
- package/dist/types/components/colour-block/colour-block.d.ts +7 -0
- package/docs/docs.json +1 -1
- package/package.json +2 -2
- package/dist/admiralty/p-33531fc7.entry.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as a}from"./p-uO9JpdnI.js";export{s as setNonce}from"./p-uO9JpdnI.js";import{g as i}from"./p-DQuL1Twl.js";(()=>{const a=import.meta.url,i={};return""!==a&&(i.resourcesUrl=new URL(".",a).href),e(i)})().then((async e=>(await i(),a([["p-c55f0b84",[[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"],iconName:[1,"icon-name"],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:0}],focused:[{onFocusedChange:0}]}]]],["p-3d31f5fa",[[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:0}]}]]],["p-482b572b",[[262,"admiralty-select",{disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],hint:[1],label:[1],width:[2],value:[1032]},null,{value:[{valueChanged:0}]}]]],["p-c4bd7f40",[[2,"admiralty-textarea",{label:[1],hint:[1],width:[2],disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],value:[1032]},null,{value:[{valueChanged:0}]}]]],["p-7ddb717d",[[262,"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:0}],invalid:[{invalidChanged:0}]}]]],["p-
|
|
1
|
+
import{p as e,b as a}from"./p-uO9JpdnI.js";export{s as setNonce}from"./p-uO9JpdnI.js";import{g as i}from"./p-DQuL1Twl.js";(()=>{const a=import.meta.url,i={};return""!==a&&(i.resourcesUrl=new URL(".",a).href),e(i)})().then((async e=>(await i(),a([["p-c55f0b84",[[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"],iconName:[1,"icon-name"],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:0}],focused:[{onFocusedChange:0}]}]]],["p-3d31f5fa",[[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:0}]}]]],["p-482b572b",[[262,"admiralty-select",{disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],hint:[1],label:[1],width:[2],value:[1032]},null,{value:[{valueChanged:0}]}]]],["p-c4bd7f40",[[2,"admiralty-textarea",{label:[1],hint:[1],width:[2],disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],value:[1032]},null,{value:[{valueChanged:0}]}]]],["p-7ddb717d",[[262,"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:0}],invalid:[{invalidChanged:0}]}]]],["p-b0c77391",[[262,"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-20b2151f",[[262,"admiralty-error-summary",{heading:[1]}]]],["p-a39054a1",[[2,"admiralty-file-input",{label:[1],multiple:[4],invalid:[4],invalidMessage:[1,"invalid-message"],files:[32]}]]],["p-ec54cb7a",[[262,"admiralty-filter",{filterTitle:[1,"filter-title"]}]]],["p-04ba8a2d",[[262,"admiralty-filter-group",{groupTitle:[1,"group-title"]}]]],["p-0f9c7b77",[[2,"admiralty-paginator",{pages:[2],currentPage:[2,"current-page"],label:[1]}]]],["p-c52cb40d",[[262,"admiralty-breadcrumb",{active:[4],first:[4],href:[1]}]]],["p-2062b7be",[[262,"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-58bca1c3",[[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:0}]}]]],["p-db616d14",[[2,"admiralty-pill",{text:[1],number:[1],label:[1],colour:[1],selected:[4]}]]],["p-d5010bfb",[[2,"admiralty-progress-bar",{label:[1],progression:[2],error:[4],progressionValue:[32]},null,{progression:[{progressionChanged:0}]}]]],["p-93a26092",[[262,"admiralty-progress-tracker",{allowBackNavigation:[4,"allow-back-navigation"],allowForwardNavigation:[4,"allow-forward-navigation"],focusedStepIndex:[32],currentSteps:[32]}]]],["p-4e2170cb",[[262,"admiralty-read-more",{heading:[1],expanded:[32]}]]],["p-db29c807",[[262,"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:0}]}]]],["p-3e5e29cc",[[2,"admiralty-theme-toggle",{theme:[1537],disabled:[516],ariaLabel:[1,"aria-label"]},null,{theme:[{themeChanged:0}]}]]],["p-d6e3e5c5",[[2,"admiralty-autocomplete-option",{value:[8]}]]],["p-d00f1751",[[262,"admiralty-breadcrumbs"]]],["p-90430106",[[262,"admiralty-card",{heading:[1]}]]],["p-a2937f36",[[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:0}]}]]],["p-89f763b3",[[262,"admiralty-footer",{variant:[1],imageLink:[1,"image-link"],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],text:[1],hasSlotContent:[32]},[[2,"slotchange","handleSlotChange"]]]]],["p-87c27c26",[[262,"admiralty-header-menu-item",{menuTitle:[1,"menu-title"],active:[4]}]]],["p-532749db",[[262,"admiralty-header-menu-link",{menuTitle:[1,"menu-title"],active:[4],href:[1],suppressRedirect:[4,"suppress-redirect"]}]]],["p-686e38b1",[[2,"admiralty-header-profile",{isSignedIn:[4,"is-signed-in"],signedInText:[1,"signed-in-text"],signInOnly:[4,"sign-in-only"]}]]],["p-3658cd6a",[[262,"admiralty-header-sub-menu-item",{menuTitle:[1,"menu-title"],href:[1],suppressRedirect:[4,"suppress-redirect"]}]]],["p-f5a798eb",[[2,"admiralty-hr"]]],["p-c8616e41",[[262,"admiralty-icon-side-bar",{label:[1],showLogo:[4,"show-logo"],logoImgUrl:[1,"logo-img-url"],iconSideBarWidth:[1,"icon-side-bar-width"]}]]],["p-b48b53dc",[[260,"admiralty-icon-side-bar-wrapper",null,[[0,"iconSideBarItemClick","onIconSideBarItemSelected"]]]]],["p-250bab5c",[[262,"admiralty-link",{href:[1],newTab:[4,"new-tab"]}]]],["p-a9145bb7",[[262,"admiralty-modal-dialog",{heading:[1],label:[1],description:[1],show:[4]}]]],["p-18ab59bf",[[260,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["p-1eb11a17",[[2,"admiralty-phase-banner",{phase:[1],link:[1]}]]],["p-1119a9fb",[[262,"admiralty-progress-tracker-step",{stepId:[1,"step-id"],stepTitle:[1,"step-title"],status:[1],summary:[1]}]]],["p-f9250d7c",[[262,"admiralty-radio",{name:[1],value:[1025],disabled:[4],checked:[1028],invalid:[4],buttonTabindex:[32],setButtonTabindex:[64]},null,{value:[{valueChanged:0}]}]]],["p-102034c5",[[262,"admiralty-side-nav",{label:[1]}]]],["p-2be7a680",[[2,"admiralty-side-nav-item",{sideNavItemId:[1,"side-nav-item-id"],headingTitle:[1,"heading-title"],navActive:[4,"nav-active"]}]]],["p-19608026",[[260,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["p-3a04a729",[[2,"admiralty-skeleton",{height:[1],width:[1],radius:[1],noAnimation:[1540,"no-animation"]}]]],["p-2f210e36",[[2,"admiralty-skip-link",{href:[1]}]]],["p-d5f03bc3",[[262,"admiralty-tab",{label:[1],tabLabelId:[1,"tab-label-id"],tabContentId:[1,"tab-content-id"]}]]],["p-a3337198",[[262,"admiralty-tab-group",{selectedIndex:[1026,"selected-index"]}]]],["p-58202d6a",[[262,"admiralty-table",{caption:[1]}]]],["p-0f31fa76",[[262,"admiralty-table-body"]]],["p-2e0dbbb1",[[262,"admiralty-table-cell"]]],["p-cb1a4f5a",[[262,"admiralty-table-header"]]],["p-7f5b8da9",[[262,"admiralty-table-header-cell"]]],["p-644ca5b1",[[262,"admiralty-table-row"]]],["p-8d2f5af2",[[262,"admiralty-text-side-bar",{label:[1],showLogo:[4,"show-logo"],logoImgUrl:[1,"logo-img-url"],textSideBarWidth:[1,"text-side-bar-width"]}]]],["p-bf8ff732",[[260,"admiralty-text-side-bar-wrapper",null,[[0,"textSideBarItemClick","ontextSideBarItemSelected"]]]]],["p-4b7de380",[[262,"admiralty-tooltip",{for:[1],placement:[513],alignment:[513]}]]],["p-7840dfc9",[[1,"admiralty-icon",{name:[1],size:[8]}]]],["p-8b915148",[[262,"admiralty-dialogue",{type:[1],heading:[1],sectionRole:[1,"section-role"]}]]],["p-851bc34c",[[262,"admiralty-expansion",{heading:[1],expanded:[1540],alignHeadingRight:[4,"align-heading-right"],hideBorder:[4,"hide-border"]}]]],["p-ba081c09",[[262,"admiralty-button",{variant:[1],icon:[1],disabled:[516],borderless:[4],type:[1],form:[1],name:[1],value:[1]}]]],["p-2129bcf8",[[262,"admiralty-hint",{disabled:[4]}],[262,"admiralty-label",{disabled:[4],for:[1]}],[262,"admiralty-input-invalid"]]]],e))));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as o,c as l,h as t}from"./p-uO9JpdnI.js";const c=class{constructor(t){o(this,t),this.colourBlockLinkClicked=l(this,"colourBlockLinkClicked"),this.colour="admiralty-blue",this.suppressRedirect=!1,this.enableCardEvent=!1}hasLink(){return Boolean(this.linkText&&this.href)}shouldEnableBlockInteraction(){return this.enableCardEvent||this.hasLink()}isInteractiveTarget(o){const l=o.currentTarget instanceof HTMLElement?o.currentTarget:null;return o.composedPath().some((o=>{if(!(o instanceof HTMLElement))return!1;const t=o.closest('a, button, input, select, textarea, [role="button"], [role="link"]');return null!==t&&t!==l}))}triggerLinkAction(){this.linkElement&&(this.linkElement.focus({preventScroll:!0}),this.linkElement.click())}onBlockClick(o){this.shouldEnableBlockInteraction()&&(!this.hasLink()||this.isInteractiveTarget(o)?this.enableCardEvent&&!this.hasLink()&&this.handleClickAction(o):this.triggerLinkAction())}onBlockKeyDown(o){this.shouldEnableBlockInteraction()&&("Enter"!==o.key&&" "!==o.key||(o.preventDefault(),this.hasLink()?this.triggerLinkAction():this.enableCardEvent&&this.handleClickAction(o)))}handleClickAction(o){this.suppressRedirect&&o.preventDefault(),o.stopPropagation(),this.colourBlockLinkClicked.emit()}render(){return t("div",{key:"d74e20942d145c5f373a7c38f57f6cf5c2de47f9",class:{colourBlock:!0,[this.colour]:!0,"is-interactive":this.shouldEnableBlockInteraction()},style:{height:this.height?`${this.height}px`:void 0,width:this.width?`${this.width}px`:void 0},role:this.shouldEnableBlockInteraction()?this.hasLink()?"link":"button":void 0,tabIndex:this.shouldEnableBlockInteraction()?0:void 0,"aria-label":this.shouldEnableBlockInteraction()?this.linkText||this.heading:void 0,onClick:o=>this.onBlockClick(o),onKeyDown:o=>this.onBlockKeyDown(o)},t("h2",{key:"8e9cacf2274d21964a224e0b6bdc116d3ee4d693"},this.heading),t("div",{key:"26dba2f0ed918a62ccdb6e1ecd8cd0657e80c1c1",class:{content:!0,"white-text":"admiralty-blue"===this.colour||"teal"===this.colour}},t("slot",{key:"79730a7fcc58333ea183e4a8e4071e3dfc343fd6"})),this.actionText?t("admiralty-button",{variant:"text",class:"clickAction",onClick:o=>this.handleClickAction(o)},t("span",null,this.actionText)):null,this.linkText&&this.href?t("a",{class:"clickAction",href:this.href,onClick:o=>this.handleClickAction(o),ref:o=>this.linkElement=o},t("span",null,this.linkText)):null)}};c.style=".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.is-interactive.sc-admiralty-colour-block{cursor:pointer}.colourBlock.is-interactive.sc-admiralty-colour-block:hover{filter:brightness(0.95)}.colourBlock.is-interactive.sc-admiralty-colour-block:active{filter:brightness(0.9)}.colourBlock.is-interactive.sc-admiralty-colour-block:focus-visible{outline:3px solid var(--admiralty-focus-colour);outline-offset:2px}.colourBlock.sc-admiralty-colour-block .content.sc-admiralty-colour-block{flex-grow:1}.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block{align-self:flex-end;cursor:pointer}.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block:focus *.sc-admiralty-colour-block{color:var(--admiralty-focus-contrast) !important}.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block span.sc-admiralty-colour-block{font-weight:var(--admiralty-colour-block-action-font-weight, var(--admiralty-font-weight-medium));font-size:var(--admiralty-colour-block-action-font-size, var(--admiralty-font-size-1));line-height:30px}@media (max-width: 1023px){.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block span.sc-admiralty-colour-block{font-size:var(--admiralty-colour-block-action-not-desktop-font-size, var(--admiralty-font-size-0));line-height:30px}}.colourBlock.admiralty-blue.sc-admiralty-colour-block{background-color:var(--colour-block-blue-background-colour)}.colourBlock.admiralty-blue.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--colour-block-blue-text-colour)}.colourBlock.teal.sc-admiralty-colour-block{background-color:var(--admiralty-colour-secondary)}.colourBlock.teal.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--admiralty-colour-secondary-contrast)}.colourBlock.bright-blue.sc-admiralty-colour-block{background-color:var(--admiralty-colour-tertiary)}.colourBlock.bright-blue.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--colour-block-bright-blue-text-colour)}.colourBlock.bright-blue.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--colour-block-bright-blue-text-colour)}";export{c as admiralty_colour_block}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-B8thWtVm.js');
|
|
4
4
|
|
|
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-focus-contrast) !important}.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block span.sc-admiralty-colour-block{font-weight:var(--admiralty-colour-block-action-font-weight, var(--admiralty-font-weight-medium));font-size:var(--admiralty-colour-block-action-font-size, var(--admiralty-font-size-1));line-height:30px}@media (max-width: 1023px){.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block span.sc-admiralty-colour-block{font-size:var(--admiralty-colour-block-action-not-desktop-font-size, var(--admiralty-font-size-0));line-height:30px}}.colourBlock.admiralty-blue.sc-admiralty-colour-block{background-color:var(--colour-block-blue-background-colour)}.colourBlock.admiralty-blue.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--colour-block-blue-text-colour)}.colourBlock.teal.sc-admiralty-colour-block{background-color:var(--admiralty-colour-secondary)}.colourBlock.teal.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--admiralty-colour-secondary-contrast)}.colourBlock.bright-blue.sc-admiralty-colour-block{background-color:var(--admiralty-colour-tertiary)}.colourBlock.bright-blue.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--colour-block-bright-blue-text-colour)}.colourBlock.bright-blue.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--colour-block-bright-blue-text-colour)}`;
|
|
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.is-interactive.sc-admiralty-colour-block{cursor:pointer}.colourBlock.is-interactive.sc-admiralty-colour-block:hover{filter:brightness(0.95)}.colourBlock.is-interactive.sc-admiralty-colour-block:active{filter:brightness(0.9)}.colourBlock.is-interactive.sc-admiralty-colour-block:focus-visible{outline:3px solid var(--admiralty-focus-colour);outline-offset:2px}.colourBlock.sc-admiralty-colour-block .content.sc-admiralty-colour-block{flex-grow:1}.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block{align-self:flex-end;cursor:pointer}.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block:focus *.sc-admiralty-colour-block{color:var(--admiralty-focus-contrast) !important}.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block span.sc-admiralty-colour-block{font-weight:var(--admiralty-colour-block-action-font-weight, var(--admiralty-font-weight-medium));font-size:var(--admiralty-colour-block-action-font-size, var(--admiralty-font-size-1));line-height:30px}@media (max-width: 1023px){.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block span.sc-admiralty-colour-block{font-size:var(--admiralty-colour-block-action-not-desktop-font-size, var(--admiralty-font-size-0));line-height:30px}}.colourBlock.admiralty-blue.sc-admiralty-colour-block{background-color:var(--colour-block-blue-background-colour)}.colourBlock.admiralty-blue.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--colour-block-blue-text-colour)}.colourBlock.teal.sc-admiralty-colour-block{background-color:var(--admiralty-colour-secondary)}.colourBlock.teal.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--admiralty-colour-secondary-contrast)}.colourBlock.bright-blue.sc-admiralty-colour-block{background-color:var(--admiralty-colour-tertiary)}.colourBlock.bright-blue.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--colour-block-bright-blue-text-colour)}.colourBlock.bright-blue.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--colour-block-bright-blue-text-colour)}`;
|
|
6
6
|
|
|
7
7
|
const ColourBlockComponent = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -24,6 +24,60 @@ const ColourBlockComponent = class {
|
|
|
24
24
|
*/
|
|
25
25
|
this.enableCardEvent = false;
|
|
26
26
|
}
|
|
27
|
+
hasLink() {
|
|
28
|
+
return Boolean(this.linkText && this.href);
|
|
29
|
+
}
|
|
30
|
+
shouldEnableBlockInteraction() {
|
|
31
|
+
return this.enableCardEvent || this.hasLink();
|
|
32
|
+
}
|
|
33
|
+
isInteractiveTarget(ev) {
|
|
34
|
+
const interactiveSelector = 'a, button, input, select, textarea, [role="button"], [role="link"]';
|
|
35
|
+
const currentTarget = ev.currentTarget instanceof HTMLElement ? ev.currentTarget : null;
|
|
36
|
+
return ev
|
|
37
|
+
.composedPath()
|
|
38
|
+
.some(target => {
|
|
39
|
+
if (!(target instanceof HTMLElement)) {
|
|
40
|
+
return false;
|
|
41
|
+
}
|
|
42
|
+
const interactiveElement = target.closest(interactiveSelector);
|
|
43
|
+
return interactiveElement !== null && interactiveElement !== currentTarget;
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
triggerLinkAction() {
|
|
47
|
+
if (!this.linkElement) {
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
this.linkElement.focus({ preventScroll: true });
|
|
51
|
+
this.linkElement.click();
|
|
52
|
+
}
|
|
53
|
+
onBlockClick(ev) {
|
|
54
|
+
if (!this.shouldEnableBlockInteraction()) {
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
if (this.hasLink() && !this.isInteractiveTarget(ev)) {
|
|
58
|
+
this.triggerLinkAction();
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
if (this.enableCardEvent && !this.hasLink()) {
|
|
62
|
+
this.handleClickAction(ev);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
onBlockKeyDown(ev) {
|
|
66
|
+
if (!this.shouldEnableBlockInteraction()) {
|
|
67
|
+
return;
|
|
68
|
+
}
|
|
69
|
+
if (ev.key !== 'Enter' && ev.key !== ' ') {
|
|
70
|
+
return;
|
|
71
|
+
}
|
|
72
|
+
ev.preventDefault();
|
|
73
|
+
if (this.hasLink()) {
|
|
74
|
+
this.triggerLinkAction();
|
|
75
|
+
return;
|
|
76
|
+
}
|
|
77
|
+
if (this.enableCardEvent) {
|
|
78
|
+
this.handleClickAction(ev);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
27
81
|
handleClickAction(ev) {
|
|
28
82
|
if (this.suppressRedirect) {
|
|
29
83
|
ev.preventDefault();
|
|
@@ -32,13 +86,17 @@ const ColourBlockComponent = class {
|
|
|
32
86
|
this.colourBlockLinkClicked.emit();
|
|
33
87
|
}
|
|
34
88
|
render() {
|
|
35
|
-
return (index.h("div", { key: '
|
|
89
|
+
return (index.h("div", { key: 'd74e20942d145c5f373a7c38f57f6cf5c2de47f9', class: {
|
|
36
90
|
colourBlock: true,
|
|
37
91
|
[this.colour]: true,
|
|
38
|
-
|
|
92
|
+
'is-interactive': this.shouldEnableBlockInteraction(),
|
|
93
|
+
}, style: {
|
|
94
|
+
height: this.height ? `${this.height}px` : undefined,
|
|
95
|
+
width: this.width ? `${this.width}px` : undefined,
|
|
96
|
+
}, role: this.shouldEnableBlockInteraction() ? (this.hasLink() ? 'link' : 'button') : undefined, tabIndex: this.shouldEnableBlockInteraction() ? 0 : undefined, "aria-label": this.shouldEnableBlockInteraction() ? this.linkText || this.heading : undefined, onClick: ev => this.onBlockClick(ev), onKeyDown: ev => this.onBlockKeyDown(ev) }, index.h("h2", { key: '8e9cacf2274d21964a224e0b6bdc116d3ee4d693' }, this.heading), index.h("div", { key: '26dba2f0ed918a62ccdb6e1ecd8cd0657e80c1c1', class: {
|
|
39
97
|
'content': true,
|
|
40
98
|
'white-text': this.colour === 'admiralty-blue' || this.colour === 'teal',
|
|
41
|
-
} }, index.h("slot", { key: '
|
|
99
|
+
} }, index.h("slot", { key: '79730a7fcc58333ea183e4a8e4071e3dfc343fd6' })), this.actionText ? (index.h("admiralty-button", { variant: "text", class: "clickAction", onClick: ev => this.handleClickAction(ev) }, index.h("span", null, this.actionText))) : null, this.linkText && this.href ? (index.h("a", { class: "clickAction", href: this.href, onClick: ev => this.handleClickAction(ev), ref: el => (this.linkElement = el) }, index.h("span", null, this.linkText))) : null));
|
|
42
100
|
}
|
|
43
101
|
};
|
|
44
102
|
ColourBlockComponent.style = colourBlockCss();
|
|
@@ -75,6 +75,19 @@
|
|
|
75
75
|
flex-direction: column;
|
|
76
76
|
box-sizing: border-box;
|
|
77
77
|
}
|
|
78
|
+
.colourBlock.is-interactive {
|
|
79
|
+
cursor: pointer;
|
|
80
|
+
}
|
|
81
|
+
.colourBlock.is-interactive:hover {
|
|
82
|
+
filter: brightness(0.95);
|
|
83
|
+
}
|
|
84
|
+
.colourBlock.is-interactive:active {
|
|
85
|
+
filter: brightness(0.9);
|
|
86
|
+
}
|
|
87
|
+
.colourBlock.is-interactive:focus-visible {
|
|
88
|
+
outline: 3px solid var(--admiralty-focus-colour);
|
|
89
|
+
outline-offset: 2px;
|
|
90
|
+
}
|
|
78
91
|
.colourBlock .content {
|
|
79
92
|
flex-grow: 1;
|
|
80
93
|
}
|
|
@@ -17,6 +17,60 @@ export class ColourBlockComponent {
|
|
|
17
17
|
*/
|
|
18
18
|
this.enableCardEvent = false;
|
|
19
19
|
}
|
|
20
|
+
hasLink() {
|
|
21
|
+
return Boolean(this.linkText && this.href);
|
|
22
|
+
}
|
|
23
|
+
shouldEnableBlockInteraction() {
|
|
24
|
+
return this.enableCardEvent || this.hasLink();
|
|
25
|
+
}
|
|
26
|
+
isInteractiveTarget(ev) {
|
|
27
|
+
const interactiveSelector = 'a, button, input, select, textarea, [role="button"], [role="link"]';
|
|
28
|
+
const currentTarget = ev.currentTarget instanceof HTMLElement ? ev.currentTarget : null;
|
|
29
|
+
return ev
|
|
30
|
+
.composedPath()
|
|
31
|
+
.some(target => {
|
|
32
|
+
if (!(target instanceof HTMLElement)) {
|
|
33
|
+
return false;
|
|
34
|
+
}
|
|
35
|
+
const interactiveElement = target.closest(interactiveSelector);
|
|
36
|
+
return interactiveElement !== null && interactiveElement !== currentTarget;
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
triggerLinkAction() {
|
|
40
|
+
if (!this.linkElement) {
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
43
|
+
this.linkElement.focus({ preventScroll: true });
|
|
44
|
+
this.linkElement.click();
|
|
45
|
+
}
|
|
46
|
+
onBlockClick(ev) {
|
|
47
|
+
if (!this.shouldEnableBlockInteraction()) {
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
if (this.hasLink() && !this.isInteractiveTarget(ev)) {
|
|
51
|
+
this.triggerLinkAction();
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
if (this.enableCardEvent && !this.hasLink()) {
|
|
55
|
+
this.handleClickAction(ev);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
onBlockKeyDown(ev) {
|
|
59
|
+
if (!this.shouldEnableBlockInteraction()) {
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
if (ev.key !== 'Enter' && ev.key !== ' ') {
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
65
|
+
ev.preventDefault();
|
|
66
|
+
if (this.hasLink()) {
|
|
67
|
+
this.triggerLinkAction();
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
if (this.enableCardEvent) {
|
|
71
|
+
this.handleClickAction(ev);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
20
74
|
handleClickAction(ev) {
|
|
21
75
|
if (this.suppressRedirect) {
|
|
22
76
|
ev.preventDefault();
|
|
@@ -25,13 +79,17 @@ export class ColourBlockComponent {
|
|
|
25
79
|
this.colourBlockLinkClicked.emit();
|
|
26
80
|
}
|
|
27
81
|
render() {
|
|
28
|
-
return (h("div", { key: '
|
|
82
|
+
return (h("div", { key: 'd74e20942d145c5f373a7c38f57f6cf5c2de47f9', class: {
|
|
29
83
|
colourBlock: true,
|
|
30
84
|
[this.colour]: true,
|
|
31
|
-
|
|
85
|
+
'is-interactive': this.shouldEnableBlockInteraction(),
|
|
86
|
+
}, style: {
|
|
87
|
+
height: this.height ? `${this.height}px` : undefined,
|
|
88
|
+
width: this.width ? `${this.width}px` : undefined,
|
|
89
|
+
}, role: this.shouldEnableBlockInteraction() ? (this.hasLink() ? 'link' : 'button') : undefined, tabIndex: this.shouldEnableBlockInteraction() ? 0 : undefined, "aria-label": this.shouldEnableBlockInteraction() ? this.linkText || this.heading : undefined, onClick: ev => this.onBlockClick(ev), onKeyDown: ev => this.onBlockKeyDown(ev) }, h("h2", { key: '8e9cacf2274d21964a224e0b6bdc116d3ee4d693' }, this.heading), h("div", { key: '26dba2f0ed918a62ccdb6e1ecd8cd0657e80c1c1', class: {
|
|
32
90
|
'content': true,
|
|
33
91
|
'white-text': this.colour === 'admiralty-blue' || this.colour === 'teal',
|
|
34
|
-
} }, h("slot", { key: '
|
|
92
|
+
} }, h("slot", { key: '79730a7fcc58333ea183e4a8e4071e3dfc343fd6' })), this.actionText ? (h("admiralty-button", { variant: "text", class: "clickAction", onClick: ev => this.handleClickAction(ev) }, h("span", null, this.actionText))) : null, this.linkText && this.href ? (h("a", { class: "clickAction", href: this.href, onClick: ev => this.handleClickAction(ev), ref: el => (this.linkElement = el) }, h("span", null, this.linkText))) : null));
|
|
35
93
|
}
|
|
36
94
|
static get is() { return "admiralty-colour-block"; }
|
|
37
95
|
static get encapsulation() { return "scoped"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as o,H as
|
|
1
|
+
import{p as o,H as t,c as l,h as c,t as i}from"./index.js";import{d as r}from"./p-Dj5MPG39.js";import{d as a}from"./p-Dqovb5mf.js";const e=o(class extends t{constructor(o){super(),!1!==o&&this.__registerHost(),this.colourBlockLinkClicked=l(this,"colourBlockLinkClicked"),this.colour="admiralty-blue",this.suppressRedirect=!1,this.enableCardEvent=!1}hasLink(){return!(!this.linkText||!this.href)}shouldEnableBlockInteraction(){return this.enableCardEvent||this.hasLink()}isInteractiveTarget(o){const l=o.currentTarget instanceof t?o.currentTarget:null;return o.composedPath().some((o=>{if(!(o instanceof t))return!1;const c=o.closest('a, button, input, select, textarea, [role="button"], [role="link"]');return null!==c&&c!==l}))}triggerLinkAction(){this.linkElement&&(this.linkElement.focus({preventScroll:!0}),this.linkElement.click())}onBlockClick(o){this.shouldEnableBlockInteraction()&&(!this.hasLink()||this.isInteractiveTarget(o)?this.enableCardEvent&&!this.hasLink()&&this.handleClickAction(o):this.triggerLinkAction())}onBlockKeyDown(o){this.shouldEnableBlockInteraction()&&("Enter"!==o.key&&" "!==o.key||(o.preventDefault(),this.hasLink()?this.triggerLinkAction():this.enableCardEvent&&this.handleClickAction(o)))}handleClickAction(o){this.suppressRedirect&&o.preventDefault(),o.stopPropagation(),this.colourBlockLinkClicked.emit()}render(){return c("div",{key:"d74e20942d145c5f373a7c38f57f6cf5c2de47f9",class:{colourBlock:!0,[this.colour]:!0,"is-interactive":this.shouldEnableBlockInteraction()},style:{height:this.height?this.height+"px":void 0,width:this.width?this.width+"px":void 0},role:this.shouldEnableBlockInteraction()?this.hasLink()?"link":"button":void 0,tabIndex:this.shouldEnableBlockInteraction()?0:void 0,"aria-label":this.shouldEnableBlockInteraction()?this.linkText||this.heading:void 0,onClick:o=>this.onBlockClick(o),onKeyDown:o=>this.onBlockKeyDown(o)},c("h2",{key:"8e9cacf2274d21964a224e0b6bdc116d3ee4d693"},this.heading),c("div",{key:"26dba2f0ed918a62ccdb6e1ecd8cd0657e80c1c1",class:{content:!0,"white-text":"admiralty-blue"===this.colour||"teal"===this.colour}},c("slot",{key:"79730a7fcc58333ea183e4a8e4071e3dfc343fd6"})),this.actionText?c("admiralty-button",{variant:"text",class:"clickAction",onClick:o=>this.handleClickAction(o)},c("span",null,this.actionText)):null,this.linkText&&this.href?c("a",{class:"clickAction",href:this.href,onClick:o=>this.handleClickAction(o),ref:o=>this.linkElement=o},c("span",null,this.linkText)):null)}static get style(){return".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.is-interactive.sc-admiralty-colour-block{cursor:pointer}.colourBlock.is-interactive.sc-admiralty-colour-block:hover{filter:brightness(0.95)}.colourBlock.is-interactive.sc-admiralty-colour-block:active{filter:brightness(0.9)}.colourBlock.is-interactive.sc-admiralty-colour-block:focus-visible{outline:3px solid var(--admiralty-focus-colour);outline-offset:2px}.colourBlock.sc-admiralty-colour-block .content.sc-admiralty-colour-block{flex-grow:1}.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block{align-self:flex-end;cursor:pointer}.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block:focus *.sc-admiralty-colour-block{color:var(--admiralty-focus-contrast) !important}.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block span.sc-admiralty-colour-block{font-weight:var(--admiralty-colour-block-action-font-weight, var(--admiralty-font-weight-medium));font-size:var(--admiralty-colour-block-action-font-size, var(--admiralty-font-size-1));line-height:30px}@media (max-width: 1023px){.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block span.sc-admiralty-colour-block{font-size:var(--admiralty-colour-block-action-not-desktop-font-size, var(--admiralty-font-size-0));line-height:30px}}.colourBlock.admiralty-blue.sc-admiralty-colour-block{background-color:var(--colour-block-blue-background-colour)}.colourBlock.admiralty-blue.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--colour-block-blue-text-colour)}.colourBlock.teal.sc-admiralty-colour-block{background-color:var(--admiralty-colour-secondary)}.colourBlock.teal.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--admiralty-colour-secondary-contrast)}.colourBlock.bright-blue.sc-admiralty-colour-block{background-color:var(--admiralty-colour-tertiary)}.colourBlock.bright-blue.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--colour-block-bright-blue-text-colour)}.colourBlock.bright-blue.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--colour-block-bright-blue-text-colour)}"}},[262,"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"]}]),s=e,n=function(){"undefined"!=typeof customElements&&["admiralty-colour-block","admiralty-button","admiralty-icon"].forEach((o=>{switch(o){case"admiralty-colour-block":customElements.get(i(o))||customElements.define(i(o),e);break;case"admiralty-button":customElements.get(i(o))||r();break;case"admiralty-icon":customElements.get(i(o))||a()}}))};export{s as AdmiraltyColourBlock,n as defineCustomElement}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h } from './index-uO9JpdnI.js';
|
|
2
2
|
|
|
3
|
-
const colourBlockCss = () => `.visually-hidden.sc-admiralty-colour-block:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-colour-block{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-colour-block{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-colour-block{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-colour-block{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-colour-block{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-colour-block{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-colour-block{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-colour-block{display:none}}.colourBlock.sc-admiralty-colour-block{height:100%;width:100%;max-width:100%;padding:var(--admiralty-colour-block-padding, 30px 18px);display:flex;flex-direction:column;box-sizing:border-box}.colourBlock.sc-admiralty-colour-block .content.sc-admiralty-colour-block{flex-grow:1}.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block{align-self:flex-end;cursor:pointer}.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block:focus *.sc-admiralty-colour-block{color:var(--admiralty-focus-contrast) !important}.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block span.sc-admiralty-colour-block{font-weight:var(--admiralty-colour-block-action-font-weight, var(--admiralty-font-weight-medium));font-size:var(--admiralty-colour-block-action-font-size, var(--admiralty-font-size-1));line-height:30px}@media (max-width: 1023px){.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block span.sc-admiralty-colour-block{font-size:var(--admiralty-colour-block-action-not-desktop-font-size, var(--admiralty-font-size-0));line-height:30px}}.colourBlock.admiralty-blue.sc-admiralty-colour-block{background-color:var(--colour-block-blue-background-colour)}.colourBlock.admiralty-blue.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--colour-block-blue-text-colour)}.colourBlock.teal.sc-admiralty-colour-block{background-color:var(--admiralty-colour-secondary)}.colourBlock.teal.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--admiralty-colour-secondary-contrast)}.colourBlock.bright-blue.sc-admiralty-colour-block{background-color:var(--admiralty-colour-tertiary)}.colourBlock.bright-blue.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--colour-block-bright-blue-text-colour)}.colourBlock.bright-blue.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--colour-block-bright-blue-text-colour)}`;
|
|
3
|
+
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.is-interactive.sc-admiralty-colour-block{cursor:pointer}.colourBlock.is-interactive.sc-admiralty-colour-block:hover{filter:brightness(0.95)}.colourBlock.is-interactive.sc-admiralty-colour-block:active{filter:brightness(0.9)}.colourBlock.is-interactive.sc-admiralty-colour-block:focus-visible{outline:3px solid var(--admiralty-focus-colour);outline-offset:2px}.colourBlock.sc-admiralty-colour-block .content.sc-admiralty-colour-block{flex-grow:1}.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block{align-self:flex-end;cursor:pointer}.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block:focus *.sc-admiralty-colour-block{color:var(--admiralty-focus-contrast) !important}.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block span.sc-admiralty-colour-block{font-weight:var(--admiralty-colour-block-action-font-weight, var(--admiralty-font-weight-medium));font-size:var(--admiralty-colour-block-action-font-size, var(--admiralty-font-size-1));line-height:30px}@media (max-width: 1023px){.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block span.sc-admiralty-colour-block{font-size:var(--admiralty-colour-block-action-not-desktop-font-size, var(--admiralty-font-size-0));line-height:30px}}.colourBlock.admiralty-blue.sc-admiralty-colour-block{background-color:var(--colour-block-blue-background-colour)}.colourBlock.admiralty-blue.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--colour-block-blue-text-colour)}.colourBlock.teal.sc-admiralty-colour-block{background-color:var(--admiralty-colour-secondary)}.colourBlock.teal.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--admiralty-colour-secondary-contrast)}.colourBlock.bright-blue.sc-admiralty-colour-block{background-color:var(--admiralty-colour-tertiary)}.colourBlock.bright-blue.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--colour-block-bright-blue-text-colour)}.colourBlock.bright-blue.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--colour-block-bright-blue-text-colour)}`;
|
|
4
4
|
|
|
5
5
|
const ColourBlockComponent = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -22,6 +22,60 @@ const ColourBlockComponent = class {
|
|
|
22
22
|
*/
|
|
23
23
|
this.enableCardEvent = false;
|
|
24
24
|
}
|
|
25
|
+
hasLink() {
|
|
26
|
+
return Boolean(this.linkText && this.href);
|
|
27
|
+
}
|
|
28
|
+
shouldEnableBlockInteraction() {
|
|
29
|
+
return this.enableCardEvent || this.hasLink();
|
|
30
|
+
}
|
|
31
|
+
isInteractiveTarget(ev) {
|
|
32
|
+
const interactiveSelector = 'a, button, input, select, textarea, [role="button"], [role="link"]';
|
|
33
|
+
const currentTarget = ev.currentTarget instanceof HTMLElement ? ev.currentTarget : null;
|
|
34
|
+
return ev
|
|
35
|
+
.composedPath()
|
|
36
|
+
.some(target => {
|
|
37
|
+
if (!(target instanceof HTMLElement)) {
|
|
38
|
+
return false;
|
|
39
|
+
}
|
|
40
|
+
const interactiveElement = target.closest(interactiveSelector);
|
|
41
|
+
return interactiveElement !== null && interactiveElement !== currentTarget;
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
triggerLinkAction() {
|
|
45
|
+
if (!this.linkElement) {
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
this.linkElement.focus({ preventScroll: true });
|
|
49
|
+
this.linkElement.click();
|
|
50
|
+
}
|
|
51
|
+
onBlockClick(ev) {
|
|
52
|
+
if (!this.shouldEnableBlockInteraction()) {
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
if (this.hasLink() && !this.isInteractiveTarget(ev)) {
|
|
56
|
+
this.triggerLinkAction();
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
if (this.enableCardEvent && !this.hasLink()) {
|
|
60
|
+
this.handleClickAction(ev);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
onBlockKeyDown(ev) {
|
|
64
|
+
if (!this.shouldEnableBlockInteraction()) {
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
67
|
+
if (ev.key !== 'Enter' && ev.key !== ' ') {
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
ev.preventDefault();
|
|
71
|
+
if (this.hasLink()) {
|
|
72
|
+
this.triggerLinkAction();
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
75
|
+
if (this.enableCardEvent) {
|
|
76
|
+
this.handleClickAction(ev);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
25
79
|
handleClickAction(ev) {
|
|
26
80
|
if (this.suppressRedirect) {
|
|
27
81
|
ev.preventDefault();
|
|
@@ -30,13 +84,17 @@ const ColourBlockComponent = class {
|
|
|
30
84
|
this.colourBlockLinkClicked.emit();
|
|
31
85
|
}
|
|
32
86
|
render() {
|
|
33
|
-
return (h("div", { key: '
|
|
87
|
+
return (h("div", { key: 'd74e20942d145c5f373a7c38f57f6cf5c2de47f9', class: {
|
|
34
88
|
colourBlock: true,
|
|
35
89
|
[this.colour]: true,
|
|
36
|
-
|
|
90
|
+
'is-interactive': this.shouldEnableBlockInteraction(),
|
|
91
|
+
}, style: {
|
|
92
|
+
height: this.height ? `${this.height}px` : undefined,
|
|
93
|
+
width: this.width ? `${this.width}px` : undefined,
|
|
94
|
+
}, role: this.shouldEnableBlockInteraction() ? (this.hasLink() ? 'link' : 'button') : undefined, tabIndex: this.shouldEnableBlockInteraction() ? 0 : undefined, "aria-label": this.shouldEnableBlockInteraction() ? this.linkText || this.heading : undefined, onClick: ev => this.onBlockClick(ev), onKeyDown: ev => this.onBlockKeyDown(ev) }, h("h2", { key: '8e9cacf2274d21964a224e0b6bdc116d3ee4d693' }, this.heading), h("div", { key: '26dba2f0ed918a62ccdb6e1ecd8cd0657e80c1c1', class: {
|
|
37
95
|
'content': true,
|
|
38
96
|
'white-text': this.colour === 'admiralty-blue' || this.colour === 'teal',
|
|
39
|
-
} }, h("slot", { key: '
|
|
97
|
+
} }, h("slot", { key: '79730a7fcc58333ea183e4a8e4071e3dfc343fd6' })), this.actionText ? (h("admiralty-button", { variant: "text", class: "clickAction", onClick: ev => this.handleClickAction(ev) }, h("span", null, this.actionText))) : null, this.linkText && this.href ? (h("a", { class: "clickAction", href: this.href, onClick: ev => this.handleClickAction(ev), ref: el => (this.linkElement = el) }, h("span", null, this.linkText))) : null));
|
|
40
98
|
}
|
|
41
99
|
};
|
|
42
100
|
ColourBlockComponent.style = colourBlockCss();
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { EventEmitter } from '../../stencil-public-runtime';
|
|
2
2
|
export declare class ColourBlockComponent {
|
|
3
|
+
private linkElement?;
|
|
3
4
|
/**
|
|
4
5
|
* The width in pixels of the component.
|
|
5
6
|
*/
|
|
@@ -39,6 +40,12 @@ export declare class ColourBlockComponent {
|
|
|
39
40
|
* An event emitted when this Colour Block link is clicked
|
|
40
41
|
*/
|
|
41
42
|
colourBlockLinkClicked: EventEmitter<string>;
|
|
43
|
+
private hasLink;
|
|
44
|
+
private shouldEnableBlockInteraction;
|
|
45
|
+
private isInteractiveTarget;
|
|
46
|
+
private triggerLinkAction;
|
|
47
|
+
private onBlockClick;
|
|
48
|
+
private onBlockKeyDown;
|
|
42
49
|
handleClickAction(ev: MouseEvent): void;
|
|
43
50
|
/**
|
|
44
51
|
* The text to display on the action button
|
package/docs/docs.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ukho/admiralty-core",
|
|
3
|
-
"version": "5.6.
|
|
3
|
+
"version": "5.6.2--canary.668b010.0",
|
|
4
4
|
"description": "Stencil Component Starter",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
"license": "MIT",
|
|
71
71
|
"url": "https://github.com/UKHO/admiralty-design-system",
|
|
72
72
|
"repository": "git://github.com/UKHO/admiralty-design-system.git",
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "668b01060fc69737b43bc4e2d384b83257b91774"
|
|
74
74
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as o,c as l,h as c}from"./p-uO9JpdnI.js";const t=class{constructor(c){o(this,c),this.colourBlockLinkClicked=l(this,"colourBlockLinkClicked"),this.colour="admiralty-blue",this.suppressRedirect=!1,this.enableCardEvent=!1}handleClickAction(o){this.suppressRedirect&&o.preventDefault(),o.stopPropagation(),this.colourBlockLinkClicked.emit()}render(){return c("div",{key:"857dcc424426284c99c9d6155a283afae38dcee1",class:{colourBlock:!0,[this.colour]:!0},style:Object.assign({height:this.height?`${this.height}px`:null,width:this.width?`${this.width}px`:null},this.enableCardEvent&&{cursor:"pointer"}),onClick:o=>this.enableCardEvent?this.handleClickAction(o):null},c("h2",{key:"0b807457d07d0b3e786264a5bd0e19e626619374"},this.heading),c("div",{key:"195c0e707ad9e25535f42c97799c30686eb7f182",class:{content:!0,"white-text":"admiralty-blue"===this.colour||"teal"===this.colour}},c("slot",{key:"9eda66d196515d3eab3a8f0c9241ed277870fd4d"})),this.actionText?c("admiralty-button",{variant:"text",class:"clickAction",onClick:o=>this.handleClickAction(o)},c("span",null,this.actionText)):null,this.linkText&&this.href?c("a",{class:"clickAction",href:this.href,onClick:o=>this.handleClickAction(o)},c("span",null,this.linkText)):null)}};t.style=".visually-hidden.sc-admiralty-colour-block:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-colour-block{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-colour-block{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-colour-block{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-colour-block{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-colour-block{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-colour-block{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-colour-block{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-colour-block{display:none}}.colourBlock.sc-admiralty-colour-block{height:100%;width:100%;max-width:100%;padding:var(--admiralty-colour-block-padding, 30px 18px);display:flex;flex-direction:column;box-sizing:border-box}.colourBlock.sc-admiralty-colour-block .content.sc-admiralty-colour-block{flex-grow:1}.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block{align-self:flex-end;cursor:pointer}.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block:focus *.sc-admiralty-colour-block{color:var(--admiralty-focus-contrast) !important}.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block span.sc-admiralty-colour-block{font-weight:var(--admiralty-colour-block-action-font-weight, var(--admiralty-font-weight-medium));font-size:var(--admiralty-colour-block-action-font-size, var(--admiralty-font-size-1));line-height:30px}@media (max-width: 1023px){.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block span.sc-admiralty-colour-block{font-size:var(--admiralty-colour-block-action-not-desktop-font-size, var(--admiralty-font-size-0));line-height:30px}}.colourBlock.admiralty-blue.sc-admiralty-colour-block{background-color:var(--colour-block-blue-background-colour)}.colourBlock.admiralty-blue.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--colour-block-blue-text-colour)}.colourBlock.teal.sc-admiralty-colour-block{background-color:var(--admiralty-colour-secondary)}.colourBlock.teal.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--admiralty-colour-secondary-contrast)}.colourBlock.bright-blue.sc-admiralty-colour-block{background-color:var(--admiralty-colour-tertiary)}.colourBlock.bright-blue.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--colour-block-bright-blue-text-colour)}.colourBlock.bright-blue.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--colour-block-bright-blue-text-colour)}";export{t as admiralty_colour_block}
|