@abgov/react-components 4.9.0 → 4.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1168,7 +1168,7 @@
1168
1168
  /* libs/web-components/src/components/accordion/Accordion.svelte generated by Svelte v3.51.0 */
1169
1169
 
1170
1170
 
1171
- function create_fragment$P(ctx) {
1171
+ function create_fragment$Q(ctx) {
1172
1172
  let div3;
1173
1173
  let details;
1174
1174
  let summary;
@@ -1371,7 +1371,7 @@
1371
1371
  };
1372
1372
  }
1373
1373
 
1374
- function instance$J($$self, $$props, $$invalidate) {
1374
+ function instance$K($$self, $$props, $$invalidate) {
1375
1375
  let isOpen;
1376
1376
  const [HeadingSizes, validateHeadingSize] = typeValidator("Accordion heading size", ["small", "medium"]);
1377
1377
  let {
@@ -1449,7 +1449,7 @@
1449
1449
  target: this.shadowRoot,
1450
1450
  props: attribute_to_object(this.attributes),
1451
1451
  customElement: true
1452
- }, instance$J, create_fragment$P, safe_not_equal, {
1452
+ }, instance$K, create_fragment$Q, safe_not_equal, {
1453
1453
  open: 10,
1454
1454
  heading: 0,
1455
1455
  secondarytext: 1,
@@ -1705,7 +1705,7 @@
1705
1705
  };
1706
1706
  }
1707
1707
 
1708
- function create_fragment$O(ctx) {
1708
+ function create_fragment$P(ctx) {
1709
1709
  let div2;
1710
1710
  let div1;
1711
1711
  let t;
@@ -1789,7 +1789,7 @@
1789
1789
  };
1790
1790
  }
1791
1791
 
1792
- function instance$I($$self, $$props, $$invalidate) {
1792
+ function instance$J($$self, $$props, $$invalidate) {
1793
1793
  let {
1794
1794
  heading = ""
1795
1795
  } = $$props;
@@ -1816,12 +1816,12 @@
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)}@media(max-width: 640px){.app-header{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){.content{padding:1.5rem 1.125rem}}.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>`;
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),
1823
1823
  customElement: true
1824
- }, instance$I, create_fragment$O, safe_not_equal, {
1824
+ }, instance$J, create_fragment$P, safe_not_equal, {
1825
1825
  heading: 0,
1826
1826
  url: 1,
1827
1827
  testid: 2,
@@ -1981,7 +1981,7 @@
1981
1981
  };
1982
1982
  }
1983
1983
 
1984
- function create_fragment$N(ctx) {
1984
+ function create_fragment$O(ctx) {
1985
1985
  let div;
1986
1986
  let t;
1987
1987
  let div_style_value;
@@ -2117,7 +2117,7 @@
2117
2117
  };
2118
2118
  }
2119
2119
 
2120
- function instance$H($$self, $$props, $$invalidate) {
2120
+ function instance$I($$self, $$props, $$invalidate) {
2121
2121
  let showIcon;
2122
2122
  let iconType;
2123
2123
  const [Types, validateType] = typeValidator("Badge type", ["success", "important", "information", "emergency", "dark", "midtone", "light"], true);
@@ -2197,7 +2197,7 @@
2197
2197
  target: this.shadowRoot,
2198
2198
  props: attribute_to_object(this.attributes),
2199
2199
  customElement: true
2200
- }, instance$H, create_fragment$N, safe_not_equal, {
2200
+ }, instance$I, create_fragment$O, safe_not_equal, {
2201
2201
  type: 0,
2202
2202
  testid: 1,
2203
2203
  content: 2,
@@ -2317,7 +2317,7 @@
2317
2317
  customElements.define("goa-badge", Badge);
2318
2318
  /* libs/web-components/src/components/block/Block.svelte generated by Svelte v3.51.0 */
2319
2319
 
2320
- function create_fragment$M(ctx) {
2320
+ function create_fragment$N(ctx) {
2321
2321
  let div;
2322
2322
  let slot;
2323
2323
  let div_style_value;
@@ -2391,7 +2391,7 @@
2391
2391
  };
2392
2392
  }
2393
2393
 
2394
- function instance$G($$self, $$props, $$invalidate) {
2394
+ function instance$H($$self, $$props, $$invalidate) {
2395
2395
  let {
2396
2396
  gap = "m"
2397
2397
  } = $$props;
@@ -2435,7 +2435,7 @@
2435
2435
  target: this.shadowRoot,
2436
2436
  props: attribute_to_object(this.attributes),
2437
2437
  customElement: true
2438
- }, instance$G, create_fragment$M, safe_not_equal, {
2438
+ }, instance$H, create_fragment$N, safe_not_equal, {
2439
2439
  gap: 0,
2440
2440
  direction: 1,
2441
2441
  alignment: 2,
@@ -2741,7 +2741,7 @@
2741
2741
  };
2742
2742
  }
2743
2743
 
2744
- function create_fragment$L(ctx) {
2744
+ function create_fragment$M(ctx) {
2745
2745
  let button;
2746
2746
  let button_class_value;
2747
2747
  let button_style_value;
@@ -2895,7 +2895,7 @@
2895
2895
  };
2896
2896
  }
2897
2897
 
2898
- function instance$F($$self, $$props, $$invalidate) {
2898
+ function instance$G($$self, $$props, $$invalidate) {
2899
2899
  let isDisabled;
2900
2900
  let isButtonDark;
2901
2901
  const [Types, validateType] = typeValidator("Button type", ["primary", "submit", "secondary", "tertiary", "start"], true);
@@ -2985,12 +2985,12 @@
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),
2992
2992
  customElement: true
2993
- }, instance$F, create_fragment$L, safe_not_equal, {
2993
+ }, instance$G, create_fragment$M, safe_not_equal, {
2994
2994
  type: 0,
2995
2995
  size: 1,
2996
2996
  variant: 2,
@@ -3146,7 +3146,7 @@
3146
3146
  customElements.define("goa-button", Button);
3147
3147
  /* libs/web-components/src/components/button-group/ButtonGroup.svelte generated by Svelte v3.51.0 */
3148
3148
 
3149
- function create_fragment$K(ctx) {
3149
+ function create_fragment$L(ctx) {
3150
3150
  let div;
3151
3151
  let slot;
3152
3152
  let div_style_value;
@@ -3216,7 +3216,7 @@
3216
3216
  };
3217
3217
  }
3218
3218
 
3219
- function instance$E($$self, $$props, $$invalidate) {
3219
+ function instance$F($$self, $$props, $$invalidate) {
3220
3220
  let _alignment;
3221
3221
 
3222
3222
  let {
@@ -3280,7 +3280,7 @@
3280
3280
  target: this.shadowRoot,
3281
3281
  props: attribute_to_object(this.attributes),
3282
3282
  customElement: true
3283
- }, instance$E, create_fragment$K, safe_not_equal, {
3283
+ }, instance$F, create_fragment$L, safe_not_equal, {
3284
3284
  alignment: 7,
3285
3285
  gap: 0,
3286
3286
  testid: 1,
@@ -3397,6 +3397,9 @@
3397
3397
  t = text(
3398
3398
  /*heading*/
3399
3399
  ctx[5]);
3400
+ toggle_class(h3, "medium",
3401
+ /*isMediumCallout*/
3402
+ ctx[9]);
3400
3403
  },
3401
3404
 
3402
3405
  m(target, anchor) {
@@ -3410,6 +3413,14 @@
3410
3413
  32) set_data(t,
3411
3414
  /*heading*/
3412
3415
  ctx[5]);
3416
+
3417
+ if (dirty &
3418
+ /*isMediumCallout*/
3419
+ 512) {
3420
+ toggle_class(h3, "medium",
3421
+ /*isMediumCallout*/
3422
+ ctx[9]);
3423
+ }
3413
3424
  },
3414
3425
 
3415
3426
  d(detaching) {
@@ -3419,7 +3430,7 @@
3419
3430
  };
3420
3431
  }
3421
3432
 
3422
- function create_fragment$J(ctx) {
3433
+ function create_fragment$K(ctx) {
3423
3434
  let div;
3424
3435
  let span0;
3425
3436
  let goa_icon;
@@ -3430,6 +3441,11 @@
3430
3441
  let t1;
3431
3442
  let slot;
3432
3443
  let div_style_value;
3444
+ let mounted;
3445
+ let dispose;
3446
+ add_render_callback(
3447
+ /*onwindowresize*/
3448
+ ctx[12]);
3433
3449
  let if_block =
3434
3450
  /*heading*/
3435
3451
  ctx[5] && create_if_block$l(ctx);
@@ -3446,7 +3462,10 @@
3446
3462
  this.c = noop;
3447
3463
  set_custom_element_data(goa_icon, "type",
3448
3464
  /*iconType*/
3449
- ctx[7]);
3465
+ ctx[10]);
3466
+ set_custom_element_data(goa_icon, "size",
3467
+ /*iconSize*/
3468
+ ctx[8]);
3450
3469
  set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value =
3451
3470
  /*type*/
3452
3471
  ctx[4] === "important" ? "false" : "true");
@@ -3467,6 +3486,9 @@
3467
3486
  attr(div, "data-testid",
3468
3487
  /*testid*/
3469
3488
  ctx[6]);
3489
+ toggle_class(div, "medium",
3490
+ /*isMediumCallout*/
3491
+ ctx[9]);
3470
3492
  },
3471
3493
 
3472
3494
  m(target, anchor) {
@@ -3478,15 +3500,30 @@
3478
3500
  if (if_block) if_block.m(span1, null);
3479
3501
  append(span1, t1);
3480
3502
  append(span1, slot);
3503
+
3504
+ if (!mounted) {
3505
+ dispose = listen(window, "resize",
3506
+ /*onwindowresize*/
3507
+ ctx[12]);
3508
+ mounted = true;
3509
+ }
3481
3510
  },
3482
3511
 
3483
3512
  p(ctx, [dirty]) {
3484
3513
  if (dirty &
3485
3514
  /*iconType*/
3486
- 128) {
3515
+ 1024) {
3487
3516
  set_custom_element_data(goa_icon, "type",
3488
3517
  /*iconType*/
3489
- ctx[7]);
3518
+ ctx[10]);
3519
+ }
3520
+
3521
+ if (dirty &
3522
+ /*iconSize*/
3523
+ 256) {
3524
+ set_custom_element_data(goa_icon, "size",
3525
+ /*iconSize*/
3526
+ ctx[8]);
3490
3527
  }
3491
3528
 
3492
3529
  if (dirty &
@@ -3541,6 +3578,14 @@
3541
3578
  /*testid*/
3542
3579
  ctx[6]);
3543
3580
  }
3581
+
3582
+ if (dirty &
3583
+ /*isMediumCallout*/
3584
+ 512) {
3585
+ toggle_class(div, "medium",
3586
+ /*isMediumCallout*/
3587
+ ctx[9]);
3588
+ }
3544
3589
  },
3545
3590
 
3546
3591
  i: noop,
@@ -3549,14 +3594,18 @@
3549
3594
  d(detaching) {
3550
3595
  if (detaching) detach(div);
3551
3596
  if (if_block) if_block.d();
3597
+ mounted = false;
3598
+ dispose();
3552
3599
  }
3553
3600
 
3554
3601
  };
3555
3602
  }
3556
3603
 
3557
- function instance$D($$self, $$props, $$invalidate) {
3604
+ function instance$E($$self, $$props, $$invalidate) {
3605
+ let isMediumCallout;
3558
3606
  let iconType;
3559
3607
  const [Types, validateType] = typeValidator("Callout type", ["emergency", "important", "information", "event", "success"], true);
3608
+ const [CalloutSizes, validateCalloutSize] = typeValidator("Callout size", ["medium", "large"]);
3560
3609
  let {
3561
3610
  mt = null
3562
3611
  } = $$props;
@@ -3569,6 +3618,9 @@
3569
3618
  let {
3570
3619
  ml = null
3571
3620
  } = $$props;
3621
+ let {
3622
+ size = "large"
3623
+ } = $$props;
3572
3624
  let {
3573
3625
  type
3574
3626
  } = $$props;
@@ -3578,44 +3630,62 @@
3578
3630
  let {
3579
3631
  testid = ""
3580
3632
  } = $$props;
3633
+ let screenSize = 0;
3634
+ let iconSize = "medium";
3581
3635
  onMount(() => {
3582
- setTimeout(() => validateType(type), 1);
3636
+ validateCalloutSize(size);
3637
+ setTimeout(() => {
3638
+ validateType(type);
3639
+ $$invalidate(8, iconSize = isMediumCallout ? "small" : "medium");
3640
+ });
3583
3641
  });
3584
3642
 
3643
+ function onwindowresize() {
3644
+ $$invalidate(7, screenSize = window.innerWidth);
3645
+ }
3646
+
3585
3647
  $$self.$$set = $$props => {
3586
3648
  if ('mt' in $$props) $$invalidate(0, mt = $$props.mt);
3587
3649
  if ('mr' in $$props) $$invalidate(1, mr = $$props.mr);
3588
3650
  if ('mb' in $$props) $$invalidate(2, mb = $$props.mb);
3589
3651
  if ('ml' in $$props) $$invalidate(3, ml = $$props.ml);
3652
+ if ('size' in $$props) $$invalidate(11, size = $$props.size);
3590
3653
  if ('type' in $$props) $$invalidate(4, type = $$props.type);
3591
3654
  if ('heading' in $$props) $$invalidate(5, heading = $$props.heading);
3592
3655
  if ('testid' in $$props) $$invalidate(6, testid = $$props.testid);
3593
3656
  };
3594
3657
 
3595
3658
  $$self.$$.update = () => {
3659
+ if ($$self.$$.dirty &
3660
+ /*screenSize, size*/
3661
+ 2176) {
3662
+ $$invalidate(9, isMediumCallout = screenSize < 640 || size === "medium");
3663
+ }
3664
+
3596
3665
  if ($$self.$$.dirty &
3597
3666
  /*type*/
3598
3667
  16) {
3599
- $$invalidate(7, iconType = type === "emergency" ? "warning" : type === "important" ? "alert-circle" : type === "information" ? "information-circle" : type === "success" ? "checkmark-circle" : type === "event" ? "calendar" : "");
3668
+ $$invalidate(10, iconType = type === "emergency" ? "warning" : type === "important" ? "alert-circle" : type === "information" ? "information-circle" : type === "success" ? "checkmark-circle" : type === "event" ? "calendar" : "");
3600
3669
  }
3601
3670
  };
3602
3671
 
3603
- return [mt, mr, mb, ml, type, heading, testid, iconType];
3672
+ return [mt, mr, mb, ml, type, heading, testid, screenSize, iconSize, isMediumCallout, iconType, size, onwindowresize];
3604
3673
  }
3605
3674
 
3606
3675
  class Callout extends SvelteElement {
3607
3676
  constructor(options) {
3608
3677
  super();
3609
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.notification{display:flex;align-items:stretch;border-radius:3px;overflow:hidden}h3{font-size:var(--goa-font-size-7);line-height:var(--goa-line-height-2);font-weight:var(--goa-font-weight-regular);margin-top:0}.emergency{background-color:var(--goa-color-emergency-default)}.important{background-color:var(--goa-color-warning-default)}.information{background-color:var(--goa-color-info-default)}.event{background-color:var(--goa-color-info-default)}.success{background-color:var(--goa-color-success-default)}.icon{flex:0 0 3rem;text-align:center;padding-top:1.75rem}.content{flex:1 1 auto;background-color:var(--goa-color-greyscale-100);padding:1.75rem}</style>`;
3678
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.notification{display:flex;align-items:stretch;overflow:hidden;font:var(--goa-typography-body-m)}h3{font-size:var(--goa-font-size-7);line-height:var(--goa-line-height-2);font-weight:var(--goa-font-weight-regular);margin-top:var(--goa-space-none);margin-bottom:var(--goa-space-m)}.emergency{background-color:var(--goa-color-emergency-default)}.important{background-color:var(--goa-color-warning-default)}.information{background-color:var(--goa-color-info-default)}.event{background-color:var(--goa-color-info-default)}.success{background-color:var(--goa-color-success-default)}.icon{text-align:center;padding-top:var(--goa-space-l);padding-left:var(--goa-space-s);padding-right:var(--goa-space-s)}.content{flex:1 1 auto;background-color:var(--goa-color-greyscale-100);padding:var(--goa-space-l)}.notification.medium{font:var(--goa-typography-body-s);max-width:22rem}h3.medium{font:var(--goa-typography-heading-xs);margin-bottom:var(--goa-space-2xs)}.notification.medium .content{padding:var(--goa-space-s);margin-top:calc(-1 * var(--goa-space-3xs))}.notification.medium .icon{padding-top:var(--goa-space-s);padding-left:var(--goa-space-2xs);padding-right:var(--goa-space-2xs)}</style>`;
3610
3679
  init(this, {
3611
3680
  target: this.shadowRoot,
3612
3681
  props: attribute_to_object(this.attributes),
3613
3682
  customElement: true
3614
- }, instance$D, create_fragment$J, safe_not_equal, {
3683
+ }, instance$E, create_fragment$K, safe_not_equal, {
3615
3684
  mt: 0,
3616
3685
  mr: 1,
3617
3686
  mb: 2,
3618
3687
  ml: 3,
3688
+ size: 11,
3619
3689
  type: 4,
3620
3690
  heading: 5,
3621
3691
  testid: 6
@@ -3634,7 +3704,7 @@
3634
3704
  }
3635
3705
 
3636
3706
  static get observedAttributes() {
3637
- return ["mt", "mr", "mb", "ml", "type", "heading", "testid"];
3707
+ return ["mt", "mr", "mb", "ml", "size", "type", "heading", "testid"];
3638
3708
  }
3639
3709
 
3640
3710
  get mt() {
@@ -3681,6 +3751,17 @@
3681
3751
  flush();
3682
3752
  }
3683
3753
 
3754
+ get size() {
3755
+ return this.$$.ctx[11];
3756
+ }
3757
+
3758
+ set size(size) {
3759
+ this.$$set({
3760
+ size
3761
+ });
3762
+ flush();
3763
+ }
3764
+
3684
3765
  get type() {
3685
3766
  return this.$$.ctx[4];
3686
3767
  }
@@ -3719,7 +3800,7 @@
3719
3800
  customElements.define("goa-callout", Callout);
3720
3801
  /* libs/web-components/src/components/card-actions/CardActions.svelte generated by Svelte v3.51.0 */
3721
3802
 
3722
- function create_fragment$I(ctx) {
3803
+ function create_fragment$J(ctx) {
3723
3804
  let goa_card_content;
3724
3805
  return {
3725
3806
  c() {
@@ -3750,7 +3831,7 @@
3750
3831
  target: this.shadowRoot,
3751
3832
  props: attribute_to_object(this.attributes),
3752
3833
  customElement: true
3753
- }, null, create_fragment$I, safe_not_equal, {}, null);
3834
+ }, null, create_fragment$J, safe_not_equal, {}, null);
3754
3835
 
3755
3836
  if (options) {
3756
3837
  if (options.target) {
@@ -3764,7 +3845,7 @@
3764
3845
  customElements.define("goa-card-actions", CardActions);
3765
3846
  /* libs/web-components/src/components/card/Card.svelte generated by Svelte v3.51.0 */
3766
3847
 
3767
- function create_fragment$H(ctx) {
3848
+ function create_fragment$I(ctx) {
3768
3849
  let div;
3769
3850
  let slot;
3770
3851
  let div_style_value;
@@ -3843,7 +3924,7 @@
3843
3924
  };
3844
3925
  }
3845
3926
 
3846
- function instance$C($$self, $$props, $$invalidate) {
3927
+ function instance$D($$self, $$props, $$invalidate) {
3847
3928
  let {
3848
3929
  elevation = 0
3849
3930
  } = $$props;
@@ -3891,7 +3972,7 @@
3891
3972
  target: this.shadowRoot,
3892
3973
  props: attribute_to_object(this.attributes),
3893
3974
  customElement: true
3894
- }, instance$C, create_fragment$H, safe_not_equal, {
3975
+ }, instance$D, create_fragment$I, safe_not_equal, {
3895
3976
  elevation: 0,
3896
3977
  width: 1,
3897
3978
  height: 2,
@@ -4011,7 +4092,7 @@
4011
4092
  customElements.define("goa-card", Card);
4012
4093
  /* libs/web-components/src/components/card-content/CardContent.svelte generated by Svelte v3.51.0 */
4013
4094
 
4014
- function create_fragment$G(ctx) {
4095
+ function create_fragment$H(ctx) {
4015
4096
  let div;
4016
4097
  return {
4017
4098
  c() {
@@ -4044,7 +4125,7 @@
4044
4125
  target: this.shadowRoot,
4045
4126
  props: attribute_to_object(this.attributes),
4046
4127
  customElement: true
4047
- }, null, create_fragment$G, safe_not_equal, {}, null);
4128
+ }, null, create_fragment$H, safe_not_equal, {}, null);
4048
4129
 
4049
4130
  if (options) {
4050
4131
  if (options.target) {
@@ -4058,7 +4139,7 @@
4058
4139
  customElements.define("goa-card-content", CardContent);
4059
4140
  /* libs/web-components/src/components/card-group/CardGroup.svelte generated by Svelte v3.51.0 */
4060
4141
 
4061
- function create_fragment$F(ctx) {
4142
+ function create_fragment$G(ctx) {
4062
4143
  let div;
4063
4144
  return {
4064
4145
  c() {
@@ -4091,7 +4172,7 @@
4091
4172
  target: this.shadowRoot,
4092
4173
  props: attribute_to_object(this.attributes),
4093
4174
  customElement: true
4094
- }, null, create_fragment$F, safe_not_equal, {}, null);
4175
+ }, null, create_fragment$G, safe_not_equal, {}, null);
4095
4176
 
4096
4177
  if (options) {
4097
4178
  if (options.target) {
@@ -4105,7 +4186,7 @@
4105
4186
  customElements.define("goa-card-group", CardGroup);
4106
4187
  /* libs/web-components/src/components/card-image/CardImage.svelte generated by Svelte v3.51.0 */
4107
4188
 
4108
- function create_fragment$E(ctx) {
4189
+ function create_fragment$F(ctx) {
4109
4190
  let div;
4110
4191
  return {
4111
4192
  c() {
@@ -4153,7 +4234,7 @@
4153
4234
  };
4154
4235
  }
4155
4236
 
4156
- function instance$B($$self, $$props, $$invalidate) {
4237
+ function instance$C($$self, $$props, $$invalidate) {
4157
4238
  let {
4158
4239
  src
4159
4240
  } = $$props;
@@ -4177,7 +4258,7 @@
4177
4258
  target: this.shadowRoot,
4178
4259
  props: attribute_to_object(this.attributes),
4179
4260
  customElement: true
4180
- }, instance$B, create_fragment$E, safe_not_equal, {
4261
+ }, instance$C, create_fragment$F, safe_not_equal, {
4181
4262
  src: 0,
4182
4263
  height: 1
4183
4264
  }, null);
@@ -4279,7 +4360,7 @@
4279
4360
  };
4280
4361
  }
4281
4362
 
4282
- function create_fragment$D(ctx) {
4363
+ function create_fragment$E(ctx) {
4283
4364
  let label;
4284
4365
  let div0;
4285
4366
  let input;
@@ -4528,7 +4609,7 @@
4528
4609
  };
4529
4610
  }
4530
4611
 
4531
- function instance$A($$self, $$props, $$invalidate) {
4612
+ function instance$B($$self, $$props, $$invalidate) {
4532
4613
  let isDisabled;
4533
4614
  let isError;
4534
4615
  let isChecked;
@@ -4643,7 +4724,7 @@
4643
4724
  target: this.shadowRoot,
4644
4725
  props: attribute_to_object(this.attributes),
4645
4726
  customElement: true
4646
- }, instance$A, create_fragment$D, safe_not_equal, {
4727
+ }, instance$B, create_fragment$E, safe_not_equal, {
4647
4728
  name: 0,
4648
4729
  checked: 14,
4649
4730
  text: 1,
@@ -4901,7 +4982,7 @@
4901
4982
  };
4902
4983
  }
4903
4984
 
4904
- function create_fragment$C(ctx) {
4985
+ function create_fragment$D(ctx) {
4905
4986
  let div1;
4906
4987
  let t0;
4907
4988
  let div0;
@@ -5083,7 +5164,7 @@
5083
5164
  };
5084
5165
  }
5085
5166
 
5086
- function instance$z($$self, $$props, $$invalidate) {
5167
+ function instance$A($$self, $$props, $$invalidate) {
5087
5168
  let {
5088
5169
  mt = null
5089
5170
  } = $$props;
@@ -5184,7 +5265,7 @@
5184
5265
  target: this.shadowRoot,
5185
5266
  props: attribute_to_object(this.attributes),
5186
5267
  customElement: true
5187
- }, instance$z, create_fragment$C, safe_not_equal, {
5268
+ }, instance$A, create_fragment$D, safe_not_equal, {
5188
5269
  mt: 0,
5189
5270
  mr: 1,
5190
5271
  mb: 2,
@@ -5809,7 +5890,7 @@
5809
5890
  };
5810
5891
  }
5811
5892
 
5812
- function create_fragment$B(ctx) {
5893
+ function create_fragment$C(ctx) {
5813
5894
  let if_block_anchor;
5814
5895
  let current;
5815
5896
  let if_block =
@@ -5874,7 +5955,7 @@
5874
5955
  };
5875
5956
  }
5876
5957
 
5877
- function instance$y($$self, $$props, $$invalidate) {
5958
+ function instance$z($$self, $$props, $$invalidate) {
5878
5959
  let isVisible;
5879
5960
  const [Variants, validateVariant] = typeValidator("Circular progress variant", ["fullscreen", "inline"]);
5880
5961
  const [Sizes, validateSize] = typeValidator("Button size", ["small", "large"]);
@@ -5932,7 +6013,7 @@
5932
6013
  target: this.shadowRoot,
5933
6014
  props: attribute_to_object(this.attributes),
5934
6015
  customElement: true
5935
- }, instance$y, create_fragment$B, safe_not_equal, {
6016
+ }, instance$z, create_fragment$C, safe_not_equal, {
5936
6017
  variant: 6,
5937
6018
  size: 7,
5938
6019
  message: 0,
@@ -6016,7 +6097,7 @@
6016
6097
  customElements.define("goa-circular-progress", CircularProgress);
6017
6098
  /* libs/web-components/src/components/container/Container.svelte generated by Svelte v3.51.0 */
6018
6099
 
6019
- function create_fragment$A(ctx) {
6100
+ function create_fragment$B(ctx) {
6020
6101
  let div3;
6021
6102
  let header;
6022
6103
  let div0;
@@ -6141,7 +6222,7 @@
6141
6222
  };
6142
6223
  }
6143
6224
 
6144
- function instance$x($$self, $$props, $$invalidate) {
6225
+ function instance$y($$self, $$props, $$invalidate) {
6145
6226
  const [Types, validateType] = typeValidator("Container type", ["interactive", "info", "error", "success", "important", "non-interactive"]);
6146
6227
  const [Accents, validateAccent] = typeValidator("Container accent", ["thick", "thin", "filled"]);
6147
6228
  const [Paddings, validatePadding] = typeValidator("Container padding", ["relaxed", "compact"]);
@@ -6197,7 +6278,7 @@
6197
6278
  target: this.shadowRoot,
6198
6279
  props: attribute_to_object(this.attributes),
6199
6280
  customElement: true
6200
- }, instance$x, create_fragment$A, safe_not_equal, {
6281
+ }, instance$y, create_fragment$B, safe_not_equal, {
6201
6282
  type: 0,
6202
6283
  accent: 1,
6203
6284
  padding: 2,
@@ -6317,7 +6398,7 @@
6317
6398
  customElements.define("goa-container", Container);
6318
6399
  /* libs/web-components/src/components/details/Details.svelte generated by Svelte v3.51.0 */
6319
6400
 
6320
- function create_fragment$z(ctx) {
6401
+ function create_fragment$A(ctx) {
6321
6402
  let details;
6322
6403
  let summary;
6323
6404
  let goa_icon;
@@ -6417,7 +6498,7 @@
6417
6498
  };
6418
6499
  }
6419
6500
 
6420
- function instance$w($$self, $$props, $$invalidate) {
6501
+ function instance$x($$self, $$props, $$invalidate) {
6421
6502
  let {
6422
6503
  heading
6423
6504
  } = $$props;
@@ -6477,7 +6558,7 @@
6477
6558
  target: this.shadowRoot,
6478
6559
  props: attribute_to_object(this.attributes),
6479
6560
  customElement: true
6480
- }, instance$w, create_fragment$z, safe_not_equal, {
6561
+ }, instance$x, create_fragment$A, safe_not_equal, {
6481
6562
  heading: 0,
6482
6563
  mt: 1,
6483
6564
  mr: 2,
@@ -6561,7 +6642,7 @@
6561
6642
  customElements.define("goa-details", Details);
6562
6643
  /* libs/web-components/src/components/divider/Divider.svelte generated by Svelte v3.51.0 */
6563
6644
 
6564
- function create_fragment$y(ctx) {
6645
+ function create_fragment$z(ctx) {
6565
6646
  let hr;
6566
6647
  let hr_style_value;
6567
6648
  return {
@@ -6620,7 +6701,7 @@
6620
6701
  };
6621
6702
  }
6622
6703
 
6623
- function instance$v($$self, $$props, $$invalidate) {
6704
+ function instance$w($$self, $$props, $$invalidate) {
6624
6705
  let {
6625
6706
  testid = ""
6626
6707
  } = $$props;
@@ -6656,7 +6737,7 @@
6656
6737
  target: this.shadowRoot,
6657
6738
  props: attribute_to_object(this.attributes),
6658
6739
  customElement: true
6659
- }, instance$v, create_fragment$y, safe_not_equal, {
6740
+ }, instance$w, create_fragment$z, safe_not_equal, {
6660
6741
  testid: 0,
6661
6742
  mt: 1,
6662
6743
  mr: 2,
@@ -7471,7 +7552,7 @@
7471
7552
  };
7472
7553
  }
7473
7554
 
7474
- function create_fragment$x(ctx) {
7555
+ function create_fragment$y(ctx) {
7475
7556
  let div;
7476
7557
  let div_data_testid_value;
7477
7558
  let div_style_value;
@@ -7602,7 +7683,7 @@
7602
7683
  return rawValues.map(val => `${val}`);
7603
7684
  }
7604
7685
 
7605
- function instance$u($$self, $$props, $$invalidate) {
7686
+ function instance$v($$self, $$props, $$invalidate) {
7606
7687
  const showMenu = _async(function () {
7607
7688
  if (_disabled || _isMenuVisible) {
7608
7689
  return;
@@ -8001,7 +8082,7 @@
8001
8082
  target: this.shadowRoot,
8002
8083
  props: attribute_to_object(this.attributes),
8003
8084
  customElement: true
8004
- }, instance$u, create_fragment$x, safe_not_equal, {
8085
+ }, instance$v, create_fragment$y, safe_not_equal, {
8005
8086
  name: 0,
8006
8087
  arialabel: 1,
8007
8088
  value: 29,
@@ -8205,7 +8286,7 @@
8205
8286
  customElements.define("goa-dropdown", Dropdown);
8206
8287
  /* libs/web-components/src/components/dropdown/DropdownItem.svelte generated by Svelte v3.51.0 */
8207
8288
 
8208
- function create_fragment$w(ctx) {
8289
+ function create_fragment$x(ctx) {
8209
8290
  return {
8210
8291
  c() {
8211
8292
  this.c = noop;
@@ -8226,7 +8307,7 @@
8226
8307
  target: this.shadowRoot,
8227
8308
  props: attribute_to_object(this.attributes),
8228
8309
  customElement: true
8229
- }, null, create_fragment$w, safe_not_equal, {}, null);
8310
+ }, null, create_fragment$x, safe_not_equal, {}, null);
8230
8311
 
8231
8312
  if (options) {
8232
8313
  if (options.target) {
@@ -8240,7 +8321,7 @@
8240
8321
  customElements.define("goa-dropdown-item", DropdownItem);
8241
8322
  /* libs/web-components/src/components/focus-trap/FocusTrap.svelte generated by Svelte v3.51.0 */
8242
8323
 
8243
- function create_fragment$v(ctx) {
8324
+ function create_fragment$w(ctx) {
8244
8325
  let div;
8245
8326
  return {
8246
8327
  c() {
@@ -8300,7 +8381,7 @@
8300
8381
  }
8301
8382
  }
8302
8383
 
8303
- function instance$t($$self, $$props, $$invalidate) {
8384
+ function instance$u($$self, $$props, $$invalidate) {
8304
8385
  let isActive;
8305
8386
  let {
8306
8387
  active
@@ -8469,7 +8550,7 @@
8469
8550
  target: this.shadowRoot,
8470
8551
  props: attribute_to_object(this.attributes),
8471
8552
  customElement: true
8472
- }, instance$t, create_fragment$v, safe_not_equal, {
8553
+ }, instance$u, create_fragment$w, safe_not_equal, {
8473
8554
  active: 1
8474
8555
  }, null);
8475
8556
 
@@ -8524,7 +8605,7 @@
8524
8605
  };
8525
8606
  }
8526
8607
 
8527
- function create_fragment$u(ctx) {
8608
+ function create_fragment$v(ctx) {
8528
8609
  let div5;
8529
8610
  let div4;
8530
8611
  let div0;
@@ -8667,7 +8748,7 @@
8667
8748
  };
8668
8749
  }
8669
8750
 
8670
- function instance$s($$self, $$props, $$invalidate) {
8751
+ function instance$t($$self, $$props, $$invalidate) {
8671
8752
  let {
8672
8753
  maxcontentwidth = ""
8673
8754
  } = $$props;
@@ -8701,12 +8782,12 @@
8701
8782
  class Footer extends SvelteElement {
8702
8783
  constructor(options) {
8703
8784
  super();
8704
- 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 1.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>`;
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>`;
8705
8786
  init(this, {
8706
8787
  target: this.shadowRoot,
8707
8788
  props: attribute_to_object(this.attributes),
8708
8789
  customElement: true
8709
- }, instance$s, create_fragment$u, safe_not_equal, {
8790
+ }, instance$t, create_fragment$v, safe_not_equal, {
8710
8791
  maxcontentwidth: 0
8711
8792
  }, null);
8712
8793
 
@@ -8796,7 +8877,7 @@
8796
8877
  };
8797
8878
  }
8798
8879
 
8799
- function create_fragment$t(ctx) {
8880
+ function create_fragment$u(ctx) {
8800
8881
  let section;
8801
8882
  let div;
8802
8883
  let t;
@@ -8884,7 +8965,7 @@
8884
8965
  };
8885
8966
  }
8886
8967
 
8887
- function instance$r($$self, $$props, $$invalidate) {
8968
+ function instance$s($$self, $$props, $$invalidate) {
8888
8969
  let rootEl;
8889
8970
  let children = [];
8890
8971
  onMount(function () {
@@ -8919,7 +9000,7 @@
8919
9000
  target: this.shadowRoot,
8920
9001
  props: attribute_to_object(this.attributes),
8921
9002
  customElement: true
8922
- }, instance$r, create_fragment$t, safe_not_equal, {}, null);
9003
+ }, instance$s, create_fragment$u, safe_not_equal, {}, null);
8923
9004
 
8924
9005
  if (options) {
8925
9006
  if (options.target) {
@@ -9029,7 +9110,7 @@
9029
9110
  };
9030
9111
  }
9031
9112
 
9032
- function create_fragment$s(ctx) {
9113
+ function create_fragment$t(ctx) {
9033
9114
  let section;
9034
9115
  let t0;
9035
9116
  let div;
@@ -9176,7 +9257,7 @@
9176
9257
  };
9177
9258
  }
9178
9259
 
9179
- function instance$q($$self, $$props, $$invalidate) {
9260
+ function instance$r($$self, $$props, $$invalidate) {
9180
9261
  let {
9181
9262
  heading = ""
9182
9263
  } = $$props;
@@ -9223,12 +9304,12 @@
9223
9304
  class FooterNavSection extends SvelteElement {
9224
9305
  constructor(options) {
9225
9306
  super();
9226
- this.shadowRoot.innerHTML = `<style>:host{flex:auto}.title{font-size:var(--goa-font-size-7);line-height:var(--goa-line-height-4)}.hidden{display:none}.links{display:block;list-style-type:none;padding-left:0}@media(min-width: 720px){.links{display:var(--narrow-display-type);list-style-type:none;padding-left:0;flex-direction:column;column-count:var(--narrow-column-count)}}@media(min-width: 1024px){.links{display:var(--wide-display-type);list-style-type:none;padding-left:0;flex-direction:column;column-count:var(--wide-column-count)}}li{padding:0.75rem 0}a{color:var(--goa-color-text-default)}</style>`;
9307
+ this.shadowRoot.innerHTML = `<style>:host{flex:auto}.title{font-size:var(--goa-font-size-7);line-height:var(--goa-line-height-4);padding-bottom:var(--goa-space-l)}.hidden{display:none}.links{display:block;list-style-type:none;padding-left:0}@media(min-width: 720px){.links{display:var(--narrow-display-type);list-style-type:none;padding-left:0;flex-direction:column;column-count:var(--narrow-column-count)}}@media(min-width: 1024px){.links{display:var(--wide-display-type);list-style-type:none;padding-left:0;flex-direction:column;column-count:var(--wide-column-count)}}li{padding:0.75rem 0}a{color:var(--goa-color-text-default)}</style>`;
9227
9308
  init(this, {
9228
9309
  target: this.shadowRoot,
9229
9310
  props: attribute_to_object(this.attributes),
9230
9311
  customElement: true
9231
- }, instance$q, create_fragment$s, safe_not_equal, {
9312
+ }, instance$r, create_fragment$t, safe_not_equal, {
9232
9313
  heading: 0,
9233
9314
  maxcolumncount: 1
9234
9315
  }, null);
@@ -9458,7 +9539,7 @@
9458
9539
  };
9459
9540
  }
9460
9541
 
9461
- function create_fragment$r(ctx) {
9542
+ function create_fragment$s(ctx) {
9462
9543
  let div1;
9463
9544
  let t0;
9464
9545
  let div0;
@@ -9595,7 +9676,7 @@
9595
9676
  };
9596
9677
  }
9597
9678
 
9598
- function instance$p($$self, $$props, $$invalidate) {
9679
+ function instance$q($$self, $$props, $$invalidate) {
9599
9680
  const [REQUIREMENT_TYPES, validateRequirementType] = typeValidator("Requirement type", ["optional", "required"], false);
9600
9681
  let {
9601
9682
  testid = ""
@@ -9651,7 +9732,7 @@
9651
9732
  target: this.shadowRoot,
9652
9733
  props: attribute_to_object(this.attributes),
9653
9734
  customElement: true
9654
- }, instance$p, create_fragment$r, safe_not_equal, {
9735
+ }, instance$q, create_fragment$s, safe_not_equal, {
9655
9736
  testid: 0,
9656
9737
  mt: 1,
9657
9738
  mr: 2,
@@ -9783,7 +9864,7 @@
9783
9864
  customElements.define("goa-form-item", FormItem);
9784
9865
  /* libs/web-components/src/components/grid/Grid.svelte generated by Svelte v3.51.0 */
9785
9866
 
9786
- function create_fragment$q(ctx) {
9867
+ function create_fragment$r(ctx) {
9787
9868
  let div;
9788
9869
  let slot;
9789
9870
  let div_style_value;
@@ -9851,7 +9932,7 @@
9851
9932
  };
9852
9933
  }
9853
9934
 
9854
- function instance$o($$self, $$props, $$invalidate) {
9935
+ function instance$p($$self, $$props, $$invalidate) {
9855
9936
  let {
9856
9937
  gap = "m"
9857
9938
  } = $$props;
@@ -9896,7 +9977,7 @@
9896
9977
  target: this.shadowRoot,
9897
9978
  props: attribute_to_object(this.attributes),
9898
9979
  customElement: true
9899
- }, instance$o, create_fragment$q, safe_not_equal, {
9980
+ }, instance$p, create_fragment$r, safe_not_equal, {
9900
9981
  gap: 0,
9901
9982
  minchildwidth: 1,
9902
9983
  mt: 2,
@@ -9992,7 +10073,7 @@
9992
10073
  customElements.define("goa-grid", Grid);
9993
10074
  /* libs/web-components/src/components/hero-banner/HeroBanner.svelte generated by Svelte v3.51.0 */
9994
10075
 
9995
- function create_fragment$p(ctx) {
10076
+ function create_fragment$q(ctx) {
9996
10077
  let div1;
9997
10078
  let goa_page_block;
9998
10079
  let h1;
@@ -10001,6 +10082,7 @@
10001
10082
  let div0;
10002
10083
  let t2;
10003
10084
  let slot1;
10085
+ let goa_page_block_width_value;
10004
10086
  return {
10005
10087
  c() {
10006
10088
  div1 = element("div");
@@ -10018,7 +10100,9 @@
10018
10100
  attr(div0, "class", "goa-hero-banner-content");
10019
10101
  attr(div0, "role", "note");
10020
10102
  attr(slot1, "name", "actions");
10021
- set_custom_element_data(goa_page_block, "width", "full");
10103
+ set_custom_element_data(goa_page_block, "width", goa_page_block_width_value =
10104
+ /*maxcontentwidth*/
10105
+ ctx[3] || "full");
10022
10106
  attr(div1, "class", "goa-hero");
10023
10107
  attr(div1, "data-testid", "background");
10024
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(" +
@@ -10050,6 +10134,14 @@
10050
10134
  /*heading*/
10051
10135
  ctx[0]);
10052
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
+
10053
10145
  if (dirty &
10054
10146
  /*backgroundurl*/
10055
10147
  2) {
@@ -10077,7 +10169,7 @@
10077
10169
  };
10078
10170
  }
10079
10171
 
10080
- function instance$n($$self, $$props, $$invalidate) {
10172
+ function instance$o($$self, $$props, $$invalidate) {
10081
10173
  let {
10082
10174
  heading
10083
10175
  } = $$props;
@@ -10087,14 +10179,18 @@
10087
10179
  let {
10088
10180
  minheight = "600px"
10089
10181
  } = $$props;
10182
+ let {
10183
+ maxcontentwidth = "100%"
10184
+ } = $$props;
10090
10185
 
10091
10186
  $$self.$$set = $$props => {
10092
10187
  if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
10093
10188
  if ('backgroundurl' in $$props) $$invalidate(1, backgroundurl = $$props.backgroundurl);
10094
10189
  if ('minheight' in $$props) $$invalidate(2, minheight = $$props.minheight);
10190
+ if ('maxcontentwidth' in $$props) $$invalidate(3, maxcontentwidth = $$props.maxcontentwidth);
10095
10191
  };
10096
10192
 
10097
- return [heading, backgroundurl, minheight];
10193
+ return [heading, backgroundurl, minheight, maxcontentwidth];
10098
10194
  }
10099
10195
 
10100
10196
  class HeroBanner extends SvelteElement {
@@ -10105,10 +10201,11 @@
10105
10201
  target: this.shadowRoot,
10106
10202
  props: attribute_to_object(this.attributes),
10107
10203
  customElement: true
10108
- }, instance$n, create_fragment$p, safe_not_equal, {
10204
+ }, instance$o, create_fragment$q, safe_not_equal, {
10109
10205
  heading: 0,
10110
10206
  backgroundurl: 1,
10111
- minheight: 2
10207
+ minheight: 2,
10208
+ maxcontentwidth: 3
10112
10209
  }, null);
10113
10210
 
10114
10211
  if (options) {
@@ -10124,7 +10221,7 @@
10124
10221
  }
10125
10222
 
10126
10223
  static get observedAttributes() {
10127
- return ["heading", "backgroundurl", "minheight"];
10224
+ return ["heading", "backgroundurl", "minheight", "maxcontentwidth"];
10128
10225
  }
10129
10226
 
10130
10227
  get heading() {
@@ -10160,12 +10257,23 @@
10160
10257
  flush();
10161
10258
  }
10162
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
+
10163
10271
  }
10164
10272
 
10165
10273
  customElements.define("goa-hero-banner", HeroBanner);
10166
10274
  /* libs/web-components/src/components/icon-button/IconButton.svelte generated by Svelte v3.51.0 */
10167
10275
 
10168
- function create_fragment$o(ctx) {
10276
+ function create_fragment$p(ctx) {
10169
10277
  let button;
10170
10278
  let goa_icon;
10171
10279
  let button_style_value;
@@ -10337,7 +10445,7 @@
10337
10445
  }));
10338
10446
  }
10339
10447
 
10340
- function instance$m($$self, $$props, $$invalidate) {
10448
+ function instance$n($$self, $$props, $$invalidate) {
10341
10449
  let css;
10342
10450
  let isDisabled;
10343
10451
  let isInverted;
@@ -10442,7 +10550,7 @@
10442
10550
  target: this.shadowRoot,
10443
10551
  props: attribute_to_object(this.attributes),
10444
10552
  customElement: true
10445
- }, instance$m, create_fragment$o, safe_not_equal, {
10553
+ }, instance$n, create_fragment$p, safe_not_equal, {
10446
10554
  icon: 0,
10447
10555
  size: 1,
10448
10556
  theme: 2,
@@ -10747,7 +10855,7 @@
10747
10855
  };
10748
10856
  }
10749
10857
 
10750
- function create_fragment$n(ctx) {
10858
+ function create_fragment$o(ctx) {
10751
10859
  let div;
10752
10860
  let div_class_value;
10753
10861
  let div_style_value;
@@ -10883,7 +10991,7 @@
10883
10991
  };
10884
10992
  }
10885
10993
 
10886
- function instance$l($$self, $$props, $$invalidate) {
10994
+ function instance$m($$self, $$props, $$invalidate) {
10887
10995
  let isInverted;
10888
10996
  let {
10889
10997
  mt = null
@@ -10927,7 +11035,7 @@
10927
11035
 
10928
11036
  const _iconOverrides = {
10929
11037
  pencil: `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16.1442 5.47956L12.5355 1.87088L13.7196 0.686776C14.0391 0.367257 14.4385 0.212197 14.9178 0.221594C15.3971 0.230992 15.7965 0.39545 16.116 0.714969L17.3283 1.92726C17.6478 2.24678 17.8076 2.64148 17.8076 3.11136C17.8076 3.58124 17.6478 3.97594 17.3283 4.29546L16.1442 5.47956ZM1.03951 17.8424C0.795173 17.8424 0.593125 17.7626 0.433365 17.6028C0.273605 17.443 0.193726 17.241 0.193726 16.9966V14.5721C0.193726 14.4593 0.212521 14.356 0.250112 14.262C0.287702 14.168 0.353485 14.074 0.447461 13.9801L11.4689 2.93435L15.0776 6.54303L4.05615 17.5887C3.96217 17.6827 3.8682 17.7485 3.77422 17.7861C3.68024 17.8236 3.57687 17.8424 3.4641 17.8424H1.03951Z" fill="currentcolor"/> </svg>`,
10930
- checkmark: `<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.20129 11.5368L15.9974 0.341265C16.3611 -0.0743717 16.9929 -0.116489 17.4085 0.247193C17.8241 0.610875 17.8663 1.24264 17.5026 1.65827L7.00258 13.6583C6.82032 13.8666 6.5599 13.99 6.28328 13.9992C6.00666 14.0084 5.7386 13.9026 5.54289 13.7069L1.04289 9.20688C0.652369 8.81635 0.652369 8.18319 1.04289 7.79266C1.43342 7.40214 2.06658 7.40214 2.45711 7.79266L6.20129 11.5368Z" fill="#333333"/> </svg>`,
11038
+ checkmark: `<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.20129 11.5368L15.9974 0.341265C16.3611 -0.0743717 16.9929 -0.116489 17.4085 0.247193C17.8241 0.610875 17.8663 1.24264 17.5026 1.65827L7.00258 13.6583C6.82032 13.8666 6.5599 13.99 6.28328 13.9992C6.00666 14.0084 5.7386 13.9026 5.54289 13.7069L1.04289 9.20688C0.652369 8.81635 0.652369 8.18319 1.04289 7.79266C1.43342 7.40214 2.06658 7.40214 2.45711 7.79266L6.20129 11.5368Z" fill="currentcolor"/> </svg>`,
10931
11039
  remove: `<svg width="16" height="20" viewBox="0 0 16 1" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1.5 -0.000244141C0.947715 -0.000244141 0.5 0.447471 0.5 0.999756C0.5 1.55204 0.947715 1.99976 1.5 1.99976H15C15.5523 1.99976 16 1.55204 16 0.999756C16 0.447471 15.5523 -0.000244141 15 -0.000244141H1.5Z" fill="currentcolor"/> </svg>`,
10932
11040
  "goa-file": `<svg width="39" height="48" viewBox="0 0 39 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1357_108691)"> <path d="M38.741 14C38.541 13.07 38.081 12.22 37.401 11.54L36.861 11L27.861 2L27.321 1.46C26.641 0.78 25.781 0.32 24.861 0.12C24.511 0.04 24.151 0 23.791 0H5.86096C3.10096 0 0.860962 2.24 0.860962 5V43C0.860962 45.76 3.10096 48 5.86096 48H33.861C36.621 48 38.861 45.76 38.861 43V15.07C38.861 14.71 38.811 14.35 38.741 14ZM35.041 12H29.871C28.221 12 26.871 10.65 26.871 9V3.83L35.041 12ZM36.871 43C36.871 44.65 35.521 46 33.871 46H5.87097C4.22097 46 2.87097 44.65 2.87097 43V5C2.87097 3.35 4.22097 2 5.87097 2H23.801C24.171 2 24.531 2.07 24.871 2.2V9C24.871 11.76 27.111 14 29.871 14H36.671C36.801 14.34 36.871 14.7 36.871 15.07V43Z" fill="currentcolor"/> </g> <defs> <clipPath id="clip0_1357_108691"><rect width="38" height="48" fill="white" transform="translate(0.861328)"/></clipPath></defs></svg>`,
10933
11041
  "goa-text": `<svg width="39" height="48" viewBox="0 0 39 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M38.7953 14C38.5953 13.07 38.1353 12.22 37.4553 11.54L36.9153 11L27.9153 2L27.3753 1.46C26.6953 0.78 25.8353 0.32 24.9153 0.12C24.5653 0.04 24.2053 0 23.8453 0H5.91528C3.15528 0 0.915283 2.24 0.915283 5V43C0.915283 45.76 3.15528 48 5.91528 48H33.9153C36.6753 48 38.9153 45.76 38.9153 43V15.07C38.9153 14.71 38.8653 14.35 38.7953 14ZM35.0953 12H29.9253C28.2753 12 26.9253 10.65 26.9253 9V3.83L35.0953 12ZM36.9253 43C36.9253 44.65 35.5753 46 33.9253 46H5.91528C4.26528 46 2.91528 44.65 2.91528 43V5C2.91528 3.35 4.26528 2 5.91528 2H23.8453C24.2153 2 24.5753 2.07 24.9153 2.2V9C24.9153 11.76 27.1553 14 29.9153 14H36.7153C36.8453 14.34 36.9153 14.7 36.9153 15.07V43H36.9253Z" fill="currentcolor"/> <path d="M27.9153 34H11.9153C11.363 34 10.9153 34.4477 10.9153 35C10.9153 35.5523 11.363 36 11.9153 36H27.9153C28.4676 36 28.9153 35.5523 28.9153 35C28.9153 34.4477 28.4676 34 27.9153 34Z" fill="currentcolor"/> <path d="M27.9153 26H11.9153C11.363 26 10.9153 26.4477 10.9153 27C10.9153 27.5523 11.363 28 11.9153 28H27.9153C28.4676 28 28.9153 27.5523 28.9153 27C28.9153 26.4477 28.4676 26 27.9153 26Z" fill="currentcolor"/> </svg>`,
@@ -10971,12 +11079,12 @@
10971
11079
  class Icon extends SvelteElement {
10972
11080
  constructor(options) {
10973
11081
  super();
10974
- this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center}ion-icon{pointer-events:none;width:100%;height:100%}.goa-icon{fill:var(--fill-color);color:var(--fill-color);opacity:var(--opacity);display:inline-flex;align-items:center;justify-content:center}.goa-icon:hover ion-icon{fill:var(--hover-color);color:var(--hover-color)}.goa-icon--small{width:1.25rem;height:1.25rem}.goa-icon--medium{width:1.5rem;height:1.5rem}.goa-icon--large{width:2rem;height:2rem}.goa-icon--xlarge{width:2.5rem;height:2.5rem}.goa-icon:has(.icon-override){height:fit-content}.icon-override{display:flex;flex-direction:column;align-items:center}.icon-override>*{fill:var(--fill-color, var(--goa-color-interactive-default));color:var(--fill-color, var(--goa-color-interactive-default))}.inverted *{color:#fff;fill:#fff}</style>`;
11082
+ this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center}ion-icon{pointer-events:none;width:100%;height:100%}.goa-icon{fill:var(--fill-color);color:var(--fill-color);opacity:var(--opacity);display:inline-flex;align-items:center;justify-content:center}.goa-icon:hover ion-icon{fill:var(--hover-color);color:var(--hover-color)}.goa-icon--small{width:1.25rem;height:1.25rem}.goa-icon--medium{width:1.5rem;height:1.5rem}.goa-icon--large{width:2rem;height:2rem}.goa-icon--xlarge{width:2.5rem;height:2.5rem}.goa-icon:has(.icon-override){height:fit-content}.icon-override{display:flex;flex-direction:column;align-items:center}.inverted *{color:#fff;fill:#fff}</style>`;
10975
11083
  init(this, {
10976
11084
  target: this.shadowRoot,
10977
11085
  props: attribute_to_object(this.attributes),
10978
11086
  customElement: true
10979
- }, instance$l, create_fragment$n, safe_not_equal, {
11087
+ }, instance$m, create_fragment$o, safe_not_equal, {
10980
11088
  mt: 0,
10981
11089
  mr: 1,
10982
11090
  mb: 2,
@@ -11345,7 +11453,7 @@
11345
11453
  };
11346
11454
  }
11347
11455
 
11348
- function create_fragment$m(ctx) {
11456
+ function create_fragment$n(ctx) {
11349
11457
  let div3;
11350
11458
  let div2;
11351
11459
  let t0;
@@ -11826,7 +11934,7 @@
11826
11934
  }));
11827
11935
  }
11828
11936
 
11829
- function instance$k($$self, $$props, $$invalidate) {
11937
+ function instance$l($$self, $$props, $$invalidate) {
11830
11938
  let handlesTrailingIconClick;
11831
11939
  let isFocused;
11832
11940
  let isReadonly;
@@ -12070,7 +12178,7 @@
12070
12178
  target: this.shadowRoot,
12071
12179
  props: attribute_to_object(this.attributes),
12072
12180
  customElement: true
12073
- }, instance$k, create_fragment$m, safe_not_equal, {
12181
+ }, instance$l, create_fragment$n, safe_not_equal, {
12074
12182
  type: 1,
12075
12183
  name: 2,
12076
12184
  value: 0,
@@ -12407,35 +12515,25 @@
12407
12515
  /* libs/web-components/src/components/microsite-header/MicrositeHeader.svelte generated by Svelte v3.51.0 */
12408
12516
 
12409
12517
  function create_if_block_3$5(ctx) {
12410
- let div0;
12411
- let t0;
12412
- let div1;
12518
+ let div;
12413
12519
  return {
12414
12520
  c() {
12415
- div0 = element("div");
12416
- div0.innerHTML = `<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 26C20.1797 26 26 20.1797 26 13C26 5.8203 20.1797 0 13 0C5.8203 0 0 5.8203 0 13C0 20.1797 5.8203 26 13 26Z" fill="#00AAD2"></path><path d="M16.9764 17.7174C15.942 17.3358 14.9325 16.8896 13.9539 16.3817C14.8446 16.0551 15.7131 15.6708 16.5539 15.2312C16.6398 16.0688 16.7831 16.8995 16.9829 17.7174H16.9764ZM22.5339 7.42143C22.1016 7.36618 22.3259 7.56931 22.2089 8.13968C21.863 9.3075 21.2806 10.3917 20.4978 11.3248C19.7151 12.258 18.7487 13.0201 17.6589 13.5639C17.3972 10.9368 17.5336 8.28529 18.0635 5.69893C18.5104 4.07393 19.0385 4.3778 18.3885 4.03818C17.6946 3.68068 16.9471 4.15356 16.3443 5.35931C14.4174 9.81946 11.7695 13.932 8.50689 17.5322C7.96404 18.2422 7.16875 18.7161 6.28592 18.8556C5.40309 18.9951 4.50044 18.7894 3.76514 18.2813C3.43039 17.9986 3.30689 18.4357 3.72289 18.8826C4.47366 19.5882 5.47211 19.9699 6.50216 19.945C7.53222 19.92 8.51102 19.4905 9.22677 18.7493C12.0405 15.3939 14.429 11.7038 16.3378 7.76268C16.1901 9.91268 16.2243 12.0713 16.4401 14.2156C15.4158 14.7181 14.3475 15.1256 13.2486 15.4327C12.6181 15.5952 12.2281 15.8552 12.2168 16.1461C12.2054 16.4711 12.6279 16.7359 13.2405 17.0252C14.3293 17.5419 17.5191 19.0499 18.3056 19.5066C18.9784 19.8966 19.3066 19.5927 19.5065 19.1702C19.7665 18.6209 19.0531 18.3041 18.369 18.0961C18.0632 16.9353 17.8555 15.7508 17.7483 14.5552C19.4404 13.5939 20.8636 12.2226 21.8871 10.5674C22.1817 9.98406 22.4001 9.36529 22.5371 8.7263C22.6338 8.3321 22.6602 7.92393 22.6151 7.52056C22.6151 7.52056 22.6038 7.43281 22.5371 7.42468" fill="white"></path></svg>`;
12417
- t0 = space();
12418
- div1 = element("div");
12419
- div1.innerHTML = `An official site of the <a href="https://www.alberta.ca/index.aspx">Alberta Government</a>`;
12420
- attr(div0, "class", "service-type service-type--live");
12421
- attr(div1, "data-testid", "type");
12422
- attr(div1, "class", "site-text");
12521
+ div = element("div");
12522
+ div.innerHTML = `An official site of the <a href="https://www.alberta.ca/index.aspx">Alberta Government</a>`;
12523
+ attr(div, "data-testid", "type");
12524
+ attr(div, "class", "site-text");
12423
12525
  },
12424
12526
 
12425
12527
  m(target, anchor) {
12426
- insert(target, div0, anchor);
12427
- insert(target, t0, anchor);
12428
- insert(target, div1, anchor);
12528
+ insert(target, div, anchor);
12429
12529
  },
12430
12530
 
12431
12531
  d(detaching) {
12432
- if (detaching) detach(div0);
12433
- if (detaching) detach(t0);
12434
- if (detaching) detach(div1);
12532
+ if (detaching) detach(div);
12435
12533
  }
12436
12534
 
12437
12535
  };
12438
- } // (41:2) {#if ["alpha", "beta"].includes(type)}
12536
+ } // (31:4) {#if ["alpha", "beta"].includes(type)}
12439
12537
 
12440
12538
 
12441
12539
  function create_if_block_1$5(ctx) {
@@ -12462,7 +12560,7 @@
12462
12560
  t2 = text("This is a new ");
12463
12561
  a = element("a");
12464
12562
  a.textContent = "Alberta Government";
12465
- t4 = text(" service\n ");
12563
+ t4 = text(" service\n ");
12466
12564
  if (if_block) if_block.c();
12467
12565
  attr(div0, "data-testid", "type");
12468
12566
  attr(div0, "class", div0_class_value = "service-type service-type--" +
@@ -12523,7 +12621,7 @@
12523
12621
  }
12524
12622
 
12525
12623
  };
12526
- } // (50:6) {#if feedbackurl}
12624
+ } // (40:8) {#if feedbackurl}
12527
12625
 
12528
12626
 
12529
12627
  function create_if_block_2$5(ctx) {
@@ -12565,7 +12663,7 @@
12565
12663
  }
12566
12664
 
12567
12665
  };
