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

package/components/ontario-loading-indicator.js

@@ -0,0 +1,181 @@
+import { p as proxyCustomElement, H, h } from './index.js';
+import { b as validateLanguage, v as validateValueAgainstArray } from './p-CNqFEifG.js';
+import { C as ConsoleMessageClass } from './p-Cdm-Ot0O.js';
+import { t as translations } from './p-DgMhpSmi.js';
+
+const ontarioLoadingIndicatorCss =
+	'.ontario-loading-indicator__overlay,.ontario-loading-indicator__overlay--within-container{position:fixed;width:100%;left:0;right:0;top:0;bottom:0;background-color:rgba(255, 255, 255, 0.7);z-index:9999}.ontario-loading-indicator__overlay[aria-hidden=false],.ontario-loading-indicator__overlay--within-container[aria-hidden=false]{display:block}.ontario-loading-indicator__overlay[aria-hidden=true],.ontario-loading-indicator__overlay--within-container[aria-hidden=true]{display:none}.ontario-loading-indicator__overlay--within-container{position:absolute}.ontario-loading-indicator{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:100%;height:100%}.ontario-loading-indicator p{color:rgb(76.5, 76.5, 76.5);font-family:"Raleway Modified", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;line-height:1.5;font-weight:700;word-spacing:0.025rem;margin:0.75rem 0 0}.ontario-loading-indicator__spinner{animation:rotator 1.5s linear infinite;width:3rem;height:3rem;overflow:visible}.ontario-loading-indicator__spinner circle{stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round;stroke:rgb(76.5, 76.5, 76.5);animation:dash 1.5s ease-in-out infinite}@keyframes rotator{100%{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35px}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124px}}';
+
+const OntarioLoadingIndicator$1 = /*@__PURE__*/ proxyCustomElement(
+	class OntarioLoadingIndicator extends H {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			/**
+			 * The type of loading indicator to render.
+			 */
+			this.type = 'large';
+			/**
+			 * A boolean value to determine whether or not the loading indicator is loading (i.e: is visible) or not.
+			 */
+			this.isLoading = false;
+			/**
+			 * A boolean value to determine whether the loading indicator overlay covers the full page or not. By default, this is set to `true`.
+			 *
+			 * If set to `false`, the loading indicator overlay will be positioned absolutely relative to its container. Note that this will only work if the containing element has a style rule specifying it to be positioned relatively.
+			 */
+			this.fullScreenOverlay = true;
+			this.translations = translations;
+		}
+		/**
+		 * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.
+		 */
+		handleSetAppLanguage(event) {
+			if (!this.language) {
+				this.language = validateLanguage(event);
+			}
+		}
+		/**
+		 * Handles an update to the language should the user request a language update from the language toggle.
+		 * @param {CustomEvent} - The language that has been selected.
+		 */
+		handleHeaderLanguageToggled(event) {
+			this.language = validateLanguage(event.detail.newLanguage);
+		}
+		/**
+		 * Watch for changes in the `isLoading` prop.
+		 */
+		isLoadingChanged(newIsLoading) {
+			this.isLoadingState = newIsLoading;
+		}
+		/**
+		 * Watch for changes in the `type` variable for validation purposes.
+		 *
+		 * If the user input doesn't match one of the array values then `type` will be set to its default (`large`).
+		 * If a match is found in one of the array values then `type` will be set to the matching array key value.
+		 */
+		validateType() {
+			const isValid = validateValueAgainstArray(this.type, ['large', 'small']);
+			if (isValid) {
+				return (this.typeState = this.type);
+			} else {
+				this.warnDefaultType();
+				return (this.typeState = 'large');
+			}
+		}
+		/**
+		 * Print the invalid `type` warning message.
+		 * @returns default type ('large')
+		 */
+		warnDefaultType() {
+			const message = new ConsoleMessageClass();
+			message
+				.addDesignSystemTag()
+				.addMonospaceText(' type ')
+				.addRegularText('on')
+				.addMonospaceText(' <ontario-loading-indicator> ')
+				.addRegularText('was set to an invalid type; only')
+				.addMonospaceText(' large or small ')
+				.addRegularText('are supported. The default type')
+				.addMonospaceText(' large ')
+				.addRegularText('is assumed.')
+				.printMessage();
+		}
+		componentWillLoad() {
+			this.language = validateLanguage(this.language);
+			this.validateType();
+			this.isLoadingState = this.isLoading;
+		}
+		render() {
+			var _a;
+			return this.typeState === 'large'
+				? h(
+						'div',
+						{
+							'class': this.fullScreenOverlay
+								? `ontario-loading-indicator__overlay`
+								: `ontario-loading-indicator__overlay--within-container`,
+							'aria-hidden': this.isLoadingState ? 'false' : 'true',
+							'role': 'alert',
+							'aria-live': 'assertive',
+						},
+						h(
+							'div',
+							{ class: 'ontario-loading-indicator' },
+							h(
+								'svg',
+								{
+									'class': 'ontario-loading-indicator__spinner',
+									'viewBox': '25 25 50 50',
+									'xmlns': 'http://www.w3.org/2000/svg',
+									'aria-hidden': 'true',
+								},
+								h('circle', { 'cx': '50', 'cy': '50', 'r': '20', 'fill': 'none', 'stroke-width': '4' }),
+							),
+							h(
+								'p',
+								null,
+								(_a = this.message) !== null && _a !== void 0 ? _a : this.translations.loading[`${this.language}`],
+							),
+						),
+					)
+				: h('p', null, 'The small loading indicator is still under development.');
+		}
+		static get watchers() {
+			return {
+				isLoading: ['isLoadingChanged'],
+				type: ['validateType'],
+			};
+		}
+		static get style() {
+			return ontarioLoadingIndicatorCss;
+		}
+	},
+	[
+		257,
+		'ontario-loading-indicator',
+		{
+			type: [1],
+			isLoading: [4, 'is-loading'],
+			message: [1],
+			fullScreenOverlay: [4, 'full-screen-overlay'],
+			language: [1025],
+			translations: [32],
+			isLoadingState: [32],
+			typeState: [32],
+		},
+		[
+			[8, 'setAppLanguage', 'handleSetAppLanguage'],
+			[8, 'headerLanguageToggled', 'handleHeaderLanguageToggled'],
+		],
+		{
+			isLoading: ['isLoadingChanged'],
+			type: ['validateType'],
+		},
+	],
+);
+function defineCustomElement$1() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = ['ontario-loading-indicator'];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-loading-indicator':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioLoadingIndicator$1);
+				}
+				break;
+		}
+	});
+}
+defineCustomElement$1();
+
+const OntarioLoadingIndicator = OntarioLoadingIndicator$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { OntarioLoadingIndicator, defineCustomElement };
+//# sourceMappingURL=ontario-loading-indicator.js.map
+
+//# sourceMappingURL=ontario-loading-indicator.js.map

