@ongov/ontario-design-system-component-library 6.0.0-alpha.5 → 6.0.0-alpha.8

package/components/ontario-card.js

@@ -0,0 +1,389 @@
+import { p as proxyCustomElement, H, h } from './index.js';
+import { C as ConsoleMessageClass } from './p-Cdm-Ot0O.js';
+import { p as printArray } from './p-DIe1tcOp.js';
+import { v as validateValueAgainstArray } from './p-CNqFEifG.js';
+
+const layoutDirectionDefinitions = ['vertical', 'horizontal'];
+const headerColourDefinitions = [
+	'dark-accent',
+	'light-accent',
+	'light-gold',
+	'light-yellow',
+	'light-taupe',
+	'light-green',
+	'light-lime',
+	'light-teal',
+	'light-sky',
+	'light-blue',
+	'light-purple',
+	'light-orange',
+	'light-red',
+	'light-magenta',
+	'gold',
+	'yellow',
+	'taupe',
+	'green',
+	'lime',
+	'teal',
+	'sky',
+	'blue',
+	'purple',
+	'orange',
+	'red',
+	'magenta',
+];
+
+const headingLevelDefinitions = ['h2', 'h3', 'h4', 'h5', 'h6'];
+
+const ontarioCardCss =
+	'.ontario-card__heading{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway Modified", "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-bottom:2.5rem;padding:0;height:calc(100% - 2.5rem);list-style-type:none;transition:all 0.3s ease-in-out;position:relative;cursor:pointer;background:#FFFFFF}.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:rgb(242.25, 242.25, 242.25)}@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:rgb(25.5, 25.5, 25.5)}.ontario-card--image-true .ontario-card__heading{border-radius:0}.ontario-card__image-right .ontario-card--image-true .ontario-card__heading{border-radius:4px 0 0 0}.ontario-card__image-left .ontario-card--image-true .ontario-card__heading{border-radius:0 4px 0 0}.ontario-card__heading a{color:rgb(25.5, 25.5, 25.5);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:rgb(242.25, 242.25, 242.25)}.ontario-card__heading--light-accent{background-color:rgb(242.25, 242.25, 242.25);padding-top:1rem;padding-bottom:1rem}.ontario-card__background--dark-accent{background-color:rgb(25.5, 25.5, 25.5)}.ontario-card__heading--dark-accent{background-color:rgb(25.5, 25.5, 25.5);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.6666666667%}.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}';
+
+const OntarioCard$1 = /*@__PURE__*/ proxyCustomElement(
+	class OntarioCard extends H {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			/**
+			 * The heading level that the label will be rendered as.
+			 *
+			 * @example
+			 *	<ontario-card
+			 *		heading-level="h4"
+			 *		label="Card Title 1"
+			 *	>
+			 */
+			this.headingLevel = 'h2';
+			/**
+			 * Alt text for the card's image.
+			 *
+			 * This is optional prop, but may be required for an
+			 * image due to accessibility requirements.
+			 *
+			 * You can find guidance on when to add alt text to an image
+			 * on the Ontario.ca web content editing guide.
+			 *
+			 * https://www.ontario.ca/page/ontario-ca-web-content-editing-guide#alt-text-image-accessibility
+			 *
+			 * Note: This should default to an empty string ('') to ensure the alt attribute appears in the markup
+			 * for decorative images. If left as undefined, the alt attribute will not render in markup.
+			 */
+			this.imageAltText = '';
+			/**
+			 * The layout direction/orientation of the card.
+			 *
+			 * If no type is passed, it will default to 'vertical'.
+			 *
+			 */
+			this.layoutDirection = 'vertical';
+			/**
+			 * The position of the image when the card-type is set to 'horizontal'.
+			 *
+			 * This prop is only necessry when the card-type is set to 'horizontal'.
+			 *
+			 * @example
+			 * 	<ontario-card
+			 *		card-type="horizontal"
+			 *		label="Card Title 1"
+			 *		image="https://picsum.photos/200/300"
+			 *		horizontal-image-position-type="left"
+			 *		horizontal-image-size-type="one-fourth"
+			 *	  description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+			 *	>
+			 *	</ontario-card>
+			 */
+			this.horizontalImagePositionType = 'left';
+			/**
+			 * The size of the image when the card-type is set to 'horizontal'.
+			 *
+			 * This prop is only necessry when the card-type is set to 'horizontal'.
+			 *
+			 * @example
+			 * 	<ontario-card
+			 *		card-type="horizontal"
+			 *		label="Card Title 1"
+			 *		image="https://picsum.photos/200/300"
+			 *		horizontal-image-position-type="left"
+			 *		horizontal-image-size-type="one-fourth"
+			 *	  description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+			 *	>
+			 *	</ontario-card>
+			 */
+			this.horizontalImageSizeType = 'one-third';
+			this.cardState = {
+				headerColour: undefined,
+				headingLevel: undefined,
+				layoutDirection: undefined,
+			};
+		}
+		/**
+		 * Watch for changes to the `layoutDirection` property for validation purposes.
+		 *
+		 * If the user input doesn't match one of the array values then `layoutDirection` will be set to its default (`vertical`).
+		 * If a match is found in one of the array values then `cardState.layoutDirection` will be set to the matching array key value.
+		 */
+		validateLayoutDirection() {
+			const isValid =
+				this.layoutDirection && validateValueAgainstArray(this.layoutDirection, layoutDirectionDefinitions);
+			if (!isValid) {
+				this.printPropWarning(
+					'layout-direction',
+					'<ontario-card>',
+					this.layoutDirection,
+					layoutDirectionDefinitions,
+					'vertical',
+				);
+				this.updateCardState('layoutDirection', 'vertical');
+				return;
+			}
+			this.updateCardState('layoutDirection', this.layoutDirection);
+		}
+		/**
+		 * Watch for changes to the `headingLevel` property for validation purposes.
+		 *
+		 * If the user input doesn't match one of the array values then `headingLevel` will be set to its default (`h2`).
+		 *
+		 * If a match is found in one of the array values then `headingLevel` will be set to the matching array key value.
+		 */
+		validateHeadingLevel() {
+			const isValid = this.headingLevel && validateValueAgainstArray(this.headingLevel, headingLevelDefinitions);
+			if (!isValid) {
+				this.printPropWarning('heading-level', '<ontario-card>', this.headingLevel, headingLevelDefinitions, 'h2');
+				this.updateCardState('headingLevel', 'h2');
+				return;
+			}
+			this.updateCardState('headingLevel', this.headingLevel);
+		}
+		/**
+		 * Watch for changes to the `headerColour` property for validation purposes.
+		 *
+		 * If the user input doesn't match one of the array values then `headerColour` will be kept empty (undefined).
+		 * If a match is found in one of the array values then `headerColour` will be set to the matching array key value.
+		 */
+		validateHeaderColour() {
+			const isValid = this.headerColour && validateValueAgainstArray(this.headerColour, headerColourDefinitions);
+			if (!isValid && this.headerColour !== undefined) {
+				this.printPropWarning(
+					'header-colour',
+					'<ontario-card>',
+					this.headerColour,
+					headerColourDefinitions,
+					'undefined',
+				);
+				this.updateCardState('headerColour', undefined);
+				return;
+			}
+			this.updateCardState('headerColour', this.headerColour);
+		}
+		/**
+		 * Watch for the presence of the `label` prop.
+		 *
+		 * If no `label` is provided, a warning message will be printed.
+		 * This is important for accessibility and ensures content is properly rendered
+		 * during SSR and visible to all users.
+		 */
+		validateLabel() {
+			if (!this.label || this.label.trim() === '') {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addMonospaceText(' label ')
+					.addRegularText('for')
+					.addMonospaceText(' <ontario-card> ')
+					.addRegularText('was not provided. This may result in inaccessible or empty content.')
+					.printMessage();
+			}
+		}
+		/**
+		 * Print an invalid prop warning message.
+		 *
+		 * @param {string} propName - Name of the prop
+		 * @param {string} component - Component the error is on e.g. <ontario-card>
+		 * @param {any} propValue - Value of the prop
+		 * @param {readonly any[]} acceptableValues  - readonly array of acceptable prop values
+		 * @param {string} defaultValue - Stringified representation of the value that the corresponding State Object value will default to
+		 */
+		printPropWarning(propName, component, propValue, acceptableValues, defaultValue) {
+			const message = new ConsoleMessageClass();
+			message
+				.addDesignSystemTag()
+				.addMonospaceText(` ${propName} `)
+				.addRegularText('on')
+				.addMonospaceText(` ${component} `)
+				.addRegularText('was set to an invalid value of ')
+				.addMonospaceText(` ${propValue} `)
+				.addRegularText('. Only ')
+				.addMonospaceText(printArray([...acceptableValues]))
+				.addRegularText(' are supported values. The default value of')
+				.addMonospaceText(` ${defaultValue} `)
+				.addRegularText('is assumed.')
+				.printMessage();
+		}
+		/**
+		 * Update a key within the State Object with a value.
+		 *
+		 * Note: When state is represented as an object, and values are changed, the entire object needs to be rebuilt.
+		 * If only the corresponding object key/value is updated, corresponding render changes may not happen.
+		 *
+		 * @param {keyof CardState} key - Should match a key found within `CardState`.
+		 * @param {any} value - Should match the value type associated to the key within `CardState`.
+		 */
+		updateCardState(key, value) {
+			const cardStateCopy = Object.assign({}, this.cardState);
+			cardStateCopy[key] = value;
+			this.cardState = cardStateCopy;
+		}
+		/**
+		 * Returns the top level classes of the card.
+		 *
+		 * @returns {string}
+		 */
+		getCardClasses() {
+			const baseClass =
+				this.cardState.layoutDirection === 'horizontal'
+					? `ontario-card ontario-card__card-type--${this.cardState.layoutDirection} ontario-card__image-${this.horizontalImagePositionType} ontario-card__image-size-${this.horizontalImageSizeType}`
+					: `ontario-card ontario-card__card-type--basic ontario-card--position-${this.cardState.layoutDirection}`;
+			const descriptionClass = this.description ? '' : ' ontario-card__description-false';
+			const backgroundClass =
+				this.headerColour && !this.description ? `ontario-card__background--${this.headerColour}` : '';
+			return `${baseClass} ${descriptionClass} ${backgroundClass}`.trim();
+		}
+		/**
+		 * Returns the heading classes of the card.
+		 *
+		 * @returns {string}
+		 */
+		getCardHeadingClasses() {
+			const baseClass = 'ontario-card__heading';
+			const backgroundClass = this.cardState.headerColour
+				? `ontario-card__heading--${this.cardState.headerColour}`
+				: '';
+			return `${baseClass} ${backgroundClass}`.trim();
+		}
+		/**
+		 * Returns the url that the card links to.
+		 *
+		 * @returns {string}
+		 */
+		getHref() {
+			return this.cardLink ? this.cardLink : '#';
+		}
+		/**
+		 * Component life cycle hook.
+		 *
+		 * https://stenciljs.com/docs/component-lifecycle#connectedcallback
+		 */
+		componentWillLoad() {
+			this.validateLayoutDirection();
+			this.validateHeadingLevel();
+			this.validateHeaderColour();
+			this.validateLabel();
+		}
+		render() {
+			return h(
+				'li',
+				{ key: '126862b1ba356fda266eb9104eb2840cfb98ec3f', class: this.getCardClasses() },
+				this.image &&
+					h(
+						'div',
+						{ key: '463af9c87902654107d607d55e1714411db55732', class: 'ontario-card__image-container' },
+						h(
+							'a',
+							{
+								'key': '40a063e3437578eb3f5e6d2eb4785f2e8e5d81f2',
+								'href': this.getHref(),
+								'aria-label': this.ariaLabelText,
+							},
+							h('img', {
+								key: '5d0d5403c10e8298b71f96152b97e27b213a2782',
+								class: 'ontario-card__image',
+								alt: this.imageAltText,
+								src: this.image,
+							}),
+						),
+					),
+				h(
+					'div',
+					{
+						key: 'e35387c5367814f20a1a12a0ff78f021311864e0',
+						class: `ontario-card__text-container ${this.image ? 'ontario-card--image-true' : ''}`,
+					},
+					h(
+						this.cardState.headingLevel, //tag
+						{ className: this.getCardHeadingClasses() }, //attributes
+						h('a', { 'href': this.getHref(), 'aria-label': this.ariaLabelText }, this.label),
+					),
+					this.description &&
+						h(
+							'div',
+							{ key: '62496c55504cf786c85b79748b5541a0dad412c5', class: 'ontario-card__description' },
+							h('p', { key: '61b5b710ac61a8580b02ab37946f08e1a48d37a8' }, this.description),
+						),
+				),
+			);
+		}
+		get host() {
+			return this;
+		}
+		static get watchers() {
+			return {
+				layoutDirection: ['validateLayoutDirection'],
+				headingLevel: ['validateHeadingLevel'],
+				headerColour: ['validateHeaderColour'],
+				label: ['validateLabel'],
+			};
+		}
+		static get style() {
+			return ontarioCardCss;
+		}
+	},
+	[
+		257,
+		'ontario-card',
+		{
+			label: [1],
+			headingLevel: [1, 'heading-level'],
+			image: [1],
+			imageAltText: [1, 'image-alt-text'],
+			description: [1],
+			cardLink: [1, 'card-link'],
+			layoutDirection: [1, 'layout-direction'],
+			headerColour: [1, 'header-colour'],
+			horizontalImagePositionType: [1, 'horizontal-image-position-type'],
+			horizontalImageSizeType: [1, 'horizontal-image-size-type'],
+			ariaLabelText: [1, 'aria-label-text'],
+			cardState: [32],
+		},
+		undefined,
+		{
+			layoutDirection: ['validateLayoutDirection'],
+			headingLevel: ['validateHeadingLevel'],
+			headerColour: ['validateHeaderColour'],
+			label: ['validateLabel'],
+		},
+	],
+);
+function defineCustomElement$1() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = ['ontario-card'];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-card':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioCard$1);
+				}
+				break;
+		}
+	});
+}
+defineCustomElement$1();
+
+const OntarioCard = OntarioCard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { OntarioCard, defineCustomElement };
+//# sourceMappingURL=ontario-card.js.map
+
+//# sourceMappingURL=ontario-card.js.map