12568
- } // (56:2) {#if version}
12666
+ } // (46:4) {#if version}
12569
12667
 
12570
12668
 
12571
12669
  function create_if_block$b(ctx) {
@@ -12601,15 +12699,17 @@
12601
12699
  };
12602
12700
  }
12603
12701
 
12604
- function create_fragment$l(ctx) {
12702
+ function create_fragment$m(ctx) {
12605
12703
  let header;
12704
+ let div1;
12606
12705
  let t0;
12607
12706
  let show_if = ["alpha", "beta"].includes(
12608
12707
  /*type*/
12609
12708
  ctx[0]);
12610
12709
  let t1;
12611
- let div;
12710
+ let div0;
12612
12711
  let t2;
12712
+ let header_style_value;
12613
12713
  let if_block0 =
12614
12714
  /*type*/
12615
12715
  ctx[0] === "live" && create_if_block_3$5();
@@ -12620,27 +12720,33 @@
12620
12720
  return {
12621
12721
  c() {
12622
12722
  header = element("header");
12723
+ div1 = element("div");
12623
12724
  if (if_block0) if_block0.c();
12624
12725
  t0 = space();
12625
12726
  if (if_block1) if_block1.c();
12626
12727
  t1 = space();
12627
- div = element("div");
12728
+ div0 = element("div");
12628
12729
  t2 = space();
12629
12730
  if (if_block2) if_block2.c();
12630
12731
  this.c = noop;
12631
- attr(div, "class", "spacer");
12732
+ attr(div0, "class", "spacer");
12733
+ attr(div1, "class", "content-container");
12632
12734
  attr(header, "class", "goa-official-site-header");
12735
+ attr(header, "style", header_style_value = `--max-content-width: ${
12736
+ /*maxcontentwidth*/
12737
+ ctx[3]}`);
12633
12738
  },
12634
12739
 
12635
12740
  m(target, anchor) {
12636
12741
  insert(target, header, anchor);
12637
- if (if_block0) if_block0.m(header, null);
12638
- append(header, t0);
12639
- if (if_block1) if_block1.m(header, null);
12640
- append(header, t1);
12641
- append(header, div);
12642
- append(header, t2);
12643
- if (if_block2) if_block2.m(header, null);
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);
12644
12750
  },
12645
12751
 
12646
12752
  p(ctx, [dirty]) {
@@ -12650,7 +12756,7 @@
12650
12756
  if (if_block0) ;else {
12651
12757
  if_block0 = create_if_block_3$5();
12652
12758
  if_block0.c();
12653
- if_block0.m(header, t0);
12759
+ if_block0.m(div1, t0);
12654
12760
  }
12655
12761
  } else if (if_block0) {
12656
12762
  if_block0.d(1);
@@ -12669,7 +12775,7 @@
12669
12775
  } else {
12670
12776
  if_block1 = create_if_block_1$5(ctx);
12671
12777
  if_block1.c();
12672
- if_block1.m(header, t1);
12778
+ if_block1.m(div1, t1);
12673
12779
  }
12674
12780
  } else if (if_block1) {
12675
12781
  if_block1.d(1);
@@ -12684,12 +12790,20 @@
12684
12790
  } else {
12685
12791
  if_block2 = create_if_block$b(ctx);
12686
12792
  if_block2.c();
12687
- if_block2.m(header, null);
12793
+ if_block2.m(div1, null);
12688
12794
  }
12689
12795
  } else if (if_block2) {
12690
12796
  if_block2.d(1);
12691
12797
  if_block2 = null;
12692
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
+ }
12693
12807
  },
