@abgov/react-components 4.0.0 → 4.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/react-components.umd.js
CHANGED
|
@@ -1394,6 +1394,20 @@
|
|
|
1394
1394
|
function fromBoolean(value) {
|
|
1395
1395
|
return value ? "true" : "false";
|
|
1396
1396
|
}
|
|
1397
|
+
|
|
1398
|
+
function typeValidator(message, values, required = false) {
|
|
1399
|
+
const validator = value => {
|
|
1400
|
+
if (!required && !value) {
|
|
1401
|
+
return;
|
|
1402
|
+
}
|
|
1403
|
+
|
|
1404
|
+
if (!values.includes(value)) {
|
|
1405
|
+
console.error(`[${value}] is an invalid ${message.toLowerCase()}`);
|
|
1406
|
+
}
|
|
1407
|
+
};
|
|
1408
|
+
|
|
1409
|
+
return [values, validator];
|
|
1410
|
+
}
|
|
1397
1411
|
/* libs/web-components/src/components/badge/Badge.svelte generated by Svelte v3.51.0 */
|
|
1398
1412
|
|
|
1399
1413
|
|
|
@@ -1738,12 +1752,12 @@
|
|
|
1738
1752
|
div = element("div");
|
|
1739
1753
|
slot = element("slot");
|
|
1740
1754
|
this.c = noop;
|
|
1741
|
-
set_style(div, "--alignment",
|
|
1742
|
-
/*
|
|
1755
|
+
set_style(div, "--alignment",
|
|
1756
|
+
/*_alignment*/
|
|
1743
1757
|
ctx[1]);
|
|
1744
1758
|
set_style(div, "--gap-size",
|
|
1745
1759
|
/*gap*/
|
|
1746
|
-
ctx[0] ===
|
|
1760
|
+
ctx[0] === 'relaxed' ? '1rem' : '0.75rem');
|
|
1747
1761
|
},
|
|
1748
1762
|
|
|
1749
1763
|
m(target, anchor) {
|
|
@@ -1753,10 +1767,10 @@
|
|
|
1753
1767
|
|
|
1754
1768
|
p(ctx, [dirty]) {
|
|
1755
1769
|
if (dirty &
|
|
1756
|
-
/*
|
|
1770
|
+
/*_alignment*/
|
|
1757
1771
|
2) {
|
|
1758
|
-
set_style(div, "--alignment",
|
|
1759
|
-
/*
|
|
1772
|
+
set_style(div, "--alignment",
|
|
1773
|
+
/*_alignment*/
|
|
1760
1774
|
ctx[1]);
|
|
1761
1775
|
}
|
|
1762
1776
|
|
|
@@ -1765,7 +1779,7 @@
|
|
|
1765
1779
|
1) {
|
|
1766
1780
|
set_style(div, "--gap-size",
|
|
1767
1781
|
/*gap*/
|
|
1768
|
-
ctx[0] ===
|
|
1782
|
+
ctx[0] === 'relaxed' ? '1rem' : '0.75rem');
|
|
1769
1783
|
}
|
|
1770
1784
|
},
|
|
1771
1785
|
|
|
@@ -1780,32 +1794,52 @@
|
|
|
1780
1794
|
}
|
|
1781
1795
|
|
|
1782
1796
|
function instance$y($$self, $$props, $$invalidate) {
|
|
1797
|
+
let _alignment;
|
|
1798
|
+
|
|
1783
1799
|
let {
|
|
1784
|
-
|
|
1800
|
+
alignment = "start"
|
|
1785
1801
|
} = $$props;
|
|
1786
1802
|
let {
|
|
1787
|
-
|
|
1803
|
+
gap = "relaxed"
|
|
1788
1804
|
} = $$props;
|
|
1805
|
+
const [BUTTON_ALIGNMENTS, validateAlignment] = typeValidator("alignment", ["start", "end", "center"]);
|
|
1806
|
+
const [GAPS, validateGap] = typeValidator("gap", ["relaxed", "compact"]);
|
|
1807
|
+
onMount(() => {
|
|
1808
|
+
validateAlignment(alignment);
|
|
1809
|
+
validateGap(gap);
|
|
1810
|
+
});
|
|
1789
1811
|
|
|
1790
1812
|
$$self.$$set = $$props => {
|
|
1813
|
+
if ('alignment' in $$props) $$invalidate(2, alignment = $$props.alignment);
|
|
1791
1814
|
if ('gap' in $$props) $$invalidate(0, gap = $$props.gap);
|
|
1792
|
-
if ('alignment' in $$props) $$invalidate(1, alignment = $$props.alignment);
|
|
1793
1815
|
};
|
|
1794
1816
|
|
|
1795
|
-
|
|
1817
|
+
$$self.$$.update = () => {
|
|
1818
|
+
if ($$self.$$.dirty &
|
|
1819
|
+
/*alignment*/
|
|
1820
|
+
4) {
|
|
1821
|
+
$$invalidate(1, _alignment = {
|
|
1822
|
+
start: "flex-start",
|
|
1823
|
+
end: "flex-end",
|
|
1824
|
+
center: "center"
|
|
1825
|
+
}[alignment]);
|
|
1826
|
+
}
|
|
1827
|
+
};
|
|
1828
|
+
|
|
1829
|
+
return [gap, _alignment, alignment];
|
|
1796
1830
|
}
|
|
1797
1831
|
|
|
1798
1832
|
class ButtonGroup extends SvelteElement {
|
|
1799
1833
|
constructor(options) {
|
|
1800
1834
|
super();
|
|
1801
|
-
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>`;
|
|
1835
|
+
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>`;
|
|
1802
1836
|
init(this, {
|
|
1803
1837
|
target: this.shadowRoot,
|
|
1804
1838
|
props: attribute_to_object(this.attributes),
|
|
1805
1839
|
customElement: true
|
|
1806
1840
|
}, instance$y, create_fragment$D, safe_not_equal, {
|
|
1807
|
-
|
|
1808
|
-
|
|
1841
|
+
alignment: 2,
|
|
1842
|
+
gap: 0
|
|
1809
1843
|
}, null);
|
|
1810
1844
|
|
|
1811
1845
|
if (options) {
|
|
@@ -1821,27 +1855,27 @@
|
|
|
1821
1855
|
}
|
|
1822
1856
|
|
|
1823
1857
|
static get observedAttributes() {
|
|
1824
|
-
return ["
|
|
1858
|
+
return ["alignment", "gap"];
|
|
1825
1859
|
}
|
|
1826
1860
|
|
|
1827
|
-
get
|
|
1828
|
-
return this.$$.ctx[
|
|
1861
|
+
get alignment() {
|
|
1862
|
+
return this.$$.ctx[2];
|
|
1829
1863
|
}
|
|
1830
1864
|
|
|
1831
|
-
set
|
|
1865
|
+
set alignment(alignment) {
|
|
1832
1866
|
this.$$set({
|
|
1833
|
-
|
|
1867
|
+
alignment
|
|
1834
1868
|
});
|
|
1835
1869
|
flush();
|
|
1836
1870
|
}
|
|
1837
1871
|
|
|
1838
|
-
get
|
|
1839
|
-
return this.$$.ctx[
|
|
1872
|
+
get gap() {
|
|
1873
|
+
return this.$$.ctx[0];
|
|
1840
1874
|
}
|
|
1841
1875
|
|
|
1842
|
-
set
|
|
1876
|
+
set gap(gap) {
|
|
1843
1877
|
this.$$set({
|
|
1844
|
-
|
|
1878
|
+
gap
|
|
1845
1879
|
});
|
|
1846
1880
|
flush();
|
|
1847
1881
|
}
|
|
@@ -1924,7 +1958,7 @@
|
|
|
1924
1958
|
}
|
|
1925
1959
|
|
|
1926
1960
|
};
|
|
1927
|
-
} // (
|
|
1961
|
+
} // (38:2) {#if type === "start"}
|
|
1928
1962
|
|
|
1929
1963
|
|
|
1930
1964
|
function create_if_block$g(ctx) {
|
|
@@ -1957,7 +1991,7 @@
|
|
|
1957
1991
|
}
|
|
1958
1992
|
|
|
1959
1993
|
};
|
|
1960
|
-
} // (
|
|
1994
|
+
} // (42:4) {#if leadingicon}
|
|
1961
1995
|
|
|
1962
1996
|
|
|
1963
1997
|
function create_if_block_2$6(ctx) {
|
|
@@ -2001,7 +2035,7 @@
|
|
|
2001
2035
|
}
|
|
2002
2036
|
|
|
2003
2037
|
};
|
|
2004
|
-
} // (
|
|
2038
|
+
} // (46:4) {#if trailingicon}
|
|
2005
2039
|
|
|
2006
2040
|
|
|
2007
2041
|
function create_if_block_1$9(ctx) {
|
|
@@ -2184,22 +2218,9 @@
|
|
|
2184
2218
|
function instance$x($$self, $$props, $$invalidate) {
|
|
2185
2219
|
let isDisabled;
|
|
2186
2220
|
let isButtonDark;
|
|
2187
|
-
const
|
|
2188
|
-
const
|
|
2189
|
-
const
|
|
2190
|
-
|
|
2191
|
-
function isButtonType(value) {
|
|
2192
|
-
return BUTTON_TYPES.includes(value);
|
|
2193
|
-
}
|
|
2194
|
-
|
|
2195
|
-
function isSize(value) {
|
|
2196
|
-
return SIZES.includes(value);
|
|
2197
|
-
}
|
|
2198
|
-
|
|
2199
|
-
function isVariant(value) {
|
|
2200
|
-
return VARIANTS.includes(value);
|
|
2201
|
-
}
|
|
2202
|
-
|
|
2221
|
+
const [Types, validateType] = typeValidator("Button type", ["primary", "submit", "secondary", "tertiary", "start"], true);
|
|
2222
|
+
const [Sizes, validateSize] = typeValidator("Button size", ["normal", "compact"], true);
|
|
2223
|
+
const [Variants, validateVariant] = typeValidator("Button variant", ["normal", "destructive"], true);
|
|
2203
2224
|
let {
|
|
2204
2225
|
type = "primary"
|
|
2205
2226
|
} = $$props;
|
|
@@ -2222,17 +2243,9 @@
|
|
|
2222
2243
|
testid = ""
|
|
2223
2244
|
} = $$props;
|
|
2224
2245
|
onMount(() => {
|
|
2225
|
-
|
|
2226
|
-
|
|
2227
|
-
|
|
2228
|
-
|
|
2229
|
-
if (!isSize(size)) {
|
|
2230
|
-
console.error("Invalid button size");
|
|
2231
|
-
}
|
|
2232
|
-
|
|
2233
|
-
if (!isVariant(variant)) {
|
|
2234
|
-
console.error("Invalid button variant");
|
|
2235
|
-
}
|
|
2246
|
+
validateType(type);
|
|
2247
|
+
validateSize(size);
|
|
2248
|
+
validateVariant(variant);
|
|
2236
2249
|
});
|
|
2237
2250
|
|
|
2238
2251
|
$$self.$$set = $$props => {
|
|
@@ -2266,7 +2279,9 @@
|
|
|
2266
2279
|
constructor(options) {
|
|
2267
2280
|
super();
|
|
2268
2281
|
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,
|
|
2269
|
-
border-color 0.2s ease-in-out}.text{padding-bottom:var(
|
|
2282
|
+
border-color 0.2s ease-in-out}.text{padding-bottom:var(
|
|
2283
|
+
--font-valign-fix
|
|
2284
|
+
)}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>`;
|
|
2270
2285
|
init(this, {
|
|
2271
2286
|
target: this.shadowRoot,
|
|
2272
2287
|
props: attribute_to_object(this.attributes),
|
|
@@ -4110,7 +4125,7 @@
|
|
|
4110
4125
|
let div_class_value;
|
|
4111
4126
|
let if_block =
|
|
4112
4127
|
/*message*/
|
|
4113
|
-
ctx[0] && create_if_block_4$
|
|
4128
|
+
ctx[0] && create_if_block_4$2(ctx);
|
|
4114
4129
|
return {
|
|
4115
4130
|
c() {
|
|
4116
4131
|
div = element("div");
|
|
@@ -4161,7 +4176,7 @@
|
|
|
4161
4176
|
if (if_block) {
|
|
4162
4177
|
if_block.p(ctx, dirty);
|
|
4163
4178
|
} else {
|
|
4164
|
-
if_block = create_if_block_4$
|
|
4179
|
+
if_block = create_if_block_4$2(ctx);
|
|
4165
4180
|
if_block.c();
|
|
4166
4181
|
if_block.m(div, null);
|
|
4167
4182
|
}
|
|
@@ -4314,7 +4329,7 @@
|
|
|
4314
4329
|
} // (41:6) {#if message}
|
|
4315
4330
|
|
|
4316
4331
|
|
|
4317
|
-
function create_if_block_4$
|
|
4332
|
+
function create_if_block_4$2(ctx) {
|
|
4318
4333
|
let div;
|
|
4319
4334
|
let t;
|
|
4320
4335
|
return {
|
|
@@ -7758,8 +7773,8 @@
|
|
|
7758
7773
|
set_custom_element_data(goa_icon, "inverted",
|
|
7759
7774
|
/*isInverted*/
|
|
7760
7775
|
ctx[5]);
|
|
7761
|
-
set_style(button, "--size",
|
|
7762
|
-
/*
|
|
7776
|
+
set_style(button, "--pading-size",
|
|
7777
|
+
/*_paddingSize*/
|
|
7763
7778
|
ctx[6]);
|
|
7764
7779
|
attr(button, "title",
|
|
7765
7780
|
/*title*/
|
|
@@ -7827,10 +7842,10 @@
|
|
|
7827
7842
|
}
|
|
7828
7843
|
|
|
7829
7844
|
if (dirty &
|
|
7830
|
-
/*
|
|
7845
|
+
/*_paddingSize*/
|
|
7831
7846
|
64) {
|
|
7832
|
-
set_style(button, "--size",
|
|
7833
|
-
/*
|
|
7847
|
+
set_style(button, "--pading-size",
|
|
7848
|
+
/*_paddingSize*/
|
|
7834
7849
|
ctx[6]);
|
|
7835
7850
|
}
|
|
7836
7851
|
|
|
@@ -7893,7 +7908,7 @@
|
|
|
7893
7908
|
let isDisabled;
|
|
7894
7909
|
let isInverted;
|
|
7895
7910
|
|
|
7896
|
-
let
|
|
7911
|
+
let _paddingSize;
|
|
7897
7912
|
|
|
7898
7913
|
let {
|
|
7899
7914
|
icon
|
|
@@ -7954,21 +7969,21 @@
|
|
|
7954
7969
|
if ($$self.$$.dirty &
|
|
7955
7970
|
/*size*/
|
|
7956
7971
|
2) {
|
|
7957
|
-
$$invalidate(6,
|
|
7958
|
-
small: "
|
|
7959
|
-
medium: "
|
|
7960
|
-
large: "
|
|
7972
|
+
$$invalidate(6, _paddingSize = {
|
|
7973
|
+
small: "0.25rem",
|
|
7974
|
+
medium: "0.25rem",
|
|
7975
|
+
large: "0.5rem"
|
|
7961
7976
|
}[size]);
|
|
7962
7977
|
}
|
|
7963
7978
|
};
|
|
7964
7979
|
|
|
7965
|
-
return [icon, size, theme, title, testId, isInverted,
|
|
7980
|
+
return [icon, size, theme, title, testId, isInverted, _paddingSize, isDisabled, css, variant, disabled, inverted];
|
|
7966
7981
|
}
|
|
7967
7982
|
|
|
7968
7983
|
class IconButton extends SvelteElement {
|
|
7969
7984
|
constructor(options) {
|
|
7970
7985
|
super();
|
|
7971
|
-
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;
|
|
7986
|
+
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>`;
|
|
7972
7987
|
init(this, {
|
|
7973
7988
|
target: this.shadowRoot,
|
|
7974
7989
|
props: attribute_to_object(this.attributes),
|
|
@@ -8445,7 +8460,7 @@
|
|
|
8445
8460
|
customElements.define("goa-icon", Icon);
|
|
8446
8461
|
/* libs/web-components/src/components/input/Input.svelte generated by Svelte v3.51.0 */
|
|
8447
8462
|
|
|
8448
|
-
function create_if_block_4(ctx) {
|
|
8463
|
+
function create_if_block_4$1(ctx) {
|
|
8449
8464
|
let div;
|
|
8450
8465
|
let t;
|
|
8451
8466
|
return {
|
|
@@ -8652,7 +8667,7 @@
|
|
|
8652
8667
|
let dispose;
|
|
8653
8668
|
let if_block0 =
|
|
8654
8669
|
/*prefix*/
|
|
8655
|
-
ctx[14] && create_if_block_4(ctx);
|
|
8670
|
+
ctx[14] && create_if_block_4$1(ctx);
|
|
8656
8671
|
let if_block1 =
|
|
8657
8672
|
/*leadingicon*/
|
|
8658
8673
|
ctx[5] && create_if_block_3$2(ctx);
|
|
@@ -8788,7 +8803,7 @@
|
|
|
8788
8803
|
if (if_block0) {
|
|
8789
8804
|
if_block0.p(ctx, dirty);
|
|
8790
8805
|
} else {
|
|
8791
|
-
if_block0 = create_if_block_4(ctx);
|
|
8806
|
+
if_block0 = create_if_block_4$1(ctx);
|
|
8792
8807
|
if_block0.c();
|
|
8793
8808
|
if_block0.m(div0, t0);
|
|
8794
8809
|
}
|
|
@@ -9887,67 +9902,76 @@
|
|
|
9887
9902
|
|
|
9888
9903
|
function create_if_block$4(ctx) {
|
|
9889
9904
|
let goa_focus_trap;
|
|
9890
|
-
let
|
|
9905
|
+
let div5;
|
|
9891
9906
|
let div0;
|
|
9892
9907
|
let t0;
|
|
9893
|
-
let
|
|
9908
|
+
let div4;
|
|
9894
9909
|
let t1;
|
|
9910
|
+
let div3;
|
|
9895
9911
|
let t2;
|
|
9896
|
-
let div1;
|
|
9897
9912
|
let t3;
|
|
9898
|
-
let
|
|
9913
|
+
let div1;
|
|
9899
9914
|
let t4;
|
|
9915
|
+
let slot0;
|
|
9916
|
+
let t5;
|
|
9900
9917
|
let div2;
|
|
9901
|
-
let div3_intro;
|
|
9902
|
-
let div3_outro;
|
|
9903
|
-
let div4_style_value;
|
|
9904
|
-
let noscroll_action;
|
|
9905
9918
|
let div4_intro;
|
|
9906
9919
|
let div4_outro;
|
|
9920
|
+
let div5_style_value;
|
|
9921
|
+
let noscroll_action;
|
|
9922
|
+
let div5_intro;
|
|
9923
|
+
let div5_outro;
|
|
9907
9924
|
let current;
|
|
9908
9925
|
let mounted;
|
|
9909
9926
|
let dispose;
|
|
9910
9927
|
let if_block0 =
|
|
9928
|
+
/*calloutvariant*/
|
|
9929
|
+
ctx[3] !== null && create_if_block_4(ctx);
|
|
9930
|
+
let if_block1 =
|
|
9911
9931
|
/*heading*/
|
|
9912
9932
|
ctx[0] && create_if_block_3(ctx);
|
|
9913
|
-
let
|
|
9933
|
+
let if_block2 =
|
|
9914
9934
|
/*isClosable*/
|
|
9915
|
-
ctx[
|
|
9935
|
+
ctx[4] && create_if_block_2$1(ctx);
|
|
9916
9936
|
|
|
9917
9937
|
function select_block_type(ctx, dirty) {
|
|
9918
9938
|
return create_if_block_1$2;
|
|
9919
9939
|
}
|
|
9920
9940
|
|
|
9921
9941
|
let current_block_type = select_block_type();
|
|
9922
|
-
let
|
|
9942
|
+
let if_block3 = current_block_type(ctx);
|
|
9923
9943
|
return {
|
|
9924
9944
|
c() {
|
|
9925
9945
|
goa_focus_trap = element("goa-focus-trap");
|
|
9926
|
-
|
|
9946
|
+
div5 = element("div");
|
|
9927
9947
|
div0 = element("div");
|
|
9928
9948
|
t0 = space();
|
|
9929
|
-
|
|
9949
|
+
div4 = element("div");
|
|
9930
9950
|
if (if_block0) if_block0.c();
|
|
9931
9951
|
t1 = space();
|
|
9952
|
+
div3 = element("div");
|
|
9932
9953
|
if (if_block1) if_block1.c();
|
|
9933
9954
|
t2 = space();
|
|
9934
|
-
|
|
9935
|
-
if_block2.c();
|
|
9955
|
+
if (if_block2) if_block2.c();
|
|
9936
9956
|
t3 = space();
|
|
9937
|
-
|
|
9957
|
+
div1 = element("div");
|
|
9958
|
+
if_block3.c();
|
|
9938
9959
|
t4 = space();
|
|
9960
|
+
slot0 = element("slot");
|
|
9961
|
+
t5 = space();
|
|
9939
9962
|
div2 = element("div");
|
|
9940
9963
|
div2.innerHTML = `<slot name="actions"></slot>`;
|
|
9941
9964
|
attr(div0, "data-testid", "modal-overlay");
|
|
9942
9965
|
attr(div0, "class", "modal-overlay");
|
|
9943
9966
|
attr(div1, "data-testid", "modal-content");
|
|
9944
9967
|
attr(div1, "class", "modal-content");
|
|
9945
|
-
attr(div2, "data-testid", "modal-actions");
|
|
9946
9968
|
attr(div2, "class", "modal-actions");
|
|
9947
|
-
attr(
|
|
9948
|
-
attr(
|
|
9949
|
-
attr(div4, "class", "modal");
|
|
9950
|
-
attr(
|
|
9969
|
+
attr(div2, "data-testid", "modal-actions");
|
|
9970
|
+
attr(div3, "class", "content");
|
|
9971
|
+
attr(div4, "class", "modal-pane");
|
|
9972
|
+
attr(div5, "data-testid", "modal");
|
|
9973
|
+
attr(div5, "class", "modal");
|
|
9974
|
+
attr(div5, "style", div5_style_value = "" + ((
|
|
9951
9975
|
/*width*/
|
|
9952
9976
|
ctx[2] && `--width: ${
|
|
9953
9977
|
/*width*/
|
|
@@ -9959,29 +9983,32 @@
|
|
|
9959
9983
|
|
|
9960
9984
|
m(target, anchor) {
|
|
9961
9985
|
insert(target, goa_focus_trap, anchor);
|
|
9962
|
-
append(goa_focus_trap,
|
|
9963
|
-
append(
|
|
9964
|
-
append(
|
|
9986
|
+
append(goa_focus_trap, div5);
|
|
9987
|
+
append(div5, div0);
|
|
9988
|
+
append(div5, t0);
|
|
9989
|
+
append(div5, div4);
|
|
9990
|
+
if (if_block0) if_block0.m(div4, null);
|
|
9991
|
+
append(div4, t1);
|
|
9965
9992
|
append(div4, div3);
|
|
9966
|
-
if (if_block0) if_block0.m(div3, null);
|
|
9967
|
-
append(div3, t1);
|
|
9968
9993
|
if (if_block1) if_block1.m(div3, null);
|
|
9969
9994
|
append(div3, t2);
|
|
9995
|
+
if (if_block2) if_block2.m(div3, null);
|
|
9996
|
+
append(div3, t3);
|
|
9970
9997
|
append(div3, div1);
|
|
9971
|
-
|
|
9972
|
-
append(div1,
|
|
9998
|
+
if_block3.m(div1, null);
|
|
9999
|
+
append(div1, t4);
|
|
9973
10000
|
append(div1, slot0);
|
|
9974
|
-
append(div3,
|
|
10001
|
+
append(div3, t5);
|
|
9975
10002
|
append(div3, div2);
|
|
9976
10003
|
current = true;
|
|
9977
10004
|
|
|
9978
10005
|
if (!mounted) {
|
|
9979
10006
|
dispose = [listen(div0, "click",
|
|
9980
10007
|
/*close*/
|
|
9981
|
-
ctx[
|
|
10008
|
+
ctx[8]), action_destroyer(noscroll_action = noscroll.call(null, div5, {
|
|
9982
10009
|
enable:
|
|
9983
10010
|
/*isOpen*/
|
|
9984
|
-
ctx[
|
|
10011
|
+
ctx[7]
|
|
9985
10012
|
}))];
|
|
9986
10013
|
mounted = true;
|
|
9987
10014
|
}
|
|
@@ -9991,14 +10018,14 @@
|
|
|
9991
10018
|
ctx = new_ctx;
|
|
9992
10019
|
|
|
9993
10020
|
if (
|
|
9994
|
-
/*
|
|
9995
|
-
ctx[
|
|
10021
|
+
/*calloutvariant*/
|
|
10022
|
+
ctx[3] !== null) {
|
|
9996
10023
|
if (if_block0) {
|
|
9997
10024
|
if_block0.p(ctx, dirty);
|
|
9998
10025
|
} else {
|
|
9999
|
-
if_block0 =
|
|
10026
|
+
if_block0 = create_if_block_4(ctx);
|
|
10000
10027
|
if_block0.c();
|
|
10001
|
-
if_block0.m(
|
|
10028
|
+
if_block0.m(div4, t1);
|
|
10002
10029
|
}
|
|
10003
10030
|
} else if (if_block0) {
|
|
10004
10031
|
if_block0.d(1);
|
|
@@ -10006,12 +10033,12 @@
|
|
|
10006
10033
|
}
|
|
10007
10034
|
|
|
10008
10035
|
if (
|
|
10009
|
-
/*
|
|
10010
|
-
ctx[
|
|
10036
|
+
/*heading*/
|
|
10037
|
+
ctx[0]) {
|
|
10011
10038
|
if (if_block1) {
|
|
10012
10039
|
if_block1.p(ctx, dirty);
|
|
10013
10040
|
} else {
|
|
10014
|
-
if_block1 =
|
|
10041
|
+
if_block1 = create_if_block_3(ctx);
|
|
10015
10042
|
if_block1.c();
|
|
10016
10043
|
if_block1.m(div3, t2);
|
|
10017
10044
|
}
|
|
@@ -10020,22 +10047,37 @@
|
|
|
10020
10047
|
if_block1 = null;
|
|
10021
10048
|
}
|
|
10022
10049
|
|
|
10050
|
+
if (
|
|
10051
|
+
/*isClosable*/
|
|
10052
|
+
ctx[4]) {
|
|
10053
|
+
if (if_block2) {
|
|
10054
|
+
if_block2.p(ctx, dirty);
|
|
10055
|
+
} else {
|
|
10056
|
+
if_block2 = create_if_block_2$1(ctx);
|
|
10057
|
+
if_block2.c();
|
|
10058
|
+
if_block2.m(div3, t3);
|
|
10059
|
+
}
|
|
10060
|
+
} else if (if_block2) {
|
|
10061
|
+
if_block2.d(1);
|
|
10062
|
+
if_block2 = null;
|
|
10063
|
+
}
|
|
10064
|
+
|
|
10023
10065
|
if (!current || dirty &
|
|
10024
10066
|
/*width*/
|
|
10025
|
-
4 &&
|
|
10067
|
+
4 && div5_style_value !== (div5_style_value = "" + ((
|
|
10026
10068
|
/*width*/
|
|
10027
10069
|
ctx[2] && `--width: ${
|
|
10028
10070
|
/*width*/
|
|
10029
10071
|
ctx[2]};`) + ";"))) {
|
|
10030
|
-
attr(
|
|
10072
|
+
attr(div5, "style", div5_style_value);
|
|
10031
10073
|
}
|
|
10032
10074
|
|
|
10033
10075
|
if (noscroll_action && is_function(noscroll_action.update) && dirty &
|
|
10034
10076
|
/*isOpen*/
|
|
10035
|
-
|
|
10077
|
+
128) noscroll_action.update.call(null, {
|
|
10036
10078
|
enable:
|
|
10037
10079
|
/*isOpen*/
|
|
10038
|
-
ctx[
|
|
10080
|
+
ctx[7]
|
|
10039
10081
|
});
|
|
10040
10082
|
|
|
10041
10083
|
if (!current || dirty &
|
|
@@ -10050,46 +10092,46 @@
|
|
|
10050
10092
|
i(local) {
|
|
10051
10093
|
if (current) return;
|
|
10052
10094
|
add_render_callback(() => {
|
|
10053
|
-
if (
|
|
10054
|
-
|
|
10095
|
+
if (div4_outro) div4_outro.end(1);
|
|
10096
|
+
div4_intro = create_in_transition(div4, fly, {
|
|
10055
10097
|
duration:
|
|
10056
10098
|
/*_transitionTime*/
|
|
10057
|
-
ctx[
|
|
10099
|
+
ctx[6],
|
|
10058
10100
|
y: 200
|
|
10059
10101
|
});
|
|
10060
|
-
|
|
10102
|
+
div4_intro.start();
|
|
10061
10103
|
});
|
|
10062
10104
|
add_render_callback(() => {
|
|
10063
|
-
if (
|
|
10064
|
-
|
|
10105
|
+
if (div5_outro) div5_outro.end(1);
|
|
10106
|
+
div5_intro = create_in_transition(div5, fade, {
|
|
10065
10107
|
duration:
|
|
10066
10108
|
/*_transitionTime*/
|
|
10067
|
-
ctx[
|
|
10109
|
+
ctx[6]
|
|
10068
10110
|
});
|
|
10069
|
-
|
|
10111
|
+
div5_intro.start();
|
|
10070
10112
|
});
|
|
10071
10113
|
current = true;
|
|
10072
10114
|
},
|
|
10073
10115
|
|
|
10074
10116
|
o(local) {
|
|
10075
|
-
if (
|
|
10076
|
-
|
|
10117
|
+
if (div4_intro) div4_intro.invalidate();
|
|
10118
|
+
div4_outro = create_out_transition(div4, fly, {
|
|
10077
10119
|
delay:
|
|
10078
10120
|
/*_transitionTime*/
|
|
10079
|
-
ctx[
|
|
10121
|
+
ctx[6],
|
|
10080
10122
|
duration:
|
|
10081
10123
|
/*_transitionTime*/
|
|
10082
|
-
ctx[
|
|
10124
|
+
ctx[6],
|
|
10083
10125
|
y: -100
|
|
10084
10126
|
});
|
|
10085
|
-
if (
|
|
10086
|
-
|
|
10127
|
+
if (div5_intro) div5_intro.invalidate();
|
|
10128
|
+
div5_outro = create_out_transition(div5, fade, {
|
|
10087
10129
|
delay:
|
|
10088
10130
|
/*_transitionTime*/
|
|
10089
|
-
ctx[
|
|
10131
|
+
ctx[6],
|
|
10090
10132
|
duration:
|
|
10091
10133
|
/*_transitionTime*/
|
|
10092
|
-
ctx[
|
|
10134
|
+
ctx[6]
|
|
10093
10135
|
});
|
|
10094
10136
|
current = false;
|
|
10095
10137
|
},
|
|
@@ -10098,15 +10140,75 @@
|
|
|
10098
10140
|
if (detaching) detach(goa_focus_trap);
|
|
10099
10141
|
if (if_block0) if_block0.d();
|
|
10100
10142
|
if (if_block1) if_block1.d();
|
|
10101
|
-
if_block2.d();
|
|
10102
|
-
|
|
10143
|
+
if (if_block2) if_block2.d();
|
|
10144
|
+
if_block3.d();
|
|
10103
10145
|
if (detaching && div4_outro) div4_outro.end();
|
|
10146
|
+
if (detaching && div5_outro) div5_outro.end();
|
|
10104
10147
|
mounted = false;
|
|
10105
10148
|
run_all(dispose);
|
|
10106
10149
|
}
|
|
10107
10150
|
|
|
10108
10151
|
};
|
|
10109
|
-
} // (
|
|
10152
|
+
} // (65:8) {#if calloutvariant !== null}
|
|
10153
|
+
|
|
10154
|
+
|
|
10155
|
+
function create_if_block_4(ctx) {
|
|
10156
|
+
let div;
|
|
10157
|
+
let goa_icon;
|
|
10158
|
+
let goa_icon_inverted_value;
|
|
10159
|
+
let div_class_value;
|
|
10160
|
+
return {
|
|
10161
|
+
c() {
|
|
10162
|
+
div = element("div");
|
|
10163
|
+
goa_icon = element("goa-icon");
|
|
10164
|
+
set_custom_element_data(goa_icon, "type",
|
|
10165
|
+
/*iconType*/
|
|
10166
|
+
ctx[5]);
|
|
10167
|
+
set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value =
|
|
10168
|
+
/*calloutvariant*/
|
|
10169
|
+
ctx[3] === "important" ? "false" : "true");
|
|
10170
|
+
attr(div, "class", div_class_value = "callout-bar " +
|
|
10171
|
+
/*calloutvariant*/
|
|
10172
|
+
ctx[3]);
|
|
10173
|
+
},
|
|
10174
|
+
|
|
10175
|
+
m(target, anchor) {
|
|
10176
|
+
insert(target, div, anchor);
|
|
10177
|
+
append(div, goa_icon);
|
|
10178
|
+
},
|
|
10179
|
+
|
|
10180
|
+
p(ctx, dirty) {
|
|
10181
|
+
if (dirty &
|
|
10182
|
+
/*iconType*/
|
|
10183
|
+
32) {
|
|
10184
|
+
set_custom_element_data(goa_icon, "type",
|
|
10185
|
+
/*iconType*/
|
|
10186
|
+
ctx[5]);
|
|
10187
|
+
}
|
|
10188
|
+
|
|
10189
|
+
if (dirty &
|
|
10190
|
+
/*calloutvariant*/
|
|
10191
|
+
8 && goa_icon_inverted_value !== (goa_icon_inverted_value =
|
|
10192
|
+
/*calloutvariant*/
|
|
10193
|
+
ctx[3] === "important" ? "false" : "true")) {
|
|
10194
|
+
set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value);
|
|
10195
|
+
}
|
|
10196
|
+
|
|
10197
|
+
if (dirty &
|
|
10198
|
+
/*calloutvariant*/
|
|
10199
|
+
8 && div_class_value !== (div_class_value = "callout-bar " +
|
|
10200
|
+
/*calloutvariant*/
|
|
10201
|
+
ctx[3])) {
|
|
10202
|
+
attr(div, "class", div_class_value);
|
|
10203
|
+
}
|
|
10204
|
+
},
|
|
10205
|
+
|
|
10206
|
+
d(detaching) {
|
|
10207
|
+
if (detaching) detach(div);
|
|
10208
|
+
}
|
|
10209
|
+
|
|
10210
|
+
};
|
|
10211
|
+
} // (74:10) {#if heading}
|
|
10110
10212
|
|
|
10111
10213
|
|
|
10112
10214
|
function create_if_block_3(ctx) {
|
|
@@ -10140,7 +10242,7 @@
|
|
|
10140
10242
|
}
|
|
10141
10243
|
|
|
10142
10244
|
};
|
|
10143
|
-
} // (
|
|
10245
|
+
} // (77:10) {#if isClosable}
|
|
10144
10246
|
|
|
10145
10247
|
|
|
10146
10248
|
function create_if_block_2$1(ctx) {
|
|
@@ -10154,6 +10256,7 @@
|
|
|
10154
10256
|
goa_icon_button = element("goa-icon-button");
|
|
10155
10257
|
set_custom_element_data(goa_icon_button, "data-testid", "modal-close-button");
|
|
10156
10258
|
set_custom_element_data(goa_icon_button, "icon", "close");
|
|
10259
|
+
set_custom_element_data(goa_icon_button, "variant", "nocolor");
|
|
10157
10260
|
attr(div, "class", "modal-close");
|
|
10158
10261
|
},
|
|
10159
10262
|
|
|
@@ -10164,7 +10267,7 @@
|
|
|
10164
10267
|
if (!mounted) {
|
|
10165
10268
|
dispose = listen(goa_icon_button, "click",
|
|
10166
10269
|
/*close*/
|
|
10167
|
-
ctx[
|
|
10270
|
+
ctx[8]);
|
|
10168
10271
|
mounted = true;
|
|
10169
10272
|
}
|
|
10170
10273
|
},
|
|
@@ -10178,7 +10281,7 @@
|
|
|
10178
10281
|
}
|
|
10179
10282
|
|
|
10180
10283
|
};
|
|
10181
|
-
} // (
|
|
10284
|
+
} // (89:12) {#if isScrollable}
|
|
10182
10285
|
|
|
10183
10286
|
|
|
10184
10287
|
function create_if_block_1$2(ctx) {
|
|
@@ -10189,7 +10292,6 @@
|
|
|
10189
10292
|
goa_scrollable.innerHTML = `<slot></slot>`;
|
|
10190
10293
|
set_custom_element_data(goa_scrollable, "direction", "vertical");
|
|
10191
10294
|
set_custom_element_data(goa_scrollable, "height", "50");
|
|
10192
|
-
set_custom_element_data(goa_scrollable, "hpadding", "1.75");
|
|
10193
10295
|
},
|
|
10194
10296
|
|
|
10195
10297
|
m(target, anchor) {
|
|
@@ -10208,7 +10310,7 @@
|
|
|
10208
10310
|
let current;
|
|
10209
10311
|
let if_block =
|
|
10210
10312
|
/*isOpen*/
|
|
10211
|
-
ctx[
|
|
10313
|
+
ctx[7] && create_if_block$4(ctx);
|
|
10212
10314
|
return {
|
|
10213
10315
|
c() {
|
|
10214
10316
|
if (if_block) if_block.c();
|
|
@@ -10225,13 +10327,13 @@
|
|
|
10225
10327
|
p(ctx, [dirty]) {
|
|
10226
10328
|
if (
|
|
10227
10329
|
/*isOpen*/
|
|
10228
|
-
ctx[
|
|
10330
|
+
ctx[7]) {
|
|
10229
10331
|
if (if_block) {
|
|
10230
10332
|
if_block.p(ctx, dirty);
|
|
10231
10333
|
|
|
10232
10334
|
if (dirty &
|
|
10233
10335
|
/*isOpen*/
|
|
10234
|
-
|
|
10336
|
+
128) {
|
|
10235
10337
|
transition_in(if_block, 1);
|
|
10236
10338
|
}
|
|
10237
10339
|
} else {
|
|
@@ -10274,6 +10376,8 @@
|
|
|
10274
10376
|
|
|
10275
10377
|
let _transitionTime;
|
|
10276
10378
|
|
|
10379
|
+
let iconType;
|
|
10380
|
+
const [CALLOUT_VARIANT, validateCalloutVariant] = typeValidator("Callout variant", ["emergency", "important", "information", "success", "event"]);
|
|
10277
10381
|
let {
|
|
10278
10382
|
heading = ""
|
|
10279
10383
|
} = $$props;
|
|
@@ -10289,6 +10393,9 @@
|
|
|
10289
10393
|
let {
|
|
10290
10394
|
width = ""
|
|
10291
10395
|
} = $$props;
|
|
10396
|
+
let {
|
|
10397
|
+
calloutvariant = null
|
|
10398
|
+
} = $$props;
|
|
10292
10399
|
|
|
10293
10400
|
function close(e) {
|
|
10294
10401
|
if (!isClosable) {
|
|
@@ -10301,51 +10408,63 @@
|
|
|
10301
10408
|
e.stopPropagation();
|
|
10302
10409
|
}
|
|
10303
10410
|
|
|
10411
|
+
onMount(() => {
|
|
10412
|
+
validateCalloutVariant(calloutvariant);
|
|
10413
|
+
});
|
|
10414
|
+
|
|
10304
10415
|
$$self.$$set = $$props => {
|
|
10305
10416
|
if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
|
|
10306
|
-
if ('closable' in $$props) $$invalidate(
|
|
10417
|
+
if ('closable' in $$props) $$invalidate(9, closable = $$props.closable);
|
|
10307
10418
|
if ('open' in $$props) $$invalidate(1, open = $$props.open);
|
|
10308
|
-
if ('transition' in $$props) $$invalidate(
|
|
10419
|
+
if ('transition' in $$props) $$invalidate(10, transition = $$props.transition);
|
|
10309
10420
|
if ('width' in $$props) $$invalidate(2, width = $$props.width);
|
|
10421
|
+
if ('calloutvariant' in $$props) $$invalidate(3, calloutvariant = $$props.calloutvariant);
|
|
10310
10422
|
};
|
|
10311
10423
|
|
|
10312
10424
|
$$self.$$.update = () => {
|
|
10313
10425
|
if ($$self.$$.dirty &
|
|
10314
10426
|
/*closable*/
|
|
10315
|
-
|
|
10316
|
-
$$invalidate(
|
|
10427
|
+
512) {
|
|
10428
|
+
$$invalidate(4, isClosable = toBoolean(closable));
|
|
10317
10429
|
}
|
|
10318
10430
|
|
|
10319
10431
|
if ($$self.$$.dirty &
|
|
10320
10432
|
/*open*/
|
|
10321
10433
|
2) {
|
|
10322
|
-
$$invalidate(
|
|
10434
|
+
$$invalidate(7, isOpen = toBoolean(open));
|
|
10323
10435
|
}
|
|
10324
10436
|
|
|
10325
10437
|
if ($$self.$$.dirty &
|
|
10326
10438
|
/*transition*/
|
|
10327
|
-
|
|
10328
|
-
$$invalidate(
|
|
10439
|
+
1024) {
|
|
10440
|
+
$$invalidate(6, _transitionTime = transition === "none" ? 0 : transition === "slow" ? 400 : 200);
|
|
10441
|
+
}
|
|
10442
|
+
|
|
10443
|
+
if ($$self.$$.dirty &
|
|
10444
|
+
/*calloutvariant*/
|
|
10445
|
+
8) {
|
|
10446
|
+
$$invalidate(5, iconType = calloutvariant === "emergency" ? "warning" : calloutvariant === "important" ? "alert-circle" : calloutvariant === "information" ? "information-circle" : calloutvariant === "success" ? "checkmark-circle" : calloutvariant === "event" ? "calendar" : "");
|
|
10329
10447
|
}
|
|
10330
10448
|
};
|
|
10331
10449
|
|
|
10332
|
-
return [heading, open, width, isClosable, _transitionTime, isOpen, close, closable, transition];
|
|
10450
|
+
return [heading, open, width, calloutvariant, isClosable, iconType, _transitionTime, isOpen, close, closable, transition];
|
|
10333
10451
|
}
|
|
10334
10452
|
|
|
10335
10453
|
class Modal extends SvelteElement {
|
|
10336
10454
|
constructor(options) {
|
|
10337
10455
|
super();
|
|
10338
|
-
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:
|
|
10456
|
+
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>`;
|
|
10339
10457
|
init(this, {
|
|
10340
10458
|
target: this.shadowRoot,
|
|
10341
10459
|
props: attribute_to_object(this.attributes),
|
|
10342
10460
|
customElement: true
|
|
10343
10461
|
}, instance$b, create_fragment$d, safe_not_equal, {
|
|
10344
10462
|
heading: 0,
|
|
10345
|
-
closable:
|
|
10463
|
+
closable: 9,
|
|
10346
10464
|
open: 1,
|
|
10347
|
-
transition:
|
|
10348
|
-
width: 2
|
|
10465
|
+
transition: 10,
|
|
10466
|
+
width: 2,
|
|
10467
|
+
calloutvariant: 3
|
|
10349
10468
|
}, null);
|
|
10350
10469
|
|
|
10351
10470
|
if (options) {
|
|
@@ -10361,7 +10480,7 @@
|
|
|
10361
10480
|
}
|
|
10362
10481
|
|
|
10363
10482
|
static get observedAttributes() {
|
|
10364
|
-
return ["heading", "closable", "open", "transition", "width"];
|
|
10483
|
+
return ["heading", "closable", "open", "transition", "width", "calloutvariant"];
|
|
10365
10484
|
}
|
|
10366
10485
|
|
|
10367
10486
|
get heading() {
|
|
@@ -10376,7 +10495,7 @@
|
|
|
10376
10495
|
}
|
|
10377
10496
|
|
|
10378
10497
|
get closable() {
|
|
10379
|
-
return this.$$.ctx[
|
|
10498
|
+
return this.$$.ctx[9];
|
|
10380
10499
|
}
|
|
10381
10500
|
|
|
10382
10501
|
set closable(closable) {
|
|
@@ -10398,7 +10517,7 @@
|
|
|
10398
10517
|
}
|
|
10399
10518
|
|
|
10400
10519
|
get transition() {
|
|
10401
|
-
return this.$$.ctx[
|
|
10520
|
+
return this.$$.ctx[10];
|
|
10402
10521
|
}
|
|
10403
10522
|
|
|
10404
10523
|
set transition(transition) {
|
|
@@ -10419,6 +10538,17 @@
|
|
|
10419
10538
|
flush();
|
|
10420
10539
|
}
|
|
10421
10540
|
|
|
10541
|
+
get calloutvariant() {
|
|
10542
|
+
return this.$$.ctx[3];
|
|
10543
|
+
}
|
|
10544
|
+
|
|
10545
|
+
set calloutvariant(calloutvariant) {
|
|
10546
|
+
this.$$set({
|
|
10547
|
+
calloutvariant
|
|
10548
|
+
});
|
|
10549
|
+
flush();
|
|
10550
|
+
}
|
|
10551
|
+
|
|
10422
10552
|
}
|
|
10423
10553
|
|
|
10424
10554
|
customElements.define("goa-modal", Modal);
|
|
@@ -10428,11 +10558,13 @@
|
|
|
10428
10558
|
let div3;
|
|
10429
10559
|
let div0;
|
|
10430
10560
|
let goa_icon;
|
|
10561
|
+
let goa_icon_inverted_value;
|
|
10431
10562
|
let t0;
|
|
10432
10563
|
let div1;
|
|
10433
10564
|
let t1;
|
|
10434
10565
|
let div2;
|
|
10435
10566
|
let goa_icon_button;
|
|
10567
|
+
let goa_icon_button_inverted_value;
|
|
10436
10568
|
let div3_class_value;
|
|
10437
10569
|
let div3_transition;
|
|
10438
10570
|
let current;
|
|
@@ -10452,11 +10584,16 @@
|
|
|
10452
10584
|
set_custom_element_data(goa_icon, "type",
|
|
10453
10585
|
/*iconType*/
|
|
10454
10586
|
ctx[2]);
|
|
10455
|
-
set_custom_element_data(goa_icon, "inverted",
|
|
10587
|
+
set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value =
|
|
10588
|
+
/*type*/
|
|
10589
|
+
ctx[0] === "important" ? "false" : "true");
|
|
10456
10590
|
attr(div0, "class", "icon");
|
|
10457
10591
|
attr(div1, "class", "content");
|
|
10458
10592
|
set_custom_element_data(goa_icon_button, "icon", "close");
|
|
10459
|
-
set_custom_element_data(goa_icon_button, "
|
|
10593
|
+
set_custom_element_data(goa_icon_button, "variant", "dark");
|
|
10594
|
+
set_custom_element_data(goa_icon_button, "inverted", goa_icon_button_inverted_value =
|
|
10595
|
+
/*type*/
|
|
10596
|
+
ctx[0] === "important" ? "false" : "true");
|
|
10460
10597
|
attr(div2, "class", "close");
|
|
10461
10598
|
attr(div3, "class", div3_class_value = "notification " +
|
|
10462
10599
|
/*type*/
|
|
@@ -10491,6 +10628,22 @@
|
|
|
10491
10628
|
ctx[2]);
|
|
10492
10629
|
}
|
|
10493
10630
|
|
|
10631
|
+
if (!current || dirty &
|
|
10632
|
+
/*type*/
|
|
10633
|
+
1 && goa_icon_inverted_value !== (goa_icon_inverted_value =
|
|
10634
|
+
/*type*/
|
|
10635
|
+
ctx[0] === "important" ? "false" : "true")) {
|
|
10636
|
+
set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value);
|
|
10637
|
+
}
|
|
10638
|
+
|
|
10639
|
+
if (!current || dirty &
|
|
10640
|
+
/*type*/
|
|
10641
|
+
1 && goa_icon_button_inverted_value !== (goa_icon_button_inverted_value =
|
|
10642
|
+
/*type*/
|
|
10643
|
+
ctx[0] === "important" ? "false" : "true")) {
|
|
10644
|
+
set_custom_element_data(goa_icon_button, "inverted", goa_icon_button_inverted_value);
|
|
10645
|
+
}
|
|
10646
|
+
|
|
10494
10647
|
if (!current || dirty &
|
|
10495
10648
|
/*type*/
|
|
10496
10649
|
1 && div3_class_value !== (div3_class_value = "notification " +
|
|
@@ -10593,9 +10746,20 @@
|
|
|
10593
10746
|
function instance$a($$self, $$props, $$invalidate) {
|
|
10594
10747
|
let iconType;
|
|
10595
10748
|
let {
|
|
10596
|
-
type
|
|
10749
|
+
type = ""
|
|
10597
10750
|
} = $$props;
|
|
10751
|
+
const NOTIFICATION_TYPES = ["emergency", "important", "information", "event"]; // type check function
|
|
10752
|
+
|
|
10753
|
+
function isNotificationType(value) {
|
|
10754
|
+
return NOTIFICATION_TYPES.includes(value);
|
|
10755
|
+
}
|
|
10756
|
+
|
|
10598
10757
|
let show = true;
|
|
10758
|
+
onMount(() => {
|
|
10759
|
+
if (!isNotificationType(type)) {
|
|
10760
|
+
console.error("Invalid notification type");
|
|
10761
|
+
}
|
|
10762
|
+
});
|
|
10599
10763
|
|
|
10600
10764
|
function close() {
|
|
10601
10765
|
$$invalidate(1, show = false);
|
|
@@ -10609,7 +10773,7 @@
|
|
|
10609
10773
|
if ($$self.$$.dirty &
|
|
10610
10774
|
/*type*/
|
|
10611
10775
|
1) {
|
|
10612
|
-
$$invalidate(2, iconType = type === "emergency" ? "warning" : type === "
|
|
10776
|
+
$$invalidate(2, iconType = type === "emergency" ? "warning" : type === "important" ? "alert-circle" : type === "information" ? "information-circle" : type === "event" ? "calendar" : "");
|
|
10613
10777
|
}
|
|
10614
10778
|
};
|
|
10615
10779
|
|
|
@@ -10619,7 +10783,7 @@
|
|
|
10619
10783
|
class Notification extends SvelteElement {
|
|
10620
10784
|
constructor(options) {
|
|
10621
10785
|
super();
|
|
10622
|
-
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.notification{padding:1.5rem;display:flex;
|
|
10786
|
+
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>`;
|
|
10623
10787
|
init(this, {
|
|
10624
10788
|
target: this.shadowRoot,
|
|
10625
10789
|
props: attribute_to_object(this.attributes),
|
|
@@ -13996,9 +14160,11 @@
|
|
|
13996
14160
|
|
|
13997
14161
|
var GoAButtonGroup = function GoAButtonGroup(_a) {
|
|
13998
14162
|
var alignment = _a.alignment,
|
|
14163
|
+
gap = _a.gap,
|
|
13999
14164
|
children = _a.children;
|
|
14000
14165
|
return jsxRuntime.jsx("goa-button-group", __assign({
|
|
14001
|
-
alignment: alignment
|
|
14166
|
+
alignment: alignment,
|
|
14167
|
+
gap: gap
|
|
14002
14168
|
}, {
|
|
14003
14169
|
children: children
|
|
14004
14170
|
}), void 0);
|
|
@@ -14637,8 +14803,15 @@
|
|
|
14637
14803
|
width = _a.width,
|
|
14638
14804
|
actions = _a.actions,
|
|
14639
14805
|
transition = _a.transition,
|
|
14806
|
+
type = _a.type,
|
|
14807
|
+
calloutVariant = _a.calloutVariant,
|
|
14640
14808
|
onClose = _a.onClose;
|
|
14641
14809
|
var el = react.useRef(null);
|
|
14810
|
+
react.useEffect(function () {
|
|
14811
|
+
if (type) {
|
|
14812
|
+
console.warn("GoAModal [type] is deprecated.");
|
|
14813
|
+
}
|
|
14814
|
+
}, [type]);
|
|
14642
14815
|
react.useEffect(function () {
|
|
14643
14816
|
if (!el.current) {
|
|
14644
14817
|
return;
|
|
@@ -14662,7 +14835,8 @@
|
|
|
14662
14835
|
closable: !!onClose,
|
|
14663
14836
|
scrollable: true,
|
|
14664
14837
|
width: width,
|
|
14665
|
-
transition: transition
|
|
14838
|
+
transition: transition,
|
|
14839
|
+
calloutVariant: calloutVariant
|
|
14666
14840
|
}, {
|
|
14667
14841
|
children: [actions && jsxRuntime.jsx("div", __assign({
|
|
14668
14842
|
slot: "actions"
|