@abgov/web-components 1.3.0 → 1.4.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.
- package/package.json +1 -1
- package/web-components.es.js +72 -37
- package/web-components.umd.js +41 -41
package/package.json
CHANGED
package/web-components.es.js
CHANGED
|
@@ -4898,7 +4898,7 @@ function create_else_block$1(ctx) {
|
|
|
4898
4898
|
let slot;
|
|
4899
4899
|
let t1;
|
|
4900
4900
|
let goa_input;
|
|
4901
|
-
let
|
|
4901
|
+
let goa_input_arialabel_value;
|
|
4902
4902
|
let goa_input_data_testid_value;
|
|
4903
4903
|
let t2;
|
|
4904
4904
|
let ul;
|
|
@@ -4937,7 +4937,7 @@ function create_else_block$1(ctx) {
|
|
|
4937
4937
|
set_custom_element_data(goa_input, "placeholder", /*placeholder*/ ctx[4]);
|
|
4938
4938
|
set_custom_element_data(goa_input, "aria-controls", "menu");
|
|
4939
4939
|
set_custom_element_data(goa_input, "aria-expanded", /*_isMenuVisible*/ ctx[15]);
|
|
4940
|
-
set_custom_element_data(goa_input, "
|
|
4940
|
+
set_custom_element_data(goa_input, "arialabel", goa_input_arialabel_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0]);
|
|
4941
4941
|
set_custom_element_data(goa_input, "data-testid", goa_input_data_testid_value = `${/*name*/ ctx[0]}-dropdown-input`);
|
|
4942
4942
|
set_custom_element_data(goa_input, "readonly", "");
|
|
4943
4943
|
set_custom_element_data(goa_input, "role", "combobox");
|
|
@@ -4945,6 +4945,7 @@ function create_else_block$1(ctx) {
|
|
|
4945
4945
|
set_custom_element_data(goa_input, "type", "text");
|
|
4946
4946
|
set_custom_element_data(goa_input, "value", /*_selectedLabel*/ ctx[14]);
|
|
4947
4947
|
set_custom_element_data(goa_input, "width", "100%");
|
|
4948
|
+
set_custom_element_data(goa_input, "name", /*name*/ ctx[0]);
|
|
4948
4949
|
attr(ul, "id", "menu");
|
|
4949
4950
|
attr(ul, "role", "listbox");
|
|
4950
4951
|
attr(ul, "aria-activedescendant", /*_selectedLabel*/ ctx[14]);
|
|
@@ -5008,8 +5009,8 @@ function create_else_block$1(ctx) {
|
|
|
5008
5009
|
set_custom_element_data(goa_input, "aria-expanded", /*_isMenuVisible*/ ctx[15]);
|
|
5009
5010
|
}
|
|
5010
5011
|
|
|
5011
|
-
if (dirty[0] & /*arialabel, name*/ 3 &&
|
|
5012
|
-
set_custom_element_data(goa_input, "
|
|
5012
|
+
if (dirty[0] & /*arialabel, name*/ 3 && goa_input_arialabel_value !== (goa_input_arialabel_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0])) {
|
|
5013
|
+
set_custom_element_data(goa_input, "arialabel", goa_input_arialabel_value);
|
|
5013
5014
|
}
|
|
5014
5015
|
|
|
5015
5016
|
if (dirty[0] & /*name*/ 1 && goa_input_data_testid_value !== (goa_input_data_testid_value = `${/*name*/ ctx[0]}-dropdown-input`)) {
|
|
@@ -5020,6 +5021,10 @@ function create_else_block$1(ctx) {
|
|
|
5020
5021
|
set_custom_element_data(goa_input, "value", /*_selectedLabel*/ ctx[14]);
|
|
5021
5022
|
}
|
|
5022
5023
|
|
|
5024
|
+
if (dirty[0] & /*name*/ 1) {
|
|
5025
|
+
set_custom_element_data(goa_input, "name", /*name*/ ctx[0]);
|
|
5026
|
+
}
|
|
5027
|
+
|
|
5023
5028
|
if (dirty[0] & /*_options, _values, _highlightedIndex, onSelect*/ 67186688) {
|
|
5024
5029
|
each_value_1 = /*_options*/ ctx[13];
|
|
5025
5030
|
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);
|
|
@@ -5179,7 +5184,7 @@ function create_if_block_1$5(ctx) {
|
|
|
5179
5184
|
};
|
|
5180
5185
|
}
|
|
5181
5186
|
|
|
5182
|
-
// (
|
|
5187
|
+
// (288:6) {#each _options as option, index (index)}
|
|
5183
5188
|
function create_each_block_1(key_1, ctx) {
|
|
5184
5189
|
let li;
|
|
5185
5190
|
let t0_value = (/*option*/ ctx[48].label || /*option*/ ctx[48].value) + "";
|
|
@@ -8916,7 +8921,7 @@ class Input extends SvelteElement {
|
|
|
8916
8921
|
constructor(options) {
|
|
8917
8922
|
super();
|
|
8918
8923
|
|
|
8919
|
-
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text);font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent;width:0;flex:1 1 auto
|
|
8924
|
+
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text);font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent;width:0;flex:1 1 auto;font-family:var(--font-family)}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix,.leading-content ::slotted(div),.trailing-content ::slotted(div){background-color:var(--color-gray-100);padding:0 0.75rem;display:flex;align-items:center}.leading-content ::slotted(div),.trailing-content ::slotted(div){padding:0.5rem 0.75rem}.prefix,.leading-content ::slotted(div){border-top-left-radius:var(--input-border-radius);border-bottom-left-radius:var(--input-border-radius);border-right:1px solid var(--color-gray-600)}.suffix,.trailing-content ::slotted(div){border-top-right-radius:var(--input-border-radius);border-bottom-right-radius:var(--input-border-radius);border-left:1px solid var(--color-gray-600)}.goa-input--disabled .prefix,.goa-input--disabled .leading-content ::slotted(div){border-right:1px solid var(--color-gray-200)}.goa-input--disabled .suffix,.goa-input--disabled .trailing-content ::slotted(div){border-left:1px solid var(--color-gray-200)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
|
|
8920
8925
|
center center no-repeat}</style>`;
|
|
8921
8926
|
|
|
8922
8927
|
init(
|
|
@@ -12311,46 +12316,53 @@ function create_fragment$4(ctx) {
|
|
|
12311
12316
|
<tfoot><tr><td></td></tr></tfoot>`;
|
|
12312
12317
|
|
|
12313
12318
|
this.c = noop;
|
|
12319
|
+
attr(table, "class", /*variant*/ ctx[1]);
|
|
12314
12320
|
|
|
12315
12321
|
attr(table, "style", table_style_value = `
|
|
12316
|
-
width: ${/*width*/ ctx[0]}
|
|
12317
|
-
${calculateMargin(/*mt*/ ctx[
|
|
12322
|
+
${/*width*/ ctx[0] ? `width: ${/*width*/ ctx[0]};` : ``}
|
|
12323
|
+
${calculateMargin(/*mt*/ ctx[2], /*mr*/ ctx[3], /*mb*/ ctx[4], /*ml*/ ctx[5])}
|
|
12318
12324
|
`);
|
|
12319
12325
|
|
|
12320
|
-
toggle_class(table, "sticky", /*_stickyHeader*/ ctx[
|
|
12326
|
+
toggle_class(table, "sticky", /*_stickyHeader*/ ctx[7]);
|
|
12321
12327
|
},
|
|
12322
12328
|
m(target, anchor) {
|
|
12323
12329
|
insert(target, table, anchor);
|
|
12324
12330
|
append(table, slot);
|
|
12325
12331
|
append(table, t0);
|
|
12326
12332
|
append(table, template);
|
|
12327
|
-
/*table_binding*/ ctx[
|
|
12333
|
+
/*table_binding*/ ctx[9](table);
|
|
12328
12334
|
},
|
|
12329
12335
|
p(ctx, [dirty]) {
|
|
12330
|
-
if (dirty & /*
|
|
12331
|
-
|
|
12332
|
-
|
|
12336
|
+
if (dirty & /*variant*/ 2) {
|
|
12337
|
+
attr(table, "class", /*variant*/ ctx[1]);
|
|
12338
|
+
}
|
|
12339
|
+
|
|
12340
|
+
if (dirty & /*width, mt, mr, mb, ml*/ 61 && table_style_value !== (table_style_value = `
|
|
12341
|
+
${/*width*/ ctx[0] ? `width: ${/*width*/ ctx[0]};` : ``}
|
|
12342
|
+
${calculateMargin(/*mt*/ ctx[2], /*mr*/ ctx[3], /*mb*/ ctx[4], /*ml*/ ctx[5])}
|
|
12333
12343
|
`)) {
|
|
12334
12344
|
attr(table, "style", table_style_value);
|
|
12335
12345
|
}
|
|
12336
12346
|
|
|
12337
|
-
if (dirty & /*_stickyHeader*/
|
|
12338
|
-
toggle_class(table, "sticky", /*_stickyHeader*/ ctx[
|
|
12347
|
+
if (dirty & /*variant, _stickyHeader*/ 130) {
|
|
12348
|
+
toggle_class(table, "sticky", /*_stickyHeader*/ ctx[7]);
|
|
12339
12349
|
}
|
|
12340
12350
|
},
|
|
12341
12351
|
i: noop,
|
|
12342
12352
|
o: noop,
|
|
12343
12353
|
d(detaching) {
|
|
12344
12354
|
if (detaching) detach(table);
|
|
12345
|
-
/*table_binding*/ ctx[
|
|
12355
|
+
/*table_binding*/ ctx[9](null);
|
|
12346
12356
|
}
|
|
12347
12357
|
};
|
|
12348
12358
|
}
|
|
12349
12359
|
|
|
12350
12360
|
function instance$2($$self, $$props, $$invalidate) {
|
|
12351
12361
|
let _stickyHeader;
|
|
12362
|
+
const [Variants, validateVariant] = typeValidator("Table variant", ["normal", "relaxed"], true);
|
|
12352
12363
|
let { width = "" } = $$props;
|
|
12353
12364
|
let { stickyheader = "false" } = $$props;
|
|
12365
|
+
let { variant = "normal" } = $$props;
|
|
12354
12366
|
let { mt = null } = $$props;
|
|
12355
12367
|
let { mr = null } = $$props;
|
|
12356
12368
|
let { mb = null } = $$props;
|
|
@@ -12360,6 +12372,7 @@ function instance$2($$self, $$props, $$invalidate) {
|
|
|
12360
12372
|
let _rootEl;
|
|
12361
12373
|
|
|
12362
12374
|
onMount(() => {
|
|
12375
|
+
validateVariant(variant);
|
|
12363
12376
|
const slot = _rootEl.querySelector("slot");
|
|
12364
12377
|
|
|
12365
12378
|
if (slot) {
|
|
@@ -12375,32 +12388,44 @@ function instance$2($$self, $$props, $$invalidate) {
|
|
|
12375
12388
|
function table_binding($$value) {
|
|
12376
12389
|
binding_callbacks[$$value ? 'unshift' : 'push'](() => {
|
|
12377
12390
|
_rootEl = $$value;
|
|
12378
|
-
$$invalidate(
|
|
12391
|
+
$$invalidate(6, _rootEl);
|
|
12379
12392
|
});
|
|
12380
12393
|
}
|
|
12381
12394
|
|
|
12382
12395
|
$$self.$$set = $$props => {
|
|
12383
12396
|
if ('width' in $$props) $$invalidate(0, width = $$props.width);
|
|
12384
|
-
if ('stickyheader' in $$props) $$invalidate(
|
|
12385
|
-
if ('
|
|
12386
|
-
if ('
|
|
12387
|
-
if ('
|
|
12388
|
-
if ('
|
|
12397
|
+
if ('stickyheader' in $$props) $$invalidate(8, stickyheader = $$props.stickyheader);
|
|
12398
|
+
if ('variant' in $$props) $$invalidate(1, variant = $$props.variant);
|
|
12399
|
+
if ('mt' in $$props) $$invalidate(2, mt = $$props.mt);
|
|
12400
|
+
if ('mr' in $$props) $$invalidate(3, mr = $$props.mr);
|
|
12401
|
+
if ('mb' in $$props) $$invalidate(4, mb = $$props.mb);
|
|
12402
|
+
if ('ml' in $$props) $$invalidate(5, ml = $$props.ml);
|
|
12389
12403
|
};
|
|
12390
12404
|
|
|
12391
12405
|
$$self.$$.update = () => {
|
|
12392
|
-
if ($$self.$$.dirty & /*stickyheader*/
|
|
12393
|
-
$$invalidate(
|
|
12406
|
+
if ($$self.$$.dirty & /*stickyheader*/ 256) {
|
|
12407
|
+
$$invalidate(7, _stickyHeader = toBoolean(stickyheader));
|
|
12394
12408
|
}
|
|
12395
12409
|
};
|
|
12396
12410
|
|
|
12397
|
-
return [
|
|
12411
|
+
return [
|
|
12412
|
+
width,
|
|
12413
|
+
variant,
|
|
12414
|
+
mt,
|
|
12415
|
+
mr,
|
|
12416
|
+
mb,
|
|
12417
|
+
ml,
|
|
12418
|
+
_rootEl,
|
|
12419
|
+
_stickyHeader,
|
|
12420
|
+
stickyheader,
|
|
12421
|
+
table_binding
|
|
12422
|
+
];
|
|
12398
12423
|
}
|
|
12399
12424
|
|
|
12400
12425
|
class Table extends SvelteElement {
|
|
12401
12426
|
constructor(options) {
|
|
12402
12427
|
super();
|
|
12403
|
-
this.shadowRoot.innerHTML = `<style>table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{padding:1rem
|
|
12428
|
+
this.shadowRoot.innerHTML = `<style>table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{padding:0.75rem 1rem 0.5rem;border-bottom:1px solid var(--color-gray-200);line-height:1rem}table.relaxed td{padding:1.25rem 1rem 1rem}th{background-color:var(--color-white);color:var(--goa-color-text-secondary);padding:1rem;vertical-align:middle;text-align:left;border-bottom:2px solid var(--color-gray-600)}tfoot td{background-color:var(--color-gray-100)}tfoot tr:first-child td{border-top:2px solid var(--color-gray-200)}tfoot tr:last-child td{border-bottom:none}</style>`;
|
|
12404
12429
|
|
|
12405
12430
|
init(
|
|
12406
12431
|
this,
|
|
@@ -12414,11 +12439,12 @@ class Table extends SvelteElement {
|
|
|
12414
12439
|
safe_not_equal,
|
|
12415
12440
|
{
|
|
12416
12441
|
width: 0,
|
|
12417
|
-
stickyheader:
|
|
12418
|
-
|
|
12419
|
-
|
|
12420
|
-
|
|
12421
|
-
|
|
12442
|
+
stickyheader: 8,
|
|
12443
|
+
variant: 1,
|
|
12444
|
+
mt: 2,
|
|
12445
|
+
mr: 3,
|
|
12446
|
+
mb: 4,
|
|
12447
|
+
ml: 5
|
|
12422
12448
|
},
|
|
12423
12449
|
null
|
|
12424
12450
|
);
|
|
@@ -12436,7 +12462,7 @@ class Table extends SvelteElement {
|
|
|
12436
12462
|
}
|
|
12437
12463
|
|
|
12438
12464
|
static get observedAttributes() {
|
|
12439
|
-
return ["width", "stickyheader", "mt", "mr", "mb", "ml"];
|
|
12465
|
+
return ["width", "stickyheader", "variant", "mt", "mr", "mb", "ml"];
|
|
12440
12466
|
}
|
|
12441
12467
|
|
|
12442
12468
|
get width() {
|
|
@@ -12449,7 +12475,7 @@ class Table extends SvelteElement {
|
|
|
12449
12475
|
}
|
|
12450
12476
|
|
|
12451
12477
|
get stickyheader() {
|
|
12452
|
-
return this.$$.ctx[
|
|
12478
|
+
return this.$$.ctx[8];
|
|
12453
12479
|
}
|
|
12454
12480
|
|
|
12455
12481
|
set stickyheader(stickyheader) {
|
|
@@ -12457,17 +12483,26 @@ class Table extends SvelteElement {
|
|
|
12457
12483
|
flush();
|
|
12458
12484
|
}
|
|
12459
12485
|
|
|
12460
|
-
get
|
|
12486
|
+
get variant() {
|
|
12461
12487
|
return this.$$.ctx[1];
|
|
12462
12488
|
}
|
|
12463
12489
|
|
|
12490
|
+
set variant(variant) {
|
|
12491
|
+
this.$$set({ variant });
|
|
12492
|
+
flush();
|
|
12493
|
+
}
|
|
12494
|
+
|
|
12495
|
+
get mt() {
|
|
12496
|
+
return this.$$.ctx[2];
|
|
12497
|
+
}
|
|
12498
|
+
|
|
12464
12499
|
set mt(mt) {
|
|
12465
12500
|
this.$$set({ mt });
|
|
12466
12501
|
flush();
|
|
12467
12502
|
}
|
|
12468
12503
|
|
|
12469
12504
|
get mr() {
|
|
12470
|
-
return this.$$.ctx[
|
|
12505
|
+
return this.$$.ctx[3];
|
|
12471
12506
|
}
|
|
12472
12507
|
|
|
12473
12508
|
set mr(mr) {
|
|
@@ -12476,7 +12511,7 @@ class Table extends SvelteElement {
|
|
|
12476
12511
|
}
|
|
12477
12512
|
|
|
12478
12513
|
get mb() {
|
|
12479
|
-
return this.$$.ctx[
|
|
12514
|
+
return this.$$.ctx[4];
|
|
12480
12515
|
}
|
|
12481
12516
|
|
|
12482
12517
|
set mb(mb) {
|
|
@@ -12485,7 +12520,7 @@ class Table extends SvelteElement {
|
|
|
12485
12520
|
}
|
|
12486
12521
|
|
|
12487
12522
|
get ml() {
|
|
12488
|
-
return this.$$.ctx[
|
|
12523
|
+
return this.$$.ctx[5];
|
|
12489
12524
|
}
|
|
12490
12525
|
|
|
12491
12526
|
set ml(ml) {
|