@abgov/react-components 4.7.0 → 4.8.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.
@@ -1469,7 +1469,7 @@
1469
1469
  constructor(options) {
1470
1470
  super();
1471
1471
  this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-4)}.goa-accordion,.goa-accordion *{box-sizing:border-box}summary{min-height:3.5rem;border-width:var(--goa-border-width-s);border-style:solid;border-radius:var(--goa-border-radius-m);background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);color:var(--goa-color-text-default);;;padding:0.875rem 1rem 0 0;cursor:pointer;list-style:none;display:flex;align-items:flex-start;position:relative}summary.container-medium{min-height:4rem}summary::marker,summary::-webkit-details-marker{display:none}summary .title{display:flex;align-items:center;flex:1}.title span{padding-bottom:var(--goa-space-3xs, 0)}summary .heading{font:var(--goa-typography-heading-s);padding-right:1rem}summary .secondary-text{font:var(--goa-typography-body-s);line-height:1.5rem;padding-right:1rem}summary .heading-content{flex:1
1472
- }.content{border-bottom:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-left:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-right:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-bottom-left-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m);padding:1.5rem;padding-left:3.5rem;padding-right:2rem}summary goa-icon{padding:0.125rem 1rem}summary.container-medium goa-icon{padding:0.375rem 1rem}details[open] goa-icon{transform:rotate(90deg)}details[open] summary{border-bottom-left-radius:var(--goa-border-radius-none);border-bottom-right-radius:var(--goa-border-radius-none)}summary:hover{background-color:var(--goa-color-greyscale-200)}summary:focus,summary:active{background-color:var(--goa-color-greyscale-100);outline:none}summary:active::before,summary:focus::before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:var(--goa-border-width-l) solid var(--goa-color-interactive-focus);border-radius:4px}summary .heading.heading-medium{line-height:2rem;font:var(--goa-typography-heading-m)}@media(max-width: 640px){summary{align-items:flex-start}summary .title{flex-direction:column;align-items:flex-start}}</style>`;
1472
+ }.content{border-bottom:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-left:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-right:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-bottom-left-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m);padding:1.5rem;padding-left:3.5rem;padding-right:2rem}.content ::slotted(p:last-child){margin-bottom:0 !important}summary goa-icon{padding:0.125rem 1rem}summary.container-medium goa-icon{padding:0.375rem 1rem}details[open] goa-icon{transform:rotate(90deg)}details[open] summary{border-bottom-left-radius:var(--goa-border-radius-none);border-bottom-right-radius:var(--goa-border-radius-none)}summary:hover{background-color:var(--goa-color-greyscale-200)}summary:focus,summary:active{background-color:var(--goa-color-greyscale-100);outline:none}summary:active::before,summary:focus::before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:var(--goa-border-width-l) solid var(--goa-color-interactive-focus);border-radius:4px}summary .heading.heading-medium{line-height:2rem;font:var(--goa-typography-heading-m)}@media(max-width: 640px){summary{align-items:flex-start}summary .title{flex-direction:column;align-items:flex-start}}</style>`;
1473
1473
  init(this, {
1474
1474
  target: this.shadowRoot,
1475
1475
  props: attribute_to_object(this.attributes),
@@ -2217,7 +2217,7 @@
2217
2217
  class Badge extends SvelteElement {
2218
2218
  constructor(options) {
2219
2219
  super();
2220
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.goa-badge{display:inline-flex;align-items:center;border-radius:0.25rem;padding:3px 0.5rem;gap:0.25rem;font-weight:var(--goa-font-weight-regular)}.icon-only{padding:0.25rem}.goa-badge-content{text-transform:capitalize;font-size:var(--goa-font-size-2);line-height:var(--goa-line-height-1);padding-bottom:var(--font-valign-fix, 0)}.goa-badge.badge-information{background-color:var(--goa-color-greyscale-100);color:var(--goa-color-info-default)}.goa-badge.badge-success{background-color:var(--goa-color-success-default);color:var(--goa-color-text-light)}.goa-badge.badge-important{background-color:var(--goa-color-warning-default);color:var(--goa-color-text-default)}.goa-badge.badge-emergency{background-color:var(--goa-color-emergency-default);color:var(--goa-color-text-light)}.goa-badge.badge-dark{background-color:var(--goa-color-greyscale-black);color:var(--goa-color-text-light)}.goa-badge.badge-midtone{background-color:var(--goa-color-greyscale-700);color:var(--goa-color-text-light)}.goa-badge.badge-light{background-color:var(--goa-color-greyscale-white);color:var(--goa-color-text-default)}</style>`;
2220
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.goa-badge{display:inline-flex;align-items:center;border-radius:0.25rem;padding:3px 0.5rem;gap:0.25rem;font-weight:var(--goa-font-weight-regular)}.icon-only{padding:0.25rem}.goa-badge-content{font-size:var(--goa-font-size-2);line-height:var(--goa-line-height-1);padding-bottom:var(--font-valign-fix, 0)}.goa-badge.badge-information{background-color:var(--goa-color-greyscale-100);color:var(--goa-color-info-default)}.goa-badge.badge-success{background-color:var(--goa-color-success-default);color:var(--goa-color-text-light)}.goa-badge.badge-important{background-color:var(--goa-color-warning-default);color:var(--goa-color-text-default)}.goa-badge.badge-emergency{background-color:var(--goa-color-emergency-default);color:var(--goa-color-text-light)}.goa-badge.badge-dark{background-color:var(--goa-color-greyscale-black);color:var(--goa-color-text-light)}.goa-badge.badge-midtone{background-color:var(--goa-color-greyscale-700);color:var(--goa-color-text-light)}.goa-badge.badge-light{background-color:var(--goa-color-greyscale-white);color:var(--goa-color-text-default)}</style>`;
2221
2221
  init(this, {
2222
2222
  target: this.shadowRoot,
2223
2223
  props: attribute_to_object(this.attributes),
@@ -6217,7 +6217,7 @@
6217
6217
  class Container extends SvelteElement {
6218
6218
  constructor(options) {
6219
6219
  super();
6220
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-4)}.goa-container{box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--goa-font-size-4);border-width:1px;border-style:solid;border-top-left-radius:var(--goa-border-radius-m);border-top-right-radius:var(--goa-border-radius-m)}.content{border-bottom:1px solid var(--goa-color-greyscale-200);border-left:1px solid var(--goa-color-greyscale-200);border-right:1px solid var(--goa-color-greyscale-200);border-bottom-left-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m)}.goa-container--non-interactive.accent--filled .content{border-color:var(--goa-color-greyscale-200);background-color:var(--goa-color-greyscale-100)}.goa-container--important.accent--filled .content{border-color:var(--goa-color-warning-default);background-color:var(--goa-color-warning-background)}.goa-container--error.accent--filled .content{border-color:var(--goa-color-emergency-default);background-color:var(--goa-color-emergency-background)}.goa-container--success.accent--filled .content{border-color:var(--goa-color-success-default);background-color:var(--goa-color-success-background)}.goa-container--info.accent--filled .content{border-color:var(--goa-color-info-default);background-color:var(--goa-color-info-background)}.title,.actions{padding:0.5rem 0}.padding--relaxed header{padding:0 1.5rem}.padding--relaxed .content{padding:1.5rem}.padding--compact header,.padding--compact .content{padding:0 1rem}.padding--compact header{padding:0 1rem}.padding--compact .content{padding:1rem}@media screen and (max-width: 480px){.padding--relaxed header{padding:0 1rem}.padding--relaxed .content{padding:1rem}}.goa-container--non-interactive header{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);color:var(--goa-color-greyscale-black)}.goa-container--interactive header{background-color:var(--goa-color-brand-default);border-color:var(--goa-color-brand-default);color:var(--goa-color-greyscale-white)}.goa-container--info header{background-color:var(--goa-color-info-default);border-color:var(--goa-color-info-default);color:var(--goa-color-greyscale-white)}.goa-container--error header{background-color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default);color:var(--goa-color-greyscale-white)}.goa-container--success header{background-color:var(--goa-color-success-default);border-color:var(--goa-color-success-default);color:var(--goa-color-greyscale-white)}.goa-container--important header{background-color:var(--goa-color-warning-default);border-color:var(--goa-color-warning-default);color:var(--goa-color-greyscale-white)}.heading--thick{padding:0.5rem 1.5rem;max-height:3rem;min-height:1rem}.heading--thick .title{line-height:2rem}.heading--thin{height:0.5rem}.heading--filled{display:none}.heading--filled~.content{border-top:1px solid var(--goa-color-greyscale-200);border-top-left-radius:var(--goa-border-radius-m);border-top-right-radius:var(--goa-border-radius-m)}.heading--thin .title,.heading--thin .actions{display:none}.actions{display:flex;align-items:center}</style>`;
6220
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-4)}.goa-container{box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--goa-font-size-4);border-width:1px;border-style:solid;border-top-left-radius:var(--goa-border-radius-m);border-top-right-radius:var(--goa-border-radius-m)}.content{border-bottom:1px solid var(--goa-color-greyscale-200);border-left:1px solid var(--goa-color-greyscale-200);border-right:1px solid var(--goa-color-greyscale-200);border-bottom-left-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m)}.content ::slotted(p:last-child){margin-bottom:0 !important}.goa-container--non-interactive.accent--filled .content{border-color:var(--goa-color-greyscale-200);background-color:var(--goa-color-greyscale-100)}.goa-container--important.accent--filled .content{border-color:var(--goa-color-warning-default);background-color:var(--goa-color-warning-background)}.goa-container--error.accent--filled .content{border-color:var(--goa-color-emergency-default);background-color:var(--goa-color-emergency-background)}.goa-container--success.accent--filled .content{border-color:var(--goa-color-success-default);background-color:var(--goa-color-success-background)}.goa-container--info.accent--filled .content{border-color:var(--goa-color-info-default);background-color:var(--goa-color-info-background)}.title,.actions{padding:0.5rem 0}.padding--relaxed header{padding:0 1.5rem}.padding--relaxed .content{padding:1.5rem}.padding--compact header,.padding--compact .content{padding:0 1rem}.padding--compact header{padding:0 1rem}.padding--compact .content{padding:1rem}@media screen and (max-width: 480px){.padding--relaxed header{padding:0 1rem}.padding--relaxed .content{padding:1rem}}.goa-container--non-interactive header{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);color:var(--goa-color-greyscale-black)}.goa-container--interactive header{background-color:var(--goa-color-brand-default);border-color:var(--goa-color-brand-default);color:var(--goa-color-greyscale-white)}.goa-container--info header{background-color:var(--goa-color-info-default);border-color:var(--goa-color-info-default);color:var(--goa-color-greyscale-white)}.goa-container--error header{background-color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default);color:var(--goa-color-greyscale-white)}.goa-container--success header{background-color:var(--goa-color-success-default);border-color:var(--goa-color-success-default);color:var(--goa-color-greyscale-white)}.goa-container--important header{background-color:var(--goa-color-warning-default);border-color:var(--goa-color-warning-default);color:var(--goa-color-greyscale-white)}.heading--thick{padding:0.5rem 1.5rem;max-height:3rem;min-height:1rem}.heading--thick .title{line-height:2rem}.heading--thin{height:0.5rem}.heading--filled{display:none}.heading--filled~.content{border-top:1px solid var(--goa-color-greyscale-200);border-top-left-radius:var(--goa-border-radius-m);border-top-right-radius:var(--goa-border-radius-m)}.heading--thin .title,.heading--thin .actions{display:none}.actions{display:flex;align-items:center}</style>`;
6221
6221
  init(this, {
6222
6222
  target: this.shadowRoot,
6223
6223
  props: attribute_to_object(this.attributes),
@@ -6497,7 +6497,7 @@
6497
6497
  class Details extends SvelteElement {
6498
6498
  constructor(options) {
6499
6499
  super();
6500
- this.shadowRoot.innerHTML = `<style>:host{font-family:var(--goa-font-family-sans)}details{max-width:75ch;position:relative}details ::slotted(*){font:var(--goa-typography-body-m)}summary{padding:0.5rem;margin-bottom:0.5rem;cursor:pointer;list-style:none;display:flex;align-items:flex-start}goa-icon{position:absolute}details[open] goa-icon{transform:translateX(-1px) rotate(90deg);top:0.75rem}details summary::-webkit-details-marker{display:none}summary{border-radius:var(--goa-border-radius-m)}summary:focus,summary:active{outline:3px solid var(--goa-color-interactive-focus);border-radius:var(--goa-border-radius-m);color:var(--goa-color-interactive-hover);background-color:var(--goa-color-greyscale-100)}summary:hover{background-color:var(--goa-color-greyscale-100)}summary span{margin-left:2rem;text-decoration:underline;color:var(--goa-color-interactive-default);padding-bottom:var(--font-valign-fix);line-height:var(--goa-line-height-3)}summary:hover span{color:var(--goa-color-interactive-hover)}.content{border-left:4px solid var(--goa-color-greyscale-200);padding:1rem;margin-left:1.1rem;margin-bottom:var(--goa-space-s)}</style>`;
6500
+ this.shadowRoot.innerHTML = `<style>:host{font-family:var(--goa-font-family-sans)}details{max-width:75ch;position:relative}details ::slotted(*){font:var(--goa-typography-body-m)}summary{padding:0.5rem;margin-bottom:0.5rem;cursor:pointer;list-style:none;display:flex;align-items:flex-start}goa-icon{position:absolute}details[open] goa-icon{transform:translateX(-1px) rotate(90deg);top:0.75rem}details summary::-webkit-details-marker{display:none}summary{border-radius:var(--goa-border-radius-m)}summary:focus,summary:active{outline:3px solid var(--goa-color-interactive-focus);border-radius:var(--goa-border-radius-m);color:var(--goa-color-interactive-hover);background-color:var(--goa-color-greyscale-100)}summary:hover{background-color:var(--goa-color-greyscale-100)}summary span{margin-left:2rem;text-decoration:underline;color:var(--goa-color-interactive-default);padding-bottom:var(--font-valign-fix);line-height:var(--goa-line-height-3)}summary:hover span{color:var(--goa-color-interactive-hover)}.content{border-left:4px solid var(--goa-color-greyscale-200);padding:1rem;margin-left:1.1rem;margin-bottom:var(--goa-space-s)}.content ::slotted(p:last-child){margin-bottom:0 !important}</style>`;
6501
6501
  init(this, {
6502
6502
  target: this.shadowRoot,
6503
6503
  props: attribute_to_object(this.attributes),
@@ -6767,16 +6767,16 @@
6767
6767
 
6768
6768
  function get_each_context_1(ctx, list, i) {
6769
6769
  const child_ctx = ctx.slice();
6770
- child_ctx[49] = list[i];
6771
- child_ctx[53] = i;
6770
+ child_ctx[50] = list[i];
6771
+ child_ctx[54] = i;
6772
6772
  return child_ctx;
6773
6773
  }
6774
6774
 
6775
- function get_each_context$4(ctx, list, i) {
6775
+ function get_each_context$5(ctx, list, i) {
6776
6776
  const child_ctx = ctx.slice();
6777
- child_ctx[49] = list[i];
6777
+ child_ctx[50] = list[i];
6778
6778
  return child_ctx;
6779
- } // (256:2) {:else}
6779
+ } // (270:2) {:else}
6780
6780
 
6781
6781
 
6782
6782
  function create_else_block$5(ctx) {
@@ -6795,14 +6795,14 @@
6795
6795
  let dispose;
6796
6796
  let if_block =
6797
6797
  /*_isMenuVisible*/
6798
- ctx[15] && create_if_block_1$7(ctx);
6798
+ ctx[17] && create_if_block_1$7(ctx);
6799
6799
  let each_value_1 =
6800
6800
  /*_options*/
6801
- ctx[13];
6801
+ ctx[12];
6802
6802
 
6803
6803
  const get_key = ctx =>
6804
6804
  /*index*/
6805
- ctx[53];
6805
+ ctx[54];
6806
6806
 
6807
6807
  for (let i = 0; i < each_value_1.length; i += 1) {
6808
6808
  let child_ctx = get_each_context_1(ctx, each_value_1, i);
@@ -6839,7 +6839,7 @@
6839
6839
  set_custom_element_data(goa_input, "aria-controls", "menu");
6840
6840
  set_custom_element_data(goa_input, "aria-expanded",
6841
6841
  /*_isMenuVisible*/
6842
- ctx[15]);
6842
+ ctx[17]);
6843
6843
  set_custom_element_data(goa_input, "arialabel", goa_input_arialabel_value =
6844
6844
  /*arialabel*/
6845
6845
  ctx[1] ||
@@ -6854,7 +6854,7 @@
6854
6854
  set_custom_element_data(goa_input, "type", "text");
6855
6855
  set_custom_element_data(goa_input, "value",
6856
6856
  /*_selectedLabel*/
6857
- ctx[14]);
6857
+ ctx[16]);
6858
6858
  set_custom_element_data(goa_input, "width", "100%");
6859
6859
  set_custom_element_data(goa_input, "name",
6860
6860
  /*name*/
@@ -6863,16 +6863,22 @@
6863
6863
  attr(ul, "role", "listbox");
6864
6864
  attr(ul, "aria-activedescendant",
6865
6865
  /*_selectedLabel*/
6866
- ctx[14]);
6866
+ ctx[16]);
6867
6867
  attr(ul, "data-testid", "dropdown-menu");
6868
6868
  attr(ul, "tabindex", "0");
6869
6869
  attr(ul, "class", "dropdown-list");
6870
- attr(ul, "style", ul_style_value = `overflow-y: auto; max-height: ${
6870
+ attr(ul, "style", ul_style_value = `
6871
+ overflow-y: auto;
6872
+ max-height: ${
6871
6873
  /*maxheight*/
6872
- ctx[3]}`);
6874
+ ctx[3]};
6875
+ --bottom: ${
6876
+ /*_dropdownMenuPos*/
6877
+ ctx[20]};
6878
+ `);
6873
6879
  toggle_class(ul, "dropdown-active",
6874
6880
  /*_isMenuVisible*/
6875
- ctx[15]);
6881
+ ctx[17]);
6876
6882
  },
6877
6883
 
6878
6884
  m(target, anchor) {
@@ -6890,12 +6896,12 @@
6890
6896
  /*ul_binding*/
6891
6897
 
6892
6898
 
6893
- ctx[33](ul);
6899
+ ctx[34](ul);
6894
6900
 
6895
6901
  if (!mounted) {
6896
6902
  dispose = listen(goa_input, "click",
6897
6903
  /*showMenu*/
6898
- ctx[24]);
6904
+ ctx[25]);
6899
6905
  mounted = true;
6900
6906
  }
6901
6907
  },
@@ -6903,7 +6909,7 @@
6903
6909
  p(ctx, dirty) {
6904
6910
  if (
6905
6911
  /*_isMenuVisible*/
6906
- ctx[15]) {
6912
+ ctx[17]) {
6907
6913
  if (if_block) {
6908
6914
  if_block.p(ctx, dirty);
6909
6915
  } else {
@@ -6950,10 +6956,10 @@
6950
6956
 
6951
6957
  if (dirty[0] &
6952
6958
  /*_isMenuVisible*/
6953
- 32768) {
6959
+ 131072) {
6954
6960
  set_custom_element_data(goa_input, "aria-expanded",
6955
6961
  /*_isMenuVisible*/
6956
- ctx[15]);
6962
+ ctx[17]);
6957
6963
  }
6958
6964
 
6959
6965
  if (dirty[0] &
@@ -6976,10 +6982,10 @@
6976
6982
 
6977
6983
  if (dirty[0] &
6978
6984
  /*_selectedLabel*/
6979
- 16384) {
6985
+ 65536) {
6980
6986
  set_custom_element_data(goa_input, "value",
6981
6987
  /*_selectedLabel*/
6982
- ctx[14]);
6988
+ ctx[16]);
6983
6989
  }
6984
6990
 
6985
6991
  if (dirty[0] &
@@ -6992,35 +6998,41 @@
6992
6998
 
6993
6999
  if (dirty[0] &
6994
7000
  /*_options, _values, _highlightedIndex, onSelect*/
6995
- 67186688) {
7001
+ 134516736) {
6996
7002
  each_value_1 =
6997
7003
  /*_options*/
6998
- ctx[13];
7004
+ ctx[12];
6999
7005
  each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value_1, each_1_lookup, ul, destroy_block, create_each_block_1, null, get_each_context_1);
7000
7006
  }
7001
7007
 
7002
7008
  if (dirty[0] &
7003
7009
  /*_selectedLabel*/
7004
- 16384) {
7010
+ 65536) {
7005
7011
  attr(ul, "aria-activedescendant",
7006
7012
  /*_selectedLabel*/
7007
- ctx[14]);
7013
+ ctx[16]);
7008
7014
  }
7009
7015
 
7010
7016
  if (dirty[0] &
7011
- /*maxheight*/
7012
- 8 && ul_style_value !== (ul_style_value = `overflow-y: auto; max-height: ${
7017
+ /*maxheight, _dropdownMenuPos*/
7018
+ 1048584 && ul_style_value !== (ul_style_value = `
7019
+ overflow-y: auto;
7020
+ max-height: ${
7013
7021
  /*maxheight*/
7014
- ctx[3]}`)) {
7022
+ ctx[3]};
7023
+ --bottom: ${
7024
+ /*_dropdownMenuPos*/
7025
+ ctx[20]};
7026
+ `)) {
7015
7027
  attr(ul, "style", ul_style_value);
7016
7028
  }
7017
7029
 
7018
7030
  if (dirty[0] &
7019
7031
  /*_isMenuVisible*/
7020
- 32768) {
7032
+ 131072) {
7021
7033
  toggle_class(ul, "dropdown-active",
7022
7034
  /*_isMenuVisible*/
7023
- ctx[15]);
7035
+ ctx[17]);
7024
7036
  }
7025
7037
  },
7026
7038
 
@@ -7039,13 +7051,13 @@
7039
7051
  /*ul_binding*/
7040
7052
 
7041
7053
 
7042
- ctx[33](null);
7054
+ ctx[34](null);
7043
7055
  mounted = false;
7044
7056
  dispose();
7045
7057
  }
7046
7058
 
7047
7059
  };
7048
- } // (237:2) {#if _native}
7060
+ } // (251:2) {#if _native}
7049
7061
 
7050
7062
 
7051
7063
  function create_if_block$f(ctx) {
@@ -7056,11 +7068,11 @@
7056
7068
  let dispose;
7057
7069
  let each_value =
7058
7070
  /*_options*/
7059
- ctx[13];
7071
+ ctx[12];
7060
7072
  let each_blocks = [];
7061
7073
 
7062
7074
  for (let i = 0; i < each_value.length; i += 1) {
7063
- each_blocks[i] = create_each_block$4(get_each_context$4(ctx, each_value, i));
7075
+ each_blocks[i] = create_each_block$5(get_each_context$5(ctx, each_value, i));
7064
7076
  }
7065
7077
 
7066
7078
  return {
@@ -7074,7 +7086,7 @@
7074
7086
 
7075
7087
  select.disabled =
7076
7088
  /*_disabled*/
7077
- ctx[21];
7089
+ ctx[23];
7078
7090
  attr(select, "aria-label", select_aria_label_value =
7079
7091
  /*arialabel*/
7080
7092
  ctx[1] ||
@@ -7082,7 +7094,7 @@
7082
7094
  ctx[0]);
7083
7095
  toggle_class(select, "error",
7084
7096
  /*_error*/
7085
- ctx[23]);
7097
+ ctx[24]);
7086
7098
  },
7087
7099
 
7088
7100
  m(target, anchor) {
@@ -7095,12 +7107,12 @@
7095
7107
  /*select_binding*/
7096
7108
 
7097
7109
 
7098
- ctx[31](select);
7110
+ ctx[32](select);
7099
7111
 
7100
7112
  if (!mounted) {
7101
7113
  dispose = listen(select, "change",
7102
7114
  /*onNativeSelect*/
7103
- ctx[27]);
7115
+ ctx[28]);
7104
7116
  mounted = true;
7105
7117
  }
7106
7118
  },
