@duetds/components 8.6.1 → 8.6.2
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/hydrate/index.js +26 -10
- package/lib/cjs/duet-banner.cjs.entry.js +10 -7
- package/lib/cjs/duet-caption_4.cjs.entry.js +5 -2
- package/lib/cjs/duet.cjs.js +1 -1
- package/lib/cjs/loader.cjs.js +1 -1
- package/lib/collection/components/duet-banner/duet-banner.css +113 -133
- package/lib/collection/components/duet-banner/duet-banner.js +9 -6
- package/lib/collection/components/duet-link/duet-link.css +3 -0
- package/lib/collection/components/duet-link/duet-link.js +39 -1
- package/lib/collection/components/duet-upload-aria-status/duet-upload-aria-status.js +4 -0
- package/lib/collection/components/duet-upload-item/duet-upload-item.js +4 -0
- package/lib/dist-custom-elements/duet-banner.js +10 -7
- package/lib/dist-custom-elements/duet-contact-card.js +1 -1
- package/lib/dist-custom-elements/duet-link.js +1 -1
- package/lib/dist-custom-elements/duet-upload-item.js +1 -1
- package/lib/dist-custom-elements/duet-upload.js +2 -2
- package/lib/dist-custom-elements/{p-68ba7bf1.js → p-2f410810.js} +7 -2
- package/lib/dist-custom-elements/{p-cb694530.js → p-e10f446d.js} +1 -1
- package/lib/duet/duet.esm.js +1 -1
- package/lib/duet/{p-c9370d43.system.entry.js → p-0fc721ab.system.entry.js} +1 -1
- package/lib/duet/p-5c8e3667.entry.js +4 -0
- package/lib/duet/p-6151635f.system.js +1 -1
- package/lib/duet/p-69e67b58.entry.js +4 -0
- package/lib/duet/p-723e165b.system.entry.js +4 -0
- package/lib/esm/duet-banner.entry.js +10 -7
- package/lib/esm/duet-caption_4.entry.js +5 -2
- package/lib/esm/duet.js +1 -1
- package/lib/esm/loader.js +1 -1
- package/lib/esm-es5/duet-banner.entry.js +1 -1
- package/lib/esm-es5/duet-caption_4.entry.js +1 -1
- package/lib/esm-es5/duet.js +1 -1
- package/lib/esm-es5/loader.js +1 -1
- package/lib/types/components/duet-banner/duet-banner.d.ts +1 -1
- package/lib/types/components/duet-link/duet-link.d.ts +11 -0
- package/lib/types/components/duet-upload-aria-status/duet-upload-aria-status.d.ts +4 -0
- package/lib/types/components/duet-upload-item/duet-upload-item.d.ts +4 -0
- package/lib/types/components.d.ts +16 -0
- package/package.json +2 -2
- package/lib/duet/p-29491f9f.entry.js +0 -4
- package/lib/duet/p-36f031e7.entry.js +0 -4
- package/lib/duet/p-b2fc4b72.system.entry.js +0 -4
package/hydrate/index.js
CHANGED
|
@@ -8776,7 +8776,7 @@ const DuetPicture = ({ img, sources }) => {
|
|
|
8776
8776
|
hAsync("img", Object.assign({}, img))));
|
|
8777
8777
|
};
|
|
8778
8778
|
|
|
8779
|
-
const duetBannerCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-banner
|
|
8779
|
+
const duetBannerCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-banner, *.sc-duet-banner::after, *.sc-duet-banner::before {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n background: transparent;\n border: 0;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n}\n\n/*!@:host*/.sc-duet-banner-h {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n background: transparent;\n border: 0;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n margin-right: 36px !important;\n margin-bottom: 36px !important;\n display: flex;\n justify-content: center;\n width: auto;\n container: duet-banner-container;\n container-type: inline-size;\n}\n/*!@:host:last-child, :host:last-of-type*/.sc-duet-banner-h:last-child, .sc-duet-banner-h:last-of-type {\n margin-right: 0 !important;\n}\n\n/*!@:host(.duet-m-0)*/.duet-m-0.sc-duet-banner-h {\n margin: 0 !important;\n}\n\n/*!@.duet-banner*/.duet-banner.sc-duet-banner {\n display: grid;\n grid-template-rows: min-content 1fr;\n width: 100%;\n height: 100%;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-style: normal;\n text-align: left;\n border-radius: 16px;\n \n \n \n}\n/*!@.duet-banner.duet-p-0*/.duet-banner.duet-p-0.sc-duet-banner {\n padding: 0 !important;\n}\n/*!@.duet-banner.duet-m-0*/.duet-banner.duet-m-0.sc-duet-banner {\n margin: 0 !important;\n}\n/*!@.duet-banner .visual*/.duet-banner.sc-duet-banner .visual.sc-duet-banner {\n position: relative;\n display: none;\n overflow: hidden;\n \n}\n@container duet-banner-container (min-width: 0px) {\n .duet-banner .visual {\n \n display: block;\n }\n}\n/*!@.duet-banner .visual .image-container*/.duet-banner.sc-duet-banner .visual.sc-duet-banner .image-container.sc-duet-banner {\n position: relative;\n aspect-ratio: 2/1;\n overflow: hidden;\n}\n/*!@.duet-banner .visual .image*/.duet-banner.sc-duet-banner .visual.sc-duet-banner .image.sc-duet-banner {\n position: relative;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n}\n/*!@.duet-banner .visual .icon*/.duet-banner.sc-duet-banner .visual.sc-duet-banner .icon.sc-duet-banner {\n position: absolute;\n}\n/*!@.duet-banner .visual .brand-shape*/.duet-banner.sc-duet-banner .visual.sc-duet-banner .brand-shape.sc-duet-banner {\n position: absolute;\n top: 0;\n left: 72%;\n display: none;\n width: 100%;\n height: 100%;\n background: url(\"data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20344%22%20fill%3D%22none%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M2.72641e-07%2091.1902C0.000476976%2097.9034%200.626077%20104.726%201.92282%20111.592L42.7493%20327.771C43.8045%20333.358%2045.2667%20338.776%2047.0996%20344H160V0H51.1439C19.7799%2019.1253%200.00268143%2053.4178%202.72641e-07%2091.1749C-9.08807e-08%2091.18%20-9.08875e-08%2091.1851%202.72641e-07%2091.1902Z%22%20fill%3D%22%23E6F2F8%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E\");\n}\n/*!@.duet-banner .content*/.duet-banner.sc-duet-banner .content.sc-duet-banner {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 16px 20px 28px;\n}\n/*!@.duet-banner .content .description*/.duet-banner.sc-duet-banner .content.sc-duet-banner .description.sc-duet-banner {\n hyphens: auto;\n}\n/*!@.duet-banner .action*/.duet-banner.sc-duet-banner .action.sc-duet-banner {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n align-items: flex-start;\n justify-content: flex-end;\n padding-top: 16px;\n}\n/*!@.duet-banner .visual*/.duet-banner.sc-duet-banner .visual.sc-duet-banner {\n border-top-left-radius: 16px;\n border-top-right-radius: 16px;\n}\n/*!@.duet-banner .visual .image-container*/.duet-banner.sc-duet-banner .visual.sc-duet-banner .image-container.sc-duet-banner {\n width: 100%;\n height: auto;\n border-radius: 0;\n}\n/*!@.duet-banner .visual .icon*/.duet-banner.sc-duet-banner .visual.sc-duet-banner .icon.sc-duet-banner {\n bottom: 30px;\n left: 15px;\n}\n/*!@.duet-banner.duet-theme-turva*/.duet-banner.duet-theme-turva.sc-duet-banner {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n/*!@.duet-banner.duet-theme-turva .visual .brand-shape*/.duet-banner.duet-theme-turva.sc-duet-banner .visual.sc-duet-banner .brand-shape.sc-duet-banner {\n background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 160 344' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_7920_3801)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.58983 142.533C0.751086 155.147 0.0746585 167.857 0.00796847 179.225C0.00263853 179.814 0 180.409 0 181.007C0 194.845 1.41172 210.806 3.58065 223.171C5.6528 234.934 8.58716 246.495 12.5981 257.779C21.2249 282.059 34.0151 304.109 50.8401 323.977C56.7824 330.993 63.0921 337.68 69.8162 344H160V0H65.0733C52.1771 10.7866 41.4339 23.4177 32.7528 37.7978C21.1154 57.0822 14.0367 77.9583 9.75424 99.7913C9.09214 103.157 8.55049 106.545 8.00901 109.933C7.75185 111.542 7.49474 113.15 7.22478 114.756C6.74308 117.618 6.24543 120.479 5.74776 123.34C4.6361 129.729 3.52432 136.12 2.58983 142.533Z' fill='%23F5F5F7'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_7920_3801'%3E%3Crect width='160' height='344' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A\");\n}\n@container duet-banner-container (min-width: 486px) {\n .duet-banner {\n \n grid-template-rows: none;\n grid-template-columns: 50% 50%;\n }\n .duet-banner .visual {\n border-top-left-radius: 16px;\n border-top-right-radius: 0;\n border-bottom-left-radius: 16px;\n }\n .duet-banner .visual .image-container {\n height: 100%;\n }\n .duet-banner .visual .image {\n width: 100%;\n height: 100%;\n }\n .duet-banner .visual .icon {\n top: 36px;\n left: 168px;\n }\n .duet-banner .visual .brand-shape {\n display: block;\n }\n .duet-banner .content {\n align-items: flex-start;\n justify-content: center;\n padding: 28px 28px 28px 0;\n }\n .duet-banner .action {\n flex-grow: 0;\n }\n}\n@container duet-banner-container (min-width: 586px) {\n .duet-banner {\n \n }\n .duet-banner .visual .brand-shape {\n left: 80%;\n }\n}\n@container duet-banner-container (min-width: 900px) {\n .duet-banner {\n \n grid-template-rows: none;\n grid-template-columns: 50% 50%;\n }\n .duet-banner .visual {\n border-top-left-radius: 16px;\n border-bottom-left-radius: 16px;\n }\n .duet-banner .visual .image-container {\n height: 100%;\n }\n .duet-banner .visual .image {\n width: 100%;\n height: 100%;\n }\n .duet-banner .visual .icon {\n top: 40px;\n bottom: auto;\n left: 335px;\n }\n .duet-banner .visual .brand-shape {\n display: block;\n }\n .duet-banner .content {\n align-items: flex-start;\n justify-content: center;\n padding: 48px 48px 48px 0;\n }\n .duet-banner .action {\n flex-grow: 0;\n }\n}";
|
|
8780
8780
|
|
|
8781
8781
|
/**
|
|
8782
8782
|
* @slot heading - Slot for heading content. Only span should be used in this slot.
|
|
@@ -8786,7 +8786,7 @@ const duetBannerCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-banner,*.sc-duet-
|
|
|
8786
8786
|
class DuetBanner {
|
|
8787
8787
|
constructor(hostRef) {
|
|
8788
8788
|
registerInstance(this, hostRef);
|
|
8789
|
-
this.
|
|
8789
|
+
this.checkCurrentSize = () => {
|
|
8790
8790
|
const elementSize = this.element.clientWidth;
|
|
8791
8791
|
if (elementSize < 500 || this.size === "small") {
|
|
8792
8792
|
this.currentSize = "small";
|
|
@@ -8803,12 +8803,15 @@ class DuetBanner {
|
|
|
8803
8803
|
* Default to smaller button size for small and medium banners.
|
|
8804
8804
|
*/
|
|
8805
8805
|
this.setButtonSize = () => {
|
|
8806
|
-
if (this.hasActionSlot) {
|
|
8806
|
+
if (this.hasActionSlot && this.currentSize) {
|
|
8807
8807
|
const buttons = this.element.querySelectorAll("[slot='action'] duet-button, duet-button[slot='action']");
|
|
8808
8808
|
for (const button of buttons) {
|
|
8809
8809
|
if (button && button.getAttribute("size") === null && this.currentSize !== "large") {
|
|
8810
8810
|
button.size = "small";
|
|
8811
8811
|
}
|
|
8812
|
+
else if (button && button.getAttribute("size") === null && this.currentSize === "large") {
|
|
8813
|
+
button.size = "medium";
|
|
8814
|
+
}
|
|
8812
8815
|
}
|
|
8813
8816
|
}
|
|
8814
8817
|
};
|
|
@@ -8837,13 +8840,13 @@ class DuetBanner {
|
|
|
8837
8840
|
this.setButtonSize();
|
|
8838
8841
|
}
|
|
8839
8842
|
connectedCallback() {
|
|
8840
|
-
window.addEventListener("resize", this.
|
|
8843
|
+
window.addEventListener("resize", this.checkCurrentSize);
|
|
8841
8844
|
}
|
|
8842
8845
|
disconnectedCallback() {
|
|
8843
|
-
window.removeEventListener("resize", this.
|
|
8846
|
+
window.removeEventListener("resize", this.checkCurrentSize);
|
|
8844
8847
|
}
|
|
8845
8848
|
componentDidRender() {
|
|
8846
|
-
this.
|
|
8849
|
+
this.checkCurrentSize();
|
|
8847
8850
|
}
|
|
8848
8851
|
/**
|
|
8849
8852
|
* render() function
|
|
@@ -8864,7 +8867,7 @@ class DuetBanner {
|
|
|
8864
8867
|
"duet-banner": true,
|
|
8865
8868
|
"duet-theme-turva": this.theme === "turva",
|
|
8866
8869
|
[this.currentSize]: true,
|
|
8867
|
-
}, style: bannerStyles }, hAsync("div", { class: "visual" }, hAsync("div", { class: "image-container" }, this.image && hAsync(DuetPicture, Object.assign({}, pictureSource))),
|
|
8870
|
+
}, style: bannerStyles }, hAsync("div", { class: "visual" }, hAsync("div", { class: "image-container" }, this.image && hAsync(DuetPicture, Object.assign({}, pictureSource))), 1 > 2 , hAsync("div", { class: "brand-shape" })), hAsync("div", { class: "content" }, this.hasHeadingSlot && (hAsync("div", { class: "heading" }, hAsync("duet-heading", { theme: this.theme, level: this.headingLevel, "visual-level": this.currentSize === "large" ? "h2" : "h3", "fixed-size": true, margin: "none", color: this.textColor }, hAsync("span", null, hAsync("slot", { name: "heading" }))))), this.hasDescriptionSlot && (hAsync("div", { class: "description", style: { color } }, hAsync("slot", { name: "description" }))), this.hasActionSlot && (hAsync("div", { class: "action" }, hAsync("slot", { name: "action" })))))));
|
|
8868
8871
|
}
|
|
8869
8872
|
get element() { return getElement(this); }
|
|
8870
8873
|
static get style() { return duetBannerCss; }
|
|
@@ -14835,7 +14838,7 @@ class DuetLayout {
|
|
|
14835
14838
|
}; }
|
|
14836
14839
|
}
|
|
14837
14840
|
|
|
14838
|
-
const duetLinkCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-link,*.sc-duet-link::after,*.sc-duet-link::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-link-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:inline}/*!@:host(.duet-link-block)*/.duet-link-block.sc-duet-link-h{display:block}/*!@:host(.duet-link-button)*/.duet-link-button.sc-duet-link-h{margin-right:8px !important;margin-bottom:12px !important;display:inline-block;width:100%}/*!@:host(.duet-link-button):last-child, :host(.duet-link-button):last-of-type*/.duet-link-button.sc-duet-link-h:last-child,.duet-link-button.sc-duet-link-h:last-of-type{margin-right:0 !important}/*!@:host(.duet-m-0)*/.duet-m-0.sc-duet-link-h{margin:0 !important}/*!@.duet-link*/.duet-link.sc-duet-link{display:inline;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-style:normal;font-weight:400;color:rgb(0, 98, 154);text-decoration:underline;border-radius:4px;transition:300ms ease}/*!@.duet-link:focus*/.duet-link.sc-duet-link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}/*!@.duet-theme-turva .duet-link:focus, .duet-link:focus.duet-theme-turva*/.duet-theme-turva.sc-duet-link .duet-link.sc-duet-link:focus,.duet-link.sc-duet-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}/*!@.duet-link.duet-theme-turva*/.duet-link.duet-theme-turva.sc-duet-link{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(173, 11, 43)}/*!@.duet-link:hover*/.duet-link.sc-duet-link:hover{color:rgb(0, 77, 128);text-decoration:none}/*!@.duet-link:hover.duet-theme-turva*/.duet-link.sc-duet-link:hover.duet-theme-turva{color:rgb(148, 9, 37)}/*!@.duet-link:active*/.duet-link.sc-duet-link:active{opacity:0.75;transition:none}/*!@button*/button.sc-duet-link{font-size:inherit;cursor:pointer}/*!@.duet-link-is-external.duet-link:not(.block, .button),\n.duet-link-is-download.duet-link:not(.block, .button)*/.duet-link-is-external.duet-link.sc-duet-link:not(.block,.button).sc-duet-link,.duet-link-is-download.duet-link.sc-duet-link:not(.block,.button).sc-duet-link{text-decoration:none}/*!@.duet-link-is-external.duet-link:not(.block, .button) .duet-link-content,\n.duet-link-is-download.duet-link:not(.block, .button) .duet-link-content*/.duet-link-is-external.duet-link.sc-duet-link:not(.block,.button).sc-duet-link .duet-link-content.sc-duet-link,.duet-link-is-download.duet-link.sc-duet-link:not(.block,.button).sc-duet-link .duet-link-content.sc-duet-link{text-decoration:underline}/*!@.duet-link-is-external.duet-link:not(.block, .button):hover > .duet-link-content,\n.duet-link-is-download.duet-link:not(.block, .button):hover > .duet-link-content*/.duet-link-is-external.duet-link.sc-duet-link:not(.block,.button).sc-duet-link:hover>.duet-link-content.sc-duet-link,.duet-link-is-download.duet-link.sc-duet-link:not(.block,.button).sc-duet-link:hover>.duet-link-content.sc-duet-link{text-decoration:none}/*!@.duet-link-is-external.duet-link:not(.block, .button) .duet-link-icon-tail,\n.duet-link-is-download.duet-link:not(.block, .button) .duet-link-icon-tail*/.duet-link-is-external.duet-link.sc-duet-link:not(.block,.button).sc-duet-link .duet-link-icon-tail.sc-duet-link,.duet-link-is-download.duet-link.sc-duet-link:not(.block,.button).sc-duet-link .duet-link-icon-tail.sc-duet-link{text-decoration:none;white-space:nowrap}/*!@.duet-tab-to-link*/.duet-tab-to-link.sc-duet-link{padding:15px 28px 16px !important;position:absolute;top:-100%;left:-100%;z-index:200;width:1px;min-width:190px;height:1px;overflow:hidden;font-weight:600;color:rgb(0, 119, 179);text-align:center;text-decoration:none;background:rgb(255, 255, 255);border-radius:4px;opacity:0;transition:none}/*!@.duet-tab-to-link.duet-theme-turva*/.duet-tab-to-link.duet-theme-turva.sc-duet-link{min-width:120px;color:rgb(23, 28, 58)}@media (min-width: 106.25em){/*!@.duet-tab-to-link*/.duet-tab-to-link.sc-duet-link{margin-left:20px}}/*!@.duet-tab-to-link:focus*/.duet-tab-to-link.sc-duet-link:focus{top:12px;left:20px;width:auto;height:auto;outline:0;opacity:1}/*!@.block.duet-link*/.block.duet-link.sc-duet-link{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start;padding:16px;font-weight:600;color:rgb(0, 41, 77);text-decoration:none}/*!@.block.duet-link.duet-link-has-icon*/.block.duet-link.duet-link-has-icon.sc-duet-link{grid-template-columns:auto 1fr auto}/*!@.block.duet-link.none*/.block.duet-link.none.sc-duet-link{padding:0}/*!@.block .block__content*/.block.sc-duet-link .block__content.sc-duet-link{position:relative;bottom:2px}/*!@.block .block__chevron*/.block.sc-duet-link .block__chevron.sc-duet-link{align-self:center}/*!@.block .block__chevron-icon*/.block.sc-duet-link .block__chevron-icon.sc-duet-link{transition:300ms ease}/*!@.block:not(.duet-link-is-external):hover .block__chevron-icon*/.block.sc-duet-link:not(.duet-link-is-external):hover .block__chevron-icon.sc-duet-link{transform:translateX(4px)}/*!@.duet-link.button*/.duet-link.button.sc-duet-link{display:flex;gap:12px;align-items:center;width:100%;min-height:48px;padding:12px;padding-right:20px;text-decoration:none;background-color:rgb(255, 255, 255);border:solid 1px rgb(207, 210, 212);border-radius:12px;outline:0 solid rgb(207, 210, 212);outline-offset:-2px;transition:all 300ms ease}/*!@.duet-link.button > **/.duet-link.button.sc-duet-link>*.sc-duet-link{flex-shrink:0}/*!@.duet-link.button .duet-link-content*/.duet-link.button.sc-duet-link .duet-link-content.sc-duet-link{flex-grow:1;flex-shrink:1;font-size:1rem;font-weight:600;color:rgb(0, 41, 77);text-align:left}/*!@.duet-link.button .icon-wrap*/.duet-link.button.sc-duet-link .icon-wrap.sc-duet-link{display:flex;align-items:center;justify-content:center}/*!@.duet-link.button.duet-link-has-icon-background*/.duet-link.button.duet-link-has-icon-background.sc-duet-link{min-height:60px}/*!@.duet-link.button.duet-link-has-icon-background .icon-wrap*/.duet-link.button.duet-link-has-icon-background.sc-duet-link .icon-wrap.sc-duet-link{width:36px;height:36px;border-radius:8px}/*!@.duet-link.button:hover*/.duet-link.button.sc-duet-link:hover{border-color:rgb(0, 119, 179);outline:2px solid rgb(0, 119, 179)}@media (min-width: 48em){/*!@.duet-link.button*/.duet-link.button.sc-duet-link{gap:16px;min-height:60px;border-radius:16px}/*!@.duet-link.button.duet-link-has-icon-background*/.duet-link.button.duet-link-has-icon-background.sc-duet-link{min-height:72px}/*!@.duet-link.button.duet-link-has-icon-background .icon-wrap*/.duet-link.button.duet-link-has-icon-background.sc-duet-link .icon-wrap.sc-duet-link{width:48px;height:48px;border-radius:12px}/*!@.duet-link.button .duet-link-content*/.duet-link.button.sc-duet-link .duet-link-content.sc-duet-link{font-size:1.1rem}}/*!@.duet-link.button.duet-theme-turva*/.duet-link.button.duet-theme-turva.sc-duet-link{border-color:rgb(207, 207, 209)}/*!@.duet-link.button.duet-theme-turva .duet-link-content*/.duet-link.button.duet-theme-turva.sc-duet-link .duet-link-content.sc-duet-link{color:rgb(23, 28, 58)}/*!@.duet-link.button.duet-theme-turva:hover*/.duet-link.button.duet-theme-turva.sc-duet-link:hover{border-color:rgb(198, 12, 48);outline-color:rgb(198, 12, 48)}/*!@.duet-link.button:not(.duet-link-is-external):hover .block__chevron-icon*/.duet-link.button.sc-duet-link:not(.duet-link-is-external):hover .block__chevron-icon.sc-duet-link{transform:translateX(4px)}";
|
|
14841
|
+
const duetLinkCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-link,*.sc-duet-link::after,*.sc-duet-link::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-link-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:inline}/*!@:host(.duet-link-block)*/.duet-link-block.sc-duet-link-h{display:block}/*!@:host(.duet-link-button)*/.duet-link-button.sc-duet-link-h{margin-right:8px !important;margin-bottom:12px !important;display:inline-block;width:100%}/*!@:host(.duet-link-button):last-child, :host(.duet-link-button):last-of-type*/.duet-link-button.sc-duet-link-h:last-child,.duet-link-button.sc-duet-link-h:last-of-type{margin-right:0 !important}/*!@:host(.duet-m-0)*/.duet-m-0.sc-duet-link-h{margin:0 !important}/*!@.duet-link*/.duet-link.sc-duet-link{display:inline;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-style:normal;font-weight:400;color:rgb(0, 98, 154);text-decoration:underline;border-radius:4px;transition:300ms ease}/*!@.duet-link:focus*/.duet-link.sc-duet-link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}/*!@.duet-theme-turva .duet-link:focus, .duet-link:focus.duet-theme-turva*/.duet-theme-turva.sc-duet-link .duet-link.sc-duet-link:focus,.duet-link.sc-duet-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}/*!@.duet-link.duet-theme-turva*/.duet-link.duet-theme-turva.sc-duet-link{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(173, 11, 43)}/*!@.duet-link:hover*/.duet-link.sc-duet-link:hover{color:rgb(0, 77, 128);text-decoration:none}/*!@.duet-link:hover.duet-theme-turva*/.duet-link.sc-duet-link:hover.duet-theme-turva{color:rgb(148, 9, 37)}/*!@.duet-link:active*/.duet-link.sc-duet-link:active{opacity:0.75;transition:none}/*!@button*/button.sc-duet-link{font-size:inherit;cursor:pointer}/*!@.duet-link-is-external.duet-link:not(.block, .button),\n.duet-link-is-download.duet-link:not(.block, .button)*/.duet-link-is-external.duet-link.sc-duet-link:not(.block,.button).sc-duet-link,.duet-link-is-download.duet-link.sc-duet-link:not(.block,.button).sc-duet-link{text-decoration:none}/*!@.duet-link-is-external.duet-link:not(.block, .button) .duet-link-content,\n.duet-link-is-download.duet-link:not(.block, .button) .duet-link-content*/.duet-link-is-external.duet-link.sc-duet-link:not(.block,.button).sc-duet-link .duet-link-content.sc-duet-link,.duet-link-is-download.duet-link.sc-duet-link:not(.block,.button).sc-duet-link .duet-link-content.sc-duet-link{text-decoration:underline}/*!@.duet-link-is-external.duet-link:not(.block, .button):hover > .duet-link-content,\n.duet-link-is-download.duet-link:not(.block, .button):hover > .duet-link-content*/.duet-link-is-external.duet-link.sc-duet-link:not(.block,.button).sc-duet-link:hover>.duet-link-content.sc-duet-link,.duet-link-is-download.duet-link.sc-duet-link:not(.block,.button).sc-duet-link:hover>.duet-link-content.sc-duet-link{text-decoration:none}/*!@.duet-link-is-external.duet-link:not(.block, .button) .duet-link-icon-tail,\n.duet-link-is-download.duet-link:not(.block, .button) .duet-link-icon-tail*/.duet-link-is-external.duet-link.sc-duet-link:not(.block,.button).sc-duet-link .duet-link-icon-tail.sc-duet-link,.duet-link-is-download.duet-link.sc-duet-link:not(.block,.button).sc-duet-link .duet-link-icon-tail.sc-duet-link{text-decoration:none;white-space:nowrap}/*!@.duet-tab-to-link*/.duet-tab-to-link.sc-duet-link{padding:15px 28px 16px !important;position:absolute;top:-100%;left:-100%;z-index:200;width:1px;min-width:190px;height:1px;overflow:hidden;font-weight:600;color:rgb(0, 119, 179);text-align:center;text-decoration:none;background:rgb(255, 255, 255);border-radius:4px;opacity:0;transition:none}/*!@.duet-tab-to-link.duet-theme-turva*/.duet-tab-to-link.duet-theme-turva.sc-duet-link{min-width:120px;color:rgb(23, 28, 58)}@media (min-width: 106.25em){/*!@.duet-tab-to-link*/.duet-tab-to-link.sc-duet-link{margin-left:20px}}/*!@.duet-tab-to-link:focus*/.duet-tab-to-link.sc-duet-link:focus{top:12px;left:20px;width:auto;height:auto;outline:0;opacity:1}/*!@.block.duet-link*/.block.duet-link.sc-duet-link{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start;padding:16px;font-weight:600;color:rgb(0, 41, 77);text-decoration:none}/*!@.block.duet-link.duet-link-has-icon*/.block.duet-link.duet-link-has-icon.sc-duet-link{grid-template-columns:auto 1fr auto}/*!@.block.duet-link.none*/.block.duet-link.none.sc-duet-link{padding:0}/*!@.block .block__icon*/.block.sc-duet-link .block__icon.sc-duet-link{display:flex}/*!@.block .block__content*/.block.sc-duet-link .block__content.sc-duet-link{position:relative;bottom:2px}/*!@.block .block__chevron*/.block.sc-duet-link .block__chevron.sc-duet-link{align-self:center}/*!@.block .block__chevron-icon*/.block.sc-duet-link .block__chevron-icon.sc-duet-link{transition:300ms ease}/*!@.block:not(.duet-link-is-external):hover .block__chevron-icon*/.block.sc-duet-link:not(.duet-link-is-external):hover .block__chevron-icon.sc-duet-link{transform:translateX(4px)}/*!@.duet-link.button*/.duet-link.button.sc-duet-link{display:flex;gap:12px;align-items:center;width:100%;min-height:48px;padding:12px;padding-right:20px;text-decoration:none;background-color:rgb(255, 255, 255);border:solid 1px rgb(207, 210, 212);border-radius:12px;outline:0 solid rgb(207, 210, 212);outline-offset:-2px;transition:all 300ms ease}/*!@.duet-link.button > **/.duet-link.button.sc-duet-link>*.sc-duet-link{flex-shrink:0}/*!@.duet-link.button .duet-link-content*/.duet-link.button.sc-duet-link .duet-link-content.sc-duet-link{flex-grow:1;flex-shrink:1;font-size:1rem;font-weight:600;color:rgb(0, 41, 77);text-align:left}/*!@.duet-link.button .icon-wrap*/.duet-link.button.sc-duet-link .icon-wrap.sc-duet-link{display:flex;align-items:center;justify-content:center}/*!@.duet-link.button.duet-link-has-icon-background*/.duet-link.button.duet-link-has-icon-background.sc-duet-link{min-height:60px}/*!@.duet-link.button.duet-link-has-icon-background .icon-wrap*/.duet-link.button.duet-link-has-icon-background.sc-duet-link .icon-wrap.sc-duet-link{width:36px;height:36px;border-radius:8px}/*!@.duet-link.button:hover*/.duet-link.button.sc-duet-link:hover{border-color:rgb(0, 119, 179);outline:2px solid rgb(0, 119, 179)}@media (min-width: 48em){/*!@.duet-link.button*/.duet-link.button.sc-duet-link{gap:16px;min-height:60px;border-radius:16px}/*!@.duet-link.button.duet-link-has-icon-background*/.duet-link.button.duet-link-has-icon-background.sc-duet-link{min-height:72px}/*!@.duet-link.button.duet-link-has-icon-background .icon-wrap*/.duet-link.button.duet-link-has-icon-background.sc-duet-link .icon-wrap.sc-duet-link{width:48px;height:48px;border-radius:12px}/*!@.duet-link.button .duet-link-content*/.duet-link.button.sc-duet-link .duet-link-content.sc-duet-link{font-size:1.1rem}}/*!@.duet-link.button.duet-theme-turva*/.duet-link.button.duet-theme-turva.sc-duet-link{border-color:rgb(207, 207, 209)}/*!@.duet-link.button.duet-theme-turva .duet-link-content*/.duet-link.button.duet-theme-turva.sc-duet-link .duet-link-content.sc-duet-link{color:rgb(23, 28, 58)}/*!@.duet-link.button.duet-theme-turva:hover*/.duet-link.button.duet-theme-turva.sc-duet-link:hover{border-color:rgb(198, 12, 48);outline-color:rgb(198, 12, 48)}/*!@.duet-link.button:not(.duet-link-is-external):hover .block__chevron-icon*/.duet-link.button.sc-duet-link:not(.duet-link-is-external):hover .block__chevron-icon.sc-duet-link{transform:translateX(4px)}";
|
|
14839
14842
|
|
|
14840
14843
|
/**
|
|
14841
14844
|
* @part duet-link - piercing selector for styling the link
|
|
@@ -14852,6 +14855,8 @@ class DuetLink {
|
|
|
14852
14855
|
this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
|
|
14853
14856
|
this.accessibleLabelDownloadDefaults = DuetStringsDownloadLinkDefaults;
|
|
14854
14857
|
this.accessibleLabelDownload = getLocaleString(this.accessibleLabelDownloadDefaults);
|
|
14858
|
+
this.accessibleExpanded = undefined;
|
|
14859
|
+
this.accessiblePopup = "false";
|
|
14855
14860
|
this.identifier = undefined;
|
|
14856
14861
|
this.theme = "";
|
|
14857
14862
|
this.url = "#";
|
|
@@ -14957,6 +14962,7 @@ class DuetLink {
|
|
|
14957
14962
|
*/
|
|
14958
14963
|
render() {
|
|
14959
14964
|
const Tag = !this.url ? "button" : "a";
|
|
14965
|
+
const isButton = Tag === "button";
|
|
14960
14966
|
return (hAsync(Host, { class: {
|
|
14961
14967
|
[`duet-link-${this.variation}`]: true,
|
|
14962
14968
|
"duet-m-0": this.margin === "none",
|
|
@@ -14971,7 +14977,7 @@ class DuetLink {
|
|
|
14971
14977
|
"duet-p-0": this.padding === "none",
|
|
14972
14978
|
[this.padding]: true,
|
|
14973
14979
|
[this.variation]: true,
|
|
14974
|
-
}, target: this.download || !this.url ? null : this.external ? "_blank" : "_self", download: this.resolvedDownload, "aria-label": this.getAccessibleLabel(), id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined }, this.renderContent())));
|
|
14980
|
+
}, target: this.download || !this.url ? null : this.external ? "_blank" : "_self", download: this.resolvedDownload, "aria-label": this.getAccessibleLabel(), "aria-expanded": this.accessibleExpanded != null && isButton ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null && isButton ? this.accessiblePopup.toString() : undefined, id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined }, this.renderContent())));
|
|
14975
14981
|
}
|
|
14976
14982
|
static get delegatesFocus() { return true; }
|
|
14977
14983
|
get element() { return getElement(this); }
|
|
@@ -14987,6 +14993,8 @@ class DuetLink {
|
|
|
14987
14993
|
"accessibleLabelExternal": [1025, "accessible-label-external"],
|
|
14988
14994
|
"accessibleLabelDownloadDefaults": [1, "accessible-label-download-default"],
|
|
14989
14995
|
"accessibleLabelDownload": [1025, "accessible-label-download"],
|
|
14996
|
+
"accessibleExpanded": [1540, "accessible-expanded"],
|
|
14997
|
+
"accessiblePopup": [1537, "accessible-popup"],
|
|
14990
14998
|
"identifier": [1],
|
|
14991
14999
|
"theme": [1025],
|
|
14992
15000
|
"url": [1537],
|
|
@@ -15005,7 +15013,7 @@ class DuetLink {
|
|
|
15005
15013
|
},
|
|
15006
15014
|
"$listeners$": undefined,
|
|
15007
15015
|
"$lazyBundleId$": "-",
|
|
15008
|
-
"$attrsToReflect$": [["language", "language"], ["url", "url"]]
|
|
15016
|
+
"$attrsToReflect$": [["language", "language"], ["accessibleExpanded", "accessible-expanded"], ["accessiblePopup", "accessible-popup"], ["url", "url"]]
|
|
15009
15017
|
}; }
|
|
15010
15018
|
}
|
|
15011
15019
|
|
|
@@ -24684,6 +24692,10 @@ class DuetUpload {
|
|
|
24684
24692
|
}; }
|
|
24685
24693
|
}
|
|
24686
24694
|
|
|
24695
|
+
/**
|
|
24696
|
+
* @internal
|
|
24697
|
+
* This component is for internal use.
|
|
24698
|
+
*/
|
|
24687
24699
|
class DuetUploadAriaStatus {
|
|
24688
24700
|
constructor(hostRef) {
|
|
24689
24701
|
registerInstance(this, hostRef);
|
|
@@ -24845,6 +24857,10 @@ const formatBytes = (bytes, decimals = 2) => {
|
|
|
24845
24857
|
|
|
24846
24858
|
const duetUploadItemCss = ".file-link::part(duet-link){text-decoration:none}";
|
|
24847
24859
|
|
|
24860
|
+
/**
|
|
24861
|
+
* @internal
|
|
24862
|
+
* This component is for internal use.
|
|
24863
|
+
*/
|
|
24848
24864
|
class DuetUploadItem {
|
|
24849
24865
|
constructor(hostRef) {
|
|
24850
24866
|
registerInstance(this, hostRef);
|
|
@@ -19,12 +19,12 @@ const DuetPicture = ({ img, sources }) => {
|
|
|
19
19
|
index.h("img", Object.assign({}, img))));
|
|
20
20
|
};
|
|
21
21
|
|
|
22
|
-
const duetBannerCss = "
|
|
22
|
+
const duetBannerCss = "*,\n*::after,\n*::before {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n background: transparent;\n border: 0;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n}\n\n:host {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n background: transparent;\n border: 0;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n margin-right: 36px !important;\n margin-bottom: 36px !important;\n display: flex;\n justify-content: center;\n width: auto;\n container: duet-banner-container;\n container-type: inline-size;\n}\n:host:last-child, :host:last-of-type {\n margin-right: 0 !important;\n}\n\n:host(.duet-m-0) {\n margin: 0 !important;\n}\n\n.duet-banner {\n display: grid;\n grid-template-rows: min-content 1fr;\n width: 100%;\n height: 100%;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-style: normal;\n text-align: left;\n border-radius: 16px;\n /* stylelint-disable */\n /* stylelint-disable */\n /* stylelint-disable */\n}\n.duet-banner.duet-p-0 {\n padding: 0 !important;\n}\n.duet-banner.duet-m-0 {\n margin: 0 !important;\n}\n.duet-banner .visual {\n position: relative;\n display: none;\n overflow: hidden;\n /* stylelint-disable */\n}\n@container duet-banner-container (min-width: 0px) {\n .duet-banner .visual {\n /* stylelint-enable */\n display: block;\n }\n}\n.duet-banner .visual .image-container {\n position: relative;\n aspect-ratio: 2/1;\n overflow: hidden;\n}\n.duet-banner .visual .image {\n position: relative;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n}\n.duet-banner .visual .icon {\n position: absolute;\n}\n.duet-banner .visual .brand-shape {\n position: absolute;\n top: 0;\n left: 72%;\n display: none;\n width: 100%;\n height: 100%;\n background: url(\"data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20344%22%20fill%3D%22none%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M2.72641e-07%2091.1902C0.000476976%2097.9034%200.626077%20104.726%201.92282%20111.592L42.7493%20327.771C43.8045%20333.358%2045.2667%20338.776%2047.0996%20344H160V0H51.1439C19.7799%2019.1253%200.00268143%2053.4178%202.72641e-07%2091.1749C-9.08807e-08%2091.18%20-9.08875e-08%2091.1851%202.72641e-07%2091.1902Z%22%20fill%3D%22%23E6F2F8%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E\");\n}\n.duet-banner .content {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 16px 20px 28px;\n}\n.duet-banner .content .description {\n hyphens: auto;\n}\n.duet-banner .action {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n align-items: flex-start;\n justify-content: flex-end;\n padding-top: 16px;\n}\n.duet-banner .visual {\n border-top-left-radius: 16px;\n border-top-right-radius: 16px;\n}\n.duet-banner .visual .image-container {\n width: 100%;\n height: auto;\n border-radius: 0;\n}\n.duet-banner .visual .icon {\n bottom: 30px;\n left: 15px;\n}\n.duet-banner.duet-theme-turva {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-banner.duet-theme-turva .visual .brand-shape {\n background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 160 344' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_7920_3801)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.58983 142.533C0.751086 155.147 0.0746585 167.857 0.00796847 179.225C0.00263853 179.814 0 180.409 0 181.007C0 194.845 1.41172 210.806 3.58065 223.171C5.6528 234.934 8.58716 246.495 12.5981 257.779C21.2249 282.059 34.0151 304.109 50.8401 323.977C56.7824 330.993 63.0921 337.68 69.8162 344H160V0H65.0733C52.1771 10.7866 41.4339 23.4177 32.7528 37.7978C21.1154 57.0822 14.0367 77.9583 9.75424 99.7913C9.09214 103.157 8.55049 106.545 8.00901 109.933C7.75185 111.542 7.49474 113.15 7.22478 114.756C6.74308 117.618 6.24543 120.479 5.74776 123.34C4.6361 129.729 3.52432 136.12 2.58983 142.533Z' fill='%23F5F5F7'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_7920_3801'%3E%3Crect width='160' height='344' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A\");\n}\n@container duet-banner-container (min-width: 486px) {\n .duet-banner {\n /* stylelint-enable */\n grid-template-rows: none;\n grid-template-columns: 50% 50%;\n }\n .duet-banner .visual {\n border-top-left-radius: 16px;\n border-top-right-radius: 0;\n border-bottom-left-radius: 16px;\n }\n .duet-banner .visual .image-container {\n height: 100%;\n }\n .duet-banner .visual .image {\n width: 100%;\n height: 100%;\n }\n .duet-banner .visual .icon {\n top: 36px;\n left: 168px;\n }\n .duet-banner .visual .brand-shape {\n display: block;\n }\n .duet-banner .content {\n align-items: flex-start;\n justify-content: center;\n padding: 28px 28px 28px 0;\n }\n .duet-banner .action {\n flex-grow: 0;\n }\n}\n@container duet-banner-container (min-width: 586px) {\n .duet-banner {\n /* stylelint-enable */\n }\n .duet-banner .visual .brand-shape {\n left: 80%;\n }\n}\n@container duet-banner-container (min-width: 900px) {\n .duet-banner {\n /* stylelint-enable */\n grid-template-rows: none;\n grid-template-columns: 50% 50%;\n }\n .duet-banner .visual {\n border-top-left-radius: 16px;\n border-bottom-left-radius: 16px;\n }\n .duet-banner .visual .image-container {\n height: 100%;\n }\n .duet-banner .visual .image {\n width: 100%;\n height: 100%;\n }\n .duet-banner .visual .icon {\n top: 40px;\n bottom: auto;\n left: 335px;\n }\n .duet-banner .visual .brand-shape {\n display: block;\n }\n .duet-banner .content {\n align-items: flex-start;\n justify-content: center;\n padding: 48px 48px 48px 0;\n }\n .duet-banner .action {\n flex-grow: 0;\n }\n}";
|
|
23
23
|
|
|
24
24
|
const DuetBanner = class {
|
|
25
25
|
constructor(hostRef) {
|
|
26
26
|
index.registerInstance(this, hostRef);
|
|
27
|
-
this.
|
|
27
|
+
this.checkCurrentSize = () => {
|
|
28
28
|
const elementSize = this.element.clientWidth;
|
|
29
29
|
if (elementSize < 500 || this.size === "small") {
|
|
30
30
|
this.currentSize = "small";
|
|
@@ -41,12 +41,15 @@ const DuetBanner = class {
|
|
|
41
41
|
* Default to smaller button size for small and medium banners.
|
|
42
42
|
*/
|
|
43
43
|
this.setButtonSize = () => {
|
|
44
|
-
if (this.hasActionSlot) {
|
|
44
|
+
if (this.hasActionSlot && this.currentSize) {
|
|
45
45
|
const buttons = this.element.querySelectorAll("[slot='action'] duet-button, duet-button[slot='action']");
|
|
46
46
|
for (const button of buttons) {
|
|
47
47
|
if (button && button.getAttribute("size") === null && this.currentSize !== "large") {
|
|
48
48
|
button.size = "small";
|
|
49
49
|
}
|
|
50
|
+
else if (button && button.getAttribute("size") === null && this.currentSize === "large") {
|
|
51
|
+
button.size = "medium";
|
|
52
|
+
}
|
|
50
53
|
}
|
|
51
54
|
}
|
|
52
55
|
};
|
|
@@ -75,13 +78,13 @@ const DuetBanner = class {
|
|
|
75
78
|
this.setButtonSize();
|
|
76
79
|
}
|
|
77
80
|
connectedCallback() {
|
|
78
|
-
window.addEventListener("resize", this.
|
|
81
|
+
window.addEventListener("resize", this.checkCurrentSize);
|
|
79
82
|
}
|
|
80
83
|
disconnectedCallback() {
|
|
81
|
-
window.removeEventListener("resize", this.
|
|
84
|
+
window.removeEventListener("resize", this.checkCurrentSize);
|
|
82
85
|
}
|
|
83
86
|
componentDidRender() {
|
|
84
|
-
this.
|
|
87
|
+
this.checkCurrentSize();
|
|
85
88
|
}
|
|
86
89
|
/**
|
|
87
90
|
* render() function
|
|
@@ -102,7 +105,7 @@ const DuetBanner = class {
|
|
|
102
105
|
"duet-banner": true,
|
|
103
106
|
"duet-theme-turva": this.theme === "turva",
|
|
104
107
|
[this.currentSize]: true,
|
|
105
|
-
}, style: bannerStyles }, index.h("div", { class: "visual" }, index.h("div", { class: "image-container" }, this.image && index.h(DuetPicture, Object.assign({}, pictureSource))),
|
|
108
|
+
}, style: bannerStyles }, index.h("div", { class: "visual" }, index.h("div", { class: "image-container" }, this.image && index.h(DuetPicture, Object.assign({}, pictureSource))), 1 > 2 , index.h("div", { class: "brand-shape" })), index.h("div", { class: "content" }, this.hasHeadingSlot && (index.h("div", { class: "heading" }, index.h("duet-heading", { theme: this.theme, level: this.headingLevel, "visual-level": this.currentSize === "large" ? "h2" : "h3", "fixed-size": true, margin: "none", color: this.textColor }, index.h("span", null, index.h("slot", { name: "heading" }))))), this.hasDescriptionSlot && (index.h("div", { class: "description", style: { color } }, index.h("slot", { name: "description" }))), this.hasActionSlot && (index.h("div", { class: "action" }, index.h("slot", { name: "action" })))))));
|
|
106
109
|
}
|
|
107
110
|
get element() { return index.getElement(this); }
|
|
108
111
|
};
|
|
@@ -95,7 +95,7 @@ DuetHeading.style = duetHeadingCss;
|
|
|
95
95
|
|
|
96
96
|
var actionDownloadSmall={"title":"action-download-small","tags":"action download arrow down small","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M13.193 1.7c0-.658-.542-1.2-1.2-1.2-.657 0-1.199.542-1.199 1.2v8.922l-2.778-2.6a1.2 1.2 0 0 0-1.64 1.751l4.797 4.498c.458.43 1.183.43 1.64 0l4.798-4.498c.242-.228.379-.544.379-.875a1.2 1.2 0 0 0-2.02-.876l-2.777 2.603V1.699Z\"/><path d=\"M1.5 13.544a1.5 1.5 0 0 1 1.498 1.5v1.498a1.61 1.61 0 0 0 .418 1.096h-.003c0-.002.036.032.13.082.39.194.818.305 1.254.321H19.19a3.085 3.085 0 0 0 1.255-.32c.096-.051.13-.085.13-.085.27-.3.42-.69.414-1.096v-1.5c0-.822.677-1.498 1.5-1.498.822 0 1.499.676 1.499 1.499v1.499c0 1.16-.43 2.293-1.224 3.142-.518.557-1.235.876-1.791 1.056a5.976 5.976 0 0 1-1.783.302H4.797a6.053 6.053 0 0 1-1.782-.302c-.556-.18-1.274-.5-1.792-1.056A4.613 4.613 0 0 1 0 16.542v-1.499a1.5 1.5 0 0 1 1.5-1.499Z\"/></svg>"};
|
|
97
97
|
|
|
98
|
-
const duetLinkCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:inline}:host(.duet-link-block){display:block}:host(.duet-link-button){margin-right:8px !important;margin-bottom:12px !important;display:inline-block;width:100%}:host(.duet-link-button):last-child,:host(.duet-link-button):last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}.duet-link{display:inline;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-style:normal;font-weight:400;color:rgb(0, 98, 154);text-decoration:underline;border-radius:4px;transition:300ms ease}.duet-link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-link:focus,.duet-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-link.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(173, 11, 43)}.duet-link:hover{color:rgb(0, 77, 128);text-decoration:none}.duet-link:hover.duet-theme-turva{color:rgb(148, 9, 37)}.duet-link:active{opacity:0.75;transition:none}button{font-size:inherit;cursor:pointer}.duet-link-is-external.duet-link:not(.block,.button),.duet-link-is-download.duet-link:not(.block,.button){text-decoration:none}.duet-link-is-external.duet-link:not(.block,.button) .duet-link-content,.duet-link-is-download.duet-link:not(.block,.button) .duet-link-content{text-decoration:underline}.duet-link-is-external.duet-link:not(.block,.button):hover>.duet-link-content,.duet-link-is-download.duet-link:not(.block,.button):hover>.duet-link-content{text-decoration:none}.duet-link-is-external.duet-link:not(.block,.button) .duet-link-icon-tail,.duet-link-is-download.duet-link:not(.block,.button) .duet-link-icon-tail{text-decoration:none;white-space:nowrap}.duet-tab-to-link{padding:15px 28px 16px !important;position:absolute;top:-100%;left:-100%;z-index:200;width:1px;min-width:190px;height:1px;overflow:hidden;font-weight:600;color:rgb(0, 119, 179);text-align:center;text-decoration:none;background:rgb(255, 255, 255);border-radius:4px;opacity:0;transition:none}.duet-tab-to-link.duet-theme-turva{min-width:120px;color:rgb(23, 28, 58)}@media (min-width: 106.25em){.duet-tab-to-link{margin-left:20px}}.duet-tab-to-link:focus{top:12px;left:20px;width:auto;height:auto;outline:0;opacity:1}.block.duet-link{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start;padding:16px;font-weight:600;color:rgb(0, 41, 77);text-decoration:none}.block.duet-link.duet-link-has-icon{grid-template-columns:auto 1fr auto}.block.duet-link.none{padding:0}.block .block__content{position:relative;bottom:2px}.block .block__chevron{align-self:center}.block .block__chevron-icon{transition:300ms ease}.block:not(.duet-link-is-external):hover .block__chevron-icon{transform:translateX(4px)}.duet-link.button{display:flex;gap:12px;align-items:center;width:100%;min-height:48px;padding:12px;padding-right:20px;text-decoration:none;background-color:rgb(255, 255, 255);border:solid 1px rgb(207, 210, 212);border-radius:12px;outline:0 solid rgb(207, 210, 212);outline-offset:-2px;transition:all 300ms ease}.duet-link.button>*{flex-shrink:0}.duet-link.button .duet-link-content{flex-grow:1;flex-shrink:1;font-size:1rem;font-weight:600;color:rgb(0, 41, 77);text-align:left}.duet-link.button .icon-wrap{display:flex;align-items:center;justify-content:center}.duet-link.button.duet-link-has-icon-background{min-height:60px}.duet-link.button.duet-link-has-icon-background .icon-wrap{width:36px;height:36px;border-radius:8px}.duet-link.button:hover{border-color:rgb(0, 119, 179);outline:2px solid rgb(0, 119, 179)}@media (min-width: 48em){.duet-link.button{gap:16px;min-height:60px;border-radius:16px}.duet-link.button.duet-link-has-icon-background{min-height:72px}.duet-link.button.duet-link-has-icon-background .icon-wrap{width:48px;height:48px;border-radius:12px}.duet-link.button .duet-link-content{font-size:1.1rem}}.duet-link.button.duet-theme-turva{border-color:rgb(207, 207, 209)}.duet-link.button.duet-theme-turva .duet-link-content{color:rgb(23, 28, 58)}.duet-link.button.duet-theme-turva:hover{border-color:rgb(198, 12, 48);outline-color:rgb(198, 12, 48)}.duet-link.button:not(.duet-link-is-external):hover .block__chevron-icon{transform:translateX(4px)}";
|
|
98
|
+
const duetLinkCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:inline}:host(.duet-link-block){display:block}:host(.duet-link-button){margin-right:8px !important;margin-bottom:12px !important;display:inline-block;width:100%}:host(.duet-link-button):last-child,:host(.duet-link-button):last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}.duet-link{display:inline;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-style:normal;font-weight:400;color:rgb(0, 98, 154);text-decoration:underline;border-radius:4px;transition:300ms ease}.duet-link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-link:focus,.duet-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-link.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(173, 11, 43)}.duet-link:hover{color:rgb(0, 77, 128);text-decoration:none}.duet-link:hover.duet-theme-turva{color:rgb(148, 9, 37)}.duet-link:active{opacity:0.75;transition:none}button{font-size:inherit;cursor:pointer}.duet-link-is-external.duet-link:not(.block,.button),.duet-link-is-download.duet-link:not(.block,.button){text-decoration:none}.duet-link-is-external.duet-link:not(.block,.button) .duet-link-content,.duet-link-is-download.duet-link:not(.block,.button) .duet-link-content{text-decoration:underline}.duet-link-is-external.duet-link:not(.block,.button):hover>.duet-link-content,.duet-link-is-download.duet-link:not(.block,.button):hover>.duet-link-content{text-decoration:none}.duet-link-is-external.duet-link:not(.block,.button) .duet-link-icon-tail,.duet-link-is-download.duet-link:not(.block,.button) .duet-link-icon-tail{text-decoration:none;white-space:nowrap}.duet-tab-to-link{padding:15px 28px 16px !important;position:absolute;top:-100%;left:-100%;z-index:200;width:1px;min-width:190px;height:1px;overflow:hidden;font-weight:600;color:rgb(0, 119, 179);text-align:center;text-decoration:none;background:rgb(255, 255, 255);border-radius:4px;opacity:0;transition:none}.duet-tab-to-link.duet-theme-turva{min-width:120px;color:rgb(23, 28, 58)}@media (min-width: 106.25em){.duet-tab-to-link{margin-left:20px}}.duet-tab-to-link:focus{top:12px;left:20px;width:auto;height:auto;outline:0;opacity:1}.block.duet-link{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start;padding:16px;font-weight:600;color:rgb(0, 41, 77);text-decoration:none}.block.duet-link.duet-link-has-icon{grid-template-columns:auto 1fr auto}.block.duet-link.none{padding:0}.block .block__icon{display:flex}.block .block__content{position:relative;bottom:2px}.block .block__chevron{align-self:center}.block .block__chevron-icon{transition:300ms ease}.block:not(.duet-link-is-external):hover .block__chevron-icon{transform:translateX(4px)}.duet-link.button{display:flex;gap:12px;align-items:center;width:100%;min-height:48px;padding:12px;padding-right:20px;text-decoration:none;background-color:rgb(255, 255, 255);border:solid 1px rgb(207, 210, 212);border-radius:12px;outline:0 solid rgb(207, 210, 212);outline-offset:-2px;transition:all 300ms ease}.duet-link.button>*{flex-shrink:0}.duet-link.button .duet-link-content{flex-grow:1;flex-shrink:1;font-size:1rem;font-weight:600;color:rgb(0, 41, 77);text-align:left}.duet-link.button .icon-wrap{display:flex;align-items:center;justify-content:center}.duet-link.button.duet-link-has-icon-background{min-height:60px}.duet-link.button.duet-link-has-icon-background .icon-wrap{width:36px;height:36px;border-radius:8px}.duet-link.button:hover{border-color:rgb(0, 119, 179);outline:2px solid rgb(0, 119, 179)}@media (min-width: 48em){.duet-link.button{gap:16px;min-height:60px;border-radius:16px}.duet-link.button.duet-link-has-icon-background{min-height:72px}.duet-link.button.duet-link-has-icon-background .icon-wrap{width:48px;height:48px;border-radius:12px}.duet-link.button .duet-link-content{font-size:1.1rem}}.duet-link.button.duet-theme-turva{border-color:rgb(207, 207, 209)}.duet-link.button.duet-theme-turva .duet-link-content{color:rgb(23, 28, 58)}.duet-link.button.duet-theme-turva:hover{border-color:rgb(198, 12, 48);outline-color:rgb(198, 12, 48)}.duet-link.button:not(.duet-link-is-external):hover .block__chevron-icon{transform:translateX(4px)}";
|
|
99
99
|
|
|
100
100
|
const DuetLink = class {
|
|
101
101
|
constructor(hostRef) {
|
|
@@ -107,6 +107,8 @@ const DuetLink = class {
|
|
|
107
107
|
this.accessibleLabelExternal = languageUtils.getLocaleString(this.accessibleLabelExternalDefaults);
|
|
108
108
|
this.accessibleLabelDownloadDefaults = commonStrings.DuetStringsDownloadLinkDefaults;
|
|
109
109
|
this.accessibleLabelDownload = languageUtils.getLocaleString(this.accessibleLabelDownloadDefaults);
|
|
110
|
+
this.accessibleExpanded = undefined;
|
|
111
|
+
this.accessiblePopup = "false";
|
|
110
112
|
this.identifier = undefined;
|
|
111
113
|
this.theme = "";
|
|
112
114
|
this.url = "#";
|
|
@@ -218,6 +220,7 @@ const DuetLink = class {
|
|
|
218
220
|
*/
|
|
219
221
|
render() {
|
|
220
222
|
const Tag = !this.url ? "button" : "a";
|
|
223
|
+
const isButton = Tag === "button";
|
|
221
224
|
return (index.h(index.Host, { class: {
|
|
222
225
|
[`duet-link-${this.variation}`]: true,
|
|
223
226
|
"duet-m-0": this.margin === "none",
|
|
@@ -232,7 +235,7 @@ const DuetLink = class {
|
|
|
232
235
|
"duet-p-0": this.padding === "none",
|
|
233
236
|
[this.padding]: true,
|
|
234
237
|
[this.variation]: true,
|
|
235
|
-
}, target: this.download || !this.url ? null : this.external ? "_blank" : "_self", download: this.resolvedDownload, "aria-label": this.getAccessibleLabel(), id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined }, this.renderContent())));
|
|
238
|
+
}, target: this.download || !this.url ? null : this.external ? "_blank" : "_self", download: this.resolvedDownload, "aria-label": this.getAccessibleLabel(), "aria-expanded": this.accessibleExpanded != null && isButton ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null && isButton ? this.accessiblePopup.toString() : undefined, id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined }, this.renderContent())));
|
|
236
239
|
}
|
|
237
240
|
static get delegatesFocus() { return true; }
|
|
238
241
|
get element() { return index.getElement(this); }
|