@abgov/react-components 4.0.0-alpha.147 → 4.0.0-alpha.149
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.
|
@@ -3,6 +3,7 @@ interface WCProps {
|
|
|
3
3
|
heading: string;
|
|
4
4
|
backgroundurl: string;
|
|
5
5
|
minheight?: string;
|
|
6
|
+
maxcontentwidth?: string;
|
|
6
7
|
}
|
|
7
8
|
declare global {
|
|
8
9
|
namespace JSX {
|
|
@@ -17,6 +18,7 @@ interface Props {
|
|
|
17
18
|
minHeight?: string;
|
|
18
19
|
testId?: string;
|
|
19
20
|
children?: React.ReactNode;
|
|
21
|
+
maxContentWidth?: string;
|
|
20
22
|
}
|
|
21
23
|
export declare const GoAHeroBanner: FC<Props>;
|
|
22
24
|
export default GoAHeroBanner;
|
|
@@ -11,12 +11,14 @@ interface WebComponentProps {
|
|
|
11
11
|
type: ServiceLevel;
|
|
12
12
|
version?: string;
|
|
13
13
|
feedbackurl?: string;
|
|
14
|
+
maxcontentwidth?: string;
|
|
14
15
|
}
|
|
15
16
|
export interface HeaderProps {
|
|
16
17
|
type: ServiceLevel;
|
|
17
18
|
version?: string;
|
|
18
19
|
feedbackUrl?: string;
|
|
19
20
|
testId?: string;
|
|
21
|
+
maxContentWidth?: string;
|
|
20
22
|
}
|
|
21
23
|
export declare const GoAMicrositeHeader: FC<HeaderProps>;
|
|
22
24
|
export default GoAMicrositeHeader;
|
|
@@ -3,6 +3,7 @@ export declare type NotificationType = "important" | "information" | "event" | "
|
|
|
3
3
|
interface WCProps {
|
|
4
4
|
ref: React.RefObject<HTMLElement>;
|
|
5
5
|
type: NotificationType;
|
|
6
|
+
maxcontentwidth?: string;
|
|
6
7
|
}
|
|
7
8
|
declare global {
|
|
8
9
|
namespace JSX {
|
|
@@ -13,9 +14,10 @@ declare global {
|
|
|
13
14
|
}
|
|
14
15
|
interface Props {
|
|
15
16
|
type?: NotificationType;
|
|
17
|
+
maxContentWidth?: string;
|
|
16
18
|
children?: React.ReactNode;
|
|
17
19
|
onDismiss?: () => void;
|
|
18
20
|
testId?: string;
|
|
19
21
|
}
|
|
20
|
-
export declare const GoANotification: ({ type, children, testId, onDismiss, }: Props) => JSX.Element;
|
|
22
|
+
export declare const GoANotification: ({ type, maxContentWidth, children, testId, onDismiss, }: Props) => JSX.Element;
|
|
21
23
|
export default GoANotification;
|
package/package.json
CHANGED
package/react-components.esm.js
CHANGED
|
@@ -1775,7 +1775,7 @@ function instance$J($$self, $$props, $$invalidate) {
|
|
|
1775
1775
|
class AppHeader extends SvelteElement {
|
|
1776
1776
|
constructor(options) {
|
|
1777
1777
|
super();
|
|
1778
|
-
this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.app-header{margin:0 auto;background-color:var(--goa-color-greyscale-white);border-bottom:1px solid var(--goa-color-greyscale-100)
|
|
1778
|
+
this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.app-header{margin:0 auto;background-color:var(--goa-color-greyscale-white);border-bottom:1px solid var(--goa-color-greyscale-100);padding:1rem 1rem}.content{margin:0 auto;width:min(var(--max-content-width), 100%);display:flex;align-items:center;justify-content:space-between}@media(min-width: 640px){.app-header{padding:1.5rem 2rem}}@media(min-width: 1024px){.app-header{padding:1.5rem 4.5rem}}.app-link{display:flex;align-items:center;text-decoration:none;color:inherit}.title{margin-left:0.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.image-desktop{display:none}.image-mobile{display:block}@media(min-width: 640px){.image-desktop{display:block}.image-mobile{display:none}.title{margin-left:1.75rem}.image-desktop{display:block}.image-mobile{display:none}}</style>`;
|
|
1779
1779
|
init(this, {
|
|
1780
1780
|
target: this.shadowRoot,
|
|
1781
1781
|
props: attribute_to_object(this.attributes),
|
|
@@ -2944,7 +2944,7 @@ class Button extends SvelteElement {
|
|
|
2944
2944
|
constructor(options) {
|
|
2945
2945
|
super();
|
|
2946
2946
|
this.shadowRoot.innerHTML = `<style>:host{--button-height:2.625rem;--button-height-compact:2rem;--button-height-tall:3.25rem;box-sizing:border-box;font-family:var(--goa-font-family-sans)}@media(max-width: 480px){:host{width:100%}button{width:100%}}button{display:inline-flex;box-sizing:border-box;border-radius:0.25rem;border:2px solid var(--goa-color-interactive-default);box-sizing:border-box;cursor:pointer;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-5);font-weight:400;height:var(--button-height);letter-spacing:var(--goa-letter-spacing-button);line-height:100%;padding:0 0.75rem;gap:0.5rem;align-items:center;justify-content:center;transition:transform 0.1s ease-in-out, background-color 0.2s ease-in-out,
|
|
2947
|
-
border-color 0.2s ease-in-out}.text{padding-bottom:var(--font-valign-fix, 0)}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--goa-font-size-4)}button.start{height:var(--button-height-tall);font-weight:var(--goa-font-weight-bold)}button.start,button.submit,button.primary{border:2px solid var(--goa-color-interactive-default);background-color:var(--goa-color-interactive-default);color:var(--goa-color-text-light)}button.start:hover,button.submit:hover,button.primary:hover{border-color:var(--goa-color-interactive-hover);background-color:var(--goa-color-interactive-hover)}button.start:focus,button.start:active,button.submit:focus,button.submit:active,button.primary:focus,button.primary:active{box-shadow:0 0 0 3px var(--goa-color-interactive-focus);border-color:var(--goa-color-interactive-hover);background-color:var(--goa-color-interactive-hover);outline:none}button.secondary{border:2px solid var(--goa-color-interactive-default);background-color:var(--goa-color-greyscale-white);color:var(--goa-color-interactive-default)}button.secondary:hover{border-color:var(--goa-color-interactive-hover);color:var(--goa-color-interactive-hover);background-color:var(--goa-color-greyscale-100)}button.secondary:focus,button.secondary:active{border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);background-color:var(--goa-color-greyscale-100);outline:none}button.tertiary{border:1px solid transparent;background-color:transparent;color:var(--goa-color-interactive-default);text-decoration:underline}button.tertiary:hover{border-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);background-color:var(--goa-color-greyscale-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--goa-color-greyscale-100);background-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);outline:none}.submit.destructive,.primary.destructive{color:var(--goa-color-greyscale-white);background-color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default)}.submit.destructive:hover,.primary.destructive:hover{background-color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark)}.submit.destructive:focus,.primary.destructive:focus,.primary.destructive:active{background-color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark)}.secondary.destructive{color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default);background-color:var(--goa-color-greyscale-white)}.secondary.destructive:hover{border-color:var(--goa-color-emergency-dark);color:var(--goa-color-emergency-dark);background-color:var(--goa-color-greyscale-white)}.secondary.destructive:focus,.secondary.destructive:active{color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark);background-color:var(--goa-color-greyscale-white)}.tertiary.destructive{color:var(--goa-color-emergency-default);border-color:transparent}.tertiary.destructive:hover{color:var(--goa-color-emergency-dark)}.tertiary.destructive:focus,.tertiary.destructive:active{color:var(--goa-color-emergency-dark)}</style>`;
|
|
2947
|
+
border-color 0.2s ease-in-out}.text{padding-bottom:var(--font-valign-fix, 0)}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--goa-font-size-4);padding-left:var(--goa-space-xs);padding-right:var(--goa-space-xs)}button.start{height:var(--button-height-tall);font-weight:var(--goa-font-weight-bold)}button.start,button.submit,button.primary{border:2px solid var(--goa-color-interactive-default);background-color:var(--goa-color-interactive-default);color:var(--goa-color-text-light)}button.start:hover,button.submit:hover,button.primary:hover{border-color:var(--goa-color-interactive-hover);background-color:var(--goa-color-interactive-hover)}button.start:focus,button.start:active,button.submit:focus,button.submit:active,button.primary:focus,button.primary:active{box-shadow:0 0 0 3px var(--goa-color-interactive-focus);border-color:var(--goa-color-interactive-hover);background-color:var(--goa-color-interactive-hover);outline:none}button.secondary{border:2px solid var(--goa-color-interactive-default);background-color:var(--goa-color-greyscale-white);color:var(--goa-color-interactive-default)}button.secondary:hover{border-color:var(--goa-color-interactive-hover);color:var(--goa-color-interactive-hover);background-color:var(--goa-color-greyscale-100)}button.secondary:focus,button.secondary:active{border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);background-color:var(--goa-color-greyscale-100);outline:none}button.tertiary{border:1px solid transparent;background-color:transparent;color:var(--goa-color-interactive-default);text-decoration:underline}button.tertiary:hover{border-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);background-color:var(--goa-color-greyscale-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--goa-color-greyscale-100);background-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);outline:none}.submit.destructive,.primary.destructive{color:var(--goa-color-greyscale-white);background-color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default)}.submit.destructive:hover,.primary.destructive:hover{background-color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark)}.submit.destructive:focus,.primary.destructive:focus,.primary.destructive:active{background-color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark)}.secondary.destructive{color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default);background-color:var(--goa-color-greyscale-white)}.secondary.destructive:hover{border-color:var(--goa-color-emergency-dark);color:var(--goa-color-emergency-dark);background-color:var(--goa-color-greyscale-white)}.secondary.destructive:focus,.secondary.destructive:active{color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark);background-color:var(--goa-color-greyscale-white)}.tertiary.destructive{color:var(--goa-color-emergency-default);border-color:transparent}.tertiary.destructive:hover{color:var(--goa-color-emergency-dark)}.tertiary.destructive:focus,.tertiary.destructive:active{color:var(--goa-color-emergency-dark)}</style>`;
|
|
2948
2948
|
init(this, {
|
|
2949
2949
|
target: this.shadowRoot,
|
|
2950
2950
|
props: attribute_to_object(this.attributes),
|
|
@@ -8737,7 +8737,7 @@ function instance$t($$self, $$props, $$invalidate) {
|
|
|
8737
8737
|
class Footer extends SvelteElement {
|
|
8738
8738
|
constructor(options) {
|
|
8739
8739
|
super();
|
|
8740
|
-
this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.app-footer{background-color:var(--goa-color-greyscale-100);border-top:2px solid var(--goa-color-greyscale-200);border-bottom:1rem solid var(--goa-color-brand-default)}.content{padding:2rem 1rem;margin:0 auto;width:min(var(--max-content-width), 100%)}@media(min-width: 640px){.content{padding:2rem
|
|
8740
|
+
this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.app-footer{background-color:var(--goa-color-greyscale-100);border-top:2px solid var(--goa-color-greyscale-200);border-bottom:1rem solid var(--goa-color-brand-default)}.content{padding:2rem 1rem;margin:0 auto;width:min(var(--max-content-width), 100%)}@media(min-width: 640px){.content{padding:2rem 2rem}}@media(min-width: 1024px){.content{padding:2rem 4.5rem}}.meta-section{display:flex;flex-direction:column;padding:1rem 0}.meta-section.with-meta-links{gap:2rem;justify-content:space-between}.meta-links{display:none}.with-meta-links .meta-links{display:block}.nav-links{display:flex;flex-direction:column;gap:2rem}.abgov{display:flex;flex-direction:column;justify-content:space-between;width:100%}@media(min-width: 640px){.meta-section{flex-direction:row;gap:2rem}.nav-links{flex-direction:row}.abgov{align-items:center;flex-direction:row-reverse}}.abgov.with-meta-links{gap:1rem;flex-direction:column;width:unset}@media(min-width: 640px){.abgov.with-meta-links{align-items:flex-end}}.goa-copyright{white-space:nowrap}a{color:var(--goa-color-text-secondary)}</style>`;
|
|
8741
8741
|
init(this, {
|
|
8742
8742
|
target: this.shadowRoot,
|
|
8743
8743
|
props: attribute_to_object(this.attributes),
|
|
@@ -10036,6 +10036,7 @@ function create_fragment$q(ctx) {
|
|
|
10036
10036
|
let div0;
|
|
10037
10037
|
let t2;
|
|
10038
10038
|
let slot1;
|
|
10039
|
+
let goa_page_block_width_value;
|
|
10039
10040
|
return {
|
|
10040
10041
|
c() {
|
|
10041
10042
|
div1 = element("div");
|
|
@@ -10053,7 +10054,9 @@ function create_fragment$q(ctx) {
|
|
|
10053
10054
|
attr(div0, "class", "goa-hero-banner-content");
|
|
10054
10055
|
attr(div0, "role", "note");
|
|
10055
10056
|
attr(slot1, "name", "actions");
|
|
10056
|
-
set_custom_element_data(goa_page_block, "width",
|
|
10057
|
+
set_custom_element_data(goa_page_block, "width", goa_page_block_width_value =
|
|
10058
|
+
/*maxcontentwidth*/
|
|
10059
|
+
ctx[3] || "full");
|
|
10057
10060
|
attr(div1, "class", "goa-hero");
|
|
10058
10061
|
attr(div1, "data-testid", "background");
|
|
10059
10062
|
set_style(div1, "background-image", "linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.40) 40%, rgba(0, 0, 0, 0.6) 100%), url(" +
|
|
@@ -10085,6 +10088,14 @@ function create_fragment$q(ctx) {
|
|
|
10085
10088
|
/*heading*/
|
|
10086
10089
|
ctx[0]);
|
|
10087
10090
|
|
|
10091
|
+
if (dirty &
|
|
10092
|
+
/*maxcontentwidth*/
|
|
10093
|
+
8 && goa_page_block_width_value !== (goa_page_block_width_value =
|
|
10094
|
+
/*maxcontentwidth*/
|
|
10095
|
+
ctx[3] || "full")) {
|
|
10096
|
+
set_custom_element_data(goa_page_block, "width", goa_page_block_width_value);
|
|
10097
|
+
}
|
|
10098
|
+
|
|
10088
10099
|
if (dirty &
|
|
10089
10100
|
/*backgroundurl*/
|
|
10090
10101
|
2) {
|
|
@@ -10122,14 +10133,18 @@ function instance$o($$self, $$props, $$invalidate) {
|
|
|
10122
10133
|
let {
|
|
10123
10134
|
minheight = "600px"
|
|
10124
10135
|
} = $$props;
|
|
10136
|
+
let {
|
|
10137
|
+
maxcontentwidth = "100%"
|
|
10138
|
+
} = $$props;
|
|
10125
10139
|
|
|
10126
10140
|
$$self.$$set = $$props => {
|
|
10127
10141
|
if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
|
|
10128
10142
|
if ('backgroundurl' in $$props) $$invalidate(1, backgroundurl = $$props.backgroundurl);
|
|
10129
10143
|
if ('minheight' in $$props) $$invalidate(2, minheight = $$props.minheight);
|
|
10144
|
+
if ('maxcontentwidth' in $$props) $$invalidate(3, maxcontentwidth = $$props.maxcontentwidth);
|
|
10130
10145
|
};
|
|
10131
10146
|
|
|
10132
|
-
return [heading, backgroundurl, minheight];
|
|
10147
|
+
return [heading, backgroundurl, minheight, maxcontentwidth];
|
|
10133
10148
|
}
|
|
10134
10149
|
|
|
10135
10150
|
class HeroBanner extends SvelteElement {
|
|
@@ -10143,7 +10158,8 @@ class HeroBanner extends SvelteElement {
|
|
|
10143
10158
|
}, instance$o, create_fragment$q, safe_not_equal, {
|
|
10144
10159
|
heading: 0,
|
|
10145
10160
|
backgroundurl: 1,
|
|
10146
|
-
minheight: 2
|
|
10161
|
+
minheight: 2,
|
|
10162
|
+
maxcontentwidth: 3
|
|
10147
10163
|
}, null);
|
|
10148
10164
|
|
|
10149
10165
|
if (options) {
|
|
@@ -10159,7 +10175,7 @@ class HeroBanner extends SvelteElement {
|
|
|
10159
10175
|
}
|
|
10160
10176
|
|
|
10161
10177
|
static get observedAttributes() {
|
|
10162
|
-
return ["heading", "backgroundurl", "minheight"];
|
|
10178
|
+
return ["heading", "backgroundurl", "minheight", "maxcontentwidth"];
|
|
10163
10179
|
}
|
|
10164
10180
|
|
|
10165
10181
|
get heading() {
|
|
@@ -10195,6 +10211,17 @@ class HeroBanner extends SvelteElement {
|
|
|
10195
10211
|
flush();
|
|
10196
10212
|
}
|
|
10197
10213
|
|
|
10214
|
+
get maxcontentwidth() {
|
|
10215
|
+
return this.$$.ctx[3];
|
|
10216
|
+
}
|
|
10217
|
+
|
|
10218
|
+
set maxcontentwidth(maxcontentwidth) {
|
|
10219
|
+
this.$$set({
|
|
10220
|
+
maxcontentwidth
|
|
10221
|
+
});
|
|
10222
|
+
flush();
|
|
10223
|
+
}
|
|
10224
|
+
|
|
10198
10225
|
}
|
|
10199
10226
|
|
|
10200
10227
|
customElements.define("goa-hero-banner", HeroBanner);
|
|
@@ -12460,7 +12487,7 @@ function create_if_block_3$5(ctx) {
|
|
|
12460
12487
|
}
|
|
12461
12488
|
|
|
12462
12489
|
};
|
|
12463
|
-
} // (
|
|
12490
|
+
} // (31:4) {#if ["alpha", "beta"].includes(type)}
|
|
12464
12491
|
|
|
12465
12492
|
|
|
12466
12493
|
function create_if_block_1$5(ctx) {
|
|
@@ -12487,7 +12514,7 @@ function create_if_block_1$5(ctx) {
|
|
|
12487
12514
|
t2 = text("This is a new ");
|
|
12488
12515
|
a = element("a");
|
|
12489
12516
|
a.textContent = "Alberta Government";
|
|
12490
|
-
t4 = text(" service\n
|
|
12517
|
+
t4 = text(" service\n ");
|
|
12491
12518
|
if (if_block) if_block.c();
|
|
12492
12519
|
attr(div0, "data-testid", "type");
|
|
12493
12520
|
attr(div0, "class", div0_class_value = "service-type service-type--" +
|
|
@@ -12548,7 +12575,7 @@ function create_if_block_1$5(ctx) {
|
|
|
12548
12575
|
}
|
|
12549
12576
|
|
|
12550
12577
|
};
|
|
12551
|
-
} // (
|
|
12578
|
+
} // (40:8) {#if feedbackurl}
|
|
12552
12579
|
|
|
12553
12580
|
|
|
12554
12581
|
function create_if_block_2$5(ctx) {
|
|
@@ -12590,7 +12617,7 @@ function create_if_block_2$5(ctx) {
|
|
|
12590
12617
|
}
|
|
12591
12618
|
|
|
12592
12619
|
};
|
|
12593
|
-
} // (
|
|
12620
|
+
} // (46:4) {#if version}
|
|
12594
12621
|
|
|
12595
12622
|
|
|
12596
12623
|
function create_if_block$b(ctx) {
|
|
@@ -12628,13 +12655,15 @@ function create_if_block$b(ctx) {
|
|
|
12628
12655
|
|
|
12629
12656
|
function create_fragment$m(ctx) {
|
|
12630
12657
|
let header;
|
|
12658
|
+
let div1;
|
|
12631
12659
|
let t0;
|
|
12632
12660
|
let show_if = ["alpha", "beta"].includes(
|
|
12633
12661
|
/*type*/
|
|
12634
12662
|
ctx[0]);
|
|
12635
12663
|
let t1;
|
|
12636
|
-
let
|
|
12664
|
+
let div0;
|
|
12637
12665
|
let t2;
|
|
12666
|
+
let header_style_value;
|
|
12638
12667
|
let if_block0 =
|
|
12639
12668
|
/*type*/
|
|
12640
12669
|
ctx[0] === "live" && create_if_block_3$5();
|
|
@@ -12645,27 +12674,33 @@ function create_fragment$m(ctx) {
|
|
|
12645
12674
|
return {
|
|
12646
12675
|
c() {
|
|
12647
12676
|
header = element("header");
|
|
12677
|
+
div1 = element("div");
|
|
12648
12678
|
if (if_block0) if_block0.c();
|
|
12649
12679
|
t0 = space();
|
|
12650
12680
|
if (if_block1) if_block1.c();
|
|
12651
12681
|
t1 = space();
|
|
12652
|
-
|
|
12682
|
+
div0 = element("div");
|
|
12653
12683
|
t2 = space();
|
|
12654
12684
|
if (if_block2) if_block2.c();
|
|
12655
12685
|
this.c = noop;
|
|
12656
|
-
attr(
|
|
12686
|
+
attr(div0, "class", "spacer");
|
|
12687
|
+
attr(div1, "class", "content-container");
|
|
12657
12688
|
attr(header, "class", "goa-official-site-header");
|
|
12689
|
+
attr(header, "style", header_style_value = `--max-content-width: ${
|
|
12690
|
+
/*maxcontentwidth*/
|
|
12691
|
+
ctx[3]}`);
|
|
12658
12692
|
},
|
|
12659
12693
|
|
|
12660
12694
|
m(target, anchor) {
|
|
12661
12695
|
insert(target, header, anchor);
|
|
12662
|
-
|
|
12663
|
-
|
|
12664
|
-
|
|
12665
|
-
|
|
12666
|
-
append(
|
|
12667
|
-
append(
|
|
12668
|
-
|
|
12696
|
+
append(header, div1);
|
|
12697
|
+
if (if_block0) if_block0.m(div1, null);
|
|
12698
|
+
append(div1, t0);
|
|
12699
|
+
if (if_block1) if_block1.m(div1, null);
|
|
12700
|
+
append(div1, t1);
|
|
12701
|
+
append(div1, div0);
|
|
12702
|
+
append(div1, t2);
|
|
12703
|
+
if (if_block2) if_block2.m(div1, null);
|
|
12669
12704
|
},
|
|
12670
12705
|
|
|
12671
12706
|
p(ctx, [dirty]) {
|
|
@@ -12675,7 +12710,7 @@ function create_fragment$m(ctx) {
|
|
|
12675
12710
|
if (if_block0) ;else {
|
|
12676
12711
|
if_block0 = create_if_block_3$5();
|
|
12677
12712
|
if_block0.c();
|
|
12678
|
-
if_block0.m(
|
|
12713
|
+
if_block0.m(div1, t0);
|
|
12679
12714
|
}
|
|
12680
12715
|
} else if (if_block0) {
|
|
12681
12716
|
if_block0.d(1);
|
|
@@ -12694,7 +12729,7 @@ function create_fragment$m(ctx) {
|
|
|
12694
12729
|
} else {
|
|
12695
12730
|
if_block1 = create_if_block_1$5(ctx);
|
|
12696
12731
|
if_block1.c();
|
|
12697
|
-
if_block1.m(
|
|
12732
|
+
if_block1.m(div1, t1);
|
|
12698
12733
|
}
|
|
12699
12734
|
} else if (if_block1) {
|
|
12700
12735
|
if_block1.d(1);
|
|
@@ -12709,12 +12744,20 @@ function create_fragment$m(ctx) {
|
|
|
12709
12744
|
} else {
|
|
12710
12745
|
if_block2 = create_if_block$b(ctx);
|
|
12711
12746
|
if_block2.c();
|
|
12712
|
-
if_block2.m(
|
|
12747
|
+
if_block2.m(div1, null);
|
|
12713
12748
|
}
|
|
12714
12749
|
} else if (if_block2) {
|
|
12715
12750
|
if_block2.d(1);
|
|
12716
12751
|
if_block2 = null;
|
|
12717
12752
|
}
|
|
12753
|
+
|
|
12754
|
+
if (dirty &
|
|
12755
|
+
/*maxcontentwidth*/
|
|
12756
|
+
8 && header_style_value !== (header_style_value = `--max-content-width: ${
|
|
12757
|
+
/*maxcontentwidth*/
|
|
12758
|
+
ctx[3]}`)) {
|
|
12759
|
+
attr(header, "style", header_style_value);
|
|
12760
|
+
}
|
|
12718
12761
|
},
|
|
12719
12762
|
|
|
12720
12763
|
i: noop,
|
|
@@ -12746,6 +12789,9 @@ function instance$k($$self, $$props, $$invalidate) {
|
|
|
12746
12789
|
let {
|
|
12747
12790
|
feedbackurl = ""
|
|
12748
12791
|
} = $$props;
|
|
12792
|
+
let {
|
|
12793
|
+
maxcontentwidth = "100%"
|
|
12794
|
+
} = $$props;
|
|
12749
12795
|
onMount(() => {
|
|
12750
12796
|
setTimeout(() => validateType(type), 1);
|
|
12751
12797
|
});
|
|
@@ -12754,15 +12800,16 @@ function instance$k($$self, $$props, $$invalidate) {
|
|
|
12754
12800
|
if ('type' in $$props) $$invalidate(0, type = $$props.type);
|
|
12755
12801
|
if ('version' in $$props) $$invalidate(1, version = $$props.version);
|
|
12756
12802
|
if ('feedbackurl' in $$props) $$invalidate(2, feedbackurl = $$props.feedbackurl);
|
|
12803
|
+
if ('maxcontentwidth' in $$props) $$invalidate(3, maxcontentwidth = $$props.maxcontentwidth);
|
|
12757
12804
|
};
|
|
12758
12805
|
|
|
12759
|
-
return [type, version, feedbackurl];
|
|
12806
|
+
return [type, version, feedbackurl, maxcontentwidth];
|
|
12760
12807
|
}
|
|
12761
12808
|
|
|
12762
12809
|
class MicrositeHeader extends SvelteElement {
|
|
12763
12810
|
constructor(options) {
|
|
12764
12811
|
super();
|
|
12765
|
-
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}a{color:var(--goa-color-interactive-default);cursor:pointer}a:hover{color:var(--goa-color-interactive-hover)}a:focus{outline-width:thin;outline-style:solid;outline-color:var(--goa-color-interactive-hover);outline-offset:0px}.goa-official-site-header{
|
|
12812
|
+
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}a{color:var(--goa-color-interactive-default);cursor:pointer}a:hover{color:var(--goa-color-interactive-hover)}a:focus{outline-width:thin;outline-style:solid;outline-color:var(--goa-color-interactive-hover);outline-offset:0px}.goa-official-site-header{font-size:var(--goa-font-size-2);background-color:var(--goa-color-greyscale-100);padding:0.5rem 1rem}.content-container{display:flex;align-items:start;justify-content:space-between;max-width:min(var(--max-content-width), 100%);margin:0 auto}@media(min-width: 640px){.goa-official-site-header{padding:0.25rem 2rem}.content-container{align-items:center}}@media(min-width: 1024px){.goa-official-site-header{padding:0.25rem 4.5rem}}.spacer{flex:1 1 auto}.version{color:var(--goa-color-text-secondary);padding-left:1rem;line-height:1.25rem}.service-type{font-weight:bold;padding:0.125rem 0.25rem;display:flex;margin-right:1rem;line-height:initial}.service-type--alpha{background-color:var(--goa-color-warning-default);color:var(--goa-color-text-default)}.service-type--beta{background-color:var(--goa-color-brand-default);color:var(--goa-color-text-light)}.site-text{color:var(--goa-color-text-default);line-height:1.25rem}</style>`;
|
|
12766
12813
|
init(this, {
|
|
12767
12814
|
target: this.shadowRoot,
|
|
12768
12815
|
props: attribute_to_object(this.attributes),
|
|
@@ -12770,7 +12817,8 @@ class MicrositeHeader extends SvelteElement {
|
|
|
12770
12817
|
}, instance$k, create_fragment$m, safe_not_equal, {
|
|
12771
12818
|
type: 0,
|
|
12772
12819
|
version: 1,
|
|
12773
|
-
feedbackurl: 2
|
|
12820
|
+
feedbackurl: 2,
|
|
12821
|
+
maxcontentwidth: 3
|
|
12774
12822
|
}, null);
|
|
12775
12823
|
|
|
12776
12824
|
if (options) {
|
|
@@ -12786,7 +12834,7 @@ class MicrositeHeader extends SvelteElement {
|
|
|
12786
12834
|
}
|
|
12787
12835
|
|
|
12788
12836
|
static get observedAttributes() {
|
|
12789
|
-
return ["type", "version", "feedbackurl"];
|
|
12837
|
+
return ["type", "version", "feedbackurl", "maxcontentwidth"];
|
|
12790
12838
|
}
|
|
12791
12839
|
|
|
12792
12840
|
get type() {
|
|
@@ -12822,6 +12870,17 @@ class MicrositeHeader extends SvelteElement {
|
|
|
12822
12870
|
flush();
|
|
12823
12871
|
}
|
|
12824
12872
|
|
|
12873
|
+
get maxcontentwidth() {
|
|
12874
|
+
return this.$$.ctx[3];
|
|
12875
|
+
}
|
|
12876
|
+
|
|
12877
|
+
set maxcontentwidth(maxcontentwidth) {
|
|
12878
|
+
this.$$set({
|
|
12879
|
+
maxcontentwidth
|
|
12880
|
+
});
|
|
12881
|
+
flush();
|
|
12882
|
+
}
|
|
12883
|
+
|
|
12825
12884
|
}
|
|
12826
12885
|
|
|
12827
12886
|
customElements.define("goa-microsite-header", MicrositeHeader);
|
|
@@ -13621,6 +13680,7 @@ customElements.define("goa-modal", Modal);
|
|
|
13621
13680
|
/* libs/web-components/src/components/notification/Notification.svelte generated by Svelte v3.51.0 */
|
|
13622
13681
|
|
|
13623
13682
|
function create_if_block$9(ctx) {
|
|
13683
|
+
let div4;
|
|
13624
13684
|
let div3;
|
|
13625
13685
|
let div0;
|
|
13626
13686
|
let goa_icon;
|
|
@@ -13631,13 +13691,15 @@ function create_if_block$9(ctx) {
|
|
|
13631
13691
|
let div2;
|
|
13632
13692
|
let goa_icon_button;
|
|
13633
13693
|
let goa_icon_button_inverted_value;
|
|
13634
|
-
let
|
|
13635
|
-
let
|
|
13694
|
+
let div4_class_value;
|
|
13695
|
+
let div4_style_value;
|
|
13696
|
+
let div4_transition;
|
|
13636
13697
|
let current;
|
|
13637
13698
|
let mounted;
|
|
13638
13699
|
let dispose;
|
|
13639
13700
|
return {
|
|
13640
13701
|
c() {
|
|
13702
|
+
div4 = element("div");
|
|
13641
13703
|
div3 = element("div");
|
|
13642
13704
|
div0 = element("div");
|
|
13643
13705
|
goa_icon = element("goa-icon");
|
|
@@ -13649,7 +13711,7 @@ function create_if_block$9(ctx) {
|
|
|
13649
13711
|
goa_icon_button = element("goa-icon-button");
|
|
13650
13712
|
set_custom_element_data(goa_icon, "type",
|
|
13651
13713
|
/*iconType*/
|
|
13652
|
-
ctx[
|
|
13714
|
+
ctx[3]);
|
|
13653
13715
|
set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value =
|
|
13654
13716
|
/*type*/
|
|
13655
13717
|
ctx[0] === "important" ? "false" : "true");
|
|
@@ -13661,13 +13723,18 @@ function create_if_block$9(ctx) {
|
|
|
13661
13723
|
/*type*/
|
|
13662
13724
|
ctx[0] === "important" ? "false" : "true");
|
|
13663
13725
|
attr(div2, "class", "close");
|
|
13664
|
-
attr(div3, "class",
|
|
13726
|
+
attr(div3, "class", "content-container");
|
|
13727
|
+
attr(div4, "class", div4_class_value = "notification " +
|
|
13665
13728
|
/*type*/
|
|
13666
13729
|
ctx[0]);
|
|
13730
|
+
attr(div4, "style", div4_style_value = `--max-content-width: ${
|
|
13731
|
+
/*maxcontentwidth*/
|
|
13732
|
+
ctx[1]}`);
|
|
13667
13733
|
},
|
|
13668
13734
|
|
|
13669
13735
|
m(target, anchor) {
|
|
13670
|
-
insert(target,
|
|
13736
|
+
insert(target, div4, anchor);
|
|
13737
|
+
append(div4, div3);
|
|
13671
13738
|
append(div3, div0);
|
|
13672
13739
|
append(div0, goa_icon);
|
|
13673
13740
|
append(div3, t0);
|
|
@@ -13680,7 +13747,7 @@ function create_if_block$9(ctx) {
|
|
|
13680
13747
|
if (!mounted) {
|
|
13681
13748
|
dispose = listen(goa_icon_button, "click",
|
|
13682
13749
|
/*close*/
|
|
13683
|
-
ctx[
|
|
13750
|
+
ctx[4]);
|
|
13684
13751
|
mounted = true;
|
|
13685
13752
|
}
|
|
13686
13753
|
},
|
|
@@ -13688,10 +13755,10 @@ function create_if_block$9(ctx) {
|
|
|
13688
13755
|
p(ctx, dirty) {
|
|
13689
13756
|
if (!current || dirty &
|
|
13690
13757
|
/*iconType*/
|
|
13691
|
-
|
|
13758
|
+
8) {
|
|
13692
13759
|
set_custom_element_data(goa_icon, "type",
|
|
13693
13760
|
/*iconType*/
|
|
13694
|
-
ctx[
|
|
13761
|
+
ctx[3]);
|
|
13695
13762
|
}
|
|
13696
13763
|
|
|
13697
13764
|
if (!current || dirty &
|
|
@@ -13712,31 +13779,39 @@ function create_if_block$9(ctx) {
|
|
|
13712
13779
|
|
|
13713
13780
|
if (!current || dirty &
|
|
13714
13781
|
/*type*/
|
|
13715
|
-
1 &&
|
|
13782
|
+
1 && div4_class_value !== (div4_class_value = "notification " +
|
|
13716
13783
|
/*type*/
|
|
13717
13784
|
ctx[0])) {
|
|
13718
|
-
attr(
|
|
13785
|
+
attr(div4, "class", div4_class_value);
|
|
13786
|
+
}
|
|
13787
|
+
|
|
13788
|
+
if (!current || dirty &
|
|
13789
|
+
/*maxcontentwidth*/
|
|
13790
|
+
2 && div4_style_value !== (div4_style_value = `--max-content-width: ${
|
|
13791
|
+
/*maxcontentwidth*/
|
|
13792
|
+
ctx[1]}`)) {
|
|
13793
|
+
attr(div4, "style", div4_style_value);
|
|
13719
13794
|
}
|
|
13720
13795
|
},
|
|
13721
13796
|
|
|
13722
13797
|
i(local) {
|
|
13723
13798
|
if (current) return;
|
|
13724
13799
|
add_render_callback(() => {
|
|
13725
|
-
if (!
|
|
13726
|
-
|
|
13800
|
+
if (!div4_transition) div4_transition = create_bidirectional_transition(div4, fade, {}, true);
|
|
13801
|
+
div4_transition.run(1);
|
|
13727
13802
|
});
|
|
13728
13803
|
current = true;
|
|
13729
13804
|
},
|
|
13730
13805
|
|
|
13731
13806
|
o(local) {
|
|
13732
|
-
if (!
|
|
13733
|
-
|
|
13807
|
+
if (!div4_transition) div4_transition = create_bidirectional_transition(div4, fade, {}, false);
|
|
13808
|
+
div4_transition.run(0);
|
|
13734
13809
|
current = false;
|
|
13735
13810
|
},
|
|
13736
13811
|
|
|
13737
13812
|
d(detaching) {
|
|
13738
|
-
if (detaching) detach(
|
|
13739
|
-
if (detaching &&
|
|
13813
|
+
if (detaching) detach(div4);
|
|
13814
|
+
if (detaching && div4_transition) div4_transition.end();
|
|
13740
13815
|
mounted = false;
|
|
13741
13816
|
dispose();
|
|
13742
13817
|
}
|
|
@@ -13749,7 +13824,7 @@ function create_fragment$k(ctx) {
|
|
|
13749
13824
|
let current;
|
|
13750
13825
|
let if_block =
|
|
13751
13826
|
/*show*/
|
|
13752
|
-
ctx[
|
|
13827
|
+
ctx[2] && create_if_block$9(ctx);
|
|
13753
13828
|
return {
|
|
13754
13829
|
c() {
|
|
13755
13830
|
if (if_block) if_block.c();
|
|
@@ -13766,13 +13841,13 @@ function create_fragment$k(ctx) {
|
|
|
13766
13841
|
p(ctx, [dirty]) {
|
|
13767
13842
|
if (
|
|
13768
13843
|
/*show*/
|
|
13769
|
-
ctx[
|
|
13844
|
+
ctx[2]) {
|
|
13770
13845
|
if (if_block) {
|
|
13771
13846
|
if_block.p(ctx, dirty);
|
|
13772
13847
|
|
|
13773
13848
|
if (dirty &
|
|
13774
13849
|
/*show*/
|
|
13775
|
-
|
|
13850
|
+
4) {
|
|
13776
13851
|
transition_in(if_block, 1);
|
|
13777
13852
|
}
|
|
13778
13853
|
} else {
|
|
@@ -13815,13 +13890,16 @@ function instance$i($$self, $$props, $$invalidate) {
|
|
|
13815
13890
|
let {
|
|
13816
13891
|
type = ""
|
|
13817
13892
|
} = $$props;
|
|
13893
|
+
let {
|
|
13894
|
+
maxcontentwidth = "100%"
|
|
13895
|
+
} = $$props;
|
|
13818
13896
|
let show = true;
|
|
13819
13897
|
onMount(() => {
|
|
13820
13898
|
setTimeout(() => validateType(type), 1);
|
|
13821
13899
|
});
|
|
13822
13900
|
|
|
13823
13901
|
function close(e) {
|
|
13824
|
-
$$invalidate(
|
|
13902
|
+
$$invalidate(2, show = false);
|
|
13825
13903
|
e.target.dispatchEvent(new CustomEvent("_dismiss", {
|
|
13826
13904
|
composed: true
|
|
13827
13905
|
}));
|
|
@@ -13830,29 +13908,31 @@ function instance$i($$self, $$props, $$invalidate) {
|
|
|
13830
13908
|
|
|
13831
13909
|
$$self.$$set = $$props => {
|
|
13832
13910
|
if ('type' in $$props) $$invalidate(0, type = $$props.type);
|
|
13911
|
+
if ('maxcontentwidth' in $$props) $$invalidate(1, maxcontentwidth = $$props.maxcontentwidth);
|
|
13833
13912
|
};
|
|
13834
13913
|
|
|
13835
13914
|
$$self.$$.update = () => {
|
|
13836
13915
|
if ($$self.$$.dirty &
|
|
13837
13916
|
/*type*/
|
|
13838
13917
|
1) {
|
|
13839
|
-
$$invalidate(
|
|
13918
|
+
$$invalidate(3, iconType = type === "emergency" ? "warning" : type === "important" ? "alert-circle" : type === "information" ? "information-circle" : type === "event" ? "calendar" : "");
|
|
13840
13919
|
}
|
|
13841
13920
|
};
|
|
13842
13921
|
|
|
13843
|
-
return [type, show, iconType, close];
|
|
13922
|
+
return [type, maxcontentwidth, show, iconType, close];
|
|
13844
13923
|
}
|
|
13845
13924
|
|
|
13846
13925
|
class Notification extends SvelteElement {
|
|
13847
13926
|
constructor(options) {
|
|
13848
13927
|
super();
|
|
13849
|
-
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.notification{padding:1.5rem;display:flex
|
|
13928
|
+
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.notification{padding:1.5rem 1rem;display:flex}@media(min-width: 640px){.notification{padding:1.5rem 2rem}}@media(min-width: 1024px){.notification{padding:1.5rem 4.5rem}}.emergency{background-color:var(--goa-color-emergency-default);color:var(--goa-color-greyscale-white)}.important{background-color:var(--goa-color-warning-default)}.information{background-color:var(--goa-color-info-default);color:var(--goa-color-greyscale-white)}.event{background-color:var(--goa-color-success-default);color:var(--goa-color-greyscale-white)}.icon{flex:0 0 auto}.content-container{display:flex;flex-direction:row;flex:1 1 auto;gap:1rem;margin:0 auto;max-width:min(var(--max-content-width), 100%)}.content{flex:1 1 auto}::slotted(a){color:unset !important;outline:unset !important}.close{flex:0 0 auto}</style>`;
|
|
13850
13929
|
init(this, {
|
|
13851
13930
|
target: this.shadowRoot,
|
|
13852
13931
|
props: attribute_to_object(this.attributes),
|
|
13853
13932
|
customElement: true
|
|
13854
13933
|
}, instance$i, create_fragment$k, safe_not_equal, {
|
|
13855
|
-
type: 0
|
|
13934
|
+
type: 0,
|
|
13935
|
+
maxcontentwidth: 1
|
|
13856
13936
|
}, null);
|
|
13857
13937
|
|
|
13858
13938
|
if (options) {
|
|
@@ -13868,7 +13948,7 @@ class Notification extends SvelteElement {
|
|
|
13868
13948
|
}
|
|
13869
13949
|
|
|
13870
13950
|
static get observedAttributes() {
|
|
13871
|
-
return ["type"];
|
|
13951
|
+
return ["type", "maxcontentwidth"];
|
|
13872
13952
|
}
|
|
13873
13953
|
|
|
13874
13954
|
get type() {
|
|
@@ -13882,6 +13962,17 @@ class Notification extends SvelteElement {
|
|
|
13882
13962
|
flush();
|
|
13883
13963
|
}
|
|
13884
13964
|
|
|
13965
|
+
get maxcontentwidth() {
|
|
13966
|
+
return this.$$.ctx[1];
|
|
13967
|
+
}
|
|
13968
|
+
|
|
13969
|
+
set maxcontentwidth(maxcontentwidth) {
|
|
13970
|
+
this.$$set({
|
|
13971
|
+
maxcontentwidth
|
|
13972
|
+
});
|
|
13973
|
+
flush();
|
|
13974
|
+
}
|
|
13975
|
+
|
|
13885
13976
|
}
|
|
13886
13977
|
|
|
13887
13978
|
customElements.define("goa-notification", Notification);
|
|
@@ -13969,7 +14060,7 @@ function instance$h($$self, $$props, $$invalidate) {
|
|
|
13969
14060
|
class PageBlock extends SvelteElement {
|
|
13970
14061
|
constructor(options) {
|
|
13971
14062
|
super();
|
|
13972
|
-
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.page-content{max-width:var(--max-width);margin:0 auto;padding:0
|
|
14063
|
+
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.page-content{max-width:var(--max-width);margin:0 auto;padding:0 1rem}@media(min-width: 640px){.page-content{padding:0 2rem}}@media(min-width: 1024px){.page-content{padding:0 4.5rem}}</style>`;
|
|
13973
14064
|
init(this, {
|
|
13974
14065
|
target: this.shadowRoot,
|
|
13975
14066
|
props: attribute_to_object(this.attributes),
|
|
@@ -17762,7 +17853,7 @@ function instance$9($$self, $$props, $$invalidate) {
|
|
|
17762
17853
|
class Table extends SvelteElement {
|
|
17763
17854
|
constructor(options) {
|
|
17764
17855
|
super();
|
|
17765
|
-
this.shadowRoot.innerHTML = `<style>:host{overflow-x:auto}table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{font:var(--goa-typography-body-m);padding:0.75rem 1rem;border-bottom:1px solid var(--goa-color-greyscale-200)}table .goa-table-number-column{font:var(--goa-typography-number-m);text-align:right}table.relaxed td{padding:1rem}th{background-color:var(--goa-color-greyscale-white);color:var(--goa-color-text-secondary);padding:1rem;text-align:left;border-bottom:2px solid var(--goa-color-greyscale-
|
|
17856
|
+
this.shadowRoot.innerHTML = `<style>:host{overflow-x:auto}table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{font:var(--goa-typography-body-m);padding:0.75rem 1rem;border-bottom:1px solid var(--goa-color-greyscale-200)}table .goa-table-number-column{font:var(--goa-typography-number-m);text-align:right}table.relaxed td{padding:1rem}th{background-color:var(--goa-color-greyscale-white);color:var(--goa-color-text-secondary);padding:1rem;text-align:left;border-bottom:2px solid var(--goa-color-greyscale-600);vertical-align:bottom}th:has(goa-table-sort-header){padding:0}tfoot td{background-color:var(--goa-color-greyscale-100)}tfoot tr:first-child td{border-top:2px solid var(--goa-color-greyscale-200)}tfoot tr:last-child td{border-bottom:none}</style>`;
|
|
17766
17857
|
init(this, {
|
|
17767
17858
|
target: this.shadowRoot,
|
|
17768
17859
|
props: attribute_to_object(this.attributes),
|
|
@@ -22469,6 +22560,7 @@ const GoAHeroBanner = ({
|
|
|
22469
22560
|
heading,
|
|
22470
22561
|
backgroundUrl,
|
|
22471
22562
|
minHeight,
|
|
22563
|
+
maxContentWidth,
|
|
22472
22564
|
children,
|
|
22473
22565
|
testId
|
|
22474
22566
|
}) => {
|
|
@@ -22476,6 +22568,7 @@ const GoAHeroBanner = ({
|
|
|
22476
22568
|
heading: heading,
|
|
22477
22569
|
backgroundurl: backgroundUrl,
|
|
22478
22570
|
minheight: minHeight,
|
|
22571
|
+
maxcontentwidth: maxContentWidth,
|
|
22479
22572
|
"data-testid": testId
|
|
22480
22573
|
}, {
|
|
22481
22574
|
children: children
|
|
@@ -22853,13 +22946,15 @@ const GoAMicrositeHeader = ({
|
|
|
22853
22946
|
type,
|
|
22854
22947
|
version,
|
|
22855
22948
|
feedbackUrl,
|
|
22949
|
+
maxContentWidth,
|
|
22856
22950
|
testId
|
|
22857
22951
|
}) => {
|
|
22858
22952
|
return jsx("goa-microsite-header", {
|
|
22859
22953
|
type: type,
|
|
22860
22954
|
version: version,
|
|
22861
22955
|
feedbackurl: feedbackUrl,
|
|
22862
|
-
"data-testid": testId
|
|
22956
|
+
"data-testid": testId,
|
|
22957
|
+
maxcontentwidth: maxContentWidth
|
|
22863
22958
|
}, void 0);
|
|
22864
22959
|
};
|
|
22865
22960
|
|
|
@@ -22921,6 +23016,7 @@ const GoAModal = ({
|
|
|
22921
23016
|
|
|
22922
23017
|
const GoANotification = ({
|
|
22923
23018
|
type: _type = "information",
|
|
23019
|
+
maxContentWidth,
|
|
22924
23020
|
children,
|
|
22925
23021
|
testId,
|
|
22926
23022
|
onDismiss
|
|
@@ -22945,7 +23041,8 @@ const GoANotification = ({
|
|
|
22945
23041
|
return jsx("goa-notification", Object.assign({
|
|
22946
23042
|
ref: el,
|
|
22947
23043
|
type: _type,
|
|
22948
|
-
"data-testid": testId
|
|
23044
|
+
"data-testid": testId,
|
|
23045
|
+
maxcontentwidth: maxContentWidth
|
|
22949
23046
|
}, {
|
|
22950
23047
|
children: children
|
|
22951
23048
|
}), void 0);
|
package/react-components.umd.js
CHANGED
|
@@ -1816,7 +1816,7 @@
|
|
|
1816
1816
|
class AppHeader extends SvelteElement {
|
|
1817
1817
|
constructor(options) {
|
|
1818
1818
|
super();
|
|
1819
|
-
this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.app-header{margin:0 auto;background-color:var(--goa-color-greyscale-white);border-bottom:1px solid var(--goa-color-greyscale-100)
|
|
1819
|
+
this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.app-header{margin:0 auto;background-color:var(--goa-color-greyscale-white);border-bottom:1px solid var(--goa-color-greyscale-100);padding:1rem 1rem}.content{margin:0 auto;width:min(var(--max-content-width), 100%);display:flex;align-items:center;justify-content:space-between}@media(min-width: 640px){.app-header{padding:1.5rem 2rem}}@media(min-width: 1024px){.app-header{padding:1.5rem 4.5rem}}.app-link{display:flex;align-items:center;text-decoration:none;color:inherit}.title{margin-left:0.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.image-desktop{display:none}.image-mobile{display:block}@media(min-width: 640px){.image-desktop{display:block}.image-mobile{display:none}.title{margin-left:1.75rem}.image-desktop{display:block}.image-mobile{display:none}}</style>`;
|
|
1820
1820
|
init(this, {
|
|
1821
1821
|
target: this.shadowRoot,
|
|
1822
1822
|
props: attribute_to_object(this.attributes),
|
|
@@ -2985,7 +2985,7 @@
|
|
|
2985
2985
|
constructor(options) {
|
|
2986
2986
|
super();
|
|
2987
2987
|
this.shadowRoot.innerHTML = `<style>:host{--button-height:2.625rem;--button-height-compact:2rem;--button-height-tall:3.25rem;box-sizing:border-box;font-family:var(--goa-font-family-sans)}@media(max-width: 480px){:host{width:100%}button{width:100%}}button{display:inline-flex;box-sizing:border-box;border-radius:0.25rem;border:2px solid var(--goa-color-interactive-default);box-sizing:border-box;cursor:pointer;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-5);font-weight:400;height:var(--button-height);letter-spacing:var(--goa-letter-spacing-button);line-height:100%;padding:0 0.75rem;gap:0.5rem;align-items:center;justify-content:center;transition:transform 0.1s ease-in-out, background-color 0.2s ease-in-out,
|
|
2988
|
-
border-color 0.2s ease-in-out}.text{padding-bottom:var(--font-valign-fix, 0)}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--goa-font-size-4)}button.start{height:var(--button-height-tall);font-weight:var(--goa-font-weight-bold)}button.start,button.submit,button.primary{border:2px solid var(--goa-color-interactive-default);background-color:var(--goa-color-interactive-default);color:var(--goa-color-text-light)}button.start:hover,button.submit:hover,button.primary:hover{border-color:var(--goa-color-interactive-hover);background-color:var(--goa-color-interactive-hover)}button.start:focus,button.start:active,button.submit:focus,button.submit:active,button.primary:focus,button.primary:active{box-shadow:0 0 0 3px var(--goa-color-interactive-focus);border-color:var(--goa-color-interactive-hover);background-color:var(--goa-color-interactive-hover);outline:none}button.secondary{border:2px solid var(--goa-color-interactive-default);background-color:var(--goa-color-greyscale-white);color:var(--goa-color-interactive-default)}button.secondary:hover{border-color:var(--goa-color-interactive-hover);color:var(--goa-color-interactive-hover);background-color:var(--goa-color-greyscale-100)}button.secondary:focus,button.secondary:active{border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);background-color:var(--goa-color-greyscale-100);outline:none}button.tertiary{border:1px solid transparent;background-color:transparent;color:var(--goa-color-interactive-default);text-decoration:underline}button.tertiary:hover{border-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);background-color:var(--goa-color-greyscale-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--goa-color-greyscale-100);background-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);outline:none}.submit.destructive,.primary.destructive{color:var(--goa-color-greyscale-white);background-color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default)}.submit.destructive:hover,.primary.destructive:hover{background-color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark)}.submit.destructive:focus,.primary.destructive:focus,.primary.destructive:active{background-color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark)}.secondary.destructive{color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default);background-color:var(--goa-color-greyscale-white)}.secondary.destructive:hover{border-color:var(--goa-color-emergency-dark);color:var(--goa-color-emergency-dark);background-color:var(--goa-color-greyscale-white)}.secondary.destructive:focus,.secondary.destructive:active{color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark);background-color:var(--goa-color-greyscale-white)}.tertiary.destructive{color:var(--goa-color-emergency-default);border-color:transparent}.tertiary.destructive:hover{color:var(--goa-color-emergency-dark)}.tertiary.destructive:focus,.tertiary.destructive:active{color:var(--goa-color-emergency-dark)}</style>`;
|
|
2988
|
+
border-color 0.2s ease-in-out}.text{padding-bottom:var(--font-valign-fix, 0)}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--goa-font-size-4);padding-left:var(--goa-space-xs);padding-right:var(--goa-space-xs)}button.start{height:var(--button-height-tall);font-weight:var(--goa-font-weight-bold)}button.start,button.submit,button.primary{border:2px solid var(--goa-color-interactive-default);background-color:var(--goa-color-interactive-default);color:var(--goa-color-text-light)}button.start:hover,button.submit:hover,button.primary:hover{border-color:var(--goa-color-interactive-hover);background-color:var(--goa-color-interactive-hover)}button.start:focus,button.start:active,button.submit:focus,button.submit:active,button.primary:focus,button.primary:active{box-shadow:0 0 0 3px var(--goa-color-interactive-focus);border-color:var(--goa-color-interactive-hover);background-color:var(--goa-color-interactive-hover);outline:none}button.secondary{border:2px solid var(--goa-color-interactive-default);background-color:var(--goa-color-greyscale-white);color:var(--goa-color-interactive-default)}button.secondary:hover{border-color:var(--goa-color-interactive-hover);color:var(--goa-color-interactive-hover);background-color:var(--goa-color-greyscale-100)}button.secondary:focus,button.secondary:active{border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);background-color:var(--goa-color-greyscale-100);outline:none}button.tertiary{border:1px solid transparent;background-color:transparent;color:var(--goa-color-interactive-default);text-decoration:underline}button.tertiary:hover{border-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);background-color:var(--goa-color-greyscale-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--goa-color-greyscale-100);background-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);outline:none}.submit.destructive,.primary.destructive{color:var(--goa-color-greyscale-white);background-color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default)}.submit.destructive:hover,.primary.destructive:hover{background-color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark)}.submit.destructive:focus,.primary.destructive:focus,.primary.destructive:active{background-color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark)}.secondary.destructive{color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default);background-color:var(--goa-color-greyscale-white)}.secondary.destructive:hover{border-color:var(--goa-color-emergency-dark);color:var(--goa-color-emergency-dark);background-color:var(--goa-color-greyscale-white)}.secondary.destructive:focus,.secondary.destructive:active{color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark);background-color:var(--goa-color-greyscale-white)}.tertiary.destructive{color:var(--goa-color-emergency-default);border-color:transparent}.tertiary.destructive:hover{color:var(--goa-color-emergency-dark)}.tertiary.destructive:focus,.tertiary.destructive:active{color:var(--goa-color-emergency-dark)}</style>`;
|
|
2989
2989
|
init(this, {
|
|
2990
2990
|
target: this.shadowRoot,
|
|
2991
2991
|
props: attribute_to_object(this.attributes),
|
|
@@ -8782,7 +8782,7 @@
|
|
|
8782
8782
|
class Footer extends SvelteElement {
|
|
8783
8783
|
constructor(options) {
|
|
8784
8784
|
super();
|
|
8785
|
-
this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.app-footer{background-color:var(--goa-color-greyscale-100);border-top:2px solid var(--goa-color-greyscale-200);border-bottom:1rem solid var(--goa-color-brand-default)}.content{padding:2rem 1rem;margin:0 auto;width:min(var(--max-content-width), 100%)}@media(min-width: 640px){.content{padding:2rem
|
|
8785
|
+
this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.app-footer{background-color:var(--goa-color-greyscale-100);border-top:2px solid var(--goa-color-greyscale-200);border-bottom:1rem solid var(--goa-color-brand-default)}.content{padding:2rem 1rem;margin:0 auto;width:min(var(--max-content-width), 100%)}@media(min-width: 640px){.content{padding:2rem 2rem}}@media(min-width: 1024px){.content{padding:2rem 4.5rem}}.meta-section{display:flex;flex-direction:column;padding:1rem 0}.meta-section.with-meta-links{gap:2rem;justify-content:space-between}.meta-links{display:none}.with-meta-links .meta-links{display:block}.nav-links{display:flex;flex-direction:column;gap:2rem}.abgov{display:flex;flex-direction:column;justify-content:space-between;width:100%}@media(min-width: 640px){.meta-section{flex-direction:row;gap:2rem}.nav-links{flex-direction:row}.abgov{align-items:center;flex-direction:row-reverse}}.abgov.with-meta-links{gap:1rem;flex-direction:column;width:unset}@media(min-width: 640px){.abgov.with-meta-links{align-items:flex-end}}.goa-copyright{white-space:nowrap}a{color:var(--goa-color-text-secondary)}</style>`;
|
|
8786
8786
|
init(this, {
|
|
8787
8787
|
target: this.shadowRoot,
|
|
8788
8788
|
props: attribute_to_object(this.attributes),
|
|
@@ -10082,6 +10082,7 @@
|
|
|
10082
10082
|
let div0;
|
|
10083
10083
|
let t2;
|
|
10084
10084
|
let slot1;
|
|
10085
|
+
let goa_page_block_width_value;
|
|
10085
10086
|
return {
|
|
10086
10087
|
c() {
|
|
10087
10088
|
div1 = element("div");
|
|
@@ -10099,7 +10100,9 @@
|
|
|
10099
10100
|
attr(div0, "class", "goa-hero-banner-content");
|
|
10100
10101
|
attr(div0, "role", "note");
|
|
10101
10102
|
attr(slot1, "name", "actions");
|
|
10102
|
-
set_custom_element_data(goa_page_block, "width",
|
|
10103
|
+
set_custom_element_data(goa_page_block, "width", goa_page_block_width_value =
|
|
10104
|
+
/*maxcontentwidth*/
|
|
10105
|
+
ctx[3] || "full");
|
|
10103
10106
|
attr(div1, "class", "goa-hero");
|
|
10104
10107
|
attr(div1, "data-testid", "background");
|
|
10105
10108
|
set_style(div1, "background-image", "linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.40) 40%, rgba(0, 0, 0, 0.6) 100%), url(" +
|
|
@@ -10131,6 +10134,14 @@
|
|
|
10131
10134
|
/*heading*/
|
|
10132
10135
|
ctx[0]);
|
|
10133
10136
|
|
|
10137
|
+
if (dirty &
|
|
10138
|
+
/*maxcontentwidth*/
|
|
10139
|
+
8 && goa_page_block_width_value !== (goa_page_block_width_value =
|
|
10140
|
+
/*maxcontentwidth*/
|
|
10141
|
+
ctx[3] || "full")) {
|
|
10142
|
+
set_custom_element_data(goa_page_block, "width", goa_page_block_width_value);
|
|
10143
|
+
}
|
|
10144
|
+
|
|
10134
10145
|
if (dirty &
|
|
10135
10146
|
/*backgroundurl*/
|
|
10136
10147
|
2) {
|
|
@@ -10168,14 +10179,18 @@
|
|
|
10168
10179
|
let {
|
|
10169
10180
|
minheight = "600px"
|
|
10170
10181
|
} = $$props;
|
|
10182
|
+
let {
|
|
10183
|
+
maxcontentwidth = "100%"
|
|
10184
|
+
} = $$props;
|
|
10171
10185
|
|
|
10172
10186
|
$$self.$$set = $$props => {
|
|
10173
10187
|
if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
|
|
10174
10188
|
if ('backgroundurl' in $$props) $$invalidate(1, backgroundurl = $$props.backgroundurl);
|
|
10175
10189
|
if ('minheight' in $$props) $$invalidate(2, minheight = $$props.minheight);
|
|
10190
|
+
if ('maxcontentwidth' in $$props) $$invalidate(3, maxcontentwidth = $$props.maxcontentwidth);
|
|
10176
10191
|
};
|
|
10177
10192
|
|
|
10178
|
-
return [heading, backgroundurl, minheight];
|
|
10193
|
+
return [heading, backgroundurl, minheight, maxcontentwidth];
|
|
10179
10194
|
}
|
|
10180
10195
|
|
|
10181
10196
|
class HeroBanner extends SvelteElement {
|
|
@@ -10189,7 +10204,8 @@
|
|
|
10189
10204
|
}, instance$o, create_fragment$q, safe_not_equal, {
|
|
10190
10205
|
heading: 0,
|
|
10191
10206
|
backgroundurl: 1,
|
|
10192
|
-
minheight: 2
|
|
10207
|
+
minheight: 2,
|
|
10208
|
+
maxcontentwidth: 3
|
|
10193
10209
|
}, null);
|
|
10194
10210
|
|
|
10195
10211
|
if (options) {
|
|
@@ -10205,7 +10221,7 @@
|
|
|
10205
10221
|
}
|
|
10206
10222
|
|
|
10207
10223
|
static get observedAttributes() {
|
|
10208
|
-
return ["heading", "backgroundurl", "minheight"];
|
|
10224
|
+
return ["heading", "backgroundurl", "minheight", "maxcontentwidth"];
|
|
10209
10225
|
}
|
|
10210
10226
|
|
|
10211
10227
|
get heading() {
|
|
@@ -10241,6 +10257,17 @@
|
|
|
10241
10257
|
flush();
|
|
10242
10258
|
}
|
|
10243
10259
|
|
|
10260
|
+
get maxcontentwidth() {
|
|
10261
|
+
return this.$$.ctx[3];
|
|
10262
|
+
}
|
|
10263
|
+
|
|
10264
|
+
set maxcontentwidth(maxcontentwidth) {
|
|
10265
|
+
this.$$set({
|
|
10266
|
+
maxcontentwidth
|
|
10267
|
+
});
|
|
10268
|
+
flush();
|
|
10269
|
+
}
|
|
10270
|
+
|
|
10244
10271
|
}
|
|
10245
10272
|
|
|
10246
10273
|
customElements.define("goa-hero-banner", HeroBanner);
|
|
@@ -12506,7 +12533,7 @@
|
|
|
12506
12533
|
}
|
|
12507
12534
|
|
|
12508
12535
|
};
|
|
12509
|
-
} // (
|
|
12536
|
+
} // (31:4) {#if ["alpha", "beta"].includes(type)}
|
|
12510
12537
|
|
|
12511
12538
|
|
|
12512
12539
|
function create_if_block_1$5(ctx) {
|
|
@@ -12533,7 +12560,7 @@
|
|
|
12533
12560
|
t2 = text("This is a new ");
|
|
12534
12561
|
a = element("a");
|
|
12535
12562
|
a.textContent = "Alberta Government";
|
|
12536
|
-
t4 = text(" service\n
|
|
12563
|
+
t4 = text(" service\n ");
|
|
12537
12564
|
if (if_block) if_block.c();
|
|
12538
12565
|
attr(div0, "data-testid", "type");
|
|
12539
12566
|
attr(div0, "class", div0_class_value = "service-type service-type--" +
|
|
@@ -12594,7 +12621,7 @@
|
|
|
12594
12621
|
}
|
|
12595
12622
|
|
|
12596
12623
|
};
|
|
12597
|
-
} // (
|
|
12624
|
+
} // (40:8) {#if feedbackurl}
|
|
12598
12625
|
|
|
12599
12626
|
|
|
12600
12627
|
function create_if_block_2$5(ctx) {
|
|
@@ -12636,7 +12663,7 @@
|
|
|
12636
12663
|
}
|
|
12637
12664
|
|
|
12638
12665
|
};
|
|
12639
|
-
} // (
|
|
12666
|
+
} // (46:4) {#if version}
|
|
12640
12667
|
|
|
12641
12668
|
|
|
12642
12669
|
function create_if_block$b(ctx) {
|
|
@@ -12674,13 +12701,15 @@
|
|
|
12674
12701
|
|
|
12675
12702
|
function create_fragment$m(ctx) {
|
|
12676
12703
|
let header;
|
|
12704
|
+
let div1;
|
|
12677
12705
|
let t0;
|
|
12678
12706
|
let show_if = ["alpha", "beta"].includes(
|
|
12679
12707
|
/*type*/
|
|
12680
12708
|
ctx[0]);
|
|
12681
12709
|
let t1;
|
|
12682
|
-
let
|
|
12710
|
+
let div0;
|
|
12683
12711
|
let t2;
|
|
12712
|
+
let header_style_value;
|
|
12684
12713
|
let if_block0 =
|
|
12685
12714
|
/*type*/
|
|
12686
12715
|
ctx[0] === "live" && create_if_block_3$5();
|
|
@@ -12691,27 +12720,33 @@
|
|
|
12691
12720
|
return {
|
|
12692
12721
|
c() {
|
|
12693
12722
|
header = element("header");
|
|
12723
|
+
div1 = element("div");
|
|
12694
12724
|
if (if_block0) if_block0.c();
|
|
12695
12725
|
t0 = space();
|
|
12696
12726
|
if (if_block1) if_block1.c();
|
|
12697
12727
|
t1 = space();
|
|
12698
|
-
|
|
12728
|
+
div0 = element("div");
|
|
12699
12729
|
t2 = space();
|
|
12700
12730
|
if (if_block2) if_block2.c();
|
|
12701
12731
|
this.c = noop;
|
|
12702
|
-
attr(
|
|
12732
|
+
attr(div0, "class", "spacer");
|
|
12733
|
+
attr(div1, "class", "content-container");
|
|
12703
12734
|
attr(header, "class", "goa-official-site-header");
|
|
12735
|
+
attr(header, "style", header_style_value = `--max-content-width: ${
|
|
12736
|
+
/*maxcontentwidth*/
|
|
12737
|
+
ctx[3]}`);
|
|
12704
12738
|
},
|
|
12705
12739
|
|
|
12706
12740
|
m(target, anchor) {
|
|
12707
12741
|
insert(target, header, anchor);
|
|
12708
|
-
|
|
12709
|
-
|
|
12710
|
-
|
|
12711
|
-
|
|
12712
|
-
append(
|
|
12713
|
-
append(
|
|
12714
|
-
|
|
12742
|
+
append(header, div1);
|
|
12743
|
+
if (if_block0) if_block0.m(div1, null);
|
|
12744
|
+
append(div1, t0);
|
|
12745
|
+
if (if_block1) if_block1.m(div1, null);
|
|
12746
|
+
append(div1, t1);
|
|
12747
|
+
append(div1, div0);
|
|
12748
|
+
append(div1, t2);
|
|
12749
|
+
if (if_block2) if_block2.m(div1, null);
|
|
12715
12750
|
},
|
|
12716
12751
|
|
|
12717
12752
|
p(ctx, [dirty]) {
|
|
@@ -12721,7 +12756,7 @@
|
|
|
12721
12756
|
if (if_block0) ;else {
|
|
12722
12757
|
if_block0 = create_if_block_3$5();
|
|
12723
12758
|
if_block0.c();
|
|
12724
|
-
if_block0.m(
|
|
12759
|
+
if_block0.m(div1, t0);
|
|
12725
12760
|
}
|
|
12726
12761
|
} else if (if_block0) {
|
|
12727
12762
|
if_block0.d(1);
|
|
@@ -12740,7 +12775,7 @@
|
|
|
12740
12775
|
} else {
|
|
12741
12776
|
if_block1 = create_if_block_1$5(ctx);
|
|
12742
12777
|
if_block1.c();
|
|
12743
|
-
if_block1.m(
|
|
12778
|
+
if_block1.m(div1, t1);
|
|
12744
12779
|
}
|
|
12745
12780
|
} else if (if_block1) {
|
|
12746
12781
|
if_block1.d(1);
|
|
@@ -12755,12 +12790,20 @@
|
|
|
12755
12790
|
} else {
|
|
12756
12791
|
if_block2 = create_if_block$b(ctx);
|
|
12757
12792
|
if_block2.c();
|
|
12758
|
-
if_block2.m(
|
|
12793
|
+
if_block2.m(div1, null);
|
|
12759
12794
|
}
|
|
12760
12795
|
} else if (if_block2) {
|
|
12761
12796
|
if_block2.d(1);
|
|
12762
12797
|
if_block2 = null;
|
|
12763
12798
|
}
|
|
12799
|
+
|
|
12800
|
+
if (dirty &
|
|
12801
|
+
/*maxcontentwidth*/
|
|
12802
|
+
8 && header_style_value !== (header_style_value = `--max-content-width: ${
|
|
12803
|
+
/*maxcontentwidth*/
|
|
12804
|
+
ctx[3]}`)) {
|
|
12805
|
+
attr(header, "style", header_style_value);
|
|
12806
|
+
}
|
|
12764
12807
|
},
|
|
12765
12808
|
|
|
12766
12809
|
i: noop,
|
|
@@ -12792,6 +12835,9 @@
|
|
|
12792
12835
|
let {
|
|
12793
12836
|
feedbackurl = ""
|
|
12794
12837
|
} = $$props;
|
|
12838
|
+
let {
|
|
12839
|
+
maxcontentwidth = "100%"
|
|
12840
|
+
} = $$props;
|
|
12795
12841
|
onMount(() => {
|
|
12796
12842
|
setTimeout(() => validateType(type), 1);
|
|
12797
12843
|
});
|
|
@@ -12800,15 +12846,16 @@
|
|
|
12800
12846
|
if ('type' in $$props) $$invalidate(0, type = $$props.type);
|
|
12801
12847
|
if ('version' in $$props) $$invalidate(1, version = $$props.version);
|
|
12802
12848
|
if ('feedbackurl' in $$props) $$invalidate(2, feedbackurl = $$props.feedbackurl);
|
|
12849
|
+
if ('maxcontentwidth' in $$props) $$invalidate(3, maxcontentwidth = $$props.maxcontentwidth);
|
|
12803
12850
|
};
|
|
12804
12851
|
|
|
12805
|
-
return [type, version, feedbackurl];
|
|
12852
|
+
return [type, version, feedbackurl, maxcontentwidth];
|
|
12806
12853
|
}
|
|
12807
12854
|
|
|
12808
12855
|
class MicrositeHeader extends SvelteElement {
|
|
12809
12856
|
constructor(options) {
|
|
12810
12857
|
super();
|
|
12811
|
-
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}a{color:var(--goa-color-interactive-default);cursor:pointer}a:hover{color:var(--goa-color-interactive-hover)}a:focus{outline-width:thin;outline-style:solid;outline-color:var(--goa-color-interactive-hover);outline-offset:0px}.goa-official-site-header{
|
|
12858
|
+
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}a{color:var(--goa-color-interactive-default);cursor:pointer}a:hover{color:var(--goa-color-interactive-hover)}a:focus{outline-width:thin;outline-style:solid;outline-color:var(--goa-color-interactive-hover);outline-offset:0px}.goa-official-site-header{font-size:var(--goa-font-size-2);background-color:var(--goa-color-greyscale-100);padding:0.5rem 1rem}.content-container{display:flex;align-items:start;justify-content:space-between;max-width:min(var(--max-content-width), 100%);margin:0 auto}@media(min-width: 640px){.goa-official-site-header{padding:0.25rem 2rem}.content-container{align-items:center}}@media(min-width: 1024px){.goa-official-site-header{padding:0.25rem 4.5rem}}.spacer{flex:1 1 auto}.version{color:var(--goa-color-text-secondary);padding-left:1rem;line-height:1.25rem}.service-type{font-weight:bold;padding:0.125rem 0.25rem;display:flex;margin-right:1rem;line-height:initial}.service-type--alpha{background-color:var(--goa-color-warning-default);color:var(--goa-color-text-default)}.service-type--beta{background-color:var(--goa-color-brand-default);color:var(--goa-color-text-light)}.site-text{color:var(--goa-color-text-default);line-height:1.25rem}</style>`;
|
|
12812
12859
|
init(this, {
|
|
12813
12860
|
target: this.shadowRoot,
|
|
12814
12861
|
props: attribute_to_object(this.attributes),
|
|
@@ -12816,7 +12863,8 @@
|
|
|
12816
12863
|
}, instance$k, create_fragment$m, safe_not_equal, {
|
|
12817
12864
|
type: 0,
|
|
12818
12865
|
version: 1,
|
|
12819
|
-
feedbackurl: 2
|
|
12866
|
+
feedbackurl: 2,
|
|
12867
|
+
maxcontentwidth: 3
|
|
12820
12868
|
}, null);
|
|
12821
12869
|
|
|
12822
12870
|
if (options) {
|
|
@@ -12832,7 +12880,7 @@
|
|
|
12832
12880
|
}
|
|
12833
12881
|
|
|
12834
12882
|
static get observedAttributes() {
|
|
12835
|
-
return ["type", "version", "feedbackurl"];
|
|
12883
|
+
return ["type", "version", "feedbackurl", "maxcontentwidth"];
|
|
12836
12884
|
}
|
|
12837
12885
|
|
|
12838
12886
|
get type() {
|
|
@@ -12868,6 +12916,17 @@
|
|
|
12868
12916
|
flush();
|
|
12869
12917
|
}
|
|
12870
12918
|
|
|
12919
|
+
get maxcontentwidth() {
|
|
12920
|
+
return this.$$.ctx[3];
|
|
12921
|
+
}
|
|
12922
|
+
|
|
12923
|
+
set maxcontentwidth(maxcontentwidth) {
|
|
12924
|
+
this.$$set({
|
|
12925
|
+
maxcontentwidth
|
|
12926
|
+
});
|
|
12927
|
+
flush();
|
|
12928
|
+
}
|
|
12929
|
+
|
|
12871
12930
|
}
|
|
12872
12931
|
|
|
12873
12932
|
customElements.define("goa-microsite-header", MicrositeHeader);
|
|
@@ -13668,6 +13727,7 @@
|
|
|
13668
13727
|
/* libs/web-components/src/components/notification/Notification.svelte generated by Svelte v3.51.0 */
|
|
13669
13728
|
|
|
13670
13729
|
function create_if_block$9(ctx) {
|
|
13730
|
+
let div4;
|
|
13671
13731
|
let div3;
|
|
13672
13732
|
let div0;
|
|
13673
13733
|
let goa_icon;
|
|
@@ -13678,13 +13738,15 @@
|
|
|
13678
13738
|
let div2;
|
|
13679
13739
|
let goa_icon_button;
|
|
13680
13740
|
let goa_icon_button_inverted_value;
|
|
13681
|
-
let
|
|
13682
|
-
let
|
|
13741
|
+
let div4_class_value;
|
|
13742
|
+
let div4_style_value;
|
|
13743
|
+
let div4_transition;
|
|
13683
13744
|
let current;
|
|
13684
13745
|
let mounted;
|
|
13685
13746
|
let dispose;
|
|
13686
13747
|
return {
|
|
13687
13748
|
c() {
|
|
13749
|
+
div4 = element("div");
|
|
13688
13750
|
div3 = element("div");
|
|
13689
13751
|
div0 = element("div");
|
|
13690
13752
|
goa_icon = element("goa-icon");
|
|
@@ -13696,7 +13758,7 @@
|
|
|
13696
13758
|
goa_icon_button = element("goa-icon-button");
|
|
13697
13759
|
set_custom_element_data(goa_icon, "type",
|
|
13698
13760
|
/*iconType*/
|
|
13699
|
-
ctx[
|
|
13761
|
+
ctx[3]);
|
|
13700
13762
|
set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value =
|
|
13701
13763
|
/*type*/
|
|
13702
13764
|
ctx[0] === "important" ? "false" : "true");
|
|
@@ -13708,13 +13770,18 @@
|
|
|
13708
13770
|
/*type*/
|
|
13709
13771
|
ctx[0] === "important" ? "false" : "true");
|
|
13710
13772
|
attr(div2, "class", "close");
|
|
13711
|
-
attr(div3, "class",
|
|
13773
|
+
attr(div3, "class", "content-container");
|
|
13774
|
+
attr(div4, "class", div4_class_value = "notification " +
|
|
13712
13775
|
/*type*/
|
|
13713
13776
|
ctx[0]);
|
|
13777
|
+
attr(div4, "style", div4_style_value = `--max-content-width: ${
|
|
13778
|
+
/*maxcontentwidth*/
|
|
13779
|
+
ctx[1]}`);
|
|
13714
13780
|
},
|
|
13715
13781
|
|
|
13716
13782
|
m(target, anchor) {
|
|
13717
|
-
insert(target,
|
|
13783
|
+
insert(target, div4, anchor);
|
|
13784
|
+
append(div4, div3);
|
|
13718
13785
|
append(div3, div0);
|
|
13719
13786
|
append(div0, goa_icon);
|
|
13720
13787
|
append(div3, t0);
|
|
@@ -13727,7 +13794,7 @@
|
|
|
13727
13794
|
if (!mounted) {
|
|
13728
13795
|
dispose = listen(goa_icon_button, "click",
|
|
13729
13796
|
/*close*/
|
|
13730
|
-
ctx[
|
|
13797
|
+
ctx[4]);
|
|
13731
13798
|
mounted = true;
|
|
13732
13799
|
}
|
|
13733
13800
|
},
|
|
@@ -13735,10 +13802,10 @@
|
|
|
13735
13802
|
p(ctx, dirty) {
|
|
13736
13803
|
if (!current || dirty &
|
|
13737
13804
|
/*iconType*/
|
|
13738
|
-
|
|
13805
|
+
8) {
|
|
13739
13806
|
set_custom_element_data(goa_icon, "type",
|
|
13740
13807
|
/*iconType*/
|
|
13741
|
-
ctx[
|
|
13808
|
+
ctx[3]);
|
|
13742
13809
|
}
|
|
13743
13810
|
|
|
13744
13811
|
if (!current || dirty &
|
|
@@ -13759,31 +13826,39 @@
|
|
|
13759
13826
|
|
|
13760
13827
|
if (!current || dirty &
|
|
13761
13828
|
/*type*/
|
|
13762
|
-
1 &&
|
|
13829
|
+
1 && div4_class_value !== (div4_class_value = "notification " +
|
|
13763
13830
|
/*type*/
|
|
13764
13831
|
ctx[0])) {
|
|
13765
|
-
attr(
|
|
13832
|
+
attr(div4, "class", div4_class_value);
|
|
13833
|
+
}
|
|
13834
|
+
|
|
13835
|
+
if (!current || dirty &
|
|
13836
|
+
/*maxcontentwidth*/
|
|
13837
|
+
2 && div4_style_value !== (div4_style_value = `--max-content-width: ${
|
|
13838
|
+
/*maxcontentwidth*/
|
|
13839
|
+
ctx[1]}`)) {
|
|
13840
|
+
attr(div4, "style", div4_style_value);
|
|
13766
13841
|
}
|
|
13767
13842
|
},
|
|
13768
13843
|
|
|
13769
13844
|
i(local) {
|
|
13770
13845
|
if (current) return;
|
|
13771
13846
|
add_render_callback(() => {
|
|
13772
|
-
if (!
|
|
13773
|
-
|
|
13847
|
+
if (!div4_transition) div4_transition = create_bidirectional_transition(div4, fade, {}, true);
|
|
13848
|
+
div4_transition.run(1);
|
|
13774
13849
|
});
|
|
13775
13850
|
current = true;
|
|
13776
13851
|
},
|
|
13777
13852
|
|
|
13778
13853
|
o(local) {
|
|
13779
|
-
if (!
|
|
13780
|
-
|
|
13854
|
+
if (!div4_transition) div4_transition = create_bidirectional_transition(div4, fade, {}, false);
|
|
13855
|
+
div4_transition.run(0);
|
|
13781
13856
|
current = false;
|
|
13782
13857
|
},
|
|
13783
13858
|
|
|
13784
13859
|
d(detaching) {
|
|
13785
|
-
if (detaching) detach(
|
|
13786
|
-
if (detaching &&
|
|
13860
|
+
if (detaching) detach(div4);
|
|
13861
|
+
if (detaching && div4_transition) div4_transition.end();
|
|
13787
13862
|
mounted = false;
|
|
13788
13863
|
dispose();
|
|
13789
13864
|
}
|
|
@@ -13796,7 +13871,7 @@
|
|
|
13796
13871
|
let current;
|
|
13797
13872
|
let if_block =
|
|
13798
13873
|
/*show*/
|
|
13799
|
-
ctx[
|
|
13874
|
+
ctx[2] && create_if_block$9(ctx);
|
|
13800
13875
|
return {
|
|
13801
13876
|
c() {
|
|
13802
13877
|
if (if_block) if_block.c();
|
|
@@ -13813,13 +13888,13 @@
|
|
|
13813
13888
|
p(ctx, [dirty]) {
|
|
13814
13889
|
if (
|
|
13815
13890
|
/*show*/
|
|
13816
|
-
ctx[
|
|
13891
|
+
ctx[2]) {
|
|
13817
13892
|
if (if_block) {
|
|
13818
13893
|
if_block.p(ctx, dirty);
|
|
13819
13894
|
|
|
13820
13895
|
if (dirty &
|
|
13821
13896
|
/*show*/
|
|
13822
|
-
|
|
13897
|
+
4) {
|
|
13823
13898
|
transition_in(if_block, 1);
|
|
13824
13899
|
}
|
|
13825
13900
|
} else {
|
|
@@ -13862,13 +13937,16 @@
|
|
|
13862
13937
|
let {
|
|
13863
13938
|
type = ""
|
|
13864
13939
|
} = $$props;
|
|
13940
|
+
let {
|
|
13941
|
+
maxcontentwidth = "100%"
|
|
13942
|
+
} = $$props;
|
|
13865
13943
|
let show = true;
|
|
13866
13944
|
onMount(() => {
|
|
13867
13945
|
setTimeout(() => validateType(type), 1);
|
|
13868
13946
|
});
|
|
13869
13947
|
|
|
13870
13948
|
function close(e) {
|
|
13871
|
-
$$invalidate(
|
|
13949
|
+
$$invalidate(2, show = false);
|
|
13872
13950
|
e.target.dispatchEvent(new CustomEvent("_dismiss", {
|
|
13873
13951
|
composed: true
|
|
13874
13952
|
}));
|
|
@@ -13877,29 +13955,31 @@
|
|
|
13877
13955
|
|
|
13878
13956
|
$$self.$$set = $$props => {
|
|
13879
13957
|
if ('type' in $$props) $$invalidate(0, type = $$props.type);
|
|
13958
|
+
if ('maxcontentwidth' in $$props) $$invalidate(1, maxcontentwidth = $$props.maxcontentwidth);
|
|
13880
13959
|
};
|
|
13881
13960
|
|
|
13882
13961
|
$$self.$$.update = () => {
|
|
13883
13962
|
if ($$self.$$.dirty &
|
|
13884
13963
|
/*type*/
|
|
13885
13964
|
1) {
|
|
13886
|
-
$$invalidate(
|
|
13965
|
+
$$invalidate(3, iconType = type === "emergency" ? "warning" : type === "important" ? "alert-circle" : type === "information" ? "information-circle" : type === "event" ? "calendar" : "");
|
|
13887
13966
|
}
|
|
13888
13967
|
};
|
|
13889
13968
|
|
|
13890
|
-
return [type, show, iconType, close];
|
|
13969
|
+
return [type, maxcontentwidth, show, iconType, close];
|
|
13891
13970
|
}
|
|
13892
13971
|
|
|
13893
13972
|
class Notification extends SvelteElement {
|
|
13894
13973
|
constructor(options) {
|
|
13895
13974
|
super();
|
|
13896
|
-
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.notification{padding:1.5rem;display:flex
|
|
13975
|
+
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.notification{padding:1.5rem 1rem;display:flex}@media(min-width: 640px){.notification{padding:1.5rem 2rem}}@media(min-width: 1024px){.notification{padding:1.5rem 4.5rem}}.emergency{background-color:var(--goa-color-emergency-default);color:var(--goa-color-greyscale-white)}.important{background-color:var(--goa-color-warning-default)}.information{background-color:var(--goa-color-info-default);color:var(--goa-color-greyscale-white)}.event{background-color:var(--goa-color-success-default);color:var(--goa-color-greyscale-white)}.icon{flex:0 0 auto}.content-container{display:flex;flex-direction:row;flex:1 1 auto;gap:1rem;margin:0 auto;max-width:min(var(--max-content-width), 100%)}.content{flex:1 1 auto}::slotted(a){color:unset !important;outline:unset !important}.close{flex:0 0 auto}</style>`;
|
|
13897
13976
|
init(this, {
|
|
13898
13977
|
target: this.shadowRoot,
|
|
13899
13978
|
props: attribute_to_object(this.attributes),
|
|
13900
13979
|
customElement: true
|
|
13901
13980
|
}, instance$i, create_fragment$k, safe_not_equal, {
|
|
13902
|
-
type: 0
|
|
13981
|
+
type: 0,
|
|
13982
|
+
maxcontentwidth: 1
|
|
13903
13983
|
}, null);
|
|
13904
13984
|
|
|
13905
13985
|
if (options) {
|
|
@@ -13915,7 +13995,7 @@
|
|
|
13915
13995
|
}
|
|
13916
13996
|
|
|
13917
13997
|
static get observedAttributes() {
|
|
13918
|
-
return ["type"];
|
|
13998
|
+
return ["type", "maxcontentwidth"];
|
|
13919
13999
|
}
|
|
13920
14000
|
|
|
13921
14001
|
get type() {
|
|
@@ -13929,6 +14009,17 @@
|
|
|
13929
14009
|
flush();
|
|
13930
14010
|
}
|
|
13931
14011
|
|
|
14012
|
+
get maxcontentwidth() {
|
|
14013
|
+
return this.$$.ctx[1];
|
|
14014
|
+
}
|
|
14015
|
+
|
|
14016
|
+
set maxcontentwidth(maxcontentwidth) {
|
|
14017
|
+
this.$$set({
|
|
14018
|
+
maxcontentwidth
|
|
14019
|
+
});
|
|
14020
|
+
flush();
|
|
14021
|
+
}
|
|
14022
|
+
|
|
13932
14023
|
}
|
|
13933
14024
|
|
|
13934
14025
|
customElements.define("goa-notification", Notification);
|
|
@@ -14016,7 +14107,7 @@
|
|
|
14016
14107
|
class PageBlock extends SvelteElement {
|
|
14017
14108
|
constructor(options) {
|
|
14018
14109
|
super();
|
|
14019
|
-
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.page-content{max-width:var(--max-width);margin:0 auto;padding:0
|
|
14110
|
+
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.page-content{max-width:var(--max-width);margin:0 auto;padding:0 1rem}@media(min-width: 640px){.page-content{padding:0 2rem}}@media(min-width: 1024px){.page-content{padding:0 4.5rem}}</style>`;
|
|
14020
14111
|
init(this, {
|
|
14021
14112
|
target: this.shadowRoot,
|
|
14022
14113
|
props: attribute_to_object(this.attributes),
|
|
@@ -17813,7 +17904,7 @@
|
|
|
17813
17904
|
class Table extends SvelteElement {
|
|
17814
17905
|
constructor(options) {
|
|
17815
17906
|
super();
|
|
17816
|
-
this.shadowRoot.innerHTML = `<style>:host{overflow-x:auto}table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{font:var(--goa-typography-body-m);padding:0.75rem 1rem;border-bottom:1px solid var(--goa-color-greyscale-200)}table .goa-table-number-column{font:var(--goa-typography-number-m);text-align:right}table.relaxed td{padding:1rem}th{background-color:var(--goa-color-greyscale-white);color:var(--goa-color-text-secondary);padding:1rem;text-align:left;border-bottom:2px solid var(--goa-color-greyscale-
|
|
17907
|
+
this.shadowRoot.innerHTML = `<style>:host{overflow-x:auto}table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{font:var(--goa-typography-body-m);padding:0.75rem 1rem;border-bottom:1px solid var(--goa-color-greyscale-200)}table .goa-table-number-column{font:var(--goa-typography-number-m);text-align:right}table.relaxed td{padding:1rem}th{background-color:var(--goa-color-greyscale-white);color:var(--goa-color-text-secondary);padding:1rem;text-align:left;border-bottom:2px solid var(--goa-color-greyscale-600);vertical-align:bottom}th:has(goa-table-sort-header){padding:0}tfoot td{background-color:var(--goa-color-greyscale-100)}tfoot tr:first-child td{border-top:2px solid var(--goa-color-greyscale-200)}tfoot tr:last-child td{border-bottom:none}</style>`;
|
|
17817
17908
|
init(this, {
|
|
17818
17909
|
target: this.shadowRoot,
|
|
17819
17910
|
props: attribute_to_object(this.attributes),
|
|
@@ -22546,12 +22637,14 @@
|
|
|
22546
22637
|
var heading = _a.heading,
|
|
22547
22638
|
backgroundUrl = _a.backgroundUrl,
|
|
22548
22639
|
minHeight = _a.minHeight,
|
|
22640
|
+
maxContentWidth = _a.maxContentWidth,
|
|
22549
22641
|
children = _a.children,
|
|
22550
22642
|
testId = _a.testId;
|
|
22551
22643
|
return jsxRuntime.jsx("goa-hero-banner", __assign({
|
|
22552
22644
|
heading: heading,
|
|
22553
22645
|
backgroundurl: backgroundUrl,
|
|
22554
22646
|
minheight: minHeight,
|
|
22647
|
+
maxcontentwidth: maxContentWidth,
|
|
22555
22648
|
"data-testid": testId
|
|
22556
22649
|
}, {
|
|
22557
22650
|
children: children
|
|
@@ -22902,12 +22995,14 @@
|
|
|
22902
22995
|
var type = _a.type,
|
|
22903
22996
|
version = _a.version,
|
|
22904
22997
|
feedbackUrl = _a.feedbackUrl,
|
|
22998
|
+
maxContentWidth = _a.maxContentWidth,
|
|
22905
22999
|
testId = _a.testId;
|
|
22906
23000
|
return jsxRuntime.jsx("goa-microsite-header", {
|
|
22907
23001
|
type: type,
|
|
22908
23002
|
version: version,
|
|
22909
23003
|
feedbackurl: feedbackUrl,
|
|
22910
|
-
"data-testid": testId
|
|
23004
|
+
"data-testid": testId,
|
|
23005
|
+
maxcontentwidth: maxContentWidth
|
|
22911
23006
|
}, void 0);
|
|
22912
23007
|
};
|
|
22913
23008
|
|
|
@@ -22969,6 +23064,7 @@
|
|
|
22969
23064
|
var GoANotification = function GoANotification(_a) {
|
|
22970
23065
|
var _b = _a.type,
|
|
22971
23066
|
type = _b === void 0 ? "information" : _b,
|
|
23067
|
+
maxContentWidth = _a.maxContentWidth,
|
|
22972
23068
|
children = _a.children,
|
|
22973
23069
|
testId = _a.testId,
|
|
22974
23070
|
onDismiss = _a.onDismiss;
|
|
@@ -22992,7 +23088,8 @@
|
|
|
22992
23088
|
return jsxRuntime.jsx("goa-notification", __assign({
|
|
22993
23089
|
ref: el,
|
|
22994
23090
|
type: type,
|
|
22995
|
-
"data-testid": testId
|
|
23091
|
+
"data-testid": testId,
|
|
23092
|
+
maxcontentwidth: maxContentWidth
|
|
22996
23093
|
}, {
|
|
22997
23094
|
children: children
|
|
22998
23095
|
}), void 0);
|