package/components/ontario-loading-indicator.js.map

@@ -0,0 +1 @@
+{"file":"ontario-loading-indicator.js","mappings":"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","names":["OntarioLoadingIndicator","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-loading-indicator/ontario-loading-indicator.scss?tag=ontario-loading-indicator&encapsulation=shadow","src/components/ontario-loading-indicator/ontario-loading-indicator.tsx"],"sourcesContent":["@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineHeights;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as\n\tglobalFunctions;\n\n$offset: 1, 200;\n$duration: 1.5s;\n$spinner-size: 3rem;\n$dasharray: 89, 200;\n$loading-indicator-z-index: 9999;\n\n.ontario-loading-indicator__overlay,\n.ontario-loading-indicator__overlay--within-container {\n\tposition: fixed;\n\twidth: 100%;\n\tleft: 0;\n\tright: 0;\n\ttop: 0;\n\tbottom: 0;\n\tbackground-color: rgba(colours.$ontario-colour-white, 0.7);\n\tz-index: $loading-indicator-z-index;\n\n\t&[aria-hidden='false'] {\n\t\tdisplay: block;\n\t}\n\n\t&[aria-hidden='true'] {\n\t\tdisplay: none;\n\t}\n}\n\n.ontario-loading-indicator__overlay--within-container {\n\tposition: absolute;\n}\n\n.ontario-loading-indicator {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tposition: absolute;\n\ttop: 50%;\n\ttransform: translateY(-50%);\n\twidth: 100%;\n\theight: 100%;\n\n\tp {\n\t\tcolor: colours.$ontario-greyscale-70;\n\t\tfont-family: fonts.$ontario-font-raleway-modified;\n\t\tfont-size: globalFunctions.px-to-rem(16);\n\t\tline-height: lineHeights.$ontario-line-height-7;\n\t\tfont-weight: fontWeights.$ontario-font-weights-bold;\n\t\tword-spacing: 0.025rem;\n\t\tmargin: spacing.$spacing-3 spacing.$spacing-0 spacing.$spacing-0;\n\t}\n}\n\n.ontario-loading-indicator__spinner {\n\tanimation: rotator $duration linear infinite;\n\twidth: $spinner-size;\n\theight: $spinner-size;\n\toverflow: visible;\n\n\tcircle {\n\t\tstroke-dasharray: $offset;\n\t\tstroke-dashoffset: 0;\n\t\tstroke-linecap: round;\n\t\tstroke: colours.$ontario-greyscale-70;\n\t\tanimation: dash $duration ease-in-out infinite;\n\t}\n}\n\n@keyframes rotator {\n\t100% {\n\t\ttransform: rotate(360deg);\n\t}\n}\n\n@keyframes dash {\n\t0% {\n\t\tstroke-dasharray: $offset;\n\t\tstroke-dashoffset: 0;\n\t}\n\n\t50% {\n\t\tstroke-dasharray: $dasharray;\n\t\tstroke-dashoffset: -35px;\n\t}\n\n\t100% {\n\t\tstroke-dasharray: $dasharray;\n\t\tstroke-dashoffset: -124px;\n\t}\n}\n","import { Component, h, Prop, Listen, State, Watch } from '@stencil/core';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-loading-indicator',\n\tstyleUrl: 'ontario-loading-indicator.scss',\n\tshadow: true,\n})\nexport class OntarioLoadingIndicator {\n\t/**\n\t * The type of loading indicator to render.\n\t */\n\t@Prop() type: 'small' | 'large' = 'large';\n\n\t/**\n\t * A boolean value to determine whether or not the loading indicator is loading (i.e: is visible) or not.\n\t */\n\t@Prop() isLoading: boolean = false;\n\n\t/**\n\t * The message that tells the user what is happening or why the user is waiting.\n\t * If no message prop is passed, it will default to \"Loading\". Translations for this default message are included.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() message?: string;\n\n\t/**\n\t * A boolean value to determine whether the loading indicator overlay covers the full page or not. By default, this is set to `true`.\n\t *\n\t * If set to `false`, the loading indicator overlay will be positioned absolutely relative to its container. Note that this will only work if the containing element has a style rule specifying it to be positioned relatively.\n\t */\n\t@Prop() fullScreenOverlay?: boolean = true;\n\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\n\n\t@State() translations: any = translations;\n\n\t/**\n\t * Mutable variables, for internal use only.\n\t */\n\t@State() private isLoadingState: boolean;\n\t@State() private typeState: 'small' | 'large';\n\n\t/**\n\t * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.\n\t */\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t/**\n\t * Handles an update to the language should the user request a language update from the language toggle.\n\t * @param {CustomEvent} - The language that has been selected.\n\t */\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<HeaderLanguageToggleEventDetails>) {\n\t\tthis.language = validateLanguage(event.detail.newLanguage);\n\t}\n\n\t/**\n\t * Watch for changes in the `isLoading` prop.\n\t */\n\t@Watch('isLoading')\n\tisLoadingChanged(newIsLoading: boolean) {\n\t\tthis.isLoadingState = newIsLoading;\n\t}\n\n\t/**\n\t * Watch for changes in the `type` variable for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `type` will be set to its default (`large`).\n\t * If a match is found in one of the array values then `type` will be set to the matching array key value.\n\t */\n\t@Watch('type')\n\tvalidateType() {\n\t\tconst isValid = validateValueAgainstArray(this.type, ['large', 'small']);\n\t\tif (isValid) {\n\t\t\treturn (this.typeState = this.type);\n\t\t} else {\n\t\t\tthis.warnDefaultType();\n\t\t\treturn (this.typeState = 'large');\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid `type` warning message.\n\t * @returns default type ('large')\n\t */\n\tprivate warnDefaultType() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' type ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-loading-indicator> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' large or small ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' large ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.language = validateLanguage(this.language);\n\t\tthis.validateType();\n\t\tthis.isLoadingState = this.isLoading;\n\t}\n\n\trender() {\n\t\treturn this.typeState === 'large' ? (\n\t\t\t<div\n\t\t\t\tclass={\n\t\t\t\t\tthis.fullScreenOverlay\n\t\t\t\t\t\t? `ontario-loading-indicator__overlay`\n\t\t\t\t\t\t: `ontario-loading-indicator__overlay--within-container`\n\t\t\t\t}\n\t\t\t\taria-hidden={this.isLoadingState ? 'false' : 'true'}\n\t\t\t\trole=\"alert\"\n\t\t\t\taria-live=\"assertive\"\n\t\t\t>\n\t\t\t\t<div class=\"ontario-loading-indicator\">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tclass=\"ontario-loading-indicator__spinner\"\n\t\t\t\t\t\tviewBox=\"25 25 50 50\"\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<circle cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" stroke-width=\"4\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\t<p>{this.message ?? this.translations.loading[`${this.language}`]}</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t) : (\n\t\t\t<p>The small loading indicator is still under development.</p>\n\t\t);\n\t}\n}\n"],"version":3}

