@gov-design-system-ce/components 0.0.51 → 0.0.53
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/dist/cjs/{constants-0883e74c.js → constants-393e915a.js} +2 -2
- package/dist/cjs/{constants-0883e74c.js.map → constants-393e915a.js.map} +1 -1
- package/dist/cjs/core.cjs.js +1 -1
- package/dist/cjs/gov-accordion-item.cjs.entry.js +13 -37
- package/dist/cjs/gov-accordion-item.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-accordion.cjs.entry.js +2 -2
- package/dist/cjs/gov-accordion.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-app.cjs.entry.js +158 -326
- package/dist/cjs/gov-app.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-backdrop.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-badge.cjs.entry.js +5 -11
- package/dist/cjs/gov-badge.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-breadcrumbs.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-control-group.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-form-control.cjs.entry.js +1 -1
- package/dist/cjs/gov-form-control.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-form-group.cjs.entry.js +7 -1
- package/dist/cjs/gov-form-group.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-form-input.cjs.entry.js +14 -12
- package/dist/cjs/gov-form-input.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-icon.cjs.entry.js +5 -3
- package/dist/cjs/gov-icon.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-modal.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-prompt.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-spacer.cjs.entry.js +2 -2
- package/dist/cjs/gov-spacer.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-statsbar.cjs.entry.js +3 -3
- package/dist/cjs/gov-statsbar.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-tabs.cjs.entry.js +1 -1
- package/dist/cjs/gov-tabs.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/gov-accordion/constants.js +1 -1
- package/dist/collection/components/gov-accordion/constants.js.map +1 -1
- package/dist/collection/components/gov-accordion/gov-accordion-item.css +82 -84
- package/dist/collection/components/gov-accordion/gov-accordion-item.js +16 -117
- package/dist/collection/components/gov-accordion/gov-accordion-item.js.map +1 -1
- package/dist/collection/components/gov-accordion/gov-accordion.js +1 -1
- package/dist/collection/components/gov-accordion/gov-accordion.js.map +1 -1
- package/dist/collection/components/gov-backdrop/gov-backdrop.js +1 -1
- package/dist/collection/components/gov-backdrop/gov-backdrop.js.map +1 -1
- package/dist/collection/components/gov-badge/gov-badge.css +20 -20
- package/dist/collection/components/gov-badge/gov-badge.js +8 -40
- package/dist/collection/components/gov-badge/gov-badge.js.map +1 -1
- package/dist/collection/components/gov-breadcrumbs/gov-breadcrumbs.js +3 -3
- package/dist/collection/components/gov-breadcrumbs/gov-breadcrumbs.js.map +1 -1
- package/dist/collection/components/gov-control-group/constants.js +1 -1
- package/dist/collection/components/gov-control-group/constants.js.map +1 -1
- package/dist/collection/components/gov-control-group/gov-control-group.js +3 -3
- package/dist/collection/components/gov-control-group/gov-control-group.js.map +1 -1
- package/dist/collection/components/gov-form/control/gov-form-control.css +4 -4
- package/dist/collection/components/gov-form/group/constants.js +5 -0
- package/dist/collection/components/gov-form/group/constants.js.map +1 -1
- package/dist/collection/components/gov-form/group/gov-form-group.css +8 -1
- package/dist/collection/components/gov-form/group/gov-form-group.js +25 -0
- package/dist/collection/components/gov-form/group/gov-form-group.js.map +1 -1
- package/dist/collection/components/gov-form/input/gov-form-input.js +27 -19
- package/dist/collection/components/gov-form/input/gov-form-input.js.map +1 -1
- package/dist/collection/components/gov-icon/gov-icon.js +4 -2
- package/dist/collection/components/gov-icon/gov-icon.js.map +1 -1
- package/dist/collection/components/gov-modal/gov-modal.js +8 -2
- package/dist/collection/components/gov-modal/gov-modal.js.map +1 -1
- package/dist/collection/components/gov-promp/gov-prompt.js +9 -4
- package/dist/collection/components/gov-promp/gov-prompt.js.map +1 -1
- package/dist/collection/components/gov-spacer/constants.js +1 -1
- package/dist/collection/components/gov-spacer/constants.js.map +1 -1
- package/dist/collection/components/gov-spacer/gov-spacer.js +3 -3
- package/dist/collection/components/gov-spacer/gov-spacer.js.map +1 -1
- package/dist/collection/components/gov-statsbar/gov-statsbar.js +5 -5
- package/dist/collection/components/gov-statsbar/gov-statsbar.js.map +1 -1
- package/dist/collection/components/gov-tabs/gov-tabs.js +1 -1
- package/dist/collection/components/gov-tabs/gov-tabs.js.map +1 -1
- package/dist/collection/core/constants/tokens.js +17 -0
- package/dist/collection/core/constants/tokens.js.map +1 -0
- package/dist/collection/pages/Accordion.js +158 -326
- package/dist/collection/pages/Accordion.js.map +1 -1
- package/dist/components/gov-accordion-item.js +1 -1
- package/dist/components/gov-accordion-item.js.map +1 -1
- package/dist/components/gov-accordion.js +1 -1
- package/dist/components/gov-accordion.js.map +1 -1
- package/dist/components/gov-alert.js +1 -1
- package/dist/components/gov-alert.js.map +1 -1
- package/dist/components/gov-app.js +1 -1
- package/dist/components/gov-app.js.map +1 -1
- package/dist/components/gov-attachments-item.js +1 -1
- package/dist/components/gov-badge.js +1 -1
- package/dist/components/gov-breadcrumbs.js +1 -1
- package/dist/components/gov-breadcrumbs.js.map +1 -1
- package/dist/components/gov-button.js +1 -1
- package/dist/components/gov-card.js +1 -1
- package/dist/components/gov-control-group.js.map +1 -1
- package/dist/components/gov-form-autocomplete.js +1 -1
- package/dist/components/gov-form-checkbox.js +1 -1
- package/dist/components/gov-form-control.js +1 -1
- package/dist/components/gov-form-control.js.map +1 -1
- package/dist/components/gov-form-file.js +1 -1
- package/dist/components/gov-form-group.js +1 -1
- package/dist/components/gov-form-group.js.map +1 -1
- package/dist/components/gov-form-input.js +1 -1
- package/dist/components/gov-form-multi-select.js +1 -1
- package/dist/components/gov-form-select.js +1 -1
- package/dist/components/gov-icon.js +1 -1
- package/dist/components/gov-loading.js +1 -1
- package/dist/components/gov-modal.js +1 -1
- package/dist/components/gov-modal.js.map +1 -1
- package/dist/components/gov-pagination.js +1 -1
- package/dist/components/gov-prompt.js +1 -1
- package/dist/components/gov-prompt.js.map +1 -1
- package/dist/components/gov-side-nav-item.js +1 -1
- package/dist/components/gov-spacer.js +1 -1
- package/dist/components/gov-spacer.js.map +1 -1
- package/dist/components/gov-statsbar-item.js +1 -1
- package/dist/components/gov-statsbar.js +1 -1
- package/dist/components/gov-statsbar.js.map +1 -1
- package/dist/components/gov-tabs.js +1 -1
- package/dist/components/gov-tabs.js.map +1 -1
- package/dist/components/gov-tile.js +1 -1
- package/dist/components/gov-toast.js +1 -1
- package/dist/components/gov-wizzard-item.js +1 -1
- package/dist/components/{p-d305407a.js → p-103c7bd5.js} +2 -2
- package/dist/{core/p-1020a160.js → components/p-17ebfe85.js} +2 -2
- package/dist/components/p-37a7409e.js +2 -0
- package/dist/components/p-37a7409e.js.map +1 -0
- package/dist/components/p-386409dc.js.map +1 -1
- package/dist/components/{p-ec26407a.js → p-7bea2390.js} +2 -2
- package/dist/components/{p-cd440c95.js → p-a20f1683.js} +2 -2
- package/dist/components/p-a20f1683.js.map +1 -0
- package/dist/components/{p-1026d931.js → p-c0e49b09.js} +2 -2
- package/dist/components/{p-9da782bf.js → p-c3f560b9.js} +2 -2
- package/dist/components/{p-9da782bf.js.map → p-c3f560b9.js.map} +1 -1
- package/dist/components/p-cf493ba0.js +2 -0
- package/dist/components/p-cf493ba0.js.map +1 -0
- package/dist/components/{p-80b2c231.js → p-db22f9ce.js} +2 -2
- package/dist/core/core.esm.js +1 -1
- package/dist/core/core.esm.js.map +1 -1
- package/dist/core/{p-42cd2cc4.entry.js → p-05dc3d89.entry.js} +2 -2
- package/dist/core/{p-42cd2cc4.entry.js.map → p-05dc3d89.entry.js.map} +1 -1
- package/dist/core/{p-a857915f.entry.js → p-0c769f1a.entry.js} +2 -2
- package/dist/core/p-11be550d.entry.js.map +1 -1
- package/dist/core/p-16c3a489.entry.js +2 -0
- package/dist/core/p-16c3a489.entry.js.map +1 -0
- package/dist/{components/p-1020a160.js → core/p-17ebfe85.js} +2 -2
- package/dist/core/{p-abfa0beb.entry.js → p-2c7af892.entry.js} +2 -2
- package/dist/core/{p-abfa0beb.entry.js.map → p-2c7af892.entry.js.map} +1 -1
- package/dist/core/p-37a7409e.js +2 -0
- package/dist/core/p-37a7409e.js.map +1 -0
- package/dist/core/{p-3dbf7f49.js → p-3bacd021.js} +2 -2
- package/dist/core/p-3bc977e2.entry.js +2 -0
- package/dist/core/p-3bc977e2.entry.js.map +1 -0
- package/dist/core/{p-f969eec7.entry.js → p-41f72892.entry.js} +2 -2
- package/dist/core/p-41f72892.entry.js.map +1 -0
- package/dist/core/p-5195fd36.entry.js +2 -0
- package/dist/core/p-5195fd36.entry.js.map +1 -0
- package/dist/core/p-722218fd.entry.js.map +1 -1
- package/dist/core/{p-02c3a3fd.entry.js → p-7d680665.entry.js} +2 -2
- package/dist/core/{p-6dacb8d3.entry.js → p-88010439.entry.js} +2 -2
- package/dist/core/p-88010439.entry.js.map +1 -0
- package/dist/core/p-89921159.entry.js.map +1 -1
- package/dist/core/p-9a3e3ace.entry.js.map +1 -1
- package/dist/core/p-ab426e50.entry.js +2 -0
- package/dist/core/p-ab426e50.entry.js.map +1 -0
- package/dist/core/{p-1e3cad4b.entry.js → p-c81d62db.entry.js} +2 -2
- package/dist/core/p-e0c04c5f.entry.js.map +1 -1
- package/dist/core/{p-2790d89e.entry.js → p-e1780dba.entry.js} +2 -2
- package/dist/core/p-e1780dba.entry.js.map +1 -0
- package/dist/core/p-e39cd83c.entry.js +2 -0
- package/dist/core/p-e39cd83c.entry.js.map +1 -0
- package/dist/core/p-eda868dc.entry.js.map +1 -1
- package/dist/esm/{constants-037c35bc.js → constants-27b48cd1.js} +2 -2
- package/dist/esm/{constants-037c35bc.js.map → constants-27b48cd1.js.map} +1 -1
- package/dist/esm/{constants-ab132d9c.js → constants-858966b9.js} +2 -2
- package/dist/esm/{constants-ab132d9c.js.map → constants-858966b9.js.map} +1 -1
- package/dist/esm/{constants-5708696f.js → constants-ba92640d.js} +2 -2
- package/dist/esm/{constants-5708696f.js.map → constants-ba92640d.js.map} +1 -1
- package/dist/esm/core.js +1 -1
- package/dist/esm/gov-accordion-item.entry.js +13 -37
- package/dist/esm/gov-accordion-item.entry.js.map +1 -1
- package/dist/esm/gov-accordion.entry.js +2 -2
- package/dist/esm/gov-accordion.entry.js.map +1 -1
- package/dist/esm/gov-app.entry.js +158 -326
- package/dist/esm/gov-app.entry.js.map +1 -1
- package/dist/esm/gov-backdrop.entry.js.map +1 -1
- package/dist/esm/gov-badge.entry.js +6 -12
- package/dist/esm/gov-badge.entry.js.map +1 -1
- package/dist/esm/gov-breadcrumbs.entry.js.map +1 -1
- package/dist/esm/gov-button.entry.js +1 -1
- package/dist/esm/gov-control-group.entry.js.map +1 -1
- package/dist/esm/gov-dropdown.entry.js +1 -1
- package/dist/esm/gov-form-control.entry.js +1 -1
- package/dist/esm/gov-form-control.entry.js.map +1 -1
- package/dist/esm/gov-form-group.entry.js +7 -1
- package/dist/esm/gov-form-group.entry.js.map +1 -1
- package/dist/esm/gov-form-input.entry.js +14 -12
- package/dist/esm/gov-form-input.entry.js.map +1 -1
- package/dist/esm/gov-icon.entry.js +5 -3
- package/dist/esm/gov-icon.entry.js.map +1 -1
- package/dist/esm/gov-modal.entry.js.map +1 -1
- package/dist/esm/gov-prompt.entry.js.map +1 -1
- package/dist/esm/gov-spacer.entry.js +2 -2
- package/dist/esm/gov-spacer.entry.js.map +1 -1
- package/dist/esm/gov-statsbar-item.entry.js +1 -1
- package/dist/esm/gov-statsbar.entry.js +4 -4
- package/dist/esm/gov-statsbar.entry.js.map +1 -1
- package/dist/esm/gov-tabs.entry.js +1 -1
- package/dist/esm/gov-tabs.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/hydrate/index.js +210 -404
- package/dist/stencil.config.js +2 -2
- package/dist/stencil.config.js.map +1 -1
- package/dist/types/components/gov-accordion/constants.d.ts +1 -1
- package/dist/types/components/gov-accordion/gov-accordion-item.d.ts +1 -19
- package/dist/types/components/gov-backdrop/gov-backdrop.d.ts +1 -1
- package/dist/types/components/gov-badge/gov-badge.d.ts +3 -8
- package/dist/types/components/gov-breadcrumbs/gov-breadcrumbs.d.ts +2 -2
- package/dist/types/components/gov-control-group/constants.d.ts +2 -2
- package/dist/types/components/gov-control-group/gov-control-group.d.ts +2 -2
- package/dist/types/components/gov-form/group/constants.d.ts +5 -0
- package/dist/types/components/gov-form/group/gov-form-group.d.ts +5 -1
- package/dist/types/components/gov-form/input/gov-form-input.d.ts +5 -4
- package/dist/types/components/gov-modal/gov-modal.d.ts +2 -1
- package/dist/types/components/gov-promp/gov-prompt.d.ts +2 -1
- package/dist/types/components/gov-spacer/constants.d.ts +1 -1
- package/dist/types/components/gov-statsbar/gov-statsbar.d.ts +1 -1
- package/dist/types/components.d.ts +31 -63
- package/dist/types/core/constants/tokens.d.ts +1 -0
- package/dist/types/interfaces.d.ts +1 -0
- package/package.json +3 -3
- package/dist/components/p-5bf5a42e.js +0 -2
- package/dist/components/p-5bf5a42e.js.map +0 -1
- package/dist/components/p-a5d69694.js +0 -2
- package/dist/components/p-a5d69694.js.map +0 -1
- package/dist/components/p-cd440c95.js.map +0 -1
- package/dist/core/p-0eadfb3e.entry.js +0 -2
- package/dist/core/p-0eadfb3e.entry.js.map +0 -1
- package/dist/core/p-2790d89e.entry.js.map +0 -1
- package/dist/core/p-6dacb8d3.entry.js.map +0 -1
- package/dist/core/p-7ab82a55.entry.js +0 -2
- package/dist/core/p-7ab82a55.entry.js.map +0 -1
- package/dist/core/p-9e208f40.entry.js +0 -2
- package/dist/core/p-9e208f40.entry.js.map +0 -1
- package/dist/core/p-a5d69694.js +0 -2
- package/dist/core/p-a5d69694.js.map +0 -1
- package/dist/core/p-e86db39c.entry.js +0 -2
- package/dist/core/p-e86db39c.entry.js.map +0 -1
- package/dist/core/p-f95bca5f.entry.js +0 -2
- package/dist/core/p-f95bca5f.entry.js.map +0 -1
- package/dist/core/p-f969eec7.entry.js.map +0 -1
- /package/dist/components/{p-d305407a.js.map → p-103c7bd5.js.map} +0 -0
- /package/dist/components/{p-1020a160.js.map → p-17ebfe85.js.map} +0 -0
- /package/dist/components/{p-ec26407a.js.map → p-7bea2390.js.map} +0 -0
- /package/dist/components/{p-1026d931.js.map → p-c0e49b09.js.map} +0 -0
- /package/dist/components/{p-80b2c231.js.map → p-db22f9ce.js.map} +0 -0
- /package/dist/core/{p-a857915f.entry.js.map → p-0c769f1a.entry.js.map} +0 -0
- /package/dist/core/{p-1020a160.js.map → p-17ebfe85.js.map} +0 -0
- /package/dist/core/{p-3dbf7f49.js.map → p-3bacd021.js.map} +0 -0
- /package/dist/core/{p-02c3a3fd.entry.js.map → p-7d680665.entry.js.map} +0 -0
- /package/dist/core/{p-1e3cad4b.entry.js.map → p-c81d62db.entry.js.map} +0 -0
|
@@ -1,39 +1,20 @@
|
|
|
1
1
|
import { h, Host } from "@stencil/core";
|
|
2
|
-
import { govErrorLog } from "../../helpers/Log/gov.log";
|
|
3
2
|
import { validateProp } from "../../helpers/Validate/props";
|
|
4
|
-
import {
|
|
3
|
+
import { AccordionClass, AccordionItemClass, AccordionSizes, AccordionVariants, } from "./constants";
|
|
5
4
|
import { createID } from "../../utils/string.utils";
|
|
6
|
-
import { booleanString, toBoolAttrIfDefined } from "../../helpers/Dom/template";
|
|
7
|
-
import { govHost } from "../../helpers/Dom/template";
|
|
5
|
+
import { booleanString, govHost, toBoolAttrIfDefined } from "../../helpers/Dom/template";
|
|
8
6
|
export class GovAccordionItem {
|
|
9
7
|
constructor() {
|
|
10
8
|
this.isExpandedState = undefined;
|
|
11
|
-
this.variant =
|
|
9
|
+
this.variant = undefined;
|
|
12
10
|
this.identifier = undefined;
|
|
13
11
|
this.size = undefined;
|
|
14
|
-
this.label = undefined;
|
|
15
|
-
this.annotation = undefined;
|
|
16
12
|
this.disabled = false;
|
|
17
13
|
this.isExpanded = false;
|
|
18
|
-
this.triggerTag = "h3";
|
|
19
|
-
this.noBorder = false;
|
|
20
14
|
this.h = govHost(this.host);
|
|
21
15
|
this.triggerId = createID("GovAccordionItem");
|
|
22
16
|
this.contentId = createID("GovAccordionContent");
|
|
23
17
|
}
|
|
24
|
-
validateLabel(newValue) {
|
|
25
|
-
if (!newValue) {
|
|
26
|
-
govErrorLog(`[${AccordionItemClass.root}]: Parameter label is required.`);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
validateTriggerTag(newValue) {
|
|
30
|
-
const validTags = ["h1", "h2", "h3", "h4", "h5", "h6", "span"];
|
|
31
|
-
if (newValue) {
|
|
32
|
-
if (!validTags.includes(newValue)) {
|
|
33
|
-
govErrorLog(`[${AccordionItemClass.root}]: Tag ${newValue} is not allowed.`);
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
18
|
validateSize(newValue) {
|
|
38
19
|
validateProp(AccordionSizes, newValue, AccordionItemClass.root);
|
|
39
20
|
}
|
|
@@ -42,62 +23,57 @@ export class GovAccordionItem {
|
|
|
42
23
|
}
|
|
43
24
|
emmitChange() {
|
|
44
25
|
this.govChange.emit({
|
|
45
|
-
open: this.
|
|
26
|
+
open: this.isExpanded,
|
|
46
27
|
component: AccordionItemClass.root,
|
|
47
28
|
ref: this.host,
|
|
48
29
|
});
|
|
49
30
|
}
|
|
50
31
|
componentWillLoad() {
|
|
51
|
-
this.isExpandedState = this.isExpanded;
|
|
52
32
|
this.getPropsFromParents();
|
|
53
|
-
this.validateLabel(this.label);
|
|
54
|
-
this.validateTriggerTag(this.triggerTag);
|
|
55
33
|
this.validateSize(this.size);
|
|
56
34
|
this.validateVariant(this.variant);
|
|
57
35
|
}
|
|
58
36
|
getPropsFromParents() {
|
|
59
37
|
const accordion = this.h.getParent(AccordionClass.root);
|
|
60
38
|
if (accordion) {
|
|
61
|
-
this.size = accordion.getAttribute(
|
|
62
|
-
this.variant = accordion.getAttribute(
|
|
39
|
+
this.size = accordion.getAttribute("size");
|
|
40
|
+
this.variant = accordion.getAttribute("variant");
|
|
63
41
|
}
|
|
64
42
|
}
|
|
65
43
|
render() {
|
|
66
44
|
const triggerId = this.identifier || this.triggerId;
|
|
67
45
|
const contentId = this.contentId;
|
|
68
|
-
|
|
69
|
-
const TriggerTag = this.triggerTag;
|
|
70
|
-
return (h(Host, { class: this.h.classes(AccordionItemClass.root), "no-border": this.noBorder, size: this.size, variant: this.variant, role: "listitem" }, h("button", { id: triggerId, class: AccordionItemClass.header, "aria-expanded": booleanString(isExpandedState), "aria-controls": contentId, disabled: this.disabled, type: 'button', "aria-disabled": toBoolAttrIfDefined(this.disabled), onClick: (e) => {
|
|
46
|
+
return (h(Host, { class: this.h.classes(AccordionItemClass.root), size: this.size, variant: this.variant, role: "listitem" }, h("button", { id: triggerId, class: AccordionItemClass.header, "aria-expanded": booleanString(this.isExpanded), "aria-controls": contentId, disabled: this.disabled, type: "button", "aria-disabled": toBoolAttrIfDefined(this.disabled), onClick: (e) => {
|
|
71
47
|
e.stopPropagation();
|
|
72
48
|
this.toggle().finally();
|
|
73
|
-
} },
|
|
49
|
+
} }, this.h.hasSlot("icon") && (h("span", { class: AccordionItemClass.icon }, h("slot", { name: "icon" }))), h("span", { class: AccordionItemClass.title }, h("span", { class: AccordionItemClass.label }, h("slot", { name: "label" })), this.h.hasSlot("annotation") && (h("span", { class: AccordionItemClass.annotation }, h("slot", { name: "annotation" })))), this.h.hasSlot("suffix") && (h("span", { class: AccordionItemClass.suffix }, h("slot", { name: "suffix" }))), h("span", { class: AccordionItemClass.arrow }, this.h.hasSlot("toggle-icon") ? (h("slot", { name: "toggle-icon" })) : (h("gov-icon", { name: "chevron-down" })))), h("div", { class: AccordionItemClass.content, id: contentId, "aria-hidden": booleanString(!this.isExpanded), hidden: !this.isExpanded, "aria-labelledby": triggerId }, h("slot", null))));
|
|
74
50
|
}
|
|
75
51
|
/**
|
|
76
52
|
* Opening the accordion
|
|
77
53
|
*/
|
|
78
54
|
async open() {
|
|
79
|
-
this.
|
|
55
|
+
this.isExpanded = true;
|
|
80
56
|
this.emmitChange();
|
|
81
57
|
}
|
|
82
58
|
/**
|
|
83
59
|
* Closing the accordion
|
|
84
60
|
*/
|
|
85
61
|
async close() {
|
|
86
|
-
this.
|
|
62
|
+
this.isExpanded = false;
|
|
87
63
|
this.emmitChange();
|
|
88
64
|
}
|
|
89
65
|
/**
|
|
90
66
|
* Accordion switch
|
|
91
67
|
*/
|
|
92
68
|
async toggle() {
|
|
93
|
-
this.
|
|
69
|
+
this.isExpanded = !this.isExpanded;
|
|
94
70
|
this.emmitChange();
|
|
95
71
|
}
|
|
96
72
|
/**
|
|
97
73
|
* Returns the current state of the component
|
|
98
74
|
*/
|
|
99
75
|
async currentState() {
|
|
100
|
-
return this.
|
|
76
|
+
return this.isExpanded;
|
|
101
77
|
}
|
|
102
78
|
static get is() { return "gov-accordion-item"; }
|
|
103
79
|
static get originalStyleUrls() {
|
|
@@ -114,7 +90,7 @@ export class GovAccordionItem {
|
|
|
114
90
|
return {
|
|
115
91
|
"variant": {
|
|
116
92
|
"type": "string",
|
|
117
|
-
"mutable":
|
|
93
|
+
"mutable": false,
|
|
118
94
|
"complexType": {
|
|
119
95
|
"original": "AccordionVariantType",
|
|
120
96
|
"resolved": "\"custom\" | \"primary\" | \"secondary\"",
|
|
@@ -133,8 +109,7 @@ export class GovAccordionItem {
|
|
|
133
109
|
"text": "Style variation of the button."
|
|
134
110
|
},
|
|
135
111
|
"attribute": "variant",
|
|
136
|
-
"reflect": false
|
|
137
|
-
"defaultValue": "\"primary\""
|
|
112
|
+
"reflect": false
|
|
138
113
|
},
|
|
139
114
|
"identifier": {
|
|
140
115
|
"type": "string",
|
|
@@ -155,7 +130,7 @@ export class GovAccordionItem {
|
|
|
155
130
|
},
|
|
156
131
|
"size": {
|
|
157
132
|
"type": "string",
|
|
158
|
-
"mutable":
|
|
133
|
+
"mutable": false,
|
|
159
134
|
"complexType": {
|
|
160
135
|
"original": "AccordionSizeType",
|
|
161
136
|
"resolved": "\"l\" | \"m\" | \"s\" | \"xs\"",
|
|
@@ -176,40 +151,6 @@ export class GovAccordionItem {
|
|
|
176
151
|
"attribute": "size",
|
|
177
152
|
"reflect": false
|
|
178
153
|
},
|
|
179
|
-
"label": {
|
|
180
|
-
"type": "string",
|
|
181
|
-
"mutable": false,
|
|
182
|
-
"complexType": {
|
|
183
|
-
"original": "string",
|
|
184
|
-
"resolved": "string",
|
|
185
|
-
"references": {}
|
|
186
|
-
},
|
|
187
|
-
"required": false,
|
|
188
|
-
"optional": false,
|
|
189
|
-
"docs": {
|
|
190
|
-
"tags": [],
|
|
191
|
-
"text": "Item name of the accordion"
|
|
192
|
-
},
|
|
193
|
-
"attribute": "label",
|
|
194
|
-
"reflect": false
|
|
195
|
-
},
|
|
196
|
-
"annotation": {
|
|
197
|
-
"type": "string",
|
|
198
|
-
"mutable": false,
|
|
199
|
-
"complexType": {
|
|
200
|
-
"original": "string",
|
|
201
|
-
"resolved": "string",
|
|
202
|
-
"references": {}
|
|
203
|
-
},
|
|
204
|
-
"required": false,
|
|
205
|
-
"optional": false,
|
|
206
|
-
"docs": {
|
|
207
|
-
"tags": [],
|
|
208
|
-
"text": "Item annotation of the accordion"
|
|
209
|
-
},
|
|
210
|
-
"attribute": "annotation",
|
|
211
|
-
"reflect": false
|
|
212
|
-
},
|
|
213
154
|
"disabled": {
|
|
214
155
|
"type": "boolean",
|
|
215
156
|
"mutable": false,
|
|
@@ -230,7 +171,7 @@ export class GovAccordionItem {
|
|
|
230
171
|
},
|
|
231
172
|
"isExpanded": {
|
|
232
173
|
"type": "boolean",
|
|
233
|
-
"mutable":
|
|
174
|
+
"mutable": true,
|
|
234
175
|
"complexType": {
|
|
235
176
|
"original": "boolean",
|
|
236
177
|
"resolved": "boolean",
|
|
@@ -245,42 +186,6 @@ export class GovAccordionItem {
|
|
|
245
186
|
"attribute": "is-expanded",
|
|
246
187
|
"reflect": false,
|
|
247
188
|
"defaultValue": "false"
|
|
248
|
-
},
|
|
249
|
-
"triggerTag": {
|
|
250
|
-
"type": "string",
|
|
251
|
-
"mutable": false,
|
|
252
|
-
"complexType": {
|
|
253
|
-
"original": "string",
|
|
254
|
-
"resolved": "string",
|
|
255
|
-
"references": {}
|
|
256
|
-
},
|
|
257
|
-
"required": false,
|
|
258
|
-
"optional": false,
|
|
259
|
-
"docs": {
|
|
260
|
-
"tags": [],
|
|
261
|
-
"text": "Used to change the HTML tag in the accordion trigger for correct semantic structure"
|
|
262
|
-
},
|
|
263
|
-
"attribute": "trigger-tag",
|
|
264
|
-
"reflect": false,
|
|
265
|
-
"defaultValue": "\"h3\""
|
|
266
|
-
},
|
|
267
|
-
"noBorder": {
|
|
268
|
-
"type": "boolean",
|
|
269
|
-
"mutable": false,
|
|
270
|
-
"complexType": {
|
|
271
|
-
"original": "boolean",
|
|
272
|
-
"resolved": "boolean",
|
|
273
|
-
"references": {}
|
|
274
|
-
},
|
|
275
|
-
"required": false,
|
|
276
|
-
"optional": false,
|
|
277
|
-
"docs": {
|
|
278
|
-
"tags": [],
|
|
279
|
-
"text": "To remove the main underline of an item"
|
|
280
|
-
},
|
|
281
|
-
"attribute": "no-border",
|
|
282
|
-
"reflect": false,
|
|
283
|
-
"defaultValue": "false"
|
|
284
189
|
}
|
|
285
190
|
};
|
|
286
191
|
}
|
|
@@ -388,12 +293,6 @@ export class GovAccordionItem {
|
|
|
388
293
|
static get elementRef() { return "host"; }
|
|
389
294
|
static get watchers() {
|
|
390
295
|
return [{
|
|
391
|
-
"propName": "label",
|
|
392
|
-
"methodName": "validateLabel"
|
|
393
|
-
}, {
|
|
394
|
-
"propName": "triggerTag",
|
|
395
|
-
"methodName": "validateTriggerTag"
|
|
396
|
-
}, {
|
|
397
296
|
"propName": "size",
|
|
398
297
|
"methodName": "validateSize"
|
|
399
298
|
}, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gov-accordion-item.js","sourceRoot":"","sources":["../../../../../../src/components/gov-accordion/gov-accordion-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, State, Watch, Host, Method, Event, EventEmitter } from \"@stencil/core\"\nimport { govErrorLog } from \"../../helpers/Log/gov.log\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport {\n\tAccordionSizeType,\n\tAccordionSizes,\n\tAccordionItemClass,\n\tAccordionVariantType,\n\tAccordionVariants, AccordionClass,\n} from \"./constants\"\nimport { createID } from \"../../utils/string.utils\"\nimport { booleanString, toBoolAttrIfDefined } from \"../../helpers/Dom/template\"\nimport { AccordionItemEvent } from \"./gov-accordion.types\"\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\n\n@Component({\n\ttag: \"gov-accordion-item\",\n\tstyleUrl: \"gov-accordion-item.scss\",\n})\nexport class GovAccordionItem {\n\tprivate readonly triggerId: string\n\tprivate readonly contentId: string\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.triggerId = createID(\"GovAccordionItem\")\n\t\tthis.contentId = createID(\"GovAccordionContent\")\n\t}\n\n\t@Element() readonly host: HTMLGovAccordionItemElement\n\t@State() isExpandedState: boolean\n\n\t/**\n\t * Style variation of the button.\n\t */\n\t@Prop({mutable: true}) variant?: AccordionVariantType = \"primary\"\n\t/**\n\t * Custom accordion item identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly identifier: string\n\t/**\n\t * Accordion’s size.\n\t */\n\t@Prop({mutable: true}) size?: AccordionSizeType\n\t/**\n\t * Item name of the accordion\n\t */\n\t@Prop() readonly label: string\n\t/**\n\t * Item annotation of the accordion\n\t */\n\t@Prop() readonly annotation: string\n\t/**\n\t * Makes the button component disabled.\n\t * This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean = false\n\t/**\n\t * Defines whether the accordion is open or closed by default\n\t */\n\t@Prop({ attribute: \"is-expanded\" }) readonly isExpanded: boolean = false\n\t/**\n\t * Used to change the HTML tag in the accordion trigger for correct semantic structure\n\t */\n\t@Prop({ attribute: \"trigger-tag\" }) readonly triggerTag: string = \"h3\"\n\t/**\n\t * To remove the main underline of an item\n\t */\n\t@Prop({ attribute: \"no-border\" }) readonly noBorder: boolean = false\n\t/**\n\t * Called when the accordion state changes\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<AccordionItemEvent>\n\n\t@Watch(\"label\")\n\tvalidateLabel(newValue: string): void {\n\t\tif (!newValue) {\n\t\t\tgovErrorLog(`[${AccordionItemClass.root}]: Parameter label is required.`)\n\t\t}\n\t}\n\n\t@Watch(\"triggerTag\")\n\tvalidateTriggerTag(newValue: string): void {\n\t\tconst validTags = [\"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\", \"span\"]\n\t\tif (newValue) {\n\t\t\tif (!validTags.includes(newValue)) {\n\t\t\t\tgovErrorLog(`[${AccordionItemClass.root}]: Tag ${newValue} is not allowed.`)\n\t\t\t}\n\t\t}\n\t}\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(AccordionSizes, newValue, AccordionItemClass.root)\n\t}\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(AccordionVariants, newValue, AccordionItemClass.root)\n\t}\n\n\tprivate emmitChange(): void {\n\t\tthis.govChange.emit({\n\t\t\topen: this.isExpandedState,\n\t\t\tcomponent: AccordionItemClass.root,\n\t\t\tref: this.host,\n\t\t})\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.isExpandedState = this.isExpanded\n\t\tthis.getPropsFromParents()\n\n\t\tthis.validateLabel(this.label)\n\t\tthis.validateTriggerTag(this.triggerTag)\n\t\tthis.validateSize(this.size)\n\t\tthis.validateVariant(this.variant)\n\n\t}\n\n\tgetPropsFromParents() {\n\t\tconst accordion = this.h.getParent(AccordionClass.root)\n\t\tif(accordion) {\n\t\t\tthis.size = accordion.getAttribute('size') as AccordionSizeType\n\t\t\tthis.variant = accordion.getAttribute('variant') as AccordionVariantType\n\t\t}\n\t}\n\n\trender() {\n\t\tconst triggerId = this.identifier || this.triggerId\n\t\tconst contentId = this.contentId\n\t\tconst { isExpandedState, label } = this\n\t\tconst TriggerTag = this.triggerTag\n\n\t\treturn (\n\t\t\t<Host class={this.h.classes(AccordionItemClass.root)} no-border={this.noBorder} size={this.size} variant={this.variant} role=\"listitem\">\n\t\t\t\t<button\n\t\t\t\t\tid={triggerId}\n\t\t\t\t\tclass={AccordionItemClass.header}\n\t\t\t\t\taria-expanded={booleanString(isExpandedState)}\n\t\t\t\t\taria-controls={contentId}\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\ttype={'button'}\n\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\tonClick={(e: Event) => {\n\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\tthis.toggle().finally()\n\t\t\t\t\t}}>\n\t\t\t\t\t<TriggerTag class={AccordionItemClass.title}>\n\t\t\t\t\t\t{this.h.hasSlot(\"icon\") && (\n\t\t\t\t\t\t\t<span class={AccordionItemClass.icon}>\n\t\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<span class={AccordionItemClass.name}>\n\t\t\t\t\t\t\t<span class={AccordionItemClass.label}>{label}</span>\n\t\t\t\t\t\t\t{this.annotation && <span class={AccordionItemClass.annot}>{this.annotation}</span>}\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t{this.h.hasSlot(\"suffix\") && (\n\t\t\t\t\t\t\t<span class={AccordionItemClass.suffix}>\n\t\t\t\t\t\t\t\t<slot name=\"suffix\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</TriggerTag>\n\n\t\t\t\t\t<gov-icon class={AccordionItemClass.arrow} name=\"chevron-down\"></gov-icon>\n\t\t\t\t</button>\n\t\t\t\t<div\n\t\t\t\t\tclass={AccordionItemClass.content}\n\t\t\t\t\tid={contentId}\n\t\t\t\t\taria-hidden={booleanString(!isExpandedState)}\n\t\t\t\t\thidden={!isExpandedState}\n\t\t\t\t\taria-labelledby={triggerId}>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Opening the accordion\n\t */\n\t@Method()\n\tasync open(): Promise<void> {\n\t\tthis.isExpandedState = true\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Closing the accordion\n\t */\n\t@Method()\n\tasync close(): Promise<void> {\n\t\tthis.isExpandedState = false\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Accordion switch\n\t */\n\t@Method()\n\tasync toggle(): Promise<void> {\n\t\tthis.isExpandedState = !this.isExpandedState\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Returns the current state of the component\n\t */\n\t@Method()\n\tasync currentState(): Promise<boolean> {\n\t\treturn this.isExpandedState\n\t}\n}\n"]}
|
|
1
|
+
{"version":3,"file":"gov-accordion-item.js","sourceRoot":"","sources":["../../../../../../src/components/gov-accordion/gov-accordion-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport {\n\tAccordionClass,\n\tAccordionItemClass,\n\tAccordionSizes,\n\tAccordionSizeType,\n\tAccordionVariants,\n\tAccordionVariantType,\n} from \"./constants\"\nimport { createID } from \"../../utils/string.utils\"\nimport { booleanString, govHost, toBoolAttrIfDefined } from \"../../helpers/Dom/template\"\nimport { AccordionItemEvent } from \"./gov-accordion.types\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\n\n@Component({\n\ttag: \"gov-accordion-item\",\n\tstyleUrl: \"gov-accordion-item.scss\",\n})\nexport class GovAccordionItem {\n\tprivate readonly triggerId: string\n\tprivate readonly contentId: string\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.triggerId = createID(\"GovAccordionItem\")\n\t\tthis.contentId = createID(\"GovAccordionContent\")\n\t}\n\n\t@Element() readonly host: HTMLGovAccordionItemElement\n\t@State() isExpandedState: boolean\n\n\t/**\n\t * Style variation of the button.\n\t */\n\t@Prop() variant?: AccordionVariantType\n\t/**\n\t * Custom accordion item identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly identifier: string\n\t/**\n\t * Accordion’s size.\n\t */\n\t@Prop() size?: AccordionSizeType\n\t/**\n\t * Makes the button component disabled.\n\t * This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean = false\n\t/**\n\t * Defines whether the accordion is open or closed by default\n\t */\n\t@Prop({ attribute: \"is-expanded\", mutable: true }) isExpanded = false\n\t/**\n\t * Called when the accordion state changes\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<AccordionItemEvent>\n\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(AccordionSizes, newValue, AccordionItemClass.root)\n\t}\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(AccordionVariants, newValue, AccordionItemClass.root)\n\t}\n\n\tprivate emmitChange(): void {\n\t\tthis.govChange.emit({\n\t\t\topen: this.isExpanded,\n\t\t\tcomponent: AccordionItemClass.root,\n\t\t\tref: this.host,\n\t\t})\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.getPropsFromParents()\n\t\tthis.validateSize(this.size)\n\t\tthis.validateVariant(this.variant)\n\n\t}\n\n\tgetPropsFromParents() {\n\t\tconst accordion = this.h.getParent(AccordionClass.root)\n\t\tif (accordion) {\n\t\t\tthis.size = accordion.getAttribute(\"size\") as AccordionSizeType\n\t\t\tthis.variant = accordion.getAttribute(\"variant\") as AccordionVariantType\n\t\t}\n\t}\n\n\trender() {\n\t\tconst triggerId = this.identifier || this.triggerId\n\t\tconst contentId = this.contentId\n\n\t\treturn (\n\t\t\t<Host class={this.h.classes(AccordionItemClass.root)} size={this.size} variant={this.variant} role=\"listitem\">\n\t\t\t\t<button\n\t\t\t\t\tid={triggerId}\n\t\t\t\t\tclass={AccordionItemClass.header}\n\t\t\t\t\taria-expanded={booleanString(this.isExpanded)}\n\t\t\t\t\taria-controls={contentId}\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\ttype={\"button\"}\n\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\tonClick={(e: Event) => {\n\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\tthis.toggle().finally()\n\t\t\t\t\t}}>\n\n\t\t\t\t\t{this.h.hasSlot(\"icon\") && (\n\t\t\t\t\t\t<span class={AccordionItemClass.icon}>\n\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<span class={AccordionItemClass.title}>\n\t\t\t\t\t\t<span class={AccordionItemClass.label}>\n\t\t\t\t\t\t\t<slot name=\"label\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t{this.h.hasSlot(\"annotation\") && (\n\t\t\t\t\t\t\t<span class={AccordionItemClass.annotation}>\n\t\t\t\t\t\t\t\t<slot name=\"annotation\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\n\t\t\t\t\t{this.h.hasSlot(\"suffix\") && (\n\t\t\t\t\t\t<span class={AccordionItemClass.suffix}>\n\t\t\t\t\t\t\t<slot name=\"suffix\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<span class={AccordionItemClass.arrow}>\n\t\t\t\t\t\t{this.h.hasSlot(\"toggle-icon\") ? (\n\t\t\t\t\t\t\t<slot name=\"toggle-icon\" />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<gov-icon name=\"chevron-down\"></gov-icon>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t</button>\n\t\t\t\t<div\n\t\t\t\t\tclass={AccordionItemClass.content}\n\t\t\t\t\tid={contentId}\n\t\t\t\t\taria-hidden={booleanString(!this.isExpanded)}\n\t\t\t\t\thidden={!this.isExpanded}\n\t\t\t\t\taria-labelledby={triggerId}>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Opening the accordion\n\t */\n\t@Method()\n\tasync open(): Promise<void> {\n\t\tthis.isExpanded = true\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Closing the accordion\n\t */\n\t@Method()\n\tasync close(): Promise<void> {\n\t\tthis.isExpanded = false\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Accordion switch\n\t */\n\t@Method()\n\tasync toggle(): Promise<void> {\n\t\tthis.isExpanded = !this.isExpanded\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Returns the current state of the component\n\t */\n\t@Method()\n\tasync currentState(): Promise<boolean> {\n\t\treturn this.isExpanded\n\t}\n}\n"]}
|
|
@@ -44,7 +44,7 @@ export class GovAccordion {
|
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
render() {
|
|
47
|
-
return (h(Host, { class: this.h.classes(AccordionClass.root), size: this.size, variant: this.variant
|
|
47
|
+
return (h(Host, { class: this.h.classes(AccordionClass.root), size: this.size, variant: this.variant, role: 'list', "arial-label": this.wcagLabel, "arial-labelledby": this.wcagLabelledBy }, h("slot", null)));
|
|
48
48
|
}
|
|
49
49
|
/**
|
|
50
50
|
* Validate the WCAG attributes of the component
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gov-accordion.js","sourceRoot":"","sources":["../../../../../../src/components/gov-accordion/gov-accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrG,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,cAAc,EAAE,cAAc,EAAqB,kBAAkB,EAAwB,MAAM,aAAa,CAAA;AACzH,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAA;AAC/D,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAA;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAQpD,MAAM,OAAO,YAAY;EAGxB;gBAQ4C,GAAG;mBAIG,SAAS;oBAII,KAAK;;;IAfnE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EA6BD,YAAY,CAAC,QAAgB;IAC5B,YAAY,CAAC,cAAc,EAAE,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;EAC5D,CAAC;EAGD,eAAe,CAAC,QAAgB;IAC/B,YAAY,CAAC,QAAQ,EAAE,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;EACtD,CAAC;EAED,iBAAiB;IAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC5B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EACnC,CAAC;EAED,gBAAgB;IACf,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,KAAkC,EAAE,EAAE;MAClG,KAAK,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC,CAAkC,EAAE,EAAE;QAC3E,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;UACnB,SAAS,EAAE,cAAc,CAAC,IAAI;UAC9B,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI;UACnB,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,GAAG;SACjB,CAAC,CAAA;MACH,CAAC,CAAC,CAAA;IACH,CAAC,CAAC,CAAA;EACH,CAAC;EAED,KAAK,CAAC,kBAAkB;IACvB,IAAI,uBAAuB,EAAE,EAAE;MAC9B,MAAM,KAAK,CAAC,GAAG,CAAC,CAAA;MAChB,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;KACzB;EACF,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI,
|
|
1
|
+
{"version":3,"file":"gov-accordion.js","sourceRoot":"","sources":["../../../../../../src/components/gov-accordion/gov-accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrG,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,cAAc,EAAE,cAAc,EAAqB,kBAAkB,EAAwB,MAAM,aAAa,CAAA;AACzH,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAA;AAC/D,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAA;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAQpD,MAAM,OAAO,YAAY;EAGxB;gBAQ4C,GAAG;mBAIG,SAAS;oBAII,KAAK;;;IAfnE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EA6BD,YAAY,CAAC,QAAgB;IAC5B,YAAY,CAAC,cAAc,EAAE,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;EAC5D,CAAC;EAGD,eAAe,CAAC,QAAgB;IAC/B,YAAY,CAAC,QAAQ,EAAE,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;EACtD,CAAC;EAED,iBAAiB;IAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC5B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EACnC,CAAC;EAED,gBAAgB;IACf,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,KAAkC,EAAE,EAAE;MAClG,KAAK,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC,CAAkC,EAAE,EAAE;QAC3E,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;UACnB,SAAS,EAAE,cAAc,CAAC,IAAI;UAC9B,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI;UACnB,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,GAAG;SACjB,CAAC,CAAA;MACH,CAAC,CAAC,CAAA;IACH,CAAC,CAAC,CAAA;EACH,CAAC;EAED,KAAK,CAAC,kBAAkB;IACvB,IAAI,uBAAuB,EAAE,EAAE;MAC9B,MAAM,KAAK,CAAC,GAAG,CAAC,CAAA;MAChB,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;KACzB;EACF,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IACJ,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,EAC1C,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,MAAM,iBACC,IAAI,CAAC,SAAS,sBACT,IAAI,CAAC,cAAc;MACrC,eAAQ,CACF,CACP,CAAA;EACF,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,YAAY;IACjB,iBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;EAC5E,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { AccordionClass, AccordionSizes, AccordionSizeType, AccordionItemClass, AccordionVariantType } from './constants'\nimport { Variants } from '../../core/constants/variants'\nimport { validateWcagLabel } from '../../helpers/Validate/wcag'\nimport { canValidateWcagOnRender } from '../../helpers/Dom/win'\nimport { delay } from '../../utils/utils'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { AccordionEvent, AccordionItemEvent } from \"./gov-accordion.types\"\n\n@Component({\n\ttag: 'gov-accordion',\n\tstyleUrl: 'gov-accordion.scss',\n})\nexport class GovAccordion {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovAccordionElement\n\t/**\n\t * Accordion’s size.\n\t */\n\t@Prop() readonly size?: AccordionSizeType = 'm'\n\t/**\n\t * Style variation of the button.\n\t */\n\t@Prop() readonly variant?: AccordionVariantType = 'primary'\n\t/**\n\t * Accordion item underline\n\t */\n\t@Prop({ attribute: 'no-border' }) readonly noBorder: boolean = false\n\t/**\n\t * Adds accessible label for the accordion that is only shown for screen readers.\n\t */\n\t@Prop({ attribute: 'wcag-label' }) readonly wcagLabel: string\n\t/**\n\t * String of id's that indicate alternative labels elements\n\t */\n\t@Prop({ attribute: 'wcag-labelled-by' }) readonly wcagLabelledBy: string\n\t/**\n\t * Called when the accordion state changes\n\t */\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter<AccordionEvent>\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(AccordionSizes, newValue, AccordionClass.root)\n\t}\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, AccordionClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateSize(this.size)\n\t\tthis.validateVariant(this.variant)\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.host.querySelectorAll(AccordionItemClass.root).forEach((child: HTMLGovAccordionItemElement) => {\n\t\t\tchild.addEventListener('gov-change', (e: CustomEvent<AccordionItemEvent>) => {\n\t\t\t\te.stopPropagation()\n\t\t\t\tthis.govChange.emit({\n\t\t\t\t\tcomponent: AccordionClass.root,\n\t\t\t\t\topen: e.detail.open,\n\t\t\t\t\tref: e.detail.ref\n\t\t\t\t})\n\t\t\t})\n\t\t})\n\t}\n\n\tasync componentDidRender() {\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={this.h.classes(AccordionClass.root)}\n\t\t\t\tsize={this.size}\n\t\t\t\tvariant={this.variant}\n\t\t\t\trole={'list'}\n\t\t\t\tarial-label={this.wcagLabel}\n\t\t\t\tarial-labelledby={this.wcagLabelledBy}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagLabel(this.wcagLabel, this.wcagLabelledBy, AccordionClass.root)\n\t}\n}\n"]}
|
|
@@ -51,7 +51,7 @@ export class GovBackdrop {
|
|
|
51
51
|
"optional": false,
|
|
52
52
|
"docs": {
|
|
53
53
|
"tags": [],
|
|
54
|
-
"text": "
|
|
54
|
+
"text": "Determine if component should have inverse colors to be used on dark background."
|
|
55
55
|
},
|
|
56
56
|
"attribute": "inverse",
|
|
57
57
|
"reflect": false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gov-backdrop.js","sourceRoot":"","sources":["../../../../../../src/components/gov-backdrop/gov-backdrop.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAC9F,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAA;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAC3C,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAA;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAOpD,MAAM,OAAO,WAAW;EAGvB;mBAQoC,KAAK;;;IAPxC,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAoBD,KAAK,CAAC,kBAAkB;IACvB,IAAI,uBAAuB,EAAE,EAAE;MAC9B,MAAM,KAAK,CAAC,GAAG,CAAC,CAAA;MAChB,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;KACzB;EACF,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC;MAC9C,WACC,IAAI,EAAE,QAAQ,gBACF,IAAI,CAAC,SAAS,qBACT,IAAI,CAAC,cAAc,EACpC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EACnC,KAAK,EAAE,aAAa,CAAC,EAAE,GACjB,CACD,CACP,CAAA;EACF,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,YAAY;IACjB,iBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,aAAa,CAAC,IAAI,CAAC,CAAA;EAC3E,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, EventEmitter, h, Method, Prop, Host, Element } from '@stencil/core'\nimport { validateWcagLabel } from '../../helpers/Validate/wcag'\nimport { BackdropClass } from './constants'\nimport { canValidateWcagOnRender } from '../../helpers/Dom/win'\nimport { delay } from '../../utils/utils'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-backdrop',\n\tstyleUrl: 'gov-backdrop.scss',\n})\nexport class GovBackdrop {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovAlertElement\n\t/**\n\t *
|
|
1
|
+
{"version":3,"file":"gov-backdrop.js","sourceRoot":"","sources":["../../../../../../src/components/gov-backdrop/gov-backdrop.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAC9F,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAA;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAC3C,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAA;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAOpD,MAAM,OAAO,WAAW;EAGvB;mBAQoC,KAAK;;;IAPxC,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAoBD,KAAK,CAAC,kBAAkB;IACvB,IAAI,uBAAuB,EAAE,EAAE;MAC9B,MAAM,KAAK,CAAC,GAAG,CAAC,CAAA;MAChB,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;KACzB;EACF,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC;MAC9C,WACC,IAAI,EAAE,QAAQ,gBACF,IAAI,CAAC,SAAS,qBACT,IAAI,CAAC,cAAc,EACpC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EACnC,KAAK,EAAE,aAAa,CAAC,EAAE,GACjB,CACD,CACP,CAAA;EACF,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,YAAY;IACjB,iBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,aAAa,CAAC,IAAI,CAAC,CAAA;EAC3E,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, EventEmitter, h, Method, Prop, Host, Element } from '@stencil/core'\nimport { validateWcagLabel } from '../../helpers/Validate/wcag'\nimport { BackdropClass } from './constants'\nimport { canValidateWcagOnRender } from '../../helpers/Dom/win'\nimport { delay } from '../../utils/utils'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-backdrop',\n\tstyleUrl: 'gov-backdrop.scss',\n})\nexport class GovBackdrop {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovAlertElement\n\t/**\n\t * Determine if component should have inverse colors to be used on dark background.\n\t */\n\t@Prop() readonly inverse: boolean = false\n\t/**\n\t * Adds accessible label for the backdrop that is only shown for screen readers.\n\t */\n\t@Prop({ attribute: 'wcag-label' }) readonly wcagLabel: string\n\t/**\n\t * String of id's that indicate alternative labels elements\n\t */\n\t@Prop({ attribute: 'wcag-labelled-by' }) readonly wcagLabelledBy: string\n\t/**\n\t * Emitted when button clicks.\n\t */\n\t@Event({ eventName: 'gov-click' }) govClick: EventEmitter<MouseEvent>\n\n\tasync componentDidRender() {\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(BackdropClass.root)}>\n\t\t\t\t<div\n\t\t\t\t\trole={'button'}\n\t\t\t\t\taria-label={this.wcagLabel}\n\t\t\t\t\taria-labelledby={this.wcagLabelledBy}\n\t\t\t\t\tonClick={e => this.govClick.emit(e)}\n\t\t\t\t\tclass={BackdropClass.bg}\n\t\t\t\t></div>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagLabel(this.wcagLabel, this.wcagLabelledBy, BackdropClass.root)\n\t}\n}\n"]}
|
|
@@ -1115,6 +1115,16 @@
|
|
|
1115
1115
|
.gov-badge .gov-button .element {
|
|
1116
1116
|
border: none;
|
|
1117
1117
|
}
|
|
1118
|
+
.gov-badge--has-right > .element {
|
|
1119
|
+
padding-top: 0 !important;
|
|
1120
|
+
padding-right: 0 !important;
|
|
1121
|
+
padding-bottom: 0 !important;
|
|
1122
|
+
}
|
|
1123
|
+
.gov-badge--has-left > .element {
|
|
1124
|
+
padding-top: 0 !important;
|
|
1125
|
+
padding-bottom: 0 !important;
|
|
1126
|
+
padding-left: 0 !important;
|
|
1127
|
+
}
|
|
1118
1128
|
.gov-badge[size=xs] .element {
|
|
1119
1129
|
border-radius: calc(var(--gov-button-xs-min-height, 1.5rem) * 0.5);
|
|
1120
1130
|
}
|
|
@@ -1170,68 +1180,58 @@
|
|
|
1170
1180
|
outline: var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base);
|
|
1171
1181
|
outline-offset: 0.0625rem;
|
|
1172
1182
|
}
|
|
1173
|
-
.gov-badge[
|
|
1183
|
+
.gov-badge[variant=primary][inverse=""] .element, .gov-badge[variant=primary][inverse=true i] .element, .gov-badge[variant=primary][inverse="1"] .element {
|
|
1174
1184
|
border-width: 0.0625rem;
|
|
1175
1185
|
border-color: var(--gov-badge-inverse-primary-border-color, var(--gov-color-primary-200));
|
|
1176
1186
|
background-color: var(--gov-badge-inverse-primary-bg, var(--gov-color-primary-100));
|
|
1177
1187
|
color: var(--gov-badge-inverse-primary-color, var(--gov-color-primary));
|
|
1178
1188
|
}
|
|
1179
1189
|
@media not all and (pointer: coarse) {
|
|
1180
|
-
.gov-badge[
|
|
1190
|
+
.gov-badge[variant=primary][inverse=""] .element:hover, .gov-badge[variant=primary][inverse=true i] .element:hover, .gov-badge[variant=primary][inverse="1"] .element:hover {
|
|
1181
1191
|
border-color: var(--gov-badge-inverse-primary-border-color-hover, var(--gov-color-primary-100));
|
|
1182
1192
|
}
|
|
1183
1193
|
}
|
|
1184
|
-
.gov-badge[
|
|
1194
|
+
.gov-badge[variant=secondary][inverse=""] .element, .gov-badge[variant=secondary][inverse=true i] .element, .gov-badge[variant=secondary][inverse="1"] .element {
|
|
1185
1195
|
border-width: 0.0625rem;
|
|
1186
1196
|
border-color: var(--gov-badge-inverse-secondary-border-color, var(--gov-color-secondary-400));
|
|
1187
1197
|
background-color: var(--gov-badge-inverse-secondary-bg, var(--gov-color-secondary-200));
|
|
1188
1198
|
color: var(--gov-badge-inverse-secondary-color, var(--gov-color-secondary-900));
|
|
1189
1199
|
}
|
|
1190
1200
|
@media not all and (pointer: coarse) {
|
|
1191
|
-
.gov-badge[
|
|
1201
|
+
.gov-badge[variant=secondary][inverse=""] .element:hover, .gov-badge[variant=secondary][inverse=true i] .element:hover, .gov-badge[variant=secondary][inverse="1"] .element:hover {
|
|
1192
1202
|
border-color: var(--gov-badge-inverse-secondary-border-color-hover, var(--gov-color-secondary-400));
|
|
1193
1203
|
}
|
|
1194
1204
|
}
|
|
1195
|
-
.gov-badge[
|
|
1205
|
+
.gov-badge[variant=success][inverse=""] .element, .gov-badge[variant=success][inverse=true i] .element, .gov-badge[variant=success][inverse="1"] .element {
|
|
1196
1206
|
border-width: 0.0625rem;
|
|
1197
1207
|
border-color: var(--gov-badge-inverse-success-border-color, var(--gov-color-success-200));
|
|
1198
1208
|
background-color: var(--gov-badge-inverse-success-bg, var(--gov-color-success-100));
|
|
1199
1209
|
color: var(--gov-badge-inverse-success-color, var(--gov-color-success-600));
|
|
1200
1210
|
}
|
|
1201
1211
|
@media not all and (pointer: coarse) {
|
|
1202
|
-
.gov-badge[
|
|
1212
|
+
.gov-badge[variant=success][inverse=""] .element:hover, .gov-badge[variant=success][inverse=true i] .element:hover, .gov-badge[variant=success][inverse="1"] .element:hover {
|
|
1203
1213
|
border-color: var(--gov-badge-inverse-success-border-color-hover, var(--gov-color-success-100));
|
|
1204
1214
|
}
|
|
1205
1215
|
}
|
|
1206
|
-
.gov-badge[
|
|
1216
|
+
.gov-badge[variant=warning][inverse=""] .element, .gov-badge[variant=warning][inverse=true i] .element, .gov-badge[variant=warning][inverse="1"] .element {
|
|
1207
1217
|
border-width: 0.0625rem;
|
|
1208
1218
|
border-color: var(--gov-badge-inverse-warning-border-color, var(--gov-color-warning-200));
|
|
1209
1219
|
background-color: var(--gov-badge-inverse-warning-bg, var(--gov-color-warning-100));
|
|
1210
1220
|
color: var(--gov-badge-inverse-warning-color, var(--gov-color-warning-600));
|
|
1211
1221
|
}
|
|
1212
1222
|
@media not all and (pointer: coarse) {
|
|
1213
|
-
.gov-badge[
|
|
1223
|
+
.gov-badge[variant=warning][inverse=""] .element:hover, .gov-badge[variant=warning][inverse=true i] .element:hover, .gov-badge[variant=warning][inverse="1"] .element:hover {
|
|
1214
1224
|
border-color: var(--gov-badge-inverse-warning-border-color-hover, var(--gov-color-warning-100));
|
|
1215
1225
|
}
|
|
1216
1226
|
}
|
|
1217
|
-
.gov-badge[
|
|
1227
|
+
.gov-badge[variant=error][inverse=""] .element, .gov-badge[variant=error][inverse=true i] .element, .gov-badge[variant=error][inverse="1"] .element {
|
|
1218
1228
|
border-width: 0.0625rem;
|
|
1219
1229
|
border-color: var(--gov-badge-inverse-error-border-color, var(--gov-color-error-200));
|
|
1220
1230
|
background-color: var(--gov-badge-inverse-error-bg, var(--gov-color-error-100));
|
|
1221
1231
|
color: var(--gov-badge-inverse-error-color, var(--gov-color-error-500));
|
|
1222
1232
|
}
|
|
1223
1233
|
@media not all and (pointer: coarse) {
|
|
1224
|
-
.gov-badge[
|
|
1234
|
+
.gov-badge[variant=error][inverse=""] .element:hover, .gov-badge[variant=error][inverse=true i] .element:hover, .gov-badge[variant=error][inverse="1"] .element:hover {
|
|
1225
1235
|
border-color: var(--gov-badge-inverse-error-border-color-hover, var(--gov-color-error-500));
|
|
1226
1236
|
}
|
|
1227
|
-
}
|
|
1228
|
-
.gov-badge--has-right > .element {
|
|
1229
|
-
padding-top: 0 !important;
|
|
1230
|
-
padding-bottom: 0 !important;
|
|
1231
|
-
padding-right: 0 !important;
|
|
1232
|
-
}
|
|
1233
|
-
.gov-badge--has-left > .element {
|
|
1234
|
-
padding-top: 0 !important;
|
|
1235
|
-
padding-bottom: 0 !important;
|
|
1236
|
-
padding-left: 0 !important;
|
|
1237
1237
|
}
|
|
@@ -2,17 +2,16 @@ import { h, Host } from "@stencil/core";
|
|
|
2
2
|
import { validateProp } from "../../helpers/Validate/props";
|
|
3
3
|
import { govHost } from "../../helpers/Dom/template";
|
|
4
4
|
import { BadgeClass, NativeType } from "./constants";
|
|
5
|
-
import { ButtonSizes, ButtonVariants,
|
|
5
|
+
import { ButtonSizes, ButtonVariants, } from "../gov-button/default/constants";
|
|
6
6
|
export class GovBadge {
|
|
7
7
|
constructor() {
|
|
8
8
|
this.inverse = false;
|
|
9
9
|
this.disabled = false;
|
|
10
10
|
this.href = undefined;
|
|
11
11
|
this.target = undefined;
|
|
12
|
-
this.size =
|
|
13
|
-
this.type = "solid";
|
|
12
|
+
this.size = ButtonSizes._M;
|
|
14
13
|
this.tag = "span";
|
|
15
|
-
this.variant =
|
|
14
|
+
this.variant = ButtonVariants.PRIMARY;
|
|
16
15
|
this.wcagLabel = undefined;
|
|
17
16
|
this.h = govHost(this.host);
|
|
18
17
|
}
|
|
@@ -22,13 +21,9 @@ export class GovBadge {
|
|
|
22
21
|
validateSize(newValue) {
|
|
23
22
|
validateProp(ButtonSizes, newValue, BadgeClass.root);
|
|
24
23
|
}
|
|
25
|
-
validateType(newValue) {
|
|
26
|
-
validateProp(Type, newValue, BadgeClass.root);
|
|
27
|
-
}
|
|
28
24
|
componentWillLoad() {
|
|
29
25
|
this.validateVariant(this.variant);
|
|
30
26
|
this.validateSize(this.size);
|
|
31
|
-
this.validateType(this.type);
|
|
32
27
|
}
|
|
33
28
|
render() {
|
|
34
29
|
const Tag = this.href ? NativeType.A : this.tag;
|
|
@@ -37,7 +32,7 @@ export class GovBadge {
|
|
|
37
32
|
BadgeClass.root,
|
|
38
33
|
this.h.hasSlot("right") ? BadgeClass.hasRight : undefined,
|
|
39
34
|
this.h.hasSlot("left") ? BadgeClass.hasLeft : undefined,
|
|
40
|
-
]), disabled: this.disabled, href: this.href, variant: this.variant, size: this.size,
|
|
35
|
+
]), disabled: this.disabled, href: this.href, variant: this.variant, size: this.size, inverse: this.inverse, hoverable: Tag == NativeType.A || Tag == NativeType.BUTTON }, h(Tag, { class: "element", href: this.href, target: this.target, "aria-label": this.wcagLabel, ref: el => (this.triggerRef = el), onClick: this.onClickHandler.bind(this), type: nativeType }, this.h.hasSlot("left") && h("slot", { name: "left" }), this.h.hasSlot("left-icon") && h("slot", { name: "left-icon" }), h("slot", null), this.h.hasSlot("right-icon") && h("slot", { name: "right-icon" }), this.h.hasSlot("right") && h("slot", { name: "right" }))));
|
|
41
36
|
}
|
|
42
37
|
onClickHandler(e) {
|
|
43
38
|
e.stopPropagation();
|
|
@@ -76,7 +71,7 @@ export class GovBadge {
|
|
|
76
71
|
"optional": false,
|
|
77
72
|
"docs": {
|
|
78
73
|
"tags": [],
|
|
79
|
-
"text": "
|
|
74
|
+
"text": "Determine if component should have inverse colors to be used on dark background"
|
|
80
75
|
},
|
|
81
76
|
"attribute": "inverse",
|
|
82
77
|
"reflect": false,
|
|
@@ -162,31 +157,7 @@ export class GovBadge {
|
|
|
162
157
|
},
|
|
163
158
|
"attribute": "size",
|
|
164
159
|
"reflect": false,
|
|
165
|
-
"defaultValue": "
|
|
166
|
-
},
|
|
167
|
-
"type": {
|
|
168
|
-
"type": "string",
|
|
169
|
-
"mutable": false,
|
|
170
|
-
"complexType": {
|
|
171
|
-
"original": "TypesType",
|
|
172
|
-
"resolved": "\"base\" | \"link\" | \"outlined\" | \"solid\"",
|
|
173
|
-
"references": {
|
|
174
|
-
"TypesType": {
|
|
175
|
-
"location": "import",
|
|
176
|
-
"path": "../gov-button/default/constants",
|
|
177
|
-
"id": "../../../packages/core/src/components/gov-button/default/constants.ts::TypesType"
|
|
178
|
-
}
|
|
179
|
-
}
|
|
180
|
-
},
|
|
181
|
-
"required": false,
|
|
182
|
-
"optional": false,
|
|
183
|
-
"docs": {
|
|
184
|
-
"tags": [],
|
|
185
|
-
"text": "Badges's type"
|
|
186
|
-
},
|
|
187
|
-
"attribute": "type",
|
|
188
|
-
"reflect": false,
|
|
189
|
-
"defaultValue": "\"solid\""
|
|
160
|
+
"defaultValue": "ButtonSizes._M"
|
|
190
161
|
},
|
|
191
162
|
"tag": {
|
|
192
163
|
"type": "string",
|
|
@@ -206,7 +177,7 @@ export class GovBadge {
|
|
|
206
177
|
"optional": false,
|
|
207
178
|
"docs": {
|
|
208
179
|
"tags": [],
|
|
209
|
-
"text": "Used to change the
|
|
180
|
+
"text": "Used to change the HTML tag in the badge"
|
|
210
181
|
},
|
|
211
182
|
"attribute": "tag",
|
|
212
183
|
"reflect": false,
|
|
@@ -234,7 +205,7 @@ export class GovBadge {
|
|
|
234
205
|
},
|
|
235
206
|
"attribute": "variant",
|
|
236
207
|
"reflect": false,
|
|
237
|
-
"defaultValue": "
|
|
208
|
+
"defaultValue": "ButtonVariants.PRIMARY"
|
|
238
209
|
},
|
|
239
210
|
"wcagLabel": {
|
|
240
211
|
"type": "string",
|
|
@@ -319,9 +290,6 @@ export class GovBadge {
|
|
|
319
290
|
}, {
|
|
320
291
|
"propName": "size",
|
|
321
292
|
"methodName": "validateSize"
|
|
322
|
-
}, {
|
|
323
|
-
"propName": "type",
|
|
324
|
-
"methodName": "validateType"
|
|
325
293
|
}];
|
|
326
294
|
}
|
|
327
295
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gov-badge.js","sourceRoot":"","sources":["../../../../../../src/components/gov-badge/gov-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAErG,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACpD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAmB,MAAM,aAAa,CAAA;AACrE,OAAO,EACN,WAAW,EAEX,cAAc,
|
|
1
|
+
{"version":3,"file":"gov-badge.js","sourceRoot":"","sources":["../../../../../../src/components/gov-badge/gov-badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, Watch } from \"@stencil/core\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { BadgeClass, NativeType, NativeTypesType } from \"./constants\"\nimport {\n\tButtonSizes,\n\tButtonSizesType,\n\tButtonVariants,\n\tButtonVariantType,\n} from \"../gov-button/default/constants\"\n\n@Component({\n\ttag: \"gov-badge\",\n\tstyleUrl: \"gov-badge.scss\",\n})\nexport class GovBadge {\n\tprivate triggerRef?: HTMLButtonElement | HTMLLinkElement | HTMLSpanElement\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovBadgeElement\n\n\t/**\n\t * Determine if component should have inverse colors to be used on dark background\n\t */\n\t@Prop() readonly inverse: boolean = false\n\t/**\n\t * Makes the badge component disabled.\n\t * This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean = false\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href\n\t */\n\t@Prop() readonly href: string\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target\n\t */\n\t@Prop() readonly target: string\n\t/**\n\t * Badge’s size.\n\t */\n\t@Prop() readonly size: ButtonSizesType = ButtonSizes._M\n\t/**\n\t * Used to change the HTML tag in the badge\n\t */\n\t@Prop() readonly tag: NativeTypesType = \"span\"\n\t/**\n\t * Style variation of the badge.\n\t */\n\t@Prop() readonly variant: ButtonVariantType = ButtonVariants.PRIMARY\n\t/**\n\t * Adds accessible label for the button that is only shown for screen readers.\n\t * Typically, this label text replaces the visible text on the button for users who use assistive technology.\n\t */\n\t@Prop({ attribute: \"wcag-label\" }) readonly wcagLabel: string\n\t/**\n\t * Emitted when the button click.\n\t */\n\t@Event({ eventName: \"gov-click\" }) govClick: EventEmitter<PointerEvent>\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(ButtonVariants, newValue, BadgeClass.root)\n\t}\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(ButtonSizes, newValue, BadgeClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateSize(this.size)\n\t}\n\n\trender() {\n\t\tconst Tag = this.href ? NativeType.A : this.tag\n\t\tconst nativeType = Tag == NativeType.BUTTON ? NativeType.BUTTON : undefined\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={this.h.classes([\n\t\t\t\t\tBadgeClass.root,\n\t\t\t\t\tthis.h.hasSlot(\"right\") ? BadgeClass.hasRight : undefined,\n\t\t\t\t\tthis.h.hasSlot(\"left\") ? BadgeClass.hasLeft : undefined,\n\t\t\t\t])}\n\t\t\t\tdisabled={this.disabled}\n\t\t\t\thref={this.href}\n\t\t\t\tvariant={this.variant}\n\t\t\t\tsize={this.size}\n\t\t\t\tinverse={this.inverse}\n\t\t\t\thoverable={Tag == NativeType.A || Tag == NativeType.BUTTON}\n\t\t\t>\n\t\t\t\t<Tag\n\t\t\t\t\tclass=\"element\"\n\t\t\t\t\thref={this.href}\n\t\t\t\t\ttarget={this.target}\n\t\t\t\t\taria-label={this.wcagLabel}\n\t\t\t\t\tref={el => (this.triggerRef = el as HTMLLinkElement | HTMLButtonElement | HTMLSpanElement)}\n\t\t\t\t\tonClick={this.onClickHandler.bind(this)}\n\t\t\t\t\ttype={nativeType}>\n\t\t\t\t\t{this.h.hasSlot(\"left\") && <slot name=\"left\"></slot>}\n\t\t\t\t\t{this.h.hasSlot(\"left-icon\") && <slot name=\"left-icon\"></slot>}\n\t\t\t\t\t<slot />\n\t\t\t\t\t{this.h.hasSlot(\"right-icon\") && <slot name=\"right-icon\"></slot>}\n\t\t\t\t\t{this.h.hasSlot(\"right\") && <slot name=\"right\"></slot>}\n\t\t\t\t</Tag>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onClickHandler(e: PointerEvent): void {\n\t\te.stopPropagation()\n\t\tif (this.disabled === false && this.tag === NativeType.BUTTON) {\n\t\t\tthis.govClick.emit(e)\n\t\t}\n\t}\n\n\t/**\n\t * Returns a clickable element instance\n\t */\n\t@Method()\n\tasync getTriggerRef() {\n\t\treturn this.triggerRef\n\t}\n}\n"]}
|