@@ -7108,19 +7120,19 @@
7108
7120
  p(ctx, dirty) {
7109
7121
  if (dirty[0] &
7110
7122
  /*_options*/
7111
- 8192) {
7123
+ 4096) {
7112
7124
  each_value =
7113
7125
  /*_options*/
7114
- ctx[13];
7126
+ ctx[12];
7115
7127
  let i;
7116
7128
 
7117
7129
  for (i = 0; i < each_value.length; i += 1) {
7118
- const child_ctx = get_each_context$4(ctx, each_value, i);
7130
+ const child_ctx = get_each_context$5(ctx, each_value, i);
7119
7131
 
7120
7132
  if (each_blocks[i]) {
7121
7133
  each_blocks[i].p(child_ctx, dirty);
7122
7134
  } else {
7123
- each_blocks[i] = create_each_block$4(child_ctx);
7135
+ each_blocks[i] = create_each_block$5(child_ctx);
7124
7136
  each_blocks[i].c();
7125
7137
  each_blocks[i].m(select, null);
7126
7138
  }
@@ -7135,10 +7147,10 @@
7135
7147
 
7136
7148
  if (dirty[0] &
7137
7149
  /*_disabled*/
7138
- 2097152) {
7150
+ 8388608) {
7139
7151
  select.disabled =
7140
7152
  /*_disabled*/
7141
- ctx[21];
7153
+ ctx[23];
7142
7154
  }
7143
7155
 
7144
7156
  if (dirty[0] &
@@ -7153,10 +7165,10 @@
7153
7165
 
7154
7166
  if (dirty[0] &
7155
7167
  /*_error*/
7156
- 8388608) {
7168
+ 16777216) {
7157
7169
  toggle_class(select, "error",
7158
7170
  /*_error*/
7159
- ctx[23]);
7171
+ ctx[24]);
7160
7172
  }
7161
7173
  },
7162
7174
 
@@ -7165,18 +7177,19 @@
7165
7177
  destroy_each(each_blocks, detaching);
7166
7178
  /*select_binding*/
7167
7179
 
7168
- ctx[31](null);
7180
+ ctx[32](null);
7169
7181
  mounted = false;
7170
7182
  dispose();
7171
7183
  }
7172
7184
 
7173
7185
  };