package/components/ontario-page-alert.d.ts

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

package/components/ontario-page-alert.js

@@ -0,0 +1,172 @@
+import { p as proxyCustomElement, H, h } from './index.js';
+import { v as validateValueAgainstArray } from './p-CNqFEifG.js';
+import { C as ConsoleMessageClass } from './p-Cdm-Ot0O.js';
+import { d as defineCustomElement$5 } from './p-vdzS-daB.js';
+import { d as defineCustomElement$4 } from './p-C__FBxsY.js';
+import { d as defineCustomElement$3 } from './p-CNDrx73J.js';
+import { d as defineCustomElement$2 } from './p-CXTm9jmr.js';
+
+const ontarioPageAlertCss =
+	'@charset "UTF-8";h6,.ontario-h6,h5,.ontario-h5,h4,.ontario-h4,h3,.ontario-h3,h2,.ontario-h2,h1,.ontario-h1{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway Modified", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif}h1,.ontario-h1{font-size:2rem;letter-spacing:0.04rem;line-height:1.29;margin:2.5rem 0 1.5rem 0;max-width:70rem}@media screen and (min-width: 40em){h1,.ontario-h1{font-size:2.5rem;letter-spacing:0.04rem;line-height:1.2}}h2,.ontario-h2{font-size:1.6875rem;letter-spacing:0.03rem;line-height:1.37;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h2,.ontario-h2{font-size:2.0625rem;letter-spacing:0.02rem;line-height:1.33}}h3,.ontario-h3{font-size:1.4375rem;letter-spacing:0.02rem;line-height:1.39;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h3,.ontario-h3{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.43}}h4,.ontario-h4{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){h4,.ontario-h4{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}h5,.ontario-h5{font-size:1.125rem;letter-spacing:0.03rem;line-height:1.56;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h5,.ontario-h5{font-size:1.1875rem;letter-spacing:0.025rem;line-height:1.5}}h6,.ontario-h6{font-size:1rem;line-height:1.56;letter-spacing:0.03rem;max-width:48rem;margin:0 0 0.75rem 0}@media screen and (min-width: 40em){h6,.ontario-h6{font-size:1rem;letter-spacing:0.025rem;line-height:1.5}}.ontario-lead-statement{font-size:1.25rem;line-height:1.6;max-width:70rem}@media screen and (min-width: 40em){.ontario-lead-statement{font-size:1.375rem}}html{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem}body{font-size:1rem;line-height:1.6;background-color:#FFFFFF;color:rgb(25.5, 25.5, 25.5);margin:0}p{font-size:inherit;margin-bottom:1.25rem;text-rendering:optimizeLegibility;margin:0 0 1.5rem 0}cite{font-style:italic;line-height:inherit}strong{font-weight:700;line-height:inherit}*,*::before,*::after{box-sizing:inherit}main p,main p:not(.ontario-lead-statement),main dd,main li{max-width:48rem}hr{border:0;padding:0;margin:2.5rem 0;border-bottom:4px solid #cccccc}hr.ontario-hr--dark{border-bottom:4px solid rgb(25.5, 25.5, 25.5)}a{color:#0066CC;text-decoration:underline}a:visited{color:#551A8B}a:hover{color:#00478F}a:active{color:#002142}a:focus{-moz-box-shadow:0 0 0 4px #009ADB;-webkit-box-shadow:0 0 0 4px #009ADB;box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:all 0.1s ease-in-out}​p{margin:0 0 1.5rem 0}​p+h1,p+h2,p+h3,p+h4,p+h5,p+h6,ul+h1,ul+h2,ul+h3,ul+h4,ul+h5,ul+h6,ol+h1,ol+h2,ol+h3,ol+h4,ol+h5,ol+h6,h1+h2,h2+h3,h3+h4,h4+h5,h5+h6{margin-top:2rem}p code,td code,li code{line-height:2.25rem}input[type=text],input[type=number],input[type=email],input[type=date],input[type=color],input[type=search],input[type=tel],textarea{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}input[type=checkbox]+label,input[type=radio]+label{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400;margin-left:0;margin-right:0}fieldset{border:0;margin:0;padding:0;page-break-inside:avoid}legend,label{display:block;margin:0}select{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}ul,ol{padding:0}ul{margin-left:2rem}ul li{padding:0 0 0.75rem 0}ol{margin-left:1.75rem}ol li{padding:0 0 0.75rem 0.25rem}ul li:last-child,ol li:last-child{padding-bottom:0}ul[class*=columns-] li:last-child,ol[class*=columns-] li:last-child{padding-bottom:0.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 2rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 1.75rem}p+ul,p+ol{margin-top:-0.75rem}@media screen and (min-width: 40em){ul{margin:0.5rem 0 1.5rem 3rem}ol{margin:0.5rem 0 1.5rem 2.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 3rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 2.75rem}}.ontario-alert{border-width:0 0 0 0.25rem;border-style:solid;padding:1.5rem;margin:2rem 0 2.5rem 0}.ontario-alert__header{display:-webkit-box;display:-ms-flexbox;display:flex}.ontario-alert__header-icon{display:inline-block;vertical-align:top;margin-right:0.95rem}.ontario-alert__header-title{margin-bottom:0.75rem;padding-top:0.125rem}.ontario-alert__body{margin-left:3.25rem;max-width:48rem}@media screen and (max-width: 40em){.ontario-alert__body{margin-left:0}}.ontario-alert__body p{margin-top:0}.ontario-alert__body p:last-of-type{margin-bottom:0.5rem}.ontario-alert__body p:last-of-type+ul{margin-top:1rem}.ontario-alert__body ul:last-of-type{margin-bottom:0.5rem}.ontario-alert--error ul{margin-left:1.25rem}.ontario-alert--error ul:last-of-type{margin-bottom:0.5rem}.ontario-alert--informational{border-color:#1080A6;background-color:#E2F0F4}.ontario-alert--warning{border-color:#FFD440;background-color:#FEF6DC}.ontario-alert--success{border-color:#118847;background-color:#E5f0E9}.ontario-alert--error{border-color:#CD0000;background-color:#FCEFF0}.ontario-alert--error a{color:#CD0000}.ontario-alert--error a:hover,.ontario-alert--error a:focus{color:#6b0000}.ontario-alert--error a:active{color:#280000}';
+
+const OntarioPageAlert$1 = /*@__PURE__*/ proxyCustomElement(
+	class OntarioPageAlert extends H {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			/**
+			 * The type of page alert to render. If no value is provided, the `informational` type alert would be rendered.
+			 *
+			 * There are four possible values for page alert: `informational`, `warning`, `success` or `error`.
+			 *
+			 * @example
+			 * <ontario-page-alert type="error">
+			 * </ontario-page-alert>
+			 */
+			this.type = 'informational';
+		}
+		validateType() {
+			const validTypes = ['informational', 'warning', 'success', 'error'];
+			const isValid = validateValueAgainstArray(this.type, validTypes);
+			if (!isValid) {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addMonospaceText(` type "${this.type}" `)
+					.addRegularText('for')
+					.addMonospaceText(' <ontario-page-alert> ')
+					.addRegularText('is not a valid type. Defaulting to "informational".')
+					.printMessage();
+			}
+		}
+		/**
+		 * @returns the classes of the page alert container based on the alert `type`.
+		 */
+		getClass() {
+			return `ontario-alert ontario-alert--${this.type}`;
+		}
+		renderIcon() {
+			const iconProps = { 'icon-width': 36 };
+			switch (this.type) {
+				case 'informational':
+					return h('ontario-icon-alert-information', Object.assign({}, iconProps));
+				case 'success':
+					return h('ontario-icon-alert-success', Object.assign({}, iconProps));
+				case 'warning':
+					return h('ontario-icon-alert-warning', Object.assign({}, iconProps));
+				case 'error':
+					return h('ontario-icon-alert-error', Object.assign({}, iconProps));
+			}
+		}
+		renderContent() {
+			if (this.content) {
+				return h('p', null, this.content);
+			}
+			return h('slot', null);
+		}
+		componentWillLoad() {
+			this.validateType();
+		}
+		render() {
+			return h(
+				'div',
+				{ key: '529a21573f8eae7ea70143dc84bf60909ac6b756', class: this.getClass() },
+				h(
+					'div',
+					{ key: '6a8bdab06f7e6a7787d04f44870706de3686a0aa', class: 'ontario-alert__header' },
+					h(
+						'div',
+						{
+							'key': '07328cb9b7ca9cdf87f0ceaedcb49b04ac4d6a99',
+							'class': 'ontario-alert__header-icon',
+							'aria-hidden': 'true',
+						},
+						this.renderIcon(),
+					),
+					h(
+						'h2',
+						{ key: 'c93544d619d908b3b51256ae1df65dcb6104f916', class: 'ontario-alert__header-title ontario-h4' },
+						this.heading,
+					),
+				),
+				h(
+					'div',
+					{ key: '778db3ff9c54164e4b6daf68b0d7cfd2c533ffd8', class: 'ontario-alert__body' },
+					this.renderContent(),
+				),
+			);
+		}
+		static get watchers() {
+			return {
+				type: ['validateType'],
+			};
+		}
+		static get style() {
+			return ontarioPageAlertCss;
+		}
+	},
+	[
+		257,
+		'ontario-page-alert',
+		{
+			type: [1],
+			heading: [1],
+			content: [1],
+		},
+		undefined,
+		{
+			type: ['validateType'],
+		},
+	],
+);
+function defineCustomElement$1() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = [
+		'ontario-page-alert',
+		'ontario-icon-alert-error',
+		'ontario-icon-alert-information',
+		'ontario-icon-alert-success',
+		'ontario-icon-alert-warning',
+	];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-page-alert':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioPageAlert$1);
+				}
+				break;
+			case 'ontario-icon-alert-error':
+				if (!customElements.get(tagName)) {
+					defineCustomElement$5();
+				}
+				break;
+			case 'ontario-icon-alert-information':
+				if (!customElements.get(tagName)) {
+					defineCustomElement$4();
+				}
+				break;
+			case 'ontario-icon-alert-success':
+				if (!customElements.get(tagName)) {
+					defineCustomElement$3();
+				}
+				break;
+			case 'ontario-icon-alert-warning':
+				if (!customElements.get(tagName)) {
+					defineCustomElement$2();
+				}
+				break;
+		}
+	});
+}
+defineCustomElement$1();
+
+const OntarioPageAlert = OntarioPageAlert$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { OntarioPageAlert, defineCustomElement };
+//# sourceMappingURL=ontario-page-alert.js.map
+
+//# sourceMappingURL=ontario-page-alert.js.map

