@gov-design-system-ce/components 0.0.35 → 0.0.37
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/core.cjs.js +1 -1
- package/dist/cjs/{form-62c6a8c6.js → form-8c6daa83.js} +8 -8
- package/dist/cjs/form-8c6daa83.js.map +1 -0
- package/dist/cjs/gov-app.cjs.entry.js +1190 -637
- package/dist/cjs/gov-app.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-badge.cjs.entry.js +1 -1
- package/dist/cjs/gov-badge.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-button.cjs.entry.js +1 -1
- package/dist/cjs/gov-button.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-control-group.cjs.entry.js +62 -0
- package/dist/cjs/gov-control-group.cjs.entry.js.map +1 -0
- package/dist/cjs/gov-form-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/gov-form-control.cjs.entry.js +35 -7
- package/dist/cjs/gov-form-control.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-form-file.cjs.entry.js +2 -2
- package/dist/cjs/gov-form-file.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-form-input.cjs.entry.js +6 -6
- package/dist/cjs/gov-form-input.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-form-label.cjs.entry.js +1 -1
- package/dist/cjs/gov-form-label.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-form-multi-select.cjs.entry.js +2 -2
- package/dist/cjs/gov-form-multi-select.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-form-radio.cjs.entry.js +1 -1
- package/dist/cjs/gov-form-search.cjs.entry.js +5 -1
- package/dist/cjs/gov-form-search.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-form-select.cjs.entry.js +13 -8
- package/dist/cjs/gov-form-select.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-form-switch.cjs.entry.js +1 -1
- package/dist/cjs/gov-icon.cjs.entry.js +1 -1
- package/dist/cjs/gov-pagination.cjs.entry.js +10 -3
- package/dist/cjs/gov-pagination.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-wizzard-item.cjs.entry.js +13 -15
- package/dist/cjs/gov-wizzard-item.cjs.entry.js.map +1 -1
- package/dist/cjs/index-29ac07f6.js +4 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/gov-accordion/gov-accordion-item.css +3 -0
- package/dist/collection/components/gov-accordion/gov-accordion.css +3 -0
- package/dist/collection/components/gov-alert/gov-alert.css +3 -0
- package/dist/collection/components/gov-app/gov-app.css +3 -0
- package/dist/collection/components/gov-app/gov-app.js +10 -8
- package/dist/collection/components/gov-app/gov-app.js.map +1 -1
- package/dist/collection/components/gov-attachments/gov-attachments-item.css +3 -0
- package/dist/collection/components/gov-attachments/gov-attachments.css +3 -0
- package/dist/collection/components/gov-backdrop/gov-backdrop.css +3 -0
- package/dist/collection/components/gov-badge/gov-badge.css +6 -3
- package/dist/collection/components/gov-breadcrumbs/gov-breadcrumbs.css +3 -0
- package/dist/collection/components/gov-button/gov-button.css +3 -3
- package/dist/collection/components/gov-card/gov-card.css +3 -0
- package/dist/collection/components/gov-container/gov-container.css +3 -0
- package/dist/collection/components/gov-control-group/constants.js +7 -0
- package/dist/collection/components/gov-control-group/constants.js.map +1 -0
- package/dist/collection/components/gov-control-group/gov-control-group.css +268 -0
- package/dist/collection/components/gov-control-group/gov-control-group.js +137 -0
- package/dist/collection/components/gov-control-group/gov-control-group.js.map +1 -0
- package/dist/collection/components/gov-cookiebar/gov-cookiebar.css +3 -0
- package/dist/collection/components/gov-empty/gov-empty.css +3 -0
- package/dist/collection/components/gov-error-code/gov-error-code.css +3 -0
- package/dist/collection/components/gov-form/autocomplete/gov-form-autocomplete.css +3 -0
- package/dist/collection/components/gov-form/checkbox/gov-form-checkbox.css +3 -0
- package/dist/collection/components/gov-form/control/gov-form-control.css +3 -0
- package/dist/collection/components/gov-form/control/gov-form-control.js +35 -10
- package/dist/collection/components/gov-form/control/gov-form-control.js.map +1 -1
- package/dist/collection/components/gov-form/file/gov-form-file.css +10 -0
- package/dist/collection/components/gov-form/group/gov-form-group.css +3 -0
- package/dist/collection/components/gov-form/input/constants.js +1 -1
- package/dist/collection/components/gov-form/input/constants.js.map +1 -1
- package/dist/collection/components/gov-form/input/gov-form-input.css +103 -50
- package/dist/collection/components/gov-form/input/gov-form-input.js +9 -9
- package/dist/collection/components/gov-form/input/gov-form-input.js.map +1 -1
- package/dist/collection/components/gov-form/label/gov-form-label.css +3 -0
- package/dist/collection/components/gov-form/label/gov-form-label.js +1 -1
- package/dist/collection/components/gov-form/label/gov-form-label.js.map +1 -1
- package/dist/collection/components/gov-form/message/gov-form-message.css +3 -0
- package/dist/collection/components/gov-form/multiselect/gov-form-multi-select.css +103 -50
- package/dist/collection/components/gov-form/password-power/gov-form-password-power.css +3 -0
- package/dist/collection/components/gov-form/radio/gov-form-radio.css +3 -0
- package/dist/collection/components/gov-form/search/constants.js +3 -0
- package/dist/collection/components/gov-form/search/constants.js.map +1 -1
- package/dist/collection/components/gov-form/search/gov-form-search.css +9 -1
- package/dist/collection/components/gov-form/search/gov-form-search.js +30 -0
- package/dist/collection/components/gov-form/search/gov-form-search.js.map +1 -1
- package/dist/collection/components/gov-form/select/gov-form-select.css +103 -50
- package/dist/collection/components/gov-form/select/gov-form-select.js +12 -5
- package/dist/collection/components/gov-form/select/gov-form-select.js.map +1 -1
- package/dist/collection/components/gov-form/switch/gov-form-switch.css +3 -0
- package/dist/collection/components/gov-grid/gov-grid-item.css +3 -0
- package/dist/collection/components/gov-grid/gov-grid.css +3 -0
- package/dist/collection/components/gov-icon/gov-icon.css +3 -0
- package/dist/collection/components/gov-layout/gov-layout-column.css +3 -0
- package/dist/collection/components/gov-layout/gov-layout.css +3 -0
- package/dist/collection/components/gov-loading/loading/gov-loading.css +3 -0
- package/dist/collection/components/gov-loading/skeleton/gov-skeleton.css +3 -0
- package/dist/collection/components/gov-message/gov-message.css +3 -0
- package/dist/collection/components/gov-modal/gov-modal.css +3 -0
- package/dist/collection/components/gov-nav/gov-nav-item.css +3 -0
- package/dist/collection/components/gov-nav/gov-nav.css +3 -0
- package/dist/collection/components/gov-pagination/gov-pagination.css +3 -0
- package/dist/collection/components/gov-pagination/gov-pagination.js +19 -3
- package/dist/collection/components/gov-pagination/gov-pagination.js.map +1 -1
- package/dist/collection/components/gov-promp/gov-prompt.css +3 -0
- package/dist/collection/components/gov-side-nav/gov-side-nav-item.css +3 -0
- package/dist/collection/components/gov-side-nav/gov-side-nav.css +3 -0
- package/dist/collection/components/gov-spacer/gov-spacer.css +3 -0
- package/dist/collection/components/gov-statsbar/gov-statsbar-item.css +3 -0
- package/dist/collection/components/gov-statsbar/gov-statsbar.css +3 -0
- package/dist/collection/components/gov-stepper/gov-stepper-item.css +3 -0
- package/dist/collection/components/gov-stepper/gov-stepper.css +3 -0
- package/dist/collection/components/gov-tabs/gov-tabs-item.css +3 -0
- package/dist/collection/components/gov-tabs/gov-tabs.css +3 -0
- package/dist/collection/components/gov-tile/container/gov-tiles.css +3 -0
- package/dist/collection/components/gov-tile/gov-tile.css +3 -0
- package/dist/collection/components/gov-toast/gov-toast.css +3 -0
- package/dist/collection/components/gov-tooltip/gov-tooltip-content.css +3 -0
- package/dist/collection/components/gov-tooltip/gov-tooltip.css +3 -0
- package/dist/collection/components/gov-wizzard/gov-wizzard-item.css +3 -0
- package/dist/collection/components/gov-wizzard/gov-wizzard-item.js +29 -36
- package/dist/collection/components/gov-wizzard/gov-wizzard-item.js.map +1 -1
- package/dist/collection/components/gov-wizzard/gov-wizzard-item.types.js +2 -0
- package/dist/collection/components/gov-wizzard/gov-wizzard-item.types.js.map +1 -0
- package/dist/collection/components/gov-wizzard/gov-wizzard.css +3 -0
- package/dist/collection/pages/Button.js +41 -0
- package/dist/collection/pages/Button.js.map +1 -1
- package/dist/collection/pages/ControlGroup.js +324 -0
- package/dist/collection/pages/ControlGroup.js.map +1 -0
- package/dist/collection/pages/Forms.js +369 -206
- package/dist/collection/pages/Forms.js.map +1 -1
- package/dist/collection/pages/Pagination.js +2 -2
- package/dist/collection/pages/Pagination.js.map +1 -1
- package/dist/collection/pages/Tooltip.js +24 -0
- package/dist/collection/pages/Tooltip.js.map +1 -1
- package/dist/components/form.js +16 -16
- package/dist/components/form.js.map +1 -1
- package/dist/components/gov-app.js +1190 -637
- package/dist/components/gov-app.js.map +1 -1
- package/dist/components/gov-badge2.js +1 -1
- package/dist/components/gov-badge2.js.map +1 -1
- package/dist/components/gov-button2.js +1 -1
- package/dist/components/gov-button2.js.map +1 -1
- package/dist/components/gov-control-group.d.ts +11 -0
- package/dist/components/gov-control-group.js +75 -0
- package/dist/components/gov-control-group.js.map +1 -0
- package/dist/components/gov-form-control.js +35 -7
- package/dist/components/gov-form-control.js.map +1 -1
- package/dist/components/gov-form-file.js +1 -1
- package/dist/components/gov-form-file.js.map +1 -1
- package/dist/components/gov-form-input2.js +5 -5
- package/dist/components/gov-form-input2.js.map +1 -1
- package/dist/components/gov-form-label.js +1 -1
- package/dist/components/gov-form-label.js.map +1 -1
- package/dist/components/gov-form-multi-select.js +1 -1
- package/dist/components/gov-form-multi-select.js.map +1 -1
- package/dist/components/gov-form-search.js +8 -2
- package/dist/components/gov-form-search.js.map +1 -1
- package/dist/components/gov-form-select2.js +12 -7
- package/dist/components/gov-form-select2.js.map +1 -1
- package/dist/components/gov-icon2.js +1 -1
- package/dist/components/gov-pagination.js +10 -3
- package/dist/components/gov-pagination.js.map +1 -1
- package/dist/components/gov-wizzard-item.js +14 -17
- package/dist/components/gov-wizzard-item.js.map +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +1 -0
- package/dist/components/index.js.map +1 -1
- package/dist/core/core.esm.js +1 -1
- package/dist/core/core.esm.js.map +1 -1
- package/dist/core/p-00c4dc0d.entry.js +2 -0
- package/dist/core/p-00c4dc0d.entry.js.map +1 -0
- package/dist/core/p-06e938d7.entry.js +2 -0
- package/dist/core/p-06e938d7.entry.js.map +1 -0
- package/dist/core/{p-d14130ac.entry.js → p-1bdec1f4.entry.js} +2 -2
- package/dist/core/{p-e3b56738.entry.js → p-227a9e9b.entry.js} +2 -2
- package/dist/core/p-3a69322b.entry.js +2 -0
- package/dist/core/p-3a69322b.entry.js.map +1 -0
- package/dist/core/p-61af5a2c.js +2 -0
- package/dist/core/p-61af5a2c.js.map +1 -0
- package/dist/core/{p-fe1ee53b.entry.js → p-63ef7826.entry.js} +2 -2
- package/dist/core/p-63ef7826.entry.js.map +1 -0
- package/dist/core/p-6dc65816.entry.js +2 -0
- package/dist/core/p-6dc65816.entry.js.map +1 -0
- package/dist/core/{p-d1275fa8.entry.js → p-9584f413.entry.js} +2 -2
- package/dist/core/p-9584f413.entry.js.map +1 -0
- package/dist/core/p-9bd90cc4.entry.js +2 -0
- package/dist/core/p-9bd90cc4.entry.js.map +1 -0
- package/dist/core/{p-d9b4bc20.entry.js → p-9fbee429.entry.js} +2 -2
- package/dist/core/p-9fbee429.entry.js.map +1 -0
- package/dist/core/{p-d37f03e0.entry.js → p-bbbc4e43.entry.js} +2 -2
- package/dist/core/{p-a8ef7292.entry.js → p-c289af04.entry.js} +2 -2
- package/dist/core/p-c289af04.entry.js.map +1 -0
- package/dist/core/p-c39004f5.entry.js +2 -0
- package/dist/core/p-c39004f5.entry.js.map +1 -0
- package/dist/core/{p-5a2a9cde.entry.js → p-c69cd34e.entry.js} +2 -2
- package/dist/core/p-cc9e9a31.entry.js +2 -0
- package/dist/core/{p-a423b62a.entry.js.map → p-cc9e9a31.entry.js.map} +1 -1
- package/dist/core/p-ef7a1780.entry.js +2 -0
- package/dist/core/p-ef7a1780.entry.js.map +1 -0
- package/dist/core/p-fd555dce.entry.js +2 -0
- package/dist/core/{p-35aadeeb.entry.js.map → p-fd555dce.entry.js.map} +1 -1
- package/dist/custom-elements/index.d.ts +6 -0
- package/dist/custom-elements/index.js +1 -1
- package/dist/custom-elements/index.js.map +1 -1
- package/dist/esm/core.js +1 -1
- package/dist/esm/{form-613741a5.js → form-cd65d95e.js} +8 -8
- package/dist/esm/form-cd65d95e.js.map +1 -0
- package/dist/esm/gov-app.entry.js +1190 -637
- package/dist/esm/gov-app.entry.js.map +1 -1
- package/dist/esm/gov-badge.entry.js +1 -1
- package/dist/esm/gov-badge.entry.js.map +1 -1
- package/dist/esm/gov-button.entry.js +1 -1
- package/dist/esm/gov-button.entry.js.map +1 -1
- package/dist/esm/gov-control-group.entry.js +58 -0
- package/dist/esm/gov-control-group.entry.js.map +1 -0
- package/dist/esm/gov-form-checkbox.entry.js +1 -1
- package/dist/esm/gov-form-control.entry.js +35 -7
- package/dist/esm/gov-form-control.entry.js.map +1 -1
- package/dist/esm/gov-form-file.entry.js +2 -2
- package/dist/esm/gov-form-file.entry.js.map +1 -1
- package/dist/esm/gov-form-input.entry.js +6 -6
- package/dist/esm/gov-form-input.entry.js.map +1 -1
- package/dist/esm/gov-form-label.entry.js +1 -1
- package/dist/esm/gov-form-label.entry.js.map +1 -1
- package/dist/esm/gov-form-multi-select.entry.js +2 -2
- package/dist/esm/gov-form-multi-select.entry.js.map +1 -1
- package/dist/esm/gov-form-radio.entry.js +1 -1
- package/dist/esm/gov-form-search.entry.js +5 -1
- package/dist/esm/gov-form-search.entry.js.map +1 -1
- package/dist/esm/gov-form-select.entry.js +13 -8
- package/dist/esm/gov-form-select.entry.js.map +1 -1
- package/dist/esm/gov-form-switch.entry.js +1 -1
- package/dist/esm/gov-icon.entry.js +1 -1
- package/dist/esm/gov-pagination.entry.js +10 -3
- package/dist/esm/gov-pagination.entry.js.map +1 -1
- package/dist/esm/gov-wizzard-item.entry.js +13 -15
- package/dist/esm/gov-wizzard-item.entry.js.map +1 -1
- package/dist/esm/index-b010bfb4.js +4 -0
- package/dist/esm/loader.js +1 -1
- package/dist/hydrate/index.js +1531 -880
- package/dist/types/components/gov-app/gov-app.d.ts +9 -8
- package/dist/types/components/gov-control-group/constants.d.ts +7 -0
- package/dist/types/components/gov-control-group/gov-control-group.d.ts +29 -0
- package/dist/types/components/gov-form/control/gov-form-control.d.ts +2 -1
- package/dist/types/components/gov-form/input/constants.d.ts +1 -1
- package/dist/types/components/gov-form/input/gov-form-input.d.ts +1 -2
- package/dist/types/components/gov-form/search/constants.d.ts +4 -0
- package/dist/types/components/gov-form/search/gov-form-search.d.ts +5 -0
- package/dist/types/components/gov-form/select/gov-form-select.d.ts +2 -0
- package/dist/types/components/gov-pagination/gov-pagination.d.ts +1 -0
- package/dist/types/components/gov-wizzard/gov-wizzard-item.d.ts +7 -8
- package/dist/types/components/gov-wizzard/gov-wizzard-item.types.d.ts +4 -0
- package/dist/types/components.d.ts +61 -5
- package/dist/types/pages/ControlGroup.d.ts +3 -0
- package/package.json +1 -1
- package/dist/cjs/form-62c6a8c6.js.map +0 -1
- package/dist/core/p-0a300d3e.entry.js +0 -2
- package/dist/core/p-0a300d3e.entry.js.map +0 -1
- package/dist/core/p-35aadeeb.entry.js +0 -2
- package/dist/core/p-37f6b4ef.entry.js +0 -2
- package/dist/core/p-37f6b4ef.entry.js.map +0 -1
- package/dist/core/p-7e524b49.js +0 -2
- package/dist/core/p-7e524b49.js.map +0 -1
- package/dist/core/p-a423b62a.entry.js +0 -2
- package/dist/core/p-a825183a.entry.js +0 -2
- package/dist/core/p-a825183a.entry.js.map +0 -1
- package/dist/core/p-a8ef7292.entry.js.map +0 -1
- package/dist/core/p-bbc765ca.entry.js +0 -2
- package/dist/core/p-bbc765ca.entry.js.map +0 -1
- package/dist/core/p-d1275fa8.entry.js.map +0 -1
- package/dist/core/p-d9b4bc20.entry.js.map +0 -1
- package/dist/core/p-e4bb6114.entry.js +0 -2
- package/dist/core/p-e4bb6114.entry.js.map +0 -1
- package/dist/core/p-e6904513.entry.js +0 -2
- package/dist/core/p-e6904513.entry.js.map +0 -1
- package/dist/core/p-fe1ee53b.entry.js.map +0 -1
- package/dist/esm/form-613741a5.js.map +0 -1
- /package/dist/core/{p-d14130ac.entry.js.map → p-1bdec1f4.entry.js.map} +0 -0
- /package/dist/core/{p-e3b56738.entry.js.map → p-227a9e9b.entry.js.map} +0 -0
- /package/dist/core/{p-d37f03e0.entry.js.map → p-bbbc4e43.entry.js.map} +0 -0
- /package/dist/core/{p-5a2a9cde.entry.js.map → p-c69cd34e.entry.js.map} +0 -0
|
@@ -0,0 +1,268 @@
|
|
|
1
|
+
/* stylelint-disable */
|
|
2
|
+
/* stylelint-enable */
|
|
3
|
+
/* stylelint-disable */
|
|
4
|
+
/* stylelint-enable */
|
|
5
|
+
/* stylelint-disable */
|
|
6
|
+
/* stylelint-enable */
|
|
7
|
+
/* stylelint-disable */
|
|
8
|
+
/* stylelint-enable */
|
|
9
|
+
/* [Core] - Buttons
|
|
10
|
+
------------------------------------------------------------------ */
|
|
11
|
+
/*
|
|
12
|
+
* Gets color from theme-colors or from palette-colors
|
|
13
|
+
*/
|
|
14
|
+
/*
|
|
15
|
+
* Converts hex value to rgb colors value
|
|
16
|
+
*/
|
|
17
|
+
/* stylelint-disable order/order */
|
|
18
|
+
/* stylelint-enable order/order */
|
|
19
|
+
/*
|
|
20
|
+
* Generates list of utility classes for margin, padding
|
|
21
|
+
*
|
|
22
|
+
* Make sure $list of definitions is sorted so that last item is defined last
|
|
23
|
+
* So largest views are mentioned last.
|
|
24
|
+
*/
|
|
25
|
+
/*
|
|
26
|
+
- Variables - Sizes
|
|
27
|
+
*/
|
|
28
|
+
/* "Constants" for general usage */
|
|
29
|
+
/*
|
|
30
|
+
- Variables - Layout
|
|
31
|
+
*/
|
|
32
|
+
/**
|
|
33
|
+
* Utilities - Offset
|
|
34
|
+
*/
|
|
35
|
+
/* stylelint-disable order/order */
|
|
36
|
+
/* stylelint-enable order/order */
|
|
37
|
+
/* stylelint-disable order/order */
|
|
38
|
+
/* stylelint-enable order/order */
|
|
39
|
+
/* stylelint-disable order/order */
|
|
40
|
+
/* stylelint-enable order/order */
|
|
41
|
+
/**
|
|
42
|
+
* Generates CSS3 var with default value
|
|
43
|
+
*/
|
|
44
|
+
/*
|
|
45
|
+
- Variables - General
|
|
46
|
+
*/
|
|
47
|
+
/*
|
|
48
|
+
- Variables - Typography
|
|
49
|
+
*/
|
|
50
|
+
/*
|
|
51
|
+
- Variables - Variants
|
|
52
|
+
*/
|
|
53
|
+
/*
|
|
54
|
+
- Variables - Container
|
|
55
|
+
*/
|
|
56
|
+
/*
|
|
57
|
+
- Variables - Sizes
|
|
58
|
+
*/
|
|
59
|
+
/* "Constants" for general usage */
|
|
60
|
+
/*
|
|
61
|
+
- Variables - Accordion
|
|
62
|
+
*/
|
|
63
|
+
/*
|
|
64
|
+
- Variables - Attachments
|
|
65
|
+
*/
|
|
66
|
+
/*
|
|
67
|
+
- Variables - Alert
|
|
68
|
+
*/
|
|
69
|
+
/*
|
|
70
|
+
- Variables - Backdrop
|
|
71
|
+
*/
|
|
72
|
+
/*
|
|
73
|
+
- Variables - Buttons (&& Badges)
|
|
74
|
+
*/
|
|
75
|
+
/*
|
|
76
|
+
- Variables - Breadcrumbs
|
|
77
|
+
*/
|
|
78
|
+
/*
|
|
79
|
+
- Variables - Classes
|
|
80
|
+
*/
|
|
81
|
+
/*
|
|
82
|
+
- Variables - Colors
|
|
83
|
+
*/
|
|
84
|
+
/*
|
|
85
|
+
- Variables - Control Group
|
|
86
|
+
*/
|
|
87
|
+
/*
|
|
88
|
+
- Variables - Cookiebar
|
|
89
|
+
*/
|
|
90
|
+
/*
|
|
91
|
+
- Variables - Card
|
|
92
|
+
*/
|
|
93
|
+
/*
|
|
94
|
+
- Variables - Message
|
|
95
|
+
*/
|
|
96
|
+
/*
|
|
97
|
+
- Variables - Empty
|
|
98
|
+
*/
|
|
99
|
+
/*
|
|
100
|
+
- Variables - Error code
|
|
101
|
+
*/
|
|
102
|
+
/*
|
|
103
|
+
- Variables - Grid
|
|
104
|
+
*/
|
|
105
|
+
/*
|
|
106
|
+
- Variables - Tiles
|
|
107
|
+
*/
|
|
108
|
+
/*
|
|
109
|
+
- Variables - Modal & Prompt
|
|
110
|
+
*/
|
|
111
|
+
/**
|
|
112
|
+
* Utilities - Offset
|
|
113
|
+
*/
|
|
114
|
+
/*
|
|
115
|
+
- Variables - shadows
|
|
116
|
+
*/
|
|
117
|
+
/* "Constants" for general usage */
|
|
118
|
+
/*
|
|
119
|
+
- Variables - Statsbar
|
|
120
|
+
*/
|
|
121
|
+
/*
|
|
122
|
+
- Variables - Tabs
|
|
123
|
+
*/
|
|
124
|
+
/*
|
|
125
|
+
- Variables - Tooltip
|
|
126
|
+
*/
|
|
127
|
+
/*
|
|
128
|
+
- Variables - Loading
|
|
129
|
+
*/
|
|
130
|
+
/*
|
|
131
|
+
- Variables - Forms
|
|
132
|
+
*/
|
|
133
|
+
/*
|
|
134
|
+
- Variables - Form Autocomplete
|
|
135
|
+
*/
|
|
136
|
+
/*
|
|
137
|
+
- Variables - Form Message
|
|
138
|
+
*/
|
|
139
|
+
/*
|
|
140
|
+
- Variables - Form label
|
|
141
|
+
*/
|
|
142
|
+
/*
|
|
143
|
+
- Variables - Form switch
|
|
144
|
+
*/
|
|
145
|
+
/*
|
|
146
|
+
- Variables - Form select
|
|
147
|
+
*/
|
|
148
|
+
/*
|
|
149
|
+
- Variables - Form input
|
|
150
|
+
*/
|
|
151
|
+
/*
|
|
152
|
+
- Variables - Form multiselect
|
|
153
|
+
*/
|
|
154
|
+
/*
|
|
155
|
+
- Variables - Form password power
|
|
156
|
+
*/
|
|
157
|
+
/*
|
|
158
|
+
- Variables - Form checkbox & radio
|
|
159
|
+
*/
|
|
160
|
+
/*
|
|
161
|
+
- Variables - Form group
|
|
162
|
+
*/
|
|
163
|
+
/*
|
|
164
|
+
- Variables - Form file
|
|
165
|
+
*/
|
|
166
|
+
/*
|
|
167
|
+
- Variables - Toast Message
|
|
168
|
+
*/
|
|
169
|
+
/*
|
|
170
|
+
- Variables - Wizzard
|
|
171
|
+
*/
|
|
172
|
+
/*
|
|
173
|
+
- Variables - Stepper
|
|
174
|
+
*/
|
|
175
|
+
/*
|
|
176
|
+
- Variables - Side nav
|
|
177
|
+
*/
|
|
178
|
+
/*
|
|
179
|
+
- Variables - Grid & Tile
|
|
180
|
+
*/
|
|
181
|
+
/*
|
|
182
|
+
- Variables - Pagination
|
|
183
|
+
*/
|
|
184
|
+
/*
|
|
185
|
+
- Variables - Nav
|
|
186
|
+
*/
|
|
187
|
+
/*
|
|
188
|
+
- Variables - Layout
|
|
189
|
+
*/
|
|
190
|
+
.gov-spin-animation,
|
|
191
|
+
.gov-pseudo-spin-animation::before {
|
|
192
|
+
animation: spin 4s linear infinite;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
@keyframes spin {
|
|
196
|
+
100% {
|
|
197
|
+
transform: rotate(360deg);
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
@keyframes countdown {
|
|
201
|
+
to {
|
|
202
|
+
transform: scaleX(0);
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
@keyframes progress {
|
|
206
|
+
0% {
|
|
207
|
+
background-position: -200px 0;
|
|
208
|
+
}
|
|
209
|
+
100% {
|
|
210
|
+
background-position: calc(200px + 100%) 0;
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
@keyframes pulse {
|
|
214
|
+
0% {
|
|
215
|
+
opacity: 1;
|
|
216
|
+
}
|
|
217
|
+
50% {
|
|
218
|
+
opacity: 0.4;
|
|
219
|
+
}
|
|
220
|
+
100% {
|
|
221
|
+
opacity: 1;
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
/*
|
|
225
|
+
* Control group
|
|
226
|
+
*/
|
|
227
|
+
.gov-control-group {
|
|
228
|
+
position: relative;
|
|
229
|
+
display: flex;
|
|
230
|
+
width: 100%;
|
|
231
|
+
align-items: center;
|
|
232
|
+
border-radius: var(--gov-control-group-border-radius, 0.25rem);
|
|
233
|
+
overflow: hidden;
|
|
234
|
+
}
|
|
235
|
+
.gov-control-group .element *,
|
|
236
|
+
.gov-control-group .gov-button .element {
|
|
237
|
+
border: none !important;
|
|
238
|
+
border-radius: 0;
|
|
239
|
+
}
|
|
240
|
+
.gov-control-group.bordered > *:last-child {
|
|
241
|
+
border-right: none !important;
|
|
242
|
+
}
|
|
243
|
+
.gov-control-group[variant=primary] {
|
|
244
|
+
border: var(--gov-control-group-border-primary, 0.0625rem solid var(--gov-color-primary-600));
|
|
245
|
+
}
|
|
246
|
+
.gov-control-group[variant=primary].bordered > * {
|
|
247
|
+
border-right: var(--gov-control-group-border-primary, 0.0625rem solid var(--gov-color-primary-600));
|
|
248
|
+
}
|
|
249
|
+
.gov-control-group[variant=secondary] {
|
|
250
|
+
border: var(--gov-control-group-border-secondary, 0.0625rem solid var(--gov-color-secondary-700));
|
|
251
|
+
}
|
|
252
|
+
.gov-control-group[variant=secondary].bordered > * {
|
|
253
|
+
border-right: var(--gov-control-group-border-secondary, 0.0625rem solid var(--gov-color-secondary-700));
|
|
254
|
+
}
|
|
255
|
+
.gov-control-group[invalid=""], .gov-control-group[invalid=true i], .gov-control-group[invalid="1"] {
|
|
256
|
+
border: var(--gov-control-group-border-invalid, 0.0625rem solid var(--gov-color-error-400));
|
|
257
|
+
}
|
|
258
|
+
.gov-control-group[disabled=""], .gov-control-group[disabled=true i], .gov-control-group[disabled="1"] {
|
|
259
|
+
border: var(--gov-control-group-border-disabled, 0.0625rem solid var(--gov-color-secondary-600));
|
|
260
|
+
pointer-events: none;
|
|
261
|
+
}
|
|
262
|
+
.gov-control-group[disabled=""] *, .gov-control-group[disabled=true i] *, .gov-control-group[disabled="1"] * {
|
|
263
|
+
background-color: var(--gov-control-group-background-disabled, var(--gov-color-secondary-300));
|
|
264
|
+
color: var(--gov-control-group-color-disabled, var(--gov-color-secondary-600)) !important;
|
|
265
|
+
}
|
|
266
|
+
.gov-control-group[disabled=""].bordered > *, .gov-control-group[disabled=true i].bordered > *, .gov-control-group[disabled="1"].bordered > * {
|
|
267
|
+
border-right: var(--gov-control-group-border-disabled, 0.0625rem solid var(--gov-color-secondary-600));
|
|
268
|
+
}
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
import { Host, h } from '@stencil/core';
|
|
2
|
+
import { Variants } from '../../core/constants/variants';
|
|
3
|
+
import { govForm } from "../../helpers/Dom/form";
|
|
4
|
+
import { govHost, toBoolAttr, toBoolAttrIfDefined } from '../../helpers/Dom/template';
|
|
5
|
+
import { validateProp } from '../../helpers/Validate/props';
|
|
6
|
+
import { ControlGroupClass } from './constants';
|
|
7
|
+
export class GovControlGroup {
|
|
8
|
+
constructor() {
|
|
9
|
+
this.variant = Variants.PRIMARY;
|
|
10
|
+
this.invalid = undefined;
|
|
11
|
+
this.disabled = undefined;
|
|
12
|
+
this.isBordered = false;
|
|
13
|
+
this.h = govHost(this.host);
|
|
14
|
+
this.f = govForm(this.h);
|
|
15
|
+
}
|
|
16
|
+
validateVariant(newValue) {
|
|
17
|
+
validateProp(Variants, newValue, ControlGroupClass.root);
|
|
18
|
+
}
|
|
19
|
+
watchDisabled() {
|
|
20
|
+
this.passControlAttrs();
|
|
21
|
+
}
|
|
22
|
+
passControlAttrs() {
|
|
23
|
+
this.f.passAttrToControl("disabled", toBoolAttr(this.disabled));
|
|
24
|
+
this.f.passAttrToControl("invalid", toBoolAttr(this.invalid));
|
|
25
|
+
}
|
|
26
|
+
componentWillLoad() {
|
|
27
|
+
this.watchDisabled();
|
|
28
|
+
}
|
|
29
|
+
render() {
|
|
30
|
+
const bordered = this.isBordered === true ? " bordered" : "";
|
|
31
|
+
return (h(Host, { class: this.h.classes(ControlGroupClass.root) + bordered, variant: this.variant, invalid: toBoolAttrIfDefined(this.invalid), disabled: this.disabled }, h("slot", null)));
|
|
32
|
+
}
|
|
33
|
+
static get is() { return "gov-control-group"; }
|
|
34
|
+
static get originalStyleUrls() {
|
|
35
|
+
return {
|
|
36
|
+
"$": ["gov-control-group.scss"]
|
|
37
|
+
};
|
|
38
|
+
}
|
|
39
|
+
static get styleUrls() {
|
|
40
|
+
return {
|
|
41
|
+
"$": ["gov-control-group.css"]
|
|
42
|
+
};
|
|
43
|
+
}
|
|
44
|
+
static get properties() {
|
|
45
|
+
return {
|
|
46
|
+
"variant": {
|
|
47
|
+
"type": "string",
|
|
48
|
+
"mutable": false,
|
|
49
|
+
"complexType": {
|
|
50
|
+
"original": "ControlGroupType",
|
|
51
|
+
"resolved": "\"primary\" | \"secondary\"",
|
|
52
|
+
"references": {
|
|
53
|
+
"ControlGroupType": {
|
|
54
|
+
"location": "import",
|
|
55
|
+
"path": "./constants"
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
"required": false,
|
|
60
|
+
"optional": false,
|
|
61
|
+
"docs": {
|
|
62
|
+
"tags": [],
|
|
63
|
+
"text": "Style variation of the content message."
|
|
64
|
+
},
|
|
65
|
+
"attribute": "variant",
|
|
66
|
+
"reflect": false,
|
|
67
|
+
"defaultValue": "Variants.PRIMARY"
|
|
68
|
+
},
|
|
69
|
+
"invalid": {
|
|
70
|
+
"type": "boolean",
|
|
71
|
+
"mutable": false,
|
|
72
|
+
"complexType": {
|
|
73
|
+
"original": "boolean",
|
|
74
|
+
"resolved": "boolean",
|
|
75
|
+
"references": {}
|
|
76
|
+
},
|
|
77
|
+
"required": false,
|
|
78
|
+
"optional": false,
|
|
79
|
+
"docs": {
|
|
80
|
+
"tags": [],
|
|
81
|
+
"text": "Indicates the entered value does not conform to the format expected by the application."
|
|
82
|
+
},
|
|
83
|
+
"attribute": "invalid",
|
|
84
|
+
"reflect": false
|
|
85
|
+
},
|
|
86
|
+
"disabled": {
|
|
87
|
+
"type": "boolean",
|
|
88
|
+
"mutable": false,
|
|
89
|
+
"complexType": {
|
|
90
|
+
"original": "boolean",
|
|
91
|
+
"resolved": "boolean",
|
|
92
|
+
"references": {}
|
|
93
|
+
},
|
|
94
|
+
"required": false,
|
|
95
|
+
"optional": false,
|
|
96
|
+
"docs": {
|
|
97
|
+
"tags": [],
|
|
98
|
+
"text": "Makes the whole component disabled.\nThis prevents users from being able to interact with the elements, and conveys its inactive state to assistive technologies."
|
|
99
|
+
},
|
|
100
|
+
"attribute": "disabled",
|
|
101
|
+
"reflect": false
|
|
102
|
+
},
|
|
103
|
+
"isBordered": {
|
|
104
|
+
"type": "boolean",
|
|
105
|
+
"mutable": false,
|
|
106
|
+
"complexType": {
|
|
107
|
+
"original": "boolean",
|
|
108
|
+
"resolved": "boolean",
|
|
109
|
+
"references": {}
|
|
110
|
+
},
|
|
111
|
+
"required": false,
|
|
112
|
+
"optional": false,
|
|
113
|
+
"docs": {
|
|
114
|
+
"tags": [],
|
|
115
|
+
"text": "Specifies the display of the border between elements"
|
|
116
|
+
},
|
|
117
|
+
"attribute": "bordered",
|
|
118
|
+
"reflect": false,
|
|
119
|
+
"defaultValue": "false"
|
|
120
|
+
}
|
|
121
|
+
};
|
|
122
|
+
}
|
|
123
|
+
static get elementRef() { return "host"; }
|
|
124
|
+
static get watchers() {
|
|
125
|
+
return [{
|
|
126
|
+
"propName": "variant",
|
|
127
|
+
"methodName": "validateVariant"
|
|
128
|
+
}, {
|
|
129
|
+
"propName": "disabled",
|
|
130
|
+
"methodName": "watchDisabled"
|
|
131
|
+
}, {
|
|
132
|
+
"propName": "invalid",
|
|
133
|
+
"methodName": "watchDisabled"
|
|
134
|
+
}];
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
//# sourceMappingURL=gov-control-group.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"gov-control-group.js","sourceRoot":"","sources":["../../../../../../src/components/gov-control-group/gov-control-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAEhD,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AAErF,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,iBAAiB,EAAoB,MAAM,aAAa,CAAA;AAMjE,MAAM,OAAO,eAAe;EAI3B;mBAS6C,QAAQ,CAAC,OAAO;;;sBAaG,KAAK;IArBpE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC3B,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;GACxB;EAsBD,eAAe,CAAC,QAAgB;IAC/B,YAAY,CAAC,QAAQ,EAAE,QAAQ,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAA;EACzD,CAAC;EAID,aAAa;IACZ,IAAI,CAAC,gBAAgB,EAAE,CAAA;EACxB,CAAC;EAEO,gBAAgB;IACvB,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,UAAU,EAAE,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAA;IAC/D,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,SAAS,EAAE,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAA;EAC9D,CAAC;EAED,iBAAiB;IAChB,IAAI,CAAC,aAAa,EAAE,CAAA;EACrB,CAAC;EAED,MAAM;IACL,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAA;IAC5D,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,iBAAiB,CAAC,IAAI,CAAC,GAAG,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACzJ,eAAQ,CACF,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Host, Prop, Watch, h } from '@stencil/core'\nimport { Variants } from '../../core/constants/variants'\nimport { govForm } from \"../../helpers/Dom/form\"\nimport { GovForm } from \"../../helpers/Dom/form.types\"\nimport { govHost, toBoolAttr, toBoolAttrIfDefined } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { ControlGroupClass, ControlGroupType } from './constants'\n\n@Component({\n\ttag: 'gov-control-group',\n\tstyleUrl: 'gov-control-group.scss',\n})\nexport class GovControlGroup {\n\tprivate h: GovHost\n\tprivate f: GovForm\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.f = govForm(this.h)\n\t}\n\n\t@Element() host: HTMLGovControlGroupElement\n\t/**\n\t * Style variation of the content message.\n\t */\n\t@Prop() readonly variant: ControlGroupType = Variants.PRIMARY\n\t/**\n\t * Indicates the entered value does not conform to the format expected by the application.\n\t */\n\t@Prop() readonly invalid: boolean\n\t/**\n\t * Makes the whole component disabled.\n\t * This prevents users from being able to interact with the elements, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean\n\t/**\n\t * Specifies the display of the border between elements\n\t */\n\t@Prop({ attribute: 'bordered' }) readonly isBordered: boolean = false\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, ControlGroupClass.root)\n\t}\n\n\t@Watch(\"disabled\")\n\t@Watch(\"invalid\")\n\twatchDisabled(): void {\n\t\tthis.passControlAttrs()\n\t}\n\n\tprivate passControlAttrs() {\n\t\tthis.f.passAttrToControl(\"disabled\", toBoolAttr(this.disabled))\n\t\tthis.f.passAttrToControl(\"invalid\", toBoolAttr(this.invalid))\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.watchDisabled()\n\t}\n\n\trender() {\n\t\tconst bordered = this.isBordered === true ? \" bordered\" : \"\"\n\t\treturn (\n\t\t\t<Host class={this.h.classes(ControlGroupClass.root) + bordered} variant={this.variant} invalid={toBoolAttrIfDefined(this.invalid)} disabled={this.disabled}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { h, Host } from "@stencil/core";
|
|
2
|
-
import { govHost } from "../../../helpers/Dom/template";
|
|
3
2
|
import { govForm } from "../../../helpers/Dom/form";
|
|
3
|
+
import { govHost } from "../../../helpers/Dom/template";
|
|
4
4
|
import { createID, splitByWhitespace } from "../../../utils/string.utils";
|
|
5
5
|
import { FormControlClass } from "./constants";
|
|
6
6
|
export class GovFormControl {
|
|
@@ -16,11 +16,10 @@ export class GovFormControl {
|
|
|
16
16
|
this.f = govForm(this.h);
|
|
17
17
|
this.controlId = createID("GovFormControl");
|
|
18
18
|
}
|
|
19
|
-
watchInvalid() {
|
|
20
|
-
this.passChildAttrs();
|
|
21
|
-
}
|
|
22
19
|
componentDidRender() {
|
|
23
20
|
this.passChildAttrs();
|
|
21
|
+
this.invalidChildAttrs();
|
|
22
|
+
this.disabledChildAttrs();
|
|
24
23
|
this.syncControlMessages();
|
|
25
24
|
this.formElementDescriptionControl();
|
|
26
25
|
}
|
|
@@ -44,6 +43,38 @@ export class GovFormControl {
|
|
|
44
43
|
this.h.passChildAttr([...formElements, "gov-form-label"], "identifier", this.identifier || this.controlId);
|
|
45
44
|
}
|
|
46
45
|
}
|
|
46
|
+
invalidChildAttrs() {
|
|
47
|
+
const formElements = [
|
|
48
|
+
"gov-form-select",
|
|
49
|
+
"gov-form-input",
|
|
50
|
+
"gov-form-switch",
|
|
51
|
+
"gov-form-checkbox",
|
|
52
|
+
"gov-form-radio",
|
|
53
|
+
"gov-form-multi-select",
|
|
54
|
+
"gov-form-file",
|
|
55
|
+
"gov-form-search",
|
|
56
|
+
];
|
|
57
|
+
this.h.passChildAttr(formElements, "invalid", this.invalid);
|
|
58
|
+
if (this.f.hasGroupChildren === false) {
|
|
59
|
+
this.h.passChildAttr([...formElements, "gov-form-label"], "identifier", this.identifier || this.controlId);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
disabledChildAttrs() {
|
|
63
|
+
const formElements = [
|
|
64
|
+
"gov-form-select",
|
|
65
|
+
"gov-form-input",
|
|
66
|
+
"gov-form-switch",
|
|
67
|
+
"gov-form-checkbox",
|
|
68
|
+
"gov-form-radio",
|
|
69
|
+
"gov-form-multi-select",
|
|
70
|
+
"gov-form-file",
|
|
71
|
+
"gov-form-search",
|
|
72
|
+
];
|
|
73
|
+
this.h.passChildAttr(formElements, "disabled", this.disabled);
|
|
74
|
+
if (this.f.hasGroupChildren === false) {
|
|
75
|
+
this.h.passChildAttr([...formElements, "gov-form-label"], "identifier", this.identifier || this.controlId);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
47
78
|
formElementDescriptionControl() {
|
|
48
79
|
const bottomSlot = this.host.querySelector("." + FormControlClass.bottom);
|
|
49
80
|
if (!bottomSlot)
|
|
@@ -221,11 +252,5 @@ export class GovFormControl {
|
|
|
221
252
|
};
|
|
222
253
|
}
|
|
223
254
|
static get elementRef() { return "host"; }
|
|
224
|
-
static get watchers() {
|
|
225
|
-
return [{
|
|
226
|
-
"propName": "invalid",
|
|
227
|
-
"methodName": "watchInvalid"
|
|
228
|
-
}];
|
|
229
|
-
}
|
|
230
255
|
}
|
|
231
256
|
//# sourceMappingURL=gov-form-control.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gov-form-control.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/control/gov-form-control.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"gov-form-control.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/control/gov-form-control.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Prop } from \"@stencil/core\"\nimport { govForm } from \"../../../helpers/Dom/form\"\nimport { GovForm } from \"../../../helpers/Dom/form.types\"\nimport { govHost } from \"../../../helpers/Dom/template\"\nimport { GovHost } from \"../../../helpers/Dom/template.types\"\nimport { createID, splitByWhitespace } from \"../../../utils/string.utils\"\nimport { FormControlClass, FormControlSizesType } from \"./constants\"\n\n@Component({\n\ttag: \"gov-form-control\",\n\tstyleUrl: \"gov-form-control.scss\",\n})\nexport class GovFormControl {\n\tprivate readonly h: GovHost\n\tprivate f: GovForm\n\tprivate readonly controlId: string\n\tprivate observer: MutationObserver\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.f = govForm(this.h)\n\t\tthis.controlId = createID(\"GovFormControl\")\n\t}\n\n\t@Element() host: HTMLGovFormControlElement\n\t/**\n\t * Defines the space between nested components.\n\t */\n\t@Prop() readonly gap?: FormControlSizesType\n\t/**\n\t * Form element identifier\n\t */\n\t@Prop({ attribute: \"identifier\" }) readonly identifier: string\n\t/**\n\t * Indicates the entered value of child form element does not conform to the format expected by the application.\n\t */\n\t@Prop() readonly invalid: boolean = false\n\t/**\n\t/**\n\t * Indicates the form element is disabled\n\t */\n\t@Prop() readonly disabled: boolean = false\n\t/**\n\t/**\n\t * Indicates the entered value of child form element does conform to the format expected by the application.\n\t */\n\t@Prop() readonly success: boolean = false\n\t/**\n\t * Use control as a fieldset for better accessibility.\n\t * Note: Don't forget to set the legend attribute of the gov-form-label component\n\t */\n\t@Prop() readonly fieldset: boolean = false\n\t/**\n\t * Form element size.\n\t */\n\t@Prop() readonly size?: FormControlSizesType = \"m\"\n\n\tcomponentDidRender() {\n\t\tthis.passChildAttrs()\n\t\tthis.invalidChildAttrs()\n\t\tthis.disabledChildAttrs()\n\t\tthis.syncControlMessages()\n\t\tthis.formElementDescriptionControl()\n\t}\n\n\tdisconnectedCallback(): void {\n\t\tthis.observer?.disconnect()\n\t}\n\n\tprivate passChildAttrs() {\n\t\tconst formElements = [\n\t\t\t\"gov-form-select\",\n\t\t\t\"gov-form-input\",\n\t\t\t\"gov-form-switch\",\n\t\t\t\"gov-form-checkbox\",\n\t\t\t\"gov-form-radio\",\n\t\t\t\"gov-form-multi-select\",\n\t\t\t\"gov-form-file\",\n\t\t\t\"gov-form-search\",\n\t\t]\n\t\tthis.h.passChildAttr(formElements, \"success\", this.success)\n\n\t\tif (this.f.hasGroupChildren === false) {\n\t\t\tthis.h.passChildAttr([...formElements, \"gov-form-label\"], \"identifier\", this.identifier || this.controlId)\n\t\t}\n\t}\n\n\tprivate invalidChildAttrs() {\n\t\tconst formElements = [\n\t\t\t\"gov-form-select\",\n\t\t\t\"gov-form-input\",\n\t\t\t\"gov-form-switch\",\n\t\t\t\"gov-form-checkbox\",\n\t\t\t\"gov-form-radio\",\n\t\t\t\"gov-form-multi-select\",\n\t\t\t\"gov-form-file\",\n\t\t\t\"gov-form-search\",\n\t\t]\n\t\tthis.h.passChildAttr(formElements, \"invalid\", this.invalid)\n\n\t\tif (this.f.hasGroupChildren === false) {\n\t\t\tthis.h.passChildAttr([...formElements, \"gov-form-label\"], \"identifier\", this.identifier || this.controlId)\n\t\t}\n\t}\n\n\tprivate disabledChildAttrs() {\n\t\tconst formElements = [\n\t\t\t\"gov-form-select\",\n\t\t\t\"gov-form-input\",\n\t\t\t\"gov-form-switch\",\n\t\t\t\"gov-form-checkbox\",\n\t\t\t\"gov-form-radio\",\n\t\t\t\"gov-form-multi-select\",\n\t\t\t\"gov-form-file\",\n\t\t\t\"gov-form-search\",\n\t\t]\n\t\tthis.h.passChildAttr(formElements, \"disabled\", this.disabled)\n\n\t\tif (this.f.hasGroupChildren === false) {\n\t\t\tthis.h.passChildAttr([...formElements, \"gov-form-label\"], \"identifier\", this.identifier || this.controlId)\n\t\t}\n\t}\n\n\tprivate formElementDescriptionControl() {\n\t\tconst bottomSlot = this.host.querySelector(\".\" + FormControlClass.bottom)\n\t\tif (!bottomSlot) return\n\t\tthis.observer = new MutationObserver(\n\t\t\tfunction() {\n\t\t\t\tthis.syncControlMessages()\n\t\t\t}.bind(this),\n\t\t)\n\n\t\tthis.observer.observe(bottomSlot, { childList: true })\n\t}\n\n\tprivate syncControlMessages() {\n\t\tPromise.all(this.f.messageElements.map((message: HTMLGovFormMessageElement) => message.identifier())).then((ids: string[]) => {\n\t\t\tthis.f.mainElementsInControl.forEach((element: Element) => {\n\t\t\t\tconst currentValue = splitByWhitespace(element.getAttribute(\"wcag-described-by\"))\n\t\t\t\telement.removeAttribute(\"wcag-described-by\")\n\t\t\t\tif (Array.isArray(currentValue)) {\n\t\t\t\t\tcurrentValue.forEach(id => (id.indexOf(\"GovFormMessage\") === -1 ? ids.push(id) : null))\n\t\t\t\t}\n\t\t\t\tif (ids.length) {\n\t\t\t\t\telement.setAttribute(\"wcag-described-by\", ids.join(\" \"))\n\t\t\t\t}\n\t\t\t})\n\t\t})\n\t}\n\n\trender() {\n\t\tconst Tag = this.fieldset ? \"fieldset\" : \"div\"\n\t\treturn (\n\t\t\t<Host size={this.size} class={this.h.classes(FormControlClass.root)}>\n\t\t\t\t<Tag class={FormControlClass.holder}>\n\t\t\t\t\t{this.h.hasSlot(\"top\") && <slot name=\"top\"></slot>}\n\t\t\t\t\t<slot></slot>\n\t\t\t\t\t{this.h.hasSlot(\"bottom\") && (\n\t\t\t\t\t\t<div class={FormControlClass.bottom}>\n\t\t\t\t\t\t\t<slot name=\"bottom\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</Tag>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
|
|
@@ -81,6 +81,9 @@
|
|
|
81
81
|
/*
|
|
82
82
|
- Variables - Colors
|
|
83
83
|
*/
|
|
84
|
+
/*
|
|
85
|
+
- Variables - Control Group
|
|
86
|
+
*/
|
|
84
87
|
/*
|
|
85
88
|
- Variables - Cookiebar
|
|
86
89
|
*/
|
|
@@ -278,6 +281,13 @@
|
|
|
278
281
|
.gov-form-file[expanded=""][invalid=""] .gov-form-file__label .gov-form-label__label, .gov-form-file[expanded=""][invalid=true i] .gov-form-file__label .gov-form-label__label, .gov-form-file[expanded=""][invalid="1"] .gov-form-file__label .gov-form-label__label, .gov-form-file[expanded=true i][invalid=""] .gov-form-file__label .gov-form-label__label, .gov-form-file[expanded=true i][invalid=true i] .gov-form-file__label .gov-form-label__label, .gov-form-file[expanded=true i][invalid="1"] .gov-form-file__label .gov-form-label__label, .gov-form-file[expanded="1"][invalid=""] .gov-form-file__label .gov-form-label__label, .gov-form-file[expanded="1"][invalid=true i] .gov-form-file__label .gov-form-label__label, .gov-form-file[expanded="1"][invalid="1"] .gov-form-file__label .gov-form-label__label {
|
|
279
282
|
border-color: var(--gov-form-state-color-error, var(--gov-color-error));
|
|
280
283
|
}
|
|
284
|
+
.gov-form-file[expanded=""][invalid=""] .gov-form-file__area, .gov-form-file[expanded=""][invalid=true i] .gov-form-file__area, .gov-form-file[expanded=""][invalid="1"] .gov-form-file__area, .gov-form-file[expanded=true i][invalid=""] .gov-form-file__area, .gov-form-file[expanded=true i][invalid=true i] .gov-form-file__area, .gov-form-file[expanded=true i][invalid="1"] .gov-form-file__area, .gov-form-file[expanded="1"][invalid=""] .gov-form-file__area, .gov-form-file[expanded="1"][invalid=true i] .gov-form-file__area, .gov-form-file[expanded="1"][invalid="1"] .gov-form-file__area {
|
|
285
|
+
border-color: var(--gov-form-state-color-error, var(--gov-color-error));
|
|
286
|
+
}
|
|
287
|
+
.gov-form-file[expanded=""][disabled=""] .gov-form-file__area, .gov-form-file[expanded=""][disabled=true i] .gov-form-file__area, .gov-form-file[expanded=""][disabled="1"] .gov-form-file__area, .gov-form-file[expanded=true i][disabled=""] .gov-form-file__area, .gov-form-file[expanded=true i][disabled=true i] .gov-form-file__area, .gov-form-file[expanded=true i][disabled="1"] .gov-form-file__area, .gov-form-file[expanded="1"][disabled=""] .gov-form-file__area, .gov-form-file[expanded="1"][disabled=true i] .gov-form-file__area, .gov-form-file[expanded="1"][disabled="1"] .gov-form-file__area {
|
|
288
|
+
pointer-events: none;
|
|
289
|
+
color: var(--gov-form-file-disabled-color, var(--gov-color-secondary-600));
|
|
290
|
+
}
|
|
281
291
|
@media (min-width: 30em) {
|
|
282
292
|
.gov-form-file[expanded=""] .gov-form-file__label .gov-form-label__label, .gov-form-file[expanded=true i] .gov-form-file__label .gov-form-label__label, .gov-form-file[expanded="1"] .gov-form-file__label .gov-form-label__label {
|
|
283
293
|
padding: 2rem;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Sizes } from '../../../core/constants/sizes';
|
|
2
2
|
import { Variants } from '../../../core/constants/variants';
|
|
3
3
|
import { pick } from '../../../utils/utils';
|
|
4
|
-
export const FormInputSizes = pick(Sizes, ['_M', '_L', '_XL']);
|
|
4
|
+
export const FormInputSizes = pick(Sizes, ['_S', '_M', '_L', '_XL']);
|
|
5
5
|
export const FormInputVariants = pick(Variants, ['PRIMARY', 'SECONDARY']);
|
|
6
6
|
export var InputTypes;
|
|
7
7
|
(function (InputTypes) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/input/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAA;
|
|
1
|
+
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/input/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAA;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAE3C,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAA;AAGpE,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,CAAA;AAGzE,MAAM,CAAN,IAAY,UAcX;AAdD,WAAY,UAAU;EACrB,6BAAe,CAAA;EACf,2BAAa,CAAA;EACb,+CAAiC,CAAA;EACjC,6BAAe,CAAA;EACf,6BAAe,CAAA;EACf,+BAAiB,CAAA;EACjB,mCAAqB,CAAA;EACrB,+BAAiB,CAAA;EACjB,yBAAW,CAAA;EACX,2BAAa,CAAA;EACb,2BAAa,CAAA;EACb,yBAAW,CAAA;EACX,2BAAa,CAAA;AACd,CAAC,EAdW,UAAU,KAAV,UAAU,QAcrB;AAID,MAAM,CAAN,IAAY,IAEX;AAFD,WAAY,IAAI;EACf,uBAAe,CAAA;AAChB,CAAC,EAFW,IAAI,KAAJ,IAAI,QAEf;AAID,MAAM,CAAC,MAAM,cAAc,GAAG;EAC7B,IAAI,EAAE,gBAAgB;CACtB,CAAA","sourcesContent":["import { Sizes } from '../../../core/constants/sizes'\nimport { Variants } from '../../../core/constants/variants'\nimport { ValueOf } from '../../../types/interfaces'\nimport { pick } from '../../../utils/utils'\n\nexport const FormInputSizes = pick(Sizes, ['_S', '_M', '_L', '_XL'])\nexport type FormInputSizesType = `${ValueOf<typeof FormInputSizes>}`\n\nexport const FormInputVariants = pick(Variants, ['PRIMARY', 'SECONDARY'])\nexport type FormInputVariantType = `${ValueOf<typeof FormInputVariants>}`\n\nexport enum InputTypes {\n\tCOLOR = 'color',\n\tDATE = 'date',\n\tDATETIME_LOCAL = 'datetime-local',\n\tEMAIL = 'email',\n\tMONTH = 'month',\n\tNUMBER = 'number',\n\tPASSWORD = 'password',\n\tSEARCH = 'search',\n\tTEL = 'tel',\n\tTEXT = 'text',\n\tTIME = 'time',\n\tURL = 'url',\n\tWEEK = 'week',\n}\n\nexport type InputType = `${ValueOf<typeof InputTypes>}`\n\nexport enum Type {\n\tRESET = 'reset',\n}\n\nexport type TypesType = `${ValueOf<typeof Type>}`\n\nexport const FormInputClass = {\n\troot: 'gov-form-input',\n}\n"]}
|