@abgov/web-components 1.0.0 → 1.1.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 +285 -152
- package/web-components.umd.js +36 -34
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
|
|
|
@@ -1427,20 +1438,20 @@ function create_fragment$D(ctx) {
|
|
|
1427
1438
|
div = element("div");
|
|
1428
1439
|
slot = element("slot");
|
|
1429
1440
|
this.c = noop;
|
|
1430
|
-
set_style(div, "--alignment",
|
|
1431
|
-
set_style(div, "--gap-size", /*gap*/ ctx[0] ===
|
|
1441
|
+
set_style(div, "--alignment", /*_alignment*/ ctx[1]);
|
|
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);
|
|
1435
1446
|
append(div, slot);
|
|
1436
1447
|
},
|
|
1437
1448
|
p(ctx, [dirty]) {
|
|
1438
|
-
if (dirty & /*
|
|
1439
|
-
set_style(div, "--alignment",
|
|
1449
|
+
if (dirty & /*_alignment*/ 2) {
|
|
1450
|
+
set_style(div, "--alignment", /*_alignment*/ ctx[1]);
|
|
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,
|
|
@@ -1452,21 +1463,39 @@ function create_fragment$D(ctx) {
|
|
|
1452
1463
|
}
|
|
1453
1464
|
|
|
1454
1465
|
function instance$y($$self, $$props, $$invalidate) {
|
|
1455
|
-
let
|
|
1456
|
-
let { alignment } = $$props;
|
|
1466
|
+
let _alignment;
|
|
1467
|
+
let { alignment = "start" } = $$props;
|
|
1468
|
+
let { gap = "relaxed" } = $$props;
|
|
1469
|
+
const [BUTTON_ALIGNMENTS, validateAlignment] = typeValidator("alignment", ["start", "end", "center"]);
|
|
1470
|
+
const [GAPS, validateGap] = typeValidator("gap", ["relaxed", "compact"]);
|
|
1471
|
+
|
|
1472
|
+
onMount(() => {
|
|
1473
|
+
validateAlignment(alignment);
|
|
1474
|
+
validateGap(gap);
|
|
1475
|
+
});
|
|
1457
1476
|
|
|
1458
1477
|
$$self.$$set = $$props => {
|
|
1478
|
+
if ('alignment' in $$props) $$invalidate(2, alignment = $$props.alignment);
|
|
1459
1479
|
if ('gap' in $$props) $$invalidate(0, gap = $$props.gap);
|
|
1460
|
-
if ('alignment' in $$props) $$invalidate(1, alignment = $$props.alignment);
|
|
1461
1480
|
};
|
|
1462
1481
|
|
|
1463
|
-
|
|
1482
|
+
$$self.$$.update = () => {
|
|
1483
|
+
if ($$self.$$.dirty & /*alignment*/ 4) {
|
|
1484
|
+
$$invalidate(1, _alignment = ({
|
|
1485
|
+
start: "flex-start",
|
|
1486
|
+
end: "flex-end",
|
|
1487
|
+
center: "center"
|
|
1488
|
+
})[alignment]);
|
|
1489
|
+
}
|
|
1490
|
+
};
|
|
1491
|
+
|
|
1492
|
+
return [gap, _alignment, alignment];
|
|
1464
1493
|
}
|
|
1465
1494
|
|
|
1466
1495
|
class ButtonGroup extends SvelteElement {
|
|
1467
1496
|
constructor(options) {
|
|
1468
1497
|
super();
|
|
1469
|
-
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>`;
|
|
1470
1499
|
|
|
1471
1500
|
init(
|
|
1472
1501
|
this,
|
|
@@ -1478,7 +1507,7 @@ class ButtonGroup extends SvelteElement {
|
|
|
1478
1507
|
instance$y,
|
|
1479
1508
|
create_fragment$D,
|
|
1480
1509
|
safe_not_equal,
|
|
1481
|
-
{
|
|
1510
|
+
{ alignment: 2, gap: 0 },
|
|
1482
1511
|
null
|
|
1483
1512
|
);
|
|
1484
1513
|
|
|
@@ -1495,24 +1524,24 @@ class ButtonGroup extends SvelteElement {
|
|
|
1495
1524
|
}
|
|
1496
1525
|
|
|
1497
1526
|
static get observedAttributes() {
|
|
1498
|
-
return ["
|
|
1527
|
+
return ["alignment", "gap"];
|
|
1499
1528
|
}
|
|
1500
1529
|
|
|
1501
|
-
get
|
|
1502
|
-
return this.$$.ctx[
|
|
1530
|
+
get alignment() {
|
|
1531
|
+
return this.$$.ctx[2];
|
|
1503
1532
|
}
|
|
1504
1533
|
|
|
1505
|
-
set
|
|
1506
|
-
this.$$set({
|
|
1534
|
+
set alignment(alignment) {
|
|
1535
|
+
this.$$set({ alignment });
|
|
1507
1536
|
flush();
|
|
1508
1537
|
}
|
|
1509
1538
|
|
|
1510
|
-
get
|
|
1511
|
-
return this.$$.ctx[
|
|
1539
|
+
get gap() {
|
|
1540
|
+
return this.$$.ctx[0];
|
|
1512
1541
|
}
|
|
1513
1542
|
|
|
1514
|
-
set
|
|
1515
|
-
this.$$set({
|
|
1543
|
+
set gap(gap) {
|
|
1544
|
+
this.$$set({ gap });
|
|
1516
1545
|
flush();
|
|
1517
1546
|
}
|
|
1518
1547
|
}
|
|
@@ -1585,7 +1614,7 @@ function create_else_block$1(ctx) {
|
|
|
1585
1614
|
};
|
|
1586
1615
|
}
|
|
1587
1616
|
|
|
1588
|
-
// (
|
|
1617
|
+
// (38:2) {#if type === "start"}
|
|
1589
1618
|
function create_if_block$g(ctx) {
|
|
1590
1619
|
let slot;
|
|
1591
1620
|
let t;
|
|
@@ -1615,7 +1644,7 @@ function create_if_block$g(ctx) {
|
|
|
1615
1644
|
};
|
|
1616
1645
|
}
|
|
1617
1646
|
|
|
1618
|
-
// (
|
|
1647
|
+
// (42:4) {#if leadingicon}
|
|
1619
1648
|
function create_if_block_2$6(ctx) {
|
|
1620
1649
|
let goa_icon;
|
|
1621
1650
|
|
|
@@ -1644,7 +1673,7 @@ function create_if_block_2$6(ctx) {
|
|
|
1644
1673
|
};
|
|
1645
1674
|
}
|
|
1646
1675
|
|
|
1647
|
-
// (
|
|
1676
|
+
// (46:4) {#if trailingicon}
|
|
1648
1677
|
function create_if_block_1$9(ctx) {
|
|
1649
1678
|
let goa_icon;
|
|
1650
1679
|
|
|
@@ -1759,23 +1788,9 @@ function clickHandler(e) {
|
|
|
1759
1788
|
function instance$x($$self, $$props, $$invalidate) {
|
|
1760
1789
|
let isDisabled;
|
|
1761
1790
|
let isButtonDark;
|
|
1762
|
-
const
|
|
1763
|
-
const
|
|
1764
|
-
const
|
|
1765
|
-
|
|
1766
|
-
// type check functions
|
|
1767
|
-
function isButtonType(value) {
|
|
1768
|
-
return BUTTON_TYPES.includes(value);
|
|
1769
|
-
}
|
|
1770
|
-
|
|
1771
|
-
function isSize(value) {
|
|
1772
|
-
return SIZES.includes(value);
|
|
1773
|
-
}
|
|
1774
|
-
|
|
1775
|
-
function isVariant(value) {
|
|
1776
|
-
return VARIANTS.includes(value);
|
|
1777
|
-
}
|
|
1778
|
-
|
|
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);
|
|
1779
1794
|
let { type = "primary" } = $$props;
|
|
1780
1795
|
let { size = "normal" } = $$props;
|
|
1781
1796
|
let { variant = "normal" } = $$props;
|
|
@@ -1785,17 +1800,9 @@ function instance$x($$self, $$props, $$invalidate) {
|
|
|
1785
1800
|
let { testid = "" } = $$props;
|
|
1786
1801
|
|
|
1787
1802
|
onMount(() => {
|
|
1788
|
-
|
|
1789
|
-
|
|
1790
|
-
|
|
1791
|
-
|
|
1792
|
-
if (!isSize(size)) {
|
|
1793
|
-
console.error("Invalid button size");
|
|
1794
|
-
}
|
|
1795
|
-
|
|
1796
|
-
if (!isVariant(variant)) {
|
|
1797
|
-
console.error("Invalid button variant");
|
|
1798
|
-
}
|
|
1803
|
+
validateType(type);
|
|
1804
|
+
validateSize(size);
|
|
1805
|
+
validateVariant(variant);
|
|
1799
1806
|
});
|
|
1800
1807
|
|
|
1801
1808
|
$$self.$$set = $$props => {
|
|
@@ -1836,7 +1843,9 @@ class Button extends SvelteElement {
|
|
|
1836
1843
|
super();
|
|
1837
1844
|
|
|
1838
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,
|
|
1839
|
-
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>`;
|
|
1840
1849
|
|
|
1841
1850
|
init(
|
|
1842
1851
|
this,
|
|
@@ -3424,7 +3433,7 @@ function create_if_block_3$4(ctx) {
|
|
|
3424
3433
|
let goa_spinner;
|
|
3425
3434
|
let t;
|
|
3426
3435
|
let div_class_value;
|
|
3427
|
-
let if_block = /*message*/ ctx[0] && create_if_block_4$
|
|
3436
|
+
let if_block = /*message*/ ctx[0] && create_if_block_4$2(ctx);
|
|
3428
3437
|
|
|
3429
3438
|
return {
|
|
3430
3439
|
c() {
|
|
@@ -3456,7 +3465,7 @@ function create_if_block_3$4(ctx) {
|
|
|
3456
3465
|
if (if_block) {
|
|
3457
3466
|
if_block.p(ctx, dirty);
|
|
3458
3467
|
} else {
|
|
3459
|
-
if_block = create_if_block_4$
|
|
3468
|
+
if_block = create_if_block_4$2(ctx);
|
|
3460
3469
|
if_block.c();
|
|
3461
3470
|
if_block.m(div, null);
|
|
3462
3471
|
}
|
|
@@ -3567,7 +3576,7 @@ function create_if_block_1$6(ctx) {
|
|
|
3567
3576
|
}
|
|
3568
3577
|
|
|
3569
3578
|
// (41:6) {#if message}
|
|
3570
|
-
function create_if_block_4$
|
|
3579
|
+
function create_if_block_4$2(ctx) {
|
|
3571
3580
|
let div;
|
|
3572
3581
|
let t;
|
|
3573
3582
|
|
|
@@ -6512,7 +6521,7 @@ function create_fragment$h(ctx) {
|
|
|
6512
6521
|
set_custom_element_data(goa_icon, "size", /*size*/ ctx[1]);
|
|
6513
6522
|
set_custom_element_data(goa_icon, "theme", /*theme*/ ctx[2]);
|
|
6514
6523
|
set_custom_element_data(goa_icon, "inverted", /*isInverted*/ ctx[5]);
|
|
6515
|
-
set_style(button, "--size", /*
|
|
6524
|
+
set_style(button, "--pading-size", /*_paddingSize*/ ctx[6]);
|
|
6516
6525
|
attr(button, "title", /*title*/ ctx[3]);
|
|
6517
6526
|
button.disabled = /*isDisabled*/ ctx[7];
|
|
6518
6527
|
attr(button, "class", /*css*/ ctx[8]);
|
|
@@ -6548,8 +6557,8 @@ function create_fragment$h(ctx) {
|
|
|
6548
6557
|
set_custom_element_data(goa_icon, "inverted", /*isInverted*/ ctx[5]);
|
|
6549
6558
|
}
|
|
6550
6559
|
|
|
6551
|
-
if (dirty & /*
|
|
6552
|
-
set_style(button, "--size", /*
|
|
6560
|
+
if (dirty & /*_paddingSize*/ 64) {
|
|
6561
|
+
set_style(button, "--pading-size", /*_paddingSize*/ ctx[6]);
|
|
6553
6562
|
}
|
|
6554
6563
|
|
|
6555
6564
|
if (dirty & /*title*/ 8) {
|
|
@@ -6586,7 +6595,7 @@ function instance$f($$self, $$props, $$invalidate) {
|
|
|
6586
6595
|
let css;
|
|
6587
6596
|
let isDisabled;
|
|
6588
6597
|
let isInverted;
|
|
6589
|
-
let
|
|
6598
|
+
let _paddingSize;
|
|
6590
6599
|
let { icon } = $$props;
|
|
6591
6600
|
let { size = "medium" } = $$props;
|
|
6592
6601
|
let { theme = "outline" } = $$props;
|
|
@@ -6622,10 +6631,10 @@ function instance$f($$self, $$props, $$invalidate) {
|
|
|
6622
6631
|
}
|
|
6623
6632
|
|
|
6624
6633
|
if ($$self.$$.dirty & /*size*/ 2) {
|
|
6625
|
-
$$invalidate(6,
|
|
6626
|
-
small: "
|
|
6627
|
-
medium: "
|
|
6628
|
-
large: "
|
|
6634
|
+
$$invalidate(6, _paddingSize = ({
|
|
6635
|
+
small: "0.25rem",
|
|
6636
|
+
medium: "0.25rem",
|
|
6637
|
+
large: "0.5rem"
|
|
6629
6638
|
})[size]);
|
|
6630
6639
|
}
|
|
6631
6640
|
};
|
|
@@ -6637,7 +6646,7 @@ function instance$f($$self, $$props, $$invalidate) {
|
|
|
6637
6646
|
title,
|
|
6638
6647
|
testId,
|
|
6639
6648
|
isInverted,
|
|
6640
|
-
|
|
6649
|
+
_paddingSize,
|
|
6641
6650
|
isDisabled,
|
|
6642
6651
|
css,
|
|
6643
6652
|
variant,
|
|
@@ -6649,7 +6658,7 @@ function instance$f($$self, $$props, $$invalidate) {
|
|
|
6649
6658
|
class IconButton extends SvelteElement {
|
|
6650
6659
|
constructor(options) {
|
|
6651
6660
|
super();
|
|
6652
|
-
this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--font-family)}button,button *{box-sizing:border-box}button{display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;background:transparent;cursor:pointer;border:none;
|
|
6661
|
+
this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--font-family)}button,button *{box-sizing:border-box}button{display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;background:transparent;cursor:pointer;border:none;border-radius:0.5rem;padding:var(--pading-size)}.color,.dark{color:var(--goa-color-interactive);fill:var(--goa-color-interactive);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.dark:not(.inverted){color:unset}button:hover{background-color:var(--color-gray-100);border-color:var(--color-gray-100);color:var(--goa-color-interactive--hover);outline:none}button:focus,button:active{background-color:var(--color-gray-100);border-color:var(--goa-color-interactive--active);color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.color.inverted:hover{background-color:var(--goa-color-primary-dark)}button:disabled{pointer-events:none;opacity:0.5;transform:none;cursor:default}button:disabled:hover{background-color:transparent}button.dark:hover{background-color:rgba(0, 0, 0, 0.3)}button.dark:focus,button.dark:active{background-color:rgba(0, 0, 0, 0.3);box-shadow:0 0 0 3px var(--color-white)}</style>`;
|
|
6653
6662
|
|
|
6654
6663
|
init(
|
|
6655
6664
|
this,
|
|
@@ -7057,7 +7066,7 @@ customElements.define("goa-icon", Icon);
|
|
|
7057
7066
|
|
|
7058
7067
|
/* libs/web-components/src/components/input/Input.svelte generated by Svelte v3.51.0 */
|
|
7059
7068
|
|
|
7060
|
-
function create_if_block_4(ctx) {
|
|
7069
|
+
function create_if_block_4$1(ctx) {
|
|
7061
7070
|
let div;
|
|
7062
7071
|
let t;
|
|
7063
7072
|
|
|
@@ -7211,7 +7220,7 @@ function create_fragment$f(ctx) {
|
|
|
7211
7220
|
let div1_style_value;
|
|
7212
7221
|
let mounted;
|
|
7213
7222
|
let dispose;
|
|
7214
|
-
let if_block0 = /*prefix*/ ctx[14] && create_if_block_4(ctx);
|
|
7223
|
+
let if_block0 = /*prefix*/ ctx[14] && create_if_block_4$1(ctx);
|
|
7215
7224
|
let if_block1 = /*leadingicon*/ ctx[5] && create_if_block_3$2(ctx);
|
|
7216
7225
|
let if_block2 = /*trailingicon*/ ctx[6] && !/*handlesTrailingIconClick*/ ctx[20] && create_if_block_2$3(ctx);
|
|
7217
7226
|
let if_block3 = /*trailingicon*/ ctx[6] && /*handlesTrailingIconClick*/ ctx[20] && create_if_block_1$4(ctx);
|
|
@@ -7293,7 +7302,7 @@ function create_fragment$f(ctx) {
|
|
|
7293
7302
|
if (if_block0) {
|
|
7294
7303
|
if_block0.p(ctx, dirty);
|
|
7295
7304
|
} else {
|
|
7296
|
-
if_block0 = create_if_block_4(ctx);
|
|
7305
|
+
if_block0 = create_if_block_4$1(ctx);
|
|
7297
7306
|
if_block0.c();
|
|
7298
7307
|
if_block0.m(div0, t0);
|
|
7299
7308
|
}
|
|
@@ -8197,88 +8206,98 @@ customElements.define("goa-microsite-header", MicrositeHeader);
|
|
|
8197
8206
|
|
|
8198
8207
|
function create_if_block$4(ctx) {
|
|
8199
8208
|
let goa_focus_trap;
|
|
8200
|
-
let
|
|
8209
|
+
let div5;
|
|
8201
8210
|
let div0;
|
|
8202
8211
|
let t0;
|
|
8203
|
-
let
|
|
8212
|
+
let div4;
|
|
8204
8213
|
let t1;
|
|
8214
|
+
let div3;
|
|
8205
8215
|
let t2;
|
|
8206
|
-
let div1;
|
|
8207
8216
|
let t3;
|
|
8208
|
-
let
|
|
8217
|
+
let div1;
|
|
8209
8218
|
let t4;
|
|
8219
|
+
let slot0;
|
|
8220
|
+
let t5;
|
|
8210
8221
|
let div2;
|
|
8211
|
-
let div3_intro;
|
|
8212
|
-
let div3_outro;
|
|
8213
|
-
let div4_style_value;
|
|
8214
|
-
let noscroll_action;
|
|
8215
8222
|
let div4_intro;
|
|
8216
8223
|
let div4_outro;
|
|
8224
|
+
let div5_style_value;
|
|
8225
|
+
let noscroll_action;
|
|
8226
|
+
let div5_intro;
|
|
8227
|
+
let div5_outro;
|
|
8217
8228
|
let current;
|
|
8218
8229
|
let mounted;
|
|
8219
8230
|
let dispose;
|
|
8220
|
-
let if_block0 = /*
|
|
8221
|
-
let if_block1 = /*
|
|
8231
|
+
let if_block0 = /*calloutvariant*/ ctx[3] !== null && 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);
|
|
8222
8234
|
|
|
8223
8235
|
function select_block_type(ctx, dirty) {
|
|
8224
8236
|
return create_if_block_1$2;
|
|
8225
8237
|
}
|
|
8226
8238
|
|
|
8227
8239
|
let current_block_type = select_block_type();
|
|
8228
|
-
let
|
|
8240
|
+
let if_block3 = current_block_type(ctx);
|
|
8229
8241
|
|
|
8230
8242
|
return {
|
|
8231
8243
|
c() {
|
|
8232
8244
|
goa_focus_trap = element("goa-focus-trap");
|
|
8233
|
-
|
|
8245
|
+
div5 = element("div");
|
|
8234
8246
|
div0 = element("div");
|
|
8235
8247
|
t0 = space();
|
|
8236
|
-
|
|
8248
|
+
div4 = element("div");
|
|
8237
8249
|
if (if_block0) if_block0.c();
|
|
8238
8250
|
t1 = space();
|
|
8251
|
+
div3 = element("div");
|
|
8239
8252
|
if (if_block1) if_block1.c();
|
|
8240
8253
|
t2 = space();
|
|
8241
|
-
|
|
8242
|
-
if_block2.c();
|
|
8254
|
+
if (if_block2) if_block2.c();
|
|
8243
8255
|
t3 = space();
|
|
8244
|
-
|
|
8256
|
+
div1 = element("div");
|
|
8257
|
+
if_block3.c();
|
|
8245
8258
|
t4 = space();
|
|
8259
|
+
slot0 = element("slot");
|
|
8260
|
+
t5 = space();
|
|
8246
8261
|
div2 = element("div");
|
|
8247
8262
|
div2.innerHTML = `<slot name="actions"></slot>`;
|
|
8248
8263
|
attr(div0, "data-testid", "modal-overlay");
|
|
8249
8264
|
attr(div0, "class", "modal-overlay");
|
|
8250
8265
|
attr(div1, "data-testid", "modal-content");
|
|
8251
8266
|
attr(div1, "class", "modal-content");
|
|
8252
|
-
attr(div2, "data-testid", "modal-actions");
|
|
8253
8267
|
attr(div2, "class", "modal-actions");
|
|
8254
|
-
attr(
|
|
8255
|
-
attr(
|
|
8256
|
-
attr(div4, "class", "modal");
|
|
8257
|
-
attr(
|
|
8268
|
+
attr(div2, "data-testid", "modal-actions");
|
|
8269
|
+
attr(div3, "class", "content");
|
|
8270
|
+
attr(div4, "class", "modal-pane");
|
|
8271
|
+
attr(div5, "data-testid", "modal");
|
|
8272
|
+
attr(div5, "class", "modal");
|
|
8273
|
+
attr(div5, "style", div5_style_value = "" + ((/*width*/ ctx[2] && `--width: ${/*width*/ ctx[2]};`) + ";"));
|
|
8258
8274
|
set_custom_element_data(goa_focus_trap, "active", /*open*/ ctx[1]);
|
|
8259
8275
|
},
|
|
8260
8276
|
m(target, anchor) {
|
|
8261
8277
|
insert(target, goa_focus_trap, anchor);
|
|
8262
|
-
append(goa_focus_trap,
|
|
8263
|
-
append(
|
|
8264
|
-
append(
|
|
8278
|
+
append(goa_focus_trap, div5);
|
|
8279
|
+
append(div5, div0);
|
|
8280
|
+
append(div5, t0);
|
|
8281
|
+
append(div5, div4);
|
|
8282
|
+
if (if_block0) if_block0.m(div4, null);
|
|
8283
|
+
append(div4, t1);
|
|
8265
8284
|
append(div4, div3);
|
|
8266
|
-
if (if_block0) if_block0.m(div3, null);
|
|
8267
|
-
append(div3, t1);
|
|
8268
8285
|
if (if_block1) if_block1.m(div3, null);
|
|
8269
8286
|
append(div3, t2);
|
|
8287
|
+
if (if_block2) if_block2.m(div3, null);
|
|
8288
|
+
append(div3, t3);
|
|
8270
8289
|
append(div3, div1);
|
|
8271
|
-
|
|
8272
|
-
append(div1,
|
|
8290
|
+
if_block3.m(div1, null);
|
|
8291
|
+
append(div1, t4);
|
|
8273
8292
|
append(div1, slot0);
|
|
8274
|
-
append(div3,
|
|
8293
|
+
append(div3, t5);
|
|
8275
8294
|
append(div3, div2);
|
|
8276
8295
|
current = true;
|
|
8277
8296
|
|
|
8278
8297
|
if (!mounted) {
|
|
8279
8298
|
dispose = [
|
|
8280
|
-
listen(div0, "click", /*close*/ ctx[
|
|
8281
|
-
action_destroyer(noscroll_action = noscroll.call(null,
|
|
8299
|
+
listen(div0, "click", /*close*/ ctx[8]),
|
|
8300
|
+
action_destroyer(noscroll_action = noscroll.call(null, div5, { enable: /*isOpen*/ ctx[7] }))
|
|
8282
8301
|
];
|
|
8283
8302
|
|
|
8284
8303
|
mounted = true;
|
|
@@ -8287,24 +8306,24 @@ function create_if_block$4(ctx) {
|
|
|
8287
8306
|
p(new_ctx, dirty) {
|
|
8288
8307
|
ctx = new_ctx;
|
|
8289
8308
|
|
|
8290
|
-
if (/*
|
|
8309
|
+
if (/*calloutvariant*/ ctx[3] !== null) {
|
|
8291
8310
|
if (if_block0) {
|
|
8292
8311
|
if_block0.p(ctx, dirty);
|
|
8293
8312
|
} else {
|
|
8294
|
-
if_block0 =
|
|
8313
|
+
if_block0 = create_if_block_4(ctx);
|
|
8295
8314
|
if_block0.c();
|
|
8296
|
-
if_block0.m(
|
|
8315
|
+
if_block0.m(div4, t1);
|
|
8297
8316
|
}
|
|
8298
8317
|
} else if (if_block0) {
|
|
8299
8318
|
if_block0.d(1);
|
|
8300
8319
|
if_block0 = null;
|
|
8301
8320
|
}
|
|
8302
8321
|
|
|
8303
|
-
if (/*
|
|
8322
|
+
if (/*heading*/ ctx[0]) {
|
|
8304
8323
|
if (if_block1) {
|
|
8305
8324
|
if_block1.p(ctx, dirty);
|
|
8306
8325
|
} else {
|
|
8307
|
-
if_block1 =
|
|
8326
|
+
if_block1 = create_if_block_3(ctx);
|
|
8308
8327
|
if_block1.c();
|
|
8309
8328
|
if_block1.m(div3, t2);
|
|
8310
8329
|
}
|
|
@@ -8313,11 +8332,24 @@ function create_if_block$4(ctx) {
|
|
|
8313
8332
|
if_block1 = null;
|
|
8314
8333
|
}
|
|
8315
8334
|
|
|
8316
|
-
if (
|
|
8317
|
-
|
|
8335
|
+
if (/*isClosable*/ ctx[4]) {
|
|
8336
|
+
if (if_block2) {
|
|
8337
|
+
if_block2.p(ctx, dirty);
|
|
8338
|
+
} else {
|
|
8339
|
+
if_block2 = create_if_block_2$1(ctx);
|
|
8340
|
+
if_block2.c();
|
|
8341
|
+
if_block2.m(div3, t3);
|
|
8342
|
+
}
|
|
8343
|
+
} else if (if_block2) {
|
|
8344
|
+
if_block2.d(1);
|
|
8345
|
+
if_block2 = null;
|
|
8346
|
+
}
|
|
8347
|
+
|
|
8348
|
+
if (!current || dirty & /*width*/ 4 && div5_style_value !== (div5_style_value = "" + ((/*width*/ ctx[2] && `--width: ${/*width*/ ctx[2]};`) + ";"))) {
|
|
8349
|
+
attr(div5, "style", div5_style_value);
|
|
8318
8350
|
}
|
|
8319
8351
|
|
|
8320
|
-
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] });
|
|
8321
8353
|
|
|
8322
8354
|
if (!current || dirty & /*open*/ 2) {
|
|
8323
8355
|
set_custom_element_data(goa_focus_trap, "active", /*open*/ ctx[1]);
|
|
@@ -8327,38 +8359,38 @@ function create_if_block$4(ctx) {
|
|
|
8327
8359
|
if (current) return;
|
|
8328
8360
|
|
|
8329
8361
|
add_render_callback(() => {
|
|
8330
|
-
if (
|
|
8362
|
+
if (div4_outro) div4_outro.end(1);
|
|
8331
8363
|
|
|
8332
|
-
|
|
8333
|
-
duration: /*_transitionTime*/ ctx[
|
|
8364
|
+
div4_intro = create_in_transition(div4, fly, {
|
|
8365
|
+
duration: /*_transitionTime*/ ctx[6],
|
|
8334
8366
|
y: 200
|
|
8335
8367
|
});
|
|
8336
8368
|
|
|
8337
|
-
|
|
8369
|
+
div4_intro.start();
|
|
8338
8370
|
});
|
|
8339
8371
|
|
|
8340
8372
|
add_render_callback(() => {
|
|
8341
|
-
if (
|
|
8342
|
-
|
|
8343
|
-
|
|
8373
|
+
if (div5_outro) div5_outro.end(1);
|
|
8374
|
+
div5_intro = create_in_transition(div5, fade, { duration: /*_transitionTime*/ ctx[6] });
|
|
8375
|
+
div5_intro.start();
|
|
8344
8376
|
});
|
|
8345
8377
|
|
|
8346
8378
|
current = true;
|
|
8347
8379
|
},
|
|
8348
8380
|
o(local) {
|
|
8349
|
-
if (
|
|
8381
|
+
if (div4_intro) div4_intro.invalidate();
|
|
8350
8382
|
|
|
8351
|
-
|
|
8352
|
-
delay: /*_transitionTime*/ ctx[
|
|
8353
|
-
duration: /*_transitionTime*/ ctx[
|
|
8383
|
+
div4_outro = create_out_transition(div4, fly, {
|
|
8384
|
+
delay: /*_transitionTime*/ ctx[6],
|
|
8385
|
+
duration: /*_transitionTime*/ ctx[6],
|
|
8354
8386
|
y: -100
|
|
8355
8387
|
});
|
|
8356
8388
|
|
|
8357
|
-
if (
|
|
8389
|
+
if (div5_intro) div5_intro.invalidate();
|
|
8358
8390
|
|
|
8359
|
-
|
|
8360
|
-
delay: /*_transitionTime*/ ctx[
|
|
8361
|
-
duration: /*_transitionTime*/ ctx[
|
|
8391
|
+
div5_outro = create_out_transition(div5, fade, {
|
|
8392
|
+
delay: /*_transitionTime*/ ctx[6],
|
|
8393
|
+
duration: /*_transitionTime*/ ctx[6]
|
|
8362
8394
|
});
|
|
8363
8395
|
|
|
8364
8396
|
current = false;
|
|
@@ -8367,16 +8399,61 @@ function create_if_block$4(ctx) {
|
|
|
8367
8399
|
if (detaching) detach(goa_focus_trap);
|
|
8368
8400
|
if (if_block0) if_block0.d();
|
|
8369
8401
|
if (if_block1) if_block1.d();
|
|
8370
|
-
if_block2.d();
|
|
8371
|
-
|
|
8402
|
+
if (if_block2) if_block2.d();
|
|
8403
|
+
if_block3.d();
|
|
8372
8404
|
if (detaching && div4_outro) div4_outro.end();
|
|
8405
|
+
if (detaching && div5_outro) div5_outro.end();
|
|
8373
8406
|
mounted = false;
|
|
8374
8407
|
run_all(dispose);
|
|
8375
8408
|
}
|
|
8376
8409
|
};
|
|
8377
8410
|
}
|
|
8378
8411
|
|
|
8379
|
-
// (
|
|
8412
|
+
// (65:8) {#if calloutvariant !== null}
|
|
8413
|
+
function create_if_block_4(ctx) {
|
|
8414
|
+
let div;
|
|
8415
|
+
let goa_icon;
|
|
8416
|
+
let goa_icon_inverted_value;
|
|
8417
|
+
let div_class_value;
|
|
8418
|
+
|
|
8419
|
+
return {
|
|
8420
|
+
c() {
|
|
8421
|
+
div = element("div");
|
|
8422
|
+
goa_icon = element("goa-icon");
|
|
8423
|
+
set_custom_element_data(goa_icon, "type", /*iconType*/ ctx[5]);
|
|
8424
|
+
|
|
8425
|
+
set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value = /*calloutvariant*/ ctx[3] === "important"
|
|
8426
|
+
? "false"
|
|
8427
|
+
: "true");
|
|
8428
|
+
|
|
8429
|
+
attr(div, "class", div_class_value = "callout-bar " + /*calloutvariant*/ ctx[3]);
|
|
8430
|
+
},
|
|
8431
|
+
m(target, anchor) {
|
|
8432
|
+
insert(target, div, anchor);
|
|
8433
|
+
append(div, goa_icon);
|
|
8434
|
+
},
|
|
8435
|
+
p(ctx, dirty) {
|
|
8436
|
+
if (dirty & /*iconType*/ 32) {
|
|
8437
|
+
set_custom_element_data(goa_icon, "type", /*iconType*/ ctx[5]);
|
|
8438
|
+
}
|
|
8439
|
+
|
|
8440
|
+
if (dirty & /*calloutvariant*/ 8 && goa_icon_inverted_value !== (goa_icon_inverted_value = /*calloutvariant*/ ctx[3] === "important"
|
|
8441
|
+
? "false"
|
|
8442
|
+
: "true")) {
|
|
8443
|
+
set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value);
|
|
8444
|
+
}
|
|
8445
|
+
|
|
8446
|
+
if (dirty & /*calloutvariant*/ 8 && div_class_value !== (div_class_value = "callout-bar " + /*calloutvariant*/ ctx[3])) {
|
|
8447
|
+
attr(div, "class", div_class_value);
|
|
8448
|
+
}
|
|
8449
|
+
},
|
|
8450
|
+
d(detaching) {
|
|
8451
|
+
if (detaching) detach(div);
|
|
8452
|
+
}
|
|
8453
|
+
};
|
|
8454
|
+
}
|
|
8455
|
+
|
|
8456
|
+
// (74:10) {#if heading}
|
|
8380
8457
|
function create_if_block_3(ctx) {
|
|
8381
8458
|
let div;
|
|
8382
8459
|
let t;
|
|
@@ -8401,7 +8478,7 @@ function create_if_block_3(ctx) {
|
|
|
8401
8478
|
};
|
|
8402
8479
|
}
|
|
8403
8480
|
|
|
8404
|
-
// (
|
|
8481
|
+
// (77:10) {#if isClosable}
|
|
8405
8482
|
function create_if_block_2$1(ctx) {
|
|
8406
8483
|
let div;
|
|
8407
8484
|
let goa_icon_button;
|
|
@@ -8414,6 +8491,7 @@ function create_if_block_2$1(ctx) {
|
|
|
8414
8491
|
goa_icon_button = element("goa-icon-button");
|
|
8415
8492
|
set_custom_element_data(goa_icon_button, "data-testid", "modal-close-button");
|
|
8416
8493
|
set_custom_element_data(goa_icon_button, "icon", "close");
|
|
8494
|
+
set_custom_element_data(goa_icon_button, "variant", "nocolor");
|
|
8417
8495
|
attr(div, "class", "modal-close");
|
|
8418
8496
|
},
|
|
8419
8497
|
m(target, anchor) {
|
|
@@ -8421,7 +8499,7 @@ function create_if_block_2$1(ctx) {
|
|
|
8421
8499
|
append(div, goa_icon_button);
|
|
8422
8500
|
|
|
8423
8501
|
if (!mounted) {
|
|
8424
|
-
dispose = listen(goa_icon_button, "click", /*close*/ ctx[
|
|
8502
|
+
dispose = listen(goa_icon_button, "click", /*close*/ ctx[8]);
|
|
8425
8503
|
mounted = true;
|
|
8426
8504
|
}
|
|
8427
8505
|
},
|
|
@@ -8434,7 +8512,7 @@ function create_if_block_2$1(ctx) {
|
|
|
8434
8512
|
};
|
|
8435
8513
|
}
|
|
8436
8514
|
|
|
8437
|
-
// (
|
|
8515
|
+
// (89:12) {#if isScrollable}
|
|
8438
8516
|
function create_if_block_1$2(ctx) {
|
|
8439
8517
|
let goa_scrollable;
|
|
8440
8518
|
|
|
@@ -8444,7 +8522,6 @@ function create_if_block_1$2(ctx) {
|
|
|
8444
8522
|
goa_scrollable.innerHTML = `<slot></slot>`;
|
|
8445
8523
|
set_custom_element_data(goa_scrollable, "direction", "vertical");
|
|
8446
8524
|
set_custom_element_data(goa_scrollable, "height", "50");
|
|
8447
|
-
set_custom_element_data(goa_scrollable, "hpadding", "1.75");
|
|
8448
8525
|
},
|
|
8449
8526
|
m(target, anchor) {
|
|
8450
8527
|
insert(target, goa_scrollable, anchor);
|
|
@@ -8458,7 +8535,7 @@ function create_if_block_1$2(ctx) {
|
|
|
8458
8535
|
function create_fragment$d(ctx) {
|
|
8459
8536
|
let if_block_anchor;
|
|
8460
8537
|
let current;
|
|
8461
|
-
let if_block = /*isOpen*/ ctx[
|
|
8538
|
+
let if_block = /*isOpen*/ ctx[7] && create_if_block$4(ctx);
|
|
8462
8539
|
|
|
8463
8540
|
return {
|
|
8464
8541
|
c() {
|
|
@@ -8472,11 +8549,11 @@ function create_fragment$d(ctx) {
|
|
|
8472
8549
|
current = true;
|
|
8473
8550
|
},
|
|
8474
8551
|
p(ctx, [dirty]) {
|
|
8475
|
-
if (/*isOpen*/ ctx[
|
|
8552
|
+
if (/*isOpen*/ ctx[7]) {
|
|
8476
8553
|
if (if_block) {
|
|
8477
8554
|
if_block.p(ctx, dirty);
|
|
8478
8555
|
|
|
8479
|
-
if (dirty & /*isOpen*/
|
|
8556
|
+
if (dirty & /*isOpen*/ 128) {
|
|
8480
8557
|
transition_in(if_block, 1);
|
|
8481
8558
|
}
|
|
8482
8559
|
} else {
|
|
@@ -8515,11 +8592,14 @@ function instance$b($$self, $$props, $$invalidate) {
|
|
|
8515
8592
|
let isClosable;
|
|
8516
8593
|
let isOpen;
|
|
8517
8594
|
let _transitionTime;
|
|
8595
|
+
let iconType;
|
|
8596
|
+
const [CALLOUT_VARIANT, validateCalloutVariant] = typeValidator("Callout variant", ["emergency", "important", "information", "success", "event"]);
|
|
8518
8597
|
let { heading = "" } = $$props;
|
|
8519
8598
|
let { closable = "false" } = $$props;
|
|
8520
8599
|
let { open = "false" } = $$props;
|
|
8521
8600
|
let { transition = "none" } = $$props;
|
|
8522
8601
|
let { width = "" } = $$props;
|
|
8602
|
+
let { calloutvariant = null } = $$props;
|
|
8523
8603
|
|
|
8524
8604
|
function close(e) {
|
|
8525
8605
|
if (!isClosable) {
|
|
@@ -8530,35 +8610,54 @@ function instance$b($$self, $$props, $$invalidate) {
|
|
|
8530
8610
|
e.stopPropagation();
|
|
8531
8611
|
}
|
|
8532
8612
|
|
|
8613
|
+
onMount(() => {
|
|
8614
|
+
validateCalloutVariant(calloutvariant);
|
|
8615
|
+
});
|
|
8616
|
+
|
|
8533
8617
|
$$self.$$set = $$props => {
|
|
8534
8618
|
if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
|
|
8535
|
-
if ('closable' in $$props) $$invalidate(
|
|
8619
|
+
if ('closable' in $$props) $$invalidate(9, closable = $$props.closable);
|
|
8536
8620
|
if ('open' in $$props) $$invalidate(1, open = $$props.open);
|
|
8537
|
-
if ('transition' in $$props) $$invalidate(
|
|
8621
|
+
if ('transition' in $$props) $$invalidate(10, transition = $$props.transition);
|
|
8538
8622
|
if ('width' in $$props) $$invalidate(2, width = $$props.width);
|
|
8623
|
+
if ('calloutvariant' in $$props) $$invalidate(3, calloutvariant = $$props.calloutvariant);
|
|
8539
8624
|
};
|
|
8540
8625
|
|
|
8541
8626
|
$$self.$$.update = () => {
|
|
8542
|
-
if ($$self.$$.dirty & /*closable*/
|
|
8543
|
-
$$invalidate(
|
|
8627
|
+
if ($$self.$$.dirty & /*closable*/ 512) {
|
|
8628
|
+
$$invalidate(4, isClosable = toBoolean(closable));
|
|
8544
8629
|
}
|
|
8545
8630
|
|
|
8546
8631
|
if ($$self.$$.dirty & /*open*/ 2) {
|
|
8547
|
-
$$invalidate(
|
|
8632
|
+
$$invalidate(7, isOpen = toBoolean(open));
|
|
8548
8633
|
}
|
|
8549
8634
|
|
|
8550
|
-
if ($$self.$$.dirty & /*transition*/
|
|
8551
|
-
$$invalidate(
|
|
8635
|
+
if ($$self.$$.dirty & /*transition*/ 1024) {
|
|
8636
|
+
$$invalidate(6, _transitionTime = transition === "none"
|
|
8552
8637
|
? 0
|
|
8553
8638
|
: transition === "slow" ? 400 : 200);
|
|
8554
8639
|
}
|
|
8640
|
+
|
|
8641
|
+
if ($$self.$$.dirty & /*calloutvariant*/ 8) {
|
|
8642
|
+
$$invalidate(5, iconType = calloutvariant === "emergency"
|
|
8643
|
+
? "warning"
|
|
8644
|
+
: calloutvariant === "important"
|
|
8645
|
+
? "alert-circle"
|
|
8646
|
+
: calloutvariant === "information"
|
|
8647
|
+
? "information-circle"
|
|
8648
|
+
: calloutvariant === "success"
|
|
8649
|
+
? "checkmark-circle"
|
|
8650
|
+
: calloutvariant === "event" ? "calendar" : "");
|
|
8651
|
+
}
|
|
8555
8652
|
};
|
|
8556
8653
|
|
|
8557
8654
|
return [
|
|
8558
8655
|
heading,
|
|
8559
8656
|
open,
|
|
8560
8657
|
width,
|
|
8658
|
+
calloutvariant,
|
|
8561
8659
|
isClosable,
|
|
8660
|
+
iconType,
|
|
8562
8661
|
_transitionTime,
|
|
8563
8662
|
isOpen,
|
|
8564
8663
|
close,
|
|
@@ -8570,7 +8669,7 @@ function instance$b($$self, $$props, $$invalidate) {
|
|
|
8570
8669
|
class Modal extends SvelteElement {
|
|
8571
8670
|
constructor(options) {
|
|
8572
8671
|
super();
|
|
8573
|
-
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.modal{font-family:var(--font-family);position:fixed;inset:0;display:flex;align-items:center;justify-content:center;height:100vh;width:100%;z-index:100}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.2);z-index:1000}.modal-pane{position:relative;background-color:#fff;z-index:1001;width:90%;margin:1rem;box-shadow:
|
|
8672
|
+
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.modal{font-family:var(--font-family);position:fixed;inset:0;display:flex;align-items:center;justify-content:center;height:100vh;width:100%;z-index:100}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.2);z-index:1000}.emergency{background-color:var(--goa-color-status-emergency)}.important{background-color:var(--goa-color-status-warning)}.information{background-color:var(--goa-color-status-info)}.event{background-color:var(--goa-color-status-info)}.success{background-color:var(--goa-color-status-success)}.callout-bar{flex:0 0 3rem;text-align:center;padding-top:2rem;border-radius:4px 0px 0px 4px}.content{flex:1 1 auto;width:100%;margin:2rem 2rem}.modal-pane{position:relative;background-color:#fff;z-index:1001;width:90%;display:flex;margin:1rem;box-shadow:6px 6px 6px rgba(0, 0, 0, 0.16);border-radius:4px;max-height:90%;border:1px solid var(--color-gray-600)}@media(min-width: 640px){.modal-pane{width:var(--width, 60ch);max-height:80%}}.modal-actions ::slotted(div){margin:1.5rem 0 0}.modal-close{position:absolute;top:2rem;right:2rem}.modal-title{font-size:var(--fs-xl);margin:0 0 1.5rem;margin-right:40px;flex:0 0 auto}.modal-content{line-height:1.75rem}</style>`;
|
|
8574
8673
|
|
|
8575
8674
|
init(
|
|
8576
8675
|
this,
|
|
@@ -8584,10 +8683,11 @@ class Modal extends SvelteElement {
|
|
|
8584
8683
|
safe_not_equal,
|
|
8585
8684
|
{
|
|
8586
8685
|
heading: 0,
|
|
8587
|
-
closable:
|
|
8686
|
+
closable: 9,
|
|
8588
8687
|
open: 1,
|
|
8589
|
-
transition:
|
|
8590
|
-
width: 2
|
|
8688
|
+
transition: 10,
|
|
8689
|
+
width: 2,
|
|
8690
|
+
calloutvariant: 3
|
|
8591
8691
|
},
|
|
8592
8692
|
null
|
|
8593
8693
|
);
|
|
@@ -8605,7 +8705,7 @@ class Modal extends SvelteElement {
|
|
|
8605
8705
|
}
|
|
8606
8706
|
|
|
8607
8707
|
static get observedAttributes() {
|
|
8608
|
-
return ["heading", "closable", "open", "transition", "width"];
|
|
8708
|
+
return ["heading", "closable", "open", "transition", "width", "calloutvariant"];
|
|
8609
8709
|
}
|
|
8610
8710
|
|
|
8611
8711
|
get heading() {
|
|
@@ -8618,7 +8718,7 @@ class Modal extends SvelteElement {
|
|
|
8618
8718
|
}
|
|
8619
8719
|
|
|
8620
8720
|
get closable() {
|
|
8621
|
-
return this.$$.ctx[
|
|
8721
|
+
return this.$$.ctx[9];
|
|
8622
8722
|
}
|
|
8623
8723
|
|
|
8624
8724
|
set closable(closable) {
|
|
@@ -8636,7 +8736,7 @@ class Modal extends SvelteElement {
|
|
|
8636
8736
|
}
|
|
8637
8737
|
|
|
8638
8738
|
get transition() {
|
|
8639
|
-
return this.$$.ctx[
|
|
8739
|
+
return this.$$.ctx[10];
|
|
8640
8740
|
}
|
|
8641
8741
|
|
|
8642
8742
|
set transition(transition) {
|
|
@@ -8652,6 +8752,15 @@ class Modal extends SvelteElement {
|
|
|
8652
8752
|
this.$$set({ width });
|
|
8653
8753
|
flush();
|
|
8654
8754
|
}
|
|
8755
|
+
|
|
8756
|
+
get calloutvariant() {
|
|
8757
|
+
return this.$$.ctx[3];
|
|
8758
|
+
}
|
|
8759
|
+
|
|
8760
|
+
set calloutvariant(calloutvariant) {
|
|
8761
|
+
this.$$set({ calloutvariant });
|
|
8762
|
+
flush();
|
|
8763
|
+
}
|
|
8655
8764
|
}
|
|
8656
8765
|
|
|
8657
8766
|
customElements.define("goa-modal", Modal);
|
|
@@ -8662,11 +8771,13 @@ function create_if_block$3(ctx) {
|
|
|
8662
8771
|
let div3;
|
|
8663
8772
|
let div0;
|
|
8664
8773
|
let goa_icon;
|
|
8774
|
+
let goa_icon_inverted_value;
|
|
8665
8775
|
let t0;
|
|
8666
8776
|
let div1;
|
|
8667
8777
|
let t1;
|
|
8668
8778
|
let div2;
|
|
8669
8779
|
let goa_icon_button;
|
|
8780
|
+
let goa_icon_button_inverted_value;
|
|
8670
8781
|
let div3_class_value;
|
|
8671
8782
|
let div3_transition;
|
|
8672
8783
|
let current;
|
|
@@ -8685,11 +8796,12 @@ function create_if_block$3(ctx) {
|
|
|
8685
8796
|
div2 = element("div");
|
|
8686
8797
|
goa_icon_button = element("goa-icon-button");
|
|
8687
8798
|
set_custom_element_data(goa_icon, "type", /*iconType*/ ctx[2]);
|
|
8688
|
-
set_custom_element_data(goa_icon, "inverted", "");
|
|
8799
|
+
set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value = /*type*/ ctx[0] === "important" ? "false" : "true");
|
|
8689
8800
|
attr(div0, "class", "icon");
|
|
8690
8801
|
attr(div1, "class", "content");
|
|
8691
8802
|
set_custom_element_data(goa_icon_button, "icon", "close");
|
|
8692
|
-
set_custom_element_data(goa_icon_button, "
|
|
8803
|
+
set_custom_element_data(goa_icon_button, "variant", "dark");
|
|
8804
|
+
set_custom_element_data(goa_icon_button, "inverted", goa_icon_button_inverted_value = /*type*/ ctx[0] === "important" ? "false" : "true");
|
|
8693
8805
|
attr(div2, "class", "close");
|
|
8694
8806
|
attr(div3, "class", div3_class_value = "notification " + /*type*/ ctx[0]);
|
|
8695
8807
|
},
|
|
@@ -8714,6 +8826,14 @@ function create_if_block$3(ctx) {
|
|
|
8714
8826
|
set_custom_element_data(goa_icon, "type", /*iconType*/ ctx[2]);
|
|
8715
8827
|
}
|
|
8716
8828
|
|
|
8829
|
+
if (!current || dirty & /*type*/ 1 && goa_icon_inverted_value !== (goa_icon_inverted_value = /*type*/ ctx[0] === "important" ? "false" : "true")) {
|
|
8830
|
+
set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value);
|
|
8831
|
+
}
|
|
8832
|
+
|
|
8833
|
+
if (!current || dirty & /*type*/ 1 && goa_icon_button_inverted_value !== (goa_icon_button_inverted_value = /*type*/ ctx[0] === "important" ? "false" : "true")) {
|
|
8834
|
+
set_custom_element_data(goa_icon_button, "inverted", goa_icon_button_inverted_value);
|
|
8835
|
+
}
|
|
8836
|
+
|
|
8717
8837
|
if (!current || dirty & /*type*/ 1 && div3_class_value !== (div3_class_value = "notification " + /*type*/ ctx[0])) {
|
|
8718
8838
|
attr(div3, "class", div3_class_value);
|
|
8719
8839
|
}
|
|
@@ -8800,9 +8920,22 @@ function create_fragment$c(ctx) {
|
|
|
8800
8920
|
|
|
8801
8921
|
function instance$a($$self, $$props, $$invalidate) {
|
|
8802
8922
|
let iconType;
|
|
8803
|
-
let { type } = $$props;
|
|
8923
|
+
let { type = "" } = $$props;
|
|
8924
|
+
const NOTIFICATION_TYPES = ["emergency", "important", "information", "event"];
|
|
8925
|
+
|
|
8926
|
+
// type check function
|
|
8927
|
+
function isNotificationType(value) {
|
|
8928
|
+
return NOTIFICATION_TYPES.includes(value);
|
|
8929
|
+
}
|
|
8930
|
+
|
|
8804
8931
|
let show = true;
|
|
8805
8932
|
|
|
8933
|
+
onMount(() => {
|
|
8934
|
+
if (!isNotificationType(type)) {
|
|
8935
|
+
console.error("Invalid notification type");
|
|
8936
|
+
}
|
|
8937
|
+
});
|
|
8938
|
+
|
|
8806
8939
|
function close() {
|
|
8807
8940
|
$$invalidate(1, show = false);
|
|
8808
8941
|
}
|
|
@@ -8815,11 +8948,11 @@ function instance$a($$self, $$props, $$invalidate) {
|
|
|
8815
8948
|
if ($$self.$$.dirty & /*type*/ 1) {
|
|
8816
8949
|
$$invalidate(2, iconType = type === "emergency"
|
|
8817
8950
|
? "warning"
|
|
8818
|
-
: type === "
|
|
8951
|
+
: type === "important"
|
|
8819
8952
|
? "alert-circle"
|
|
8820
8953
|
: type === "information"
|
|
8821
8954
|
? "information-circle"
|
|
8822
|
-
: "calendar");
|
|
8955
|
+
: type === "event" ? "calendar" : "");
|
|
8823
8956
|
}
|
|
8824
8957
|
};
|
|
8825
8958
|
|
|
@@ -8829,7 +8962,7 @@ function instance$a($$self, $$props, $$invalidate) {
|
|
|
8829
8962
|
class Notification extends SvelteElement {
|
|
8830
8963
|
constructor(options) {
|
|
8831
8964
|
super();
|
|
8832
|
-
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.notification{padding:1.5rem;display:flex;
|
|
8965
|
+
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.notification{padding:1.5rem;display:flex;gap:1rem}.emergency{background-color:var(--goa-color-status-emergency);color:var(--color-white)}.important{background-color:var(--goa-color-status-warning)}.information{background-color:var(--goa-color-status-info);color:var(--color-white)}.event{background-color:var(--goa-color-status-success);color:var(--color-white)}.icon{flex:0 0 auto}.content{flex:1 1 auto}::slotted(a){color:unset !important;outline:unset !important}.close{flex:0 0 auto}</style>`;
|
|
8833
8966
|
|
|
8834
8967
|
init(
|
|
8835
8968
|
this,
|