@ongov/ontario-design-system-component-library 4.2.0 → 4.3.0-alpha.2

package/dist/components/error-message.js.map

@@ -1 +1 @@
-{"file":"error-message.js","mappings":";;;MAQa,YAAY,GAA2C,CAAC,EAAE,OAAO,EAAE,KAAK,GAAG,KAAK,EAAE;IAC9F,MAAM,SAAS,GAAG,CAAC,KAAK,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC;IAE7C,QACC,WAAK,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,2BAA2B,SAAS,GAAG,uBAAuB,GAAG,EAAE,EAAE;QAC7F,mCAAqD;QACrD,WAAK,KAAK,EAAC,kCAAkC,IAAE,OAAO,CAAO,CACxD,EACL;AACH;;;;","names":[],"sources":["src/utils/components/error-message/error-message.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { isEmpty } from '../../../utils/helper/utils';\n\nexport type ErrorMessageProps = {\n\terror?: boolean;\n\tmessage?: string;\n};\n\nexport const ErrorMessage: FunctionalComponent<ErrorMessageProps> = ({ message, error = false }) => {\n\tconst hideError = !error || isEmpty(message);\n\n\treturn (\n\t\t<div role=\"alert\" class={`ontario-error-messaging ${hideError ? 'ontario-error__hidden' : ''}`}>\n\t\t\t<ontario-icon-alert-error></ontario-icon-alert-error>\n\t\t\t<div class=\"ontario-error-messaging__content\">{message}</div>\n\t\t</div>\n\t);\n};\n"],"version":3}
+{"file":"error-message.js","mappings":"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","names":[],"sources":["src/utils/common/input-caption/input-caption.enum.ts","src/utils/common/input-caption/input-caption.tsx","src/utils/events/event-handler.interface.ts","src/utils/events/event-handler.ts","src/utils/components/error-message/error-message.tsx"],"sourcesContent":["export enum MessageContentType {\n\tUndefinedCaptionObject = 'undefinedCaptionObject',\n\tUndefinedCaptionText = 'undefinedCaption',\n\tEmptyCaptionText = 'emptyCaption',\n\tUndefinedCaptionType = 'undefinedCaptionType',\n\tIncorrectCaptionType = 'incorrectCaptionType',\n}\n","import { h } from '@stencil/core';\nimport { CaptionType, CaptionTypes } from './input-caption.types';\nimport { MessageContentType } from './input-caption.enum';\nimport { CaptionInfo, Caption } from './caption.interface';\nimport { ConsoleMessageClass } from '../../console-message/console-message';\n\nexport class InputCaption implements CaptionInfo {\n\t/**\n\t * The text to display as caption.\n\t */\n\tcaptionText: string;\n\n\t/**\n\t * The type of caption to render.\n\t */\n\tcaptionType?: CaptionType = 'default';\n\n\t/**\n\t * Determine whether the input field is required.\n\t */\n\trequired?: boolean = false;\n\n\t/**\n\t * Determine whether the rendered element is a `<label>` or `<legend>`.\n\t */\n\tisLegend?: boolean = false;\n\n\t/**\n\t * Name of the component instantiating the class.\n\t * This is used for validation warning message.\n\t */\n\tcomponentTagName: string;\n\n\tlanguage: any = 'en';\n\n\ttranslations: any;\n\n\t/**\n\t * Set the class members\n\t * Output a console warning message if the provided `label` type is incorrect\n\t * @param caption object containing the essential data to configure the input label\n\t */\n\tconstructor(\n\t\tcomponentTagName: string,\n\t\tcaption: Caption | string,\n\t\ttranslations: any,\n\t\tlanguage: any,\n\t\tisLegend: boolean = false,\n\t\trequired: boolean = false,\n\t) {\n\t\tlet captionObject: Caption;\n\n\t\tif (typeof caption === 'string') {\n\t\t\ttry {\n\t\t\t\tcaptionObject = JSON.parse(caption) as Caption;\n\t\t\t} catch {\n\t\t\t\tcaptionObject = { captionText: caption, captionType: 'default' };\n\t\t\t}\n\t\t} else {\n\t\t\tcaptionObject = caption;\n\t\t}\n\n\t\tthis.componentTagName = componentTagName.toLocaleLowerCase();\n\t\tthis.captionText = captionObject?.captionText;\n\t\tthis.captionType =\n\t\t\t(captionObject?.captionType && CaptionTypes.find((type) => type === captionObject.captionType?.toLowerCase())) ||\n\t\t\t'default';\n\t\tthis.required = required;\n\t\tthis.isLegend = isLegend;\n\t\tthis.translations = translations;\n\t\tthis.language = language;\n\n\t\tthis.validateCaption(this);\n\t}\n\n\t/**\n\t * Return the `<label>` element for text inputs\n\t * @param captionFor Set the `htmlFor` attribute\n\t * @returns element containing the caption for the input\n\t */\n\tgetCaption = (captionFor?: string | undefined, hasHintExpander: boolean = false): HTMLElement => {\n\t\tconst captionText = this.captionText && this.captionText.toLowerCase();\n\t\tconst captionContent = this.isLegend ? (\n\t\t\t<legend class={this.getClass()}>\n\t\t\t\t{this.captionType === 'heading' ? <h1>{this.captionText}</h1> : this.captionText}\n\t\t\t\t{this.getRequiredFlagElement()}\n\t\t\t\t{hasHintExpander && this.getHintExpanderAccessibilityText(captionText, false)}\n\t\t\t</legend>\n\t\t) : (\n\t\t\t<label htmlFor={captionFor} class={this.getClass()}>\n\t\t\t\t{this.captionText}\n\t\t\t\t{this.getRequiredFlagElement()}\n\t\t\t\t{hasHintExpander && this.getHintExpanderAccessibilityText(captionText, false)}\n\t\t\t</label>\n\t\t);\n\n\t\t// with `this.captionType` already set to one of the enum values, the comparison no longer needs the `toLowerCase()` transform\n\t\treturn this.captionType === 'heading' && !this.isLegend ? <h1>{captionContent}</h1> : captionContent;\n\t};\n\n\tgetHintExpanderAccessibilityText(captionText: string, hasHintExpanderOnOption: boolean = false): HTMLElement {\n\t\tconst multipleOptionsMessage = (\n\t\t\t<span class=\"ontario-show-for-sr\">\n\t\t\t\t{this.translations.accessibility.moreInfo[this.language]} \"{captionText.toLowerCase()}\"{' '}\n\t\t\t\t{this.translations.accessibility.checkboxHintExpander[this.language]}\n\t\t\t</span>\n\t\t);\n\n\t\tconst singleOptionMessage = (\n\t\t\t<span class=\"ontario-show-for-sr\">\n\t\t\t\t{this.translations.accessibility.moreInfo[this.language]} \"{captionText.toLowerCase()}\"{' '}\n\t\t\t\t{this.translations.accessibility.singleHintExpander[this.language]}\n\t\t\t</span>\n\t\t);\n\t\treturn this.componentTagName === 'ontario-checkboxes'\n\t\t\t? !hasHintExpanderOnOption\n\t\t\t\t? multipleOptionsMessage\n\t\t\t\t: singleOptionMessage\n\t\t\t: singleOptionMessage;\n\t}\n\n\t/**\n\t * Determines which flag text to use between `required` and `optional`\n\t * @returns `required` or `optional` flag text\n\t */\n\tprivate getRequiredFlagText(): string {\n\t\treturn this.required\n\t\t\t? this.translations && `(${this.translations.required[this.language]})`\n\t\t\t: this.translations && `(${this.translations.optional[this.language]})`;\n\t}\n\n\t/**\n\t * Get the HTML for the required/optional flag.\n\t * @returns CSS class for the label/legend.\n\t */\n\tprivate getRequiredFlagElement(): HTMLElement {\n\t\treturn <span class=\"ontario-label__flag\">{this.getRequiredFlagText()}</span>;\n\t}\n\n\t/**\n\t * Get the CSS class for the `label` element.\n\t * @returns CSS class for the `label` element.\n\t */\n\tprivate getClass(): string {\n\t\treturn this.captionType === 'large' || this.captionType === 'heading'\n\t\t\t? this.isLegend\n\t\t\t\t? `ontario-fieldset__legend ontario-fieldset__legend--${this.captionType}`\n\t\t\t\t: `ontario-label ontario-label--${this.captionType}`\n\t\t\t: this.isLegend\n\t\t\t? 'ontario-fieldset__legend'\n\t\t\t: 'ontario-label';\n\t}\n\n\t/**\n\t * Validate caption input by user and output warning message to the console if:\n\t * 1. the `caption` object is not provided\n\t * 2. the `captionText` property of the `caption` object is not provided\n\t * 3. the `captionText` property of the `caption` object is empty or contain only spaces\n\t * 4. the `captionType` property of the `caption` object is not provided\n\t * 5. the `captionType` property of the `caption` object is incorrect\n\t */\n\tprivate validateCaption(caption?: InputCaption) {\n\t\tlet messageType;\n\n\t\t// undefined `caption` object\n\t\tif (!caption || Object.keys(caption).length <= 0) {\n\t\t\tmessageType = MessageContentType.UndefinedCaptionObject;\n\t\t} else {\n\t\t\t// undefined `captionText` property\n\t\t\tif (!caption.captionText) {\n\t\t\t\tmessageType = MessageContentType.UndefinedCaptionText;\n\t\t\t} else {\n\t\t\t\t// `captionText` that is empty or contains only spaces\n\t\t\t\tif (/^\\s*$/.test(caption.captionText)) {\n\t\t\t\t\tmessageType = MessageContentType.EmptyCaptionText;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// undefined `captionType`\n\t\t\tif (!caption.captionType) {\n\t\t\t\tmessageType = MessageContentType.UndefinedCaptionType;\n\t\t\t} else {\n\t\t\t\t// incorrect `captionType`\n\t\t\t\tif (!CaptionTypes.includes(caption?.captionType?.toLowerCase() as CaptionType)) {\n\t\t\t\t\tmessageType = MessageContentType.IncorrectCaptionType;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif (messageType) {\n\t\t\tconst message = new ConsoleMessageClass().addDesignSystemTag();\n\n\t\t\tif (messageType !== MessageContentType.UndefinedCaptionObject) {\n\t\t\t\tmessage\n\t\t\t\t\t.addMonospaceText(\n\t\t\t\t\t\t` ${\n\t\t\t\t\t\t\tmessageType === MessageContentType.EmptyCaptionText ||\n\t\t\t\t\t\t\tmessageType === MessageContentType.UndefinedCaptionText\n\t\t\t\t\t\t\t\t? 'caption or captionText'\n\t\t\t\t\t\t\t\t: 'captionType'\n\t\t\t\t\t\t} `,\n\t\t\t\t\t)\n\t\t\t\t\t.addRegularText('object or property of');\n\t\t\t}\n\n\t\t\tmessage.addMonospaceText(' caption ').addRegularText('object on').addMonospaceText(` ${this.componentTagName} `);\n\t\t\tthis.printConsoleMessage(messageType, message, this.getRequiredFlagText());\n\t\t}\n\t}\n\n\t/**\n\t * Generate the content of warning message to be printed to the console\n\t * @param messageType determine the content of warning message to output\n\t * @param componentTagName the tag name of the component that's emitting the warning message\n\t * @param requiredFlagText accepts a string value to be used as the required flag text and defaults to `(optional)` if not set\n\t * @returns an array of `ConsoleMessage` objects containing the message and associated styles to be printed to the console\n\t */\n\tprivate printConsoleMessage(\n\t\tmessageType: MessageContentType,\n\t\tmessage: ConsoleMessageClass,\n\t\trequiredFlagText: string = '(optional)',\n\t) {\n\t\tswitch (messageType) {\n\t\t\t// undefinedCaptionObject example: caption object on <ontario-input> is required but not defined. A blank followed by a (optional) flag is assumed.\n\t\t\t// undefinedCaptionText example: captionText property of caption object on <ontario-input> is required but not defined. A blank followed by a (optional) flag is assumed.\n\t\t\t// EmptyCaptionText example: captionText property of caption object on <ontario-input> is empty or contains only spaces. A blank followed by a (optional) flag is assumed.\n\t\t\tcase MessageContentType.UndefinedCaptionObject:\n\t\t\tcase MessageContentType.UndefinedCaptionText:\n\t\t\tcase MessageContentType.EmptyCaptionText:\n\t\t\t\tmessage\n\t\t\t\t\t.addRegularText(\n\t\t\t\t\t\t`${\n\t\t\t\t\t\t\tmessageType === MessageContentType.EmptyCaptionText\n\t\t\t\t\t\t\t\t? 'is empty or contains only spaces'\n\t\t\t\t\t\t\t\t: 'is required but not defined'\n\t\t\t\t\t\t}. A blank followed by a`,\n\t\t\t\t\t)\n\t\t\t\t\t.addMonospaceText(` ${requiredFlagText} `)\n\t\t\t\t\t.addRegularText('flag is assumed.');\n\t\t\t\tbreak;\n\n\t\t\t// UndefinedCaptionType example: captionType property of caption object on <ontario-input> is not defined. The default type is assumed.\n\t\t\tcase MessageContentType.UndefinedCaptionType:\n\t\t\t\tmessage.addRegularText('is not defined. The').addMonospaceText(' default ').addRegularText('type is assumed.');\n\t\t\t\tbreak;\n\n\t\t\t// IncorrectCaptionType example: captionType property of caption object on <ontario-input> was set to an incorrect type; only default, heading or large type is allowed. The default type is assumed.\n\t\t\tcase MessageContentType.IncorrectCaptionType:\n\t\t\t\tmessage\n\t\t\t\t\t.addRegularText('was set to an incorrect type; only')\n\t\t\t\t\t.addMonospaceText(' default, heading, ')\n\t\t\t\t\t.addRegularText('or')\n\t\t\t\t\t.addMonospaceText(' large ')\n\t\t\t\t\t.addRegularText('type is allowed. The')\n\t\t\t\t\t.addMonospaceText(' default ')\n\t\t\t\t\t.addRegularText('type is assumed.');\n\t\t\t\tbreak;\n\t\t}\n\n\t\tmessage.printMessage();\n\t}\n}\n","export enum EventType {\n\tChange = 'change',\n\tBlur = 'blur',\n\tFocus = 'focus',\n\tInput = 'input',\n}\n\nexport type InputInteractionEvent = {\n\tid?: string;\n\tvalue?: string;\n};\n\nexport type InputInputEvent = InputInteractionEvent & {\n\tinputType?: string;\n};\n\nexport type RadioAndCheckboxChangeEvent = InputInteractionEvent & {\n\tchecked: boolean;\n};\n\nexport type InputFocusBlurEvent = InputInteractionEvent & {\n\tfocused: boolean;\n};\n\nexport type InputType = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null;\n","import { EventEmitter } from '@stencil/core';\nimport {\n\tInputType,\n\tEventType,\n\tInputFocusBlurEvent,\n\tInputInteractionEvent,\n\tRadioAndCheckboxChangeEvent,\n\tInputInputEvent,\n} from './event-handler.interface';\n\nexport const handleInputEvent = (\n\tevent: Event,\n\teventType: EventType,\n\tinput: InputType,\n\tinputChangeEvent: EventEmitter<InputInteractionEvent | RadioAndCheckboxChangeEvent>,\n\tinputFocusEvent: EventEmitter<InputFocusBlurEvent>,\n\tinputBlurEvent: EventEmitter<InputFocusBlurEvent>,\n\tinputInputEvent?: EventEmitter<InputInputEvent>,\n\ttype?: string,\n\tcustomChangeFunction?: (event: Event) => void,\n\tcustomFocusFunction?: (event: Event) => void,\n\tcustomBlurFunction?: (event: Event) => void,\n\tcustomInputFunction?: (event: Event) => void,\n\thostElement?: HTMLElement,\n) => {\n\tif (eventType === EventType.Input) {\n\t\tinputInputEvent?.emit({\n\t\t\tid: input?.id,\n\t\t\tvalue: (event as InputEvent).data ?? undefined,\n\t\t\tinputType: (event as InputEvent).inputType,\n\t\t});\n\n\t\tcustomInputFunction && customInputFunction(event);\n\t}\n\n\tif (eventType === EventType.Change) {\n\t\tif (type === 'radio' || type === 'checkbox') {\n\t\t\tif (input instanceof HTMLInputElement) {\n\t\t\t\tinputChangeEvent.emit({\n\t\t\t\t\tchecked: input?.checked,\n\t\t\t\t\tid: input?.id,\n\t\t\t\t\tvalue: input?.value,\n\t\t\t\t});\n\t\t\t}\n\t\t} else {\n\t\t\tinputChangeEvent.emit({\n\t\t\t\tid: input?.id,\n\t\t\t\tvalue: input?.value,\n\t\t\t});\n\t\t}\n\n\t\tcustomChangeFunction && customChangeFunction(event);\n\n\t\t// Note: Change events don't have composable set to true and don't cross the ShadowDOM boundary.\n\t\t// This will emit an event so the normal `onChange` event pattern is maintained.\n\t\thostElement && emitEvent(hostElement, eventType, event);\n\t}\n\n\tif (eventType === EventType.Focus) {\n\t\tinputFocusEvent.emit({\n\t\t\tid: input?.id,\n\t\t\tfocused: true,\n\t\t\tvalue: input?.value,\n\t\t});\n\n\t\tcustomFocusFunction && customFocusFunction(event);\n\t}\n\n\tif (eventType === EventType.Blur) {\n\t\tinputBlurEvent.emit({\n\t\t\tid: input?.id,\n\t\t\tfocused: false,\n\t\t\tvalue: input?.value,\n\t\t});\n\n\t\tcustomBlurFunction && customBlurFunction(event);\n\t}\n};\n\n/**\n * Emit a custom event that can be subscribed to by an event listener.\n *\n * @param element Component host element, see https://stenciljs.com/docs/host-element\n * @param name name of the event\n * @param detail any relevant details, like the original event\n */\nexport const emitEvent = (element: HTMLElement, name: string, detail?: any) => {\n\telement.dispatchEvent(new CustomEvent(name, { composed: true, bubbles: true, detail }));\n};\n","import { FunctionalComponent, h } from '@stencil/core';\nimport { isEmpty } from '../../../utils/helper/utils';\n\nexport type ErrorMessageProps = {\n\terror?: boolean;\n\tmessage?: string;\n};\n\nexport const ErrorMessage: FunctionalComponent<ErrorMessageProps> = ({ message, error = false }) => {\n\tconst hideError = !error || isEmpty(message);\n\n\treturn (\n\t\t<div role=\"alert\" class={`ontario-error-messaging ${hideError ? 'ontario-error__hidden' : ''}`}>\n\t\t\t<ontario-icon-alert-error></ontario-icon-alert-error>\n\t\t\t<div class=\"ontario-error-messaging__content\">{message}</div>\n\t\t</div>\n\t);\n};\n"],"version":3}