7174
- } // (257:4) {#if _isMenuVisible}
7186
+ } // (271:4) {#if _isMenuVisible}
7175
7187
 
7176
7188
 
7177
7189
  function create_if_block_1$7(ctx) {
7178
7190
  let div;
7179
7191
  let div_data_testid_value;
7192
+ let noscroll_action;
7180
7193
  let mounted;
7181
7194
  let dispose;
7182
7195
  return {
@@ -7192,9 +7205,13 @@
7192
7205
  insert(target, div, anchor);
7193
7206
 
7194
7207
  if (!mounted) {
7195
- dispose = listen(div, "click",
7208
+ dispose = [listen(div, "click",
7196
7209
  /*closeMenu*/
7197
- ctx[25]);
7210
+ ctx[26]), action_destroyer(noscroll_action = noscroll.call(null, div, {
7211
+ enable:
7212
+ /*_isMenuVisible*/
7213
+ ctx[17]
7214
+ }))];
7198
7215
  mounted = true;
7199
7216
  }
7200
7217
  },
@@ -7207,25 +7224,33 @@
7207
7224
  ctx[0]}-dropdown-background`)) {
7208
7225
  attr(div, "data-testid", div_data_testid_value);
7209
7226
  }
7227
+
7228
+ if (noscroll_action && is_function(noscroll_action.update) && dirty[0] &
7229
+ /*_isMenuVisible*/
7230
+ 131072) noscroll_action.update.call(null, {
7231
+ enable:
7232
+ /*_isMenuVisible*/
7233
+ ctx[17]
7234
+ });
7210
7235
  },
7211
7236
 
7212
7237
  d(detaching) {
7213
7238
  if (detaching) detach(div);
7214
7239
  mounted = false;
7215
- dispose();
7240
+ run_all(dispose);
7216
7241
  }
7217
7242
 
7218
7243
  };
7219
- } // (300:6) {#each _options as option, index (index)}
7244
+ } // (319:6) {#each _options as option, index (index)}
7220
7245
 
7221
7246
 
7222
7247
  function create_each_block_1(key_1, ctx) {
7223
7248
  let li;
7224
7249
  let t0_value = (
7225
7250
  /*option*/
7226
- ctx[49].label ||
7251
+ ctx[50].label ||
7227
7252
  /*option*/
7228
- ctx[49].value) + "";
7253
+ ctx[50].value) + "";
7229
7254
  let t0;
7230
7255
  let t1;
7231
7256
  let li_id_value;
@@ -7241,9 +7266,9 @@
7241
7266
  function click_handler() {
7242
7267
  return (
7243
7268
  /*click_handler*/
7244
- ctx[32](
7269
+ ctx[33](
7245
7270
  /*option*/
7246
- ctx[49])
7271
+ ctx[50])
7247
7272
  );
7248
7273
  }
7249
7274
 
@@ -7257,40 +7282,40 @@
7257
7282
  t1 = space();
7258
7283
  attr(li, "id", li_id_value =
7259
7284
  /*option*/
7260
- ctx[49].label);
7285
+ ctx[50].label);
7261
7286
  attr(li, "role", "option");
7262
7287
  attr(li, "aria-label", li_aria_label_value =
7263
7288
  /*option*/
7264
- ctx[49].label ||
7289
+ ctx[50].label ||
7265
7290
  /*option*/
7266
- ctx[49].value);
7291
+ ctx[50].value);
7267
7292
  attr(li, "aria-selected", li_aria_selected_value =
7268
7293
  /*_values*/
7269
- ctx[12].includes(
7294
+ ctx[15].includes(
7270
7295
  /*option*/
7271
- ctx[49].value) ? "true" : "false");
7296
+ ctx[50].value) ? "true" : "false");
7272
7297
  attr(li, "class", "dropdown-item");
7273
7298
  attr(li, "data-testid", li_data_testid_value = `dropdown-item-${
7274
7299
  /*option*/
7275
- ctx[49].value}`);
7300
+ ctx[50].value}`);
7276
7301
  attr(li, "data-index", li_data_index_value =
7277
7302
  /*index*/
7278
- ctx[53]);
7303
+ ctx[54]);
7279
7304
  attr(li, "data-value", li_data_value_value =
7280
7305
  /*option*/
7281
- ctx[49].value);
7306
+ ctx[50].value);
7282
7307
  attr(li, "style", li_style_value = `display: ${"block"}`);
