@ongov/ontario-design-system-component-library 4.3.0 → 5.0.0-alpha.1
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/index-88d5cf20.js +2 -2
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{ontario-accordion_43.cjs.entry.js → ontario-accordion_44.cjs.entry.js} +738 -296
- package/dist/cjs/ontario-accordion_44.cjs.entry.js.map +1 -0
- package/dist/cjs/ontario-design-system-components.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/ontario-card/ontario-card-types.js +29 -2
- package/dist/collection/components/ontario-card/ontario-card-types.js.map +1 -1
- package/dist/collection/components/ontario-card/ontario-card.css +257 -31
- package/dist/collection/components/ontario-card/ontario-card.js +104 -80
- package/dist/collection/components/ontario-card/ontario-card.js.map +1 -1
- package/dist/collection/components/ontario-card/test/ontario-cards.spec.js +23 -13
- package/dist/collection/components/ontario-card/test/ontario-cards.spec.js.map +1 -1
- package/dist/collection/components/ontario-header/ontario-header.js +17 -3
- package/dist/collection/components/ontario-header/ontario-header.js.map +1 -1
- package/dist/collection/components/ontario-header/service-ontario-header.css +0 -3
- package/dist/collection/components/ontario-header/test/ontario-header.spec.js +3 -3
- package/dist/collection/components/ontario-header/test/ontario-header.spec.js.map +1 -1
- package/dist/collection/components/ontario-language-toggle/ontario-language-toggle.js +193 -47
- package/dist/collection/components/ontario-language-toggle/ontario-language-toggle.js.map +1 -1
- package/dist/collection/components/ontario-language-toggle/test/ontario-language-toggle.spec.js +16 -3
- package/dist/collection/components/ontario-language-toggle/test/ontario-language-toggle.spec.js.map +1 -1
- package/dist/collection/components/ontario-search-box/assets/ontario-icon-close.svg +1 -0
- package/dist/collection/components/ontario-search-box/assets/ontario-logo--mobile.svg +6 -0
- package/dist/collection/components/ontario-search-box/ontario-search-box.css +823 -0
- package/dist/collection/components/ontario-search-box/ontario-search-box.js +584 -0
- package/dist/collection/components/ontario-search-box/ontario-search-box.js.map +1 -0
- package/dist/collection/components/ontario-search-box/test/ontario-search-box.e2e.js +20 -0
- package/dist/collection/components/ontario-search-box/test/ontario-search-box.e2e.js.map +1 -0
- package/dist/collection/components/ontario-search-box/test/ontario-search-box.spec.js +19 -0
- package/dist/collection/components/ontario-search-box/test/ontario-search-box.spec.js.map +1 -0
- package/dist/collection/components/ontario-step-indicator/ontario-step-indicator.js +5 -5
- package/dist/collection/components/ontario-table/ontario-table.js +5 -5
- package/dist/collection/components/ontario-textarea/ontario-textarea.js +3 -3
- package/dist/collection/i18n/global.i18n.json +172 -162
- package/dist/collection/utils/common/input/input.js +3 -0
- package/dist/collection/utils/common/input/input.js.map +1 -1
- package/dist/collection/utils/common/input-caption/input-caption.js +5 -3
- package/dist/collection/utils/common/input-caption/input-caption.js.map +1 -1
- package/dist/collection/utils/common/language-types.js +1 -1
- package/dist/collection/utils/common/language-types.js.map +1 -1
- package/dist/collection/utils/helper/utils-types.js +2 -0
- package/dist/collection/utils/helper/utils-types.js.map +1 -0
- package/dist/collection/utils/helper/utils.js +26 -0
- package/dist/collection/utils/helper/utils.js.map +1 -1
- package/dist/components/error-message.js +1 -324
- package/dist/components/error-message.js.map +1 -1
- package/dist/components/event-handler.js +330 -0
- package/dist/components/event-handler.js.map +1 -0
- package/dist/components/global.i18n.js +184 -173
- package/dist/components/global.i18n.js.map +1 -1
- package/dist/components/input.js +3 -0
- package/dist/components/input.js.map +1 -1
- package/dist/components/ontario-card.js +118 -66
- package/dist/components/ontario-card.js.map +1 -1
- package/dist/components/ontario-checkboxes.js +2 -1
- package/dist/components/ontario-checkboxes.js.map +1 -1
- package/dist/components/ontario-date-input.js +2 -1
- package/dist/components/ontario-date-input.js.map +1 -1
- package/dist/components/ontario-dropdown-list.js +2 -1
- package/dist/components/ontario-dropdown-list.js.map +1 -1
- package/dist/components/ontario-header.js +13 -7
- package/dist/components/ontario-header.js.map +1 -1
- package/dist/components/ontario-icon-search2.js +6 -0
- package/dist/components/ontario-icon-search2.js.map +1 -0
- package/dist/components/ontario-input.js +2 -1
- package/dist/components/ontario-input.js.map +1 -1
- package/dist/components/ontario-language-toggle2.js +180 -37
- package/dist/components/ontario-language-toggle2.js.map +1 -1
- package/dist/components/ontario-radio-buttons.js +2 -1
- package/dist/components/ontario-radio-buttons.js.map +1 -1
- package/dist/components/ontario-search-box.d.ts +11 -0
- package/dist/components/ontario-search-box.js +269 -0
- package/dist/components/ontario-search-box.js.map +1 -0
- package/dist/components/ontario-step-indicator.js +5 -5
- package/dist/components/ontario-table.js +5 -5
- package/dist/components/ontario-textarea.js +5 -4
- package/dist/components/ontario-textarea.js.map +1 -1
- package/dist/components/utils.js +28 -0
- package/dist/components/utils.js.map +1 -1
- package/dist/esm/index-603026f7.js +2 -2
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{ontario-accordion_43.entry.js → ontario-accordion_44.entry.js} +738 -296
- package/dist/esm/ontario-accordion_44.entry.js.map +1 -0
- package/dist/esm/ontario-design-system-components.js +1 -1
- package/dist/ontario-design-system-components/i18n/global.i18n.json +172 -162
- package/dist/ontario-design-system-components/ontario-design-system-components.esm.js +1 -1
- package/dist/ontario-design-system-components/ontario-design-system-components.esm.js.map +1 -1
- package/dist/ontario-design-system-components/{p-cff41424.entry.js → p-9c3a1be9.entry.js} +2204 -1918
- package/dist/ontario-design-system-components/p-9c3a1be9.entry.js.map +1 -0
- package/dist/types/components/ontario-card/ontario-card-types.d.ts +4 -4
- package/dist/types/components/ontario-card/ontario-card.d.ts +40 -29
- package/dist/types/components/ontario-header/ontario-header.d.ts +13 -2
- package/dist/types/components/ontario-language-toggle/ontario-language-toggle.d.ts +75 -8
- package/dist/types/components/ontario-search-box/ontario-search-box.d.ts +180 -0
- package/dist/types/components.d.ts +211 -22
- package/dist/types/utils/common/input/input.d.ts +2 -1
- package/dist/types/utils/common/input-caption/input-caption.d.ts +7 -1
- package/dist/types/utils/common/language-types.d.ts +2 -1
- package/dist/types/utils/helper/utils-types.d.ts +2 -0
- package/dist/types/utils/helper/utils.d.ts +21 -0
- package/package.json +3 -3
- package/src/components/ontario-card/ontario-card-types.tsx +33 -4
- package/src/components/ontario-card/ontario-card.scss +59 -38
- package/src/components/ontario-card/ontario-card.tsx +98 -70
- package/src/components/ontario-card/readme.md +57 -27
- package/src/components/ontario-card/test/__snapshots__/ontario-cards.spec.tsx.snap +66 -0
- package/src/components/ontario-card/test/ontario-cards.spec.tsx +27 -13
- package/src/components/ontario-card-collection/readme.md +13 -13
- package/src/components/ontario-checkbox/ontario-checkboxes.scss +0 -1
- package/src/components/ontario-header/ontario-header.tsx +13 -4
- package/src/components/ontario-header/service-ontario-header.scss +0 -4
- package/src/components/ontario-header/test/ontario-header.spec.tsx +3 -3
- package/src/components/ontario-hint-text/readme.md +2 -0
- package/src/components/ontario-language-toggle/ontario-language-toggle.tsx +192 -45
- package/src/components/ontario-language-toggle/readme.md +10 -10
- package/src/components/ontario-language-toggle/test/__snapshots__/ontario-language-toggle.spec.tsx.snap +1 -1
- package/src/components/ontario-language-toggle/test/ontario-language-toggle.spec.tsx +17 -3
- package/src/components/ontario-radio-buttons/ontario-radio-buttons.scss +0 -1
- package/src/components/ontario-search-box/assets/ontario-icon-close.svg +1 -0
- package/src/components/ontario-search-box/assets/ontario-logo--mobile.svg +6 -0
- package/src/components/ontario-search-box/ontario-search-box.scss +141 -0
- package/src/components/ontario-search-box/ontario-search-box.tsx +341 -0
- package/src/components/ontario-search-box/readme.md +132 -0
- package/src/components/ontario-search-box/test/__snapshots__/ontario-search-box.spec.tsx.snap +35 -0
- package/src/components/ontario-search-box/test/ontario-search-box.e2e.ts +21 -0
- package/src/components/ontario-search-box/test/ontario-search-box.spec.tsx +22 -0
- package/src/components.d.ts +211 -22
- package/src/french.html +37 -0
- package/src/index.html +292 -38
- package/src/translations/global.i18n.json +172 -162
- package/src/utils/common/input/input.tsx +4 -1
- package/src/utils/common/input-caption/input-caption.tsx +9 -3
- package/src/utils/common/language-types.ts +2 -1
- package/src/utils/helper/utils-types.ts +2 -0
- package/src/utils/helper/utils.ts +30 -0
- package/www/build/ontario-design-system-components.esm.js +1 -1
- package/www/build/ontario-design-system-components.esm.js.map +1 -1
- package/www/build/{p-b61db0f6.js → p-84035ac3.js} +1 -1
- package/www/build/{p-cff41424.entry.js → p-9c3a1be9.entry.js} +2204 -1918
- package/www/build/p-9c3a1be9.entry.js.map +1 -0
- package/www/french.html +37 -0
- package/www/i18n/global.i18n.json +172 -162
- package/www/index.html +266 -38
- package/dist/cjs/ontario-accordion_43.cjs.entry.js.map +0 -1
- package/dist/esm/ontario-accordion_43.entry.js.map +0 -1
- package/dist/ontario-design-system-components/p-cff41424.entry.js.map +0 -1
- package/www/build/p-cff41424.entry.js.map +0 -1
|
@@ -1,12 +1,40 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
|
|
2
2
|
import { a as validateValueAgainstArray } from './validation-functions.js';
|
|
3
3
|
import { C as ConsoleMessageClass } from './console-message.js';
|
|
4
|
+
import { p as printArray } from './utils.js';
|
|
4
5
|
|
|
5
|
-
const
|
|
6
|
-
const
|
|
6
|
+
const Layouts = ['vertical', 'horizontal'];
|
|
7
|
+
const HeaderColours = [
|
|
8
|
+
'dark-accent',
|
|
9
|
+
'light-accent',
|
|
10
|
+
'light-gold',
|
|
11
|
+
'light-yellow',
|
|
12
|
+
'light-taupe',
|
|
13
|
+
'light-green',
|
|
14
|
+
'light-lime',
|
|
15
|
+
'light-teal',
|
|
16
|
+
'light-sky',
|
|
17
|
+
'light-blue',
|
|
18
|
+
'light-purple',
|
|
19
|
+
'light-orange',
|
|
20
|
+
'light-red',
|
|
21
|
+
'light-magenta',
|
|
22
|
+
'gold',
|
|
23
|
+
'yellow',
|
|
24
|
+
'taupe',
|
|
25
|
+
'green',
|
|
26
|
+
'lime',
|
|
27
|
+
'teal',
|
|
28
|
+
'sky',
|
|
29
|
+
'blue',
|
|
30
|
+
'purple',
|
|
31
|
+
'orange',
|
|
32
|
+
'red',
|
|
33
|
+
'magenta',
|
|
34
|
+
];
|
|
7
35
|
|
|
8
36
|
const ontarioCardCss =
|
|
9
|
-
'.ontario-card__heading{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif}.ontario-card__heading{font-size:1.25rem;letter-spacing:0.03rem;line-height:1.5;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){.ontario-card__heading{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}.ontario-card{box-shadow:0rem 0.1875rem 0.5rem 0.0625rem rgba(0, 0, 0, 0.4);border-radius:4px;margin:0 2.5rem 2.5rem 0;padding:0;height:calc(100% - 2.5rem);list-style-type:none;transition:all 0.3s ease-in-out;position:relative;cursor:pointer}.ontario-card:hover{box-shadow:0rem 0.375rem 0.75rem 0.125rem rgba(0, 0, 0, 0.35)}.ontario-card:focus-within{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}.ontario-card:active{box-shadow:0 0 0 4px #009ADB;background-color:#f2f2f2}@media screen and (max-width: 40em){.ontario-card{margin-bottom:3rem;width:100% !important;max-width:100%}}.ontario-card__card-type--horizontal{display:flex}@media screen and (max-width: 40em){.ontario-card__card-type--horizontal{width:100%;max-width:100%}}.ontario-card__card-type--horizontal .ontario-card__image-container,.ontario-card__card-type--horizontal .ontario-card__text-container{position:relative}.ontario-card__card-type--horizontal a:focus-within{box-shadow:none;outline:none}.ontario-card__card-type--horizontal a:active{box-shadow:none}.ontario-card__card-type--horizontal img{height:100%;position:absolute}.ontario-card__image-right{flex-direction:row-reverse}.ontario-card__heading{margin:0;border-radius:4px 4px 0 0;padding:1.25rem 1.5rem 0.5rem 1.5rem;transition:text-decoration 0.3s ease-in-out;background-color:#FFFFFF}.ontario-card:hover .ontario-card__heading{text-decoration-line:underline;text-decoration-color:#1a1a1a}.ontario-
|
|
37
|
+
'.ontario-card__heading{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif}.ontario-card__heading{font-size:1.25rem;letter-spacing:0.03rem;line-height:1.5;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){.ontario-card__heading{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}.ontario-card{box-shadow:0rem 0.1875rem 0.5rem 0.0625rem rgba(0, 0, 0, 0.4);border-radius:4px;margin:0 2.5rem 2.5rem 0;padding:0;height:calc(100% - 2.5rem);list-style-type:none;transition:all 0.3s ease-in-out;position:relative;cursor:pointer}.ontario-card:hover{box-shadow:0rem 0.375rem 0.75rem 0.125rem rgba(0, 0, 0, 0.35)}.ontario-card:focus-within{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}.ontario-card:active{box-shadow:0 0 0 4px #009ADB;background-color:#f2f2f2}@media screen and (max-width: 40em){.ontario-card{margin-bottom:3rem;width:100% !important;max-width:100%}}.ontario-card--image-true{margin-top:-0.5rem}.ontario-card__card-type--horizontal .ontario-card--image-true{margin-top:0}.ontario-card__card-type--horizontal{display:flex}@media screen and (max-width: 40em){.ontario-card__card-type--horizontal{width:100%;max-width:100%}}.ontario-card__card-type--horizontal .ontario-card__image-container,.ontario-card__card-type--horizontal .ontario-card__text-container{position:relative}.ontario-card__card-type--horizontal .ontario-card__heading{border-radius:0}.ontario-card__card-type--horizontal a:focus-within{box-shadow:none;outline:none}.ontario-card__card-type--horizontal a:active{box-shadow:none}.ontario-card__card-type--horizontal img{height:100%;position:absolute}.ontario-card__image-right{flex-direction:row-reverse}.ontario-card__heading{margin:0;border-radius:4px 4px 0 0;padding:1.25rem 1.5rem 0.5rem 1.5rem;transition:text-decoration 0.3s ease-in-out;background-color:#FFFFFF;max-width:none}.ontario-card:hover .ontario-card__heading{text-decoration-line:underline;text-decoration-color:#1a1a1a}.ontario-card--image-true .ontario-card__heading{border-radius:0}.ontario-card__card-type--horizontal .ontario-card--image-true .ontario-card__heading{border-radius:0 4px 0 0}.ontario-card__heading a{color:#1a1a1a;text-decoration:none;outline:none}.ontario-card__heading a::after{content:"";position:absolute;left:0;top:0;right:0;bottom:0}.ontario-card__heading a:focus{box-shadow:none}.ontario-card__heading a:active{outline:none}@media screen and (max-width: 73em){.ontario-card__heading{font-size:1.25rem;padding-left:1rem;padding-right:1rem}}.ontario-card__background--light-accent{background-color:#f2f2f2}.ontario-card__heading--light-accent{background-color:#f2f2f2;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--dark-accent{background-color:#1a1a1a}.ontario-card__heading--dark-accent{background-color:#1a1a1a;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-gold{background-color:#F0E7CC}.ontario-card__heading--light-gold{background-color:#F0E7CC;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-yellow{background-color:#F8E5C3}.ontario-card__heading--light-yellow{background-color:#F8E5C3;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-taupe{background-color:#EBE7DB}.ontario-card__heading--light-taupe{background-color:#EBE7DB;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-green{background-color:#D1EFD4}.ontario-card__heading--light-green{background-color:#D1EFD4;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-lime{background-color:#DDEDC7}.ontario-card__heading--light-lime{background-color:#DDEDC7;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-teal{background-color:#CFEDED}.ontario-card__heading--light-teal{background-color:#CFEDED;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-sky{background-color:#C5EEFA}.ontario-card__heading--light-sky{background-color:#C5EEFA;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-purple{background-color:#F1E3F2}.ontario-card__heading--light-purple{background-color:#F1E3F2;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-orange{background-color:#FEE1D9}.ontario-card__heading--light-orange{background-color:#FEE1D9;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-red{background-color:#FFE0E2}.ontario-card__heading--light-red{background-color:#FFE0E2;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-magenta{background-color:#FEDFF0}.ontario-card__heading--light-magenta{background-color:#FEDFF0;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--gold{background-color:#CBA52E}.ontario-card__heading--gold{background-color:#CBA52E;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--yellow{background-color:#FCAF17}.ontario-card__heading--yellow{background-color:#FCAF17;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--taupe{background-color:#C1B28F}.ontario-card__heading--taupe{background-color:#C1B28F;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--green{background-color:#39B54A}.ontario-card__heading--green{background-color:#39B54A;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--lime{background-color:#8DC63F}.ontario-card__heading--lime{background-color:#8DC63F;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--teal{background-color:#49A7A2}.ontario-card__heading--teal{background-color:#49A7A2;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--sky{background-color:#00B2E3}.ontario-card__heading--sky{background-color:#00B2E3;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--purple{background-color:#B975B7}.ontario-card__heading--purple{background-color:#B975B7;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--orange{background-color:#F15A22}.ontario-card__heading--orange{background-color:#F15A22;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--red{background-color:#F0454B}.ontario-card__heading--red{background-color:#F0454B;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--magenta{background-color:#F03093}.ontario-card__heading--magenta{background-color:#F03093;padding-top:1rem;padding-bottom:1rem}.ontario-card__card-type--horizontal .ontario-card__text-container{width:66.6%}.ontario-card__image-size-one-fourth .ontario-card__text-container{width:75%}.ontario-card--no-image .ontario-card__text-container{width:100%}.ontario-card__description{margin:0;padding:0.5rem 1.5rem 1.5rem 1.5rem;background-color:#FFFFFF;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.ontario-card__description p{margin-top:0}.ontario-card__description p:last-of-type{margin-bottom:0}@media screen and (max-width: 73em){.ontario-card__description{padding:0.5rem 1rem 1.5rem 1rem}}.ontario-card--position-vertical .ontario-card__image-container{margin-bottom:-0.5rem}.ontario-card__card-type--horizontal .ontario-card__image-container{width:33.3%}.ontario-card__image-size-one-fourth .ontario-card__image-container{width:25%}.ontario-card__image{width:100%;height:100%;object-fit:cover;background-size:100% 100%}.ontario-card--position-vertical .ontario-card__image{border-top-left-radius:4px;border-top-right-radius:4px}.ontario-card__image-right .ontario-card__image{border-top-right-radius:4px;border-bottom-right-radius:4px}.ontario-card__image-left .ontario-card__image{border-top-left-radius:4px;border-bottom-left-radius:4px}';
|
|
10
38
|
const OntarioCardStyle0 = ontarioCardCss;
|
|
11
39
|
|
|
12
40
|
const OntarioCard$1 = /*@__PURE__*/ proxyCustomElement(
|
|
@@ -19,102 +47,127 @@ const OntarioCard$1 = /*@__PURE__*/ proxyCustomElement(
|
|
|
19
47
|
this.image = undefined;
|
|
20
48
|
this.description = undefined;
|
|
21
49
|
this.cardLink = undefined;
|
|
22
|
-
this.
|
|
23
|
-
this.
|
|
50
|
+
this.layout = 'vertical';
|
|
51
|
+
this.headerColour = undefined;
|
|
24
52
|
this.horizontalImagePositionType = 'left';
|
|
25
53
|
this.horizontalImageSizeType = 'one-third';
|
|
26
54
|
this.ariaLabelText = undefined;
|
|
27
|
-
this.
|
|
28
|
-
this.headerTypeState = undefined;
|
|
55
|
+
this.layoutState = undefined;
|
|
29
56
|
}
|
|
30
57
|
/**
|
|
31
|
-
* Watch for changes to the `
|
|
58
|
+
* Watch for changes to the `layout` property for validation purposes.
|
|
32
59
|
*
|
|
33
|
-
* If the user input doesn't match one of the array values then `
|
|
34
|
-
* If a match is found in one of the array values then `
|
|
60
|
+
* If the user input doesn't match one of the array values then `layout` will be set to its default (`vertical`).
|
|
61
|
+
* If a match is found in one of the array values then `layoutState` will be set to the matching array key value.
|
|
35
62
|
*/
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
63
|
+
validateLayout() {
|
|
64
|
+
if (this.layout) {
|
|
65
|
+
const isValid = validateValueAgainstArray(this.layout, Layouts);
|
|
66
|
+
if (isValid) {
|
|
67
|
+
this.layoutState = this.layout;
|
|
68
|
+
} else {
|
|
69
|
+
this.warnDefaultLayout();
|
|
70
|
+
this.layoutState = 'vertical';
|
|
71
|
+
}
|
|
42
72
|
}
|
|
43
73
|
}
|
|
44
74
|
/**
|
|
45
|
-
* Watch for changes to the `
|
|
75
|
+
* Watch for changes to the `headerColour` property for validation purposes.
|
|
46
76
|
*
|
|
47
|
-
* If the user input doesn't match one of the array values then `
|
|
48
|
-
* If a match is found in one of the array values then `
|
|
77
|
+
* If the user input doesn't match one of the array values then `headerColour` will be kept empty ('').
|
|
78
|
+
* If a match is found in one of the array values then `headerColour` will be set to the matching array key value.
|
|
49
79
|
*/
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
80
|
+
validateHeaderColour() {
|
|
81
|
+
if (this.headerColour) {
|
|
82
|
+
const isValid = validateValueAgainstArray(this.headerColour, HeaderColours);
|
|
83
|
+
if (!isValid) {
|
|
84
|
+
this.warnDefaultHeaderColour();
|
|
85
|
+
this.headerColour = '';
|
|
86
|
+
}
|
|
56
87
|
}
|
|
57
88
|
}
|
|
58
89
|
/**
|
|
59
|
-
* Print the invalid `
|
|
60
|
-
* @returns default type (basic).
|
|
90
|
+
* Print the invalid `layout` prop warning message.
|
|
61
91
|
*/
|
|
62
|
-
|
|
92
|
+
warnDefaultLayout() {
|
|
63
93
|
const message = new ConsoleMessageClass();
|
|
64
94
|
message
|
|
65
95
|
.addDesignSystemTag()
|
|
66
|
-
.addMonospaceText('
|
|
96
|
+
.addMonospaceText(' layout ')
|
|
67
97
|
.addRegularText('on')
|
|
68
98
|
.addMonospaceText(' <ontario-card> ')
|
|
69
|
-
.addRegularText('was set to an invalid
|
|
70
|
-
.addMonospaceText(
|
|
71
|
-
.addRegularText('are supported. The default
|
|
72
|
-
.addMonospaceText('
|
|
99
|
+
.addRegularText('was set to an invalid layout; only ')
|
|
100
|
+
.addMonospaceText(printArray([...Layouts]))
|
|
101
|
+
.addRegularText(' are supported. The default layout')
|
|
102
|
+
.addMonospaceText(' vertical ')
|
|
73
103
|
.addRegularText('is assumed.')
|
|
74
104
|
.printMessage();
|
|
75
|
-
return 'basic';
|
|
76
105
|
}
|
|
77
106
|
/**
|
|
78
|
-
* Print the invalid `
|
|
79
|
-
* @returns default type (default).
|
|
107
|
+
* Print the invalid `headerColour` prop warning message.
|
|
80
108
|
*/
|
|
81
|
-
|
|
109
|
+
warnDefaultHeaderColour() {
|
|
82
110
|
const message = new ConsoleMessageClass();
|
|
83
111
|
message
|
|
84
112
|
.addDesignSystemTag()
|
|
85
|
-
.addMonospaceText(' header-
|
|
113
|
+
.addMonospaceText(' header-colour ')
|
|
86
114
|
.addRegularText('on')
|
|
87
115
|
.addMonospaceText(' <ontario-card> ')
|
|
88
|
-
.addRegularText('was set to an invalid
|
|
89
|
-
.addMonospaceText(
|
|
90
|
-
.addRegularText('are supported.
|
|
91
|
-
.
|
|
92
|
-
.addRegularText('is assumed.')
|
|
116
|
+
.addRegularText('was set to an invalid colour; only ')
|
|
117
|
+
.addMonospaceText(printArray([...HeaderColours]))
|
|
118
|
+
.addRegularText(' are supported. ')
|
|
119
|
+
.addRegularText('No colour is assumed as the default.')
|
|
93
120
|
.printMessage();
|
|
94
|
-
return 'default';
|
|
95
121
|
}
|
|
96
122
|
/**
|
|
97
|
-
*
|
|
123
|
+
* Returns the top level classes of the card.
|
|
124
|
+
*
|
|
125
|
+
* @returns {string}
|
|
98
126
|
*/
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
127
|
+
getCardClasses() {
|
|
128
|
+
const baseClass =
|
|
129
|
+
this.layoutState === 'horizontal'
|
|
130
|
+
? `ontario-card ontario-card__card-type--${this.layoutState} ontario-card__image-${this.horizontalImagePositionType} ontario-card__image-size-${this.horizontalImageSizeType}`
|
|
131
|
+
: `ontario-card ontario-card__card-type--basic ontario-card--position-${this.layoutState}`;
|
|
132
|
+
const descriptionClass = this.description ? '' : ' ontario-card__description-false';
|
|
133
|
+
const backgroundClass =
|
|
134
|
+
this.headerColour && !this.description ? `ontario-card__background--${this.headerColour}` : '';
|
|
135
|
+
return `${baseClass} ${descriptionClass} ${backgroundClass}`.trim();
|
|
106
136
|
}
|
|
137
|
+
/**
|
|
138
|
+
* Returns the heading classes of the card.
|
|
139
|
+
*
|
|
140
|
+
* @returns {string}
|
|
141
|
+
*/
|
|
142
|
+
getCardHeadingClasses() {
|
|
143
|
+
const baseClass = 'ontario-card__heading';
|
|
144
|
+
const backgroundClass =
|
|
145
|
+
this.headerColour && validateValueAgainstArray(this.headerColour, HeaderColours)
|
|
146
|
+
? `ontario-card__heading--${this.headerColour}`
|
|
147
|
+
: '';
|
|
148
|
+
return `${baseClass} ${backgroundClass}`.trim();
|
|
149
|
+
}
|
|
150
|
+
/**
|
|
151
|
+
* Returns the url that the card links to.
|
|
152
|
+
*
|
|
153
|
+
* @returns {string}
|
|
154
|
+
*/
|
|
107
155
|
getHref() {
|
|
108
156
|
return this.cardLink ? this.cardLink : '#';
|
|
109
157
|
}
|
|
158
|
+
/**
|
|
159
|
+
* Component life cycle hook.
|
|
160
|
+
*
|
|
161
|
+
* https://stenciljs.com/docs/component-lifecycle#connectedcallback
|
|
162
|
+
*/
|
|
110
163
|
componentWillLoad() {
|
|
111
|
-
this.
|
|
112
|
-
this.
|
|
164
|
+
this.validateLayout();
|
|
165
|
+
this.validateHeaderColour();
|
|
113
166
|
}
|
|
114
167
|
render() {
|
|
115
168
|
return h(
|
|
116
169
|
'li',
|
|
117
|
-
{ key: '
|
|
170
|
+
{ key: 'e63b893390ea13ee21a2d47f7ef6c9b403c4d044', class: this.getCardClasses() },
|
|
118
171
|
this.image &&
|
|
119
172
|
h(
|
|
120
173
|
'div',
|
|
@@ -128,16 +181,16 @@ const OntarioCard$1 = /*@__PURE__*/ proxyCustomElement(
|
|
|
128
181
|
h(
|
|
129
182
|
'div',
|
|
130
183
|
{
|
|
131
|
-
key: '
|
|
184
|
+
key: 'b6f0a2218840a76baf9c803c3f155733a00ee029',
|
|
132
185
|
class: `ontario-card__text-container ${this.image ? 'ontario-card--image-true' : ''}`,
|
|
133
186
|
},
|
|
134
187
|
h(
|
|
135
188
|
'h2',
|
|
136
|
-
{ key: '
|
|
189
|
+
{ key: '063dc227db00f3faecec029dc82f5478910b65be', class: this.getCardHeadingClasses() },
|
|
137
190
|
h(
|
|
138
191
|
'a',
|
|
139
192
|
{
|
|
140
|
-
'key': '
|
|
193
|
+
'key': 'debb40036a708ad1a1852a85fa35db2d5f1e23cc',
|
|
141
194
|
'href': this.getHref(),
|
|
142
195
|
'aria-label': this.ariaLabelText,
|
|
143
196
|
},
|
|
@@ -153,8 +206,8 @@ const OntarioCard$1 = /*@__PURE__*/ proxyCustomElement(
|
|
|
153
206
|
}
|
|
154
207
|
static get watchers() {
|
|
155
208
|
return {
|
|
156
|
-
|
|
157
|
-
|
|
209
|
+
layout: ['validateLayout'],
|
|
210
|
+
headerColour: ['validateHeaderColour'],
|
|
158
211
|
};
|
|
159
212
|
}
|
|
160
213
|
static get style() {
|
|
@@ -169,18 +222,17 @@ const OntarioCard$1 = /*@__PURE__*/ proxyCustomElement(
|
|
|
169
222
|
image: [1],
|
|
170
223
|
description: [1],
|
|
171
224
|
cardLink: [1, 'card-link'],
|
|
172
|
-
|
|
173
|
-
|
|
225
|
+
layout: [1],
|
|
226
|
+
headerColour: [1, 'header-colour'],
|
|
174
227
|
horizontalImagePositionType: [1, 'horizontal-image-position-type'],
|
|
175
228
|
horizontalImageSizeType: [1, 'horizontal-image-size-type'],
|
|
176
229
|
ariaLabelText: [1, 'aria-label-text'],
|
|
177
|
-
|
|
178
|
-
headerTypeState: [32],
|
|
230
|
+
layoutState: [32],
|
|
179
231
|
},
|
|
180
232
|
undefined,
|
|
181
233
|
{
|
|
182
|
-
|
|
183
|
-
|
|
234
|
+
layout: ['validateLayout'],
|
|
235
|
+
headerColour: ['validateHeaderColour'],
|
|
184
236
|
},
|
|
185
237
|
],
|
|
186
238
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ontario-card.js","mappings":"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","names":["OntarioCard"],"sources":["src/components/ontario-card/ontario-card-types.tsx","src/components/ontario-card/ontario-card.scss?tag=ontario-card&encapsulation=shadow","src/components/ontario-card/ontario-card.tsx"],"sourcesContent":["export const CardTypes = ['basic', 'image', 'title', 'horizontal'] as const;\nexport const HeaderTypes = ['default', 'light', 'dark'] as const;\nexport const HorizontalImagePositionTypes = ['left', 'right'] as const;\nexport const HorizontalImageSizeTypes = ['one-fourth', 'one-third'] as const;\n\nexport type CardType = (typeof CardTypes)[number];\nexport type HeaderType = (typeof HeaderTypes)[number];\nexport type HorizontalImagePositionType = (typeof HorizontalImagePositionTypes)[number];\nexport type HorizontalImageSizeType = (typeof HorizontalImageSizeTypes)[number];\n","@use 'sass:math';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tplaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;\n\n.ontario-card {\n\tbox-shadow: 0rem 0.1875rem 0.5rem 0.0625rem rgba(0, 0, 0, 0.4);\n\tborder-radius: globalVariables.$global-radius;\n\tmargin: spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-7 spacing.$spacing-0;\n\tpadding: spacing.$spacing-0;\n\t/* \n\t * Required for cards to stay the same height regardless of content size.\n\t * Without subtracting the margin-bottom amount the cards will be too large.\n\t */\n\theight: calc(100% - spacing.$spacing-7);\n\tlist-style-type: none;\n\ttransition: all 0.3s ease-in-out;\n\tposition: relative;\n\tcursor: pointer;\n\n\t&:hover {\n\t\tbox-shadow: 0rem 0.375rem 0.75rem 0.125rem rgba(0, 0, 0, 0.35);\n\t}\n\n\t&:focus-within {\n\t\tbox-shadow: placeholders.$ontario-focus-box-shadow;\n\t\toutline: 4px solid transparent;\n\t\ttransition: box-shadow 0.1s ease-in-out;\n\t}\n\n\t&:active {\n\t\tbox-shadow: placeholders.$ontario-focus-box-shadow;\n\t\tbackground-color: colours.$ontario-greyscale-5;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-bottom: spacing.$spacing-8;\n\t\twidth: 100% !important; // to override the specificity of the widths listed for the card-rows\n\t\tmax-width: 100%;\n\t}\n}\n\n.ontario-card__card-type--horizontal {\n\tdisplay: flex;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: 100%;\n\t\tmax-width: 100%;\n\t}\n\n\t.ontario-card__image-container,\n\t.ontario-card__text-container {\n\t\tposition: relative;\n\t}\n\n\ta {\n\t\t&:focus-within {\n\t\t\tbox-shadow: none;\n\t\t\toutline: none;\n\t\t}\n\n\t\t&:active {\n\t\t\tbox-shadow: none;\n\t\t}\n\t}\n\n\timg {\n\t\theight: 100%;\n\t\tposition: absolute;\n\t}\n}\n\n.ontario-card__image-right {\n\tflex-direction: row-reverse;\n}\n\n.ontario-card__heading {\n\t@extend %h4-styles;\n\tmargin: spacing.$spacing-0;\n\tborder-radius: globalVariables.$global-radius globalVariables.$global-radius 0 0;\n\tpadding: (spacing.$spacing-5 - spacing.$spacing-1) spacing.$spacing-5 spacing.$spacing-2 spacing.$spacing-5;\n\ttransition: text-decoration 0.3s ease-in-out;\n\tbackground-color: colours.$ontario-colour-white;\n\n\t.ontario-card:hover & {\n\t\ttext-decoration-line: underline;\n\t\ttext-decoration-color: colours.$ontario-colour-black;\n\t}\n\n\t.ontario-card__header-type--light & {\n\t\tbackground-color: colours.$ontario-greyscale-5;\n\t\tpadding-top: spacing.$spacing-4;\n\t\tpadding-bottom: spacing.$spacing-4;\n\t\tpadding-right: spacing.$spacing-9;\n\t\tborder-radius: globalVariables.$global-radius globalVariables.$global-radius 0 0;\n\t}\n\n\t.ontario-card__header-type--dark & {\n\t\tbackground-color: colours.$ontario-colour-black;\n\t\tpadding-top: spacing.$spacing-4;\n\t\tpadding-bottom: spacing.$spacing-4;\n\t\tborder-radius: globalVariables.$global-radius globalVariables.$global-radius 0 0;\n\t}\n\n\t.ontario-card__header-type--dark:hover & {\n\t\ttext-decoration-line: underline;\n\t\ttext-decoration-color: colours.$ontario-colour-white;\n\t}\n\n\t.ontario-card--no-description & {\n\t\tpadding: spacing.$spacing-4 spacing.$spacing-5;\n\t\tborder-radius: 0 0 globalVariables.$global-radius globalVariables.$global-radius;\n\t}\n\n\ta {\n\t\tcolor: colours.$ontario-colour-black;\n\t\ttext-decoration: none;\n\t\toutline: none;\n\n\t\t.ontario-card__header-type--dark & {\n\t\t\tcolor: colours.$ontario-colour-white;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tleft: 0;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tbottom: 0;\n\t\t}\n\n\t\t&:focus {\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\t&:active {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\tfont-size: fontSizes.$ontario-font-size-large;\n\t\tpadding-left: spacing.$spacing-4;\n\t\tpadding-right: spacing.$spacing-4;\n\t}\n}\n\n.ontario-card__text-container {\n\t.ontario-card__card-type--horizontal & {\n\t\twidth: 66.6%;\n\t}\n\n\t.ontario-card__image-size-one-fourth & {\n\t\twidth: 75%;\n\t}\n\n\t.ontario-card--no-image & {\n\t\twidth: 100%;\n\t}\n}\n\n.ontario-card__description {\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-2 spacing.$spacing-5 spacing.$spacing-5 spacing.$spacing-5;\n\tbackground-color: colours.$ontario-colour-white;\n\tborder-bottom-left-radius: globalVariables.$global-radius;\n\tborder-bottom-right-radius: globalVariables.$global-radius;\n\n\tp {\n\t\tmargin-top: spacing.$spacing-0;\n\t}\n\n\tp:last-of-type {\n\t\tmargin-bottom: spacing.$spacing-0;\n\t}\n\n\t.ontario-card__header-type--light &,\n\t.ontario-card__header-type--dark & {\n\t\tpadding-top: spacing.$spacing-4;\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\tpadding: spacing.$spacing-2 spacing.$spacing-4 spacing.$spacing-5 spacing.$spacing-4;\n\n\t\t.ontario-card__header-type--light &,\n\t\t.ontario-card__header-type--dark & {\n\t\t\tpadding-top: spacing.$spacing-4;\n\t\t}\n\t}\n}\n\n.ontario-card__image-container {\n\t.ontario-card--position-vertical & {\n\t\tmargin-bottom: spacing.$spacing-2 * -1;\n\t}\n\n\t.ontario-card__card-type--horizontal & {\n\t\twidth: 33.3%;\n\t}\n\n\t.ontario-card__image-size-one-fourth & {\n\t\twidth: 25%;\n\t}\n}\n\n.ontario-card__image {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\tbackground-size: 100% 100%;\n\n\t.ontario-card--position-vertical & {\n\t\tborder-top-left-radius: globalVariables.$global-radius;\n\t\tborder-top-right-radius: globalVariables.$global-radius;\n\t}\n\n\t.ontario-card__image-right & {\n\t\tborder-top-right-radius: globalVariables.$global-radius;\n\t\tborder-bottom-right-radius: globalVariables.$global-radius;\n\t}\n\n\t.ontario-card__image-left & {\n\t\tborder-top-left-radius: globalVariables.$global-radius;\n\t\tborder-bottom-left-radius: globalVariables.$global-radius;\n\t}\n}\n","import { Component, Prop, Element, h, State, Watch } from '@stencil/core';\nimport {\n\tCardType,\n\tCardTypes,\n\tHeaderType,\n\tHeaderTypes,\n\tHorizontalImagePositionType,\n\tHorizontalImageSizeType,\n} from './ontario-card-types';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-card',\n\tstyleUrl: 'ontario-card.scss',\n\tshadow: true,\n})\nexport class OntarioCard {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * Text to be displayed within the header.\n\t *\n\t * @example\n\t *\t<ontario-card\n\t *\t\theader-type=\"dark\"\n\t *\t\tcard-type=\"horizontal\"\n\t *\t\tlabel=\"Card Title 1\"\n\t *\t\tdescription=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t *\t>\n\t */\n\t@Prop() label: string;\n\n\t/**\n\t * Image to be displayed within the card image container.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() image?: string;\n\n\t/**\n\t * Text to be displayed within the card description container.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() description?: string;\n\n\t/**\n\t * Action link for when the card is clicked.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() cardLink?: string;\n\n\t/**\n\t * The type of card to render.\n\t *\n\t * If no type is passed, it will default to 'basic'.\n\t *\n\t */\n\t@Prop() cardType: CardType = 'basic';\n\n\t/**\n\t * The type of header to render.\n\t *\n\t * If no type is passed, it will default to 'default'.\n\t */\n\t@Prop() headerType: HeaderType = 'default';\n\n\t/**\n\t * The position of the image when the card-type is set to 'horizontal'.\n\t *\n\t * This prop is only necessry when the card-type is set to 'horizontal'.\n\t *\n\t * @example\n\t * \t<ontario-card\n\t *\t\tcard-type=\"horizontal\"\n\t *\t\tlabel=\"Card Title 1\"\n\t *\t\timage=\"https://picsum.photos/200/300\"\n\t *\t\thorizontal-image-position-type=\"left\"\n\t *\t\thorizontal-image-size-type=\"one-fourth\"\n\t *\t description=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t *\t>\n\t *\t</ontario-card>\n\t */\n\t@Prop() horizontalImagePositionType?: HorizontalImagePositionType = 'left';\n\n\t/**\n\t * The size of the image when the card-type is set to 'horizontal'.\n\t *\n\t * This prop is only necessry when the card-type is set to 'horizontal'.\n\t *\n\t * @example\n\t * \t<ontario-card\n\t *\t\tcard-type=\"horizontal\"\n\t *\t\tlabel=\"Card Title 1\"\n\t *\t\timage=\"https://picsum.photos/200/300\"\n\t *\t\thorizontal-image-position-type=\"left\"\n\t *\t\thorizontal-image-size-type=\"one-fourth\"\n\t *\t description=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t *\t>\n\t *\t</ontario-card>\n\t */\n\t@Prop() horizontalImageSizeType?: HorizontalImageSizeType = 'one-third';\n\n\t/**\n\t * Provides more context as to what the card interaction is doing. This should only be used for accessibility purposes, if the card interaction requires more * * description than what the text provides.\n\t *\n\t * This is optional.\n\t *\n\t */\n\t@Prop() ariaLabelText?: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the card's type depending on validation result.\n\t */\n\t@State() private cardTypeState: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the card's header type depending on validation result.\n\t */\n\t@State() private headerTypeState: string;\n\n\t/**\n\t * Watch for changes to the `cardType` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `cardType` will be set to its default (`basic`).\n\t * If a match is found in one of the array values then `cardType` will be set to the matching array key value.\n\t */\n\t@Watch('cardType')\n\tvalidateCardType() {\n\t\tconst isValid = validateValueAgainstArray(this.cardType, CardTypes);\n\t\tif (isValid) {\n\t\t\tthis.cardTypeState = this.cardType;\n\t\t} else {\n\t\t\tthis.cardTypeState = this.warnDefaultCardType();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `headerType` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `headerType` will be set to its default (`default`).\n\t * If a match is found in one of the array values then `headerType` will be set to the matching array key value.\n\t */\n\t@Watch('headerType')\n\tvalidateHeaderType() {\n\t\tconst isValid = validateValueAgainstArray(this.headerType, HeaderTypes);\n\t\tif (isValid) {\n\t\t\tthis.headerTypeState = this.headerType;\n\t\t} else {\n\t\t\tthis.headerTypeState = this.warnDefaultHeaderType();\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid `cardType` prop warning message.\n\t * @returns default type (basic).\n\t */\n\tprivate warnDefaultCardType(): CardType {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' card-type ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-card> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' basic, image, label, horizontal ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' basic ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'basic';\n\t}\n\n\t/**\n\t * Print the invalid `headerType` prop warning message.\n\t * @returns default type (default).\n\t */\n\tprivate warnDefaultHeaderType(): HeaderType {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' header-type ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-card> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' default, light, dark')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' default ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'default';\n\t}\n\n\t/**\n\t * @returns the classes of the ontario cards based off the `cardType` and `headerType`.\n\t */\n\tprivate getClass() {\n\t\tif (this.cardTypeState === 'horizontal') {\n\t\t\treturn `ontario-card ontario-card__card-type--horizontal ontario-card__image-${this.horizontalImagePositionType} ontario-card__image-size-${this.horizontalImageSizeType}`;\n\t\t} else {\n\t\t\t// Return other classes when cardTypeState is not 'horizontal'\n\t\t\treturn `ontario-card ontario-card__header-type--${this.headerTypeState} ontario-card__card-type--${this.cardTypeState}`;\n\t\t}\n\t}\n\n\tprivate getHref() {\n\t\treturn this.cardLink ? this.cardLink : '#';\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateCardType();\n\t\tthis.validateHeaderType();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<li class={this.getClass()}>\n\t\t\t\t{this.image && (\n\t\t\t\t\t<div class=\"ontario-card__image-container\">\n\t\t\t\t\t\t<a href={this.getHref()} aria-label={this.ariaLabelText}>\n\t\t\t\t\t\t\t<img class=\"ontario-card__image\" src={this.image} />\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div class={`ontario-card__text-container ${this.image ? 'ontario-card--image-true' : ''}`}>\n\t\t\t\t\t<h2 class=\"ontario-card__heading\">\n\t\t\t\t\t\t<a href={this.getHref()} aria-label={this.ariaLabelText}>\n\t\t\t\t\t\t\t{this.label}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</h2>\n\t\t\t\t\t{this.description && (\n\t\t\t\t\t\t<div class=\"ontario-card__description\">\n\t\t\t\t\t\t\t<p>{this.description}</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t);\n\t}\n}\n"],"version":3}
|
|
1
|
+
{"file":"ontario-card.js","mappings":"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","names":["OntarioCard"],"sources":["src/components/ontario-card/ontario-card-types.tsx","src/components/ontario-card/ontario-card.scss?tag=ontario-card&encapsulation=shadow","src/components/ontario-card/ontario-card.tsx"],"sourcesContent":["export const Layouts = ['vertical', 'horizontal'] as const;\nexport const HorizontalImagePositionTypes = ['left', 'right'] as const;\nexport const HorizontalImageSizeTypes = ['one-fourth', 'one-third'] as const;\n\nexport type Layout = (typeof Layouts)[number];\nexport type HorizontalImagePositionType = (typeof HorizontalImagePositionTypes)[number];\nexport type HorizontalImageSizeType = (typeof HorizontalImageSizeTypes)[number];\n\nexport const HeaderColours = [\n\t'dark-accent',\n\t'light-accent',\n\t'light-gold',\n\t'light-yellow',\n\t'light-taupe',\n\t'light-green',\n\t'light-lime',\n\t'light-teal',\n\t'light-sky',\n\t'light-blue',\n\t'light-purple',\n\t'light-orange',\n\t'light-red',\n\t'light-magenta',\n\t'gold',\n\t'yellow',\n\t'taupe',\n\t'green',\n\t'lime',\n\t'teal',\n\t'sky',\n\t'blue',\n\t'purple',\n\t'orange',\n\t'red',\n\t'magenta',\n];\n\nexport type HeaderColour = (typeof HeaderColours)[number];\n","@use 'sass:math';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tplaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;\n\n.ontario-card {\n\tbox-shadow: 0rem 0.1875rem 0.5rem 0.0625rem rgba(0, 0, 0, 0.4);\n\tborder-radius: globalVariables.$global-radius;\n\tmargin: spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-7 spacing.$spacing-0;\n\tpadding: spacing.$spacing-0;\n\t/*\n\t * Required for cards to stay the same height regardless of content size.\n\t * Without subtracting the margin-bottom amount the cards will be too large.\n\t */\n\theight: calc(100% - spacing.$spacing-7);\n\tlist-style-type: none;\n\ttransition: all 0.3s ease-in-out;\n\tposition: relative;\n\tcursor: pointer;\n\n\t&:hover {\n\t\tbox-shadow: 0rem 0.375rem 0.75rem 0.125rem rgba(0, 0, 0, 0.35);\n\t}\n\n\t&:focus-within {\n\t\tbox-shadow: placeholders.$ontario-focus-box-shadow;\n\t\toutline: 4px solid transparent;\n\t\ttransition: box-shadow 0.1s ease-in-out;\n\t}\n\n\t&:active {\n\t\tbox-shadow: placeholders.$ontario-focus-box-shadow;\n\t\tbackground-color: colours.$ontario-greyscale-5;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-bottom: spacing.$spacing-8;\n\t\twidth: 100% !important; // to override the specificity of the widths listed for the card-rows\n\t\tmax-width: 100%;\n\t}\n}\n\n.ontario-card--image-true {\n\tmargin-top: spacing.$spacing-2 * -1;\n\t@at-root .ontario-card__card-type--horizontal & {\n\t\tmargin-top: spacing.$spacing-0;\n\t}\n}\n\n.ontario-card__card-type--horizontal {\n\tdisplay: flex;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: 100%;\n\t\tmax-width: 100%;\n\t}\n\n\t.ontario-card__image-container,\n\t.ontario-card__text-container {\n\t\tposition: relative;\n\t}\n\n\t.ontario-card__heading {\n\t\tborder-radius: 0;\n\t}\n\n\ta {\n\t\t&:focus-within {\n\t\t\tbox-shadow: none;\n\t\t\toutline: none;\n\t\t}\n\n\t\t&:active {\n\t\t\tbox-shadow: none;\n\t\t}\n\t}\n\n\timg {\n\t\theight: 100%;\n\t\tposition: absolute;\n\t}\n}\n\n.ontario-card__image-right {\n\tflex-direction: row-reverse;\n}\n\n.ontario-card__heading {\n\t@extend %h4-styles;\n\tmargin: spacing.$spacing-0;\n\tborder-radius: globalVariables.$global-radius globalVariables.$global-radius 0 0;\n\tpadding: (spacing.$spacing-5 - spacing.$spacing-1) spacing.$spacing-5 spacing.$spacing-2 spacing.$spacing-5;\n\ttransition: text-decoration 0.3s ease-in-out;\n\tbackground-color: colours.$ontario-colour-white;\n\tmax-width: none;\n\n\t.ontario-card:hover & {\n\t\ttext-decoration-line: underline;\n\t\ttext-decoration-color: colours.$ontario-colour-black;\n\t}\n\n\t.ontario-card--image-true & {\n\t\tborder-radius: 0;\n\t\t@at-root .ontario-card__card-type--horizontal & {\n\t\t\tborder-radius: 0 globalVariables.$global-radius 0 0;\n\t\t}\n\t}\n\n\ta {\n\t\tcolor: colours.$ontario-colour-black;\n\t\ttext-decoration: none;\n\t\toutline: none;\n\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tleft: 0;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tbottom: 0;\n\t\t}\n\n\t\t&:focus {\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\t&:active {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\tfont-size: fontSizes.$ontario-font-size-large;\n\t\tpadding-left: spacing.$spacing-4;\n\t\tpadding-right: spacing.$spacing-4;\n\t}\n}\n\n// ontario-card's header colour options\n\n$ontario-card-heading-colours: (\n\t'light-accent': colours.$ontario-greyscale-5,\n\t'dark-accent': colours.$ontario-colour-black,\n\t'light-gold': colours.$ontario-colour-light-gold,\n\t'light-yellow': colours.$ontario-colour-light-yellow,\n\t'light-taupe': colours.$ontario-colour-light-taupe,\n\t'light-green': colours.$ontario-colour-light-green,\n\t'light-lime': colours.$ontario-colour-light-lime,\n\t'light-teal': colours.$ontario-colour-light-teal,\n\t'light-sky': colours.$ontario-colour-light-sky,\n\t'light-purple': colours.$ontario-colour-light-purple,\n\t'light-orange': colours.$ontario-colour-light-orange,\n\t'light-red': colours.$ontario-colour-light-red,\n\t'light-magenta': colours.$ontario-colour-light-magenta,\n\t'gold': colours.$ontario-colour-gold,\n\t'yellow': colours.$ontario-colour-yellow,\n\t'taupe': colours.$ontario-colour-taupe,\n\t'green': colours.$ontario-colour-green,\n\t'lime': colours.$ontario-colour-lime,\n\t'teal': colours.$ontario-colour-teal,\n\t'sky': colours.$ontario-colour-sky,\n\t'purple': colours.$ontario-colour-purple,\n\t'orange': colours.$ontario-colour-orange,\n\t'red': colours.$ontario-colour-red,\n\t'magenta': colours.$ontario-colour-magenta,\n);\n\n@each $colour-name, $colour-value in $ontario-card-heading-colours {\n\t.ontario-card__background--#{$colour-name} {\n\t\tbackground-color: $colour-value;\n\t}\n\n\t.ontario-card__heading--#{$colour-name} {\n\t\tbackground-color: $colour-value;\n\t\tpadding-top: spacing.$spacing-4;\n\t\tpadding-bottom: spacing.$spacing-4;\n\t}\n}\n\n.ontario-card__text-container {\n\t.ontario-card__card-type--horizontal & {\n\t\twidth: 66.6%;\n\t}\n\n\t.ontario-card__image-size-one-fourth & {\n\t\twidth: 75%;\n\t}\n\n\t.ontario-card--no-image & {\n\t\twidth: 100%;\n\t}\n}\n\n.ontario-card__description {\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-2 spacing.$spacing-5 spacing.$spacing-5 spacing.$spacing-5;\n\tbackground-color: colours.$ontario-colour-white;\n\tborder-bottom-left-radius: globalVariables.$global-radius;\n\tborder-bottom-right-radius: globalVariables.$global-radius;\n\n\tp {\n\t\tmargin-top: spacing.$spacing-0;\n\t}\n\n\tp:last-of-type {\n\t\tmargin-bottom: spacing.$spacing-0;\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\tpadding: spacing.$spacing-2 spacing.$spacing-4 spacing.$spacing-5 spacing.$spacing-4;\n\t}\n}\n\n.ontario-card__image-container {\n\t.ontario-card--position-vertical & {\n\t\tmargin-bottom: spacing.$spacing-2 * -1;\n\t}\n\n\t.ontario-card__card-type--horizontal & {\n\t\twidth: 33.3%;\n\t}\n\n\t.ontario-card__image-size-one-fourth & {\n\t\twidth: 25%;\n\t}\n}\n\n.ontario-card__image {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\tbackground-size: 100% 100%;\n\n\t.ontario-card--position-vertical & {\n\t\tborder-top-left-radius: globalVariables.$global-radius;\n\t\tborder-top-right-radius: globalVariables.$global-radius;\n\t}\n\n\t.ontario-card__image-right & {\n\t\tborder-top-right-radius: globalVariables.$global-radius;\n\t\tborder-bottom-right-radius: globalVariables.$global-radius;\n\t}\n\n\t.ontario-card__image-left & {\n\t\tborder-top-left-radius: globalVariables.$global-radius;\n\t\tborder-bottom-left-radius: globalVariables.$global-radius;\n\t}\n}\n","import { Component, Prop, Element, h, State, Watch } from '@stencil/core';\nimport {\n\tHeaderColour,\n\tHeaderColours,\n\tHorizontalImagePositionType,\n\tHorizontalImageSizeType,\n\tLayout,\n\tLayouts,\n} from './ontario-card-types';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { printArray } from '../../utils/helper/utils';\n\n@Component({\n\ttag: 'ontario-card',\n\tstyleUrl: 'ontario-card.scss',\n\tshadow: true,\n})\nexport class OntarioCard {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * Text to be displayed within the header.\n\t *\n\t * @example\n\t *\t<ontario-card\n\t *\t\theader-type=\"dark\"\n\t *\t\tcard-type=\"horizontal\"\n\t *\t\tlabel=\"Card Title 1\"\n\t *\t\tdescription=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t *\t>\n\t */\n\t@Prop() label: string;\n\n\t/**\n\t * Image to be displayed within the card image container.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() image?: string;\n\n\t/**\n\t * Text to be displayed within the card description container.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() description?: string;\n\n\t/**\n\t * Action link for when the card is clicked.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() cardLink?: string;\n\n\t/**\n\t * The layout oritnetation of the card.\n\t *\n\t * If no type is passed, it will default to 'vertical'.\n\t *\n\t */\n\t@Prop() layout?: Layout = 'vertical';\n\n\t/**\n\t * Set the card's header colour.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() headerColour?: HeaderColour;\n\n\t/**\n\t * The position of the image when the card-type is set to 'horizontal'.\n\t *\n\t * This prop is only necessry when the card-type is set to 'horizontal'.\n\t *\n\t * @example\n\t * \t<ontario-card\n\t *\t\tcard-type=\"horizontal\"\n\t *\t\tlabel=\"Card Title 1\"\n\t *\t\timage=\"https://picsum.photos/200/300\"\n\t *\t\thorizontal-image-position-type=\"left\"\n\t *\t\thorizontal-image-size-type=\"one-fourth\"\n\t *\t description=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t *\t>\n\t *\t</ontario-card>\n\t */\n\t@Prop() horizontalImagePositionType?: HorizontalImagePositionType = 'left';\n\n\t/**\n\t * The size of the image when the card-type is set to 'horizontal'.\n\t *\n\t * This prop is only necessry when the card-type is set to 'horizontal'.\n\t *\n\t * @example\n\t * \t<ontario-card\n\t *\t\tcard-type=\"horizontal\"\n\t *\t\tlabel=\"Card Title 1\"\n\t *\t\timage=\"https://picsum.photos/200/300\"\n\t *\t\thorizontal-image-position-type=\"left\"\n\t *\t\thorizontal-image-size-type=\"one-fourth\"\n\t *\t description=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t *\t>\n\t *\t</ontario-card>\n\t */\n\t@Prop() horizontalImageSizeType?: HorizontalImageSizeType = 'one-third';\n\n\t/**\n\t * Provides more context as to what the card interaction is doing. This should only be used for accessibility purposes, if the card interaction requires more * * description than what the text provides.\n\t *\n\t * This is optional.\n\t *\n\t */\n\t@Prop() ariaLabelText?: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the card's layout depending on validation result.\n\t */\n\t@State() private layoutState: string;\n\n\t/**\n\t * Watch for changes to the `layout` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `layout` will be set to its default (`vertical`).\n\t * If a match is found in one of the array values then `layoutState` will be set to the matching array key value.\n\t */\n\t@Watch('layout')\n\tvalidateLayout() {\n\t\tif (this.layout) {\n\t\t\tconst isValid = validateValueAgainstArray(this.layout, Layouts);\n\t\t\tif (isValid) {\n\t\t\t\tthis.layoutState = this.layout;\n\t\t\t} else {\n\t\t\t\tthis.warnDefaultLayout();\n\t\t\t\tthis.layoutState = 'vertical';\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `headerColour` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `headerColour` will be kept empty ('').\n\t * If a match is found in one of the array values then `headerColour` will be set to the matching array key value.\n\t */\n\t@Watch('headerColour')\n\tvalidateHeaderColour() {\n\t\tif (this.headerColour) {\n\t\t\tconst isValid = validateValueAgainstArray(this.headerColour, HeaderColours);\n\n\t\t\tif (!isValid) {\n\t\t\t\tthis.warnDefaultHeaderColour();\n\t\t\t\tthis.headerColour = '';\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid `layout` prop warning message.\n\t */\n\tprivate warnDefaultLayout() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' layout ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-card> ')\n\t\t\t.addRegularText('was set to an invalid layout; only ')\n\t\t\t.addMonospaceText(printArray([...Layouts]))\n\t\t\t.addRegularText(' are supported. The default layout')\n\t\t\t.addMonospaceText(' vertical ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t}\n\n\t/**\n\t * Print the invalid `headerColour` prop warning message.\n\t */\n\tprivate warnDefaultHeaderColour() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' header-colour ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-card> ')\n\t\t\t.addRegularText('was set to an invalid colour; only ')\n\t\t\t.addMonospaceText(printArray([...HeaderColours]))\n\t\t\t.addRegularText(' are supported. ')\n\t\t\t.addRegularText('No colour is assumed as the default.')\n\t\t\t.printMessage();\n\t}\n\n\t/**\n\t * Returns the top level classes of the card.\n\t *\n\t * @returns {string}\n\t */\n\tprivate getCardClasses(): string {\n\t\tconst baseClass =\n\t\t\tthis.layoutState === 'horizontal'\n\t\t\t\t? `ontario-card ontario-card__card-type--${this.layoutState} ontario-card__image-${this.horizontalImagePositionType} ontario-card__image-size-${this.horizontalImageSizeType}`\n\t\t\t\t: `ontario-card ontario-card__card-type--basic ontario-card--position-${this.layoutState}`;\n\n\t\tconst descriptionClass = this.description ? '' : ' ontario-card__description-false';\n\n\t\tconst backgroundClass =\n\t\t\tthis.headerColour && !this.description ? `ontario-card__background--${this.headerColour}` : '';\n\n\t\treturn `${baseClass} ${descriptionClass} ${backgroundClass}`.trim();\n\t}\n\n\t/**\n\t * Returns the heading classes of the card.\n\t *\n\t * @returns {string}\n\t */\n\tprivate getCardHeadingClasses(): string {\n\t\tconst baseClass = 'ontario-card__heading';\n\n\t\tconst backgroundClass =\n\t\t\tthis.headerColour && validateValueAgainstArray(this.headerColour, HeaderColours)\n\t\t\t\t? `ontario-card__heading--${this.headerColour}`\n\t\t\t\t: '';\n\n\t\treturn `${baseClass} ${backgroundClass}`.trim();\n\t}\n\n\t/**\n\t * Returns the url that the card links to.\n\t *\n\t * @returns {string}\n\t */\n\tprivate getHref(): string {\n\t\treturn this.cardLink ? this.cardLink : '#';\n\t}\n\n\t/**\n\t * Component life cycle hook.\n\t *\n\t * https://stenciljs.com/docs/component-lifecycle#connectedcallback\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateLayout();\n\t\tthis.validateHeaderColour();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<li class={this.getCardClasses()}>\n\t\t\t\t{this.image && (\n\t\t\t\t\t<div class=\"ontario-card__image-container\">\n\t\t\t\t\t\t<a href={this.getHref()} aria-label={this.ariaLabelText}>\n\t\t\t\t\t\t\t<img class=\"ontario-card__image\" src={this.image} />\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div class={`ontario-card__text-container ${this.image ? 'ontario-card--image-true' : ''}`}>\n\t\t\t\t\t<h2 class={this.getCardHeadingClasses()}>\n\t\t\t\t\t\t<a href={this.getHref()} aria-label={this.ariaLabelText}>\n\t\t\t\t\t\t\t{this.label}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</h2>\n\t\t\t\t\t{this.description && (\n\t\t\t\t\t\t<div class=\"ontario-card__description\">\n\t\t\t\t\t\t\t<p>{this.description}</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t);\n\t}\n}\n"],"version":3}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
2
2
|
import { I as Input } from './input.js';
|
|
3
|
-
import { I as InputCaption, h as handleInputEvent, E as
|
|
3
|
+
import { I as InputCaption, h as handleInputEvent, E as EventType } from './event-handler.js';
|
|
4
4
|
import { v as validateLanguage, c as validateObjectExists, b as validatePropExists } from './validation-functions.js';
|
|
5
5
|
import { C as ConsoleMessageClass } from './console-message.js';
|
|
6
6
|
import { c as constructHintTextObject } from './hints.js';
|
|
7
7
|
import { t as translations } from './global.i18n.js';
|
|
8
|
+
import { E as ErrorMessage } from './error-message.js';
|
|
8
9
|
import { d as defineCustomElement$6 } from './ontario-hint-expander2.js';
|
|
9
10
|
import { d as defineCustomElement$5 } from './ontario-hint-text2.js';
|
|
10
11
|
import { d as defineCustomElement$4 } from './ontario-icon-alert-error2.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ontario-checkboxes.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,oBAAoB,GAAG,m5VAAm5V,CAAC;AACj7V,gCAAe,oBAAoB;;MCiCtBA,mBAAiB;;;;;;;;;;;;;;;;wBA+GA,KAAK;;;;;;;;;;;;;;IAuElC,oBAAoB,CAAC,KAA4B;QAChD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YACnB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;SACxC;KACD;IAGD,2BAA2B,CAAC,KAA4B;QACvD,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;KACxC;;;;;;IAQO,aAAa;QACpB,IAAI,IAAI,CAAC,QAAQ,EAAE;YAClB,MAAM,cAAc,GAAG,uBAAuB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC9D,IAAI,CAAC,gBAAgB,GAAG,cAAc,CAAC;SACvC;KACD;;;;;;IAQO,iBAAiB;QACxB,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;QACvC,IAAI,YAAY,EAAE;YACjB,IAAI,OAAO,YAAY,KAAK,QAAQ;gBAAE,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;;gBACtF,IAAI,CAAC,oBAAoB,GAAG,YAAY,CAAC;SAC9C;KACD;;;;;;IAQD,YAAY;QACX,IAAI,OAAO,IAAI,CAAC,OAAO,KAAK,WAAW,EAAE;YACxC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;gBACjC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;aAChD;iBAAM;gBACN,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;aACpC;SACD;QACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;KAC3C;;;;;;;IAQD,eAAe,CAAC,QAAgB;QAC/B,IAAI,oBAAoB,CAAC,QAAQ,CAAC,EAAE;YACnC,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,WAAW,CAAC;iBAC7B,cAAc,CAAC,KAAK,CAAC;iBACrB,gBAAgB,CAAC,wBAAwB,CAAC;iBAC1C,cAAc,CAAC,kBAAkB,CAAC;iBAClC,YAAY,EAAE,CAAC;SACjB;KACD;;;;;;;IASD,YAAY,CAAC,QAAgB;QAC5B,IAAI,kBAAkB,CAAC,QAAQ,CAAC,EAAE;YACjC,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,QAAQ,CAAC;iBAC1B,cAAc,CAAC,KAAK,CAAC;iBACrB,gBAAgB,CAAC,wBAAwB,CAAC;iBAC1C,cAAc,CAAC,kBAAkB,CAAC;iBAClC,YAAY,EAAE,CAAC;SACjB;KACD;;;;;;;IASD,kBAAkB,CAAC,QAA0B;QAC5C,IAAI,CAAC,YAAY,GAAG,IAAI,YAAY,CACnC,IAAI,CAAC,OAAO,CAAC,OAAO,EACpB,QAAQ,EACR,YAAY,EACZ,IAAI,CAAC,QAAQ,EACb,IAAI,EACJ,IAAI,CAAC,QAAQ,CACb,CAAC;KACF;;;;IAMD,cAAc;QACb,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACtC;IAGD,gCAAgC;;;QAE/B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,YAAY,EAAE,MAAA,IAAI,CAAC,YAAY,mCAAI,EAAE,EAAE,CAAC,CAAC;KACxE;;;;IAKO,WAAW,CAAC,KAAuB,EAAE,SAAoB;;QAChE,MAAM,KAAK,GAAG,KAAK,CAAC,MAAiC,CAAC;QAEtD,IAAI,KAAK,EAAE;YACV,KAAK,CAAC,OAAO,GAAG,MAAA,KAAK,CAAC,OAAO,mCAAI,EAAE,CAAC;SACpC;;QAGD,MAAM,aAAa,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,MAAK,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAA,CAAC,CAAC;QACjF,IAAI,aAAa;YAAE,aAAa,CAAC,OAAO,GAAG,EAAC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,CAAA,CAAC;;QAGnE,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,YAAY,mDAC3B,IAAI,CAAC,eAAe;aAClB,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;aAC1B,MAAM,CAAC,CAAC,QAAQ,EAAE,YAAY;YAC9B,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC;YAC/C,OAAO,QAAQ,CAAC;SAChB,EAAE,IAAI,QAAQ,EAAE,CAAC,CACnB,CAAC;QAEF,gBAAgB,CACf,KAAK,EACL,SAAS,EACT,KAAK,EACL,IAAI,CAAC,gBAAgB,EACrB,IAAI,CAAC,eAAe,EACpB,IAAI,CAAC,cAAc,EACnB,SAAS,EACT,UAAU,EACV,IAAI,CAAC,cAAc,EACnB,IAAI,CAAC,aAAa,EAClB,IAAI,CAAC,YAAY,EACjB,SAAS,EACT,IAAI,CAAC,OAAO,CACZ,CAAC;KACF;;;;IAID,MAAM,gBAAgB;;QACrB,IAAI,CAAC,UAAU,GAAG,OAAM,MAAA,IAAI,CAAC,WAAW,0CAAE,aAAa,EAAE,CAAA,CAAC;KAC1D;IAED,iBAAiB;QAChB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACtC,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAChD;IAED,MAAM;;QACL,MAAM,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC;QAClC,QACC,4DAAK,KAAK,EAAE,sBAAsB,KAAK,GAAG,sBAAsB,GAAG,EAAE,EAAE,IACtE,iEAAU,KAAK,EAAC,kBAAkB,sBAAmB,IAAI,CAAC,UAAU,IAClE,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,oBAAoB,CAAC,EACpE,IAAI,CAAC,gBAAgB,KACrB,yBACC,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAChC,eAAe,EAAE,IAAI,CAAC,gBAAgB,CAAC,eAAe,EACtD,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,GAChB,CACrB,EACD,EAAC,YAAY,qDAAC,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,KAAK,EAAE,KAAK,GAAI,EAC1D,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,MAAA,IAAI,CAAC,eAAe;eAAE,GAAG,CAAC,CAAC,QAAQ,MACnC,WAAK,KAAK,EAAC,0BAA0B,IACpC,EAAC,KAAK,IACL,SAAS,EAAC,2BAA2B,EACrC,EAAE,EAAE,QAAQ,CAAC,SAAS,EACtB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,QAAQ,CAAC,KAAK,EACrB,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,EACzB,OAAO,EAAE,CAAC,CAAC,QAAQ,CAAC,OAAO,EAC3B,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,EACtD,MAAM,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,EAClD,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,GAC5C,EACT,aAAO,KAAK,EAAC,2BAA2B,EAAC,OAAO,EAAE,QAAQ,CAAC,SAAS,IAClE,QAAQ,CAAC,KAAK,EACd,QAAQ,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC,gCAAgC,CAAC,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,CAC3F,EAEP,QAAQ,CAAC,YAAY,KACrB,WAAK,KAAK,EAAC,mCAAmC,IAC7C,6BACC,IAAI,EAAE,QAAQ,CAAC,YAAY,CAAC,IAAI,EAChC,OAAO,EAAE,QAAQ,CAAC,YAAY,CAAC,OAAO,EACtC,eAAe,EAAE,QAAQ,CAAC,YAAY,CAAC,eAAe,yBAE9B,CACpB,CACN,CACI,CACN,CAAC,EAED,IAAI,CAAC,oBAAoB,KACzB,WAAK,KAAK,EAAC,mCAAmC,IAC7C,6BACC,IAAI,EAAE,IAAI,CAAC,oBAAoB,CAAC,IAAI,EACpC,OAAO,EAAE,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAC1C,eAAe,EAAE,IAAI,CAAC,oBAAoB,CAAC,eAAe,yBAElC,CACpB,CACN,CACI,CACI,CACN,EACL;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioCheckboxes"],"sources":["src/components/ontario-checkbox/ontario-checkboxes.scss?tag=ontario-checkboxes&encapsulation=shadow","src/components/ontario-checkbox/ontario-checkboxes.tsx"],"sourcesContent":["@use 'sass:math';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/z-index.variables' as zIndex;\n\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/6-components/_form.component.scss';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/6-components/_text-inputs.component.scss';\n@forward '../../utils/components/error-message/error-message';\n\n$ontario-checkboxes-size: globalFunctions.px-to-rem(28);\n$ontario-checkboxes-size-mobile: globalFunctions.px-to-rem(32);\n$ontario-checkbox-border-size: globalFunctions.px-to-rem(2);\n$ontario-checkbox-box-shadow-outline: globalFunctions.px-to-rem(4);\n$ontario-input-border-width: 0.125rem;\n\n:host {\n\t--checkbox-bg: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 2.667C0 1.194 1.194 0 2.667 0h18.667C22.806 0 24 1.194 24 2.667v18.667C24 22.806 22.806 24 21.333 24H2.667C1.194 24 0 22.806 0 21.333V2.667z' fill='%231a1a1a'/%3E%3Cpath d='M2.667 12.616l6.667 6.718 12-12.092-1.88-1.908L9.333 15.53l-4.787-4.8-1.88 1.894z' fill='%23fff'/%3E%3C/svg%3E\");\n}\n\n.ontario-checkboxes {\n\tmargin-bottom: spacing.$spacing-7;\n\tmax-width: globalVariables.$standard-width;\n}\n\n.ontario-checkboxes__item {\n\tposition: relative;\n\tmargin: 0 0 spacing.$spacing-4;\n\tpadding: 0 0 0 spacing.$spacing-6;\n\tmin-height: $ontario-checkboxes-size;\n\tbox-sizing: content-box;\n\n\t&:last-of-type {\n\t\tmargin: 0;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tpadding: 0 0 0 spacing.$spacing-7;\n\t\tmin-height: $ontario-checkboxes-size-mobile;\n\t}\n}\n\n.ontario-checkboxes__input {\n\tcursor: pointer;\n\tmargin: 0;\n\tposition: absolute;\n\ttop: -$ontario-checkbox-border-size;\n\tleft: -$ontario-checkbox-border-size;\n\topacity: 0;\n\twidth: globalVariables.$touch-target-size;\n\theight: globalVariables.$touch-target-size;\n\tz-index: zIndex.$ontario-z-index-neutral;\n\n\t// prevent blue default highlighting of input on android\n\t-webkit-tap-highlight-color: transparent;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: globalVariables.$touch-target-size-mobile;\n\t\theight: globalVariables.$touch-target-size-mobile;\n\t}\n}\n\n.ontario-checkboxes__label {\n\tdisplay: inline-block;\n\tcursor: pointer;\n\tline-height: globalVariables.$line-height-default;\n\t// Specific spacing required in order to visually align label with input\n\tmargin: spacing.$spacing-1 0;\n\tpadding: 0 spacing.$spacing-4;\n\twidth: auto;\n\twhite-space: normal;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t// Specific spacing required in order to visually align label with input\n\t\tmargin: 0.33rem 0;\n\t}\n\n\t// [ ] Check box styles\n\t&:before {\n\t\tcontent: '';\n\t\tborder: $ontario-checkbox-border-size solid colours.$ontario-colour-black;\n\t\tborder-radius: globalVariables.$global-radius;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: $ontario-checkboxes-size-mobile;\n\t\theight: $ontario-checkboxes-size-mobile;\n\t\ttransition: border 0.1s ease-in-out;\n\t\tdisplay: block;\n\n\t\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\t\twidth: $ontario-checkboxes-size;\n\t\t\theight: $ontario-checkboxes-size;\n\t\t}\n\t}\n\n\t// ✔✔✔ Check mark styles ✔✔✔\n\t&:after {\n\t\tcontent: '';\n\t\tbackground-image: var(--checkbox-bg);\n\t\tbackground-repeat: no-repeat;\n\t\theight: $ontario-checkboxes-size + $ontario-checkbox-border-size;\n\t\twidth: $ontario-checkboxes-size + $ontario-checkbox-border-size;\n\t\tposition: absolute;\n\t\ttop: math.div($ontario-checkbox-border-size, 2);\n\t\tleft: math.div($ontario-checkbox-border-size, 2);\n\t\tright: 0;\n\t\tbottom: 0;\n\t\topacity: 0;\n\t\tdisplay: block;\n\n\t\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t\theight: $ontario-checkboxes-size-mobile + $ontario-checkbox-border-size;\n\t\t\twidth: $ontario-checkboxes-size-mobile + $ontario-checkbox-border-size;\n\t\t}\n\t}\n}\n\n.ontario-checkboxes__input:focus + .ontario-checkboxes__label:before {\n\t-moz-box-shadow: 0 0 0 $ontario-checkbox-box-shadow-outline colours.$ontario-colour-focus;\n\t-webkit-box-shadow: 0 0 0 $ontario-checkbox-box-shadow-outline colours.$ontario-colour-focus;\n\tbox-shadow: 0 0 0 $ontario-checkbox-box-shadow-outline colours.$ontario-colour-focus;\n\toutline: $ontario-checkbox-box-shadow-outline solid transparent;\n\ttransition: all 0.1s ease-in-out;\n}\n\n.ontario-checkboxes__input:checked + .ontario-checkboxes__label:after {\n\topacity: 1;\n}\n\n.ontario-checkboxes__input:checked + .ontario-checkboxes__label:before {\n\tbackground-color: colours.$ontario-colour-black;\n}\n\n.ontario-checkboxes__hint-expander {\n\tmargin: spacing.$spacing-3 0 0 spacing.$spacing-2;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-top: spacing.$spacing-4;\n\t}\n}\n","import { Component, h, Prop, Element, Event, EventEmitter, Listen, State, Watch, AttachInternals } from '@stencil/core';\n\nimport { Input } from '../../utils/common/input/input';\nimport { CheckboxOption } from './checkbox-option.interface';\nimport { Checkboxes } from './checkboxes.interface';\nimport { HintExpander } from '../ontario-hint-expander/hint-expander.interface';\n\nimport { Hint } from '../../utils/common/common.interface';\nimport { InputCaption } from '../../utils/common/input-caption/input-caption';\nimport { Caption } from '../../utils/common/input-caption/caption.interface';\nimport {\n\tvalidateObjectExists,\n\tvalidatePropExists,\n\tvalidateLanguage,\n} from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { Language } from '../../utils/common/language-types';\nimport { constructHintTextObject } from '../../utils/components/hints/hints';\nimport {\n\tInputFocusBlurEvent,\n\tRadioAndCheckboxChangeEvent,\n\tEventType,\n} from '../../utils/events/event-handler.interface';\nimport { handleInputEvent } from '../../utils/events/event-handler';\n\nimport { default as translations } from '../../translations/global.i18n.json';\nimport { ErrorMessage } from '../../utils/components/error-message/error-message';\n\n@Component({\n\ttag: 'ontario-checkboxes',\n\tstyleUrl: 'ontario-checkboxes.scss',\n\tshadow: true,\n\tformAssociated: true,\n})\nexport class OntarioCheckboxes implements Checkboxes {\n\t@Element() element: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\thintTextRef: HTMLOntarioHintTextElement | undefined;\n\n\t/**\n\t * The text to display for the checkbox legend.\n\t *\n\t * @example\n\t * <ontario-checkboxes\n\t * caption='{\n\t * \"captionText\": \"Checkbox legend\",\n\t * \"captionType\": \"heading\",\n\t * }\n\t * ...>\n\t * </ontario-checkboxes>\n\t */\n\t@Prop() caption: Caption | string;\n\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/**\n\t * The name for the checkboxes. The name value is used to reference form data after a form is submitted.\n\t */\n\t@Prop() name: string;\n\n\t/**\n\t * Used to include the ontario-hint-text component for the checkbox group.\n\t * This is optional.\n\t */\n\t@Prop({ mutable: true }) hintText?: string | Hint;\n\n\t/**\n\t * Used to include the ontario-hint-expander component for the checkbox group.\n\t * This is passed in as an object with key-value pairs.\n\t *\n\t * This is optional.\n\t *\n\t * @example\n\t * <ontario-checkboxes\n\t * caption='{\n\t * \"captionText\": \"Checkbox legend\",\n\t * \"captionType\": \"heading\",\n\t * }\n\t * name='ontario-checkboxes'\n\t * options='[\n\t *\t\t{\n\t *\t\t\t\"value\": \"checkbox-option-1\",\n\t *\t\t\t\"label\": \"Checkbox option 1 label\",\n\t *\t\t\t\"elementId\": \"checkbox-1\"\n\t *\t\t}\n\t * }]'\n\t * hint-expander='{\n\t * \"hint\": \"Hint expander for the checkbox group\",\n\t * \"content\": \"Example hint expander content for the checkbox group\"\n\t * }'\n\t * required=\"true\"\n\t * >\n\t * </ontario-checkboxes>\n\t */\n\t@Prop() hintExpander?: HintExpander | string;\n\n\t/**\n\t * The options for the checkbox group.\n\t *\n\t * Each property will be passed in through an object in the options array.\n\t * This can either be passed in as an object directly (if using react), or as a string in HTML.\n\t * If there are multiple checkboxes in a fieldset, each checkbox will be displayed as an option.\n\t *\n\t * In the example below, the options are being passed in as a string and there are two checkboxes to be displayed in the fieldset.\n\t *\n\t * @example\n\t * <ontario-checkboxes\n\t * caption='{\n\t *\t\t\"captionText\": \"Checkbox legend\",\n\t *\t\t\"captionType\": \"heading\",\n\t * }\n\t * name=\"ontario-checkboxes\",\n\t * hint-text=\"Hint text for the checkbox group.\"\n\t * options='[\n\t *\t\t{\n\t *\t\t\t\"value\": \"checkbox-option-1\",\n\t *\t\t\t\"label\": \"Checkbox option 1 label\"\n\t *\t\t\t\"elementId\": \"checkbox-1\"\n\t * },\n\t * {\n\t * \"value\": \"checkbox-option-2\",\n\t * \"label\": \"Checkbox option 2 label\",\n\t * \t\t \"elementId\": \"checkbox-2\",\n\t *\t \"hintExpander\": {\n\t *\t\t\t\t\"hint\": \"Hint expander for checkbox option 2\",\n\t * \"content\": \"Example hint expander content for checkbox option 2\"\n\t * }\n\t * }\n\t * ]'\n\t * required=\"true\"\n\t * >\n\t * </ontario-checkboxes>\n\t */\n\t@Prop() options: CheckboxOption[] | string;\n\n\t/**\n\t * This is used to determine whether the checkbox is required or not.\n\t * This prop also gets passed to the InputCaption utility to display either an optional or required flag in the label.\n\t * If no prop is set, it will default to false (optional).\n\t */\n\t@Prop() required?: boolean = false;\n\n\t/**\n\t * Set this to display an error message\n\t */\n\t@Prop({ mutable: true }) errorMessage?: string;\n\n\t/**\n\t * Used to add a custom function to the checkbox onChange event.\n\t */\n\t@Prop() customOnChange?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used to add a custom function to the checkbox onBlur event.\n\t */\n\t@Prop() customOnBlur?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used to add a custom function to the checkbox onFocus event.\n\t */\n\t@Prop() customOnFocus?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used for the `aria-describedby` value of the checkbox fieldset. This will match with the id of the hint text.\n\t */\n\t@State() hintTextId: string | null | undefined;\n\n\t/**\n\t * Instantiate an InputCaption object for internal logic use\n\t */\n\t@State() private captionState: InputCaption;\n\n\t/**\n\t * The hint text options are re-assigned to the internalHintText array.\n\t */\n\t@State() private internalHintText: Hint;\n\n\t/**\n\t * The hint expander options are re-assigned to the internalHintExpander array.\n\t */\n\t@State() private internalHintExpander: HintExpander;\n\n\t/**\n\t * The options are re-assigned to the internalOptions array.\n\t */\n\t@State() private internalOptions: CheckboxOption[];\n\n\t/**\n\t * Emitted when a keyboard input or mouse event occurs when a checkbox option has been changed.\n\t */\n\t@Event() checkboxOnChange: EventEmitter<RadioAndCheckboxChangeEvent>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when a checkbox option has lost focus.\n\t */\n\t@Event() checkboxOnBlur: EventEmitter<InputFocusBlurEvent>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when a checkbox option has gained focus.\n\t */\n\t@Event() checkboxOnFocus: EventEmitter<InputFocusBlurEvent>;\n\n\t/**\n\t * Emitted when an error message is reported to the component.\n\t */\n\t@Event() inputErrorOccurred: EventEmitter<{ errorMessage: string }>;\n\n\t/**\n\t * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.\n\t */\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t/**\n\t * Watch for changes to the `hintText` prop.\n\t *\n\t * If a `hintText` prop is passed, the `constructHintTextObject` function will convert it to the correct format, and set the result to the `internalHintText` state.\n\t */\n\t@Watch('hintText')\n\tprivate parseHintText() {\n\t\tif (this.hintText) {\n\t\t\tconst hintTextObject = constructHintTextObject(this.hintText);\n\t\t\tthis.internalHintText = hintTextObject;\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `hintExpander` prop.\n\t *\n\t * If a `hintExpander` prop is passed, it will be parsed (if it is a string), and the result will be set to the `internalHintExpander` state.\n\t */\n\t@Watch('hintExpander')\n\tprivate parseHintExpander() {\n\t\tconst hintExpander = this.hintExpander;\n\t\tif (hintExpander) {\n\t\t\tif (typeof hintExpander === 'string') this.internalHintExpander = JSON.parse(hintExpander);\n\t\t\telse this.internalHintExpander = hintExpander;\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `options` prop.\n\t *\n\t * If an `options` prop is passed, it will be parsed (if it is a string), and the result will be set to the `internalOptions` state. The result will be run through a validation function.\n\t */\n\t@Watch('options')\n\tparseOptions() {\n\t\tif (typeof this.options !== 'undefined') {\n\t\t\tif (!Array.isArray(this.options)) {\n\t\t\t\tthis.internalOptions = JSON.parse(this.options);\n\t\t\t} else {\n\t\t\t\tthis.internalOptions = this.options;\n\t\t\t}\n\t\t}\n\t\tthis.validateOptions(this.internalOptions);\n\t}\n\n\t/**\n\t * Validate the `options` and make sure the `options` prop has a value.\n\t * Log a warning if user doesn't input a value for the `options`.\n\t *\n\t * @param newValue object to be validated\n\t */\n\tvalidateOptions(newValue: object) {\n\t\tif (validateObjectExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' options ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-checkboxes> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/*\n\t * Watch for changes in the `name` prop for validation purposes.\n\t *\n\t * Validate the `name` and make sure the `name` prop has a value.\n\t * Log a warning if user doesn't input a value for the `name`.\n\t */\n\t@Watch('name')\n\tvalidateName(newValue: string) {\n\t\tif (validatePropExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' name ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-checkboxes> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `caption` prop.\n\t *\n\t * The caption will be run through the InputCaption constructor to convert it to the correct format, and set the result to the `captionState` state.\n\t * @param newValue: Caption | string\n\t */\n\t@Watch('caption')\n\tupdateCaptionState(newValue: Caption | string) {\n\t\tthis.captionState = new InputCaption(\n\t\t\tthis.element.tagName,\n\t\t\tnewValue,\n\t\t\ttranslations,\n\t\t\tthis.language,\n\t\t\ttrue,\n\t\t\tthis.required,\n\t\t);\n\t}\n\n\t/**\n\t * Watch for changes to the `language` prop to render either the English or French translations\n\t */\n\t@Watch('language')\n\tupdateLanguage() {\n\t\tthis.updateCaptionState(this.caption);\n\t}\n\n\t@Watch('errorMessage')\n\tbroadcastInputErrorOccurredEvent() {\n\t\t// Emit event to notify anyone who wants to listen for errors occurring\n\t\tthis.inputErrorOccurred.emit({ errorMessage: this.errorMessage ?? '' });\n\t}\n\n\t/**\n\t * Function to handle checkbox events and the information pertaining to the checkbox to emit.\n\t */\n\tprivate handleEvent(event: globalThis.Event, eventType: EventType) {\n\t\tconst input = event.target as HTMLInputElement | null;\n\n\t\tif (input) {\n\t\t\tinput.checked = input.checked ?? '';\n\t\t}\n\n\t\t// Update internalOptions checked state\n\t\tconst changedOption = this.internalOptions.find((x) => x.value === input?.value);\n\t\tif (changedOption) changedOption.checked = !changedOption?.checked;\n\n\t\t// Set the value within the form\n\t\tthis.internals?.setFormValue?.(\n\t\t\tthis.internalOptions\n\t\t\t\t.filter((x) => !!x.checked)\n\t\t\t\t.reduce((formData, currentValue) => {\n\t\t\t\t\tformData.append(this.name, currentValue.value);\n\t\t\t\t\treturn formData;\n\t\t\t\t}, new FormData()),\n\t\t);\n\n\t\thandleInputEvent(\n\t\t\tevent,\n\t\t\teventType,\n\t\t\tinput,\n\t\t\tthis.checkboxOnChange,\n\t\t\tthis.checkboxOnFocus,\n\t\t\tthis.checkboxOnBlur,\n\t\t\tundefined,\n\t\t\t'checkbox',\n\t\t\tthis.customOnChange,\n\t\t\tthis.customOnFocus,\n\t\t\tthis.customOnBlur,\n\t\t\tundefined,\n\t\t\tthis.element,\n\t\t);\n\t}\n\t/**\n\t * If a `hintText` prop is passed, the id generated from it will be set to the internal `hintTextId` state to match with the fieldset `aria-describedBy` attribute.\n\t */\n\tasync componentDidLoad() {\n\t\tthis.hintTextId = await this.hintTextRef?.getHintTextId();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.updateCaptionState(this.caption);\n\t\tthis.parseOptions();\n\t\tthis.parseHintExpander();\n\t\tthis.parseHintText();\n\t\tthis.validateName(this.name);\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\tconst error = !!this.errorMessage;\n\t\treturn (\n\t\t\t<div class={`ontario-form-group ${error ? 'ontario-input--error' : ''}`}>\n\t\t\t\t<fieldset class=\"ontario-fieldset\" aria-describedby={this.hintTextId}>\n\t\t\t\t\t{this.captionState.getCaption(undefined, !!this.internalHintExpander)}\n\t\t\t\t\t{this.internalHintText && (\n\t\t\t\t\t\t<ontario-hint-text\n\t\t\t\t\t\t\thint={this.internalHintText.hint}\n\t\t\t\t\t\t\thintContentType={this.internalHintText.hintContentType}\n\t\t\t\t\t\t\tref={(el) => (this.hintTextRef = el)}\n\t\t\t\t\t\t></ontario-hint-text>\n\t\t\t\t\t)}\n\t\t\t\t\t<ErrorMessage message={this.errorMessage} error={error} />\n\t\t\t\t\t<div class=\"ontario-checkboxes\">\n\t\t\t\t\t\t{this.internalOptions?.map((checkbox) => (\n\t\t\t\t\t\t\t<div class=\"ontario-checkboxes__item\">\n\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\tclassName=\"ontario-checkboxes__input\"\n\t\t\t\t\t\t\t\t\tid={checkbox.elementId}\n\t\t\t\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t\tvalue={checkbox.value}\n\t\t\t\t\t\t\t\t\trequired={!!this.required}\n\t\t\t\t\t\t\t\t\tchecked={!!checkbox.checked}\n\t\t\t\t\t\t\t\t\tonChange={(e) => this.handleEvent(e, EventType.Change)}\n\t\t\t\t\t\t\t\t\tonBlur={(e) => this.handleEvent(e, EventType.Blur)}\n\t\t\t\t\t\t\t\t\tonFocus={(e) => this.handleEvent(e, EventType.Focus)}\n\t\t\t\t\t\t\t\t></Input>\n\t\t\t\t\t\t\t\t<label class=\"ontario-checkboxes__label\" htmlFor={checkbox.elementId}>\n\t\t\t\t\t\t\t\t\t{checkbox.label}\n\t\t\t\t\t\t\t\t\t{checkbox.hintExpander && this.captionState.getHintExpanderAccessibilityText(checkbox.label, true)}\n\t\t\t\t\t\t\t\t</label>\n\n\t\t\t\t\t\t\t\t{checkbox.hintExpander && (\n\t\t\t\t\t\t\t\t\t<div class=\"ontario-checkboxes__hint-expander\">\n\t\t\t\t\t\t\t\t\t\t<ontario-hint-expander\n\t\t\t\t\t\t\t\t\t\t\thint={checkbox.hintExpander.hint}\n\t\t\t\t\t\t\t\t\t\t\tcontent={checkbox.hintExpander.content}\n\t\t\t\t\t\t\t\t\t\t\thintContentType={checkbox.hintExpander.hintContentType}\n\t\t\t\t\t\t\t\t\t\t\tinput-exists\n\t\t\t\t\t\t\t\t\t\t></ontario-hint-expander>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\n\t\t\t\t\t\t{this.internalHintExpander && (\n\t\t\t\t\t\t\t<div class=\"ontario-checkboxes__hint-expander\">\n\t\t\t\t\t\t\t\t<ontario-hint-expander\n\t\t\t\t\t\t\t\t\thint={this.internalHintExpander.hint}\n\t\t\t\t\t\t\t\t\tcontent={this.internalHintExpander.content}\n\t\t\t\t\t\t\t\t\thintContentType={this.internalHintExpander.hintContentType}\n\t\t\t\t\t\t\t\t\tinput-exists\n\t\t\t\t\t\t\t\t></ontario-hint-expander>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</fieldset>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}
|
|
1
|
+
{"file":"ontario-checkboxes.js","mappings":"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","names":["OntarioCheckboxes"],"sources":["src/components/ontario-checkbox/ontario-checkboxes.scss?tag=ontario-checkboxes&encapsulation=shadow","src/components/ontario-checkbox/ontario-checkboxes.tsx"],"sourcesContent":["@use 'sass:math';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/z-index.variables' as zIndex;\n\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/6-components/_form.component.scss';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/6-components/_text-inputs.component.scss';\n@forward '../../utils/components/error-message/error-message';\n\n$ontario-checkboxes-size: globalFunctions.px-to-rem(28);\n$ontario-checkboxes-size-mobile: globalFunctions.px-to-rem(32);\n$ontario-checkbox-border-size: globalFunctions.px-to-rem(2);\n$ontario-checkbox-box-shadow-outline: globalFunctions.px-to-rem(4);\n\n:host {\n\t--checkbox-bg: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 2.667C0 1.194 1.194 0 2.667 0h18.667C22.806 0 24 1.194 24 2.667v18.667C24 22.806 22.806 24 21.333 24H2.667C1.194 24 0 22.806 0 21.333V2.667z' fill='%231a1a1a'/%3E%3Cpath d='M2.667 12.616l6.667 6.718 12-12.092-1.88-1.908L9.333 15.53l-4.787-4.8-1.88 1.894z' fill='%23fff'/%3E%3C/svg%3E\");\n}\n\n.ontario-checkboxes {\n\tmargin-bottom: spacing.$spacing-7;\n\tmax-width: globalVariables.$standard-width;\n}\n\n.ontario-checkboxes__item {\n\tposition: relative;\n\tmargin: 0 0 spacing.$spacing-4;\n\tpadding: 0 0 0 spacing.$spacing-6;\n\tmin-height: $ontario-checkboxes-size;\n\tbox-sizing: content-box;\n\n\t&:last-of-type {\n\t\tmargin: 0;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tpadding: 0 0 0 spacing.$spacing-7;\n\t\tmin-height: $ontario-checkboxes-size-mobile;\n\t}\n}\n\n.ontario-checkboxes__input {\n\tcursor: pointer;\n\tmargin: 0;\n\tposition: absolute;\n\ttop: -$ontario-checkbox-border-size;\n\tleft: -$ontario-checkbox-border-size;\n\topacity: 0;\n\twidth: globalVariables.$touch-target-size;\n\theight: globalVariables.$touch-target-size;\n\tz-index: zIndex.$ontario-z-index-neutral;\n\n\t// prevent blue default highlighting of input on android\n\t-webkit-tap-highlight-color: transparent;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: globalVariables.$touch-target-size-mobile;\n\t\theight: globalVariables.$touch-target-size-mobile;\n\t}\n}\n\n.ontario-checkboxes__label {\n\tdisplay: inline-block;\n\tcursor: pointer;\n\tline-height: globalVariables.$line-height-default;\n\t// Specific spacing required in order to visually align label with input\n\tmargin: spacing.$spacing-1 0;\n\tpadding: 0 spacing.$spacing-4;\n\twidth: auto;\n\twhite-space: normal;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t// Specific spacing required in order to visually align label with input\n\t\tmargin: 0.33rem 0;\n\t}\n\n\t// [ ] Check box styles\n\t&:before {\n\t\tcontent: '';\n\t\tborder: $ontario-checkbox-border-size solid colours.$ontario-colour-black;\n\t\tborder-radius: globalVariables.$global-radius;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: $ontario-checkboxes-size-mobile;\n\t\theight: $ontario-checkboxes-size-mobile;\n\t\ttransition: border 0.1s ease-in-out;\n\t\tdisplay: block;\n\n\t\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\t\twidth: $ontario-checkboxes-size;\n\t\t\theight: $ontario-checkboxes-size;\n\t\t}\n\t}\n\n\t// ✔✔✔ Check mark styles ✔✔✔\n\t&:after {\n\t\tcontent: '';\n\t\tbackground-image: var(--checkbox-bg);\n\t\tbackground-repeat: no-repeat;\n\t\theight: $ontario-checkboxes-size + $ontario-checkbox-border-size;\n\t\twidth: $ontario-checkboxes-size + $ontario-checkbox-border-size;\n\t\tposition: absolute;\n\t\ttop: math.div($ontario-checkbox-border-size, 2);\n\t\tleft: math.div($ontario-checkbox-border-size, 2);\n\t\tright: 0;\n\t\tbottom: 0;\n\t\topacity: 0;\n\t\tdisplay: block;\n\n\t\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t\theight: $ontario-checkboxes-size-mobile + $ontario-checkbox-border-size;\n\t\t\twidth: $ontario-checkboxes-size-mobile + $ontario-checkbox-border-size;\n\t\t}\n\t}\n}\n\n.ontario-checkboxes__input:focus + .ontario-checkboxes__label:before {\n\t-moz-box-shadow: 0 0 0 $ontario-checkbox-box-shadow-outline colours.$ontario-colour-focus;\n\t-webkit-box-shadow: 0 0 0 $ontario-checkbox-box-shadow-outline colours.$ontario-colour-focus;\n\tbox-shadow: 0 0 0 $ontario-checkbox-box-shadow-outline colours.$ontario-colour-focus;\n\toutline: $ontario-checkbox-box-shadow-outline solid transparent;\n\ttransition: all 0.1s ease-in-out;\n}\n\n.ontario-checkboxes__input:checked + .ontario-checkboxes__label:after {\n\topacity: 1;\n}\n\n.ontario-checkboxes__input:checked + .ontario-checkboxes__label:before {\n\tbackground-color: colours.$ontario-colour-black;\n}\n\n.ontario-checkboxes__hint-expander {\n\tmargin: spacing.$spacing-3 0 0 spacing.$spacing-2;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-top: spacing.$spacing-4;\n\t}\n}\n","import { Component, h, Prop, Element, Event, EventEmitter, Listen, State, Watch, AttachInternals } from '@stencil/core';\n\nimport { Input } from '../../utils/common/input/input';\nimport { CheckboxOption } from './checkbox-option.interface';\nimport { Checkboxes } from './checkboxes.interface';\nimport { HintExpander } from '../ontario-hint-expander/hint-expander.interface';\n\nimport { Hint } from '../../utils/common/common.interface';\nimport { InputCaption } from '../../utils/common/input-caption/input-caption';\nimport { Caption } from '../../utils/common/input-caption/caption.interface';\nimport {\n\tvalidateObjectExists,\n\tvalidatePropExists,\n\tvalidateLanguage,\n} from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { Language } from '../../utils/common/language-types';\nimport { constructHintTextObject } from '../../utils/components/hints/hints';\nimport {\n\tInputFocusBlurEvent,\n\tRadioAndCheckboxChangeEvent,\n\tEventType,\n} from '../../utils/events/event-handler.interface';\nimport { handleInputEvent } from '../../utils/events/event-handler';\n\nimport { default as translations } from '../../translations/global.i18n.json';\nimport { ErrorMessage } from '../../utils/components/error-message/error-message';\n\n@Component({\n\ttag: 'ontario-checkboxes',\n\tstyleUrl: 'ontario-checkboxes.scss',\n\tshadow: true,\n\tformAssociated: true,\n})\nexport class OntarioCheckboxes implements Checkboxes {\n\t@Element() element: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\thintTextRef: HTMLOntarioHintTextElement | undefined;\n\n\t/**\n\t * The text to display for the checkbox legend.\n\t *\n\t * @example\n\t * <ontario-checkboxes\n\t * caption='{\n\t * \"captionText\": \"Checkbox legend\",\n\t * \"captionType\": \"heading\",\n\t * }\n\t * ...>\n\t * </ontario-checkboxes>\n\t */\n\t@Prop() caption: Caption | string;\n\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/**\n\t * The name for the checkboxes. The name value is used to reference form data after a form is submitted.\n\t */\n\t@Prop() name: string;\n\n\t/**\n\t * Used to include the ontario-hint-text component for the checkbox group.\n\t * This is optional.\n\t */\n\t@Prop({ mutable: true }) hintText?: string | Hint;\n\n\t/**\n\t * Used to include the ontario-hint-expander component for the checkbox group.\n\t * This is passed in as an object with key-value pairs.\n\t *\n\t * This is optional.\n\t *\n\t * @example\n\t * <ontario-checkboxes\n\t * caption='{\n\t * \"captionText\": \"Checkbox legend\",\n\t * \"captionType\": \"heading\",\n\t * }\n\t * name='ontario-checkboxes'\n\t * options='[\n\t *\t\t{\n\t *\t\t\t\"value\": \"checkbox-option-1\",\n\t *\t\t\t\"label\": \"Checkbox option 1 label\",\n\t *\t\t\t\"elementId\": \"checkbox-1\"\n\t *\t\t}\n\t * }]'\n\t * hint-expander='{\n\t * \"hint\": \"Hint expander for the checkbox group\",\n\t * \"content\": \"Example hint expander content for the checkbox group\"\n\t * }'\n\t * required=\"true\"\n\t * >\n\t * </ontario-checkboxes>\n\t */\n\t@Prop() hintExpander?: HintExpander | string;\n\n\t/**\n\t * The options for the checkbox group.\n\t *\n\t * Each property will be passed in through an object in the options array.\n\t * This can either be passed in as an object directly (if using react), or as a string in HTML.\n\t * If there are multiple checkboxes in a fieldset, each checkbox will be displayed as an option.\n\t *\n\t * In the example below, the options are being passed in as a string and there are two checkboxes to be displayed in the fieldset.\n\t *\n\t * @example\n\t * <ontario-checkboxes\n\t * caption='{\n\t *\t\t\"captionText\": \"Checkbox legend\",\n\t *\t\t\"captionType\": \"heading\",\n\t * }\n\t * name=\"ontario-checkboxes\",\n\t * hint-text=\"Hint text for the checkbox group.\"\n\t * options='[\n\t *\t\t{\n\t *\t\t\t\"value\": \"checkbox-option-1\",\n\t *\t\t\t\"label\": \"Checkbox option 1 label\"\n\t *\t\t\t\"elementId\": \"checkbox-1\"\n\t * },\n\t * {\n\t * \"value\": \"checkbox-option-2\",\n\t * \"label\": \"Checkbox option 2 label\",\n\t * \t\t \"elementId\": \"checkbox-2\",\n\t *\t \"hintExpander\": {\n\t *\t\t\t\t\"hint\": \"Hint expander for checkbox option 2\",\n\t * \"content\": \"Example hint expander content for checkbox option 2\"\n\t * }\n\t * }\n\t * ]'\n\t * required=\"true\"\n\t * >\n\t * </ontario-checkboxes>\n\t */\n\t@Prop() options: CheckboxOption[] | string;\n\n\t/**\n\t * This is used to determine whether the checkbox is required or not.\n\t * This prop also gets passed to the InputCaption utility to display either an optional or required flag in the label.\n\t * If no prop is set, it will default to false (optional).\n\t */\n\t@Prop() required?: boolean = false;\n\n\t/**\n\t * Set this to display an error message\n\t */\n\t@Prop({ mutable: true }) errorMessage?: string;\n\n\t/**\n\t * Used to add a custom function to the checkbox onChange event.\n\t */\n\t@Prop() customOnChange?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used to add a custom function to the checkbox onBlur event.\n\t */\n\t@Prop() customOnBlur?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used to add a custom function to the checkbox onFocus event.\n\t */\n\t@Prop() customOnFocus?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used for the `aria-describedby` value of the checkbox fieldset. This will match with the id of the hint text.\n\t */\n\t@State() hintTextId: string | null | undefined;\n\n\t/**\n\t * Instantiate an InputCaption object for internal logic use\n\t */\n\t@State() private captionState: InputCaption;\n\n\t/**\n\t * The hint text options are re-assigned to the internalHintText array.\n\t */\n\t@State() private internalHintText: Hint;\n\n\t/**\n\t * The hint expander options are re-assigned to the internalHintExpander array.\n\t */\n\t@State() private internalHintExpander: HintExpander;\n\n\t/**\n\t * The options are re-assigned to the internalOptions array.\n\t */\n\t@State() private internalOptions: CheckboxOption[];\n\n\t/**\n\t * Emitted when a keyboard input or mouse event occurs when a checkbox option has been changed.\n\t */\n\t@Event() checkboxOnChange: EventEmitter<RadioAndCheckboxChangeEvent>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when a checkbox option has lost focus.\n\t */\n\t@Event() checkboxOnBlur: EventEmitter<InputFocusBlurEvent>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when a checkbox option has gained focus.\n\t */\n\t@Event() checkboxOnFocus: EventEmitter<InputFocusBlurEvent>;\n\n\t/**\n\t * Emitted when an error message is reported to the component.\n\t */\n\t@Event() inputErrorOccurred: EventEmitter<{ errorMessage: string }>;\n\n\t/**\n\t * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.\n\t */\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t/**\n\t * Watch for changes to the `hintText` prop.\n\t *\n\t * If a `hintText` prop is passed, the `constructHintTextObject` function will convert it to the correct format, and set the result to the `internalHintText` state.\n\t */\n\t@Watch('hintText')\n\tprivate parseHintText() {\n\t\tif (this.hintText) {\n\t\t\tconst hintTextObject = constructHintTextObject(this.hintText);\n\t\t\tthis.internalHintText = hintTextObject;\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `hintExpander` prop.\n\t *\n\t * If a `hintExpander` prop is passed, it will be parsed (if it is a string), and the result will be set to the `internalHintExpander` state.\n\t */\n\t@Watch('hintExpander')\n\tprivate parseHintExpander() {\n\t\tconst hintExpander = this.hintExpander;\n\t\tif (hintExpander) {\n\t\t\tif (typeof hintExpander === 'string') this.internalHintExpander = JSON.parse(hintExpander);\n\t\t\telse this.internalHintExpander = hintExpander;\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `options` prop.\n\t *\n\t * If an `options` prop is passed, it will be parsed (if it is a string), and the result will be set to the `internalOptions` state. The result will be run through a validation function.\n\t */\n\t@Watch('options')\n\tparseOptions() {\n\t\tif (typeof this.options !== 'undefined') {\n\t\t\tif (!Array.isArray(this.options)) {\n\t\t\t\tthis.internalOptions = JSON.parse(this.options);\n\t\t\t} else {\n\t\t\t\tthis.internalOptions = this.options;\n\t\t\t}\n\t\t}\n\t\tthis.validateOptions(this.internalOptions);\n\t}\n\n\t/**\n\t * Validate the `options` and make sure the `options` prop has a value.\n\t * Log a warning if user doesn't input a value for the `options`.\n\t *\n\t * @param newValue object to be validated\n\t */\n\tvalidateOptions(newValue: object) {\n\t\tif (validateObjectExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' options ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-checkboxes> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/*\n\t * Watch for changes in the `name` prop for validation purposes.\n\t *\n\t * Validate the `name` and make sure the `name` prop has a value.\n\t * Log a warning if user doesn't input a value for the `name`.\n\t */\n\t@Watch('name')\n\tvalidateName(newValue: string) {\n\t\tif (validatePropExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' name ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-checkboxes> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `caption` prop.\n\t *\n\t * The caption will be run through the InputCaption constructor to convert it to the correct format, and set the result to the `captionState` state.\n\t * @param newValue: Caption | string\n\t */\n\t@Watch('caption')\n\tupdateCaptionState(newValue: Caption | string) {\n\t\tthis.captionState = new InputCaption(\n\t\t\tthis.element.tagName,\n\t\t\tnewValue,\n\t\t\ttranslations,\n\t\t\tthis.language,\n\t\t\ttrue,\n\t\t\tthis.required,\n\t\t);\n\t}\n\n\t/**\n\t * Watch for changes to the `language` prop to render either the English or French translations\n\t */\n\t@Watch('language')\n\tupdateLanguage() {\n\t\tthis.updateCaptionState(this.caption);\n\t}\n\n\t@Watch('errorMessage')\n\tbroadcastInputErrorOccurredEvent() {\n\t\t// Emit event to notify anyone who wants to listen for errors occurring\n\t\tthis.inputErrorOccurred.emit({ errorMessage: this.errorMessage ?? '' });\n\t}\n\n\t/**\n\t * Function to handle checkbox events and the information pertaining to the checkbox to emit.\n\t */\n\tprivate handleEvent(event: globalThis.Event, eventType: EventType) {\n\t\tconst input = event.target as HTMLInputElement | null;\n\n\t\tif (input) {\n\t\t\tinput.checked = input.checked ?? '';\n\t\t}\n\n\t\t// Update internalOptions checked state\n\t\tconst changedOption = this.internalOptions.find((x) => x.value === input?.value);\n\t\tif (changedOption) changedOption.checked = !changedOption?.checked;\n\n\t\t// Set the value within the form\n\t\tthis.internals?.setFormValue?.(\n\t\t\tthis.internalOptions\n\t\t\t\t.filter((x) => !!x.checked)\n\t\t\t\t.reduce((formData, currentValue) => {\n\t\t\t\t\tformData.append(this.name, currentValue.value);\n\t\t\t\t\treturn formData;\n\t\t\t\t}, new FormData()),\n\t\t);\n\n\t\thandleInputEvent(\n\t\t\tevent,\n\t\t\teventType,\n\t\t\tinput,\n\t\t\tthis.checkboxOnChange,\n\t\t\tthis.checkboxOnFocus,\n\t\t\tthis.checkboxOnBlur,\n\t\t\tundefined,\n\t\t\t'checkbox',\n\t\t\tthis.customOnChange,\n\t\t\tthis.customOnFocus,\n\t\t\tthis.customOnBlur,\n\t\t\tundefined,\n\t\t\tthis.element,\n\t\t);\n\t}\n\t/**\n\t * If a `hintText` prop is passed, the id generated from it will be set to the internal `hintTextId` state to match with the fieldset `aria-describedBy` attribute.\n\t */\n\tasync componentDidLoad() {\n\t\tthis.hintTextId = await this.hintTextRef?.getHintTextId();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.updateCaptionState(this.caption);\n\t\tthis.parseOptions();\n\t\tthis.parseHintExpander();\n\t\tthis.parseHintText();\n\t\tthis.validateName(this.name);\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\tconst error = !!this.errorMessage;\n\t\treturn (\n\t\t\t<div class={`ontario-form-group ${error ? 'ontario-input--error' : ''}`}>\n\t\t\t\t<fieldset class=\"ontario-fieldset\" aria-describedby={this.hintTextId}>\n\t\t\t\t\t{this.captionState.getCaption(undefined, !!this.internalHintExpander)}\n\t\t\t\t\t{this.internalHintText && (\n\t\t\t\t\t\t<ontario-hint-text\n\t\t\t\t\t\t\thint={this.internalHintText.hint}\n\t\t\t\t\t\t\thintContentType={this.internalHintText.hintContentType}\n\t\t\t\t\t\t\tref={(el) => (this.hintTextRef = el)}\n\t\t\t\t\t\t></ontario-hint-text>\n\t\t\t\t\t)}\n\t\t\t\t\t<ErrorMessage message={this.errorMessage} error={error} />\n\t\t\t\t\t<div class=\"ontario-checkboxes\">\n\t\t\t\t\t\t{this.internalOptions?.map((checkbox) => (\n\t\t\t\t\t\t\t<div class=\"ontario-checkboxes__item\">\n\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\tclassName=\"ontario-checkboxes__input\"\n\t\t\t\t\t\t\t\t\tid={checkbox.elementId}\n\t\t\t\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t\tvalue={checkbox.value}\n\t\t\t\t\t\t\t\t\trequired={!!this.required}\n\t\t\t\t\t\t\t\t\tchecked={!!checkbox.checked}\n\t\t\t\t\t\t\t\t\tonChange={(e) => this.handleEvent(e, EventType.Change)}\n\t\t\t\t\t\t\t\t\tonBlur={(e) => this.handleEvent(e, EventType.Blur)}\n\t\t\t\t\t\t\t\t\tonFocus={(e) => this.handleEvent(e, EventType.Focus)}\n\t\t\t\t\t\t\t\t></Input>\n\t\t\t\t\t\t\t\t<label class=\"ontario-checkboxes__label\" htmlFor={checkbox.elementId}>\n\t\t\t\t\t\t\t\t\t{checkbox.label}\n\t\t\t\t\t\t\t\t\t{checkbox.hintExpander && this.captionState.getHintExpanderAccessibilityText(checkbox.label, true)}\n\t\t\t\t\t\t\t\t</label>\n\n\t\t\t\t\t\t\t\t{checkbox.hintExpander && (\n\t\t\t\t\t\t\t\t\t<div class=\"ontario-checkboxes__hint-expander\">\n\t\t\t\t\t\t\t\t\t\t<ontario-hint-expander\n\t\t\t\t\t\t\t\t\t\t\thint={checkbox.hintExpander.hint}\n\t\t\t\t\t\t\t\t\t\t\tcontent={checkbox.hintExpander.content}\n\t\t\t\t\t\t\t\t\t\t\thintContentType={checkbox.hintExpander.hintContentType}\n\t\t\t\t\t\t\t\t\t\t\tinput-exists\n\t\t\t\t\t\t\t\t\t\t></ontario-hint-expander>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\n\t\t\t\t\t\t{this.internalHintExpander && (\n\t\t\t\t\t\t\t<div class=\"ontario-checkboxes__hint-expander\">\n\t\t\t\t\t\t\t\t<ontario-hint-expander\n\t\t\t\t\t\t\t\t\thint={this.internalHintExpander.hint}\n\t\t\t\t\t\t\t\t\tcontent={this.internalHintExpander.content}\n\t\t\t\t\t\t\t\t\thintContentType={this.internalHintExpander.hintContentType}\n\t\t\t\t\t\t\t\t\tinput-exists\n\t\t\t\t\t\t\t\t></ontario-hint-expander>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</fieldset>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}
|
|
@@ -3,8 +3,9 @@ import { v as validateLanguage } from './validation-functions.js';
|
|
|
3
3
|
import { t as translations } from './global.i18n.js';
|
|
4
4
|
import { I as Input$1 } from './input.js';
|
|
5
5
|
import { i as isEmpty, a as isNumber } from './utils.js';
|
|
6
|
-
import {
|
|
6
|
+
import { E as ErrorMessage } from './error-message.js';
|
|
7
7
|
import { a as ConsoleType, C as ConsoleMessageClass } from './console-message.js';
|
|
8
|
+
import { e as emitEvent, I as InputCaption } from './event-handler.js';
|
|
8
9
|
import { d as defineCustomElement$2 } from './ontario-icon-alert-error2.js';
|
|
9
10
|
import { v as v4 } from './v4.js';
|
|
10
11
|
|