12694
12808
 
12695
12809
  i: noop,
@@ -12710,7 +12824,7 @@
12710
12824
  return val[0].toUpperCase() + val.slice(1);
12711
12825
  }
12712
12826
 
12713
- function instance$j($$self, $$props, $$invalidate) {
12827
+ function instance$k($$self, $$props, $$invalidate) {
12714
12828
  const [Types, validateType] = typeValidator("Microsite header type", ["live", "alpha", "beta"], true);
12715
12829
  let {
12716
12830
  type
@@ -12721,6 +12835,9 @@
12721
12835
  let {
12722
12836
  feedbackurl = ""
12723
12837
  } = $$props;
12838
+ let {
12839
+ maxcontentwidth = "100%"
12840
+ } = $$props;
12724
12841
  onMount(() => {
12725
12842
  setTimeout(() => validateType(type), 1);
12726
12843
  });
@@ -12729,23 +12846,25 @@
12729
12846
  if ('type' in $$props) $$invalidate(0, type = $$props.type);
12730
12847
  if ('version' in $$props) $$invalidate(1, version = $$props.version);
12731
12848
  if ('feedbackurl' in $$props) $$invalidate(2, feedbackurl = $$props.feedbackurl);
12849
+ if ('maxcontentwidth' in $$props) $$invalidate(3, maxcontentwidth = $$props.maxcontentwidth);
12732
12850
  };
12733
12851
 
12734
- return [type, version, feedbackurl];
12852
+ return [type, version, feedbackurl, maxcontentwidth];
12735
12853
  }
12736
12854
 
12737
12855
  class MicrositeHeader extends SvelteElement {
12738
12856
  constructor(options) {
12739
12857
  super();
12740
- 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{display:flex;font-size:var(--goa-font-size-2);background-color:var(--goa-color-greyscale-100);align-items:center;justify-content:space-between;padding:0.25rem 1.5rem}@media(max-width: 640px){.goa-official-site-header{padding:0.5rem 1rem;align-items:start}}.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)}.service-type--live{padding:0}.site-text{color:var(--goa-color-text-default);line-height:1.25rem}</style>`;
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>`;
12741
12859
  init(this, {
12742
12860
  target: this.shadowRoot,
12743
12861
  props: attribute_to_object(this.attributes),
12744
12862
  customElement: true
12745
- }, instance$j, create_fragment$l, safe_not_equal, {
12863
+ }, instance$k, create_fragment$m, safe_not_equal, {
12746
12864
  type: 0,
12747
12865
  version: 1,
12748
- feedbackurl: 2
12866
+ feedbackurl: 2,
12867
+ maxcontentwidth: 3
12749
12868
  }, null);
12750
12869
 
12751
12870
  if (options) {
@@ -12761,7 +12880,7 @@
12761
12880
  }
12762
12881
 
12763
12882
  static get observedAttributes() {
12764
- return ["type", "version", "feedbackurl"];
12883
+ return ["type", "version", "feedbackurl", "maxcontentwidth"];
12765
12884
  }
12766
12885
 
12767
12886
  get type() {
@@ -12797,6 +12916,17 @@
12797
12916
  flush();
12798
12917
  }
12799
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
+
12800
12930
  }