7283
7308
  toggle_class(li, "dropdown-item--disabled", false);
7284
7309
  toggle_class(li, "dropdown-item--tabbed",
7285
7310
  /*index*/
7286
- ctx[53] ===
7311
+ ctx[54] ===
7287
7312
  /*_highlightedIndex*/
7288
- ctx[16]);
7313
+ ctx[18]);
7289
7314
  toggle_class(li, "dropdown-item--selected",
7290
7315
  /*_values*/
7291
- ctx[12].includes(
7316
+ ctx[15].includes(
7292
7317
  /*option*/
7293
- ctx[49].value));
7318
+ ctx[50].value));
7294
7319
  this.first = li;
7295
7320
  },
7296
7321
 
@@ -7309,82 +7334,82 @@
7309
7334
  ctx = new_ctx;
7310
7335
  if (dirty[0] &
7311
7336
  /*_options*/
7312
- 8192 && t0_value !== (t0_value = (
7337
+ 4096 && t0_value !== (t0_value = (
7313
7338
  /*option*/
7314
- ctx[49].label ||
7339
+ ctx[50].label ||
7315
7340
  /*option*/
7316
- ctx[49].value) + "")) set_data(t0, t0_value);
7341
+ ctx[50].value) + "")) set_data(t0, t0_value);
7317
7342
 
7318
7343
  if (dirty[0] &
7319
7344
  /*_options*/
7320
- 8192 && li_id_value !== (li_id_value =
7345
+ 4096 && li_id_value !== (li_id_value =
7321
7346
  /*option*/
7322
- ctx[49].label)) {
7347
+ ctx[50].label)) {
7323
7348
  attr(li, "id", li_id_value);
7324
7349
  }
7325
7350
 
7326
7351
  if (dirty[0] &
7327
7352
  /*_options*/
7328
- 8192 && li_aria_label_value !== (li_aria_label_value =
7353
+ 4096 && li_aria_label_value !== (li_aria_label_value =
7329
7354
  /*option*/
7330
- ctx[49].label ||
7355
+ ctx[50].label ||
7331
7356
  /*option*/
7332
- ctx[49].value)) {
7357
+ ctx[50].value)) {
7333
7358
  attr(li, "aria-label", li_aria_label_value);
7334
7359
  }
7335
7360
 
7336
7361
  if (dirty[0] &
7337
7362
  /*_values, _options*/
7338
- 12288 && li_aria_selected_value !== (li_aria_selected_value =
7363
+ 36864 && li_aria_selected_value !== (li_aria_selected_value =
7339
7364
  /*_values*/
7340
- ctx[12].includes(
7365
+ ctx[15].includes(
7341
7366
  /*option*/
7342
- ctx[49].value) ? "true" : "false")) {
7367
+ ctx[50].value) ? "true" : "false")) {
7343
7368
  attr(li, "aria-selected", li_aria_selected_value);
7344
7369
  }
7345
7370
 
7346
7371
  if (dirty[0] &
7347
7372
  /*_options*/
7348
- 8192 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${
7373
+ 4096 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${
7349
7374
  /*option*/
7350
- ctx[49].value}`)) {
7375
+ ctx[50].value}`)) {
7351
7376
  attr(li, "data-testid", li_data_testid_value);
7352
7377
  }
7353
7378
 
7354
7379
  if (dirty[0] &
7355
7380
  /*_options*/
7356
- 8192 && li_data_index_value !== (li_data_index_value =
7381
+ 4096 && li_data_index_value !== (li_data_index_value =
7357
7382
  /*index*/
7358
- ctx[53])) {
7383
+ ctx[54])) {
7359
7384
  attr(li, "data-index", li_data_index_value);
7360
7385
  }
7361
7386
 
7362
7387
  if (dirty[0] &
7363
7388
  /*_options*/
7364
- 8192 && li_data_value_value !== (li_data_value_value =
7389
+ 4096 && li_data_value_value !== (li_data_value_value =
7365
7390
  /*option*/
7366
- ctx[49].value)) {
7391
+ ctx[50].value)) {
7367
7392
  attr(li, "data-value", li_data_value_value);
7368
7393
  }
7369
7394
 
7370
7395
  if (dirty[0] &
7371
7396
  /*_options, _highlightedIndex*/
7372
- 73728) {
7397
+ 266240) {
7373
7398
  toggle_class(li, "dropdown-item--tabbed",
7374
7399
  /*index*/
7375
- ctx[53] ===
7400
+ ctx[54] ===
7376
7401
  /*_highlightedIndex*/
7377
- ctx[16]);
7402
+ ctx[18]);
7378
7403
  }
7379
7404
 
7380
7405
  if (dirty[0] &
7381
7406
  /*_values, _options*/
7382
- 12288) {
7407
+ 36864) {
7383
7408
  toggle_class(li, "dropdown-item--selected",
7384
7409
  /*_values*/
7385
- ctx[12].includes(
7410
+ ctx[15].includes(
7386
7411
  /*option*/
7387
- ctx[49].value));
7412
+ ctx[50].value));
7388
7413
  }
7389
7414
  },
7390
7415
 
@@ -7395,14 +7420,14 @@
7395
7420
  }
7396
7421
 
7397
7422
  };
7398
- } // (246:6) {#each _options as option}
7423
+ } // (260:6) {#each _options as option}
7399
7424
 
7400
7425
 
7401
- function create_each_block$4(ctx) {
7426
+ function create_each_block$5(ctx) {
7402
7427
  let option;
7403
7428
  let t0_value =
7404
7429
  /*option*/
7405
- ctx[49].label + "";
7430
+ ctx[50].label + "";
7406
7431
  let t0;
7407
7432
  let t1;
7408
7433
  let option_selected_value;
@@ -7415,14 +7440,14 @@
7415
7440
  t1 = space();
7416
7441
  option.selected = option_selected_value =
7417
7442
  /*option*/
7418
- ctx[49].selected;
7443
+ ctx[50].selected;
7419
7444
  option.__value = option_value_value =
7420
7445
  /*option*/
7421
- ctx[49].value;
7446
+ ctx[50].value;
7422
7447
  option.value = option.__value;
7423
7448
  attr(option, "aria-label", option_aria_label_value =
7424
7449
  /*option*/
7425
- ctx[49].label);
7450
+ ctx[50].label);
7426
7451
  },
7427
7452
 
7428
7453
  m(target, anchor) {
@@ -7434,32 +7459,32 @@
7434
7459
  p(ctx, dirty) {
7435
7460
  if (dirty[0] &
7436
7461
  /*_options*/
7437
- 8192 && t0_value !== (t0_value =
7462
+ 4096 && t0_value !== (t0_value =
7438
7463
  /*option*/
7439
- ctx[49].label + "")) set_data(t0, t0_value);
7464
+ ctx[50].label + "")) set_data(t0, t0_value);
7440
7465
 
7441
7466
  if (dirty[0] &
7442
7467
  /*_options*/
7443
- 8192 && option_selected_value !== (option_selected_value =
7468
+ 4096 && option_selected_value !== (option_selected_value =
7444
7469
  /*option*/
7445
- ctx[49].selected)) {
7470
+ ctx[50].selected)) {
7446
7471
  option.selected = option_selected_value;
7447
7472
  }
7448
7473
 
7449
7474
  if (dirty[0] &
7450
7475
  /*_options*/
7451
- 8192 && option_value_value !== (option_value_value =
7476
+ 4096 && option_value_value !== (option_value_value =
7452
7477
  /*option*/
7453
- ctx[49].value)) {
7478
+ ctx[50].value)) {
7454
7479
  option.__value = option_value_value;
7455
7480
  option.value = option.__value;
7456
7481
  }
7457
7482
 
7458
7483
  if (dirty[0] &
7459
7484
  /*_options*/
7460
- 8192 && option_aria_label_value !== (option_aria_label_value =
7485
+ 4096 && option_aria_label_value !== (option_aria_label_value =
7461
7486
  /*option*/
7462
- ctx[49].label)) {
7487
+ ctx[50].label)) {
7463
7488
  attr(option, "aria-label", option_aria_label_value);
7464
7489
  }
7465
7490
  },
@@ -7479,7 +7504,7 @@
7479
7504
  function select_block_type(ctx, dirty) {
7480
7505
  if (
7481
7506
  /*_native*/
7482
- ctx[22]) return create_if_block$f;
7507
+ ctx[14]) return create_if_block$f;
7483
7508
  return create_else_block$5;
7484
7509
  }
7485
7510
 
@@ -7508,11 +7533,11 @@
7508
7533
  /*width*/
7509
7534
  ctx[5] ||
7510
7535
  /*_computedWidth*/