package/dist/components/ontario-aside.js

@@ -19,7 +19,7 @@ const OntarioAside$1 = /*@__PURE__*/ proxyCustomElement(
 			this.__registerHost();
 			this.__attachShadow();
 			this.headingType = undefined;
-			this.headingContentType = undefined;
+			this.headingContentType = 'string';
 			this.headingContent = undefined;
 			this.content = undefined;
 			this.highlightColour = 'teal';
@@ -30,15 +30,17 @@ const OntarioAside$1 = /*@__PURE__*/ proxyCustomElement(
 		 * This is for validation purposes to make sure the `headingType` matches one of the `HeadingLevelOptions`.
 		 */
 		validateHeadingType() {
-			if (isValidHeadingLevel(this.headingType)) return this.headingType;
-			const message = new ConsoleMessageClass();
-			return message
-				.addDesignSystemTag()
-				.addMonospaceText(` headingType ${this.headingType} `)
-				.addRegularText('for')
-				.addMonospaceText(' <ontario-aside> ')
-				.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')
-				.printMessage();
+			if (!!this.headingType) {
+				if (isValidHeadingLevel(this.headingType)) return this.headingType;
+				const message = new ConsoleMessageClass();
+				return message
+					.addDesignSystemTag()
+					.addMonospaceText(` headingType ${this.headingType} `)
+					.addRegularText('for')
+					.addMonospaceText(' <ontario-aside> ')
+					.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')
+					.printMessage();
+			}
 		}
 		/**
 		 * Watch for changes in the `headingContentType` prop for validation purposes.
@@ -54,23 +56,6 @@ const OntarioAside$1 = /*@__PURE__*/ proxyCustomElement(
 				return this.warnDefaultType();
 			}
 		}
-		/**
-		 * Watch for changes in the `headingContent` prop for validation purposes.
-		 *
-		 * If no `headingContent` value is provided, a warning message will be printed.
-		 */
-		validateHeadingContent() {
-			if (!this.headingContent) {
-				const message = new ConsoleMessageClass();
-				message
-					.addDesignSystemTag()
-					.addMonospaceText(' headingContent ')
-					.addRegularText('for')
-					.addMonospaceText(' <ontario-aside> ')
-					.addRegularText('was not provided.')
-					.printMessage();
-			}
-		}
 		/**
 		 * Watch for changes to the `highlightColour` prop.
 		 *
@@ -116,15 +101,14 @@ const OntarioAside$1 = /*@__PURE__*/ proxyCustomElement(
 		}
 		componentWillLoad() {
 			this.validateHighlightColour();
-			this.validateHeadingContent();
 			this.validateHeadingType();
 			this.validateHeadingContentType();
 		}
 		render() {
 			return generateCalloutAside(
 				'aside',
-				this.headingType,
 				this.headingContentType,
+				this.headingType,
 				this.headingContent,
 				this.content,
 				this.highlightColour,
@@ -134,7 +118,6 @@ const OntarioAside$1 = /*@__PURE__*/ proxyCustomElement(
 			return {
 				headingType: ['validateHeadingType'],
 				headingContentType: ['validateHeadingContentType'],
-				headingContent: ['validateHeadingContent'],
 				highlightColour: ['validateHighlightColour'],
 			};
 		}
@@ -156,7 +139,6 @@ const OntarioAside$1 = /*@__PURE__*/ proxyCustomElement(
 		{
 			headingType: ['validateHeadingType'],
 			headingContentType: ['validateHeadingContentType'],
-			headingContent: ['validateHeadingContent'],
 			highlightColour: ['validateHighlightColour'],
 		},
 	],

package/dist/components/ontario-aside.js.map

@@ -1 +1 @@
-{"file":"ontario-aside.js","mappings":"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","names":["OntarioAside"],"sources":["src/components/ontario-aside/ontario-aside.scss?tag=ontario-aside&encapsulation=shadow","src/components/ontario-aside/ontario-aside.tsx"],"sourcesContent":["@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/global.variables' as globalVariables;\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/4-elements/global.elements';\n\n.ontario-aside {\n\tborder-left: spacing.$spacing-1 solid colours.$ontario-colour-dark-teal;\n\tpadding: spacing.$spacing-5;\n\tmargin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-6;\n\n\t* {\n\t\tmax-width: globalVariables.$standard-width;\n\n\t\t&:last-child {\n\t\t\tmargin-bottom: spacing.$spacing-2;\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t.ontario-aside {\n\t\t\tmargin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-4;\n\t\t}\n\t}\n}\n\n.ontario-aside__title {\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4;\n}\n\n$aside-highlight-colours: (\n\t'teal': colours.$ontario-colour-dark-teal,\n\t'gold': colours.$ontario-colour-dark-gold,\n\t'yellow': colours.$ontario-colour-dark-yellow,\n\t'taupe': colours.$ontario-colour-dark-taupe,\n\t'green': colours.$ontario-colour-dark-green,\n\t'lime': colours.$ontario-colour-dark-lime,\n\t'sky': colours.$ontario-colour-dark-sky,\n\t'blue': colours.$ontario-colour-dark-blue,\n\t'purple': colours.$ontario-colour-dark-purple,\n);\n\n@each $colour-name, $hex in $aside-highlight-colours {\n\t.ontario-border-highlight--#{$colour-name} {\n\t\tborder-color: $hex !important;\n\t}\n}\n","import { Component, Prop, Watch } from '@stencil/core';\n\nimport {\n\tCalloutAside,\n\tHeadingLevelOptions,\n\tHeadingContentType,\n\tHeadingContentTypes,\n\tHighlightColourOptions,\n} from '../../utils/components/callout-aside/callout-aside.interface';\nimport {\n\tisValidHighlightColour,\n\tgenerateCalloutAside,\n\tisValidHeadingLevel,\n} from '../../utils/components/callout-aside/callout-aside-helpers';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-aside',\n\tstyleUrl: 'ontario-aside.scss',\n\tshadow: true,\n})\nexport class OntarioAside implements CalloutAside {\n\t/**\n\t * The heading level of the aside heading.\n\t */\n\t@Prop({ mutable: true }) headingType: HeadingLevelOptions;\n\n\t/**\n\t * The type of the heading content. If no prop is passed, it will default to string.\n\t */\n\t@Prop({ mutable: true }) headingContentType: HeadingContentType;\n\n\t/**\n\t * Text or HTML to be displayed as the heading of the aside. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.\n\t */\n\t@Prop() headingContent: string;\n\n\t/**\n\t * Optional text to be displayed as the content for the aside component. If a string is passed, it will automatically be nested in a paragraph tag.\n\t *\n\t * HTML content can also be passed as the child/children of the aside component if additional/different elements for the content are needed.\n\t *\n\t * @example\n\t * <ontario-aside headingType='h3' headingContent='This is the aside heading'><p>This is the first sentence of the aside content.</p><p>This is the second sentence of the aside content.</p></ontario-aside>\n\t */\n\t@Prop() content?: string;\n\n\t/**\n\t * Optional prop to choose the border colour of the aside. If none is passed, the default colour will be teal.\n\t */\n\t@Prop({ mutable: true }) highlightColour?: HighlightColourOptions = 'teal';\n\n\t/**\n\t * Watch for changes to the `headingType` prop.\n\t *\n\t * This is for validation purposes to make sure the `headingType` matches one of the `HeadingLevelOptions`.\n\t */\n\t@Watch('headingType')\n\tvalidateHeadingType() {\n\t\tif (isValidHeadingLevel(this.headingType)) return this.headingType;\n\n\t\tconst message = new ConsoleMessageClass();\n\t\treturn message\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(` headingType ${this.headingType} `)\n\t\t\t.addRegularText('for')\n\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')\n\t\t\t.printMessage();\n\t}\n\n\t/**\n\t * Watch for changes in the `headingContentType` prop for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `headingContentType` will be set to its default (`string`).\n\t * If a match is found in one of the array values then `headingContentType` will be set to the matching array key value.\n\t */\n\t@Watch('headingContentType')\n\tvalidateHeadingContentType() {\n\t\tconst isValid = validateValueAgainstArray(this.headingContentType, HeadingContentTypes);\n\t\tif (isValid) {\n\t\t\treturn this.headingContentType;\n\t\t} else {\n\t\t\treturn this.warnDefaultType();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes in the `headingContent` prop for validation purposes.\n\t *\n\t * If no `headingContent` value is provided, a warning message will be printed.\n\t */\n\t@Watch('headingContent')\n\tvalidateHeadingContent() {\n\t\tif (!this.headingContent) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' headingContent ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-aside> ')\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 `highlightColour` prop.\n\t *\n\t * If no `highlightColour` is passed, or if the `highlightColour` does not match the `highlightColour` options, a default value of 'teal' will be applied.\n\t */\n\t@Watch('highlightColour')\n\tvalidateHighlightColour() {\n\t\tif (this.highlightColour) {\n\t\t\tif (isValidHighlightColour(this.highlightColour)) return this.highlightColour;\n\t\t\telse {\n\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\tmessage\n\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t.addMonospaceText(` highlightColour ${this.highlightColour} `)\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t\t\t.addRegularText(\n\t\t\t\t\t\t'does not match one of the valid highlightColour types. A default colour of `teal` will be applied.',\n\t\t\t\t\t)\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\n\t\t// if no highlight colour is passed, return 'teal'\n\t\treturn 'teal';\n\t}\n\n\t/**\n\t * Print the invalid `type` warning message.\n\t * @returns default type ('string')\n\t */\n\tprivate warnDefaultType() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' headingContentType ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' string or html ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' string ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn (this.headingContentType = 'string');\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateHighlightColour();\n\t\tthis.validateHeadingContent();\n\t\tthis.validateHeadingType();\n\t\tthis.validateHeadingContentType();\n\t}\n\n\trender() {\n\t\treturn generateCalloutAside(\n\t\t\t'aside',\n\t\t\tthis.headingType,\n\t\t\tthis.headingContentType,\n\t\t\tthis.headingContent,\n\t\t\tthis.content,\n\t\t\tthis.highlightColour,\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"ontario-aside.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,yzJAAyzJ,CAAC;AACl1J,2BAAe,eAAe;;MCqBjBA,cAAY;;;;;;kCAS0C,QAAQ;;;+BAoBN,MAAM;;;;;;;IAQ1E,mBAAmB;QAClB,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE;YACvB,IAAI,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC;gBAAE,OAAO,IAAI,CAAC,WAAW,CAAC;YAEnE,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO,OAAO;iBACZ,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,gBAAgB,IAAI,CAAC,WAAW,GAAG,CAAC;iBACrD,cAAc,CAAC,KAAK,CAAC;iBACrB,gBAAgB,CAAC,mBAAmB,CAAC;iBACrC,cAAc,CAAC,4FAA4F,CAAC;iBAC5G,YAAY,EAAE,CAAC;SACjB;KACD;;;;;;;IASD,0BAA0B;QACzB,MAAM,OAAO,GAAG,yBAAyB,CAAC,IAAI,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,CAAC;QACxF,IAAI,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,kBAAkB,CAAC;SAC/B;aAAM;YACN,OAAO,IAAI,CAAC,eAAe,EAAE,CAAC;SAC9B;KACD;;;;;;IAQD,uBAAuB;QACtB,IAAI,IAAI,CAAC,eAAe,EAAE;YACzB,IAAI,sBAAsB,CAAC,IAAI,CAAC,eAAe,CAAC;gBAAE,OAAO,IAAI,CAAC,eAAe,CAAC;iBACzE;gBACJ,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;gBAC1C,OAAO;qBACL,kBAAkB,EAAE;qBACpB,gBAAgB,CAAC,oBAAoB,IAAI,CAAC,eAAe,GAAG,CAAC;qBAC7D,cAAc,CAAC,KAAK,CAAC;qBACrB,gBAAgB,CAAC,mBAAmB,CAAC;qBACrC,cAAc,CACd,oGAAoG,CACpG;qBACA,YAAY,EAAE,CAAC;aACjB;SACD;;QAGD,OAAO,MAAM,CAAC;KACd;;;;;IAMO,eAAe;QACtB,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;QAC1C,OAAO;aACL,kBAAkB,EAAE;aACpB,gBAAgB,CAAC,sBAAsB,CAAC;aACxC,cAAc,CAAC,IAAI,CAAC;aACpB,gBAAgB,CAAC,mBAAmB,CAAC;aACrC,cAAc,CAAC,kCAAkC,CAAC;aAClD,gBAAgB,CAAC,kBAAkB,CAAC;aACpC,cAAc,CAAC,iCAAiC,CAAC;aACjD,gBAAgB,CAAC,UAAU,CAAC;aAC5B,cAAc,CAAC,aAAa,CAAC;aAC7B,YAAY,EAAE,CAAC;QACjB,QAAQ,IAAI,CAAC,kBAAkB,GAAG,QAAQ,EAAE;KAC5C;IAED,iBAAiB;QAChB,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,0BAA0B,EAAE,CAAC;KAClC;IAED,MAAM;QACL,OAAO,oBAAoB,CAC1B,OAAO,EACP,IAAI,CAAC,kBAAkB,EACvB,IAAI,CAAC,WAAW,EAChB,IAAI,CAAC,cAAc,EACnB,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,eAAe,CACpB,CAAC;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioAside"],"sources":["src/components/ontario-aside/ontario-aside.scss?tag=ontario-aside&encapsulation=shadow","src/components/ontario-aside/ontario-aside.tsx"],"sourcesContent":["@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/global.variables' as globalVariables;\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/4-elements/global.elements';\n\n.ontario-aside {\n\tborder-left: spacing.$spacing-1 solid colours.$ontario-colour-dark-teal;\n\tpadding: spacing.$spacing-5;\n\tmargin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-6;\n\n\t* {\n\t\tmax-width: globalVariables.$standard-width;\n\n\t\t&:last-child {\n\t\t\tmargin-bottom: spacing.$spacing-2;\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t.ontario-aside {\n\t\t\tmargin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-4;\n\t\t}\n\t}\n}\n\n.ontario-aside__title {\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4;\n}\n\n$aside-highlight-colours: (\n\t'teal': colours.$ontario-colour-dark-teal,\n\t'gold': colours.$ontario-colour-dark-gold,\n\t'yellow': colours.$ontario-colour-dark-yellow,\n\t'taupe': colours.$ontario-colour-dark-taupe,\n\t'green': colours.$ontario-colour-dark-green,\n\t'lime': colours.$ontario-colour-dark-lime,\n\t'sky': colours.$ontario-colour-dark-sky,\n\t'blue': colours.$ontario-colour-dark-blue,\n\t'purple': colours.$ontario-colour-dark-purple,\n);\n\n@each $colour-name, $hex in $aside-highlight-colours {\n\t.ontario-border-highlight--#{$colour-name} {\n\t\tborder-color: $hex !important;\n\t}\n}\n","import { Component, Prop, Watch } from '@stencil/core';\n\nimport {\n\tCalloutAside,\n\tHeadingLevelOptions,\n\tHeadingContentType,\n\tHeadingContentTypes,\n\tHighlightColourOptions,\n} from '../../utils/components/callout-aside/callout-aside.interface';\nimport {\n\tisValidHighlightColour,\n\tgenerateCalloutAside,\n\tisValidHeadingLevel,\n} from '../../utils/components/callout-aside/callout-aside-helpers';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-aside',\n\tstyleUrl: 'ontario-aside.scss',\n\tshadow: true,\n})\nexport class OntarioAside implements CalloutAside {\n\t/**\n\t * The heading level of the aside heading.\n\t */\n\t@Prop({ mutable: true }) headingType?: HeadingLevelOptions;\n\n\t/**\n\t * The type of the heading content. If no prop is passed, it will default to string.\n\t */\n\t@Prop({ mutable: true }) headingContentType: HeadingContentType = 'string';\n\n\t/**\n\t * Text or HTML to be displayed as the heading of the aside. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.\n\t */\n\t@Prop() headingContent?: string;\n\n\t/**\n\t * Optional text to be displayed as the content for the aside component. If a string is passed, it will automatically be nested in a paragraph tag.\n\t *\n\t * HTML content can also be passed as the child/children of the aside component if additional/different elements for the content are needed.\n\t *\n\t * @example\n\t * <ontario-aside headingType='h3' headingContent='This is the aside heading'><p>This is the first sentence of the aside content.</p><p>This is the second sentence of the aside content.</p></ontario-aside>\n\t */\n\t@Prop() content?: string;\n\n\t/**\n\t * Optional prop to choose the border colour of the aside. If none is passed, the default colour will be teal.\n\t */\n\t@Prop({ mutable: true }) highlightColour?: HighlightColourOptions = 'teal';\n\n\t/**\n\t * Watch for changes to the `headingType` prop.\n\t *\n\t * This is for validation purposes to make sure the `headingType` matches one of the `HeadingLevelOptions`.\n\t */\n\t@Watch('headingType')\n\tvalidateHeadingType() {\n\t\tif (!!this.headingType) {\n\t\t\tif (isValidHeadingLevel(this.headingType)) return this.headingType;\n\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\treturn message\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(` headingType ${this.headingType} `)\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t\t.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes in the `headingContentType` prop for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `headingContentType` will be set to its default (`string`).\n\t * If a match is found in one of the array values then `headingContentType` will be set to the matching array key value.\n\t */\n\t@Watch('headingContentType')\n\tvalidateHeadingContentType() {\n\t\tconst isValid = validateValueAgainstArray(this.headingContentType, HeadingContentTypes);\n\t\tif (isValid) {\n\t\t\treturn this.headingContentType;\n\t\t} else {\n\t\t\treturn this.warnDefaultType();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `highlightColour` prop.\n\t *\n\t * If no `highlightColour` is passed, or if the `highlightColour` does not match the `highlightColour` options, a default value of 'teal' will be applied.\n\t */\n\t@Watch('highlightColour')\n\tvalidateHighlightColour() {\n\t\tif (this.highlightColour) {\n\t\t\tif (isValidHighlightColour(this.highlightColour)) return this.highlightColour;\n\t\t\telse {\n\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\tmessage\n\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t.addMonospaceText(` highlightColour ${this.highlightColour} `)\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t\t\t.addRegularText(\n\t\t\t\t\t\t'does not match one of the valid highlightColour types. A default colour of `teal` will be applied.',\n\t\t\t\t\t)\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\n\t\t// if no highlight colour is passed, return 'teal'\n\t\treturn 'teal';\n\t}\n\n\t/**\n\t * Print the invalid `type` warning message.\n\t * @returns default type ('string')\n\t */\n\tprivate warnDefaultType() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' headingContentType ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' string or html ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' string ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn (this.headingContentType = 'string');\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateHighlightColour();\n\t\tthis.validateHeadingType();\n\t\tthis.validateHeadingContentType();\n\t}\n\n\trender() {\n\t\treturn generateCalloutAside(\n\t\t\t'aside',\n\t\t\tthis.headingContentType,\n\t\t\tthis.headingType,\n\t\t\tthis.headingContent,\n\t\t\tthis.content,\n\t\t\tthis.highlightColour,\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/ontario-callout.js

@@ -29,15 +29,17 @@ const OntarioCallout$1 = /*@__PURE__*/ proxyCustomElement(
 		 * This is for validation purposes to make sure the `headingType` matches one of the `HeadingLevelOptions`.
 		 */
 		validateHeadingType() {
-			if (isValidHeadingLevel(this.headingType)) return this.headingType;
-			const message = new ConsoleMessageClass();
-			return message
-				.addDesignSystemTag()
-				.addMonospaceText(` headingType ${this.headingType} `)
-				.addRegularText('for')
-				.addMonospaceText(' <ontario-callout> ')
-				.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')
-				.printMessage();
+			if (!!this.headingType) {
+				if (isValidHeadingLevel(this.headingType)) return this.headingType;
+				const message = new ConsoleMessageClass();
+				return message
+					.addDesignSystemTag()
+					.addMonospaceText(` headingType ${this.headingType} `)
+					.addRegularText('for')
+					.addMonospaceText(' <ontario-callout> ')
+					.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')
+					.printMessage();
+			}
 		}
 		/**
 		 * Watch for changes in the `headingContentType` variable for validation purposes.
@@ -53,23 +55,6 @@ const OntarioCallout$1 = /*@__PURE__*/ proxyCustomElement(
 				return this.warnDefaultType();
 			}
 		}
-		/**
-		 * Watch for changes in the `headingContent` prop for validation purposes.
-		 *
-		 * If no `headingContent` value is provided, a warning message will be printed.
-		 */
-		validateHeadingContent() {
-			if (!this.headingContent) {
-				const message = new ConsoleMessageClass();
-				message
-					.addDesignSystemTag()
-					.addMonospaceText(' headingContent ')
-					.addRegularText('for')
-					.addMonospaceText(' <ontario-callout> ')
-					.addRegularText('was not provided.')
-					.printMessage();
-			}
-		}
 		/**
 		 * Watch for changes to the `highlightColour` prop.
 		 *
@@ -115,15 +100,14 @@ const OntarioCallout$1 = /*@__PURE__*/ proxyCustomElement(
 		}
 		componentWillLoad() {
 			this.validateHighlightColour();
-			this.validateHeadingContent();
 			this.validateHeadingType();
 			this.validateHeadingContentType();
 		}
 		render() {
 			return generateCalloutAside(
 				'callout',
-				this.headingType,
 				this.headingContentType,
+				this.headingType,
 				this.headingContent,
 				this.content,
 				this.highlightColour,
@@ -133,7 +117,6 @@ const OntarioCallout$1 = /*@__PURE__*/ proxyCustomElement(
 			return {
 				headingType: ['validateHeadingType'],
 				headingContentType: ['validateHeadingContentType'],
-				headingContent: ['validateHeadingContent'],
 				highlightColour: ['validateHighlightColour'],
 			};
 		}
@@ -155,7 +138,6 @@ const OntarioCallout$1 = /*@__PURE__*/ proxyCustomElement(
 		{
 			headingType: ['validateHeadingType'],
 			headingContentType: ['validateHeadingContentType'],
-			headingContent: ['validateHeadingContent'],
 			highlightColour: ['validateHighlightColour'],
 		},
 	],

package/dist/components/ontario-callout.js.map

@@ -1 +1 @@
-{"file":"ontario-callout.js","mappings":"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","names":["OntarioCallout"],"sources":["src/components/ontario-callout/ontario-callout.scss?tag=ontario-callout&encapsulation=shadow","src/components/ontario-callout/ontario-callout.tsx"],"sourcesContent":["@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/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/global.elements';\n\n.ontario-callout {\n\tborder-left: spacing.$spacing-1 solid colours.$ontario-colour-dark-teal;\n\tpadding: spacing.$spacing-5;\n\tmargin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-0;\n\tbackground-color: colours.$ontario-greyscale-5;\n\n\t* {\n\t\tmax-width: globalVariables.$standard-width;\n\n\t\t&:last-child {\n\t\t\tmargin-bottom: spacing.$spacing-2;\n\t\t}\n\t}\n}\n\n.ontario-callout__title {\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4;\n}\n\n$highlight-colours: (\n\t'teal': colours.$ontario-colour-dark-teal,\n\t'gold': colours.$ontario-colour-dark-gold,\n\t'yellow': colours.$ontario-colour-dark-yellow,\n\t'taupe': colours.$ontario-colour-dark-taupe,\n\t'green': colours.$ontario-colour-dark-green,\n\t'lime': colours.$ontario-colour-dark-lime,\n\t'sky': colours.$ontario-colour-dark-sky,\n\t'blue': colours.$ontario-colour-dark-blue,\n\t'purple': colours.$ontario-colour-dark-purple,\n);\n\n@each $colour-name, $hex in $highlight-colours {\n\t.ontario-border-highlight--#{$colour-name} {\n\t\tborder-color: $hex !important;\n\t}\n}\n","import { Component, Prop, Watch } from '@stencil/core';\n\nimport {\n\tCalloutAside,\n\tHeadingLevelOptions,\n\tHeadingContentType,\n\tHeadingContentTypes,\n\tHighlightColourOptions,\n} from '../../utils/components/callout-aside/callout-aside.interface';\nimport {\n\tisValidHighlightColour,\n\tgenerateCalloutAside,\n\tisValidHeadingLevel,\n} from '../../utils/components/callout-aside/callout-aside-helpers';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-callout',\n\tstyleUrl: 'ontario-callout.scss',\n\tshadow: true,\n})\nexport class OntarioCallout implements CalloutAside {\n\t/**\n\t * The heading level of the callout heading.\n\t */\n\t@Prop({ mutable: true }) headingType: HeadingLevelOptions;\n\n\t/**\n\t * The type of the heading content. If no prop is passed, it will default to `string`.\n\t */\n\t@Prop({ mutable: true }) headingContentType: HeadingContentType = 'string';\n\n\t/**\n\t * Text or HTML to be displayed as the heading of the callout. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.\n\t */\n\t@Prop() headingContent: string;\n\n\t/**\n\t * Optional text to be displayed as the content for the callout component. If a string is passed, it will automatically be nested in a paragraph tag.\n\t *\n\t * HTML content can also be passed as the child/children of the callout component if additional/different elements for the content are needed.\n\t *\n\t * @example\n\t * <ontario-callout headingType='h3' headingContent='This is the callout heading'><p>This is the first sentence of the callout content.</p><p>This is the second sentence of the callout content.</p></ontario-callout>\n\t */\n\t@Prop() content?: string;\n\n\t/**\n\t * Optional prop to choose the border colour of the callout. If none is passed, the default colour will be teal.\n\t */\n\t@Prop({ mutable: true }) highlightColour?: HighlightColourOptions = 'teal';\n\n\t/**\n\t * Watch for changes to the `headingType` prop.\n\t * This is for validation purposes to make sure the `headingType` matches one of the `HeadingLevelOptions`.\n\t */\n\t@Watch('headingType')\n\tvalidateHeadingType() {\n\t\tif (isValidHeadingLevel(this.headingType)) return this.headingType;\n\n\t\tconst message = new ConsoleMessageClass();\n\t\treturn message\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(` headingType ${this.headingType} `)\n\t\t\t.addRegularText('for')\n\t\t\t.addMonospaceText(' <ontario-callout> ')\n\t\t\t.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')\n\t\t\t.printMessage();\n\t}\n\n\t/**\n\t * Watch for changes in the `headingContentType` variable for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `headingContentType` will be set to its default (`string`).\n\t * If a match is found in one of the array values then `headingContentType` will be set to the matching array key value.\n\t */\n\t@Watch('headingContentType')\n\tvalidateHeadingContentType() {\n\t\tconst isValid = validateValueAgainstArray(this.headingContentType, HeadingContentTypes);\n\t\tif (isValid) {\n\t\t\treturn this.headingContentType;\n\t\t} else {\n\t\t\treturn this.warnDefaultType();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes in the `headingContent` prop for validation purposes.\n\t *\n\t * If no `headingContent` value is provided, a warning message will be printed.\n\t */\n\t@Watch('headingContent')\n\tvalidateHeadingContent() {\n\t\tif (!this.headingContent) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' headingContent ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-callout> ')\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 `highlightColour` prop.\n\t *\n\t * If no `highlightColour` is passed, or if the `highlightColour` does not match the `highlightColour` options, a default value of 'teal' will be applied.\n\t */\n\t@Watch('highlightColour')\n\tvalidateHighlightColour() {\n\t\tif (this.highlightColour) {\n\t\t\tif (isValidHighlightColour(this.highlightColour)) return this.highlightColour;\n\t\t\telse {\n\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\tmessage\n\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t.addMonospaceText(` highlightColour ${this.highlightColour} `)\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-callout> ')\n\t\t\t\t\t.addRegularText(\n\t\t\t\t\t\t'does not match one of the valid highlightColour types. A default colour of `teal` will be applied.',\n\t\t\t\t\t)\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\n\t\t// if no highlight colour is passed, return 'teal'\n\t\treturn 'teal';\n\t}\n\n\t/**\n\t * Print the invalid `type` warning message.\n\t * @returns default type ('string')\n\t */\n\tprivate warnDefaultType() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' headingContentType ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-callout> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' string or html ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' string ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn (this.headingContentType = 'string');\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateHighlightColour();\n\t\tthis.validateHeadingContent();\n\t\tthis.validateHeadingType();\n\t\tthis.validateHeadingContentType();\n\t}\n\n\trender() {\n\t\treturn generateCalloutAside(\n\t\t\t'callout',\n\t\t\tthis.headingType,\n\t\t\tthis.headingContentType,\n\t\t\tthis.headingContent,\n\t\t\tthis.content,\n\t\t\tthis.highlightColour,\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"ontario-callout.js","mappings":";;;;;AAAA,MAAM,iBAAiB,GAAG,0vJAA0vJ,CAAC;AACrxJ,6BAAe,iBAAiB;;MCqBnBA,gBAAc;;;;;;kCASwC,QAAQ;;;+BAoBN,MAAM;;;;;;IAO1E,mBAAmB;QAClB,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE;YACvB,IAAI,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC;gBAAE,OAAO,IAAI,CAAC,WAAW,CAAC;YAEnE,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO,OAAO;iBACZ,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,gBAAgB,IAAI,CAAC,WAAW,GAAG,CAAC;iBACrD,cAAc,CAAC,KAAK,CAAC;iBACrB,gBAAgB,CAAC,qBAAqB,CAAC;iBACvC,cAAc,CAAC,4FAA4F,CAAC;iBAC5G,YAAY,EAAE,CAAC;SACjB;KACD;;;;;;;IASD,0BAA0B;QACzB,MAAM,OAAO,GAAG,yBAAyB,CAAC,IAAI,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,CAAC;QACxF,IAAI,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,kBAAkB,CAAC;SAC/B;aAAM;YACN,OAAO,IAAI,CAAC,eAAe,EAAE,CAAC;SAC9B;KACD;;;;;;IAQD,uBAAuB;QACtB,IAAI,IAAI,CAAC,eAAe,EAAE;YACzB,IAAI,sBAAsB,CAAC,IAAI,CAAC,eAAe,CAAC;gBAAE,OAAO,IAAI,CAAC,eAAe,CAAC;iBACzE;gBACJ,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;gBAC1C,OAAO;qBACL,kBAAkB,EAAE;qBACpB,gBAAgB,CAAC,oBAAoB,IAAI,CAAC,eAAe,GAAG,CAAC;qBAC7D,cAAc,CAAC,KAAK,CAAC;qBACrB,gBAAgB,CAAC,qBAAqB,CAAC;qBACvC,cAAc,CACd,oGAAoG,CACpG;qBACA,YAAY,EAAE,CAAC;aACjB;SACD;;QAGD,OAAO,MAAM,CAAC;KACd;;;;;IAMO,eAAe;QACtB,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;QAC1C,OAAO;aACL,kBAAkB,EAAE;aACpB,gBAAgB,CAAC,sBAAsB,CAAC;aACxC,cAAc,CAAC,IAAI,CAAC;aACpB,gBAAgB,CAAC,qBAAqB,CAAC;aACvC,cAAc,CAAC,kCAAkC,CAAC;aAClD,gBAAgB,CAAC,kBAAkB,CAAC;aACpC,cAAc,CAAC,iCAAiC,CAAC;aACjD,gBAAgB,CAAC,UAAU,CAAC;aAC5B,cAAc,CAAC,aAAa,CAAC;aAC7B,YAAY,EAAE,CAAC;QACjB,QAAQ,IAAI,CAAC,kBAAkB,GAAG,QAAQ,EAAE;KAC5C;IAED,iBAAiB;QAChB,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,0BAA0B,EAAE,CAAC;KAClC;IAED,MAAM;QACL,OAAO,oBAAoB,CAC1B,SAAS,EACT,IAAI,CAAC,kBAAkB,EACvB,IAAI,CAAC,WAAW,EAChB,IAAI,CAAC,cAAc,EACnB,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,eAAe,CACpB,CAAC;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioCallout"],"sources":["src/components/ontario-callout/ontario-callout.scss?tag=ontario-callout&encapsulation=shadow","src/components/ontario-callout/ontario-callout.tsx"],"sourcesContent":["@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/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/global.elements';\n\n.ontario-callout {\n\tborder-left: spacing.$spacing-1 solid colours.$ontario-colour-dark-teal;\n\tpadding: spacing.$spacing-5;\n\tmargin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-0;\n\tbackground-color: colours.$ontario-greyscale-5;\n\n\t* {\n\t\tmax-width: globalVariables.$standard-width;\n\n\t\t&:last-child {\n\t\t\tmargin-bottom: spacing.$spacing-2;\n\t\t}\n\t}\n}\n\n.ontario-callout__title {\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4;\n}\n\n$highlight-colours: (\n\t'teal': colours.$ontario-colour-dark-teal,\n\t'gold': colours.$ontario-colour-dark-gold,\n\t'yellow': colours.$ontario-colour-dark-yellow,\n\t'taupe': colours.$ontario-colour-dark-taupe,\n\t'green': colours.$ontario-colour-dark-green,\n\t'lime': colours.$ontario-colour-dark-lime,\n\t'sky': colours.$ontario-colour-dark-sky,\n\t'blue': colours.$ontario-colour-dark-blue,\n\t'purple': colours.$ontario-colour-dark-purple,\n);\n\n@each $colour-name, $hex in $highlight-colours {\n\t.ontario-border-highlight--#{$colour-name} {\n\t\tborder-color: $hex !important;\n\t}\n}\n","import { Component, Prop, Watch } from '@stencil/core';\n\nimport {\n\tCalloutAside,\n\tHeadingLevelOptions,\n\tHeadingContentType,\n\tHeadingContentTypes,\n\tHighlightColourOptions,\n} from '../../utils/components/callout-aside/callout-aside.interface';\nimport {\n\tisValidHighlightColour,\n\tgenerateCalloutAside,\n\tisValidHeadingLevel,\n} from '../../utils/components/callout-aside/callout-aside-helpers';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-callout',\n\tstyleUrl: 'ontario-callout.scss',\n\tshadow: true,\n})\nexport class OntarioCallout implements CalloutAside {\n\t/**\n\t * The heading level of the callout heading.\n\t */\n\t@Prop({ mutable: true }) headingType?: HeadingLevelOptions;\n\n\t/**\n\t * The type of the heading content. If no prop is passed, it will default to `string`.\n\t */\n\t@Prop({ mutable: true }) headingContentType: HeadingContentType = 'string';\n\n\t/**\n\t * Text or HTML to be displayed as the heading of the callout. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.\n\t */\n\t@Prop() headingContent?: string;\n\n\t/**\n\t * Optional text to be displayed as the content for the callout component. If a string is passed, it will automatically be nested in a paragraph tag.\n\t *\n\t * HTML content can also be passed as the child/children of the callout component if additional/different elements for the content are needed.\n\t *\n\t * @example\n\t * <ontario-callout headingType='h3' headingContent='This is the callout heading'><p>This is the first sentence of the callout content.</p><p>This is the second sentence of the callout content.</p></ontario-callout>\n\t */\n\t@Prop() content?: string;\n\n\t/**\n\t * Optional prop to choose the border colour of the callout. If none is passed, the default colour will be teal.\n\t */\n\t@Prop({ mutable: true }) highlightColour?: HighlightColourOptions = 'teal';\n\n\t/**\n\t * Watch for changes to the `headingType` prop.\n\t * This is for validation purposes to make sure the `headingType` matches one of the `HeadingLevelOptions`.\n\t */\n\t@Watch('headingType')\n\tvalidateHeadingType() {\n\t\tif (!!this.headingType) {\n\t\t\tif (isValidHeadingLevel(this.headingType)) return this.headingType;\n\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\treturn message\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(` headingType ${this.headingType} `)\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-callout> ')\n\t\t\t\t.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes in the `headingContentType` variable for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `headingContentType` will be set to its default (`string`).\n\t * If a match is found in one of the array values then `headingContentType` will be set to the matching array key value.\n\t */\n\t@Watch('headingContentType')\n\tvalidateHeadingContentType() {\n\t\tconst isValid = validateValueAgainstArray(this.headingContentType, HeadingContentTypes);\n\t\tif (isValid) {\n\t\t\treturn this.headingContentType;\n\t\t} else {\n\t\t\treturn this.warnDefaultType();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `highlightColour` prop.\n\t *\n\t * If no `highlightColour` is passed, or if the `highlightColour` does not match the `highlightColour` options, a default value of 'teal' will be applied.\n\t */\n\t@Watch('highlightColour')\n\tvalidateHighlightColour() {\n\t\tif (this.highlightColour) {\n\t\t\tif (isValidHighlightColour(this.highlightColour)) return this.highlightColour;\n\t\t\telse {\n\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\tmessage\n\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t.addMonospaceText(` highlightColour ${this.highlightColour} `)\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-callout> ')\n\t\t\t\t\t.addRegularText(\n\t\t\t\t\t\t'does not match one of the valid highlightColour types. A default colour of `teal` will be applied.',\n\t\t\t\t\t)\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\n\t\t// if no highlight colour is passed, return 'teal'\n\t\treturn 'teal';\n\t}\n\n\t/**\n\t * Print the invalid `type` warning message.\n\t * @returns default type ('string')\n\t */\n\tprivate warnDefaultType() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' headingContentType ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-callout> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' string or html ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' string ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn (this.headingContentType = 'string');\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateHighlightColour();\n\t\tthis.validateHeadingType();\n\t\tthis.validateHeadingContentType();\n\t}\n\n\trender() {\n\t\treturn generateCalloutAside(\n\t\t\t'callout',\n\t\t\tthis.headingContentType,\n\t\t\tthis.headingType,\n\t\t\tthis.headingContent,\n\t\t\tthis.content,\n\t\t\tthis.highlightColour,\n\t\t);\n\t}\n}\n"],"version":3}

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

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { C as ConsoleMessageClass } from './console-message.js';
 
 const ontarioCardCollectionCss =
-	'.ontario-card-collection__container{display:flex;flex-wrap:wrap}.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:calc(25% - 2rem)}.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card):nth-child(4n){margin-right:0}@media screen and (max-width: 73em){.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:calc(50% - 1.25rem)}.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card):nth-child(2n){margin-right:0}}.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card){width:calc(33.3% - 1.75rem)}.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card):nth-child(3n){margin-right:0}.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card){width:calc(50% - 1.25rem)}.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card):nth-child(2n){margin-right:0}';
+	'.ontario-card-collection__container{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:0;padding:0}.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:calc(25% - 2rem)}.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card):nth-child(4n){margin-right:0}@media screen and (max-width: 73em){.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:calc(50% - 1.25rem)}.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card):nth-child(2n){margin-right:0}}@media screen and (max-width: 40em){.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:calc(100% - 0.5rem)}}.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card){width:calc(33.3% - 1.75rem)}.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card):nth-child(3n){margin-right:0}@media screen and (max-width: 40em){.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card){width:calc(100% - 0.5rem)}}.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card){width:calc(50% - 1.25rem)}.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card):nth-child(2n){margin-right:0}@media screen and (max-width: 40em){.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card){width:calc(100% - 0.5rem)}}';
 const OntarioCardCollectionStyle0 = ontarioCardCollectionCss;
 
 const OntarioCardCollection$1 = /*@__PURE__*/ proxyCustomElement(

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

@@ -1 +1 @@
-{"file":"ontario-card-collection.js","mappings":";;;AAAA,MAAM,wBAAwB,GAAG,00BAA00B,CAAC;AAC52B,oCAAe,wBAAwB;;MCQ1BA,uBAAqB;;;;;2BAQE,CAAC;;;;;;;;IAepC,mBAAmB;QAClB,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,EAAE;YACnF,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,GAAG,gCAAgC,GAAG,8BAC9D,4EAA4E,CAC5E;iBACA,gBAAgB,CAAC,KAAK,CAAC;iBACvB,cAAc,CAAC,cAAc,CAAC;iBAC9B,YAAY,EAAE,CAAC;YACjB,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;SAC1B;aAAM;YACN,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC;SACzC;KACD;;;;IAKO,QAAQ;QACf,OAAO;;8CAEqC,IAAI,CAAC,gBAAgB;KAC9D,CAAC,IAAI,EAAE,CAAC;KACX;IAED,iBAAiB;QAChB,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC3B;IAED,MAAM;QACL,QACC,2DAAI,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IACzB,8DAAa,CACT,EACJ;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioCardCollection"],"sources":["src/components/ontario-card-collection/ontario-card-collection.scss?tag=ontario-card-collection&encapsulation=shadow","src/components/ontario-card-collection/ontario-card-collection.tsx"],"sourcesContent":["@use 'sass:math';\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/breakpoints.variables' as breakpoints;\n\n.ontario-card-collection__container {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n}\n\n.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card) {\n\twidth: calc(25% - 2rem);\n\n\t&:nth-child(4n) {\n\t\tmargin-right: spacing.$spacing-0;\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\twidth: calc(50% - 1.25rem);\n\n\t\t&:nth-child(2n) {\n\t\t\tmargin-right: spacing.$spacing-0;\n\t\t}\n\t}\n}\n\n.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card) {\n\twidth: calc(33.3% - 1.75rem);\n\n\t&:nth-child(3n) {\n\t\tmargin-right: spacing.$spacing-0;\n\t}\n}\n\n.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card) {\n\twidth: calc(50% - 1.25rem);\n\n\t&:nth-child(2n) {\n\t\tmargin-right: spacing.$spacing-0;\n\t}\n}\n","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","mappings":";;;AAAA,MAAM,wBAAwB,GAAG,wvCAAwvC,CAAC;AAC1xC,oCAAe,wBAAwB;;MCQ1BA,uBAAqB;;;;;2BAQE,CAAC;;;;;;;;IAepC,mBAAmB;QAClB,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,EAAE;YACnF,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,GAAG,gCAAgC,GAAG,8BAC9D,4EAA4E,CAC5E;iBACA,gBAAgB,CAAC,KAAK,CAAC;iBACvB,cAAc,CAAC,cAAc,CAAC;iBAC9B,YAAY,EAAE,CAAC;YACjB,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;SAC1B;aAAM;YACN,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC;SACzC;KACD;;;;IAKO,QAAQ;QACf,OAAO;;8CAEqC,IAAI,CAAC,gBAAgB;KAC9D,CAAC,IAAI,EAAE,CAAC;KACX;IAED,iBAAiB;QAChB,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC3B;IAED,MAAM;QACL,QACC,2DAAI,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IACzB,8DAAa,CACT,EACJ;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioCardCollection"],"sources":["src/components/ontario-card-collection/ontario-card-collection.scss?tag=ontario-card-collection&encapsulation=shadow","src/components/ontario-card-collection/ontario-card-collection.tsx"],"sourcesContent":["@use 'sass:math';\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/breakpoints.variables' as breakpoints;\n\n.ontario-card-collection__container {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tjustify-content: flex-start;\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-0;\n}\n\n.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card) {\n\twidth: calc(25% - 2rem);\n\n\t&:nth-child(4n) {\n\t\tmargin-right: spacing.$spacing-0;\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\twidth: calc(50% - 1.25rem);\n\n\t\t&:nth-child(2n) {\n\t\t\tmargin-right: spacing.$spacing-0;\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: calc(100% - 0.5rem);\n\t}\n}\n\n.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card) {\n\twidth: calc(33.3% - 1.75rem);\n\n\t&:nth-child(3n) {\n\t\tmargin-right: spacing.$spacing-0;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: calc(100% - 0.5rem);\n\t}\n}\n\n.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card) {\n\twidth: calc(50% - 1.25rem);\n\n\t&:nth-child(2n) {\n\t\tmargin-right: spacing.$spacing-0;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: calc(100% - 0.5rem);\n\t}\n}\n","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}

package/dist/components/ontario-card.js

@@ -6,7 +6,7 @@ const CardTypes = ['basic', 'image', 'title', 'horizontal'];
 const HeaderTypes = ['default', 'light', 'dark'];
 
 const ontarioCardCss =
-	'.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;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-card__header-type--light .ontario-card__heading{background-color:#f2f2f2;padding-top:1rem;padding-bottom:1rem;padding-right:4rem;border-radius:4px 4px 0 0}.ontario-card__header-type--dark .ontario-card__heading{background-color:#1a1a1a;padding-top:1rem;padding-bottom:1rem;border-radius:4px 4px 0 0}.ontario-card__header-type--dark:hover .ontario-card__heading{text-decoration-line:underline;text-decoration-color:#FFFFFF}.ontario-card--no-description .ontario-card__heading{padding:1rem 1.5rem;border-radius:0 0 4px 4px}.ontario-card__heading a{color:#1a1a1a;text-decoration:none;outline:none}.ontario-card__header-type--dark .ontario-card__heading a{color:#FFFFFF}.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__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}.ontario-card__header-type--light .ontario-card__description,.ontario-card__header-type--dark .ontario-card__description{padding-top:1rem}@media screen and (max-width: 73em){.ontario-card__description{padding:0.5rem 1rem 1.5rem 1rem}.ontario-card__header-type--light .ontario-card__description,.ontario-card__header-type--dark .ontario-card__description{padding-top: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}';
+	'.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-card__header-type--light .ontario-card__heading{background-color:#f2f2f2;padding-top:1rem;padding-bottom:1rem;padding-right:4rem;border-radius:4px 4px 0 0}.ontario-card__header-type--dark .ontario-card__heading{background-color:#1a1a1a;padding-top:1rem;padding-bottom:1rem;border-radius:4px 4px 0 0}.ontario-card__header-type--dark:hover .ontario-card__heading{text-decoration-line:underline;text-decoration-color:#FFFFFF}.ontario-card--no-description .ontario-card__heading{padding:1rem 1.5rem;border-radius:0 0 4px 4px}.ontario-card__heading a{color:#1a1a1a;text-decoration:none;outline:none}.ontario-card__header-type--dark .ontario-card__heading a{color:#FFFFFF}.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__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}.ontario-card__header-type--light .ontario-card__description,.ontario-card__header-type--dark .ontario-card__description{padding-top:1rem}@media screen and (max-width: 73em){.ontario-card__description{padding:0.5rem 1rem 1.5rem 1rem}.ontario-card__header-type--light .ontario-card__description,.ontario-card__header-type--dark .ontario-card__description{padding-top: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 OntarioCardStyle0 = ontarioCardCss;
 
 const OntarioCard$1 = /*@__PURE__*/ proxyCustomElement(

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

@@ -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\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}
+{"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}