12801
12931
 
12802
12932
  customElements.define("goa-microsite-header", MicrositeHeader);
@@ -13080,7 +13210,7 @@
13080
13210
  }
13081
13211
 
13082
13212
  };
13083
- } // (132:8) {#if calloutvariant !== null}
13213
+ } // (137:8) {#if calloutvariant !== null}
13084
13214
 
13085
13215
 
13086
13216
  function create_if_block_3$4(ctx) {
@@ -13139,7 +13269,7 @@
13139
13269
  }
13140
13270
 
13141
13271
  };
13142
- } // (145:14) {:else}
13272
+ } // (150:14) {:else}
13143
13273
 
13144
13274
 
13145
13275
  function create_else_block$4(ctx) {
@@ -13161,7 +13291,7 @@
13161
13291
  }
13162
13292
 
13163
13293
  };
13164
- } // (143:14) {#if heading}
13294
+ } // (148:14) {#if heading}
13165
13295
 
13166
13296
 
13167
13297
  function create_if_block_2$4(ctx) {
@@ -13190,7 +13320,7 @@
13190
13320
  }
13191
13321
 
13192
13322
  };
13193
- } // (149:12) {#if _isClosable}
13323
+ } // (154:12) {#if _isClosable}
13194
13324
 
13195
13325
 
