@abgov/web-components 1.0.0-alpha.123 → 1.0.0-alpha.124
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 +104 -155
- package/web-components.umd.js +28 -26
package/package.json
CHANGED
package/web-components.es.js
CHANGED
|
@@ -1150,6 +1150,17 @@ function toBoolean(value) {
|
|
|
1150
1150
|
function fromBoolean(value) {
|
|
1151
1151
|
return value ? "true" : "false";
|
|
1152
1152
|
}
|
|
1153
|
+
function typeValidator(message, values, required = false) {
|
|
1154
|
+
const validator = (value) => {
|
|
1155
|
+
if (!required && !value) {
|
|
1156
|
+
return;
|
|
1157
|
+
}
|
|
1158
|
+
if (!values.includes(value)) {
|
|
1159
|
+
console.error(`[${value}] is an invalid ${message.toLowerCase()}`);
|
|
1160
|
+
}
|
|
1161
|
+
};
|
|
1162
|
+
return [values, validator];
|
|
1163
|
+
}
|
|
1153
1164
|
|
|
1154
1165
|
/* libs/web-components/src/components/badge/Badge.svelte generated by Svelte v3.51.0 */
|
|
1155
1166
|
|
|
@@ -1428,7 +1439,7 @@ function create_fragment$D(ctx) {
|
|
|
1428
1439
|
slot = element("slot");
|
|
1429
1440
|
this.c = noop;
|
|
1430
1441
|
set_style(div, "--alignment", /*_alignment*/ ctx[1]);
|
|
1431
|
-
set_style(div, "--gap-size", /*gap*/ ctx[0] ===
|
|
1442
|
+
set_style(div, "--gap-size", /*gap*/ ctx[0] === 'relaxed' ? '1rem' : '0.75rem');
|
|
1432
1443
|
},
|
|
1433
1444
|
m(target, anchor) {
|
|
1434
1445
|
insert(target, div, anchor);
|
|
@@ -1440,7 +1451,7 @@ function create_fragment$D(ctx) {
|
|
|
1440
1451
|
}
|
|
1441
1452
|
|
|
1442
1453
|
if (dirty & /*gap*/ 1) {
|
|
1443
|
-
set_style(div, "--gap-size", /*gap*/ ctx[0] ===
|
|
1454
|
+
set_style(div, "--gap-size", /*gap*/ ctx[0] === 'relaxed' ? '1rem' : '0.75rem');
|
|
1444
1455
|
}
|
|
1445
1456
|
},
|
|
1446
1457
|
i: noop,
|
|
@@ -1453,28 +1464,14 @@ function create_fragment$D(ctx) {
|
|
|
1453
1464
|
|
|
1454
1465
|
function instance$y($$self, $$props, $$invalidate) {
|
|
1455
1466
|
let _alignment;
|
|
1456
|
-
let { alignment } = $$props;
|
|
1467
|
+
let { alignment = "start" } = $$props;
|
|
1457
1468
|
let { gap = "relaxed" } = $$props;
|
|
1458
|
-
const BUTTON_ALIGNMENTS = ["start", "end", "center"];
|
|
1459
|
-
const
|
|
1460
|
-
|
|
1461
|
-
// type check functions
|
|
1462
|
-
function isButtonAlignment(value) {
|
|
1463
|
-
return BUTTON_ALIGNMENTS.includes(value);
|
|
1464
|
-
}
|
|
1465
|
-
|
|
1466
|
-
function isGap(value) {
|
|
1467
|
-
return GAP.includes(value);
|
|
1468
|
-
}
|
|
1469
|
+
const [BUTTON_ALIGNMENTS, validateAlignment] = typeValidator("alignment", ["start", "end", "center"]);
|
|
1470
|
+
const [GAPS, validateGap] = typeValidator("gap", ["relaxed", "compact"]);
|
|
1469
1471
|
|
|
1470
1472
|
onMount(() => {
|
|
1471
|
-
|
|
1472
|
-
|
|
1473
|
-
}
|
|
1474
|
-
|
|
1475
|
-
if (!isGap(gap)) {
|
|
1476
|
-
console.error("Invalid button group gap");
|
|
1477
|
-
}
|
|
1473
|
+
validateAlignment(alignment);
|
|
1474
|
+
validateGap(gap);
|
|
1478
1475
|
});
|
|
1479
1476
|
|
|
1480
1477
|
$$self.$$set = $$props => {
|
|
@@ -1484,9 +1481,11 @@ function instance$y($$self, $$props, $$invalidate) {
|
|
|
1484
1481
|
|
|
1485
1482
|
$$self.$$.update = () => {
|
|
1486
1483
|
if ($$self.$$.dirty & /*alignment*/ 4) {
|
|
1487
|
-
$$invalidate(1, _alignment =
|
|
1488
|
-
|
|
1489
|
-
|
|
1484
|
+
$$invalidate(1, _alignment = ({
|
|
1485
|
+
start: "flex-start",
|
|
1486
|
+
end: "flex-end",
|
|
1487
|
+
center: "center"
|
|
1488
|
+
})[alignment]);
|
|
1490
1489
|
}
|
|
1491
1490
|
};
|
|
1492
1491
|
|
|
@@ -1496,7 +1495,7 @@ function instance$y($$self, $$props, $$invalidate) {
|
|
|
1496
1495
|
class ButtonGroup extends SvelteElement {
|
|
1497
1496
|
constructor(options) {
|
|
1498
1497
|
super();
|
|
1499
|
-
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}div{display:flex;flex-direction:row;justify-content:var(--alignment);flex-wrap:wrap;gap:var(--gap-size);padding:3px 0}</style>`;
|
|
1498
|
+
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}div{display:flex;flex-direction:row;justify-content:var(--alignment);align-items:center;flex-wrap:wrap;gap:var(--gap-size);padding:3px 0}</style>`;
|
|
1500
1499
|
|
|
1501
1500
|
init(
|
|
1502
1501
|
this,
|
|
@@ -1615,7 +1614,7 @@ function create_else_block$1(ctx) {
|
|
|
1615
1614
|
};
|
|
1616
1615
|
}
|
|
1617
1616
|
|
|
1618
|
-
// (
|
|
1617
|
+
// (38:2) {#if type === "start"}
|
|
1619
1618
|
function create_if_block$g(ctx) {
|
|
1620
1619
|
let slot;
|
|
1621
1620
|
let t;
|
|
@@ -1645,7 +1644,7 @@ function create_if_block$g(ctx) {
|
|
|
1645
1644
|
};
|
|
1646
1645
|
}
|
|
1647
1646
|
|
|
1648
|
-
// (
|
|
1647
|
+
// (42:4) {#if leadingicon}
|
|
1649
1648
|
function create_if_block_2$6(ctx) {
|
|
1650
1649
|
let goa_icon;
|
|
1651
1650
|
|
|
@@ -1674,7 +1673,7 @@ function create_if_block_2$6(ctx) {
|
|
|
1674
1673
|
};
|
|
1675
1674
|
}
|
|
1676
1675
|
|
|
1677
|
-
// (
|
|
1676
|
+
// (46:4) {#if trailingicon}
|
|
1678
1677
|
function create_if_block_1$9(ctx) {
|
|
1679
1678
|
let goa_icon;
|
|
1680
1679
|
|
|
@@ -1789,23 +1788,9 @@ function clickHandler(e) {
|
|
|
1789
1788
|
function instance$x($$self, $$props, $$invalidate) {
|
|
1790
1789
|
let isDisabled;
|
|
1791
1790
|
let isButtonDark;
|
|
1792
|
-
const
|
|
1793
|
-
const
|
|
1794
|
-
const
|
|
1795
|
-
|
|
1796
|
-
// type check functions
|
|
1797
|
-
function isButtonType(value) {
|
|
1798
|
-
return BUTTON_TYPES.includes(value);
|
|
1799
|
-
}
|
|
1800
|
-
|
|
1801
|
-
function isSize(value) {
|
|
1802
|
-
return SIZES.includes(value);
|
|
1803
|
-
}
|
|
1804
|
-
|
|
1805
|
-
function isVariant(value) {
|
|
1806
|
-
return VARIANTS.includes(value);
|
|
1807
|
-
}
|
|
1808
|
-
|
|
1791
|
+
const [Types, validateType] = typeValidator("Button type", ["primary", "submit", "secondary", "tertiary", "start"], true);
|
|
1792
|
+
const [Sizes, validateSize] = typeValidator("Button size", ["normal", "compact"], true);
|
|
1793
|
+
const [Variants, validateVariant] = typeValidator("Button variant", ["normal", "destructive"], true);
|
|
1809
1794
|
let { type = "primary" } = $$props;
|
|
1810
1795
|
let { size = "normal" } = $$props;
|
|
1811
1796
|
let { variant = "normal" } = $$props;
|
|
@@ -1815,17 +1800,9 @@ function instance$x($$self, $$props, $$invalidate) {
|
|
|
1815
1800
|
let { testid = "" } = $$props;
|
|
1816
1801
|
|
|
1817
1802
|
onMount(() => {
|
|
1818
|
-
|
|
1819
|
-
|
|
1820
|
-
|
|
1821
|
-
|
|
1822
|
-
if (!isSize(size)) {
|
|
1823
|
-
console.error("Invalid button size");
|
|
1824
|
-
}
|
|
1825
|
-
|
|
1826
|
-
if (!isVariant(variant)) {
|
|
1827
|
-
console.error("Invalid button variant");
|
|
1828
|
-
}
|
|
1803
|
+
validateType(type);
|
|
1804
|
+
validateSize(size);
|
|
1805
|
+
validateVariant(variant);
|
|
1829
1806
|
});
|
|
1830
1807
|
|
|
1831
1808
|
$$self.$$set = $$props => {
|
|
@@ -1866,7 +1843,9 @@ class Button extends SvelteElement {
|
|
|
1866
1843
|
super();
|
|
1867
1844
|
|
|
1868
1845
|
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}@media(max-width: 480px){:host{width:100%}button{width:100%}}button{display:inline-flex;box-sizing:border-box;border-radius:0.25rem;border:2px solid var(--goa-color-interactive);box-sizing:border-box;cursor:pointer;font-family:var(--font-family);font-size:var(--fs-lg);font-weight:400;height:var(--button-height);letter-spacing:0.5px;line-height:100%;padding:0 0.75rem;gap:0.5rem;align-items:center;justify-content:center;transition:transform 0.1s ease-in-out, background-color 0.2s ease-in-out,
|
|
1869
|
-
border-color 0.2s ease-in-out}.text{padding-bottom:var(
|
|
1846
|
+
border-color 0.2s ease-in-out}.text{padding-bottom:var(
|
|
1847
|
+
--font-valign-fix
|
|
1848
|
+
)}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--fs-base)}button.start{height:var(--button-height-tall);font-weight:var(--fw-bold)}button.start,button.submit,button.primary{border:2px solid var(--goa-color-interactive);background-color:var(--goa-color-interactive);color:var(--goa-color-text-light)}button.start:hover,button.submit:hover,button.primary:hover{border-color:var(--goa-color-interactive--hover);background-color:var(--goa-color-interactive--hover)}button.start:focus,button.start:active,button.submit:focus,button.submit:active,button.primary:focus,button.primary:active{box-shadow:0 0 0 3px var(--goa-color-interactive--focus);border-color:var(--goa-color-interactive--active);background-color:var(--goa-color-interactive--active);outline:none}button.secondary{border:2px solid var(--goa-color-interactive);background-color:var(--color-white);color:var(--goa-color-interactive)}button.secondary:hover{border-color:var(--goa-color-interactive--hover);color:var(--goa-color-interactive--hover);background-color:var(--color-gray-100)}button.secondary:focus,button.secondary:active{border-color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);background-color:var(--color-gray-100);outline:none}button.tertiary{border:1px solid transparent;background-color:transparent;color:var(--goa-color-interactive);text-decoration:underline}button.tertiary:hover{border-color:var(--color-gray-100);color:var(--goa-color-interactive--hover);background-color:var(--color-gray-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--color-gray-100);background-color:var(--color-gray-100);color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.submit.destructive,.primary.destructive{color:var(--color-white);background-color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency)}.submit.destructive:hover,.primary.destructive:hover{background-color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.submit.destructive:focus,.primary.destructive:focus,.primary.destructive:active{background-color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.secondary.destructive{color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);background-color:var(--color-white)}.secondary.destructive:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background-color:var(--color-white)}.secondary.destructive:focus,.secondary.destructive:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background-color:var(--color-white)}.tertiary.destructive{color:var(--goa-color-status-emergency);border-color:var(--color-gray-200);background-color:var(--color-white)}.tertiary.destructive:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background-color:var(--color-white)}.tertiary.destructive:focus,.tertiary.destructive:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background-color:var(--color-white)}</style>`;
|
|
1870
1849
|
|
|
1871
1850
|
init(
|
|
1872
1851
|
this,
|
|
@@ -8249,9 +8228,9 @@ function create_if_block$4(ctx) {
|
|
|
8249
8228
|
let current;
|
|
8250
8229
|
let mounted;
|
|
8251
8230
|
let dispose;
|
|
8252
|
-
let if_block0 = /*
|
|
8253
|
-
let if_block1 = /*heading*/ ctx[
|
|
8254
|
-
let if_block2 = /*isClosable*/ ctx[
|
|
8231
|
+
let if_block0 = /*calloutvariant*/ ctx[3] !== "" && create_if_block_4(ctx);
|
|
8232
|
+
let if_block1 = /*heading*/ ctx[0] && create_if_block_3(ctx);
|
|
8233
|
+
let if_block2 = /*isClosable*/ ctx[4] && create_if_block_2$1(ctx);
|
|
8255
8234
|
|
|
8256
8235
|
function select_block_type(ctx, dirty) {
|
|
8257
8236
|
return create_if_block_1$2;
|
|
@@ -8291,8 +8270,8 @@ function create_if_block$4(ctx) {
|
|
|
8291
8270
|
attr(div4, "class", "modal-pane");
|
|
8292
8271
|
attr(div5, "data-testid", "modal");
|
|
8293
8272
|
attr(div5, "class", "modal");
|
|
8294
|
-
attr(div5, "style", div5_style_value = "" + ((/*width*/ ctx[
|
|
8295
|
-
set_custom_element_data(goa_focus_trap, "active", /*open*/ ctx[
|
|
8273
|
+
attr(div5, "style", div5_style_value = "" + ((/*width*/ ctx[2] && `--width: ${/*width*/ ctx[2]};`) + ";"));
|
|
8274
|
+
set_custom_element_data(goa_focus_trap, "active", /*open*/ ctx[1]);
|
|
8296
8275
|
},
|
|
8297
8276
|
m(target, anchor) {
|
|
8298
8277
|
insert(target, goa_focus_trap, anchor);
|
|
@@ -8317,8 +8296,8 @@ function create_if_block$4(ctx) {
|
|
|
8317
8296
|
|
|
8318
8297
|
if (!mounted) {
|
|
8319
8298
|
dispose = [
|
|
8320
|
-
listen(div0, "click", /*close*/ ctx[
|
|
8321
|
-
action_destroyer(noscroll_action = noscroll.call(null, div5, { enable: /*isOpen*/ ctx[
|
|
8299
|
+
listen(div0, "click", /*close*/ ctx[8]),
|
|
8300
|
+
action_destroyer(noscroll_action = noscroll.call(null, div5, { enable: /*isOpen*/ ctx[7] }))
|
|
8322
8301
|
];
|
|
8323
8302
|
|
|
8324
8303
|
mounted = true;
|
|
@@ -8327,7 +8306,7 @@ function create_if_block$4(ctx) {
|
|
|
8327
8306
|
p(new_ctx, dirty) {
|
|
8328
8307
|
ctx = new_ctx;
|
|
8329
8308
|
|
|
8330
|
-
if (/*
|
|
8309
|
+
if (/*calloutvariant*/ ctx[3] !== "") {
|
|
8331
8310
|
if (if_block0) {
|
|
8332
8311
|
if_block0.p(ctx, dirty);
|
|
8333
8312
|
} else {
|
|
@@ -8340,7 +8319,7 @@ function create_if_block$4(ctx) {
|
|
|
8340
8319
|
if_block0 = null;
|
|
8341
8320
|
}
|
|
8342
8321
|
|
|
8343
|
-
if (/*heading*/ ctx[
|
|
8322
|
+
if (/*heading*/ ctx[0]) {
|
|
8344
8323
|
if (if_block1) {
|
|
8345
8324
|
if_block1.p(ctx, dirty);
|
|
8346
8325
|
} else {
|
|
@@ -8353,7 +8332,7 @@ function create_if_block$4(ctx) {
|
|
|
8353
8332
|
if_block1 = null;
|
|
8354
8333
|
}
|
|
8355
8334
|
|
|
8356
|
-
if (/*isClosable*/ ctx[
|
|
8335
|
+
if (/*isClosable*/ ctx[4]) {
|
|
8357
8336
|
if (if_block2) {
|
|
8358
8337
|
if_block2.p(ctx, dirty);
|
|
8359
8338
|
} else {
|
|
@@ -8366,14 +8345,14 @@ function create_if_block$4(ctx) {
|
|
|
8366
8345
|
if_block2 = null;
|
|
8367
8346
|
}
|
|
8368
8347
|
|
|
8369
|
-
if (!current || dirty & /*width*/
|
|
8348
|
+
if (!current || dirty & /*width*/ 4 && div5_style_value !== (div5_style_value = "" + ((/*width*/ ctx[2] && `--width: ${/*width*/ ctx[2]};`) + ";"))) {
|
|
8370
8349
|
attr(div5, "style", div5_style_value);
|
|
8371
8350
|
}
|
|
8372
8351
|
|
|
8373
|
-
if (noscroll_action && is_function(noscroll_action.update) && dirty & /*isOpen*/
|
|
8352
|
+
if (noscroll_action && is_function(noscroll_action.update) && dirty & /*isOpen*/ 128) noscroll_action.update.call(null, { enable: /*isOpen*/ ctx[7] });
|
|
8374
8353
|
|
|
8375
|
-
if (!current || dirty & /*open*/
|
|
8376
|
-
set_custom_element_data(goa_focus_trap, "active", /*open*/ ctx[
|
|
8354
|
+
if (!current || dirty & /*open*/ 2) {
|
|
8355
|
+
set_custom_element_data(goa_focus_trap, "active", /*open*/ ctx[1]);
|
|
8377
8356
|
}
|
|
8378
8357
|
},
|
|
8379
8358
|
i(local) {
|
|
@@ -8383,7 +8362,7 @@ function create_if_block$4(ctx) {
|
|
|
8383
8362
|
if (div4_outro) div4_outro.end(1);
|
|
8384
8363
|
|
|
8385
8364
|
div4_intro = create_in_transition(div4, fly, {
|
|
8386
|
-
duration: /*_transitionTime*/ ctx[
|
|
8365
|
+
duration: /*_transitionTime*/ ctx[6],
|
|
8387
8366
|
y: 200
|
|
8388
8367
|
});
|
|
8389
8368
|
|
|
@@ -8392,7 +8371,7 @@ function create_if_block$4(ctx) {
|
|
|
8392
8371
|
|
|
8393
8372
|
add_render_callback(() => {
|
|
8394
8373
|
if (div5_outro) div5_outro.end(1);
|
|
8395
|
-
div5_intro = create_in_transition(div5, fade, { duration: /*_transitionTime*/ ctx[
|
|
8374
|
+
div5_intro = create_in_transition(div5, fade, { duration: /*_transitionTime*/ ctx[6] });
|
|
8396
8375
|
div5_intro.start();
|
|
8397
8376
|
});
|
|
8398
8377
|
|
|
@@ -8402,16 +8381,16 @@ function create_if_block$4(ctx) {
|
|
|
8402
8381
|
if (div4_intro) div4_intro.invalidate();
|
|
8403
8382
|
|
|
8404
8383
|
div4_outro = create_out_transition(div4, fly, {
|
|
8405
|
-
delay: /*_transitionTime*/ ctx[
|
|
8406
|
-
duration: /*_transitionTime*/ ctx[
|
|
8384
|
+
delay: /*_transitionTime*/ ctx[6],
|
|
8385
|
+
duration: /*_transitionTime*/ ctx[6],
|
|
8407
8386
|
y: -100
|
|
8408
8387
|
});
|
|
8409
8388
|
|
|
8410
8389
|
if (div5_intro) div5_intro.invalidate();
|
|
8411
8390
|
|
|
8412
8391
|
div5_outro = create_out_transition(div5, fade, {
|
|
8413
|
-
delay: /*_transitionTime*/ ctx[
|
|
8414
|
-
duration: /*_transitionTime*/ ctx[
|
|
8392
|
+
delay: /*_transitionTime*/ ctx[6],
|
|
8393
|
+
duration: /*_transitionTime*/ ctx[6]
|
|
8415
8394
|
});
|
|
8416
8395
|
|
|
8417
8396
|
current = false;
|
|
@@ -8430,7 +8409,7 @@ function create_if_block$4(ctx) {
|
|
|
8430
8409
|
};
|
|
8431
8410
|
}
|
|
8432
8411
|
|
|
8433
|
-
// (
|
|
8412
|
+
// (65:8) {#if calloutvariant !== ""}
|
|
8434
8413
|
function create_if_block_4(ctx) {
|
|
8435
8414
|
let div;
|
|
8436
8415
|
let goa_icon;
|
|
@@ -8441,30 +8420,30 @@ function create_if_block_4(ctx) {
|
|
|
8441
8420
|
c() {
|
|
8442
8421
|
div = element("div");
|
|
8443
8422
|
goa_icon = element("goa-icon");
|
|
8444
|
-
set_custom_element_data(goa_icon, "type", /*iconType*/ ctx[
|
|
8423
|
+
set_custom_element_data(goa_icon, "type", /*iconType*/ ctx[5]);
|
|
8445
8424
|
|
|
8446
|
-
set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value = /*calloutvariant*/ ctx[
|
|
8425
|
+
set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value = /*calloutvariant*/ ctx[3] === "important"
|
|
8447
8426
|
? "false"
|
|
8448
8427
|
: "true");
|
|
8449
8428
|
|
|
8450
|
-
attr(div, "class", div_class_value = "callout-bar " + /*calloutvariant*/ ctx[
|
|
8429
|
+
attr(div, "class", div_class_value = "callout-bar " + /*calloutvariant*/ ctx[3]);
|
|
8451
8430
|
},
|
|
8452
8431
|
m(target, anchor) {
|
|
8453
8432
|
insert(target, div, anchor);
|
|
8454
8433
|
append(div, goa_icon);
|
|
8455
8434
|
},
|
|
8456
8435
|
p(ctx, dirty) {
|
|
8457
|
-
if (dirty & /*iconType*/
|
|
8458
|
-
set_custom_element_data(goa_icon, "type", /*iconType*/ ctx[
|
|
8436
|
+
if (dirty & /*iconType*/ 32) {
|
|
8437
|
+
set_custom_element_data(goa_icon, "type", /*iconType*/ ctx[5]);
|
|
8459
8438
|
}
|
|
8460
8439
|
|
|
8461
|
-
if (dirty & /*calloutvariant*/
|
|
8440
|
+
if (dirty & /*calloutvariant*/ 8 && goa_icon_inverted_value !== (goa_icon_inverted_value = /*calloutvariant*/ ctx[3] === "important"
|
|
8462
8441
|
? "false"
|
|
8463
8442
|
: "true")) {
|
|
8464
8443
|
set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value);
|
|
8465
8444
|
}
|
|
8466
8445
|
|
|
8467
|
-
if (dirty & /*calloutvariant*/
|
|
8446
|
+
if (dirty & /*calloutvariant*/ 8 && div_class_value !== (div_class_value = "callout-bar " + /*calloutvariant*/ ctx[3])) {
|
|
8468
8447
|
attr(div, "class", div_class_value);
|
|
8469
8448
|
}
|
|
8470
8449
|
},
|
|
@@ -8474,7 +8453,7 @@ function create_if_block_4(ctx) {
|
|
|
8474
8453
|
};
|
|
8475
8454
|
}
|
|
8476
8455
|
|
|
8477
|
-
// (
|
|
8456
|
+
// (74:10) {#if heading}
|
|
8478
8457
|
function create_if_block_3(ctx) {
|
|
8479
8458
|
let div;
|
|
8480
8459
|
let t;
|
|
@@ -8482,7 +8461,7 @@ function create_if_block_3(ctx) {
|
|
|
8482
8461
|
return {
|
|
8483
8462
|
c() {
|
|
8484
8463
|
div = element("div");
|
|
8485
|
-
t = text(/*heading*/ ctx[
|
|
8464
|
+
t = text(/*heading*/ ctx[0]);
|
|
8486
8465
|
attr(div, "data-testid", "modal-title");
|
|
8487
8466
|
attr(div, "class", "modal-title");
|
|
8488
8467
|
},
|
|
@@ -8491,7 +8470,7 @@ function create_if_block_3(ctx) {
|
|
|
8491
8470
|
append(div, t);
|
|
8492
8471
|
},
|
|
8493
8472
|
p(ctx, dirty) {
|
|
8494
|
-
if (dirty & /*heading*/
|
|
8473
|
+
if (dirty & /*heading*/ 1) set_data(t, /*heading*/ ctx[0]);
|
|
8495
8474
|
},
|
|
8496
8475
|
d(detaching) {
|
|
8497
8476
|
if (detaching) detach(div);
|
|
@@ -8499,7 +8478,7 @@ function create_if_block_3(ctx) {
|
|
|
8499
8478
|
};
|
|
8500
8479
|
}
|
|
8501
8480
|
|
|
8502
|
-
// (
|
|
8481
|
+
// (77:10) {#if isClosable}
|
|
8503
8482
|
function create_if_block_2$1(ctx) {
|
|
8504
8483
|
let div;
|
|
8505
8484
|
let goa_icon_button;
|
|
@@ -8520,7 +8499,7 @@ function create_if_block_2$1(ctx) {
|
|
|
8520
8499
|
append(div, goa_icon_button);
|
|
8521
8500
|
|
|
8522
8501
|
if (!mounted) {
|
|
8523
|
-
dispose = listen(goa_icon_button, "click", /*close*/ ctx[
|
|
8502
|
+
dispose = listen(goa_icon_button, "click", /*close*/ ctx[8]);
|
|
8524
8503
|
mounted = true;
|
|
8525
8504
|
}
|
|
8526
8505
|
},
|
|
@@ -8533,7 +8512,7 @@ function create_if_block_2$1(ctx) {
|
|
|
8533
8512
|
};
|
|
8534
8513
|
}
|
|
8535
8514
|
|
|
8536
|
-
// (
|
|
8515
|
+
// (89:12) {#if isScrollable}
|
|
8537
8516
|
function create_if_block_1$2(ctx) {
|
|
8538
8517
|
let goa_scrollable;
|
|
8539
8518
|
|
|
@@ -8556,7 +8535,7 @@ function create_if_block_1$2(ctx) {
|
|
|
8556
8535
|
function create_fragment$d(ctx) {
|
|
8557
8536
|
let if_block_anchor;
|
|
8558
8537
|
let current;
|
|
8559
|
-
let if_block = /*isOpen*/ ctx[
|
|
8538
|
+
let if_block = /*isOpen*/ ctx[7] && create_if_block$4(ctx);
|
|
8560
8539
|
|
|
8561
8540
|
return {
|
|
8562
8541
|
c() {
|
|
@@ -8570,11 +8549,11 @@ function create_fragment$d(ctx) {
|
|
|
8570
8549
|
current = true;
|
|
8571
8550
|
},
|
|
8572
8551
|
p(ctx, [dirty]) {
|
|
8573
|
-
if (/*isOpen*/ ctx[
|
|
8552
|
+
if (/*isOpen*/ ctx[7]) {
|
|
8574
8553
|
if (if_block) {
|
|
8575
8554
|
if_block.p(ctx, dirty);
|
|
8576
8555
|
|
|
8577
|
-
if (dirty & /*isOpen*/
|
|
8556
|
+
if (dirty & /*isOpen*/ 128) {
|
|
8578
8557
|
transition_in(if_block, 1);
|
|
8579
8558
|
}
|
|
8580
8559
|
} else {
|
|
@@ -8614,20 +8593,13 @@ function instance$b($$self, $$props, $$invalidate) {
|
|
|
8614
8593
|
let isOpen;
|
|
8615
8594
|
let _transitionTime;
|
|
8616
8595
|
let iconType;
|
|
8617
|
-
const CALLOUT_VARIANT = ["emergency", "important", "information", "success", "event"];
|
|
8618
|
-
|
|
8619
|
-
// type check function
|
|
8620
|
-
function isCalloutVariantType(value) {
|
|
8621
|
-
return CALLOUT_VARIANT.includes(value);
|
|
8622
|
-
}
|
|
8623
|
-
|
|
8596
|
+
const [CALLOUT_VARIANT, validateCalloutVariant] = typeValidator("Callout variant", ["emergency", "important", "information", "success", "event"]);
|
|
8624
8597
|
let { heading = "" } = $$props;
|
|
8625
8598
|
let { closable = "false" } = $$props;
|
|
8626
8599
|
let { open = "false" } = $$props;
|
|
8627
8600
|
let { transition = "none" } = $$props;
|
|
8628
8601
|
let { width = "" } = $$props;
|
|
8629
|
-
let {
|
|
8630
|
-
let { calloutvariant } = $$props;
|
|
8602
|
+
let { calloutvariant = null } = $$props;
|
|
8631
8603
|
|
|
8632
8604
|
function close(e) {
|
|
8633
8605
|
if (!isClosable) {
|
|
@@ -8639,39 +8611,35 @@ function instance$b($$self, $$props, $$invalidate) {
|
|
|
8639
8611
|
}
|
|
8640
8612
|
|
|
8641
8613
|
onMount(() => {
|
|
8642
|
-
|
|
8643
|
-
$$invalidate(0, calloutvariant = "");
|
|
8644
|
-
throw "Invalid callout variant";
|
|
8645
|
-
}
|
|
8614
|
+
validateCalloutVariant(calloutvariant);
|
|
8646
8615
|
});
|
|
8647
8616
|
|
|
8648
8617
|
$$self.$$set = $$props => {
|
|
8649
|
-
if ('heading' in $$props) $$invalidate(
|
|
8650
|
-
if ('closable' in $$props) $$invalidate(
|
|
8651
|
-
if ('open' in $$props) $$invalidate(
|
|
8652
|
-
if ('transition' in $$props) $$invalidate(
|
|
8653
|
-
if ('width' in $$props) $$invalidate(
|
|
8654
|
-
if ('
|
|
8655
|
-
if ('calloutvariant' in $$props) $$invalidate(0, calloutvariant = $$props.calloutvariant);
|
|
8618
|
+
if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
|
|
8619
|
+
if ('closable' in $$props) $$invalidate(9, closable = $$props.closable);
|
|
8620
|
+
if ('open' in $$props) $$invalidate(1, open = $$props.open);
|
|
8621
|
+
if ('transition' in $$props) $$invalidate(10, transition = $$props.transition);
|
|
8622
|
+
if ('width' in $$props) $$invalidate(2, width = $$props.width);
|
|
8623
|
+
if ('calloutvariant' in $$props) $$invalidate(3, calloutvariant = $$props.calloutvariant);
|
|
8656
8624
|
};
|
|
8657
8625
|
|
|
8658
8626
|
$$self.$$.update = () => {
|
|
8659
|
-
if ($$self.$$.dirty & /*closable*/
|
|
8660
|
-
$$invalidate(
|
|
8627
|
+
if ($$self.$$.dirty & /*closable*/ 512) {
|
|
8628
|
+
$$invalidate(4, isClosable = toBoolean(closable));
|
|
8661
8629
|
}
|
|
8662
8630
|
|
|
8663
|
-
if ($$self.$$.dirty & /*open*/
|
|
8664
|
-
$$invalidate(
|
|
8631
|
+
if ($$self.$$.dirty & /*open*/ 2) {
|
|
8632
|
+
$$invalidate(7, isOpen = toBoolean(open));
|
|
8665
8633
|
}
|
|
8666
8634
|
|
|
8667
|
-
if ($$self.$$.dirty & /*transition*/
|
|
8668
|
-
$$invalidate(
|
|
8635
|
+
if ($$self.$$.dirty & /*transition*/ 1024) {
|
|
8636
|
+
$$invalidate(6, _transitionTime = transition === "none"
|
|
8669
8637
|
? 0
|
|
8670
8638
|
: transition === "slow" ? 400 : 200);
|
|
8671
8639
|
}
|
|
8672
8640
|
|
|
8673
|
-
if ($$self.$$.dirty & /*calloutvariant*/
|
|
8674
|
-
$$invalidate(
|
|
8641
|
+
if ($$self.$$.dirty & /*calloutvariant*/ 8) {
|
|
8642
|
+
$$invalidate(5, iconType = calloutvariant === "emergency"
|
|
8675
8643
|
? "warning"
|
|
8676
8644
|
: calloutvariant === "important"
|
|
8677
8645
|
? "alert-circle"
|
|
@@ -8684,11 +8652,10 @@ function instance$b($$self, $$props, $$invalidate) {
|
|
|
8684
8652
|
};
|
|
8685
8653
|
|
|
8686
8654
|
return [
|
|
8687
|
-
calloutvariant,
|
|
8688
8655
|
heading,
|
|
8689
8656
|
open,
|
|
8690
8657
|
width,
|
|
8691
|
-
|
|
8658
|
+
calloutvariant,
|
|
8692
8659
|
isClosable,
|
|
8693
8660
|
iconType,
|
|
8694
8661
|
_transitionTime,
|
|
@@ -8715,13 +8682,12 @@ class Modal extends SvelteElement {
|
|
|
8715
8682
|
create_fragment$d,
|
|
8716
8683
|
safe_not_equal,
|
|
8717
8684
|
{
|
|
8718
|
-
heading:
|
|
8719
|
-
closable:
|
|
8720
|
-
open:
|
|
8721
|
-
transition:
|
|
8722
|
-
width:
|
|
8723
|
-
|
|
8724
|
-
calloutvariant: 0
|
|
8685
|
+
heading: 0,
|
|
8686
|
+
closable: 9,
|
|
8687
|
+
open: 1,
|
|
8688
|
+
transition: 10,
|
|
8689
|
+
width: 2,
|
|
8690
|
+
calloutvariant: 3
|
|
8725
8691
|
},
|
|
8726
8692
|
null
|
|
8727
8693
|
);
|
|
@@ -8739,19 +8705,11 @@ class Modal extends SvelteElement {
|
|
|
8739
8705
|
}
|
|
8740
8706
|
|
|
8741
8707
|
static get observedAttributes() {
|
|
8742
|
-
return [
|
|
8743
|
-
"heading",
|
|
8744
|
-
"closable",
|
|
8745
|
-
"open",
|
|
8746
|
-
"transition",
|
|
8747
|
-
"width",
|
|
8748
|
-
"type",
|
|
8749
|
-
"calloutvariant"
|
|
8750
|
-
];
|
|
8708
|
+
return ["heading", "closable", "open", "transition", "width", "calloutvariant"];
|
|
8751
8709
|
}
|
|
8752
8710
|
|
|
8753
8711
|
get heading() {
|
|
8754
|
-
return this.$$.ctx[
|
|
8712
|
+
return this.$$.ctx[0];
|
|
8755
8713
|
}
|
|
8756
8714
|
|
|
8757
8715
|
set heading(heading) {
|
|
@@ -8760,7 +8718,7 @@ class Modal extends SvelteElement {
|
|
|
8760
8718
|
}
|
|
8761
8719
|
|
|
8762
8720
|
get closable() {
|
|
8763
|
-
return this.$$.ctx[
|
|
8721
|
+
return this.$$.ctx[9];
|
|
8764
8722
|
}
|
|
8765
8723
|
|
|
8766
8724
|
set closable(closable) {
|
|
@@ -8769,7 +8727,7 @@ class Modal extends SvelteElement {
|
|
|
8769
8727
|
}
|
|
8770
8728
|
|
|
8771
8729
|
get open() {
|
|
8772
|
-
return this.$$.ctx[
|
|
8730
|
+
return this.$$.ctx[1];
|
|
8773
8731
|
}
|
|
8774
8732
|
|
|
8775
8733
|
set open(open) {
|
|
@@ -8778,7 +8736,7 @@ class Modal extends SvelteElement {
|
|
|
8778
8736
|
}
|
|
8779
8737
|
|
|
8780
8738
|
get transition() {
|
|
8781
|
-
return this.$$.ctx[
|
|
8739
|
+
return this.$$.ctx[10];
|
|
8782
8740
|
}
|
|
8783
8741
|
|
|
8784
8742
|
set transition(transition) {
|
|
@@ -8787,7 +8745,7 @@ class Modal extends SvelteElement {
|
|
|
8787
8745
|
}
|
|
8788
8746
|
|
|
8789
8747
|
get width() {
|
|
8790
|
-
return this.$$.ctx[
|
|
8748
|
+
return this.$$.ctx[2];
|
|
8791
8749
|
}
|
|
8792
8750
|
|
|
8793
8751
|
set width(width) {
|
|
@@ -8795,17 +8753,8 @@ class Modal extends SvelteElement {
|
|
|
8795
8753
|
flush();
|
|
8796
8754
|
}
|
|
8797
8755
|
|
|
8798
|
-
get type() {
|
|
8799
|
-
return this.$$.ctx[4];
|
|
8800
|
-
}
|
|
8801
|
-
|
|
8802
|
-
set type(type) {
|
|
8803
|
-
this.$$set({ type });
|
|
8804
|
-
flush();
|
|
8805
|
-
}
|
|
8806
|
-
|
|
8807
8756
|
get calloutvariant() {
|
|
8808
|
-
return this.$$.ctx[
|
|
8757
|
+
return this.$$.ctx[3];
|
|
8809
8758
|
}
|
|
8810
8759
|
|
|
8811
8760
|
set calloutvariant(calloutvariant) {
|