package/components/ontario-card.js.map

@@ -0,0 +1 @@
+{"file":"ontario-card.js","mappings":"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","names":["OntarioCard","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-card/ontario-card-types.tsx","src/utils/common/common.interface.ts","src/components/ontario-card/ontario-card.scss?tag=ontario-card&encapsulation=shadow","src/components/ontario-card/ontario-card.tsx"],"sourcesContent":["import { HeadingLevel } from '../../utils/common/common.interface';\n\nexport const layoutDirectionDefinitions = ['vertical', 'horizontal'] as const;\nexport const horizontalImagePositionDefinitions = ['left', 'right'] as const;\nexport const horizontalImageSizeDefinitions = ['one-fourth', 'one-third'] as const;\n\nexport type LayoutDirection = (typeof layoutDirectionDefinitions)[number];\nexport type HorizontalImagePositionType = (typeof horizontalImagePositionDefinitions)[number];\nexport type HorizontalImageSizeType = (typeof horizontalImageSizeDefinitions)[number];\n\nexport const headerColourDefinitions = [\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] as const;\n\nexport type HeaderColour = (typeof headerColourDefinitions)[number];\n\n// Define properties that you would like to track as component state\nexport type CardState = {\n\theaderColour: HeaderColour | undefined;\n\theadingLevel: HeadingLevel | undefined;\n\tlayoutDirection: LayoutDirection | undefined;\n};\n","import { Language } from './language-types';\nimport { InputInteractionEvent, InputFocusBlurEvent } from '../events/event-handler.interface';\nimport { EventEmitter } from '@stencil/core';\n\nexport interface Base {\n\t/**\n\t * The unique identifier of the element. This is optional - if no ID is passed, one will be generated.\n\t */\n\telementId?: string;\n\n\t/**\n\t * Returns the unique identifier.\n\t */\n\tgetId?: () => string;\n\n\t/**\n\t * Stencil API that doesn't return anything. Implementation is optional.\n\t */\n\tcomponentWillLoad?: () => void;\n\n\t/**\n\t * Returns the HTML code to be rendered into a custom element.\n\t */\n\trender?: () => object;\n}\n\nexport interface Input extends Base {\n\t/**\n\t * The name assigned to the element. The name value is used to reference form data after a form is submitted.\n\t */\n\tname: string;\n\n\t/**\n\t * Used to define whether the input field is required or not.\n\t */\n\trequired?: boolean;\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\tlanguage?: Language;\n\n\t/**\n\t * The element content value.\n\t */\n\tvalue?: string;\n\n\t/**\n\t * Used to add a custom function to the input onChange event.\n\t */\n\tcustomOnChange?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used to add a custom function to the input onBlur event.\n\t */\n\tcustomOnBlur?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used to add a custom function to the input onFocus event.\n\t */\n\tcustomOnFocus?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Emitted when a keyboard input or mouse event occurs when an input has been changed.\n\t */\n\tinputOnChange: EventEmitter<InputInteractionEvent>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when an input has lost focus.\n\t */\n\tinputOnBlur: EventEmitter<InputFocusBlurEvent>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when an input has gained focus.\n\t */\n\tinputOnFocus: EventEmitter<InputFocusBlurEvent>;\n}\n\nexport interface Hint extends Base {\n\t/**\n\t * The content type of the hint.\n\t * If no prop is passed, it will default to a string.\n\t * If the hint requires multiple lines or HTML, the `hintContentType` prop should be set to `html`.\n\t */\n\thintContentType?: 'string' | 'html';\n\n\t/**\n\t * Text to display as the hint text statement.\n\t *\n\t * Setting the hint can be done using the element content or setting the\n\t * this property.  This property will take precedence.\n\t */\n\thint: string;\n}\n\nexport type HintContentType = 'string' | 'html';\n\nexport const headingLevelDefinitions = ['h2', 'h3', 'h4', 'h5', 'h6'] as const;\n\n/**\n * Create a type from an array of values.\n *\n * https://steveholgado.com/typescript-types-from-arrays/\n */\nexport type HeadingLevel = (typeof headingLevelDefinitions)[number];\n\n/**\n * Used in both ontario-header and ontario-header-overflow-menu.\n */\nexport interface MenuItem {\n\ttitle: string;\n\thref: string;\n\tlinkIsActive?: boolean;\n\tonClickHandler?: (event: Event) => void;\n}\n","@use 'sass:math';\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tplaceholders;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as\n\tglobalFunctions;\n@use 'pkg:@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-bottom: spacing.$spacing-7;\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\tbackground: colours.$ontario-colour-white;\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__image-right & {\n\t\t\tborder-radius: globalVariables.$global-radius 0 0 0;\n\t\t}\n\n\t\t@at-root .ontario-card__image-left & {\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: math.percentage(math.div(2, 3));\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\theaderColourDefinitions,\n\tHeaderColour,\n\tHorizontalImagePositionType,\n\tHorizontalImageSizeType,\n\tlayoutDirectionDefinitions,\n\tLayoutDirection,\n\tCardState,\n} from './ontario-card-types';\nimport { headingLevelDefinitions, HeadingLevel } from '../../utils/common/common.interface';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { printArray } from '../../utils/helper/utils';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\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 * The heading level that the label will be rendered as.\n\t *\n\t * @example\n\t *\t<ontario-card\n\t *\t\theading-level=\"h4\"\n\t *\t\tlabel=\"Card Title 1\"\n\t *\t>\n\t */\n\t@Prop() headingLevel: HeadingLevel = 'h2';\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 * Alt text for the card's image.\n\t *\n\t * This is optional prop, but may be required for an\n\t * image due to accessibility requirements.\n\t *\n\t * You can find guidance on when to add alt text to an image\n\t * on the Ontario.ca web content editing guide.\n\t *\n\t * https://www.ontario.ca/page/ontario-ca-web-content-editing-guide#alt-text-image-accessibility\n\t *\n\t * Note: This should default to an empty string ('') to ensure the alt attribute appears in the markup\n\t * for decorative images. If left as undefined, the alt attribute will not render in markup.\n\t */\n\t@Prop() imageAltText?: 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 direction/orientation of the card.\n\t *\n\t * If no type is passed, it will default to 'vertical'.\n\t *\n\t */\n\t@Prop() layoutDirection?: LayoutDirection = '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@State() private cardState: CardState = {\n\t\theaderColour: undefined,\n\t\theadingLevel: undefined,\n\t\tlayoutDirection: undefined,\n\t};\n\n\t/**\n\t * Watch for changes to the `layoutDirection` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `layoutDirection` will be set to its default (`vertical`).\n\t * If a match is found in one of the array values then `cardState.layoutDirection` will be set to the matching array key value.\n\t */\n\t@Watch('layoutDirection')\n\tvalidateLayoutDirection() {\n\t\tconst isValid = this.layoutDirection && validateValueAgainstArray(this.layoutDirection, layoutDirectionDefinitions);\n\n\t\tif (!isValid) {\n\t\t\tthis.printPropWarning(\n\t\t\t\t'layout-direction',\n\t\t\t\t'<ontario-card>',\n\t\t\t\tthis.layoutDirection,\n\t\t\t\tlayoutDirectionDefinitions,\n\t\t\t\t'vertical',\n\t\t\t);\n\t\t\tthis.updateCardState('layoutDirection', 'vertical');\n\t\t\treturn;\n\t\t}\n\n\t\tthis.updateCardState('layoutDirection', this.layoutDirection);\n\t}\n\n\t/**\n\t * Watch for changes to the `headingLevel` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `headingLevel` will be set to its default (`h2`).\n\t *\n\t * If a match is found in one of the array values then `headingLevel` will be set to the matching array key value.\n\t */\n\t@Watch('headingLevel')\n\tvalidateHeadingLevel() {\n\t\tconst isValid = this.headingLevel && validateValueAgainstArray(this.headingLevel, headingLevelDefinitions);\n\n\t\tif (!isValid) {\n\t\t\tthis.printPropWarning('heading-level', '<ontario-card>', this.headingLevel, headingLevelDefinitions, 'h2');\n\t\t\tthis.updateCardState('headingLevel', 'h2');\n\t\t\treturn;\n\t\t}\n\n\t\tthis.updateCardState('headingLevel', this.headingLevel);\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 (undefined).\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\tconst isValid = this.headerColour && validateValueAgainstArray(this.headerColour, headerColourDefinitions);\n\n\t\tif (!isValid && this.headerColour !== undefined) {\n\t\t\tthis.printPropWarning('header-colour', '<ontario-card>', this.headerColour, headerColourDefinitions, 'undefined');\n\t\t\tthis.updateCardState('headerColour', undefined);\n\t\t\treturn;\n\t\t}\n\n\t\tthis.updateCardState('headerColour', this.headerColour);\n\t}\n\n\t/**\n\t * Watch for the presence of the `label` prop.\n\t *\n\t * If no `label` is provided, a warning message will be printed.\n\t * This is important for accessibility and ensures content is properly rendered\n\t * during SSR and visible to all users.\n\t */\n\t@Watch('label')\n\tprivate validateLabel() {\n\t\tif (!this.label || this.label.trim() === '') {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' label ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-card> ')\n\t\t\t\t.addRegularText('was not provided. This may result in inaccessible or empty content.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Print an invalid prop warning message.\n\t *\n\t * @param {string} propName - Name of the prop\n\t * @param {string} component - Component the error is on e.g. <ontario-card>\n\t * @param {any} propValue - Value of the prop\n\t * @param {readonly any[]} acceptableValues  - readonly array of acceptable prop values\n\t * @param {string} defaultValue - Stringified representation of the value that the corresponding State Object value will default to\n\t */\n\tprivate printPropWarning(\n\t\tpropName: string,\n\t\tcomponent: string,\n\t\tpropValue: any,\n\t\tacceptableValues: readonly any[],\n\t\tdefaultValue: string,\n\t) {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(` ${propName} `)\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(` ${component} `)\n\t\t\t.addRegularText('was set to an invalid value of ')\n\t\t\t.addMonospaceText(` ${propValue} `)\n\t\t\t.addRegularText('. Only ')\n\t\t\t.addMonospaceText(printArray([...acceptableValues]))\n\t\t\t.addRegularText(' are supported values. The default value of')\n\t\t\t.addMonospaceText(` ${defaultValue} `)\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t}\n\n\t/**\n\t * Update a key within the State Object with a value.\n\t *\n\t * Note: When state is represented as an object, and values are changed, the entire object needs to be rebuilt.\n\t * If only the corresponding object key/value is updated, corresponding render changes may not happen.\n\t *\n\t * @param {keyof CardState} key - Should match a key found within `CardState`.\n\t * @param {any} value - Should match the value type associated to the key within `CardState`.\n\t */\n\tprivate updateCardState(key: keyof CardState, value: any) {\n\t\tconst cardStateCopy = { ...this.cardState };\n\t\tcardStateCopy[key] = value;\n\t\tthis.cardState = cardStateCopy;\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.cardState.layoutDirection === 'horizontal'\n\t\t\t\t? `ontario-card ontario-card__card-type--${this.cardState.layoutDirection} 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.cardState.layoutDirection}`;\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 = this.cardState.headerColour ? `ontario-card__heading--${this.cardState.headerColour}` : '';\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.validateLayoutDirection();\n\t\tthis.validateHeadingLevel();\n\t\tthis.validateHeaderColour();\n\t\tthis.validateLabel();\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\" alt={this.imageAltText} 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{/**\n\t\t\t\t\t * h() is a stencil wrapped shorthand method for a render function, and is very\n\t\t\t\t\t * similar to the h() method or createElement() method found within React\n\t\t\t\t\t * It accepts 3 parameters:\n\t\t\t\t\t *  - a string interpretation of an HTML tag (e.g. 'h2')\n\t\t\t\t\t *  - an object of properties / attributes (e.g. 'id', 'className')\n\t\t\t\t\t *  - The innerHTML such as a string, or additional HTML elements\n\t\t\t\t\t */}\n\t\t\t\t\t{h(\n\t\t\t\t\t\tthis.cardState.headingLevel, //tag\n\t\t\t\t\t\t{ className: this.getCardHeadingClasses() }, //attributes\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)}\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}

package/components/ontario-checkboxes.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from '../dist/types/components';
+
+interface OntarioCheckboxes extends Components.OntarioCheckboxes, HTMLElement {}
+export const OntarioCheckboxes: {
+	prototype: OntarioCheckboxes;
+	new (): OntarioCheckboxes;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;