13196
13326
  function create_if_block_1$4(ctx) {
@@ -13231,7 +13361,7 @@
13231
13361
  };
13232
13362
  }
13233
13363
 
13234
- function create_fragment$k(ctx) {
13364
+ function create_fragment$l(ctx) {
13235
13365
  let if_block_anchor;
13236
13366
  let current;
13237
13367
  let if_block =
@@ -13296,11 +13426,9 @@
13296
13426
  };
13297
13427
  }
13298
13428
 
13299
- function instance$i($$self, $$props, $$invalidate) {
13429
+ function instance$j($$self, $$props, $$invalidate) {
13300
13430
  let _isClosable;
13301
13431
 
13302
- let _isOpen;
13303
-
13304
13432
  let _transitionTime;
13305
13433
 
13306
13434
  let _iconType;
@@ -13330,11 +13458,17 @@
13330
13458
  let _headerEl = null; // Type verification
13331
13459
 
13332
13460
  const [CALLOUT_VARIANT, validateCalloutVariant] = typeValidator("Callout variant", ["emergency", "important", "information", "success", "event"]);
13333
- const [Transitions, validateTransition] = typeValidator("Modal transition", ["fast", "slow", "none"]); // Hooks
13461
+ const [Transitions, validateTransition] = typeValidator("Modal transition", ["fast", "slow", "none"]); // Moving the reactive var into a timeout prevents accessing null stylesheet
13462
+ // reference to allow for creation of the @keyframes for the in:fade and out:fade transitions.
13463
+ // DDIDS-1288
13334
13464
 
13335
- onMount(() => {
13336
- validateCalloutVariant(calloutvariant);
13337
- validateTransition(transition);
13465
+ let _isOpen = false; // Hooks
13466
+
13467
+ onMount(function () {
13468
+ return _call(tick, function () {
13469
+ validateCalloutVariant(calloutvariant);
13470
+ validateTransition(transition);
13471
+ });
13338
13472
  }); // Functions
13339
13473
 
13340
13474
  function close(e) {
@@ -13434,7 +13568,7 @@
13434
13568
  if ($$self.$$.dirty &
13435
13569
  /*open*/
13436
13570
  2) {
13437
- $$invalidate(7, _isOpen = toBoolean(open));
13571
+ setTimeout(() => $$invalidate(7, _isOpen = toBoolean(open)), 1);
13438
13572
  }
13439
13573
 
13440
13574
  if ($$self.$$.dirty &
@@ -13496,7 +13630,7 @@
13496
13630
  target: this.shadowRoot,
13497
13631
  props: attribute_to_object(this.attributes),
13498
13632
  customElement: true
13499
- }, instance$i, create_fragment$k, safe_not_equal, {
13633
+ }, instance$j, create_fragment$l, safe_not_equal, {
13500
13634
  heading: 0,
13501
13635
  closable: 14,
13502
13636
  open: 1,
@@ -13593,6 +13727,7 @@
13593
13727
  /* libs/web-components/src/components/notification/Notification.svelte generated by Svelte v3.51.0 */
13594
13728
 
13595
13729
  function create_if_block$9(ctx) {
13730
+ let div4;
13596
13731
  let div3;
13597
13732
  let div0;
13598
13733
  let goa_icon;
@@ -13603,13 +13738,15 @@
13603
13738
  let div2;
13604
13739
  let goa_icon_button;
13605
13740
  let goa_icon_button_inverted_value;
13606
- let div3_class_value;
13607
- let div3_transition;
13741
+ let div4_class_value;
13742
+ let div4_style_value;
13743
+ let div4_transition;
13608
13744
  let current;
13609
13745
  let mounted;
13610
13746
  let dispose;
13611
13747
  return {
13612
13748
  c() {
13749
+ div4 = element("div");
13613
13750
  div3 = element("div");
13614
13751
  div0 = element("div");
13615
13752
  goa_icon = element("goa-icon");
@@ -13621,7 +13758,7 @@
13621
13758
  goa_icon_button = element("goa-icon-button");
13622
13759
  set_custom_element_data(goa_icon, "type",
13623
13760
  /*iconType*/
13624
- ctx[2]);
13761
+ ctx[3]);
13625
13762
  set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value =
13626
13763
  /*type*/
13627
13764
  ctx[0] === "important" ? "false" : "true");
@@ -13633,13 +13770,18 @@
13633
13770
  /*type*/
13634
13771
  ctx[0] === "important" ? "false" : "true");
13635
13772
  attr(div2, "class", "close");
13636
- attr(div3, "class", div3_class_value = "notification " +
13773
+ attr(div3, "class", "content-container");
13774
+ attr(div4, "class", div4_class_value = "notification " +
13637
13775
  /*type*/
13638
13776
  ctx[0]);
13777
+ attr(div4, "style", div4_style_value = `--max-content-width: ${
13778
+ /*maxcontentwidth*/
13779
+ ctx[1]}`);
13639
13780
  },
13640
13781
 
13641
13782
  m(target, anchor) {
13642
- insert(target, div3, anchor);
13783
+ insert(target, div4, anchor);
13784
+ append(div4, div3);
13643
13785
  append(div3, div0);
13644
13786
  append(div0, goa_icon);
13645
13787
  append(div3, t0);
@@ -13652,7 +13794,7 @@
13652
13794
  if (!mounted) {
13653
13795
  dispose = listen(goa_icon_button, "click",
13654
13796
  /*close*/
13655
- ctx[3]);
13797
+ ctx[4]);
13656
13798
  mounted = true;
13657
13799
  }
13658
13800
  },
@@ -13660,10 +13802,10 @@
13660
13802
  p(ctx, dirty) {
13661
13803
  if (!current || dirty &
13662
13804
  /*iconType*/
13663
- 4) {
13805
+ 8) {
13664
13806
  set_custom_element_data(goa_icon, "type",
13665
13807
  /*iconType*/
13666
- ctx[2]);
13808
+ ctx[3]);
13667
13809
  }
13668
13810
 
13669
13811
  if (!current || dirty &
@@ -13684,31 +13826,39 @@
13684
13826
 
13685
13827
  if (!current || dirty &
13686
13828
  /*type*/
13687
- 1 && div3_class_value !== (div3_class_value = "notification " +
13829
+ 1 && div4_class_value !== (div4_class_value = "notification " +
13688
13830
  /*type*/
13689
13831
  ctx[0])) {
13690
- attr(div3, "class", div3_class_value);
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);
13691
13841
  }
13692
13842
  },
13693
13843
 
13694
13844
  i(local) {
13695
13845
  if (current) return;
13696
13846
  add_render_callback(() => {
13697
- if (!div3_transition) div3_transition = create_bidirectional_transition(div3, fade, {}, true);
13698
- div3_transition.run(1);
13847
+ if (!div4_transition) div4_transition = create_bidirectional_transition(div4, fade, {}, true);
13848
+ div4_transition.run(1);
13699
13849
  });
13700
13850
  current = true;
13701
13851
  },
13702
13852
 
13703
13853
  o(local) {
13704
- if (!div3_transition) div3_transition = create_bidirectional_transition(div3, fade, {}, false);
13705
- div3_transition.run(0);
13854
+ if (!div4_transition) div4_transition = create_bidirectional_transition(div4, fade, {}, false);
13855
+ div4_transition.run(0);
13706
13856
  current = false;
13707
13857
  },
13708
13858
 
13709
13859
  d(detaching) {
13710
- if (detaching) detach(div3);
13711
- if (detaching && div3_transition) div3_transition.end();
13860
+ if (detaching) detach(div4);
13861
+ if (detaching && div4_transition) div4_transition.end();
13712
13862
  mounted = false;
13713
13863
  dispose();
13714
13864
  }
@@ -13716,12 +13866,12 @@
13716
13866
  };
13717
13867
  }
13718
13868
 
13719
- function create_fragment$j(ctx) {
13869
+ function create_fragment$k(ctx) {
13720
13870
  let if_block_anchor;
13721
13871
  let current;
13722
13872
  let if_block =
13723
13873
  /*show*/
13724
- ctx[1] && create_if_block$9(ctx);
13874
+ ctx[2] && create_if_block$9(ctx);
13725
13875
  return {
13726
13876
  c() {
13727
13877
  if (if_block) if_block.c();
@@ -13738,13 +13888,13 @@
13738
13888
  p(ctx, [dirty]) {
13739
13889
  if (
13740
13890
  /*show*/
13741
- ctx[1]) {
13891
+ ctx[2]) {
13742
13892
  if (if_block) {
13743
13893
  if_block.p(ctx, dirty);
13744
13894
 
13745
13895
  if (dirty &
13746
13896
  /*show*/
13747
- 2) {
13897
+ 4) {
13748
13898
  transition_in(if_block, 1);
13749
13899
  }
13750
13900
  } else {
@@ -13781,19 +13931,22 @@
13781
13931
  };
13782
13932
  }
13783
13933
 
13784
- function instance$h($$self, $$props, $$invalidate) {
13934
+ function instance$i($$self, $$props, $$invalidate) {
13785
13935
  let iconType;
13786
13936
  const [Types, validateType] = typeValidator("Notification type", ["emergency", "important", "information", "event"], true);
13787
13937
  let {
13788
13938
  type = ""
13789
13939
  } = $$props;
13940
+ let {
13941
+ maxcontentwidth = "100%"
13942
+ } = $$props;
13790
13943
  let show = true;
13791
13944
  onMount(() => {
13792
13945
  setTimeout(() => validateType(type), 1);
13793
13946
  });
13794
13947
 
13795
13948
  function close(e) {
13796
- $$invalidate(1, show = false);
13949
+ $$invalidate(2, show = false);
13797
13950
  e.target.dispatchEvent(new CustomEvent("_dismiss", {
13798
13951
  composed: true
13799
13952
  }));
@@ -13802,29 +13955,31 @@
13802
13955
 
13803
13956
  $$self.$$set = $$props => {
13804
13957
  if ('type' in $$props) $$invalidate(0, type = $$props.type);
13958
+ if ('maxcontentwidth' in $$props) $$invalidate(1, maxcontentwidth = $$props.maxcontentwidth);
13805
13959
  };
13806
13960
 
13807
13961
  $$self.$$.update = () => {
13808
13962
  if ($$self.$$.dirty &
13809
13963
  /*type*/
13810
13964
  1) {
13811
- $$invalidate(2, iconType = type === "emergency" ? "warning" : type === "important" ? "alert-circle" : type === "information" ? "information-circle" : type === "event" ? "calendar" : "");
13965
+ $$invalidate(3, iconType = type === "emergency" ? "warning" : type === "important" ? "alert-circle" : type === "information" ? "information-circle" : type === "event" ? "calendar" : "");
13812
13966
  }
13813
13967
  };
13814
13968
 
13815
- return [type, show, iconType, close];
13969
+ return [type, maxcontentwidth, show, iconType, close];
13816
13970
  }
13817
13971
 
13818
13972
  class Notification extends SvelteElement {
13819
13973
  constructor(options) {
13820
13974
  super();
13821
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.notification{padding:1.5rem;display:flex;gap:1rem}.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{flex:1 1 auto}::slotted(a){color:unset !important;outline:unset !important}.close{flex:0 0 auto}</style>`;
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>`;
13822
13976
  init(this, {
13823
13977
  target: this.shadowRoot,
13824
13978
  props: attribute_to_object(this.attributes),
13825
13979
  customElement: true
13826
- }, instance$h, create_fragment$j, safe_not_equal, {
13827
- type: 0
13980
+ }, instance$i, create_fragment$k, safe_not_equal, {
13981
+ type: 0,
13982
+ maxcontentwidth: 1
13828
13983
  }, null);
13829
13984
 
13830
13985
  if (options) {
@@ -13840,7 +13995,7 @@
13840
13995
  }
13841
13996
 
13842
13997
  static get observedAttributes() {
13843
- return ["type"];
13998
+ return ["type", "maxcontentwidth"];
13844
13999
  }
13845
14000
 
13846
14001
  get type() {
@@ -13854,6 +14009,17 @@
13854
14009
  flush();
13855
14010
  }
13856
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
+
13857
14023
  }
13858
14024
 
13859
14025
  customElements.define("goa-notification", Notification);
@@ -13865,7 +14031,7 @@
13865
14031
  /* libs/web-components/src/components/page-block/PageBlock.svelte generated by Svelte v3.51.0 */
13866
14032
 
13867
14033
 
13868
- function create_fragment$i(ctx) {
14034
+ function create_fragment$j(ctx) {
13869
14035
  let div;
13870
14036
  let slot;
13871
14037
  let div_style_value;
@@ -13905,7 +14071,7 @@
13905
14071
  };
13906
14072
  }
13907
14073
 
13908
- function instance$g($$self, $$props, $$invalidate) {
14074
+ function instance$h($$self, $$props, $$invalidate) {
13909
14075
  const Sizes = {
13910
14076
  "full": "100%"
13911
14077
  };
@@ -13941,12 +14107,12 @@
13941
14107
  class PageBlock extends SvelteElement {
13942
14108
  constructor(options) {
13943
14109
  super();
13944
- 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 1.75rem}</style>`;
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>`;
13945
14111
  init(this, {
13946
14112
  target: this.shadowRoot,
13947
14113
  props: attribute_to_object(this.attributes),
13948
14114
  customElement: true
13949
- }, instance$g, create_fragment$i, safe_not_equal, {
14115
+ }, instance$h, create_fragment$j, safe_not_equal, {
13950
14116
  width: 1,
13951
14117
  _width: 0
13952
14118
  }, null);
@@ -14164,7 +14330,7 @@
14164
14330
  };
14165
14331
  }
14166
14332
 
14167
- function create_fragment$h(ctx) {
14333
+ function create_fragment$i(ctx) {
14168
14334
  let goa_block1;
14169
14335
  let div;
14170
14336
  let t0;
@@ -14327,7 +14493,7 @@
14327
14493
  };
14328
14494
  }
14329
14495
 
14330
- function instance$f($$self, $$props, $$invalidate) {
14496
+ function instance$g($$self, $$props, $$invalidate) {
14331
14497
  let _pageCount;
14332
14498
 
14333
14499
  const [Variants, validateVariant] = typeValidator("Pagination variant", ["all", "links-only"]);
@@ -14447,7 +14613,7 @@
14447
14613
  target: this.shadowRoot,
14448
14614
  props: attribute_to_object(this.attributes),
14449
14615
  customElement: true
14450
- }, instance$f, create_fragment$h, safe_not_equal, {
14616
+ }, instance$g, create_fragment$i, safe_not_equal, {
14451
14617
  pagenumber: 0,
14452
14618
  itemcount: 10,
14453
14619
  perpagecount: 11,
@@ -14593,11 +14759,11 @@
14593
14759
  ctx[1]);
14594
14760
  set_style(section, "padding",
14595
14761
  /*paddedContent*/
14596
- ctx[4] ? 'var(--goa-space-m)' : '0');
14762
+ ctx[9] ? 'var(--goa-space-m)' : '0');
14597
14763
  attr(div1, "class", "popover-container");
14598
14764
  set_custom_element_data(goa_focus_trap, "active",
14599
14765
  /*_isContentVisible*/
14600
- ctx[2]);
14766
+ ctx[6]);
14601
14767
  },
14602
14768
 
14603
14769
  m(target, anchor) {
@@ -14607,11 +14773,14 @@
14607
14773
  append(goa_focus_trap, div1);
14608
14774
  append(div1, section);
14609
14775
  append(section, slot);
14776
+ /*section_binding*/
14777
+
14778
+ ctx[14](section);
14610
14779
 
14611
14780
  if (!mounted) {
14612
14781
  dispose = listen(div0, "click",
14613
14782
  /*closePopover*/
14614
- ctx[6]);
14783
+ ctx[11]);
14615
14784
  mounted = true;
14616
14785
  }
14617
14786
  },
@@ -14627,23 +14796,26 @@
14627
14796
 
14628
14797
  if (dirty &
14629
14798
  /*paddedContent*/
14630
- 16) {
14799
+ 512) {
14631
14800
  set_style(section, "padding",
14632
14801
  /*paddedContent*/
14633
- ctx[4] ? 'var(--goa-space-m)' : '0');
14802
+ ctx[9] ? 'var(--goa-space-m)' : '0');
14634
14803
  }
14635
14804
 
14636
14805
  if (dirty &
14637
14806
  /*_isContentVisible*/
14638
- 4) {
14807
+ 64) {
14639
14808
  set_custom_element_data(goa_focus_trap, "active",
14640
14809
  /*_isContentVisible*/
14641
- ctx[2]);
14810
+ ctx[6]);
14642
14811
  }
14643
14812
  },
14644
14813
 
14645
14814
  d(detaching) {
14646
14815
  if (detaching) detach(goa_focus_trap);
14816
+ /*section_binding*/
14817
+
14818
+ ctx[14](null);
14647
14819
  mounted = false;
14648
14820
  dispose();
14649
14821
  }
@@ -14651,15 +14823,16 @@
14651
14823
  };
14652
14824
  }
14653
14825
 
14654
- function create_fragment$g(ctx) {
14826
+ function create_fragment$h(ctx) {
14655
14827
  let div1;
14656
14828
  let div0;
14657
14829
  let t;
14830
+ let div1_style_value;
14658
14831
  let mounted;
14659
14832
  let dispose;
14660
14833
  let if_block =
14661
14834
  /*_isContentVisible*/
14662
- ctx[2] && create_if_block$7(ctx);
14835
+ ctx[6] && create_if_block$7(ctx);
14663
14836
  return {
14664
14837
  c() {
14665
14838
  div1 = element("div");
@@ -14674,6 +14847,15 @@
14674
14847
  attr(div1, "data-testid",
14675
14848
  /*testid*/
14676
14849
  ctx[0]);
14850
+ attr(div1, "style", div1_style_value = calculateMargin(
14851
+ /*mt*/
14852
+ ctx[2],
14853
+ /*mr*/
14854
+ ctx[3],
14855
+ /*mb*/
14856
+ ctx[4],
14857
+ /*ml*/
14858
+ ctx[5]));
14677
14859
  },
14678
14860
 
14679
14861
  m(target, anchor) {
@@ -14681,14 +14863,14 @@
14681
14863
  append(div1, div0);
14682
14864
  /*div0_binding*/
14683
14865
 
14684
- ctx[8](div0);
14866
+ ctx[13](div0);
14685
14867
  append(div1, t);
14686
14868
  if (if_block) if_block.m(div1, null);
14687
14869
 
14688
14870
  if (!mounted) {
14689
14871
  dispose = listen(div0, "click",
14690
14872
  /*showPopover*/
14691
- ctx[5]);
14873
+ ctx[10]);
14692
14874
  mounted = true;
14693
14875
  }
14694
14876
  },
@@ -14696,7 +14878,7 @@
14696
14878
  p(ctx, [dirty]) {
14697
14879
  if (
14698
14880
  /*_isContentVisible*/
14699
- ctx[2]) {
14881
+ ctx[6]) {
14700
14882
  if (if_block) {
14701
14883
  if_block.p(ctx, dirty);
14702
14884
  } else {
@@ -14716,6 +14898,20 @@
14716
14898
  /*testid*/
14717
14899
  ctx[0]);
14718
14900
  }
14901
+
14902
+ if (dirty &
14903
+ /*mt, mr, mb, ml*/
14904
+ 60 && div1_style_value !== (div1_style_value = calculateMargin(
14905
+ /*mt*/
14906
+ ctx[2],
14907
+ /*mr*/
14908
+ ctx[3],
14909
+ /*mb*/
14910
+ ctx[4],
14911
+ /*ml*/
14912
+ ctx[5]))) {
14913
+ attr(div1, "style", div1_style_value);
14914
+ }
14719
14915
  },
14720
14916
 
14721
14917
  i: noop,
@@ -14725,7 +14921,7 @@
14725
14921
  if (detaching) detach(div1);
14726
14922
  /*div0_binding*/
14727
14923
 
14728
- ctx[8](null);
14924
+ ctx[13](null);
14729
14925
  if (if_block) if_block.d();
14730
14926
  mounted = false;
14731
14927
  dispose();
@@ -14734,7 +14930,33 @@
14734
14930
  };
14735
14931
  }
14736
14932
 
14737
- function instance$e($$self, $$props, $$invalidate) {
14933
+ function getBoundingClientRectWithMargins(el) {
14934
+ const rect = el.getBoundingClientRect();
14935
+ const style = window.getComputedStyle(el);
14936
+ const mTop = parseInt(style.marginTop, 10) || 0;
14937
+ const mRight = parseInt(style.marginRight, 10) || 0;
14938
+ const mBottom = parseInt(style.marginBottom, 10) || 0;
14939
+ const mLeft = parseInt(style.marginLeft, 10) || 0;
14940
+ return {
14941
+ top: rect.top - mTop,
14942
+ right: rect.right + mRight,
14943
+ bottom: rect.bottom + mBottom,
14944
+ left: rect.left - mLeft,
14945
+ width: rect.width + mLeft + mRight,
14946
+ height: rect.height + mTop + mBottom,
14947
+ x: rect.x - mLeft,
14948
+ y: rect.y - mTop
14949
+ };
14950
+ }
14951
+
14952
+ function instance$f($$self, $$props, $$invalidate) {
14953
+ const showPopover = _async(function () {
14954
+ $$invalidate(6, _isContentVisible = true);
14955
+ return _call(tick, function () {
14956
+ setPopoverPosition();
14957
+ });
14958
+ });
14959
+
14738
14960
  let paddedContent;
14739
14961
  let {
14740
14962
  testid = ""
@@ -14749,6 +14971,20 @@
14749
14971
 
14750
14972
  let _targetEl;
14751
14973
 
14974
+ let _popoverEl;
14975
+
14976
+ let {
14977
+ mt = null
14978
+ } = $$props;
14979
+ let {
14980
+ mr = null
14981
+ } = $$props;
14982
+ let {
14983
+ mb = null
14984
+ } = $$props;
14985
+ let {
14986
+ ml = null
14987
+ } = $$props;
14752
14988
  onMount(function () {
14753
14989
  return _call(tick, function () {
14754
14990
  addFocusEventListener();
@@ -14758,12 +14994,8 @@
14758
14994
  removeEventListeners();
14759
14995
  });
14760
14996
 
14761
- function showPopover() {
14762
- $$invalidate(2, _isContentVisible = true);
14763
- }
14764
-
14765
14997
  function closePopover() {
14766
- $$invalidate(2, _isContentVisible = false);
14998
+ $$invalidate(6, _isContentVisible = false);
14767
14999
  }
14768
15000
 
14769
15001
  const onInputKeyDown = e => {
@@ -14781,6 +15013,30 @@
14781
15013
  }
14782
15014
  };
14783
15015
 
15016
+ function setPopoverPosition() {
15017
+ // Get target and content rectangles
15018
+ const targetRect = getBoundingClientRectWithMargins(_targetEl);
15019
+ const contentRect = getBoundingClientRectWithMargins(_popoverEl); // Calculate available space above and below the target element
15020
+
15021
+ const spaceAbove = targetRect.top;
15022
+ const spaceBelow = window.innerHeight - targetRect.bottom; // Determine if there's more space above or below the target element
15023
+
15024
+ const displayAbove = spaceAbove > contentRect.height && spaceAbove > spaceBelow && spaceBelow < contentRect.height; // If there's more space above, display the popover above the target element
15025
+
15026
+ if (displayAbove) {
15027
+ $$invalidate(8, _popoverEl.style.top = `${-contentRect.height - targetRect.height - 4}px`, _popoverEl);
15028
+ } else {
15029
+ $$invalidate(8, _popoverEl.style.top = '0px', _popoverEl);
15030
+ } // Move the popover to the left if it is too far to the right and only if there is space to the left
15031
+
15032
+
15033
+ if (window.innerWidth - targetRect.right < contentRect.width && targetRect.left > contentRect.width) {
15034
+ $$invalidate(8, _popoverEl.style.left = `-${contentRect.width - targetRect.width}px`, _popoverEl);
15035
+ } else {
15036
+ $$invalidate(8, _popoverEl.style.left = '0px', _popoverEl);
15037
+ }
15038
+ }
15039
+
14784
15040
  function addFocusEventListener() {
14785
15041
  _targetEl.addEventListener("focus", onFocus, true);
14786
15042
  }
@@ -14799,39 +15055,54 @@
14799
15055
  function div0_binding($$value) {
14800
15056
  binding_callbacks[$$value ? 'unshift' : 'push'](() => {
14801
15057
  _targetEl = $$value;
14802
- $$invalidate(3, _targetEl);
15058
+ $$invalidate(7, _targetEl);
15059
+ });
15060
+ }
15061
+
15062
+ function section_binding($$value) {
15063
+ binding_callbacks[$$value ? 'unshift' : 'push'](() => {
15064
+ _popoverEl = $$value;
15065
+ $$invalidate(8, _popoverEl);
14803
15066
  });
14804
15067
  }
14805
15068
 
14806
15069
  $$self.$$set = $$props => {
14807
15070
  if ('testid' in $$props) $$invalidate(0, testid = $$props.testid);
14808
15071
  if ('maxwidth' in $$props) $$invalidate(1, maxwidth = $$props.maxwidth);
14809
- if ('padded' in $$props) $$invalidate(7, padded = $$props.padded);
15072
+ if ('padded' in $$props) $$invalidate(12, padded = $$props.padded);
15073
+ if ('mt' in $$props) $$invalidate(2, mt = $$props.mt);
15074
+ if ('mr' in $$props) $$invalidate(3, mr = $$props.mr);
15075
+ if ('mb' in $$props) $$invalidate(4, mb = $$props.mb);
15076
+ if ('ml' in $$props) $$invalidate(5, ml = $$props.ml);
14810
15077
  };
14811
15078
 
14812
15079
  $$self.$$.update = () => {
14813
15080
  if ($$self.$$.dirty &
14814
15081
  /*padded*/
14815
- 128) {
14816
- $$invalidate(4, paddedContent = toBoolean(padded));
15082
+ 4096) {
15083
+ $$invalidate(9, paddedContent = toBoolean(padded));
14817
15084
  }
14818
15085
  };
14819
15086
 
14820
- return [testid, maxwidth, _isContentVisible, _targetEl, paddedContent, showPopover, closePopover, padded, div0_binding];
15087
+ return [testid, maxwidth, mt, mr, mb, ml, _isContentVisible, _targetEl, _popoverEl, paddedContent, showPopover, closePopover, padded, div0_binding, section_binding];
14821
15088
  }
14822
15089
 
14823
15090
  class Popover extends SvelteElement {
14824
15091
  constructor(options) {
14825
15092
  super();
14826
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-4)}.popover-target{width:fit-content;cursor:pointer}.popover-target:focus{outline:var(--goa-border-width-l) solid var(--goa-color-interactive-focus)}.popover-content{position:absolute;left:0;right:0;margin-top:3px;list-style-type:none;background:var(--goa-color-greyscale-white);border-radius:var(--goa-border-radius-m);outline:none;box-shadow:var(--shadow-1);z-index:99}.popover-background{cursor:default;position:fixed;z-index:98;inset:0}.popover-container{position:relative}</style>`;
15093
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-4)}.popover-target{width:fit-content;cursor:pointer}.popover-target:focus{outline:var(--goa-border-width-l) solid var(--goa-color-interactive-focus)}.popover-content{position:absolute;left:0;right:0;margin-top:3px;list-style-type:none;background:var(--goa-color-greyscale-white);outline:none;filter:drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));z-index:99;width:max-content}.popover-background{cursor:default;position:fixed;z-index:98;inset:0}.popover-container{position:relative}</style>`;
14827
15094
  init(this, {
14828
15095
  target: this.shadowRoot,
14829
15096
  props: attribute_to_object(this.attributes),
14830
15097
  customElement: true
14831
- }, instance$e, create_fragment$g, safe_not_equal, {
15098
+ }, instance$f, create_fragment$h, safe_not_equal, {
14832
15099
  testid: 0,
14833
15100
  maxwidth: 1,
14834
- padded: 7
15101
+ padded: 12,
15102
+ mt: 2,
15103
+ mr: 3,
15104
+ mb: 4,
15105
+ ml: 5
14835
15106
  }, null);
14836
15107
 
14837
15108
  if (options) {
@@ -14847,7 +15118,7 @@
14847
15118
  }
14848
15119
 
14849
15120
  static get observedAttributes() {
14850
- return ["testid", "maxwidth", "padded"];
15121
+ return ["testid", "maxwidth", "padded", "mt", "mr", "mb", "ml"];
14851
15122
  }
14852
15123
 
14853
15124
  get testid() {
@@ -14873,7 +15144,7 @@
14873
15144
  }
14874
15145
 
14875
15146
  get padded() {
14876
- return this.$$.ctx[7];
15147
+ return this.$$.ctx[12];
14877
15148
  }
14878
15149
 
14879
15150
  set padded(padded) {
@@ -14883,6 +15154,50 @@
14883
15154
  flush();
14884
15155
  }
14885
15156
 
15157
+ get mt() {
15158
+ return this.$$.ctx[2];
15159
+ }
15160
+
15161
+ set mt(mt) {
15162
+ this.$$set({
15163
+ mt
15164
+ });
15165
+ flush();
15166
+ }
15167
+
15168
+ get mr() {
15169
+ return this.$$.ctx[3];
15170
+ }
15171
+
15172
+ set mr(mr) {
15173
+ this.$$set({
15174
+ mr
15175
+ });
15176
+ flush();
15177
+ }
15178
+
15179
+ get mb() {
15180
+ return this.$$.ctx[4];
15181
+ }
15182
+
15183
+ set mb(mb) {
15184
+ this.$$set({
15185
+ mb
15186
+ });
15187
+ flush();
15188
+ }
15189
+
15190
+ get ml() {
15191
+ return this.$$.ctx[5];
15192
+ }
15193
+
15194
+ set ml(ml) {
15195
+ this.$$set({
15196
+ ml
15197
+ });
15198
+ flush();
15199
+ }
15200
+
14886
15201
  }
14887
15202
 
14888
15203
  customElements.define("goa-popover", Popover);
@@ -15078,7 +15393,7 @@
15078
15393
  };
15079
15394
  }
15080
15395
 
15081
- function create_fragment$f(ctx) {
15396
+ function create_fragment$g(ctx) {
15082
15397
  let div;
15083
15398
  let slot;
15084
15399
  let t;
@@ -15201,7 +15516,7 @@
15201
15516
  };
15202
15517
  }
15203
15518
 
15204
- function instance$d($$self, $$props, $$invalidate) {
15519
+ function instance$e($$self, $$props, $$invalidate) {
15205
15520
  let isDisabled;
15206
15521
  let isError;
15207
15522
  const [Orientations, validateOrientation] = typeValidator("Radio group orientation", ["vertical", "horizontal"]);
@@ -15345,7 +15660,7 @@
15345
15660
  target: this.shadowRoot,
15346
15661
  props: attribute_to_object(this.attributes),
15347
15662
  customElement: true
15348
- }, instance$d, create_fragment$f, safe_not_equal, {
15663
+ }, instance$e, create_fragment$g, safe_not_equal, {
15349
15664
  name: 1,
15350
15665
  value: 0,
15351
15666
  orientation: 2,
@@ -15501,7 +15816,7 @@
15501
15816
  customElements.define("goa-radio-group", RadioGroup);
15502
15817
  /* libs/web-components/src/components/scrollable/Scrollable.svelte generated by Svelte v3.51.0 */
15503
15818
 
15504
- function create_fragment$e(ctx) {
15819
+ function create_fragment$f(ctx) {
15505
15820
  let div;
15506
15821
  let slot;
15507
15822
  let div_style_value;
@@ -15586,7 +15901,7 @@
15586
15901
  };
15587
15902
  }
15588
15903
 
15589
- function instance$c($$self, $$props, $$invalidate) {
15904
+ function instance$d($$self, $$props, $$invalidate) {
15590
15905
  let {
15591
15906
  direction = "vertical"
15592
15907
  } = $$props;
@@ -15652,7 +15967,7 @@
15652
15967
  target: this.shadowRoot,
15653
15968
  props: attribute_to_object(this.attributes),
15654
15969
  customElement: true
15655
- }, instance$c, create_fragment$e, safe_not_equal, {
15970
+ }, instance$d, create_fragment$f, safe_not_equal, {
15656
15971
  direction: 0,
15657
15972
  hpadding: 1,
15658
15973
  vpadding: 2,
@@ -16332,7 +16647,7 @@
16332
16647
  };
16333
16648
  }
16334
16649
 
16335
- function create_fragment$d(ctx) {
16650
+ function create_fragment$e(ctx) {
16336
16651
  let div;
16337
16652
  let current_block_type_index;
16338
16653
  let if_block;
@@ -16451,7 +16766,7 @@
16451
16766
  };
16452
16767
  }
16453
16768
 
16454
- function instance$b($$self, $$props, $$invalidate) {
16769
+ function instance$c($$self, $$props, $$invalidate) {
16455
16770
  const [Types, validateType] = typeValidator("Skeleton type", ["image", "text", "title", "text-small", "avatar", "header", "paragraph", "thumbnail", "card", "lines", "profile", "article"], true);
16456
16771
  const [Sizes, validateSize] = typeValidator("Skeleton size", ["1", "2", "3", "4"]);
16457
16772
  let {
@@ -16509,7 +16824,7 @@
16509
16824
  target: this.shadowRoot,
16510
16825
  props: attribute_to_object(this.attributes),
16511
16826
  customElement: true
16512
- }, instance$b, create_fragment$d, safe_not_equal, {
16827
+ }, instance$c, create_fragment$e, safe_not_equal, {
16513
16828
  maxwidth: 0,
16514
16829
  size: 1,
16515
16830
  linecount: 2,
@@ -16641,7 +16956,7 @@
16641
16956
  customElements.define("goa-skeleton", Skeleton);
16642
16957
  /* libs/web-components/src/components/spacer/Spacer.svelte generated by Svelte v3.51.0 */
16643
16958
 
16644
- function create_fragment$c(ctx) {
16959
+ function create_fragment$d(ctx) {
16645
16960
  let div;
16646
16961
  return {
16647
16962
  c() {
@@ -16670,7 +16985,7 @@
16670
16985
  };
16671
16986
  }
16672
16987
 
16673
- function instance$a($$self, $$props, $$invalidate) {
16988
+ function instance$b($$self, $$props, $$invalidate) {
16674
16989
  let {
16675
16990
  hspacing = "none"
16676
16991
  } = $$props;
@@ -16708,7 +17023,7 @@
16708
17023
  target: this.shadowRoot,
16709
17024
  props: attribute_to_object(this.attributes),
16710
17025
  customElement: true
16711
- }, instance$a, create_fragment$c, safe_not_equal, {
17026
+ }, instance$b, create_fragment$d, safe_not_equal, {
16712
17027
  hspacing: 1,
16713
17028
  vspacing: 2
16714
17029
  }, null);
@@ -17130,7 +17445,7 @@
17130
17445
  };
17131
17446
  }
17132
17447
 
17133
- function create_fragment$b(ctx) {
17448
+ function create_fragment$c(ctx) {
17134
17449
  let if_block_anchor;
17135
17450
  let if_block =
17136
17451
  /*ready*/
@@ -17175,7 +17490,7 @@
17175
17490
  };
17176
17491
  }
17177
17492
 
17178
- function instance$9($$self, $$props, $$invalidate) {
17493
+ function instance$a($$self, $$props, $$invalidate) {
17179
17494
  let diameter;
17180
17495
  let strokewidth;
17181
17496
  let radius;
@@ -17306,7 +17621,7 @@
17306
17621
  target: this.shadowRoot,
17307
17622
  props: attribute_to_object(this.attributes),
17308
17623
  customElement: true
17309
- }, instance$9, create_fragment$b, safe_not_equal, {
17624
+ }, instance$a, create_fragment$c, safe_not_equal, {
17310
17625
  size: 10,
17311
17626
  invert: 0,
17312
17627
  progress: 11,
@@ -17378,7 +17693,7 @@
17378
17693
  customElements.define("goa-spinner", Spinner);
17379
17694
  /* libs/web-components/src/components/table/Table.svelte generated by Svelte v3.51.0 */
17380
17695
 
17381
- function create_fragment$a(ctx) {
17696
+ function create_fragment$b(ctx) {
17382
17697
  let table;
17383
17698
  let slot;
17384
17699
  let t0;
@@ -17480,7 +17795,7 @@
17480
17795
  };
17481
17796
  }
17482
17797
 
17483
- function instance$8($$self, $$props, $$invalidate) {
17798
+ function instance$9($$self, $$props, $$invalidate) {
17484
17799
  const attachSortEventHandling = function attachSortEventHandling() {
17485
17800
  return _call(tick, function () {
17486
17801
  const headings = _rootEl.querySelectorAll("goa-table-sort-header");
@@ -17589,12 +17904,12 @@
17589
17904
  class Table extends SvelteElement {
17590
17905
  constructor(options) {
17591
17906
  super();
17592
- 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-700);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>`;
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>`;
17593
17908
  init(this, {
17594
17909
  target: this.shadowRoot,
17595
17910
  props: attribute_to_object(this.attributes),
17596
17911
  customElement: true
17597
- }, instance$8, create_fragment$a, safe_not_equal, {
17912
+ }, instance$9, create_fragment$b, safe_not_equal, {
17598
17913
  width: 0,
17599
17914
  stickyheader: 8,
17600
17915
  variant: 1,
@@ -17770,7 +18085,7 @@
17770
18085
  };
17771
18086
  }
17772
18087
 
17773
- function create_fragment$9(ctx) {
18088
+ function create_fragment$a(ctx) {
17774
18089
  let button;
17775
18090
  let slot;
17776
18091
  let t;
@@ -17825,7 +18140,7 @@
17825
18140
  };
17826
18141
  }
17827
18142
 
17828
- function instance$7($$self, $$props, $$invalidate) {
18143
+ function instance$8($$self, $$props, $$invalidate) {
17829
18144
  let {
17830
18145
  direction = "none"
17831
18146
  } = $$props;
@@ -17845,7 +18160,7 @@
17845
18160
  target: this.shadowRoot,
17846
18161
  props: attribute_to_object(this.attributes),
17847
18162
  customElement: true
17848
- }, instance$7, create_fragment$9, safe_not_equal, {
18163
+ }, instance$8, create_fragment$a, safe_not_equal, {
17849
18164
  direction: 0
17850
18165
  }, null);
17851
18166
 
@@ -17881,7 +18196,7 @@
17881
18196
  customElements.define("goa-table-sort-header", TableSortHeader);
17882
18197
  /* libs/web-components/src/components/text-area/TextArea.svelte generated by Svelte v3.51.0 */
17883
18198
 
17884
- function create_fragment$8(ctx) {
18199
+ function create_fragment$9(ctx) {
17885
18200
  let div;
17886
18201
  let textarea;
17887
18202
  let textarea_aria_label_value;
@@ -18062,7 +18377,7 @@
18062
18377
  };
18063
18378
  }
18064
18379
 
18065
- function instance$6($$self, $$props, $$invalidate) {
18380
+ function instance$7($$self, $$props, $$invalidate) {
18066
18381
  let isError;
18067
18382
  let isDisabled;
18068
18383
  let isReadonly;
@@ -18179,7 +18494,7 @@
18179
18494
  target: this.shadowRoot,
18180
18495
  props: attribute_to_object(this.attributes),
18181
18496
  customElement: true
18182
- }, instance$6, create_fragment$8, safe_not_equal, {
18497
+ }, instance$7, create_fragment$9, safe_not_equal, {
18183
18498
  name: 0,
18184
18499
  value: 1,
18185
18500
  placeholder: 2,
@@ -18383,7 +18698,7 @@
18383
18698
  customElements.define("goa-textarea", TextArea);
18384
18699
  /* libs/web-components/src/layouts/FullScreenNavbarLayout.svelte generated by Svelte v3.51.0 */
18385
18700
 
18386
- function create_fragment$7(ctx) {
18701
+ function create_fragment$8(ctx) {
18387
18702
  let div;
18388
18703
  return {
18389
18704
  c() {
@@ -18427,7 +18742,7 @@
18427
18742
  target: this.shadowRoot,
18428
18743
  props: attribute_to_object(this.attributes),
18429
18744
  customElement: true
18430
- }, null, create_fragment$7, safe_not_equal, {}, null);
18745
+ }, null, create_fragment$8, safe_not_equal, {}, null);
18431
18746
 
18432
18747
  if (options) {
18433
18748
  if (options.target) {
@@ -18441,7 +18756,7 @@
18441
18756
  customElements.define("goa-layout-full-nav", FullScreenNavbarLayout);
18442
18757
  /* libs/web-components/src/layouts/one-column-layout/OneColumnLayout.svelte generated by Svelte v3.51.0 */
18443
18758
 
18444
- function create_fragment$6(ctx) {
18759
+ function create_fragment$7(ctx) {
18445
18760
  let div;
18446
18761
  return {
18447
18762
  c() {
@@ -18478,7 +18793,7 @@
18478
18793
  target: this.shadowRoot,
18479
18794
  props: attribute_to_object(this.attributes),
18480
18795
  customElement: true
18481
- }, null, create_fragment$6, safe_not_equal, {}, null);
18796
+ }, null, create_fragment$7, safe_not_equal, {}, null);
18482
18797
 
18483
18798
  if (options) {
18484
18799
  if (options.target) {
@@ -18492,7 +18807,7 @@
18492
18807
  customElements.define("goa-one-column-layout", OneColumnLayout);
18493
18808
  /* libs/web-components/src/layouts/two-column-layout/TwoColumnLayout.svelte generated by Svelte v3.51.0 */
18494
18809
 
18495
- function create_fragment$5(ctx) {
18810
+ function create_fragment$6(ctx) {
18496
18811
  let div;
18497
18812
  let header;
18498
18813
  let t0;
@@ -18562,7 +18877,7 @@
18562
18877
  };
18563
18878
  }
18564
18879
 
18565
- function instance$5($$self, $$props, $$invalidate) {
18880
+ function instance$6($$self, $$props, $$invalidate) {
18566
18881
  let {
18567
18882
  navcolumnwidth = ""
18568
18883
  } = $$props;
@@ -18586,7 +18901,7 @@
18586
18901
  target: this.shadowRoot,
18587
18902
  props: attribute_to_object(this.attributes),
18588
18903
  customElement: true
18589
- }, instance$5, create_fragment$5, safe_not_equal, {
18904
+ }, instance$6, create_fragment$6, safe_not_equal, {
18590
18905
  navcolumnwidth: 0,
18591
18906
  maxcontentwidth: 1
18592
18907
  }, null);
@@ -18632,6 +18947,172 @@
18632
18947
  }
18633
18948
 
18634
18949
  customElements.define("goa-two-column-layout", TwoColumnLayout);
18950
+ /* libs/web-components/src/layouts/three-column-layout/ThreeColumnLayout.svelte generated by Svelte v3.51.0 */
18951
+
18952
+ function create_fragment$5(ctx) {
18953
+ let div;
18954
+ let header;
18955
+ let t0;
18956
+ let section;
18957
+ let t3;
18958
+ let footer;
18959
+ let div_style_value;
18960
+ return {
18961
+ c() {
18962
+ div = element("div");
18963
+ header = element("header");
18964
+ header.innerHTML = `<slot name="header"></slot>`;
18965
+ t0 = space();
18966
+ section = element("section");
18967
+ section.innerHTML = `<nav class="nav"><slot name="nav"></slot></nav>
18968
+
18969
+ <main><slot></slot></main>
18970
+
18971
+ <nav class="nav sidebar"><slot name="sidebar"></slot></nav>`;
18972
+ t3 = space();
18973
+ footer = element("footer");
18974
+ footer.innerHTML = `<slot name="footer"></slot>`;
18975
+ this.c = noop;
18976
+ attr(header, "class", "header");
18977
+ attr(section, "class", "content");
18978
+ attr(footer, "class", "footer");
18979
+ attr(div, "class", "page");
18980
+ attr(div, "style", div_style_value = `
18981
+ --max-content-width: ${
18982
+ /*maxcontentwidth*/
18983
+ ctx[2] || "100%"};
18984
+ --nav-column-width: ${
18985
+ /*leftcolumnwidth*/
18986
+ ctx[0] || "256px"};
18987
+ --sidebar-column-width: ${
18988
+ /*rightcolumnwidth*/
18989
+ ctx[1] || "256px"}
18990
+ `);
18991
+ },
18992
+
18993
+ m(target, anchor) {
18994
+ insert(target, div, anchor);
18995
+ append(div, header);
18996
+ append(div, t0);
18997
+ append(div, section);
18998
+ append(div, t3);
18999
+ append(div, footer);
19000
+ },
19001
+
19002
+ p(ctx, [dirty]) {
19003
+ if (dirty &
19004
+ /*maxcontentwidth, leftcolumnwidth, rightcolumnwidth*/
19005
+ 7 && div_style_value !== (div_style_value = `
19006
+ --max-content-width: ${
19007
+ /*maxcontentwidth*/
19008
+ ctx[2] || "100%"};
19009
+ --nav-column-width: ${
19010
+ /*leftcolumnwidth*/
19011
+ ctx[0] || "256px"};
19012
+ --sidebar-column-width: ${
19013
+ /*rightcolumnwidth*/
19014
+ ctx[1] || "256px"}
19015
+ `)) {
19016
+ attr(div, "style", div_style_value);
19017
+ }
19018
+ },
19019
+
19020
+ i: noop,
19021
+ o: noop,
19022
+
19023
+ d(detaching) {
19024
+ if (detaching) detach(div);
19025
+ }
19026
+
19027
+ };
19028
+ }
19029
+
19030
+ function instance$5($$self, $$props, $$invalidate) {
19031
+ let {
19032
+ leftcolumnwidth
19033
+ } = $$props;
19034
+ let {
19035
+ rightcolumnwidth
19036
+ } = $$props;
19037
+ let {
19038
+ maxcontentwidth
19039
+ } = $$props;
19040
+
19041
+ $$self.$$set = $$props => {
19042
+ if ('leftcolumnwidth' in $$props) $$invalidate(0, leftcolumnwidth = $$props.leftcolumnwidth);
19043
+ if ('rightcolumnwidth' in $$props) $$invalidate(1, rightcolumnwidth = $$props.rightcolumnwidth);
19044
+ if ('maxcontentwidth' in $$props) $$invalidate(2, maxcontentwidth = $$props.maxcontentwidth);
19045
+ };
19046
+
19047
+ return [leftcolumnwidth, rightcolumnwidth, maxcontentwidth];
19048
+ }
19049
+
19050
+ class ThreeColumnLayout extends SvelteElement {
19051
+ constructor(options) {
19052
+ super();
19053
+ this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.page{min-height:100vh;display:flex;flex-direction:column;position:relative}.content{flex:1 1 auto;position:relative;display:flex;flex-direction:column;gap:2rem}.header,.footer{flex:0 0 auto}main{flex:1 1 auto;padding:0 1rem}.nav{padding:0 1rem;transition:transform 200ms ease-in-out;background-color:var(--goa-color-greyscale-white)}.nav>*{display:block;padding:0.5rem 0}@media(min-width: 640px){.page{gap:2rem}.content{display:flex;flex-direction:row;justify-content:center;width:min(var(--max-content-width), 100vw);margin:0 auto}.nav{padding:0 2rem;transform:translateX(0)}.nav:not(.sidebar){flex:0 0 var(--nav-column-width)}.nav.sidebar{flex:0 0 var(--sidebar-column-width)}main{padding-right:2rem}}@media(min-width: 1300px){main{padding-right:4.5rem}}</style>`;
19054
+ init(this, {
19055
+ target: this.shadowRoot,
19056
+ props: attribute_to_object(this.attributes),
19057
+ customElement: true
19058
+ }, instance$5, create_fragment$5, safe_not_equal, {
19059
+ leftcolumnwidth: 0,
19060
+ rightcolumnwidth: 1,
19061
+ maxcontentwidth: 2
19062
+ }, null);
19063
+
19064
+ if (options) {
19065
+ if (options.target) {
19066
+ insert(options.target, this, options.anchor);
19067
+ }
19068
+
19069
+ if (options.props) {
19070
+ this.$set(options.props);
19071
+ flush();
19072
+ }
19073
+ }
19074
+ }
19075
+
19076
+ static get observedAttributes() {
19077
+ return ["leftcolumnwidth", "rightcolumnwidth", "maxcontentwidth"];
19078
+ }
19079
+
19080
+ get leftcolumnwidth() {
19081
+ return this.$$.ctx[0];
19082
+ }
19083
+
19084
+ set leftcolumnwidth(leftcolumnwidth) {
19085
+ this.$$set({
19086
+ leftcolumnwidth
19087
+ });
19088
+ flush();
19089
+ }
19090
+
19091
+ get rightcolumnwidth() {
19092
+ return this.$$.ctx[1];
19093
+ }
19094
+
19095
+ set rightcolumnwidth(rightcolumnwidth) {
19096
+ this.$$set({
19097
+ rightcolumnwidth
19098
+ });
19099
+ flush();
19100
+ }
19101
+
19102
+ get maxcontentwidth() {
19103
+ return this.$$.ctx[2];
19104
+ }
19105
+
19106
+ set maxcontentwidth(maxcontentwidth) {
19107
+ this.$$set({
19108
+ maxcontentwidth
19109
+ });
19110
+ flush();
19111
+ }
19112
+
19113
+ }
19114
+
19115
+ customElements.define("goa-three-column-layout", ThreeColumnLayout);
18635
19116
  /* libs/web-components/src/components/form-stepper/FormStepper.svelte generated by Svelte v3.51.0 */
18636
19117
 
18637
19118
  function create_if_block$3(ctx) {
@@ -19119,7 +19600,7 @@
19119
19600
  }
19120
19601
 
19121
19602
  };
19122
- } // (152:38)
19603
+ } // (158:38)
19123
19604
 
19124
19605
 
19125
19606
  function create_if_block_3$2(ctx) {
@@ -19141,7 +19622,7 @@
19141
19622
  }
19142
19623
 
19143
19624
  };
19144
- } // (150:36)
19625
+ } // (156:36)
19145
19626
 
19146
19627
 
19147
19628
  function create_if_block_2$2(ctx) {
@@ -19164,7 +19645,7 @@
19164
19645
  }
19165
19646
 
19166
19647
  };
19167
- } // (148:4) {#if _isCurrent}
19648
+ } // (154:4) {#if _isCurrent}
19168
19649
 
19169
19650
 
19170
19651
  function create_if_block_1$2(ctx) {
@@ -19186,7 +19667,7 @@
19186
19667
  }
19187
19668
 
19188
19669
  };
19189
- } // (160:4) {#if status === "incomplete"}
19670
+ } // (166:4) {#if status === "incomplete"}
19190
19671
 
19191
19672
 
19192
19673
  function create_if_block$2(ctx) {
@@ -19213,7 +19694,7 @@
19213
19694
  function create_fragment$3(ctx) {
19214
19695
  let label;
19215
19696
  let input;
19216
- let input_disabled_value;
19697
+ let input_aria_disabled_value;
19217
19698
  let t0;
19218
19699
  let div0;
19219
19700
  let t1;
@@ -19266,9 +19747,9 @@
19266
19747
  input.checked =
19267
19748
  /*_isCurrent*/
19268
19749
  ctx[7];
19269
- input.disabled = input_disabled_value = !
19750
+ attr(input, "aria-disabled", input_aria_disabled_value = !
19270
19751
  /*_isEnabled*/
19271
- ctx[6];
19752
+ ctx[6]);
19272
19753
  attr(div0, "data-testid", "status");
19273
19754
  attr(div0, "class", "status");
19274
19755
  attr(div1, "class", "text");
@@ -19339,10 +19820,10 @@
19339
19820
 
19340
19821
  if (dirty &
19341
19822
  /*_isEnabled*/
19342
- 64 && input_disabled_value !== (input_disabled_value = !
19823
+ 64 && input_aria_disabled_value !== (input_aria_disabled_value = !
19343
19824
  /*_isEnabled*/
19344
19825
  ctx[6])) {
19345
- input.disabled = input_disabled_value;
19826
+ attr(input, "aria-disabled", input_aria_disabled_value);
19346
19827
  }
19347
19828
 
19348
19829
  if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block0) {
@@ -19537,7 +20018,7 @@
19537
20018
  class FormStep extends SvelteElement {
19538
20019
  constructor(options) {
19539
20020
  super();
19540
- this.shadowRoot.innerHTML = `<style>input[type=checkbox]{position:absolute;left:-9999px}[role="listitem"]{display:flex;box-sizing:border-box;height:100%;text-align:center;flex-direction:column;align-items:center;padding:var(--goa-space-l)}[role="listitem"]:not([aria-disabled="true"]):focus-within,[role="listitem"]:not([aria-disabled="true"]):focus,[role="listitem"]:not([aria-disabled="true"]):active{outline:var(--goa-color-interactive-focus) solid var(--goa-border-width-l)}[role="listitem"]:not([aria-disabled="true"]):hover{background-color:rgba(0,0,0,0.05);cursor:pointer}.status{flex:0 0 auto;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:999px;border:4px solid var(--goa-color-interactive-default);background:var(--goa-color-greyscale-white);height:2.5rem;width:2.5rem}[aria-current="step"] .text{font-weight:var(--goa-font-weight-bold)
20021
+ this.shadowRoot.innerHTML = `<style>input[type=checkbox]{position:absolute;left:-9999px}[role="listitem"]{display:flex;box-sizing:border-box;height:100%;text-align:center;flex-direction:column;align-items:center;padding:var(--goa-space-l)}[role="listitem"]:not([aria-disabled="true"]):not([aria-current="step"]):focus-within,[role="listitem"]:not([aria-disabled="true"]):not([aria-current="step"]):focus,[role="listitem"]:not([aria-disabled="true"]):not([aria-current="step"]):active{outline:var(--goa-color-interactive-focus) solid var(--goa-border-width-l)}[role="listitem"]:not([aria-disabled="true"]):not([aria-current="step"]):hover{background-color:rgba(0,0,0,0.05);cursor:pointer}.status{flex:0 0 auto;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:999px;border:4px solid var(--goa-color-interactive-default);background:var(--goa-color-greyscale-white);height:2.5rem;width:2.5rem}.status>*{fill:var(--fill-color, var(--goa-color-interactive-default));color:var(--fill-color, var(--goa-color-interactive-default))}[aria-current="step"] .text{font-weight:var(--goa-font-weight-bold)
19541
20022
  }[data-status=complete] .status{background:var(--goa-color-interactive-default)}[aria-current="step"][data-status=complete] .status{background:var(--goa-color-greyscale-white)}.step-number{margin-bottom:var(--font-valign-fix);font-weight:var(--goa-font-weight-bold);color:var(--goa-color-text-secondary)}[role="listitem"]:not(
19542
20023
  [data-status=complete],
19543
20024
  [data-status=incomplete],
@@ -21794,6 +22275,8 @@
21794
22275
  var heading = _a.heading,
21795
22276
  _b = _a.type,
21796
22277
  type = _b === void 0 ? "information" : _b,
22278
+ _c = _a.size,
22279
+ size = _c === void 0 ? "large" : _c,
21797
22280
  testId = _a.testId,
21798
22281
  children = _a.children,
21799
22282
  mt = _a.mt,
@@ -21803,6 +22286,7 @@
21803
22286
  return jsxRuntime.jsx("goa-callout", __assign({
21804
22287
  heading: heading,
21805
22288
  type: type,
22289
+ size: size,
21806
22290
  mt: mt,
21807
22291
  mr: mr,
21808
22292
  mb: mb,
@@ -22153,12 +22637,14 @@
22153
22637
  var heading = _a.heading,
22154
22638
  backgroundUrl = _a.backgroundUrl,
22155
22639
  minHeight = _a.minHeight,
22640
+ maxContentWidth = _a.maxContentWidth,
22156
22641
  children = _a.children,
22157
22642
  testId = _a.testId;
22158
22643
  return jsxRuntime.jsx("goa-hero-banner", __assign({
22159
22644
  heading: heading,
22160
22645
  backgroundurl: backgroundUrl,
22161
22646
  minheight: minHeight,
22647
+ maxcontentwidth: maxContentWidth,
22162
22648
  "data-testid": testId
22163
22649
  }, {
22164
22650
  children: children
@@ -22509,12 +22995,14 @@
22509
22995
  var type = _a.type,
22510
22996
  version = _a.version,
22511
22997
  feedbackUrl = _a.feedbackUrl,
22998
+ maxContentWidth = _a.maxContentWidth,
22512
22999
  testId = _a.testId;
22513
23000
  return jsxRuntime.jsx("goa-microsite-header", {
22514
23001
  type: type,
22515
23002
  version: version,
22516
23003
  feedbackurl: feedbackUrl,
22517
- "data-testid": testId
23004
+ "data-testid": testId,
23005
+ maxcontentwidth: maxContentWidth
22518
23006
  }, void 0);
22519
23007
  };
22520
23008
 
@@ -22576,6 +23064,7 @@
22576
23064
  var GoANotification = function GoANotification(_a) {
22577
23065
  var _b = _a.type,
22578
23066
  type = _b === void 0 ? "information" : _b,
23067
+ maxContentWidth = _a.maxContentWidth,
22579
23068
  children = _a.children,
22580
23069
  testId = _a.testId,
22581
23070
  onDismiss = _a.onDismiss;
@@ -22599,7 +23088,8 @@
22599
23088
  return jsxRuntime.jsx("goa-notification", __assign({
22600
23089
  ref: el,
22601
23090
  type: type,
22602
- "data-testid": testId
23091
+ "data-testid": testId,
23092
+ maxcontentwidth: maxContentWidth
22603
23093
  }, {
22604
23094
  children: children
22605
23095
  }), void 0);
@@ -22736,11 +23226,19 @@
22736
23226
  testId = _a.testId,
22737
23227
  maxWidth = _a.maxWidth,
22738
23228
  padded = _a.padded,
22739
- children = _a.children;
23229
+ children = _a.children,
23230
+ mt = _a.mt,
23231
+ mr = _a.mr,
23232
+ mb = _a.mb,
23233
+ ml = _a.ml;
22740
23234
  return jsxRuntime.jsxs("goa-popover", __assign({
22741
23235
  "data-testid": testId,
22742
23236
  maxwidth: maxWidth,
22743
- padded: padded
23237
+ padded: padded,
23238
+ mt: mt,
23239
+ mr: mr,
23240
+ mb: mb,
23241
+ ml: ml
22744
23242
  }, {
22745
23243
  children: [children, target && jsxRuntime.jsx("div", __assign({
22746
23244
  slot: "target"
@@ -22916,6 +23414,32 @@
22916
23414
  }), void 0);
22917
23415
  }
22918
23416
 
23417
+ function GoAThreeColumnLayout(props) {
23418
+ return jsxRuntime.jsxs("goa-three-column-layout", __assign({
23419
+ leftcolumnwidth: props.leftColumnWidth,
23420
+ rightcolumnwidth: props.rightColumnWidth,
23421
+ maxcontentwidth: props.maxContentWidth
23422
+ }, {
23423
+ children: [props.header && jsxRuntime.jsx("div", __assign({
23424
+ slot: "header"
23425
+ }, {
23426
+ children: props.header
23427
+ }), void 0), props.nav && jsxRuntime.jsx("div", __assign({
23428
+ slot: "nav"
23429
+ }, {
23430
+ children: props.nav
23431
+ }), void 0), props.sidebar && jsxRuntime.jsx("div", __assign({
23432
+ slot: "sidebar"
23433
+ }, {
23434
+ children: props.sidebar
23435
+ }), void 0), props.children, props.footer && jsxRuntime.jsx("div", __assign({
23436
+ slot: "footer"
23437
+ }, {
23438
+ children: props.footer
23439
+ }), void 0)]
23440
+ }), void 0);
23441
+ }
23442
+
22919
23443
  exports.GoAAccordion = GoAAccordion;
22920
23444
  exports.GoAAppFooter = GoAAppFooter;
22921
23445
  exports.GoAAppFooterMetaSection = GoAAppFooterMetaSection;
@@ -22978,6 +23502,7 @@
22978
23502
  exports.GoASuccessBadge = GoASuccessBadge;
22979
23503
  exports.GoATable = GoATable;
22980
23504
  exports.GoATextArea = GoATextArea;
23505
+ exports.GoAThreeColumnLayout = GoAThreeColumnLayout;
22981
23506
  exports.GoATwoColumnLayout = GoATwoColumnLayout;
22982
23507
 
22983
23508
  Object.defineProperty(exports, '__esModule', { value: true });