@ongov/ontario-design-system-component-library 5.0.0-alpha.5 → 5.0.0-alpha.6

package/dist/collection/components/ontario-card/ontario-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"ontario-card.js","sourceRoot":"","sources":["../../../src/components/ontario-card/ontario-card.tsx"],"names":[],"mappings":"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","sourcesContent":["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,"file":"ontario-card.js","sourceRoot":"","sources":["../../../src/components/ontario-card/ontario-card.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/ontario-card-collection/ontario-card-collection.js

@@ -1,10 +1,19 @@
 import { h } from '@stencil/core';
 import { ConsoleMessageClass } from '../../utils/console-message/console-message';
 export class OntarioCardCollection {
-	constructor() {
-		this.cardsPerRow = 3;
-		this.cardsPerRowState = undefined;
-	}
+	host;
+	/**
+	 * The number of cards to display per row.
+	 *
+	 * If no number is passed, it will default to 3.
+	 */
+	cardsPerRow = 3;
+	/**
+	 * Mutable variable, for internal use only.
+	 *
+	 * Set number of cards per row depending on validation result.
+	 */
+	cardsPerRowState;
 	/**
 	 * Watch for changes to the `cardsPerRow` property for validation purposes.
 	 *
@@ -19,9 +28,7 @@ export class OntarioCardCollection {
 				.addRegularText('on')
 				.addMonospaceText(' <ontario-card> ')
 				.addRegularText(
-					`${
-						isNaN(this.cardsPerRow) ? 'was set to a non-numeric value' : 'was set to a negative number'
-					}; only a positive number is allowed. The default number of cards per row: `,
+					`${isNaN(this.cardsPerRow) ? 'was set to a non-numeric value' : 'was set to a negative number'}; only a positive number is allowed. The default number of cards per row: `,
 				)
 				.addMonospaceText(' 3 ')
 				.addRegularText('was assumed.')
@@ -46,8 +53,8 @@ export class OntarioCardCollection {
 	render() {
 		return h(
 			'ul',
-			{ key: '71bc8894e0cd5dd35ed2878eda867563dfa46e5d', class: this.getClass() },
-			h('slot', { key: '2759d92d65a4f427ed5375b1acba7b2da6ebaffa' }),
+			{ key: '9ff47cd840a551719ce0db9cbb89b6e3186bfe31', class: this.getClass() },
+			h('slot', { key: '4396152d6d66e79a77206bd2aa2a8e2115614afd' }),
 		);
 	}
 	static get is() {
@@ -88,6 +95,8 @@ export class OntarioCardCollection {
 					tags: [],
 					text: 'The number of cards to display per row.\n\nIf no number is passed, it will default to 3.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'cards-per-row',
 				reflect: false,
 				defaultValue: '3',

package/dist/collection/components/ontario-card-collection/ontario-card-collection.js.map

@@ -1 +1 @@
-{"version":3,"file":"ontario-card-collection.js","sourceRoot":"","sources":["../../../src/components/ontario-card-collection/ontario-card-collection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE1E,OAAO,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AAOlF,MAAM,OAAO,qBAAqB;;2BAQE,CAAC;;;IASpC;;;;OAIG;IAEH,mBAAmB;QAClB,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,EAAE,CAAC;YACpF,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,iBAAiB,CAAC;iBACnC,cAAc,CAAC,IAAI,CAAC;iBACpB,gBAAgB,CAAC,kBAAkB,CAAC;iBACpC,cAAc,CACd,GACC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,8BAC9D,4EAA4E,CAC5E;iBACA,gBAAgB,CAAC,KAAK,CAAC;iBACvB,cAAc,CAAC,cAAc,CAAC;iBAC9B,YAAY,EAAE,CAAC;YACjB,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;QAC3B,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC;QAC1C,CAAC;IACF,CAAC;IAED;;OAEG;IACK,QAAQ;QACf,OAAO;;8CAEqC,IAAI,CAAC,gBAAgB;KAC9D,CAAC,IAAI,EAAE,CAAC;IACZ,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC5B,CAAC;IAED,MAAM;QACL,OAAO,CACN,2DAAI,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE;YACzB,8DAAa,CACT,CACL,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Prop, Element, h, Watch, State } from '@stencil/core';\nimport { CardsPerRow } from './ontario-collection-card-types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-card-collection',\n\tstyleUrl: 'ontario-card-collection.scss',\n\tshadow: true,\n})\nexport class OntarioCardCollection {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * The number of cards to display per row.\n\t *\n\t * If no number is passed, it will default to 3.\n\t */\n\t@Prop() cardsPerRow: CardsPerRow = 3;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t *\n\t * Set number of cards per row depending on validation result.\n\t */\n\t@State() private cardsPerRowState: number;\n\n\t/**\n\t * Watch for changes to the `cardsPerRow` property for validation purposes.\n\t *\n\t * If the user input is not a number or is a negative number then `cardsPerRow` will be set to its default (3).\n\t */\n\t@Watch('cardsPerRow')\n\tvalidateCardsPerRow() {\n\t\tif (isNaN(this.cardsPerRow) || (!isNaN(this.cardsPerRow) && this.cardsPerRow <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' cards-per-row ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-card> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.cardsPerRow) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default number of cards per row: `,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 3 ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.cardsPerRowState = 3;\n\t\t} else {\n\t\t\tthis.cardsPerRowState = this.cardsPerRow;\n\t\t}\n\t}\n\n\t/**\n\t * @returns the classes of the ontario cards based off the `cardType` and number of cards per row.\n\t */\n\tprivate getClass(): string {\n\t\treturn `\n      ontario-card-collection__container\n      ontario-card-collecton--cards-per-row-${this.cardsPerRowState}\n    `.trim();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateCardsPerRow();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<ul class={this.getClass()}>\n\t\t\t\t<slot></slot>\n\t\t\t</ul>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"ontario-card-collection.js","sourceRoot":"","sources":["../../../src/components/ontario-card-collection/ontario-card-collection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE1E,OAAO,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AAOlF,MAAM,OAAO,qBAAqB;IACtB,IAAI,CAAc;IAE7B;;;;OAIG;IACK,WAAW,GAAgB,CAAC,CAAC;IAErC;;;;OAIG;IACc,gBAAgB,CAAS;IAE1C;;;;OAIG;IAEH,mBAAmB;QAClB,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,EAAE,CAAC;YACpF,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,iBAAiB,CAAC;iBACnC,cAAc,CAAC,IAAI,CAAC;iBACpB,gBAAgB,CAAC,kBAAkB,CAAC;iBACpC,cAAc,CACd,GACC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,8BAC9D,4EAA4E,CAC5E;iBACA,gBAAgB,CAAC,KAAK,CAAC;iBACvB,cAAc,CAAC,cAAc,CAAC;iBAC9B,YAAY,EAAE,CAAC;YACjB,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;QAC3B,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC;QAC1C,CAAC;IACF,CAAC;IAED;;OAEG;IACK,QAAQ;QACf,OAAO;;8CAEqC,IAAI,CAAC,gBAAgB;KAC9D,CAAC,IAAI,EAAE,CAAC;IACZ,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC5B,CAAC;IAED,MAAM;QACL,OAAO,CACN,2DAAI,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE;YACzB,8DAAa,CACT,CACL,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Prop, Element, h, Watch, State } from '@stencil/core';\nimport { CardsPerRow } from './ontario-collection-card-types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-card-collection',\n\tstyleUrl: 'ontario-card-collection.scss',\n\tshadow: true,\n})\nexport class OntarioCardCollection {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * The number of cards to display per row.\n\t *\n\t * If no number is passed, it will default to 3.\n\t */\n\t@Prop() cardsPerRow: CardsPerRow = 3;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t *\n\t * Set number of cards per row depending on validation result.\n\t */\n\t@State() private cardsPerRowState: number;\n\n\t/**\n\t * Watch for changes to the `cardsPerRow` property for validation purposes.\n\t *\n\t * If the user input is not a number or is a negative number then `cardsPerRow` will be set to its default (3).\n\t */\n\t@Watch('cardsPerRow')\n\tvalidateCardsPerRow() {\n\t\tif (isNaN(this.cardsPerRow) || (!isNaN(this.cardsPerRow) && this.cardsPerRow <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' cards-per-row ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-card> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.cardsPerRow) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default number of cards per row: `,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 3 ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.cardsPerRowState = 3;\n\t\t} else {\n\t\t\tthis.cardsPerRowState = this.cardsPerRow;\n\t\t}\n\t}\n\n\t/**\n\t * @returns the classes of the ontario cards based off the `cardType` and number of cards per row.\n\t */\n\tprivate getClass(): string {\n\t\treturn `\n      ontario-card-collection__container\n      ontario-card-collecton--cards-per-row-${this.cardsPerRowState}\n    `.trim();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateCardsPerRow();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<ul class={this.getClass()}>\n\t\t\t\t<slot></slot>\n\t\t\t</ul>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/ontario-checkbox/ontario-checkboxes.css

@@ -35,6 +35,9 @@
 /* -------------------------------
     Global font-size variables
 --------------------------------- */
+/* -------------------------------
+    Global font variables
+--------------------------------- */
 /* -------------------------------
     Global letter-spacing variables
 --------------------------------- */

package/dist/collection/components/ontario-checkbox/ontario-checkboxes.js

@@ -13,24 +13,161 @@ import { handleInputEvent } from '../../utils/events/event-handler';
 import { default as translations } from '../../translations/global.i18n.json';
 import { ErrorMessage } from '../../utils/components/error-message/error-message';
 export class OntarioCheckboxes {
-	constructor() {
-		this.caption = undefined;
-		this.language = undefined;
-		this.name = undefined;
-		this.hintText = undefined;
-		this.hintExpander = undefined;
-		this.options = undefined;
-		this.required = false;
-		this.errorMessage = undefined;
-		this.customOnChange = undefined;
-		this.customOnBlur = undefined;
-		this.customOnFocus = undefined;
-		this.hintTextId = undefined;
-		this.captionState = undefined;
-		this.internalHintText = undefined;
-		this.internalHintExpander = undefined;
-		this.internalOptions = undefined;
-	}
+	element;
+	internals;
+	hintTextRef;
+	/**
+	 * The text to display for the checkbox legend.
+	 *
+	 * @example
+	 * <ontario-checkboxes
+	 *   caption='{
+	 *     "captionText": "Checkbox legend",
+	 *     "captionType": "heading",
+	 *   }
+	 *   ...>
+	 * </ontario-checkboxes>
+	 */
+	caption;
+	/**
+	 * The language of the component.
+	 * 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.
+	 */
+	language;
+	/**
+	 * The name for the checkboxes. The name value is used to reference form data after a form is submitted.
+	 */
+	name;
+	/**
+	 * Used to include the ontario-hint-text component for the checkbox group.
+	 * This is optional.
+	 */
+	hintText;
+	/**
+	 * Used to include the ontario-hint-expander component for the checkbox group.
+	 * This is passed in as an object with key-value pairs.
+	 *
+	 * This is optional.
+	 *
+	 * @example
+	 * <ontario-checkboxes
+	 *   caption='{
+	 *     "captionText": "Checkbox legend",
+	 *     "captionType": "heading",
+	 *   }
+	 *   name='ontario-checkboxes'
+	 *   options='[
+	 *		{
+	 *			"value": "checkbox-option-1",
+	 *			"label": "Checkbox option 1 label",
+	 *			"elementId": "checkbox-1"
+	 *		}
+	 *   }]'
+	 *   hint-expander='{
+	 *    "hint": "Hint expander for the checkbox group",
+	 *    "content": "Example hint expander content for the checkbox group"
+	 *   }'
+	 *   required="true"
+	 * >
+	 * </ontario-checkboxes>
+	 */
+	hintExpander;
+	/**
+	 * The options for the checkbox group.
+	 *
+	 * Each property will be passed in through an object in the options array.
+	 * This can either be passed in as an object directly (if using react), or as a string in HTML.
+	 * If there are multiple checkboxes in a fieldset, each checkbox will be displayed as an option.
+	 *
+	 * In the example below, the options are being passed in as a string and there are two checkboxes to be displayed in the fieldset.
+	 *
+	 * @example
+	 * <ontario-checkboxes
+	 *   caption='{
+	 *		"captionText": "Checkbox legend",
+	 *		"captionType": "heading",
+	 *   }
+	 *   name="ontario-checkboxes",
+	 *   hint-text="Hint text for the checkbox group."
+	 *   options='[
+	 *		{
+	 *			"value": "checkbox-option-1",
+	 *			"label": "Checkbox option 1 label"
+	 *			"elementId": "checkbox-1"
+	 *     },
+	 *     {
+	 *        "value": "checkbox-option-2",
+	 *        "label": "Checkbox option 2 label",
+	 * 		  "elementId": "checkbox-2",
+	 *	      "hintExpander": {
+	 *				"hint": "Hint expander for checkbox option 2",
+	 *              "content": "Example hint expander content for checkbox option 2"
+	 *        }
+	 *      }
+	 *   ]'
+	 *   required="true"
+	 * >
+	 * </ontario-checkboxes>
+	 */
+	options;
+	/**
+	 * This is used to determine whether the checkbox is required or not.
+	 * This prop also gets passed to the InputCaption utility to display either an optional or required flag in the label.
+	 * If no prop is set, it will default to false (optional).
+	 */
+	required = false;
+	/**
+	 * Set this to display an error message
+	 */
+	errorMessage;
+	/**
+	 * Used to add a custom function to the checkbox onChange event.
+	 */
+	customOnChange;
+	/**
+	 * Used to add a custom function to the checkbox onBlur event.
+	 */
+	customOnBlur;
+	/**
+	 * Used to add a custom function to the checkbox onFocus event.
+	 */
+	customOnFocus;
+	/**
+	 * Used for the `aria-describedby` value of the checkbox fieldset. This will match with the id of the hint text.
+	 */
+	hintTextId;
+	/**
+	 * Instantiate an InputCaption object for internal logic use
+	 */
+	captionState;
+	/**
+	 * The hint text options are re-assigned to the internalHintText array.
+	 */
+	internalHintText;
+	/**
+	 * The hint expander options are re-assigned to the internalHintExpander array.
+	 */
+	internalHintExpander;
+	/**
+	 * The options are re-assigned to the internalOptions array.
+	 */
+	internalOptions;
+	/**
+	 * Emitted when a keyboard input or mouse event occurs when a checkbox option has been changed.
+	 */
+	checkboxOnChange;
+	/**
+	 * Emitted when a keyboard input event occurs when a checkbox option has lost focus.
+	 */
+	checkboxOnBlur;
+	/**
+	 * Emitted when a keyboard input event occurs when a checkbox option has gained focus.
+	 */
+	checkboxOnFocus;
+	/**
+	 * Emitted when an error message is reported to the component.
+	 */
+	inputErrorOccurred;
 	/**
 	 * 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.
 	 */
@@ -139,37 +276,29 @@ export class OntarioCheckboxes {
 		this.updateCaptionState(this.caption);
 	}
 	broadcastInputErrorOccurredEvent() {
-		var _a;
 		// Emit event to notify anyone who wants to listen for errors occurring
-		this.inputErrorOccurred.emit({ errorMessage: (_a = this.errorMessage) !== null && _a !== void 0 ? _a : '' });
+		this.inputErrorOccurred.emit({ errorMessage: this.errorMessage ?? '' });
 	}
 	/**
 	 * Function to handle checkbox events and the information pertaining to the checkbox to emit.
 	 */
 	handleEvent(event, eventType) {
-		var _a, _b, _c;
 		const input = event.target;
 		if (input) {
-			input.checked = (_a = input.checked) !== null && _a !== void 0 ? _a : '';
+			input.checked = input.checked ?? '';
 		}
 		// Update internalOptions checked state
-		const changedOption = this.internalOptions.find(
-			(x) => x.value === (input === null || input === void 0 ? void 0 : input.value),
-		);
-		if (changedOption)
-			changedOption.checked = !(changedOption === null || changedOption === void 0 ? void 0 : changedOption.checked);
+		const changedOption = this.internalOptions.find((x) => x.value === input?.value);
+		if (changedOption) changedOption.checked = !changedOption?.checked;
 		// Set the value within the form
-		(_c = (_b = this.internals) === null || _b === void 0 ? void 0 : _b.setFormValue) === null || _c === void 0
-			? void 0
-			: _c.call(
-					_b,
-					this.internalOptions
-						.filter((x) => !!x.checked)
-						.reduce((formData, currentValue) => {
-							formData.append(this.name, currentValue.value);
-							return formData;
-						}, new FormData()),
-			  );
+		this.internals?.setFormValue?.(
+			this.internalOptions
+				.filter((x) => !!x.checked)
+				.reduce((formData, currentValue) => {
+					formData.append(this.name, currentValue.value);
+					return formData;
+				}, new FormData()),
+		);
 		handleInputEvent(
 			event,
 			eventType,
@@ -190,8 +319,7 @@ export class OntarioCheckboxes {
 	 * 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.
 	 */
 	async componentDidLoad() {
-		var _a;
-		this.hintTextId = await ((_a = this.hintTextRef) === null || _a === void 0 ? void 0 : _a.getHintTextId());
+		this.hintTextId = await this.hintTextRef?.getHintTextId();
 	}
 	componentWillLoad() {
 		this.updateCaptionState(this.caption);
@@ -202,74 +330,73 @@ export class OntarioCheckboxes {
 		this.language = validateLanguage(this.language);
 	}
 	render() {
-		var _a;
 		const error = !!this.errorMessage;
 		return h(
 			'div',
 			{
-				key: '173d86874aa1ea64e9a73d000a0ed4fecbe57665',
+				key: '40b8689882fc1993311280af272536b2620a30ee',
 				class: `ontario-form-group ${error ? 'ontario-input--error' : ''}`,
 			},
 			h(
 				'fieldset',
 				{
-					'key': '532f87dc2c043df58bad6f40ce98853031a79986',
+					'key': 'cc26e4cbd27e10925bf047f7b1317dba76f2ce20',
 					'class': 'ontario-fieldset',
 					'aria-describedby': this.hintTextId,
 				},
 				this.captionState.getCaption(undefined, !!this.internalHintExpander),
 				this.internalHintText &&
 					h('ontario-hint-text', {
+						key: '9165f44c344f7b68c0fc5b89713f80c58e63ff4e',
 						hint: this.internalHintText.hint,
 						hintContentType: this.internalHintText.hintContentType,
 						ref: (el) => (this.hintTextRef = el),
 					}),
-				h(ErrorMessage, { key: '459366e25c9fe52c41708d9dfc62f800b5642689', message: this.errorMessage, error: error }),
+				h(ErrorMessage, { key: '72db50057e838ca5c5165d844253d76fced6363b', message: this.errorMessage, error: error }),
 				h(
 					'div',
-					{ key: '0fe1efdeff27222064e1979cdc1daf0ae55b5547', class: 'ontario-checkboxes' },
-					(_a = this.internalOptions) === null || _a === void 0
-						? void 0
-						: _a.map((checkbox) =>
+					{ key: '0fc81de1a57f26d53508e0a4ad6d8e0818cd2a67', class: 'ontario-checkboxes' },
+					this.internalOptions?.map((checkbox) =>
+						h(
+							'div',
+							{ class: 'ontario-checkboxes__item' },
+							h(Input, {
+								className: 'ontario-checkboxes__input',
+								id: checkbox.elementId,
+								name: this.name,
+								type: 'checkbox',
+								value: checkbox.value,
+								required: !!this.required,
+								checked: !!checkbox.checked,
+								onChange: (e) => this.handleEvent(e, EventType.Change),
+								onBlur: (e) => this.handleEvent(e, EventType.Blur),
+								onFocus: (e) => this.handleEvent(e, EventType.Focus),
+							}),
+							h(
+								'label',
+								{ class: 'ontario-checkboxes__label', htmlFor: checkbox.elementId },
+								checkbox.label,
+								checkbox.hintExpander && this.captionState.getHintExpanderAccessibilityText(checkbox.label, true),
+							),
+							checkbox.hintExpander &&
 								h(
 									'div',
-									{ class: 'ontario-checkboxes__item' },
-									h(Input, {
-										className: 'ontario-checkboxes__input',
-										id: checkbox.elementId,
-										name: this.name,
-										type: 'checkbox',
-										value: checkbox.value,
-										required: !!this.required,
-										checked: !!checkbox.checked,
-										onChange: (e) => this.handleEvent(e, EventType.Change),
-										onBlur: (e) => this.handleEvent(e, EventType.Blur),
-										onFocus: (e) => this.handleEvent(e, EventType.Focus),
+									{ class: 'ontario-checkboxes__hint-expander' },
+									h('ontario-hint-expander', {
+										'hint': checkbox.hintExpander.hint,
+										'content': checkbox.hintExpander.content,
+										'hintContentType': checkbox.hintExpander.hintContentType,
+										'input-exists': true,
 									}),
-									h(
-										'label',
-										{ class: 'ontario-checkboxes__label', htmlFor: checkbox.elementId },
-										checkbox.label,
-										checkbox.hintExpander && this.captionState.getHintExpanderAccessibilityText(checkbox.label, true),
-									),
-									checkbox.hintExpander &&
-										h(
-											'div',
-											{ class: 'ontario-checkboxes__hint-expander' },
-											h('ontario-hint-expander', {
-												'hint': checkbox.hintExpander.hint,
-												'content': checkbox.hintExpander.content,
-												'hintContentType': checkbox.hintExpander.hintContentType,
-												'input-exists': true,
-											}),
-										),
 								),
-						  ),
+						),
+					),
 					this.internalHintExpander &&
 						h(
 							'div',
-							{ class: 'ontario-checkboxes__hint-expander' },
+							{ key: '30d16ee358c25a5bab14cda2c9ba2dc6e014b443', class: 'ontario-checkboxes__hint-expander' },
 							h('ontario-hint-expander', {
+								'key': '6f0f73ab0f2bf7504ea461dfa1be3f9547ac13cf',
 								'hint': this.internalHintExpander.hint,
 								'content': this.internalHintExpander.content,
 								'hintContentType': this.internalHintExpander.hintContentType,
@@ -326,6 +453,8 @@ export class OntarioCheckboxes {
 					],
 					text: 'The text to display for the checkbox legend.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'caption',
 				reflect: false,
 			},
@@ -349,6 +478,8 @@ export class OntarioCheckboxes {
 					tags: [],
 					text: 'The language of the component.\nThis 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.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'language',
 				reflect: false,
 			},
@@ -366,6 +497,8 @@ export class OntarioCheckboxes {
 					tags: [],
 					text: 'The name for the checkboxes. The name value is used to reference form data after a form is submitted.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'name',
 				reflect: false,
 			},
@@ -389,6 +522,8 @@ export class OntarioCheckboxes {
 					tags: [],
 					text: 'Used to include the ontario-hint-text component for the checkbox group.\nThis is optional.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'hint-text',
 				reflect: false,
 			},
@@ -417,6 +552,8 @@ export class OntarioCheckboxes {
 					],
 					text: 'Used to include the ontario-hint-expander component for the checkbox group.\nThis is passed in as an object with key-value pairs.\n\nThis is optional.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'hint-expander',
 				reflect: false,
 			},
@@ -445,6 +582,8 @@ export class OntarioCheckboxes {
 					],
 					text: 'The options for the checkbox group.\n\nEach property will be passed in through an object in the options array.\nThis can either be passed in as an object directly (if using react), or as a string in HTML.\nIf there are multiple checkboxes in a fieldset, each checkbox will be displayed as an option.\n\nIn the example below, the options are being passed in as a string and there are two checkboxes to be displayed in the fieldset.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'options',
 				reflect: false,
 			},
@@ -462,6 +601,8 @@ export class OntarioCheckboxes {
 					tags: [],
 					text: 'This is used to determine whether the checkbox is required or not.\nThis prop also gets passed to the InputCaption utility to display either an optional or required flag in the label.\nIf no prop is set, it will default to false (optional).',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'required',
 				reflect: false,
 				defaultValue: 'false',
@@ -480,6 +621,8 @@ export class OntarioCheckboxes {
 					tags: [],
 					text: 'Set this to display an error message',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'error-message',
 				reflect: false,
 			},
@@ -502,6 +645,8 @@ export class OntarioCheckboxes {
 					tags: [],
 					text: 'Used to add a custom function to the checkbox onChange event.',
 				},
+				getter: false,
+				setter: false,
 			},
 			customOnBlur: {
 				type: 'unknown',
@@ -522,6 +667,8 @@ export class OntarioCheckboxes {
 					tags: [],
 					text: 'Used to add a custom function to the checkbox onBlur event.',
 				},
+				getter: false,
+				setter: false,
 			},
 			customOnFocus: {
 				type: 'unknown',
@@ -542,6 +689,8 @@ export class OntarioCheckboxes {
 					tags: [],
 					text: 'Used to add a custom function to the checkbox onFocus event.',
 				},
+				getter: false,
+				setter: false,
 			},
 		};
 	}