@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
|
@@ -14,7 +14,7 @@ import { getColorByName } from "../../utils/token-utils";
|
|
|
14
14
|
*/
|
|
15
15
|
export class DuetBanner {
|
|
16
16
|
constructor() {
|
|
17
|
-
this.
|
|
17
|
+
this.checkCurrentSize = () => {
|
|
18
18
|
const elementSize = this.element.clientWidth;
|
|
19
19
|
if (elementSize < 500 || this.size === "small") {
|
|
20
20
|
this.currentSize = "small";
|
|
@@ -31,12 +31,15 @@ export class DuetBanner {
|
|
|
31
31
|
* Default to smaller button size for small and medium banners.
|
|
32
32
|
*/
|
|
33
33
|
this.setButtonSize = () => {
|
|
34
|
-
if (this.hasActionSlot) {
|
|
34
|
+
if (this.hasActionSlot && this.currentSize) {
|
|
35
35
|
const buttons = this.element.querySelectorAll("[slot='action'] duet-button, duet-button[slot='action']");
|
|
36
36
|
for (const button of buttons) {
|
|
37
37
|
if (button && button.getAttribute("size") === null && this.currentSize !== "large") {
|
|
38
38
|
button.size = "small";
|
|
39
39
|
}
|
|
40
|
+
else if (button && button.getAttribute("size") === null && this.currentSize === "large") {
|
|
41
|
+
button.size = "medium";
|
|
42
|
+
}
|
|
40
43
|
}
|
|
41
44
|
}
|
|
42
45
|
};
|
|
@@ -65,13 +68,13 @@ export class DuetBanner {
|
|
|
65
68
|
this.setButtonSize();
|
|
66
69
|
}
|
|
67
70
|
connectedCallback() {
|
|
68
|
-
window.addEventListener("resize", this.
|
|
71
|
+
window.addEventListener("resize", this.checkCurrentSize);
|
|
69
72
|
}
|
|
70
73
|
disconnectedCallback() {
|
|
71
|
-
window.removeEventListener("resize", this.
|
|
74
|
+
window.removeEventListener("resize", this.checkCurrentSize);
|
|
72
75
|
}
|
|
73
76
|
componentDidRender() {
|
|
74
|
-
this.
|
|
77
|
+
this.checkCurrentSize();
|
|
75
78
|
}
|
|
76
79
|
/**
|
|
77
80
|
* render() function
|
|
@@ -92,7 +95,7 @@ export class DuetBanner {
|
|
|
92
95
|
"duet-banner": true,
|
|
93
96
|
"duet-theme-turva": this.theme === "turva",
|
|
94
97
|
[this.currentSize]: true,
|
|
95
|
-
}, style: bannerStyles }, h("div", { class: "visual" }, h("div", { class: "image-container" }, this.image && h(DuetPicture, Object.assign({}, pictureSource))), this.icon && (h("duet-icon", { theme: this.theme, class: "icon", name: this.icon, shape: "brand", size: this.currentSize === "large" ? "xx-large" : "x-large", color: this.iconColor, background: this.iconBackgroundColor, "background-rotation": "7", "background-opacity": "0.85", margin: "none" }))), h("div", { class: "content" }, this.hasHeadingSlot && (h("div", { class: "heading" }, h("duet-heading", { theme: this.theme, level: this.headingLevel, "visual-level": this.currentSize === "large" ? "h2" : "h3", "fixed-size": true, margin: "none", color: this.textColor }, h("span", null, h("slot", { name: "heading" }))))), this.hasDescriptionSlot && (h("div", { class: "description", style: { color } }, h("slot", { name: "description" }))), this.hasActionSlot && (h("div", { class: "action" }, h("slot", { name: "action" })))))));
|
|
98
|
+
}, style: bannerStyles }, h("div", { class: "visual" }, h("div", { class: "image-container" }, this.image && h(DuetPicture, Object.assign({}, pictureSource))), 1 > 2 && this.icon && (h("duet-icon", { theme: this.theme, class: "icon", name: this.icon, shape: "brand", size: this.currentSize === "large" ? "xx-large" : "x-large", color: this.iconColor, background: this.iconBackgroundColor, "background-rotation": "7", "background-opacity": "0.85", margin: "none" })), h("div", { class: "brand-shape" })), h("div", { class: "content" }, this.hasHeadingSlot && (h("div", { class: "heading" }, h("duet-heading", { theme: this.theme, level: this.headingLevel, "visual-level": this.currentSize === "large" ? "h2" : "h3", "fixed-size": true, margin: "none", color: this.textColor }, h("span", null, h("slot", { name: "heading" }))))), this.hasDescriptionSlot && (h("div", { class: "description", style: { color } }, h("slot", { name: "description" }))), this.hasActionSlot && (h("div", { class: "action" }, h("slot", { name: "action" })))))));
|
|
96
99
|
}
|
|
97
100
|
static get is() { return "duet-banner"; }
|
|
98
101
|
static get encapsulation() { return "shadow"; }
|
|
@@ -24,6 +24,8 @@ export class DuetLink {
|
|
|
24
24
|
this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
|
|
25
25
|
this.accessibleLabelDownloadDefaults = DuetStringsDownloadLinkDefaults;
|
|
26
26
|
this.accessibleLabelDownload = getLocaleString(this.accessibleLabelDownloadDefaults);
|
|
27
|
+
this.accessibleExpanded = undefined;
|
|
28
|
+
this.accessiblePopup = "false";
|
|
27
29
|
this.identifier = undefined;
|
|
28
30
|
this.theme = "";
|
|
29
31
|
this.url = "#";
|
|
@@ -141,6 +143,7 @@ export class DuetLink {
|
|
|
141
143
|
*/
|
|
142
144
|
render() {
|
|
143
145
|
const Tag = !this.url ? "button" : "a";
|
|
146
|
+
const isButton = Tag === "button";
|
|
144
147
|
return (h(Host, { class: {
|
|
145
148
|
[`duet-link-${this.variation}`]: true,
|
|
146
149
|
"duet-m-0": this.margin === "none",
|
|
@@ -155,7 +158,7 @@ export class DuetLink {
|
|
|
155
158
|
"duet-p-0": this.padding === "none",
|
|
156
159
|
[this.padding]: true,
|
|
157
160
|
[this.variation]: true,
|
|
158
|
-
}, 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())));
|
|
161
|
+
}, 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())));
|
|
159
162
|
}
|
|
160
163
|
static get is() { return "duet-link"; }
|
|
161
164
|
static get encapsulation() { return "shadow"; }
|
|
@@ -339,6 +342,41 @@ export class DuetLink {
|
|
|
339
342
|
"reflect": false,
|
|
340
343
|
"defaultValue": "getLocaleString(this.accessibleLabelDownloadDefaults)"
|
|
341
344
|
},
|
|
345
|
+
"accessibleExpanded": {
|
|
346
|
+
"type": "boolean",
|
|
347
|
+
"mutable": true,
|
|
348
|
+
"complexType": {
|
|
349
|
+
"original": "boolean",
|
|
350
|
+
"resolved": "boolean",
|
|
351
|
+
"references": {}
|
|
352
|
+
},
|
|
353
|
+
"required": false,
|
|
354
|
+
"optional": false,
|
|
355
|
+
"docs": {
|
|
356
|
+
"tags": [],
|
|
357
|
+
"text": "If a button expands or collapses adjacent content, then use the ariaExpanded\nprop to add the aria-expanded attribute to the button. Set the value to convey\nthe current expanded (true) or collapsed (false) state of the content.\nOnly works with empty url."
|
|
358
|
+
},
|
|
359
|
+
"attribute": "accessible-expanded",
|
|
360
|
+
"reflect": true
|
|
361
|
+
},
|
|
362
|
+
"accessiblePopup": {
|
|
363
|
+
"type": "string",
|
|
364
|
+
"mutable": true,
|
|
365
|
+
"complexType": {
|
|
366
|
+
"original": "string",
|
|
367
|
+
"resolved": "string",
|
|
368
|
+
"references": {}
|
|
369
|
+
},
|
|
370
|
+
"required": false,
|
|
371
|
+
"optional": false,
|
|
372
|
+
"docs": {
|
|
373
|
+
"tags": [],
|
|
374
|
+
"text": "Use this property to add an aria-haspopup attribute to a button. Only works with empty url."
|
|
375
|
+
},
|
|
376
|
+
"attribute": "accessible-popup",
|
|
377
|
+
"reflect": true,
|
|
378
|
+
"defaultValue": "\"false\""
|
|
379
|
+
},
|
|
342
380
|
"identifier": {
|
|
343
381
|
"type": "string",
|
|
344
382
|
"mutable": false,
|
|
@@ -6,6 +6,10 @@ import { inheritGlobalTheme } from "../../common";
|
|
|
6
6
|
import { getLocaleString } from "../../utils/language-utils";
|
|
7
7
|
import { getI18nError } from "../duet-upload/errorcodes.utils";
|
|
8
8
|
import { formatBytes } from "../duet-upload/upload.helpers";
|
|
9
|
+
/**
|
|
10
|
+
* @internal
|
|
11
|
+
* This component is for internal use.
|
|
12
|
+
*/
|
|
9
13
|
export class DuetUploadItem {
|
|
10
14
|
constructor() {
|
|
11
15
|
this.fileUploadingInfo = {
|
|
@@ -17,14 +17,14 @@ const DuetPicture = ({ img, sources }) => {
|
|
|
17
17
|
h("img", Object.assign({}, img))));
|
|
18
18
|
};
|
|
19
19
|
|
|
20
|
-
const duetBannerCss = "
|
|
20
|
+
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}";
|
|
21
21
|
|
|
22
22
|
const DuetBanner$1 = /*@__PURE__*/ proxyCustomElement(class DuetBanner extends H {
|
|
23
23
|
constructor() {
|
|
24
24
|
super();
|
|
25
25
|
this.__registerHost();
|
|
26
26
|
this.__attachShadow();
|
|
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$1 = /*@__PURE__*/ proxyCustomElement(class DuetBanner extends H
|
|
|
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$1 = /*@__PURE__*/ proxyCustomElement(class DuetBanner extends H
|
|
|
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$1 = /*@__PURE__*/ proxyCustomElement(class DuetBanner extends H
|
|
|
102
105
|
"duet-banner": true,
|
|
103
106
|
"duet-theme-turva": this.theme === "turva",
|
|
104
107
|
[this.currentSize]: true,
|
|
105
|
-
}, style: bannerStyles }, h$1("div", { class: "visual" }, h$1("div", { class: "image-container" }, this.image && h$1(DuetPicture, Object.assign({}, pictureSource))),
|
|
108
|
+
}, style: bannerStyles }, h$1("div", { class: "visual" }, h$1("div", { class: "image-container" }, this.image && h$1(DuetPicture, Object.assign({}, pictureSource))), 1 > 2 , h$1("div", { class: "brand-shape" })), h$1("div", { class: "content" }, this.hasHeadingSlot && (h$1("div", { class: "heading" }, h$1("duet-heading", { theme: this.theme, level: this.headingLevel, "visual-level": this.currentSize === "large" ? "h2" : "h3", "fixed-size": true, margin: "none", color: this.textColor }, h$1("span", null, h$1("slot", { name: "heading" }))))), this.hasDescriptionSlot && (h$1("div", { class: "description", style: { color } }, h$1("slot", { name: "description" }))), this.hasActionSlot && (h$1("div", { class: "action" }, h$1("slot", { name: "action" })))))));
|
|
106
109
|
}
|
|
107
110
|
get element() { return this; }
|
|
108
111
|
static get style() { return duetBannerCss; }
|
|
@@ -7,7 +7,7 @@ import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLa
|
|
|
7
7
|
import { d as defineCustomElement$8 } from './p-83231ea8.js';
|
|
8
8
|
import { d as defineCustomElement$7 } from './p-a167e2a0.js';
|
|
9
9
|
import { d as defineCustomElement$6 } from './p-667579b0.js';
|
|
10
|
-
import { d as defineCustomElement$5 } from './p-
|
|
10
|
+
import { d as defineCustomElement$5 } from './p-2f410810.js';
|
|
11
11
|
import { d as defineCustomElement$4 } from './p-17ed32c8.js';
|
|
12
12
|
import { d as defineCustomElement$3 } from './p-63954651.js';
|
|
13
13
|
import { d as defineCustomElement$2 } from './p-d1815d2a.js';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Built with Duet Design System
|
|
3
3
|
*/
|
|
4
|
-
import { D as DuetLink$1, d as defineCustomElement$1 } from './p-
|
|
4
|
+
import { D as DuetLink$1, d as defineCustomElement$1 } from './p-2f410810.js';
|
|
5
5
|
|
|
6
6
|
const DuetLink = DuetLink$1;
|
|
7
7
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Built with Duet Design System
|
|
3
3
|
*/
|
|
4
|
-
import { D as DuetUploadItem$1, d as defineCustomElement$1 } from './p-
|
|
4
|
+
import { D as DuetUploadItem$1, d as defineCustomElement$1 } from './p-e10f446d.js';
|
|
5
5
|
|
|
6
6
|
const DuetUploadItem = DuetUploadItem$1;
|
|
7
7
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -7,7 +7,7 @@ import { c as createID } from './p-5e59e970.js';
|
|
|
7
7
|
import { d as debounce } from './p-9e371678.js';
|
|
8
8
|
import { g as getLocaleString, s as sanitizeString } from './p-2e36d5bf.js';
|
|
9
9
|
import { p as parsePossibleJSON } from './p-0e052642.js';
|
|
10
|
-
import { g as getError, d as defineCustomElement$3, a as getI18nError } from './p-
|
|
10
|
+
import { g as getError, d as defineCustomElement$3, a as getI18nError } from './p-e10f446d.js';
|
|
11
11
|
import { h } from './p-33937fd7.js';
|
|
12
12
|
import { d as defineCustomElement$j } from './p-f4ac6968.js';
|
|
13
13
|
import { d as defineCustomElement$i } from './p-6d366100.js';
|
|
@@ -18,7 +18,7 @@ import { d as defineCustomElement$e } from './p-a829df6e.js';
|
|
|
18
18
|
import { d as defineCustomElement$d } from './p-45fd4d84.js';
|
|
19
19
|
import { d as defineCustomElement$c } from './p-a167e2a0.js';
|
|
20
20
|
import { d as defineCustomElement$b } from './p-667579b0.js';
|
|
21
|
-
import { d as defineCustomElement$a } from './p-
|
|
21
|
+
import { d as defineCustomElement$a } from './p-2f410810.js';
|
|
22
22
|
import { d as defineCustomElement$9 } from './p-17ed32c8.js';
|
|
23
23
|
import { d as defineCustomElement$8 } from './p-a4a10570.js';
|
|
24
24
|
import { d as defineCustomElement$7 } from './p-92a16064.js';
|
|
@@ -12,7 +12,7 @@ import { d as defineCustomElement$1 } from './p-667579b0.js';
|
|
|
12
12
|
|
|
13
13
|
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>"};
|
|
14
14
|
|
|
15
|
-
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)}";
|
|
15
|
+
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)}";
|
|
16
16
|
|
|
17
17
|
const DuetLink = /*@__PURE__*/ proxyCustomElement(class DuetLink extends H {
|
|
18
18
|
constructor() {
|
|
@@ -26,6 +26,8 @@ const DuetLink = /*@__PURE__*/ proxyCustomElement(class DuetLink extends H {
|
|
|
26
26
|
this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
|
|
27
27
|
this.accessibleLabelDownloadDefaults = DuetStringsDownloadLinkDefaults;
|
|
28
28
|
this.accessibleLabelDownload = getLocaleString(this.accessibleLabelDownloadDefaults);
|
|
29
|
+
this.accessibleExpanded = undefined;
|
|
30
|
+
this.accessiblePopup = "false";
|
|
29
31
|
this.identifier = undefined;
|
|
30
32
|
this.theme = "";
|
|
31
33
|
this.url = "#";
|
|
@@ -137,6 +139,7 @@ const DuetLink = /*@__PURE__*/ proxyCustomElement(class DuetLink extends H {
|
|
|
137
139
|
*/
|
|
138
140
|
render() {
|
|
139
141
|
const Tag = !this.url ? "button" : "a";
|
|
142
|
+
const isButton = Tag === "button";
|
|
140
143
|
return (h(Host, { class: {
|
|
141
144
|
[`duet-link-${this.variation}`]: true,
|
|
142
145
|
"duet-m-0": this.margin === "none",
|
|
@@ -151,7 +154,7 @@ const DuetLink = /*@__PURE__*/ proxyCustomElement(class DuetLink extends H {
|
|
|
151
154
|
"duet-p-0": this.padding === "none",
|
|
152
155
|
[this.padding]: true,
|
|
153
156
|
[this.variation]: true,
|
|
154
|
-
}, 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())));
|
|
157
|
+
}, 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())));
|
|
155
158
|
}
|
|
156
159
|
static get delegatesFocus() { return true; }
|
|
157
160
|
get element() { return this; }
|
|
@@ -164,6 +167,8 @@ const DuetLink = /*@__PURE__*/ proxyCustomElement(class DuetLink extends H {
|
|
|
164
167
|
"accessibleLabelExternal": [1025, "accessible-label-external"],
|
|
165
168
|
"accessibleLabelDownloadDefaults": [1, "accessible-label-download-default"],
|
|
166
169
|
"accessibleLabelDownload": [1025, "accessible-label-download"],
|
|
170
|
+
"accessibleExpanded": [1540, "accessible-expanded"],
|
|
171
|
+
"accessiblePopup": [1537, "accessible-popup"],
|
|
167
172
|
"identifier": [1],
|
|
168
173
|
"theme": [1025],
|
|
169
174
|
"url": [1537],
|
|
@@ -9,7 +9,7 @@ import { d as defineCustomElement$9 } from './p-f4ac6968.js';
|
|
|
9
9
|
import { d as defineCustomElement$8 } from './p-971b25c0.js';
|
|
10
10
|
import { d as defineCustomElement$7 } from './p-a167e2a0.js';
|
|
11
11
|
import { d as defineCustomElement$6 } from './p-667579b0.js';
|
|
12
|
-
import { d as defineCustomElement$5 } from './p-
|
|
12
|
+
import { d as defineCustomElement$5 } from './p-2f410810.js';
|
|
13
13
|
import { d as defineCustomElement$4 } from './p-17ed32c8.js';
|
|
14
14
|
import { d as defineCustomElement$3 } from './p-a4a10570.js';
|
|
15
15
|
import { d as defineCustomElement$2 } from './p-23e23ced.js';
|