@abgov/react-components 4.3.0 → 4.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/lib/table/table.d.ts +4 -1
- package/package.json +1 -1
- package/react-components.esm.js +93 -47
- package/react-components.umd.js +93 -47
package/lib/table/table.d.ts
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import React, { ReactNode } from "react";
|
|
2
2
|
import { Margins } from "../../common/styling";
|
|
3
|
+
export declare type TableVariant = "normal" | "relaxed";
|
|
3
4
|
interface WCProps extends Margins {
|
|
4
5
|
width?: string;
|
|
5
6
|
stickyheader?: boolean;
|
|
7
|
+
variant?: TableVariant;
|
|
6
8
|
}
|
|
7
9
|
declare global {
|
|
8
10
|
namespace JSX {
|
|
@@ -13,7 +15,8 @@ declare global {
|
|
|
13
15
|
}
|
|
14
16
|
export interface TableProps extends Margins {
|
|
15
17
|
width?: string;
|
|
16
|
-
|
|
18
|
+
variant?: TableVariant;
|
|
19
|
+
children: ReactNode;
|
|
17
20
|
}
|
|
18
21
|
export declare function GoATable(props: TableProps): JSX.Element;
|
|
19
22
|
export default GoATable;
|
package/package.json
CHANGED
package/react-components.esm.js
CHANGED
|
@@ -6016,7 +6016,7 @@ function create_else_block$1(ctx) {
|
|
|
6016
6016
|
let slot;
|
|
6017
6017
|
let t1;
|
|
6018
6018
|
let goa_input;
|
|
6019
|
-
let
|
|
6019
|
+
let goa_input_arialabel_value;
|
|
6020
6020
|
let goa_input_data_testid_value;
|
|
6021
6021
|
let t2;
|
|
6022
6022
|
let ul;
|
|
@@ -6072,7 +6072,7 @@ function create_else_block$1(ctx) {
|
|
|
6072
6072
|
set_custom_element_data(goa_input, "aria-expanded",
|
|
6073
6073
|
/*_isMenuVisible*/
|
|
6074
6074
|
ctx[15]);
|
|
6075
|
-
set_custom_element_data(goa_input, "
|
|
6075
|
+
set_custom_element_data(goa_input, "arialabel", goa_input_arialabel_value =
|
|
6076
6076
|
/*arialabel*/
|
|
6077
6077
|
ctx[1] ||
|
|
6078
6078
|
/*name*/
|
|
@@ -6088,6 +6088,9 @@ function create_else_block$1(ctx) {
|
|
|
6088
6088
|
/*_selectedLabel*/
|
|
6089
6089
|
ctx[14]);
|
|
6090
6090
|
set_custom_element_data(goa_input, "width", "100%");
|
|
6091
|
+
set_custom_element_data(goa_input, "name",
|
|
6092
|
+
/*name*/
|
|
6093
|
+
ctx[0]);
|
|
6091
6094
|
attr(ul, "id", "menu");
|
|
6092
6095
|
attr(ul, "role", "listbox");
|
|
6093
6096
|
attr(ul, "aria-activedescendant",
|
|
@@ -6187,12 +6190,12 @@ function create_else_block$1(ctx) {
|
|
|
6187
6190
|
|
|
6188
6191
|
if (dirty[0] &
|
|
6189
6192
|
/*arialabel, name*/
|
|
6190
|
-
3 &&
|
|
6193
|
+
3 && goa_input_arialabel_value !== (goa_input_arialabel_value =
|
|
6191
6194
|
/*arialabel*/
|
|
6192
6195
|
ctx[1] ||
|
|
6193
6196
|
/*name*/
|
|
6194
6197
|
ctx[0])) {
|
|
6195
|
-
set_custom_element_data(goa_input, "
|
|
6198
|
+
set_custom_element_data(goa_input, "arialabel", goa_input_arialabel_value);
|
|
6196
6199
|
}
|
|
6197
6200
|
|
|
6198
6201
|
if (dirty[0] &
|
|
@@ -6211,6 +6214,14 @@ function create_else_block$1(ctx) {
|
|
|
6211
6214
|
ctx[14]);
|
|
6212
6215
|
}
|
|
6213
6216
|
|
|
6217
|
+
if (dirty[0] &
|
|
6218
|
+
/*name*/
|
|
6219
|
+
1) {
|
|
6220
|
+
set_custom_element_data(goa_input, "name",
|
|
6221
|
+
/*name*/
|
|
6222
|
+
ctx[0]);
|
|
6223
|
+
}
|
|
6224
|
+
|
|
6214
6225
|
if (dirty[0] &
|
|
6215
6226
|
/*_options, _values, _highlightedIndex, onSelect*/
|
|
6216
6227
|
67186688) {
|
|
@@ -6437,7 +6448,7 @@ function create_if_block_1$5(ctx) {
|
|
|
6437
6448
|
}
|
|
6438
6449
|
|
|
6439
6450
|
};
|
|
6440
|
-
} // (
|
|
6451
|
+
} // (288:6) {#each _options as option, index (index)}
|
|
6441
6452
|
|
|
6442
6453
|
|
|
6443
6454
|
function create_each_block_1(key_1, ctx) {
|
|
@@ -11068,7 +11079,7 @@ function instance$c($$self, $$props, $$invalidate) {
|
|
|
11068
11079
|
class Input extends SvelteElement {
|
|
11069
11080
|
constructor(options) {
|
|
11070
11081
|
super();
|
|
11071
|
-
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
|
|
11082
|
+
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>')
|
|
11072
11083
|
center center no-repeat}</style>`;
|
|
11073
11084
|
init(this, {
|
|
11074
11085
|
target: this.shadowRoot,
|
|
@@ -15147,23 +15158,28 @@ function create_fragment$4(ctx) {
|
|
|
15147
15158
|
<tbody><tr><td></td></tr></tbody>
|
|
15148
15159
|
<tfoot><tr><td></td></tr></tfoot>`;
|
|
15149
15160
|
this.c = noop;
|
|
15161
|
+
attr(table, "class",
|
|
15162
|
+
/*variant*/
|
|
15163
|
+
ctx[1]);
|
|
15150
15164
|
attr(table, "style", table_style_value = `
|
|
15151
|
-
|
|
15165
|
+
${
|
|
15152
15166
|
/*width*/
|
|
15153
|
-
ctx[0]
|
|
15167
|
+
ctx[0] ? `width: ${
|
|
15168
|
+
/*width*/
|
|
15169
|
+
ctx[0]};` : ``}
|
|
15154
15170
|
${calculateMargin(
|
|
15155
15171
|
/*mt*/
|
|
15156
|
-
ctx[1],
|
|
15157
|
-
/*mr*/
|
|
15158
15172
|
ctx[2],
|
|
15159
|
-
/*
|
|
15173
|
+
/*mr*/
|
|
15160
15174
|
ctx[3],
|
|
15175
|
+
/*mb*/
|
|
15176
|
+
ctx[4],
|
|
15161
15177
|
/*ml*/
|
|
15162
|
-
ctx[
|
|
15178
|
+
ctx[5])}
|
|
15163
15179
|
`);
|
|
15164
15180
|
toggle_class(table, "sticky",
|
|
15165
15181
|
/*_stickyHeader*/
|
|
15166
|
-
ctx[
|
|
15182
|
+
ctx[7]);
|
|
15167
15183
|
},
|
|
15168
15184
|
|
|
15169
15185
|
m(target, anchor) {
|
|
@@ -15173,35 +15189,45 @@ function create_fragment$4(ctx) {
|
|
|
15173
15189
|
append(table, template);
|
|
15174
15190
|
/*table_binding*/
|
|
15175
15191
|
|
|
15176
|
-
ctx[
|
|
15192
|
+
ctx[9](table);
|
|
15177
15193
|
},
|
|
15178
15194
|
|
|
15179
15195
|
p(ctx, [dirty]) {
|
|
15196
|
+
if (dirty &
|
|
15197
|
+
/*variant*/
|
|
15198
|
+
2) {
|
|
15199
|
+
attr(table, "class",
|
|
15200
|
+
/*variant*/
|
|
15201
|
+
ctx[1]);
|
|
15202
|
+
}
|
|
15203
|
+
|
|
15180
15204
|
if (dirty &
|
|
15181
15205
|
/*width, mt, mr, mb, ml*/
|
|
15182
|
-
|
|
15183
|
-
|
|
15206
|
+
61 && table_style_value !== (table_style_value = `
|
|
15207
|
+
${
|
|
15208
|
+
/*width*/
|
|
15209
|
+
ctx[0] ? `width: ${
|
|
15184
15210
|
/*width*/
|
|
15185
|
-
ctx[0]}
|
|
15211
|
+
ctx[0]};` : ``}
|
|
15186
15212
|
${calculateMargin(
|
|
15187
15213
|
/*mt*/
|
|
15188
|
-
ctx[1],
|
|
15189
|
-
/*mr*/
|
|
15190
15214
|
ctx[2],
|
|
15191
|
-
/*
|
|
15215
|
+
/*mr*/
|
|
15192
15216
|
ctx[3],
|
|
15217
|
+
/*mb*/
|
|
15218
|
+
ctx[4],
|
|
15193
15219
|
/*ml*/
|
|
15194
|
-
ctx[
|
|
15220
|
+
ctx[5])}
|
|
15195
15221
|
`)) {
|
|
15196
15222
|
attr(table, "style", table_style_value);
|
|
15197
15223
|
}
|
|
15198
15224
|
|
|
15199
15225
|
if (dirty &
|
|
15200
|
-
/*_stickyHeader*/
|
|
15201
|
-
|
|
15226
|
+
/*variant, _stickyHeader*/
|
|
15227
|
+
130) {
|
|
15202
15228
|
toggle_class(table, "sticky",
|
|
15203
15229
|
/*_stickyHeader*/
|
|
15204
|
-
ctx[
|
|
15230
|
+
ctx[7]);
|
|
15205
15231
|
}
|
|
15206
15232
|
},
|
|
15207
15233
|
|
|
@@ -15212,7 +15238,7 @@ function create_fragment$4(ctx) {
|
|
|
15212
15238
|
if (detaching) detach(table);
|
|
15213
15239
|
/*table_binding*/
|
|
15214
15240
|
|
|
15215
|
-
ctx[
|
|
15241
|
+
ctx[9](null);
|
|
15216
15242
|
}
|
|
15217
15243
|
|
|
15218
15244
|
};
|
|
@@ -15221,12 +15247,16 @@ function create_fragment$4(ctx) {
|
|
|
15221
15247
|
function instance$2($$self, $$props, $$invalidate) {
|
|
15222
15248
|
let _stickyHeader;
|
|
15223
15249
|
|
|
15250
|
+
const [Variants, validateVariant] = typeValidator("Table variant", ["normal", "relaxed"], true);
|
|
15224
15251
|
let {
|
|
15225
15252
|
width = ""
|
|
15226
15253
|
} = $$props;
|
|
15227
15254
|
let {
|
|
15228
15255
|
stickyheader = "false"
|
|
15229
15256
|
} = $$props;
|
|
15257
|
+
let {
|
|
15258
|
+
variant = "normal"
|
|
15259
|
+
} = $$props;
|
|
15230
15260
|
let {
|
|
15231
15261
|
mt = null
|
|
15232
15262
|
} = $$props;
|
|
@@ -15243,6 +15273,8 @@ function instance$2($$self, $$props, $$invalidate) {
|
|
|
15243
15273
|
let _rootEl;
|
|
15244
15274
|
|
|
15245
15275
|
onMount(() => {
|
|
15276
|
+
validateVariant(variant);
|
|
15277
|
+
|
|
15246
15278
|
const slot = _rootEl.querySelector("slot");
|
|
15247
15279
|
|
|
15248
15280
|
if (slot) {
|
|
@@ -15258,45 +15290,47 @@ function instance$2($$self, $$props, $$invalidate) {
|
|
|
15258
15290
|
function table_binding($$value) {
|
|
15259
15291
|
binding_callbacks[$$value ? 'unshift' : 'push'](() => {
|
|
15260
15292
|
_rootEl = $$value;
|
|
15261
|
-
$$invalidate(
|
|
15293
|
+
$$invalidate(6, _rootEl);
|
|
15262
15294
|
});
|
|
15263
15295
|
}
|
|
15264
15296
|
|
|
15265
15297
|
$$self.$$set = $$props => {
|
|
15266
15298
|
if ('width' in $$props) $$invalidate(0, width = $$props.width);
|
|
15267
|
-
if ('stickyheader' in $$props) $$invalidate(
|
|
15268
|
-
if ('
|
|
15269
|
-
if ('
|
|
15270
|
-
if ('
|
|
15271
|
-
if ('
|
|
15299
|
+
if ('stickyheader' in $$props) $$invalidate(8, stickyheader = $$props.stickyheader);
|
|
15300
|
+
if ('variant' in $$props) $$invalidate(1, variant = $$props.variant);
|
|
15301
|
+
if ('mt' in $$props) $$invalidate(2, mt = $$props.mt);
|
|
15302
|
+
if ('mr' in $$props) $$invalidate(3, mr = $$props.mr);
|
|
15303
|
+
if ('mb' in $$props) $$invalidate(4, mb = $$props.mb);
|
|
15304
|
+
if ('ml' in $$props) $$invalidate(5, ml = $$props.ml);
|
|
15272
15305
|
};
|
|
15273
15306
|
|
|
15274
15307
|
$$self.$$.update = () => {
|
|
15275
15308
|
if ($$self.$$.dirty &
|
|
15276
15309
|
/*stickyheader*/
|
|
15277
|
-
|
|
15278
|
-
$$invalidate(
|
|
15310
|
+
256) {
|
|
15311
|
+
$$invalidate(7, _stickyHeader = toBoolean(stickyheader));
|
|
15279
15312
|
}
|
|
15280
15313
|
};
|
|
15281
15314
|
|
|
15282
|
-
return [width, mt, mr, mb, ml, _rootEl, _stickyHeader, stickyheader, table_binding];
|
|
15315
|
+
return [width, variant, mt, mr, mb, ml, _rootEl, _stickyHeader, stickyheader, table_binding];
|
|
15283
15316
|
}
|
|
15284
15317
|
|
|
15285
15318
|
class Table extends SvelteElement {
|
|
15286
15319
|
constructor(options) {
|
|
15287
15320
|
super();
|
|
15288
|
-
this.shadowRoot.innerHTML = `<style>table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{padding:1rem
|
|
15321
|
+
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>`;
|
|
15289
15322
|
init(this, {
|
|
15290
15323
|
target: this.shadowRoot,
|
|
15291
15324
|
props: attribute_to_object(this.attributes),
|
|
15292
15325
|
customElement: true
|
|
15293
15326
|
}, instance$2, create_fragment$4, safe_not_equal, {
|
|
15294
15327
|
width: 0,
|
|
15295
|
-
stickyheader:
|
|
15296
|
-
|
|
15297
|
-
|
|
15298
|
-
|
|
15299
|
-
|
|
15328
|
+
stickyheader: 8,
|
|
15329
|
+
variant: 1,
|
|
15330
|
+
mt: 2,
|
|
15331
|
+
mr: 3,
|
|
15332
|
+
mb: 4,
|
|
15333
|
+
ml: 5
|
|
15300
15334
|
}, null);
|
|
15301
15335
|
|
|
15302
15336
|
if (options) {
|
|
@@ -15312,7 +15346,7 @@ class Table extends SvelteElement {
|
|
|
15312
15346
|
}
|
|
15313
15347
|
|
|
15314
15348
|
static get observedAttributes() {
|
|
15315
|
-
return ["width", "stickyheader", "mt", "mr", "mb", "ml"];
|
|
15349
|
+
return ["width", "stickyheader", "variant", "mt", "mr", "mb", "ml"];
|
|
15316
15350
|
}
|
|
15317
15351
|
|
|
15318
15352
|
get width() {
|
|
@@ -15327,7 +15361,7 @@ class Table extends SvelteElement {
|
|
|
15327
15361
|
}
|
|
15328
15362
|
|
|
15329
15363
|
get stickyheader() {
|
|
15330
|
-
return this.$$.ctx[
|
|
15364
|
+
return this.$$.ctx[8];
|
|
15331
15365
|
}
|
|
15332
15366
|
|
|
15333
15367
|
set stickyheader(stickyheader) {
|
|
@@ -15337,10 +15371,21 @@ class Table extends SvelteElement {
|
|
|
15337
15371
|
flush();
|
|
15338
15372
|
}
|
|
15339
15373
|
|
|
15340
|
-
get
|
|
15374
|
+
get variant() {
|
|
15341
15375
|
return this.$$.ctx[1];
|
|
15342
15376
|
}
|
|
15343
15377
|
|
|
15378
|
+
set variant(variant) {
|
|
15379
|
+
this.$$set({
|
|
15380
|
+
variant
|
|
15381
|
+
});
|
|
15382
|
+
flush();
|
|
15383
|
+
}
|
|
15384
|
+
|
|
15385
|
+
get mt() {
|
|
15386
|
+
return this.$$.ctx[2];
|
|
15387
|
+
}
|
|
15388
|
+
|
|
15344
15389
|
set mt(mt) {
|
|
15345
15390
|
this.$$set({
|
|
15346
15391
|
mt
|
|
@@ -15349,7 +15394,7 @@ class Table extends SvelteElement {
|
|
|
15349
15394
|
}
|
|
15350
15395
|
|
|
15351
15396
|
get mr() {
|
|
15352
|
-
return this.$$.ctx[
|
|
15397
|
+
return this.$$.ctx[3];
|
|
15353
15398
|
}
|
|
15354
15399
|
|
|
15355
15400
|
set mr(mr) {
|
|
@@ -15360,7 +15405,7 @@ class Table extends SvelteElement {
|
|
|
15360
15405
|
}
|
|
15361
15406
|
|
|
15362
15407
|
get mb() {
|
|
15363
|
-
return this.$$.ctx[
|
|
15408
|
+
return this.$$.ctx[4];
|
|
15364
15409
|
}
|
|
15365
15410
|
|
|
15366
15411
|
set mb(mb) {
|
|
@@ -15371,7 +15416,7 @@ class Table extends SvelteElement {
|
|
|
15371
15416
|
}
|
|
15372
15417
|
|
|
15373
15418
|
get ml() {
|
|
15374
|
-
return this.$$.ctx[
|
|
15419
|
+
return this.$$.ctx[5];
|
|
15375
15420
|
}
|
|
15376
15421
|
|
|
15377
15422
|
set ml(ml) {
|
|
@@ -17282,7 +17327,8 @@ const GoASpinner = ({
|
|
|
17282
17327
|
function GoATable(props) {
|
|
17283
17328
|
return jsx("goa-table", Object.assign({
|
|
17284
17329
|
width: props.width,
|
|
17285
|
-
stickyheader: false
|
|
17330
|
+
stickyheader: false,
|
|
17331
|
+
variant: props.variant
|
|
17286
17332
|
}, {
|
|
17287
17333
|
children: jsx("template", {
|
|
17288
17334
|
children: jsx("table", {
|
package/react-components.umd.js
CHANGED
|
@@ -6058,7 +6058,7 @@
|
|
|
6058
6058
|
let slot;
|
|
6059
6059
|
let t1;
|
|
6060
6060
|
let goa_input;
|
|
6061
|
-
let
|
|
6061
|
+
let goa_input_arialabel_value;
|
|
6062
6062
|
let goa_input_data_testid_value;
|
|
6063
6063
|
let t2;
|
|
6064
6064
|
let ul;
|
|
@@ -6114,7 +6114,7 @@
|
|
|
6114
6114
|
set_custom_element_data(goa_input, "aria-expanded",
|
|
6115
6115
|
/*_isMenuVisible*/
|
|
6116
6116
|
ctx[15]);
|
|
6117
|
-
set_custom_element_data(goa_input, "
|
|
6117
|
+
set_custom_element_data(goa_input, "arialabel", goa_input_arialabel_value =
|
|
6118
6118
|
/*arialabel*/
|
|
6119
6119
|
ctx[1] ||
|
|
6120
6120
|
/*name*/
|
|
@@ -6130,6 +6130,9 @@
|
|
|
6130
6130
|
/*_selectedLabel*/
|
|
6131
6131
|
ctx[14]);
|
|
6132
6132
|
set_custom_element_data(goa_input, "width", "100%");
|
|
6133
|
+
set_custom_element_data(goa_input, "name",
|
|
6134
|
+
/*name*/
|
|
6135
|
+
ctx[0]);
|
|
6133
6136
|
attr(ul, "id", "menu");
|
|
6134
6137
|
attr(ul, "role", "listbox");
|
|
6135
6138
|
attr(ul, "aria-activedescendant",
|
|
@@ -6229,12 +6232,12 @@
|
|
|
6229
6232
|
|
|
6230
6233
|
if (dirty[0] &
|
|
6231
6234
|
/*arialabel, name*/
|
|
6232
|
-
3 &&
|
|
6235
|
+
3 && goa_input_arialabel_value !== (goa_input_arialabel_value =
|
|
6233
6236
|
/*arialabel*/
|
|
6234
6237
|
ctx[1] ||
|
|
6235
6238
|
/*name*/
|
|
6236
6239
|
ctx[0])) {
|
|
6237
|
-
set_custom_element_data(goa_input, "
|
|
6240
|
+
set_custom_element_data(goa_input, "arialabel", goa_input_arialabel_value);
|
|
6238
6241
|
}
|
|
6239
6242
|
|
|
6240
6243
|
if (dirty[0] &
|
|
@@ -6253,6 +6256,14 @@
|
|
|
6253
6256
|
ctx[14]);
|
|
6254
6257
|
}
|
|
6255
6258
|
|
|
6259
|
+
if (dirty[0] &
|
|
6260
|
+
/*name*/
|
|
6261
|
+
1) {
|
|
6262
|
+
set_custom_element_data(goa_input, "name",
|
|
6263
|
+
/*name*/
|
|
6264
|
+
ctx[0]);
|
|
6265
|
+
}
|
|
6266
|
+
|
|
6256
6267
|
if (dirty[0] &
|
|
6257
6268
|
/*_options, _values, _highlightedIndex, onSelect*/
|
|
6258
6269
|
67186688) {
|
|
@@ -6479,7 +6490,7 @@
|
|
|
6479
6490
|
}
|
|
6480
6491
|
|
|
6481
6492
|
};
|
|
6482
|
-
} // (
|
|
6493
|
+
} // (288:6) {#each _options as option, index (index)}
|
|
6483
6494
|
|
|
6484
6495
|
|
|
6485
6496
|
function create_each_block_1(key_1, ctx) {
|
|
@@ -11114,7 +11125,7 @@
|
|
|
11114
11125
|
class Input extends SvelteElement {
|
|
11115
11126
|
constructor(options) {
|
|
11116
11127
|
super();
|
|
11117
|
-
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
|
|
11128
|
+
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>')
|
|
11118
11129
|
center center no-repeat}</style>`;
|
|
11119
11130
|
init(this, {
|
|
11120
11131
|
target: this.shadowRoot,
|
|
@@ -15194,23 +15205,28 @@
|
|
|
15194
15205
|
<tbody><tr><td></td></tr></tbody>
|
|
15195
15206
|
<tfoot><tr><td></td></tr></tfoot>`;
|
|
15196
15207
|
this.c = noop;
|
|
15208
|
+
attr(table, "class",
|
|
15209
|
+
/*variant*/
|
|
15210
|
+
ctx[1]);
|
|
15197
15211
|
attr(table, "style", table_style_value = `
|
|
15198
|
-
|
|
15212
|
+
${
|
|
15199
15213
|
/*width*/
|
|
15200
|
-
ctx[0]
|
|
15214
|
+
ctx[0] ? `width: ${
|
|
15215
|
+
/*width*/
|
|
15216
|
+
ctx[0]};` : ``}
|
|
15201
15217
|
${calculateMargin(
|
|
15202
15218
|
/*mt*/
|
|
15203
|
-
ctx[1],
|
|
15204
|
-
/*mr*/
|
|
15205
15219
|
ctx[2],
|
|
15206
|
-
/*
|
|
15220
|
+
/*mr*/
|
|
15207
15221
|
ctx[3],
|
|
15222
|
+
/*mb*/
|
|
15223
|
+
ctx[4],
|
|
15208
15224
|
/*ml*/
|
|
15209
|
-
ctx[
|
|
15225
|
+
ctx[5])}
|
|
15210
15226
|
`);
|
|
15211
15227
|
toggle_class(table, "sticky",
|
|
15212
15228
|
/*_stickyHeader*/
|
|
15213
|
-
ctx[
|
|
15229
|
+
ctx[7]);
|
|
15214
15230
|
},
|
|
15215
15231
|
|
|
15216
15232
|
m(target, anchor) {
|
|
@@ -15220,35 +15236,45 @@
|
|
|
15220
15236
|
append(table, template);
|
|
15221
15237
|
/*table_binding*/
|
|
15222
15238
|
|
|
15223
|
-
ctx[
|
|
15239
|
+
ctx[9](table);
|
|
15224
15240
|
},
|
|
15225
15241
|
|
|
15226
15242
|
p(ctx, [dirty]) {
|
|
15243
|
+
if (dirty &
|
|
15244
|
+
/*variant*/
|
|
15245
|
+
2) {
|
|
15246
|
+
attr(table, "class",
|
|
15247
|
+
/*variant*/
|
|
15248
|
+
ctx[1]);
|
|
15249
|
+
}
|
|
15250
|
+
|
|
15227
15251
|
if (dirty &
|
|
15228
15252
|
/*width, mt, mr, mb, ml*/
|
|
15229
|
-
|
|
15230
|
-
|
|
15253
|
+
61 && table_style_value !== (table_style_value = `
|
|
15254
|
+
${
|
|
15255
|
+
/*width*/
|
|
15256
|
+
ctx[0] ? `width: ${
|
|
15231
15257
|
/*width*/
|
|
15232
|
-
ctx[0]}
|
|
15258
|
+
ctx[0]};` : ``}
|
|
15233
15259
|
${calculateMargin(
|
|
15234
15260
|
/*mt*/
|
|
15235
|
-
ctx[1],
|
|
15236
|
-
/*mr*/
|
|
15237
15261
|
ctx[2],
|
|
15238
|
-
/*
|
|
15262
|
+
/*mr*/
|
|
15239
15263
|
ctx[3],
|
|
15264
|
+
/*mb*/
|
|
15265
|
+
ctx[4],
|
|
15240
15266
|
/*ml*/
|
|
15241
|
-
ctx[
|
|
15267
|
+
ctx[5])}
|
|
15242
15268
|
`)) {
|
|
15243
15269
|
attr(table, "style", table_style_value);
|
|
15244
15270
|
}
|
|
15245
15271
|
|
|
15246
15272
|
if (dirty &
|
|
15247
|
-
/*_stickyHeader*/
|
|
15248
|
-
|
|
15273
|
+
/*variant, _stickyHeader*/
|
|
15274
|
+
130) {
|
|
15249
15275
|
toggle_class(table, "sticky",
|
|
15250
15276
|
/*_stickyHeader*/
|
|
15251
|
-
ctx[
|
|
15277
|
+
ctx[7]);
|
|
15252
15278
|
}
|
|
15253
15279
|
},
|
|
15254
15280
|
|
|
@@ -15259,7 +15285,7 @@
|
|
|
15259
15285
|
if (detaching) detach(table);
|
|
15260
15286
|
/*table_binding*/
|
|
15261
15287
|
|
|
15262
|
-
ctx[
|
|
15288
|
+
ctx[9](null);
|
|
15263
15289
|
}
|
|
15264
15290
|
|
|
15265
15291
|
};
|
|
@@ -15268,12 +15294,16 @@
|
|
|
15268
15294
|
function instance$2($$self, $$props, $$invalidate) {
|
|
15269
15295
|
let _stickyHeader;
|
|
15270
15296
|
|
|
15297
|
+
const [Variants, validateVariant] = typeValidator("Table variant", ["normal", "relaxed"], true);
|
|
15271
15298
|
let {
|
|
15272
15299
|
width = ""
|
|
15273
15300
|
} = $$props;
|
|
15274
15301
|
let {
|
|
15275
15302
|
stickyheader = "false"
|
|
15276
15303
|
} = $$props;
|
|
15304
|
+
let {
|
|
15305
|
+
variant = "normal"
|
|
15306
|
+
} = $$props;
|
|
15277
15307
|
let {
|
|
15278
15308
|
mt = null
|
|
15279
15309
|
} = $$props;
|
|
@@ -15290,6 +15320,8 @@
|
|
|
15290
15320
|
let _rootEl;
|
|
15291
15321
|
|
|
15292
15322
|
onMount(() => {
|
|
15323
|
+
validateVariant(variant);
|
|
15324
|
+
|
|
15293
15325
|
const slot = _rootEl.querySelector("slot");
|
|
15294
15326
|
|
|
15295
15327
|
if (slot) {
|
|
@@ -15305,45 +15337,47 @@
|
|
|
15305
15337
|
function table_binding($$value) {
|
|
15306
15338
|
binding_callbacks[$$value ? 'unshift' : 'push'](() => {
|
|
15307
15339
|
_rootEl = $$value;
|
|
15308
|
-
$$invalidate(
|
|
15340
|
+
$$invalidate(6, _rootEl);
|
|
15309
15341
|
});
|
|
15310
15342
|
}
|
|
15311
15343
|
|
|
15312
15344
|
$$self.$$set = $$props => {
|
|
15313
15345
|
if ('width' in $$props) $$invalidate(0, width = $$props.width);
|
|
15314
|
-
if ('stickyheader' in $$props) $$invalidate(
|
|
15315
|
-
if ('
|
|
15316
|
-
if ('
|
|
15317
|
-
if ('
|
|
15318
|
-
if ('
|
|
15346
|
+
if ('stickyheader' in $$props) $$invalidate(8, stickyheader = $$props.stickyheader);
|
|
15347
|
+
if ('variant' in $$props) $$invalidate(1, variant = $$props.variant);
|
|
15348
|
+
if ('mt' in $$props) $$invalidate(2, mt = $$props.mt);
|
|
15349
|
+
if ('mr' in $$props) $$invalidate(3, mr = $$props.mr);
|
|
15350
|
+
if ('mb' in $$props) $$invalidate(4, mb = $$props.mb);
|
|
15351
|
+
if ('ml' in $$props) $$invalidate(5, ml = $$props.ml);
|
|
15319
15352
|
};
|
|
15320
15353
|
|
|
15321
15354
|
$$self.$$.update = () => {
|
|
15322
15355
|
if ($$self.$$.dirty &
|
|
15323
15356
|
/*stickyheader*/
|
|
15324
|
-
|
|
15325
|
-
$$invalidate(
|
|
15357
|
+
256) {
|
|
15358
|
+
$$invalidate(7, _stickyHeader = toBoolean(stickyheader));
|
|
15326
15359
|
}
|
|
15327
15360
|
};
|
|
15328
15361
|
|
|
15329
|
-
return [width, mt, mr, mb, ml, _rootEl, _stickyHeader, stickyheader, table_binding];
|
|
15362
|
+
return [width, variant, mt, mr, mb, ml, _rootEl, _stickyHeader, stickyheader, table_binding];
|
|
15330
15363
|
}
|
|
15331
15364
|
|
|
15332
15365
|
class Table extends SvelteElement {
|
|
15333
15366
|
constructor(options) {
|
|
15334
15367
|
super();
|
|
15335
|
-
this.shadowRoot.innerHTML = `<style>table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{padding:1rem
|
|
15368
|
+
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>`;
|
|
15336
15369
|
init(this, {
|
|
15337
15370
|
target: this.shadowRoot,
|
|
15338
15371
|
props: attribute_to_object(this.attributes),
|
|
15339
15372
|
customElement: true
|
|
15340
15373
|
}, instance$2, create_fragment$4, safe_not_equal, {
|
|
15341
15374
|
width: 0,
|
|
15342
|
-
stickyheader:
|
|
15343
|
-
|
|
15344
|
-
|
|
15345
|
-
|
|
15346
|
-
|
|
15375
|
+
stickyheader: 8,
|
|
15376
|
+
variant: 1,
|
|
15377
|
+
mt: 2,
|
|
15378
|
+
mr: 3,
|
|
15379
|
+
mb: 4,
|
|
15380
|
+
ml: 5
|
|
15347
15381
|
}, null);
|
|
15348
15382
|
|
|
15349
15383
|
if (options) {
|
|
@@ -15359,7 +15393,7 @@
|
|
|
15359
15393
|
}
|
|
15360
15394
|
|
|
15361
15395
|
static get observedAttributes() {
|
|
15362
|
-
return ["width", "stickyheader", "mt", "mr", "mb", "ml"];
|
|
15396
|
+
return ["width", "stickyheader", "variant", "mt", "mr", "mb", "ml"];
|
|
15363
15397
|
}
|
|
15364
15398
|
|
|
15365
15399
|
get width() {
|
|
@@ -15374,7 +15408,7 @@
|
|
|
15374
15408
|
}
|
|
15375
15409
|
|
|
15376
15410
|
get stickyheader() {
|
|
15377
|
-
return this.$$.ctx[
|
|
15411
|
+
return this.$$.ctx[8];
|
|
15378
15412
|
}
|
|
15379
15413
|
|
|
15380
15414
|
set stickyheader(stickyheader) {
|
|
@@ -15384,10 +15418,21 @@
|
|
|
15384
15418
|
flush();
|
|
15385
15419
|
}
|
|
15386
15420
|
|
|
15387
|
-
get
|
|
15421
|
+
get variant() {
|
|
15388
15422
|
return this.$$.ctx[1];
|
|
15389
15423
|
}
|
|
15390
15424
|
|
|
15425
|
+
set variant(variant) {
|
|
15426
|
+
this.$$set({
|
|
15427
|
+
variant
|
|
15428
|
+
});
|
|
15429
|
+
flush();
|
|
15430
|
+
}
|
|
15431
|
+
|
|
15432
|
+
get mt() {
|
|
15433
|
+
return this.$$.ctx[2];
|
|
15434
|
+
}
|
|
15435
|
+
|
|
15391
15436
|
set mt(mt) {
|
|
15392
15437
|
this.$$set({
|
|
15393
15438
|
mt
|
|
@@ -15396,7 +15441,7 @@
|
|
|
15396
15441
|
}
|
|
15397
15442
|
|
|
15398
15443
|
get mr() {
|
|
15399
|
-
return this.$$.ctx[
|
|
15444
|
+
return this.$$.ctx[3];
|
|
15400
15445
|
}
|
|
15401
15446
|
|
|
15402
15447
|
set mr(mr) {
|
|
@@ -15407,7 +15452,7 @@
|
|
|
15407
15452
|
}
|
|
15408
15453
|
|
|
15409
15454
|
get mb() {
|
|
15410
|
-
return this.$$.ctx[
|
|
15455
|
+
return this.$$.ctx[4];
|
|
15411
15456
|
}
|
|
15412
15457
|
|
|
15413
15458
|
set mb(mb) {
|
|
@@ -15418,7 +15463,7 @@
|
|
|
15418
15463
|
}
|
|
15419
15464
|
|
|
15420
15465
|
get ml() {
|
|
15421
|
-
return this.$$.ctx[
|
|
15466
|
+
return this.$$.ctx[5];
|
|
15422
15467
|
}
|
|
15423
15468
|
|
|
15424
15469
|
set ml(ml) {
|
|
@@ -17323,7 +17368,8 @@
|
|
|
17323
17368
|
function GoATable(props) {
|
|
17324
17369
|
return jsxRuntime.jsx("goa-table", __assign({
|
|
17325
17370
|
width: props.width,
|
|
17326
|
-
stickyheader: false
|
|
17371
|
+
stickyheader: false,
|
|
17372
|
+
variant: props.variant
|
|
17327
17373
|
}, {
|
|
17328
17374
|
children: jsxRuntime.jsx("template", {
|
|
17329
17375
|
children: jsxRuntime.jsx("table", {
|