@abgov/react-components 4.0.0-alpha.62 → 4.0.0-alpha.63
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/container/container.d.ts +3 -5
- package/package.json +1 -1
- package/react-components.esm.js +36 -69
- package/react-components.umd.js +36 -70
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import React, { FC, ReactNode } from 'react';
|
|
2
2
|
declare type ContainerType = 'interactive' | 'non-interactive' | 'info' | 'error' | 'success' | 'warning';
|
|
3
|
-
declare type
|
|
3
|
+
declare type Accent = 'thick' | 'thin' | 'filled';
|
|
4
4
|
declare type ContainerPadding = "relaxed" | "compact";
|
|
5
5
|
interface WCProps {
|
|
6
6
|
type?: ContainerType;
|
|
7
|
-
|
|
8
|
-
colored?: boolean;
|
|
7
|
+
accent?: Accent;
|
|
9
8
|
padding?: ContainerPadding;
|
|
10
9
|
}
|
|
11
10
|
declare global {
|
|
@@ -16,10 +15,9 @@ declare global {
|
|
|
16
15
|
}
|
|
17
16
|
}
|
|
18
17
|
interface Props {
|
|
19
|
-
|
|
18
|
+
accent?: Accent;
|
|
20
19
|
type?: ContainerType;
|
|
21
20
|
title?: ReactNode;
|
|
22
|
-
colored?: boolean;
|
|
23
21
|
padding?: ContainerPadding;
|
|
24
22
|
actions?: ReactNode;
|
|
25
23
|
children?: ReactNode;
|
package/package.json
CHANGED
package/react-components.esm.js
CHANGED
|
@@ -4513,7 +4513,7 @@ function create_fragment$s(ctx) {
|
|
|
4513
4513
|
attr(div0, "class", "title");
|
|
4514
4514
|
attr(div1, "class", "actions");
|
|
4515
4515
|
attr(header, "class", header_class_value = "heading--" +
|
|
4516
|
-
/*
|
|
4516
|
+
/*accent*/
|
|
4517
4517
|
ctx[1]);
|
|
4518
4518
|
attr(div2, "class", "content");
|
|
4519
4519
|
attr(div3, "class", div3_class_value = `
|
|
@@ -4524,10 +4524,10 @@ function create_fragment$s(ctx) {
|
|
|
4524
4524
|
padding--${
|
|
4525
4525
|
/*padding*/
|
|
4526
4526
|
ctx[2]}
|
|
4527
|
+
accent--${
|
|
4528
|
+
/*accent*/
|
|
4529
|
+
ctx[1]}
|
|
4527
4530
|
`);
|
|
4528
|
-
toggle_class(div3, "colored",
|
|
4529
|
-
/*_colored*/
|
|
4530
|
-
ctx[3]);
|
|
4531
4531
|
},
|
|
4532
4532
|
|
|
4533
4533
|
m(target, anchor) {
|
|
@@ -4542,16 +4542,16 @@ function create_fragment$s(ctx) {
|
|
|
4542
4542
|
|
|
4543
4543
|
p(ctx, [dirty]) {
|
|
4544
4544
|
if (dirty &
|
|
4545
|
-
/*
|
|
4545
|
+
/*accent*/
|
|
4546
4546
|
2 && header_class_value !== (header_class_value = "heading--" +
|
|
4547
|
-
/*
|
|
4547
|
+
/*accent*/
|
|
4548
4548
|
ctx[1])) {
|
|
4549
4549
|
attr(header, "class", header_class_value);
|
|
4550
4550
|
}
|
|
4551
4551
|
|
|
4552
4552
|
if (dirty &
|
|
4553
|
-
/*type, padding*/
|
|
4554
|
-
|
|
4553
|
+
/*type, padding, accent*/
|
|
4554
|
+
7 && div3_class_value !== (div3_class_value = `
|
|
4555
4555
|
goa-container
|
|
4556
4556
|
goa-container--${
|
|
4557
4557
|
/*type*/
|
|
@@ -4559,17 +4559,12 @@ function create_fragment$s(ctx) {
|
|
|
4559
4559
|
padding--${
|
|
4560
4560
|
/*padding*/
|
|
4561
4561
|
ctx[2]}
|
|
4562
|
+
accent--${
|
|
4563
|
+
/*accent*/
|
|
4564
|
+
ctx[1]}
|
|
4562
4565
|
`)) {
|
|
4563
4566
|
attr(div3, "class", div3_class_value);
|
|
4564
4567
|
}
|
|
4565
|
-
|
|
4566
|
-
if (dirty &
|
|
4567
|
-
/*type, padding, _colored*/
|
|
4568
|
-
13) {
|
|
4569
|
-
toggle_class(div3, "colored",
|
|
4570
|
-
/*_colored*/
|
|
4571
|
-
ctx[3]);
|
|
4572
|
-
}
|
|
4573
4568
|
},
|
|
4574
4569
|
|
|
4575
4570
|
i: noop,
|
|
@@ -4583,16 +4578,11 @@ function create_fragment$s(ctx) {
|
|
|
4583
4578
|
}
|
|
4584
4579
|
|
|
4585
4580
|
function instance$q($$self, $$props, $$invalidate) {
|
|
4586
|
-
let _colored;
|
|
4587
|
-
|
|
4588
|
-
let {
|
|
4589
|
-
type = 'non-interactive'
|
|
4590
|
-
} = $$props;
|
|
4591
4581
|
let {
|
|
4592
|
-
|
|
4582
|
+
type = 'interactive'
|
|
4593
4583
|
} = $$props;
|
|
4594
4584
|
let {
|
|
4595
|
-
|
|
4585
|
+
accent = 'filled'
|
|
4596
4586
|
} = $$props;
|
|
4597
4587
|
let {
|
|
4598
4588
|
padding = "relaxed"
|
|
@@ -4600,34 +4590,24 @@ function instance$q($$self, $$props, $$invalidate) {
|
|
|
4600
4590
|
|
|
4601
4591
|
$$self.$$set = $$props => {
|
|
4602
4592
|
if ('type' in $$props) $$invalidate(0, type = $$props.type);
|
|
4603
|
-
if ('
|
|
4604
|
-
if ('headingsize' in $$props) $$invalidate(1, headingsize = $$props.headingsize);
|
|
4593
|
+
if ('accent' in $$props) $$invalidate(1, accent = $$props.accent);
|
|
4605
4594
|
if ('padding' in $$props) $$invalidate(2, padding = $$props.padding);
|
|
4606
4595
|
};
|
|
4607
4596
|
|
|
4608
|
-
|
|
4609
|
-
if ($$self.$$.dirty &
|
|
4610
|
-
/*colored*/
|
|
4611
|
-
16) {
|
|
4612
|
-
$$invalidate(3, _colored = toBoolean(colored));
|
|
4613
|
-
}
|
|
4614
|
-
};
|
|
4615
|
-
|
|
4616
|
-
return [type, headingsize, padding, _colored, colored];
|
|
4597
|
+
return [type, accent, padding];
|
|
4617
4598
|
}
|
|
4618
4599
|
|
|
4619
4600
|
class Container extends SvelteElement {
|
|
4620
4601
|
constructor(options) {
|
|
4621
4602
|
super();
|
|
4622
|
-
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family);font-size:var(--fs-base)}.goa-container{margin-bottom:1rem;box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--fs-base);border-width:1px;border-style:solid;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.content{border-bottom:1px solid var(--color-gray-200);border-left:1px solid var(--color-gray-200);border-right:1px solid var(--color-gray-200);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.goa-container--non-interactive.
|
|
4603
|
+
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family);font-size:var(--fs-base)}.goa-container{margin-bottom:1rem;box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--fs-base);border-width:1px;border-style:solid;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.content{border-bottom:1px solid var(--color-gray-200);border-left:1px solid var(--color-gray-200);border-right:1px solid var(--color-gray-200);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.goa-container--non-interactive.accent--filled .content{border-color:var(--color-gray-200);background-color:var(--color-gray-100)}.goa-container--important.accent--filled .content{border-color:var(--goa-color-status-warning);background-color:var(--goa-color-status-warning-50)}.goa-container--error.accent--filled .content{border-color:var(--goa-color-status-emergency);background-color:var(--goa-color-status-emergency-50)}.goa-container--success.accent--filled .content{border-color:var(--goa-color-status-success);background-color:var(--goa-color-status-success-50)}.goa-container--info.accent--filled .content{border-color:var(--goa-color-status-info);background-color:var(--goa-color-status-info-50)}.title,.actions{padding:0.5rem 0}.padding--relaxed header{padding:0 1.5rem}.padding--relaxed .content{padding:1.5rem}.padding--compact header,.padding--compact .content{padding:0 1rem}.padding--compact header{padding:0 1rem}.padding--compact .content{padding:1rem}@media screen and (max-width: 480px){.padding--relaxed header{padding:0 1rem}.padding--relaxed .content{padding:1rem}}.goa-container--non-interactive header{background-color:var(--color-gray-100);border-color:var(--color-gray-200);color:var(--color-black)}.goa-container--interactive header{background-color:var(--goa-color-brand);border-color:var(--goa-color-brand);color:var(--color-white)}.goa-container--info header{background-color:var(--goa-color-status-info);border-color:var(--goa-color-status-info);color:var(--color-white)}.goa-container--error header{background-color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);color:var(--color-white)}.goa-container--success header{background-color:var(--goa-color-status-success);border-color:var(--goa-color-status-success);color:var(--color-white)}.goa-container--important header{background-color:var(--goa-color-status-warning);border-color:var(--goa-color-status-warning);color:var(--color-white)}.heading--thick{padding:0.5rem 1.5rem;max-height:3rem;min-height:1rem}.heading--thick .title{line-height:2rem}.heading--thin{height:0.5rem}.heading--filled{display:none}.heading--filled~.content{border-top:1px solid var(--color-gray-200);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.heading--thin .title,.heading--thin .actions{display:none}.actions{display:flex;align-items:center}</style>`;
|
|
4623
4604
|
init(this, {
|
|
4624
4605
|
target: this.shadowRoot,
|
|
4625
4606
|
props: attribute_to_object(this.attributes),
|
|
4626
4607
|
customElement: true
|
|
4627
4608
|
}, instance$q, create_fragment$s, safe_not_equal, {
|
|
4628
4609
|
type: 0,
|
|
4629
|
-
|
|
4630
|
-
headingsize: 1,
|
|
4610
|
+
accent: 1,
|
|
4631
4611
|
padding: 2
|
|
4632
4612
|
}, null);
|
|
4633
4613
|
|
|
@@ -4644,7 +4624,7 @@ class Container extends SvelteElement {
|
|
|
4644
4624
|
}
|
|
4645
4625
|
|
|
4646
4626
|
static get observedAttributes() {
|
|
4647
|
-
return ["type", "
|
|
4627
|
+
return ["type", "accent", "padding"];
|
|
4648
4628
|
}
|
|
4649
4629
|
|
|
4650
4630
|
get type() {
|
|
@@ -4658,24 +4638,13 @@ class Container extends SvelteElement {
|
|
|
4658
4638
|
flush();
|
|
4659
4639
|
}
|
|
4660
4640
|
|
|
4661
|
-
get
|
|
4662
|
-
return this.$$.ctx[4];
|
|
4663
|
-
}
|
|
4664
|
-
|
|
4665
|
-
set colored(colored) {
|
|
4666
|
-
this.$$set({
|
|
4667
|
-
colored
|
|
4668
|
-
});
|
|
4669
|
-
flush();
|
|
4670
|
-
}
|
|
4671
|
-
|
|
4672
|
-
get headingsize() {
|
|
4641
|
+
get accent() {
|
|
4673
4642
|
return this.$$.ctx[1];
|
|
4674
4643
|
}
|
|
4675
4644
|
|
|
4676
|
-
set
|
|
4645
|
+
set accent(accent) {
|
|
4677
4646
|
this.$$set({
|
|
4678
|
-
|
|
4647
|
+
accent
|
|
4679
4648
|
});
|
|
4680
4649
|
flush();
|
|
4681
4650
|
}
|
|
@@ -13894,8 +13863,8 @@ function create_fragment$1(ctx) {
|
|
|
13894
13863
|
set_custom_element_data(goa_container, "type",
|
|
13895
13864
|
/*type*/
|
|
13896
13865
|
ctx[3]);
|
|
13897
|
-
set_custom_element_data(goa_container, "
|
|
13898
|
-
/*
|
|
13866
|
+
set_custom_element_data(goa_container, "accent",
|
|
13867
|
+
/*accent*/
|
|
13899
13868
|
ctx[4]);
|
|
13900
13869
|
},
|
|
13901
13870
|
|
|
@@ -13957,10 +13926,10 @@ function create_fragment$1(ctx) {
|
|
|
13957
13926
|
}
|
|
13958
13927
|
|
|
13959
13928
|
if (dirty &
|
|
13960
|
-
/*
|
|
13929
|
+
/*accent*/
|
|
13961
13930
|
16) {
|
|
13962
|
-
set_custom_element_data(goa_container, "
|
|
13963
|
-
/*
|
|
13931
|
+
set_custom_element_data(goa_container, "accent",
|
|
13932
|
+
/*accent*/
|
|
13964
13933
|
ctx[4]);
|
|
13965
13934
|
}
|
|
13966
13935
|
},
|
|
@@ -13991,7 +13960,7 @@ function instance$1($$self, $$props, $$invalidate) {
|
|
|
13991
13960
|
type = "default"
|
|
13992
13961
|
} = $$props;
|
|
13993
13962
|
let {
|
|
13994
|
-
|
|
13963
|
+
accent = "thick"
|
|
13995
13964
|
} = $$props;
|
|
13996
13965
|
|
|
13997
13966
|
$$self.$$set = $$props => {
|
|
@@ -13999,10 +13968,10 @@ function instance$1($$self, $$props, $$invalidate) {
|
|
|
13999
13968
|
if ('actions' in $$props) $$invalidate(1, actions = $$props.actions);
|
|
14000
13969
|
if ('content' in $$props) $$invalidate(2, content = $$props.content);
|
|
14001
13970
|
if ('type' in $$props) $$invalidate(3, type = $$props.type);
|
|
14002
|
-
if ('
|
|
13971
|
+
if ('accent' in $$props) $$invalidate(4, accent = $$props.accent);
|
|
14003
13972
|
};
|
|
14004
13973
|
|
|
14005
|
-
return [title, actions, content, type,
|
|
13974
|
+
return [title, actions, content, type, accent];
|
|
14006
13975
|
}
|
|
14007
13976
|
|
|
14008
13977
|
class ContainerWrapper_test extends SvelteElement {
|
|
@@ -14017,7 +13986,7 @@ class ContainerWrapper_test extends SvelteElement {
|
|
|
14017
13986
|
actions: 1,
|
|
14018
13987
|
content: 2,
|
|
14019
13988
|
type: 3,
|
|
14020
|
-
|
|
13989
|
+
accent: 4
|
|
14021
13990
|
}, null);
|
|
14022
13991
|
|
|
14023
13992
|
if (options) {
|
|
@@ -14033,7 +14002,7 @@ class ContainerWrapper_test extends SvelteElement {
|
|
|
14033
14002
|
}
|
|
14034
14003
|
|
|
14035
14004
|
static get observedAttributes() {
|
|
14036
|
-
return ["title", "actions", "content", "type", "
|
|
14005
|
+
return ["title", "actions", "content", "type", "accent"];
|
|
14037
14006
|
}
|
|
14038
14007
|
|
|
14039
14008
|
get title() {
|
|
@@ -14080,13 +14049,13 @@ class ContainerWrapper_test extends SvelteElement {
|
|
|
14080
14049
|
flush();
|
|
14081
14050
|
}
|
|
14082
14051
|
|
|
14083
|
-
get
|
|
14052
|
+
get accent() {
|
|
14084
14053
|
return this.$$.ctx[4];
|
|
14085
14054
|
}
|
|
14086
14055
|
|
|
14087
|
-
set
|
|
14056
|
+
set accent(accent) {
|
|
14088
14057
|
this.$$set({
|
|
14089
|
-
|
|
14058
|
+
accent
|
|
14090
14059
|
});
|
|
14091
14060
|
flush();
|
|
14092
14061
|
}
|
|
@@ -14481,9 +14450,8 @@ const GoACircularProgress = ({
|
|
|
14481
14450
|
};
|
|
14482
14451
|
|
|
14483
14452
|
const GoAContainer = ({
|
|
14484
|
-
|
|
14453
|
+
accent,
|
|
14485
14454
|
title,
|
|
14486
|
-
colored: _colored = false,
|
|
14487
14455
|
padding,
|
|
14488
14456
|
children,
|
|
14489
14457
|
actions,
|
|
@@ -14492,8 +14460,7 @@ const GoAContainer = ({
|
|
|
14492
14460
|
return jsxs("goa-container", Object.assign({
|
|
14493
14461
|
type: type,
|
|
14494
14462
|
padding: padding,
|
|
14495
|
-
|
|
14496
|
-
colored: _colored
|
|
14463
|
+
accent: accent
|
|
14497
14464
|
}, {
|
|
14498
14465
|
children: [title && jsx("div", Object.assign({
|
|
14499
14466
|
slot: "title"
|
package/react-components.umd.js
CHANGED
|
@@ -4555,7 +4555,7 @@
|
|
|
4555
4555
|
attr(div0, "class", "title");
|
|
4556
4556
|
attr(div1, "class", "actions");
|
|
4557
4557
|
attr(header, "class", header_class_value = "heading--" +
|
|
4558
|
-
/*
|
|
4558
|
+
/*accent*/
|
|
4559
4559
|
ctx[1]);
|
|
4560
4560
|
attr(div2, "class", "content");
|
|
4561
4561
|
attr(div3, "class", div3_class_value = `
|
|
@@ -4566,10 +4566,10 @@
|
|
|
4566
4566
|
padding--${
|
|
4567
4567
|
/*padding*/
|
|
4568
4568
|
ctx[2]}
|
|
4569
|
+
accent--${
|
|
4570
|
+
/*accent*/
|
|
4571
|
+
ctx[1]}
|
|
4569
4572
|
`);
|
|
4570
|
-
toggle_class(div3, "colored",
|
|
4571
|
-
/*_colored*/
|
|
4572
|
-
ctx[3]);
|
|
4573
4573
|
},
|
|
4574
4574
|
|
|
4575
4575
|
m(target, anchor) {
|
|
@@ -4584,16 +4584,16 @@
|
|
|
4584
4584
|
|
|
4585
4585
|
p(ctx, [dirty]) {
|
|
4586
4586
|
if (dirty &
|
|
4587
|
-
/*
|
|
4587
|
+
/*accent*/
|
|
4588
4588
|
2 && header_class_value !== (header_class_value = "heading--" +
|
|
4589
|
-
/*
|
|
4589
|
+
/*accent*/
|
|
4590
4590
|
ctx[1])) {
|
|
4591
4591
|
attr(header, "class", header_class_value);
|
|
4592
4592
|
}
|
|
4593
4593
|
|
|
4594
4594
|
if (dirty &
|
|
4595
|
-
/*type, padding*/
|
|
4596
|
-
|
|
4595
|
+
/*type, padding, accent*/
|
|
4596
|
+
7 && div3_class_value !== (div3_class_value = `
|
|
4597
4597
|
goa-container
|
|
4598
4598
|
goa-container--${
|
|
4599
4599
|
/*type*/
|
|
@@ -4601,17 +4601,12 @@
|
|
|
4601
4601
|
padding--${
|
|
4602
4602
|
/*padding*/
|
|
4603
4603
|
ctx[2]}
|
|
4604
|
+
accent--${
|
|
4605
|
+
/*accent*/
|
|
4606
|
+
ctx[1]}
|
|
4604
4607
|
`)) {
|
|
4605
4608
|
attr(div3, "class", div3_class_value);
|
|
4606
4609
|
}
|
|
4607
|
-
|
|
4608
|
-
if (dirty &
|
|
4609
|
-
/*type, padding, _colored*/
|
|
4610
|
-
13) {
|
|
4611
|
-
toggle_class(div3, "colored",
|
|
4612
|
-
/*_colored*/
|
|
4613
|
-
ctx[3]);
|
|
4614
|
-
}
|
|
4615
4610
|
},
|
|
4616
4611
|
|
|
4617
4612
|
i: noop,
|
|
@@ -4625,16 +4620,11 @@
|
|
|
4625
4620
|
}
|
|
4626
4621
|
|
|
4627
4622
|
function instance$q($$self, $$props, $$invalidate) {
|
|
4628
|
-
let _colored;
|
|
4629
|
-
|
|
4630
|
-
let {
|
|
4631
|
-
type = 'non-interactive'
|
|
4632
|
-
} = $$props;
|
|
4633
4623
|
let {
|
|
4634
|
-
|
|
4624
|
+
type = 'interactive'
|
|
4635
4625
|
} = $$props;
|
|
4636
4626
|
let {
|
|
4637
|
-
|
|
4627
|
+
accent = 'filled'
|
|
4638
4628
|
} = $$props;
|
|
4639
4629
|
let {
|
|
4640
4630
|
padding = "relaxed"
|
|
@@ -4642,34 +4632,24 @@
|
|
|
4642
4632
|
|
|
4643
4633
|
$$self.$$set = $$props => {
|
|
4644
4634
|
if ('type' in $$props) $$invalidate(0, type = $$props.type);
|
|
4645
|
-
if ('
|
|
4646
|
-
if ('headingsize' in $$props) $$invalidate(1, headingsize = $$props.headingsize);
|
|
4635
|
+
if ('accent' in $$props) $$invalidate(1, accent = $$props.accent);
|
|
4647
4636
|
if ('padding' in $$props) $$invalidate(2, padding = $$props.padding);
|
|
4648
4637
|
};
|
|
4649
4638
|
|
|
4650
|
-
|
|
4651
|
-
if ($$self.$$.dirty &
|
|
4652
|
-
/*colored*/
|
|
4653
|
-
16) {
|
|
4654
|
-
$$invalidate(3, _colored = toBoolean(colored));
|
|
4655
|
-
}
|
|
4656
|
-
};
|
|
4657
|
-
|
|
4658
|
-
return [type, headingsize, padding, _colored, colored];
|
|
4639
|
+
return [type, accent, padding];
|
|
4659
4640
|
}
|
|
4660
4641
|
|
|
4661
4642
|
class Container extends SvelteElement {
|
|
4662
4643
|
constructor(options) {
|
|
4663
4644
|
super();
|
|
4664
|
-
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family);font-size:var(--fs-base)}.goa-container{margin-bottom:1rem;box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--fs-base);border-width:1px;border-style:solid;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.content{border-bottom:1px solid var(--color-gray-200);border-left:1px solid var(--color-gray-200);border-right:1px solid var(--color-gray-200);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.goa-container--non-interactive.
|
|
4645
|
+
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family);font-size:var(--fs-base)}.goa-container{margin-bottom:1rem;box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--fs-base);border-width:1px;border-style:solid;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.content{border-bottom:1px solid var(--color-gray-200);border-left:1px solid var(--color-gray-200);border-right:1px solid var(--color-gray-200);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.goa-container--non-interactive.accent--filled .content{border-color:var(--color-gray-200);background-color:var(--color-gray-100)}.goa-container--important.accent--filled .content{border-color:var(--goa-color-status-warning);background-color:var(--goa-color-status-warning-50)}.goa-container--error.accent--filled .content{border-color:var(--goa-color-status-emergency);background-color:var(--goa-color-status-emergency-50)}.goa-container--success.accent--filled .content{border-color:var(--goa-color-status-success);background-color:var(--goa-color-status-success-50)}.goa-container--info.accent--filled .content{border-color:var(--goa-color-status-info);background-color:var(--goa-color-status-info-50)}.title,.actions{padding:0.5rem 0}.padding--relaxed header{padding:0 1.5rem}.padding--relaxed .content{padding:1.5rem}.padding--compact header,.padding--compact .content{padding:0 1rem}.padding--compact header{padding:0 1rem}.padding--compact .content{padding:1rem}@media screen and (max-width: 480px){.padding--relaxed header{padding:0 1rem}.padding--relaxed .content{padding:1rem}}.goa-container--non-interactive header{background-color:var(--color-gray-100);border-color:var(--color-gray-200);color:var(--color-black)}.goa-container--interactive header{background-color:var(--goa-color-brand);border-color:var(--goa-color-brand);color:var(--color-white)}.goa-container--info header{background-color:var(--goa-color-status-info);border-color:var(--goa-color-status-info);color:var(--color-white)}.goa-container--error header{background-color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);color:var(--color-white)}.goa-container--success header{background-color:var(--goa-color-status-success);border-color:var(--goa-color-status-success);color:var(--color-white)}.goa-container--important header{background-color:var(--goa-color-status-warning);border-color:var(--goa-color-status-warning);color:var(--color-white)}.heading--thick{padding:0.5rem 1.5rem;max-height:3rem;min-height:1rem}.heading--thick .title{line-height:2rem}.heading--thin{height:0.5rem}.heading--filled{display:none}.heading--filled~.content{border-top:1px solid var(--color-gray-200);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.heading--thin .title,.heading--thin .actions{display:none}.actions{display:flex;align-items:center}</style>`;
|
|
4665
4646
|
init(this, {
|
|
4666
4647
|
target: this.shadowRoot,
|
|
4667
4648
|
props: attribute_to_object(this.attributes),
|
|
4668
4649
|
customElement: true
|
|
4669
4650
|
}, instance$q, create_fragment$s, safe_not_equal, {
|
|
4670
4651
|
type: 0,
|
|
4671
|
-
|
|
4672
|
-
headingsize: 1,
|
|
4652
|
+
accent: 1,
|
|
4673
4653
|
padding: 2
|
|
4674
4654
|
}, null);
|
|
4675
4655
|
|
|
@@ -4686,7 +4666,7 @@
|
|
|
4686
4666
|
}
|
|
4687
4667
|
|
|
4688
4668
|
static get observedAttributes() {
|
|
4689
|
-
return ["type", "
|
|
4669
|
+
return ["type", "accent", "padding"];
|
|
4690
4670
|
}
|
|
4691
4671
|
|
|
4692
4672
|
get type() {
|
|
@@ -4700,24 +4680,13 @@
|
|
|
4700
4680
|
flush();
|
|
4701
4681
|
}
|
|
4702
4682
|
|
|
4703
|
-
get
|
|
4704
|
-
return this.$$.ctx[4];
|
|
4705
|
-
}
|
|
4706
|
-
|
|
4707
|
-
set colored(colored) {
|
|
4708
|
-
this.$$set({
|
|
4709
|
-
colored
|
|
4710
|
-
});
|
|
4711
|
-
flush();
|
|
4712
|
-
}
|
|
4713
|
-
|
|
4714
|
-
get headingsize() {
|
|
4683
|
+
get accent() {
|
|
4715
4684
|
return this.$$.ctx[1];
|
|
4716
4685
|
}
|
|
4717
4686
|
|
|
4718
|
-
set
|
|
4687
|
+
set accent(accent) {
|
|
4719
4688
|
this.$$set({
|
|
4720
|
-
|
|
4689
|
+
accent
|
|
4721
4690
|
});
|
|
4722
4691
|
flush();
|
|
4723
4692
|
}
|
|
@@ -13943,8 +13912,8 @@
|
|
|
13943
13912
|
set_custom_element_data(goa_container, "type",
|
|
13944
13913
|
/*type*/
|
|
13945
13914
|
ctx[3]);
|
|
13946
|
-
set_custom_element_data(goa_container, "
|
|
13947
|
-
/*
|
|
13915
|
+
set_custom_element_data(goa_container, "accent",
|
|
13916
|
+
/*accent*/
|
|
13948
13917
|
ctx[4]);
|
|
13949
13918
|
},
|
|
13950
13919
|
|
|
@@ -14006,10 +13975,10 @@
|
|
|
14006
13975
|
}
|
|
14007
13976
|
|
|
14008
13977
|
if (dirty &
|
|
14009
|
-
/*
|
|
13978
|
+
/*accent*/
|
|
14010
13979
|
16) {
|
|
14011
|
-
set_custom_element_data(goa_container, "
|
|
14012
|
-
/*
|
|
13980
|
+
set_custom_element_data(goa_container, "accent",
|
|
13981
|
+
/*accent*/
|
|
14013
13982
|
ctx[4]);
|
|
14014
13983
|
}
|
|
14015
13984
|
},
|
|
@@ -14040,7 +14009,7 @@
|
|
|
14040
14009
|
type = "default"
|
|
14041
14010
|
} = $$props;
|
|
14042
14011
|
let {
|
|
14043
|
-
|
|
14012
|
+
accent = "thick"
|
|
14044
14013
|
} = $$props;
|
|
14045
14014
|
|
|
14046
14015
|
$$self.$$set = $$props => {
|
|
@@ -14048,10 +14017,10 @@
|
|
|
14048
14017
|
if ('actions' in $$props) $$invalidate(1, actions = $$props.actions);
|
|
14049
14018
|
if ('content' in $$props) $$invalidate(2, content = $$props.content);
|
|
14050
14019
|
if ('type' in $$props) $$invalidate(3, type = $$props.type);
|
|
14051
|
-
if ('
|
|
14020
|
+
if ('accent' in $$props) $$invalidate(4, accent = $$props.accent);
|
|
14052
14021
|
};
|
|
14053
14022
|
|
|
14054
|
-
return [title, actions, content, type,
|
|
14023
|
+
return [title, actions, content, type, accent];
|
|
14055
14024
|
}
|
|
14056
14025
|
|
|
14057
14026
|
class ContainerWrapper_test extends SvelteElement {
|
|
@@ -14066,7 +14035,7 @@
|
|
|
14066
14035
|
actions: 1,
|
|
14067
14036
|
content: 2,
|
|
14068
14037
|
type: 3,
|
|
14069
|
-
|
|
14038
|
+
accent: 4
|
|
14070
14039
|
}, null);
|
|
14071
14040
|
|
|
14072
14041
|
if (options) {
|
|
@@ -14082,7 +14051,7 @@
|
|
|
14082
14051
|
}
|
|
14083
14052
|
|
|
14084
14053
|
static get observedAttributes() {
|
|
14085
|
-
return ["title", "actions", "content", "type", "
|
|
14054
|
+
return ["title", "actions", "content", "type", "accent"];
|
|
14086
14055
|
}
|
|
14087
14056
|
|
|
14088
14057
|
get title() {
|
|
@@ -14129,13 +14098,13 @@
|
|
|
14129
14098
|
flush();
|
|
14130
14099
|
}
|
|
14131
14100
|
|
|
14132
|
-
get
|
|
14101
|
+
get accent() {
|
|
14133
14102
|
return this.$$.ctx[4];
|
|
14134
14103
|
}
|
|
14135
14104
|
|
|
14136
|
-
set
|
|
14105
|
+
set accent(accent) {
|
|
14137
14106
|
this.$$set({
|
|
14138
|
-
|
|
14107
|
+
accent
|
|
14139
14108
|
});
|
|
14140
14109
|
flush();
|
|
14141
14110
|
}
|
|
@@ -14562,10 +14531,8 @@
|
|
|
14562
14531
|
};
|
|
14563
14532
|
|
|
14564
14533
|
var GoAContainer = function GoAContainer(_a) {
|
|
14565
|
-
var
|
|
14534
|
+
var accent = _a.accent,
|
|
14566
14535
|
title = _a.title,
|
|
14567
|
-
_b = _a.colored,
|
|
14568
|
-
colored = _b === void 0 ? false : _b,
|
|
14569
14536
|
padding = _a.padding,
|
|
14570
14537
|
children = _a.children,
|
|
14571
14538
|
actions = _a.actions,
|
|
@@ -14573,8 +14540,7 @@
|
|
|
14573
14540
|
return jsxRuntime.jsxs("goa-container", __assign({
|
|
14574
14541
|
type: type,
|
|
14575
14542
|
padding: padding,
|
|
14576
|
-
|
|
14577
|
-
colored: colored
|
|
14543
|
+
accent: accent
|
|
14578
14544
|
}, {
|
|
14579
14545
|
children: [title && jsxRuntime.jsx("div", __assign({
|
|
14580
14546
|
slot: "title"
|