@abgov/web-components 1.0.0-alpha.142 → 1.0.0-alpha.143
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 +62 -32
- package/web-components.umd.js +41 -41
package/package.json
CHANGED
package/web-components.es.js
CHANGED
|
@@ -8916,7 +8916,7 @@ class Input extends SvelteElement {
|
|
|
8916
8916
|
constructor(options) {
|
|
8917
8917
|
super();
|
|
8918
8918
|
|
|
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
|
|
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;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
8920
|
center center no-repeat}</style>`;
|
|
8921
8921
|
|
|
8922
8922
|
init(
|
|
@@ -12311,46 +12311,53 @@ function create_fragment$4(ctx) {
|
|
|
12311
12311
|
<tfoot><tr><td></td></tr></tfoot>`;
|
|
12312
12312
|
|
|
12313
12313
|
this.c = noop;
|
|
12314
|
+
attr(table, "class", /*variant*/ ctx[1]);
|
|
12314
12315
|
|
|
12315
12316
|
attr(table, "style", table_style_value = `
|
|
12316
|
-
width: ${/*width*/ ctx[0]}
|
|
12317
|
-
${calculateMargin(/*mt*/ ctx[
|
|
12317
|
+
${/*width*/ ctx[0] ? `width: ${/*width*/ ctx[0]};` : ``}
|
|
12318
|
+
${calculateMargin(/*mt*/ ctx[2], /*mr*/ ctx[3], /*mb*/ ctx[4], /*ml*/ ctx[5])}
|
|
12318
12319
|
`);
|
|
12319
12320
|
|
|
12320
|
-
toggle_class(table, "sticky", /*_stickyHeader*/ ctx[
|
|
12321
|
+
toggle_class(table, "sticky", /*_stickyHeader*/ ctx[7]);
|
|
12321
12322
|
},
|
|
12322
12323
|
m(target, anchor) {
|
|
12323
12324
|
insert(target, table, anchor);
|
|
12324
12325
|
append(table, slot);
|
|
12325
12326
|
append(table, t0);
|
|
12326
12327
|
append(table, template);
|
|
12327
|
-
/*table_binding*/ ctx[
|
|
12328
|
+
/*table_binding*/ ctx[9](table);
|
|
12328
12329
|
},
|
|
12329
12330
|
p(ctx, [dirty]) {
|
|
12330
|
-
if (dirty & /*
|
|
12331
|
-
|
|
12332
|
-
|
|
12331
|
+
if (dirty & /*variant*/ 2) {
|
|
12332
|
+
attr(table, "class", /*variant*/ ctx[1]);
|
|
12333
|
+
}
|
|
12334
|
+
|
|
12335
|
+
if (dirty & /*width, mt, mr, mb, ml*/ 61 && table_style_value !== (table_style_value = `
|
|
12336
|
+
${/*width*/ ctx[0] ? `width: ${/*width*/ ctx[0]};` : ``}
|
|
12337
|
+
${calculateMargin(/*mt*/ ctx[2], /*mr*/ ctx[3], /*mb*/ ctx[4], /*ml*/ ctx[5])}
|
|
12333
12338
|
`)) {
|
|
12334
12339
|
attr(table, "style", table_style_value);
|
|
12335
12340
|
}
|
|
12336
12341
|
|
|
12337
|
-
if (dirty & /*_stickyHeader*/
|
|
12338
|
-
toggle_class(table, "sticky", /*_stickyHeader*/ ctx[
|
|
12342
|
+
if (dirty & /*variant, _stickyHeader*/ 130) {
|
|
12343
|
+
toggle_class(table, "sticky", /*_stickyHeader*/ ctx[7]);
|
|
12339
12344
|
}
|
|
12340
12345
|
},
|
|
12341
12346
|
i: noop,
|
|
12342
12347
|
o: noop,
|
|
12343
12348
|
d(detaching) {
|
|
12344
12349
|
if (detaching) detach(table);
|
|
12345
|
-
/*table_binding*/ ctx[
|
|
12350
|
+
/*table_binding*/ ctx[9](null);
|
|
12346
12351
|
}
|
|
12347
12352
|
};
|
|
12348
12353
|
}
|
|
12349
12354
|
|
|
12350
12355
|
function instance$2($$self, $$props, $$invalidate) {
|
|
12351
12356
|
let _stickyHeader;
|
|
12357
|
+
const [Variants, validateVariant] = typeValidator("Table variant", ["normal", "relaxed"], true);
|
|
12352
12358
|
let { width = "" } = $$props;
|
|
12353
12359
|
let { stickyheader = "false" } = $$props;
|
|
12360
|
+
let { variant = "normal" } = $$props;
|
|
12354
12361
|
let { mt = null } = $$props;
|
|
12355
12362
|
let { mr = null } = $$props;
|
|
12356
12363
|
let { mb = null } = $$props;
|
|
@@ -12360,6 +12367,7 @@ function instance$2($$self, $$props, $$invalidate) {
|
|
|
12360
12367
|
let _rootEl;
|
|
12361
12368
|
|
|
12362
12369
|
onMount(() => {
|
|
12370
|
+
validateVariant(variant);
|
|
12363
12371
|
const slot = _rootEl.querySelector("slot");
|
|
12364
12372
|
|
|
12365
12373
|
if (slot) {
|
|
@@ -12375,32 +12383,44 @@ function instance$2($$self, $$props, $$invalidate) {
|
|
|
12375
12383
|
function table_binding($$value) {
|
|
12376
12384
|
binding_callbacks[$$value ? 'unshift' : 'push'](() => {
|
|
12377
12385
|
_rootEl = $$value;
|
|
12378
|
-
$$invalidate(
|
|
12386
|
+
$$invalidate(6, _rootEl);
|
|
12379
12387
|
});
|
|
12380
12388
|
}
|
|
12381
12389
|
|
|
12382
12390
|
$$self.$$set = $$props => {
|
|
12383
12391
|
if ('width' in $$props) $$invalidate(0, width = $$props.width);
|
|
12384
|
-
if ('stickyheader' in $$props) $$invalidate(
|
|
12385
|
-
if ('
|
|
12386
|
-
if ('
|
|
12387
|
-
if ('
|
|
12388
|
-
if ('
|
|
12392
|
+
if ('stickyheader' in $$props) $$invalidate(8, stickyheader = $$props.stickyheader);
|
|
12393
|
+
if ('variant' in $$props) $$invalidate(1, variant = $$props.variant);
|
|
12394
|
+
if ('mt' in $$props) $$invalidate(2, mt = $$props.mt);
|
|
12395
|
+
if ('mr' in $$props) $$invalidate(3, mr = $$props.mr);
|
|
12396
|
+
if ('mb' in $$props) $$invalidate(4, mb = $$props.mb);
|
|
12397
|
+
if ('ml' in $$props) $$invalidate(5, ml = $$props.ml);
|
|
12389
12398
|
};
|
|
12390
12399
|
|
|
12391
12400
|
$$self.$$.update = () => {
|
|
12392
|
-
if ($$self.$$.dirty & /*stickyheader*/
|
|
12393
|
-
$$invalidate(
|
|
12401
|
+
if ($$self.$$.dirty & /*stickyheader*/ 256) {
|
|
12402
|
+
$$invalidate(7, _stickyHeader = toBoolean(stickyheader));
|
|
12394
12403
|
}
|
|
12395
12404
|
};
|
|
12396
12405
|
|
|
12397
|
-
return [
|
|
12406
|
+
return [
|
|
12407
|
+
width,
|
|
12408
|
+
variant,
|
|
12409
|
+
mt,
|
|
12410
|
+
mr,
|
|
12411
|
+
mb,
|
|
12412
|
+
ml,
|
|
12413
|
+
_rootEl,
|
|
12414
|
+
_stickyHeader,
|
|
12415
|
+
stickyheader,
|
|
12416
|
+
table_binding
|
|
12417
|
+
];
|
|
12398
12418
|
}
|
|
12399
12419
|
|
|
12400
12420
|
class Table extends SvelteElement {
|
|
12401
12421
|
constructor(options) {
|
|
12402
12422
|
super();
|
|
12403
|
-
this.shadowRoot.innerHTML = `<style>table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{padding:1rem
|
|
12423
|
+
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
12424
|
|
|
12405
12425
|
init(
|
|
12406
12426
|
this,
|
|
@@ -12414,11 +12434,12 @@ class Table extends SvelteElement {
|
|
|
12414
12434
|
safe_not_equal,
|
|
12415
12435
|
{
|
|
12416
12436
|
width: 0,
|
|
12417
|
-
stickyheader:
|
|
12418
|
-
|
|
12419
|
-
|
|
12420
|
-
|
|
12421
|
-
|
|
12437
|
+
stickyheader: 8,
|
|
12438
|
+
variant: 1,
|
|
12439
|
+
mt: 2,
|
|
12440
|
+
mr: 3,
|
|
12441
|
+
mb: 4,
|
|
12442
|
+
ml: 5
|
|
12422
12443
|
},
|
|
12423
12444
|
null
|
|
12424
12445
|
);
|
|
@@ -12436,7 +12457,7 @@ class Table extends SvelteElement {
|
|
|
12436
12457
|
}
|
|
12437
12458
|
|
|
12438
12459
|
static get observedAttributes() {
|
|
12439
|
-
return ["width", "stickyheader", "mt", "mr", "mb", "ml"];
|
|
12460
|
+
return ["width", "stickyheader", "variant", "mt", "mr", "mb", "ml"];
|
|
12440
12461
|
}
|
|
12441
12462
|
|
|
12442
12463
|
get width() {
|
|
@@ -12449,7 +12470,7 @@ class Table extends SvelteElement {
|
|
|
12449
12470
|
}
|
|
12450
12471
|
|
|
12451
12472
|
get stickyheader() {
|
|
12452
|
-
return this.$$.ctx[
|
|
12473
|
+
return this.$$.ctx[8];
|
|
12453
12474
|
}
|
|
12454
12475
|
|
|
12455
12476
|
set stickyheader(stickyheader) {
|
|
@@ -12457,17 +12478,26 @@ class Table extends SvelteElement {
|
|
|
12457
12478
|
flush();
|
|
12458
12479
|
}
|
|
12459
12480
|
|
|
12460
|
-
get
|
|
12481
|
+
get variant() {
|
|
12461
12482
|
return this.$$.ctx[1];
|
|
12462
12483
|
}
|
|
12463
12484
|
|
|
12485
|
+
set variant(variant) {
|
|
12486
|
+
this.$$set({ variant });
|
|
12487
|
+
flush();
|
|
12488
|
+
}
|
|
12489
|
+
|
|
12490
|
+
get mt() {
|
|
12491
|
+
return this.$$.ctx[2];
|
|
12492
|
+
}
|
|
12493
|
+
|
|
12464
12494
|
set mt(mt) {
|
|
12465
12495
|
this.$$set({ mt });
|
|
12466
12496
|
flush();
|
|
12467
12497
|
}
|
|
12468
12498
|
|
|
12469
12499
|
get mr() {
|
|
12470
|
-
return this.$$.ctx[
|
|
12500
|
+
return this.$$.ctx[3];
|
|
12471
12501
|
}
|
|
12472
12502
|
|
|
12473
12503
|
set mr(mr) {
|
|
@@ -12476,7 +12506,7 @@ class Table extends SvelteElement {
|
|
|
12476
12506
|
}
|
|
12477
12507
|
|
|
12478
12508
|
get mb() {
|
|
12479
|
-
return this.$$.ctx[
|
|
12509
|
+
return this.$$.ctx[4];
|
|
12480
12510
|
}
|
|
12481
12511
|
|
|
12482
12512
|
set mb(mb) {
|
|
@@ -12485,7 +12515,7 @@ class Table extends SvelteElement {
|
|
|
12485
12515
|
}
|
|
12486
12516
|
|
|
12487
12517
|
get ml() {
|
|
12488
|
-
return this.$$.ctx[
|
|
12518
|
+
return this.$$.ctx[5];
|
|
12489
12519
|
}
|
|
12490
12520
|
|
|
12491
12521
|
set ml(ml) {
|