7511
- ctx[17]}
7536
+ ctx[19]}
7512
7537
  `);
7513
7538
  toggle_class(div, "dropdown-native",
7514
7539
  /*_native*/
7515
- ctx[22]);
7540
+ ctx[14]);
7516
7541
  },
7517
7542
 
7518
7543
  m(target, anchor) {
@@ -7520,7 +7545,7 @@
7520
7545
  if_block.m(div, null);
7521
7546
  /*div_binding*/
7522
7547
 
7523
- ctx[34](div);
7548
+ ctx[35](div);
7524
7549
  },
7525
7550
 
7526
7551
  p(ctx, dirty) {
@@ -7546,7 +7571,7 @@
7546
7571
 
7547
7572
  if (dirty[0] &
7548
7573
  /*mt, mr, mb, ml, width, _computedWidth*/
7549
- 134944 && div_style_value !== (div_style_value = `
7574
+ 528160 && div_style_value !== (div_style_value = `
7550
7575
  ${calculateMargin(
7551
7576
  /*mt*/
7552
7577
  ctx[8],
@@ -7560,17 +7585,17 @@
7560
7585
  /*width*/
7561
7586
  ctx[5] ||
7562
7587
  /*_computedWidth*/
7563
- ctx[17]}
7588
+ ctx[19]}
7564
7589
  `)) {
7565
7590
  attr(div, "style", div_style_value);
7566
7591
  }
7567
7592
 
7568
7593
  if (dirty[0] &
7569
7594
  /*_native*/
7570
- 4194304) {
7595
+ 16384) {
7571
7596
  toggle_class(div, "dropdown-native",
7572
7597
  /*_native*/
7573
- ctx[22]);
7598
+ ctx[14]);
7574
7599
  }
7575
7600
  },
7576
7601
 
@@ -7582,25 +7607,41 @@
7582
7607
  if_block.d();
7583
7608
  /*div_binding*/
7584
7609
 
7585
- ctx[34](null);
7610
+ ctx[35](null);
7586
7611
  }
7587
7612
 
7588
7613
  };
7589
7614
  }
7590
7615
 