package/components/ontario-page-alert.js.map

@@ -0,0 +1 @@
+{"file":"ontario-page-alert.js","mappings":";;;;;;;;AAAA,MAAM,mBAAmB,GAAG,0qKAA0qK;;MCUzrKA,kBAAgB,iBAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;AAL7B,IAAA,WAAA,GAAA;;;;AAMC;;;;;;;;AAQG;AACK,QAAA,IAAI,CAAA,IAAA,GAAkB,eAAe;AA4F7C;IAjEA,YAAY,GAAA;QACX,MAAM,UAAU,GAAoB,CAAC,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;QACpF,MAAM,OAAO,GAAG,yBAAyB,CAAC,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC;QAEhE,IAAI,CAAC,OAAO,EAAE;AACb,YAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;YACzC;AACE,iBAAA,kBAAkB;AAClB,iBAAA,gBAAgB,CAAC,CAAU,OAAA,EAAA,IAAI,CAAC,IAAI,IAAI;iBACxC,cAAc,CAAC,KAAK;iBACpB,gBAAgB,CAAC,wBAAwB;iBACzC,cAAc,CAAC,qDAAqD;AACpE,iBAAA,YAAY,EAAE;;;AAIlB;;AAEG;IACK,QAAQ,GAAA;AACf,QAAA,OAAO,CAAgC,6BAAA,EAAA,IAAI,CAAC,IAAI,EAAE;;IAGnD,UAAU,GAAA;AACT,QAAA,MAAM,SAAS,GAAG,EAAE,YAAY,EAAE,EAAE,EAAE;AAEtC,QAAA,QAAQ,IAAI,CAAC,IAAI;AAChB,YAAA,KAAK,eAAe;AACnB,gBAAA,OAAO,CAAA,CAAA,gCAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAoC,SAAS,CAAA,CAAI;AAEzD,YAAA,KAAK,SAAS;AACb,gBAAA,OAAO,CAAA,CAAA,4BAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAgC,SAAS,CAAA,CAAI;AAErD,YAAA,KAAK,SAAS;AACb,gBAAA,OAAO,CAAA,CAAA,4BAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAgC,SAAS,CAAA,CAAI;AAErD,YAAA,KAAK,OAAO;AACX,gBAAA,OAAO,CAAA,CAAA,0BAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAA8B,SAAS,CAAA,CAAI;;;IAIrD,aAAa,GAAA;AACZ,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YACjB,OAAO,CAAI,CAAA,GAAA,EAAA,IAAA,EAAA,IAAI,CAAC,OAAO,CAAK;;AAE7B,QAAA,OAAO,eAAQ;;IAGhB,iBAAiB,GAAA;QAChB,IAAI,CAAC,YAAY,EAAE;;IAGpB,MAAM,GAAA;QACL,QACC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAA,EAC1B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EACjC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,4BAA4B,EAAa,aAAA,EAAA,MAAM,IACxD,IAAI,CAAC,UAAU,EAAE,CACb,EACN,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wCAAwC,EAAA,EAAE,IAAI,CAAC,OAAO,CAAM,CACjE,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAE,EAAA,IAAI,CAAC,aAAa,EAAE,CAAO,CACxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioPageAlert","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-page-alert/ontario-page-alert.scss?tag=ontario-page-alert&encapsulation=shadow","src/components/ontario-page-alert/ontario-page-alert.tsx"],"sourcesContent":["@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as\n\tglobalFunctions;\n@forward 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';\n\n$ontario-alert-link-focus: #6b0000;\n$ontario-alert-link-active: #280000;\n\n.ontario-alert {\n\tborder-width: 0 0 0 globalFunctions.px-to-rem(4);\n\tborder-style: solid;\n\tpadding: spacing.$spacing-5;\n\tmargin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-0;\n}\n\n.ontario-alert__header {\n\tdisplay: -webkit-box;\n\tdisplay: -ms-flexbox;\n\tdisplay: flex;\n}\n\n.ontario-alert__header-icon {\n\tdisplay: inline-block;\n\tvertical-align: top;\n\tmargin-right: 0.95rem;\n}\n\n.ontario-alert__header-title {\n\tmargin-bottom: spacing.$spacing-3;\n\tpadding-top: globalFunctions.px-to-rem(2);\n}\n\n.ontario-alert__body {\n\tmargin-left: 3.25rem;\n\tmax-width: globalVariables.$standard-width;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-left: spacing.$spacing-0;\n\t}\n}\n\n.ontario-alert__body p {\n\tmargin-top: spacing.$spacing-0;\n\n\t&:last-of-type {\n\t\tmargin-bottom: spacing.$spacing-2;\n\t}\n}\n\n.ontario-alert__body p:last-of-type + ul {\n\tmargin-top: spacing.$spacing-4;\n}\n\n.ontario-alert__body ul:last-of-type {\n\tmargin-bottom: spacing.$spacing-2;\n}\n\n.ontario-alert--error ul {\n\tmargin-left: 1.25rem;\n}\n\n.ontario-alert--error ul:last-of-type {\n\tmargin-bottom: spacing.$spacing-2;\n}\n\n// ---------------------\n//    Alert variations\n// ---------------------\n// informational alert\n.ontario-alert--informational {\n\tborder-color: colours.$ontario-colour-information;\n\tbackground-color: colours.$ontario-colour-information-light;\n}\n\n// warning alert\n.ontario-alert--warning {\n\tborder-color: colours.$ontario-colour-warning;\n\tbackground-color: colours.$ontario-colour-warning-light;\n}\n\n// success alert\n.ontario-alert--success {\n\tborder-color: colours.$ontario-colour-success;\n\tbackground-color: colours.$ontario-colour-success-light;\n}\n\n// error alert\n.ontario-alert--error {\n\tborder-color: colours.$ontario-colour-alert;\n\tbackground-color: colours.$ontario-colour-alert-light;\n}\n\n.ontario-alert--error a {\n\tcolor: colours.$ontario-colour-alert;\n\n\t&:hover,\n\t&:focus {\n\t\tcolor: $ontario-alert-link-focus;\n\t}\n\n\t&:active {\n\t\tcolor: $ontario-alert-link-active;\n\t}\n}\n","import { Component, h, Prop, Watch } from '@stencil/core';\nimport { PageAlert, PageAlertType } from './ontario-page-alert.interface';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-page-alert',\n\tstyleUrl: 'ontario-page-alert.scss',\n\tshadow: true,\n})\nexport class OntarioPageAlert implements PageAlert {\n\t/**\n\t * The type of page alert to render. If no value is provided, the `informational` type alert would be rendered.\n\t *\n\t * There are four possible values for page alert: `informational`, `warning`, `success` or `error`.\n\t *\n\t * @example\n\t * <ontario-page-alert type=\"error\">\n\t * </ontario-page-alert>\n\t */\n\t@Prop() type: PageAlertType = 'informational';\n\n\t/**\n\t * The heading for the page alert.\n\t *\n\t * @example\n\t * <ontario-page-alert heading=\"Licence plates\">\n\t * </ontario-page-alert>\n\t */\n\t@Prop() heading: string;\n\n\t/**\n\t * The main content for the page alert. This can be rendered as either string or HTML content.\n\t *\n\t * @example\n\t * <ontario-page-alert content=\"Please look out for an email confirmation with your receipt and order number.\">\n\t * </ontario-page-alert>\n\t *\n\t * or\n\t *\n\t * <ontario-page-alert>\n\t *  <p>This is a sample page alert component using slots. <a href=\"#\">Learn more</a>.</p>\n\t * </ontario-page-alert>\n\t */\n\t@Prop() content: string;\n\n\t@Watch('type')\n\tvalidateType() {\n\t\tconst validTypes: PageAlertType[] = ['informational', 'warning', 'success', 'error'];\n\t\tconst isValid = validateValueAgainstArray(this.type, validTypes);\n\n\t\tif (!isValid) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(` type \"${this.type}\" `)\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-page-alert> ')\n\t\t\t\t.addRegularText('is not a valid type. Defaulting to \"informational\".')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * @returns the classes of the page alert container based on the alert `type`.\n\t */\n\tprivate getClass() {\n\t\treturn `ontario-alert ontario-alert--${this.type}`;\n\t}\n\n\trenderIcon() {\n\t\tconst iconProps = { 'icon-width': 36 };\n\n\t\tswitch (this.type) {\n\t\t\tcase 'informational':\n\t\t\t\treturn <ontario-icon-alert-information {...iconProps} />;\n\n\t\t\tcase 'success':\n\t\t\t\treturn <ontario-icon-alert-success {...iconProps} />;\n\n\t\t\tcase 'warning':\n\t\t\t\treturn <ontario-icon-alert-warning {...iconProps} />;\n\n\t\t\tcase 'error':\n\t\t\t\treturn <ontario-icon-alert-error {...iconProps} />;\n\t\t}\n\t}\n\n\trenderContent() {\n\t\tif (this.content) {\n\t\t\treturn <p>{this.content}</p>;\n\t\t}\n\t\treturn <slot />;\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateType();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class={this.getClass()}>\n\t\t\t\t<div class=\"ontario-alert__header\">\n\t\t\t\t\t<div class=\"ontario-alert__header-icon\" aria-hidden=\"true\">\n\t\t\t\t\t\t{this.renderIcon()}\n\t\t\t\t\t</div>\n\t\t\t\t\t<h2 class=\"ontario-alert__header-title ontario-h4\">{this.heading}</h2>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"ontario-alert__body\">{this.renderContent()}</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}

package/components/ontario-radio-buttons.d.ts

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