@ongov/ontario-design-system-component-library 4.2.0-alpha.1

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

@@ -0,0 +1,168 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { v as validateLanguage, a as validateValueAgainstArray } from './validation-functions.js';
+import { C as ConsoleMessageClass } from './console-message.js';
+import { t as translations } from './global.i18n.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:#4d4d4d;font-family:"Raleway", "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:#4d4d4d;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 OntarioLoadingIndicatorStyle0 = ontarioLoadingIndicatorCss;
+
+const OntarioLoadingIndicator$1 = /*@__PURE__*/ proxyCustomElement(
+	class OntarioLoadingIndicator extends HTMLElement {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			this.type = 'large';
+			this.isLoading = false;
+			this.message = undefined;
+			this.fullScreenOverlay = true;
+			this.language = undefined;
+			this.translations = translations;
+			this.isLoadingState = undefined;
+			this.typeState = undefined;
+		}
+		/**
+		 * 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);
+			}
+		}
+		handleHeaderLanguageToggled(event) {
+			this.language = validateLanguage(event);
+		}
+		/**
+		 * 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',
+								},
+								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 OntarioLoadingIndicatorStyle0;
+		}
+	},
+	[
+		1,
+		'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;
+		}
+	});
+}
+
+const OntarioLoadingIndicator = OntarioLoadingIndicator$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { OntarioLoadingIndicator, defineCustomElement };
+
+//# sourceMappingURL=ontario-loading-indicator.js.map

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

@@ -0,0 +1 @@
+{"file":"ontario-loading-indicator.js","mappings":";;;;;AAAA,MAAM,0BAA0B,GAAG,i7CAAi7C,CAAC;AACr9C,sCAAe,0BAA0B;;MCY5BA,yBAAuB;;;;;oBAID,OAAO;yBAKZ,KAAK;;iCAeI,IAAI;;4BAQb,YAAY;;;;;;;IAYzC,oBAAoB,CAAC,KAA4B;QAChD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YACnB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;SACxC;KACD;IAGD,2BAA2B,CAAC,KAA4B;QACvD,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;KACxC;;;;IAMD,gBAAgB,CAAC,YAAqB;QACrC,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC;KACnC;;;;;;;IASD,YAAY;QACX,MAAM,OAAO,GAAG,yBAAyB,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;QACzE,IAAI,OAAO,EAAE;YACZ,QAAQ,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,EAAE;SACpC;aAAM;YACN,IAAI,CAAC,eAAe,EAAE,CAAC;YACvB,QAAQ,IAAI,CAAC,SAAS,GAAG,OAAO,EAAE;SAClC;KACD;;;;;IAMO,eAAe;QACtB,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;QAC1C,OAAO;aACL,kBAAkB,EAAE;aACpB,gBAAgB,CAAC,QAAQ,CAAC;aAC1B,cAAc,CAAC,IAAI,CAAC;aACpB,gBAAgB,CAAC,+BAA+B,CAAC;aACjD,cAAc,CAAC,kCAAkC,CAAC;aAClD,gBAAgB,CAAC,kBAAkB,CAAC;aACpC,cAAc,CAAC,iCAAiC,CAAC;aACjD,gBAAgB,CAAC,SAAS,CAAC;aAC3B,cAAc,CAAC,aAAa,CAAC;aAC7B,YAAY,EAAE,CAAC;KACjB;IAED,iBAAiB;QAChB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAChD,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC;KACrC;IAED,MAAM;;QACL,OAAO,IAAI,CAAC,SAAS,KAAK,OAAO,IAChC,WACC,KAAK,EACJ,IAAI,CAAC,iBAAiB;kBACnB,oCAAoC;kBACpC,sDAAsD,iBAE7C,IAAI,CAAC,cAAc,GAAG,OAAO,GAAG,MAAM,EACnD,IAAI,EAAC,OAAO,eACF,WAAW,IAErB,WAAK,KAAK,EAAC,2BAA2B,IACrC,WAAK,KAAK,EAAC,oCAAoC,EAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAC,4BAA4B,IACvG,cAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,kBAAc,GAAG,GAAG,CACzD,EACN,aAAI,MAAA,IAAI,CAAC,OAAO,mCAAI,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAK,CACjE,CACD,KAEN,uEAA8D,CAC9D,CAAC;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioLoadingIndicator"],"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 '@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/typography.variables' as typography;\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/line-heights.variables' as lineHeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\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: typography.$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';\n\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@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t/**\n\t * Watch for changes 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 class=\"ontario-loading-indicator__spinner\" viewBox=\"25 25 50 50\" xmlns=\"http://www.w3.org/2000/svg\">\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/dist/components/ontario-page-alert.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from '../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/dist/components/ontario-page-alert.js

@@ -0,0 +1,133 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$5 } from './ontario-icon-alert-error2.js';
+import { d as defineCustomElement$4 } from './ontario-icon-alert-information2.js';
+import { d as defineCustomElement$3 } from './ontario-icon-alert-success2.js';
+import { d as defineCustomElement$2 } from './ontario-icon-alert-warning2.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", "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:#1a1a1a;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 #1a1a1a}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 OntarioPageAlertStyle0 = ontarioPageAlertCss;
+
+const OntarioPageAlert$1 = /*@__PURE__*/ proxyCustomElement(
+	class OntarioPageAlert extends HTMLElement {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			this.type = 'informational';
+			this.heading = undefined;
+			this.content = undefined;
+		}
+		/**
+		 * @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() {
+			const body = this.content;
+			if (typeof body === 'string') {
+				return h('p', null, body);
+			}
+			return h('slot', null);
+		}
+		render() {
+			return h(
+				'div',
+				{ key: '8d9ce139b254b12b7b718695fa033ca38370a49c', class: this.getClass() },
+				h(
+					'div',
+					{ key: '1a64f71f87f6f21da11d9354f800a2bcb4ddbeda', class: 'ontario-alert__header' },
+					h(
+						'div',
+						{ key: '1a5566b6f44fa1fbf8a6358d9670bd9d85ebf569', class: 'ontario-alert__header-icon' },
+						this.renderIcon(),
+					),
+					h(
+						'h2',
+						{ key: '19f4f2ae3faa8b8c9ab1281b46b653d2b2a43d46', class: 'ontario-alert__header-title ontario-h4' },
+						this.heading,
+					),
+				),
+				h(
+					'div',
+					{ key: 'cebd1ecddd5419b454dcd36512dbc4e1a3dcb684', class: 'ontario-alert__body' },
+					this.renderContent(),
+				),
+			);
+		}
+		static get style() {
+			return OntarioPageAlertStyle0;
+		}
+	},
+	[
+		1,
+		'ontario-page-alert',
+		{
+			type: [1],
+			heading: [1],
+			content: [1],
+		},
+	],
+);
+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;
+		}
+	});
+}
+
+const OntarioPageAlert = OntarioPageAlert$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { OntarioPageAlert, defineCustomElement };
+
+//# sourceMappingURL=ontario-page-alert.js.map

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

@@ -0,0 +1 @@
+{"file":"ontario-page-alert.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,qoKAAqoK,CAAC;AAClqK,+BAAe,mBAAmB;;MCOrBA,kBAAgB;;;;;oBAUE,eAAe;;;;;;;IA6BrC,QAAQ;QACf,OAAO,gCAAgC,IAAI,CAAC,IAAI,EAAE,CAAC;KACnD;IAED,UAAU;QACT,MAAM,SAAS,GAAG,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;QAEvC,QAAQ,IAAI,CAAC,IAAI;YAChB,KAAK,eAAe;gBACnB,OAAO,sDAAoC,SAAS,EAAI,CAAC;YAE1D,KAAK,SAAS;gBACb,OAAO,kDAAgC,SAAS,EAAI,CAAC;YAEtD,KAAK,SAAS;gBACb,OAAO,kDAAgC,SAAS,EAAI,CAAC;YAEtD,KAAK,OAAO;gBACX,OAAO,gDAA8B,SAAS,EAAI,CAAC;SACpD;KACD;IAED,aAAa;QACZ,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC;QAE1B,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;YAC7B,OAAO,aAAI,IAAI,CAAK,CAAC;SACrB;QAED,OAAO,eAAQ,CAAC;KAChB;IAED,MAAM;QACL,QACC,4DAAK,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAC1B,4DAAK,KAAK,EAAC,uBAAuB,IACjC,4DAAK,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,UAAU,EAAE,CAAO,EACjE,2DAAI,KAAK,EAAC,wCAAwC,IAAE,IAAI,CAAC,OAAO,CAAM,CACjE,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,aAAa,EAAE,CAAO,CACxD,EACL;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioPageAlert"],"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 '@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/functions/global.functions' as globalFunctions;\n@forward '@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 } from '@stencil/core';\nimport { PageAlert, PageAlertType } from './ontario-page-alert.interface';\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/**\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\tconst body = this.content;\n\n\t\tif (typeof body === 'string') {\n\t\t\treturn <p>{body}</p>;\n\t\t}\n\n\t\treturn <slot />;\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\">{this.renderIcon()}</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/dist/components/ontario-radio-buttons.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from '../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;