7616
+ function parseValues(selectedValue) {
7617
+ let rawValue;
7618
+
7619
+ try {
7620
+ rawValue = JSON.parse(selectedValue || "[]");
7621
+ } catch (e) {
7622
+ rawValue = [selectedValue];
7623
+ }
7624
+
7625
+ const rawValues = typeof rawValue === "object" ? rawValue : [rawValue]; // convert all values to strings to avoid later type comparison issues
7626
+
7627
+ return rawValues.map(val => `${val}`);
7628
+ }
7629
+
7591
7630
  function instance$s($$self, $$props, $$invalidate) {
7592
7631
  const showMenu = _async(function () {
7593
7632
  if (_disabled || _isMenuVisible) {
7594
7633
  return;
7595
7634
  }
7596
7635
 
7597
- $$invalidate(15, _isMenuVisible = true);
7636
+ $$invalidate(17, _isMenuVisible = true);
7598
7637
  return _call(tick, function () {
7599
7638
  // hide menu on blur
7600
7639
  _menuEl.addEventListener("blur", closeMenu); // bind up/down arrows to navigate options
7601
7640
 
7602
7641
 
7603
7642
  _menuEl.addEventListener("mouseover", onHighlight);
7643
+
7644
+ setDropdownMenuPosition();
7604
7645
  });
7605
7646
  });
7606
7647
 
@@ -7666,33 +7707,25 @@
7666
7707
 
7667
7708
  let _computedWidth;
7668
7709
 
7710
+ let _dropdownMenuPos = "auto";
7711
+
7669
7712
  let _el;
7670
7713
 
7671
7714
  let _menuEl;
7672
7715
 
7673
7716
  let _selectEl;
7674
7717
 
7675
- onMount(function () {
7676
- return _call(tick, function () {
7677
- $$invalidate(12, _values = parseValues());
7678
- $$invalidate(13, _options = getOptions());
7679
-
7680
- if (!_native) {
7681
- $$invalidate(17, _computedWidth = getCustomDropdownWidth(_options));
7682
- addKeyboardEventListeners();
7683
- setHighlightedIndexToSelected();
7684
- } // watch for DOM changes within the slot => dynamic binding
7685
-
7686
-
7687
- const slot = _el.querySelector("slot");
7718
+ onMount(_async(function () {
7719
+ // watch for DOM changes within the slot => dynamic binding
7720
+ const slot = _el.querySelector("slot");
7688
7721
 
7689
- slot === null || slot === void 0 ? void 0 : slot.addEventListener("slotchange", _e => {
7690
- $$invalidate(14, _selectedLabel = "");
7691
- $$invalidate(12, _values = parseValues());
7692
- $$invalidate(13, _options = getOptions());
7693
- });
7722
+ slot === null || slot === void 0 ? void 0 : slot.addEventListener("slotchange", _e => {
7723
+ $$invalidate(16, _selectedLabel = "");
7724
+ $$invalidate(15, _values = parseValues(value));
7725
+ $$invalidate(12, _options = getOptions());
7694
7726
  });
7695
- });
7727
+ return _await();
7728
+ }));
7696
7729
  onDestroy(() => {
7697
7730
  removeKeyboardEventListeners();
7698
7731
  }); // Functions
@@ -7723,8 +7756,8 @@
7723
7756
  const selected = _values.includes(value);
7724
7757
 
7725
7758
  if (selected) {
7726
- $$invalidate(14, _selectedLabel = label);
7727
- $$invalidate(12, _values = [value]);
7759
+ $$invalidate(16, _selectedLabel = label);
7760
+ $$invalidate(15, _values = [value]);
7728
7761
  }
7729
7762
 
7730
7763
  return {
@@ -7765,21 +7798,6 @@
7765
7798
  _el.removeEventListener("focus", onFocus, true);
7766
7799
 
7767
7800
  _el.removeEventListener("blur", onBlur, true);
7768
- } // parse and convert values to strings to avoid later type comparison issues
7769
-
7770
-
7771
- function parseValues() {
7772
- let rawValue;
7773
-
7774
- try {
7775
- rawValue = JSON.parse(value || "[]");
7776
- } catch (e) {
7777
- rawValue = [value];
7778
- }
7779
-
7780
- const rawValues = typeof rawValue === "object" ? rawValue : [rawValue]; // convert all values to strings to avoid later type comparison issues
7781
-
7782
- return rawValues.map(val => `${val}`);
7783
7801
  }
7784
7802
 
7785
7803
  function closeMenu() {
@@ -7788,11 +7806,22 @@
7788
7806
  _menuEl.removeEventListener("mouseover", onHighlight);
7789
7807
 
7790
7808
  setHighlightedIndexToSelected();
7791
- $$invalidate(15, _isMenuVisible = false);
7809
+ $$invalidate(17, _isMenuVisible = false);
7810
+ $$invalidate(20, _dropdownMenuPos = "auto");
7811
+ }
7812
+
7813
+ function setDropdownMenuPosition() {
7814
+ const dropdownRect = _el.getBoundingClientRect();
7815
+
7816
+ const menuRect = _menuEl.getBoundingClientRect();
7817
+
7818
+ if (window.innerHeight - dropdownRect.top < dropdownRect.height + menuRect.height) {
7819
+ $$invalidate(20, _dropdownMenuPos = menuRect.top - dropdownRect.top + 'px');
7820
+ }
7792
7821
  }
7793
7822
 
7794
7823
  function setHighlightedIndexToSelected() {
7795
- $$invalidate(16, _highlightedIndex = _options.findIndex(option => _values.includes(option.value)));
7824
+ $$invalidate(18, _highlightedIndex = _options.findIndex(option => _values.includes(option.value)));
7796
7825
  } // Event handlers
7797
7826
 
7798
7827
  /**
@@ -7802,7 +7831,7 @@
7802
7831
 
7803
7832
  function onSelect(value, label, close) {
7804
7833
  if (_disabled) return;
7805
- $$invalidate(14, _selectedLabel = label);
7834
+ $$invalidate(16, _selectedLabel = label);
7806
7835
  let detail;
7807
7836
 
7808
7837
  if (_multiselect) {
@@ -7813,7 +7842,7 @@
7813
7842
  values: _values
7814
7843
  };
7815
7844
  } else {
7816
- $$invalidate(12, _values = [value]);
7845
+ $$invalidate(15, _values = [value]);
7817
7846
  detail = {
7818
7847
  name,
7819
7848
  value
@@ -7869,14 +7898,14 @@
7869
7898
 
7870
7899
  function _handleArrowDown() {
7871
7900
  if (_highlightedIndex < _options.length - 1) {
7872
- $$invalidate(16, _highlightedIndex++, _highlightedIndex);
7901
+ $$invalidate(18, _highlightedIndex++, _highlightedIndex);
7873
7902
  onSelect(_options[_highlightedIndex].value, _options[_highlightedIndex].label, false);
7874
7903
  }
7875
7904
  }
7876
7905
 
7877
7906
  function _handleArrowUp() {
7878
7907
  if (_highlightedIndex > 0) {
7879
- $$invalidate(16, _highlightedIndex--, _highlightedIndex);
7908
+ $$invalidate(18, _highlightedIndex--, _highlightedIndex);
7880
7909
  onSelect(_options[_highlightedIndex].value, _options[_highlightedIndex].label, false);
7881
7910
  }
7882
7911
  } // add required bindings to component
@@ -7892,7 +7921,7 @@
7892
7921
  }
7893
7922
 
7894
7923
  function onHighlight(e) {
7895
- $$invalidate(16, _highlightedIndex = Number(e.target.dataset.index));
7924
+ $$invalidate(18, _highlightedIndex = Number(e.target.dataset.index));
7896
7925
  }
7897
7926
 
7898
7927
  function onNativeSelect(e) {
@@ -7904,8 +7933,8 @@
7904
7933
  function select_binding($$value) {
7905
7934
  binding_callbacks[$$value ? 'unshift' : 'push'](() => {
7906
7935
  _selectEl = $$value;
7907
- $$invalidate(20, _selectEl);
7908
- $$invalidate(13, _options);
7936
+ $$invalidate(22, _selectEl);
7937
+ ((($$invalidate(12, _options), $$invalidate(13, _el)), $$invalidate(29, value)), $$invalidate(14, _native)), $$invalidate(31, native);
7909
7938
  });
7910
7939
  }
7911
7940
 
@@ -7914,29 +7943,29 @@
7914
7943
  function ul_binding($$value) {
7915
7944
  binding_callbacks[$$value ? 'unshift' : 'push'](() => {
7916
7945
  _menuEl = $$value;
7917
- $$invalidate(19, _menuEl);
7946
+ $$invalidate(21, _menuEl);
7918
7947
  });
7919
7948
  }
7920
7949
 
7921
7950
  function div_binding($$value) {
7922
7951
  binding_callbacks[$$value ? 'unshift' : 'push'](() => {
7923
7952
  _el = $$value;
7924
- $$invalidate(18, _el);
7953
+ $$invalidate(13, _el);
7925
7954
  });
7926
7955
  }
7927
7956
 
7928
7957
  $$self.$$set = $$props => {
7929
7958
  if ('name' in $$props) $$invalidate(0, name = $$props.name);
7930
7959
  if ('arialabel' in $$props) $$invalidate(1, arialabel = $$props.arialabel);
7931
- if ('value' in $$props) $$invalidate(28, value = $$props.value);
7960
+ if ('value' in $$props) $$invalidate(29, value = $$props.value);
7932
7961
  if ('leadingicon' in $$props) $$invalidate(2, leadingicon = $$props.leadingicon);
7933
7962
  if ('maxheight' in $$props) $$invalidate(3, maxheight = $$props.maxheight);
7934
7963
  if ('placeholder' in $$props) $$invalidate(4, placeholder = $$props.placeholder);
7935
7964
  if ('width' in $$props) $$invalidate(5, width = $$props.width);
7936
7965
  if ('disabled' in $$props) $$invalidate(6, disabled = $$props.disabled);
7937
7966
  if ('error' in $$props) $$invalidate(7, error = $$props.error);
7938
- if ('multiselect' in $$props) $$invalidate(29, multiselect = $$props.multiselect);
7939
- if ('native' in $$props) $$invalidate(30, native = $$props.native);
7967
+ if ('multiselect' in $$props) $$invalidate(30, multiselect = $$props.multiselect);
7968
+ if ('native' in $$props) $$invalidate(31, native = $$props.native);
7940
7969
  if ('mt' in $$props) $$invalidate(8, mt = $$props.mt);
7941
7970
  if ('mr' in $$props) $$invalidate(9, mr = $$props.mr);
7942
7971
  if ('mb' in $$props) $$invalidate(10, mb = $$props.mb);
@@ -7947,35 +7976,52 @@
7947
7976
  if ($$self.$$.dirty[0] &
7948
7977
  /*disabled*/
7949
7978
  64) {
7950
- $$invalidate(21, _disabled = toBoolean(disabled));
7979
+ $$invalidate(23, _disabled = toBoolean(disabled));
7951
7980
  }
7952
7981
 
7953
7982
  if ($$self.$$.dirty[0] &
7954
7983
  /*error*/
7955
7984
  128) {
7956
- $$invalidate(23, _error = toBoolean(error));
7985
+ $$invalidate(24, _error = toBoolean(error));
7957
7986
  }
7958
7987
 
7959
7988
  if ($$self.$$.dirty[0] &
7960
7989
  /*multiselect*/
7961
- 536870912) {
7990
+ 1073741824) {
7962
7991
  _multiselect = toBoolean(multiselect);
7963
7992
  }
7964
7993
 
7965
- if ($$self.$$.dirty[0] &
7994
+ if ($$self.$$.dirty[1] &
7966
7995
  /*native*/
7967
- 1073741824) {
7968
- $$invalidate(22, _native = toBoolean(native));
7996
+ 1) {
7997
+ $$invalidate(14, _native = toBoolean(native));
7998
+ }
7999
+
8000
+ if ($$self.$$.dirty[0] &
8001
+ /*_el, value, _native, _options*/
8002
+ 536899584) {
8003
+ {
8004
+ if (_el) {
8005
+ $$invalidate(15, _values = parseValues(value));
8006
+ $$invalidate(12, _options = getOptions());
8007
+
8008
+ if (!_native) {
8009
+ $$invalidate(19, _computedWidth = getCustomDropdownWidth(_options));
8010
+ addKeyboardEventListeners();
8011
+ setHighlightedIndexToSelected();
8012
+ }
8013
+ }
8014
+ }
7969
8015
  }
7970
8016
  };
7971
8017
 
7972
- return [name, arialabel, leadingicon, maxheight, placeholder, width, disabled, error, mt, mr, mb, ml, _values, _options, _selectedLabel, _isMenuVisible, _highlightedIndex, _computedWidth, _el, _menuEl, _selectEl, _disabled, _native, _error, showMenu, closeMenu, onSelect, onNativeSelect, value, multiselect, native, select_binding, click_handler, ul_binding, div_binding];
8018
+ return [name, arialabel, leadingicon, maxheight, placeholder, width, disabled, error, mt, mr, mb, ml, _options, _el, _native, _values, _selectedLabel, _isMenuVisible, _highlightedIndex, _computedWidth, _dropdownMenuPos, _menuEl, _selectEl, _disabled, _error, showMenu, closeMenu, onSelect, onNativeSelect, value, multiselect, native, select_binding, click_handler, ul_binding, div_binding];
7973
8019
  }
7974
8020
 
7975
8021
  class Dropdown extends SvelteElement {
7976
8022
  constructor(options) {
7977
8023
  super();
7978
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.dropdown{position:relative;cursor:pointer;display:inline-block;width:100%}@media(min-width: 640px){.dropdown{width:var(--width)}}.dropdown-background{cursor:default;position:fixed;z-index:98;inset:0}.dropdown-list{position:absolute;left:0;right:0;padding:0;margin: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;scroll-behavior:smooth;scrollbar-width:thin;display:none}.dropdown-active{display:block}.dropdown-list::-webkit-scrollbar{width:6px}.dropdown-list::-webkit-scrollbar-track{background:#f1f1f1}.dropdown-list::-webkit-scrollbar-thumb{background:#888}.dropdown-list::-webkit-scrollbar-thumb:hover{background:#555}.dropdown-item{margin:0;padding:0.5rem;cursor:pointer;color:var(--goa-color-greyscale-black);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-item--tabbed{background:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover)}.dropdown-item--disabled{opacity:0.5;cursor:default}.dropdown-item--disabled:hover{cursor:default;color:var(--goa-color-greyscale-700)}.dropdown-item--selected{background:var(--goa-color-interactive-default);color:var(--goa-color-greyscale-white)}.dropdown-item--tabbed.dropdown-item--selected,.dropdown-item--selected:hover{background:var(--goa-color-interactive-hover);color:var(--goa-color-greyscale-white)}.dropdown-native{border:1px solid var(--goa-color-greyscale-700);border-radius:var(--goa-border-radius-m);background-color:var(--goa-color-greyscale-white);transition:box-shadow 0.1s ease-in}.dropdown-native:has(select:disabled){background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);box-shadow:none;color:var(--goa-color-text-secondary);cursor:default}.dropdown-native:has(select.error){border:2px solid var(--goa-color-interactive-error)}.dropdown-native:hover{border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover)}select{border:none;background-color:transparent;color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);appearance:none;padding:calc(var(--goa-space-xs) + 2px);padding-left:0.5rem;padding-right:3rem;outline:none;width:100%}.dropdown-native::after{content:"";position:absolute;right:0.6rem;top:0.6rem;pointer-events:none;width:1.5rem;height:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144' /%3E%3C/svg%3E");background-repeat:none}.dropdown-native:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}</style>`;
8024
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.dropdown{position:relative;cursor:pointer;display:inline-block;width:var(--width, 100%)}.dropdown-background{cursor:default;position:fixed;z-index:98;inset:0}.dropdown-list{position:absolute;left:0;right:0;padding:0;margin: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;bottom:var(--bottom);scroll-behavior:smooth;scrollbar-width:thin;display:none}.dropdown-active{display:block}.dropdown-list::-webkit-scrollbar{width:6px}.dropdown-list::-webkit-scrollbar-track{background:#f1f1f1}.dropdown-list::-webkit-scrollbar-thumb{background:#888}.dropdown-list::-webkit-scrollbar-thumb:hover{background:#555}.dropdown-item{margin:0;padding:0.5rem;cursor:pointer;color:var(--goa-color-greyscale-black);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-item--tabbed{background:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover)}.dropdown-item--disabled{opacity:0.5;cursor:default}.dropdown-item--disabled:hover{cursor:default;color:var(--goa-color-greyscale-700)}.dropdown-item--selected{background:var(--goa-color-interactive-default);color:var(--goa-color-greyscale-white)}.dropdown-item--tabbed.dropdown-item--selected,.dropdown-item--selected:hover{background:var(--goa-color-interactive-hover);color:var(--goa-color-greyscale-white)}.dropdown-native{border:1px solid var(--goa-color-greyscale-700);border-radius:var(--goa-border-radius-m);background-color:var(--goa-color-greyscale-white);transition:box-shadow 0.1s ease-in}.dropdown-native:has(select:disabled){background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);box-shadow:none;color:var(--goa-color-text-secondary);cursor:default}.dropdown-native:has(select.error){border:2px solid var(--goa-color-interactive-error)}.dropdown-native:hover{border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover)}select{border:none;background-color:transparent;color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);appearance:none;padding:calc(var(--goa-space-xs) + 2px);padding-left:0.5rem;padding-right:3rem;outline:none;width:100%}.dropdown-native::after{content:"";position:absolute;right:0.6rem;top:0.6rem;pointer-events:none;width:1.5rem;height:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144' /%3E%3C/svg%3E");background-repeat:none}.dropdown-native:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}</style>`;
7979
8025
  init(this, {
7980
8026
  target: this.shadowRoot,
7981
8027
  props: attribute_to_object(this.attributes),
@@ -7983,15 +8029,15 @@
7983
8029
  }, instance$s, create_fragment$v, safe_not_equal, {
7984
8030
  name: 0,
7985
8031
  arialabel: 1,
7986
- value: 28,
8032
+ value: 29,
7987
8033
  leadingicon: 2,
7988
8034
  maxheight: 3,
7989
8035
  placeholder: 4,
7990
8036
  width: 5,
7991
8037
  disabled: 6,
7992
8038
  error: 7,
7993
- multiselect: 29,
7994
- native: 30,
8039
+ multiselect: 30,
8040
+ native: 31,
7995
8041
  mt: 8,
7996
8042
  mr: 9,
7997
8043
  mb: 10,
@@ -8037,7 +8083,7 @@
8037
8083
  }
8038
8084
 
8039
8085
  get value() {
8040
- return this.$$.ctx[28];
8086
+ return this.$$.ctx[29];
8041
8087
  }
8042
8088
 
8043
8089
  set value(value) {
@@ -8114,7 +8160,7 @@
8114
8160
  }
8115
8161
 
8116
8162
  get multiselect() {
8117
- return this.$$.ctx[29];
8163
+ return this.$$.ctx[30];
8118
8164
  }
8119
8165
 
8120
8166
  set multiselect(multiselect) {
@@ -8125,7 +8171,7 @@
8125
8171
  }
8126
8172
 
8127
8173
  get native() {
8128
- return this.$$.ctx[30];
8174
+ return this.$$.ctx[31];
8129
8175
  }
8130
8176
 
8131
8177
  set native(native) {
@@ -8721,14 +8767,14 @@
8721
8767
  customElements.define("goa-app-footer", Footer);
8722
8768
  /* libs/web-components/src/components/footer-meta-section/FooterMetaSection.svelte generated by Svelte v3.51.0 */
8723
8769
 
8724
- function get_each_context$3(ctx, list, i) {
8770
+ function get_each_context$4(ctx, list, i) {
8725
8771
  const child_ctx = ctx.slice();
8726
8772
  child_ctx[3] = list[i];
8727
8773
  return child_ctx;
8728
8774
  } // (52:4) {#each children as child}
8729
8775
 
8730
8776
 
8731
- function create_each_block$3(ctx) {
8777
+ function create_each_block$4(ctx) {
8732
8778
  let li;
8733
8779
  let a;
8734
8780
  let t_value =
@@ -8786,7 +8832,7 @@
8786
8832
  let each_blocks = [];
8787
8833
 
8788
8834
  for (let i = 0; i < each_value.length; i += 1) {
8789
- each_blocks[i] = create_each_block$3(get_each_context$3(ctx, each_value, i));
8835
+ each_blocks[i] = create_each_block$4(get_each_context$4(ctx, each_value, i));
8790
8836
  }
8791
8837
 
8792
8838
  return {
@@ -8830,12 +8876,12 @@
8830
8876
  let i;
8831
8877
 
8832
8878
  for (i = 0; i < each_value.length; i += 1) {
8833
- const child_ctx = get_each_context$3(ctx, each_value, i);
8879
+ const child_ctx = get_each_context$4(ctx, each_value, i);
8834
8880
 
8835
8881
  if (each_blocks[i]) {
8836
8882
  each_blocks[i].p(child_ctx, dirty);
8837
8883
  } else {
8838
- each_blocks[i] = create_each_block$3(child_ctx);
8884
+ each_blocks[i] = create_each_block$4(child_ctx);
8839
8885
  each_blocks[i].c();
8840
8886
  each_blocks[i].m(ul, null);
8841
8887
  }
@@ -8912,7 +8958,7 @@
8912
8958
  customElements.define("goa-app-footer-meta-section", FooterMetaSection);
8913
8959
  /* libs/web-components/src/components/footer-nav-section/FooterNavSection.svelte generated by Svelte v3.51.0 */
8914
8960
 
8915
- function get_each_context$2(ctx, list, i) {
8961
+ function get_each_context$3(ctx, list, i) {
8916
8962
  const child_ctx = ctx.slice();
8917
8963
  child_ctx[5] = list[i];
8918
8964
  return child_ctx;
@@ -8961,7 +9007,7 @@
8961
9007
  } // (49:4) {#each children as child}
8962
9008
 
8963
9009
 
8964
- function create_each_block$2(ctx) {
9010
+ function create_each_block$3(ctx) {
8965
9011
  let li;
8966
9012
  let a;
8967
9013
  let t_value =
@@ -9024,7 +9070,7 @@
9024
9070
  let each_blocks = [];
9025
9071
 
9026
9072
  for (let i = 0; i < each_value.length; i += 1) {
9027
- each_blocks[i] = create_each_block$2(get_each_context$2(ctx, each_value, i));
9073
+ each_blocks[i] = create_each_block$3(get_each_context$3(ctx, each_value, i));
9028
9074
  }
9029
9075
 
9030
9076
  return {
@@ -9102,12 +9148,12 @@
9102
9148
  let i;
9103
9149
 
9104
9150
  for (i = 0; i < each_value.length; i += 1) {
9105
- const child_ctx = get_each_context$2(ctx, each_value, i);
9151
+ const child_ctx = get_each_context$3(ctx, each_value, i);
9106
9152
 
9107
9153
  if (each_blocks[i]) {
9108
9154
  each_blocks[i].p(child_ctx, dirty);
9109
9155
  } else {
9110
- each_blocks[i] = create_each_block$2(child_ctx);
9156
+ each_blocks[i] = create_each_block$3(child_ctx);
9111
9157
  each_blocks[i].c();
9112
9158
  each_blocks[i].m(ul, null);
9113
9159
  }
@@ -10323,7 +10369,7 @@
10323
10369
 
10324
10370
  let _paddingSize;
10325
10371
 
10326
- const [Variants, validateVariant] = typeValidator("Icon Button Variant", ["color", "nocolor", "dark"], true);
10372
+ const [Variants, validateVariant] = typeValidator("Icon Button Variant", ["color", "nocolor", "dark", "destructive"], true);
10327
10373
  let {
10328
10374
  icon
10329
10375
  } = $$props;
@@ -10416,7 +10462,7 @@
10416
10462
  class IconButton extends SvelteElement {
10417
10463
  constructor(options) {
10418
10464
  super();
10419
- this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--goa-font-family-sans)}button,button *{box-sizing:border-box}button{display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;background:transparent;cursor:pointer;border:none;border-radius:0.5rem;padding:var(--pading-size)}.color,.dark{color:var(--goa-color-interactive-default);fill:var(--goa-color-interactive-default);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.dark:not(.inverted){color:unset}button:hover{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);outline:none}button:focus,button:active{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-interactive-focus);color:var(--goa-color-interactive-focus);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);outline:none}.color.inverted:hover{background-color:var(--goa-color-interactive-hover)}button:disabled{pointer-events:none;opacity:0.5;transform:none;cursor:default}button:disabled:hover{background-color:transparent}button.dark:hover{background-color:rgba(0, 0, 0, 0.3)}button.dark:focus,button.dark:active{background-color:rgba(0, 0, 0, 0.3);box-shadow:0 0 0 3px var(--goa-color-greyscale-white)}</style>`;
10465
+ this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--goa-font-family-sans)}button,button *{box-sizing:border-box}button{display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;background:transparent;cursor:pointer;border:none;border-radius:0.5rem;padding:var(--pading-size)}.color,.dark{color:var(--goa-color-interactive-default);fill:var(--goa-color-interactive-default);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.dark:not(.inverted){color:unset}button:hover:not(.destructive){background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);outline:none}button:focus:not(.destructive),button:active:not(.destructive){background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-interactive-focus);color:var(--goa-color-interactive-focus);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);outline:none}.color.inverted:hover{background-color:var(--goa-color-interactive-hover)}.destructive{color:var(--goa-color-emergency-dark);fill:var(--goa-color-emergency-dark)}.destructive:hover{background-color:var(--goa-color-emergency-light);border-color:var(--goa-color-emergency-light);outline:none}.destructive:focus,.destructive:active{background-color:var(--goa-color-emergency-light);border-color:var(--goa-color-interactive-focus);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);outline:none}button:disabled{pointer-events:none;opacity:0.5;transform:none;cursor:default}button:disabled:hover{background-color:transparent}button.dark:hover{background-color:rgba(0, 0, 0, 0.3)}button.dark:focus,button.dark:active{background-color:rgba(0, 0, 0, 0.3);box-shadow:0 0 0 3px var(--goa-color-greyscale-white)}</style>`;
10420
10466
  init(this, {
10421
10467
  target: this.shadowRoot,
10422
10468
  props: attribute_to_object(this.attributes),
@@ -13891,17 +13937,36 @@
13891
13937
  customElements.define("goa-page-block", PageBlock);
13892
13938
  /* libs/web-components/src/components/pagination/Pagination.svelte generated by Svelte v3.51.0 */
13893
13939
 
13940
+ function get_each_context$2(ctx, list, i) {
13941
+ const child_ctx = ctx.slice();
13942
+ child_ctx[18] = list[i];
13943
+ child_ctx[20] = i;
13944
+ return child_ctx;
13945
+ } // (66:4) {#if variant === "all"}
13946
+
13947
+
13894
13948
  function create_if_block$6(ctx) {
13895
13949
  let goa_block;
13896
13950
  let span0;
13897
13951
  let t1;
13898
13952
  let input;
13899
13953
  let t2;
13900
- let goa_input;
13954
+ let goa_dropdown;
13901
13955
  let t3;
13902
13956
  let span1;
13903
13957
  let t4;
13904
13958
  let t5;
13959
+ let each_value = {
13960
+ length:
13961
+ /*_pageCount*/
13962
+ ctx[8]
13963
+ };
13964
+ let each_blocks = [];
13965
+
13966
+ for (let i = 0; i < each_value.length; i += 1) {
13967
+ each_blocks[i] = create_each_block$2(get_each_context$2(ctx, each_value, i));
13968
+ }
13969
+
13905
13970
  return {
13906
13971
  c() {
13907
13972
  goa_block = element("goa-block");
@@ -13910,7 +13975,12 @@
13910
13975
  t1 = space();
13911
13976
  input = element("input");
13912
13977
  t2 = space();
13913
- goa_input = element("goa-input");
13978
+ goa_dropdown = element("goa-dropdown");
13979
+
13980
+ for (let i = 0; i < each_blocks.length; i += 1) {
13981
+ each_blocks[i].c();
13982
+ }
13983
+
13914
13984
  t3 = space();
13915
13985
  span1 = element("span");
13916
13986
  t4 = text("of ");
@@ -13918,16 +13988,10 @@
13918
13988
  /*_pageCount*/
13919
13989
  ctx[8]);
13920
13990
  attr(input, "type", "hidden");
13921
- set_custom_element_data(goa_input, "type", "number");
13922
- set_custom_element_data(goa_input, "value",
13991
+ set_custom_element_data(goa_dropdown, "value",
13923
13992
  /*pagenumber*/
13924
13993
  ctx[0]);
13925
- set_custom_element_data(goa_input, "width", "8ch");
13926
- set_custom_element_data(goa_input, "debounce", "500");
13927
- set_custom_element_data(goa_input, "min", "1");
13928
- set_custom_element_data(goa_input, "max",
13929
- /*_pageCount*/
13930
- ctx[8]);
13994
+ set_custom_element_data(goa_dropdown, "width", "70px");
13931
13995
  set_custom_element_data(goa_block, "data-testid", "page-selector");
13932
13996
  set_custom_element_data(goa_block, "alignment", "center");
13933
13997
  set_custom_element_data(goa_block, "gap", "s");
@@ -13942,10 +14006,15 @@
13942
14006
 
13943
14007
  ctx[12](input);
13944
14008
  append(goa_block, t2);
13945
- append(goa_block, goa_input);
13946
- /*goa_input_binding*/
14009
+ append(goa_block, goa_dropdown);
13947
14010
 
13948
- ctx[13](goa_input);
14011
+ for (let i = 0; i < each_blocks.length; i += 1) {
14012
+ each_blocks[i].m(goa_dropdown, null);
14013
+ }
14014
+ /*goa_dropdown_binding*/
14015
+
14016
+
14017
+ ctx[13](goa_dropdown);
13949
14018
  append(goa_block, t3);
13950
14019
  append(goa_block, span1);
13951
14020
  append(span1, t4);
@@ -13953,22 +14022,43 @@
13953
14022
  },
13954
14023
 
13955
14024
  p(ctx, dirty) {
14025
+ if (dirty &
14026
+ /*_pageCount*/
14027
+ 256) {
14028
+ each_value = {
14029
+ length:
14030
+ /*_pageCount*/
14031
+ ctx[8]
14032
+ };
14033
+ let i;
14034
+
14035
+ for (i = 0; i < each_value.length; i += 1) {
14036
+ const child_ctx = get_each_context$2(ctx, each_value, i);
14037
+
14038
+ if (each_blocks[i]) {
14039
+ each_blocks[i].p(child_ctx, dirty);
14040
+ } else {
14041
+ each_blocks[i] = create_each_block$2(child_ctx);
14042
+ each_blocks[i].c();
14043
+ each_blocks[i].m(goa_dropdown, null);
14044
+ }
14045
+ }
14046
+
14047
+ for (; i < each_blocks.length; i += 1) {
14048
+ each_blocks[i].d(1);
14049
+ }
14050
+
14051
+ each_blocks.length = each_value.length;
14052
+ }
14053
+
13956
14054
  if (dirty &
13957
14055
  /*pagenumber*/
13958
14056
  1) {
13959
- set_custom_element_data(goa_input, "value",
14057
+ set_custom_element_data(goa_dropdown, "value",
13960
14058
  /*pagenumber*/
13961
14059
  ctx[0]);
13962
14060
  }
13963
14061
 
13964
- if (dirty &
13965
- /*_pageCount*/
13966
- 256) {
13967
- set_custom_element_data(goa_input, "max",
13968
- /*_pageCount*/
13969
- ctx[8]);
13970
- }
13971
-
13972
14062
  if (dirty &
13973
14063
  /*_pageCount*/
13974
14064
  256) set_data(t5,
@@ -13981,11 +14071,39 @@
13981
14071
  /*input_binding*/
13982
14072
 
13983
14073
  ctx[12](null);
13984
- /*goa_input_binding*/
14074
+ destroy_each(each_blocks, detaching);
14075
+ /*goa_dropdown_binding*/
13985
14076
 
13986
14077
  ctx[13](null);
13987
14078
  }
13988
14079
 
14080
+ };
14081
+ } // (71:10) {#each {length: _pageCount} as _, i}
14082
+
14083
+
14084
+ function create_each_block$2(ctx) {
14085
+ let goa_dropdown_item;
14086
+ return {
14087
+ c() {
14088
+ goa_dropdown_item = element("goa-dropdown-item");
14089
+ set_custom_element_data(goa_dropdown_item, "value",
14090
+ /*i*/
14091
+ ctx[20] + 1);
14092
+ set_custom_element_data(goa_dropdown_item, "label",
14093
+ /*i*/
14094
+ ctx[20] + 1);
14095
+ },
14096
+
14097
+ m(target, anchor) {
14098
+ insert(target, goa_dropdown_item, anchor);
14099
+ },
14100
+
14101
+ p: noop,
14102
+
14103
+ d(detaching) {
14104
+ if (detaching) detach(goa_dropdown_item);
14105
+ }
14106
+
13989
14107
  };
13990
14108
  }
13991
14109
 
@@ -14181,7 +14299,7 @@
14181
14299
  ml = null
14182
14300
  } = $$props; // private
14183
14301
 
14184
- let inputEl = null;
14302
+ let pageDropdownEl = null;
14185
14303
  let hiddenEl = null; // needed to allow the inputEl's event to be cancelled
14186
14304
  // hooks
14187
14305
 
@@ -14191,17 +14309,11 @@
14191
14309
  itemcount,
14192
14310
  pagenumber
14193
14311
  });
14194
- validateVariant(variant); // prevent event propagation if value is non-numeric
14195
- // (input[type=number] returns blank for non-numeric numbers)
14312
+ validateVariant(variant); // prevent event propagation
14196
14313
 
14197
- inputEl && inputEl.addEventListener("_change", e => {
14314
+ pageDropdownEl && pageDropdownEl.addEventListener("_change", e => {
14198
14315
  const page = Number.parseInt(e.detail.value);
14199
14316
  e.stopPropagation();
14200
-
14201
- if (isNaN(page)) {
14202
- return;
14203
- }
14204
-
14205
14317
  hiddenEl.dispatchEvent(new CustomEvent("_change", {
14206
14318
  composed: true,
14207
14319
  bubbles: true,
@@ -14236,10 +14348,10 @@
14236
14348
  });
14237
14349
  }
14238
14350
 
14239
- function goa_input_binding($$value) {
14351
+ function goa_dropdown_binding($$value) {
14240
14352
  binding_callbacks[$$value ? 'unshift' : 'push'](() => {
14241
- inputEl = $$value;
14242
- $$invalidate(6, inputEl);
14353
+ pageDropdownEl = $$value;
14354
+ $$invalidate(6, pageDropdownEl);
14243
14355
  });
14244
14356
  }
14245
14357
 
@@ -14267,7 +14379,7 @@
14267
14379
  }
14268
14380
  };
14269
14381
 
14270
- return [pagenumber, variant, mt, mr, mb, ml, inputEl, hiddenEl, _pageCount, goto, itemcount, perpagecount, input_binding, goa_input_binding, click_handler, click_handler_1];
14382
+ return [pagenumber, variant, mt, mr, mb, ml, pageDropdownEl, hiddenEl, _pageCount, goto, itemcount, perpagecount, input_binding, goa_dropdown_binding, click_handler, click_handler_1];
14271
14383
  }
14272
14384
 
14273
14385
  class Pagination extends SvelteElement {
@@ -17375,7 +17487,7 @@
17375
17487
 
17376
17488
  onMount(() => {
17377
17489
  validateVariant(variant);
17378
- attachSortEventHandling();
17490
+ setTimeout(attachSortEventHandling, 0);
17379
17491
 
17380
17492
  const slot = _rootEl.querySelector("slot");
17381
17493
 
@@ -19766,11 +19878,11 @@
19766
19878
  mb: mb,
19767
19879
  ml: ml
19768
19880
  }, {
19769
- children: [children, headingContent && jsxRuntime.jsx("div", __assign({
19881
+ children: [headingContent && jsxRuntime.jsx("div", __assign({
19770
19882
  slot: "headingcontent"
19771
19883
  }, {
19772
19884
  children: headingContent
19773
- }), void 0)]
19885
+ }), void 0), children]
19774
19886
  }), void 0);
19775
19887
  };
19776
19888
 
@@ -20183,6 +20295,7 @@
20183
20295
 
20184
20296
  var GoAContainer = function GoAContainer(_a) {
20185
20297
  var accent = _a.accent,
20298
+ heading = _a.heading,
20186
20299
  title = _a.title,
20187
20300
  padding = _a.padding,
20188
20301
  children = _a.children,
@@ -20193,6 +20306,7 @@
20193
20306
  mb = _a.mb,
20194
20307
  ml = _a.ml,
20195
20308
  testId = _a.testId;
20309
+ var headingContent = heading || title;
20196
20310
  return jsxRuntime.jsxs("goa-container", __assign({
20197
20311
  type: type,
20198
20312
  padding: padding,
@@ -20203,10 +20317,10 @@
20203
20317
  ml: ml,
20204
20318
  "data-testid": testId
20205
20319
  }, {
20206
- children: [title && jsxRuntime.jsx("div", __assign({
20320
+ children: [headingContent && jsxRuntime.jsx("div", __assign({
20207
20321
  slot: "title"
20208
20322
  }, {
20209
- children: title
20323
+ children: headingContent
20210
20324
  }), void 0), children, actions && jsxRuntime.jsx("div", __assign({
20211
20325
  slot: "actions"
20212
20326
  }, {