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

package/dist/components/ontario-back-to-top.d.ts

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

package/dist/components/ontario-back-to-top.js

@@ -0,0 +1,110 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { v as validateLanguage } from './validation-functions.js';
+import { t as translations } from './global.i18n.js';
+
+const OntarioIconArrowUp = `<svg class="ontario-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>
+`;
+
+const ontarioBackToTopCss =
+	'.ontario-back-to-top,.ontario-back-to-top--default{position:fixed;bottom:5%;right:2%;visibility:hidden;opacity:0;transition:0.1s ease-in-out;display:flex;justify-content:center;align-items:center;height:3rem;padding:0.5rem 1rem 0.5rem 0.75rem;background:#e6e6e6;border:0.125rem solid #FFFFFF;border-radius:4px;box-shadow:0 0.125rem 0.25rem rgba(26, 26, 26, 0.6);box-sizing:border-box;color:#1a1a1a;line-height:1.25rem;font-size:1rem;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:600;z-index:10000;cursor:pointer}.ontario-back-to-top .ontario-icon,.ontario-back-to-top--default .ontario-icon{margin:0.125rem 0.5rem 0 0;width:2rem;height:2rem}.ontario-back-to-top:hover,.ontario-back-to-top--default:hover{background-color:#cccccc}.ontario-back-to-top:focus,.ontario-back-to-top--default:focus{background-color:#e6e6e6;box-shadow:0 0 0 0.25rem #009ADB, 0 0.1875rem 0.3125rem 0.1875rem rgba(0, 0, 0, 0.6);outline:0.25rem solid transparent;transition:0.1s ease-in-out}.ontario-back-to-top:active,.ontario-back-to-top--default:active{background-color:#b2b2b2;box-shadow:0 0 0 0.25rem #009ADB, 0 0.3125rem 0.4375rem 0.1875rem rgba(0, 0, 0, 0.6);outline:0.25rem solid transparent;transition:background-color 0s, box-shadow 0.1s ease-in-out}@media screen and (max-width: 73em){.ontario-back-to-top,.ontario-back-to-top--default{flex-direction:column;height:4.75rem;padding:0.375rem 0.75rem 0.5625rem 0.75rem}.ontario-back-to-top .ontario-icon,.ontario-back-to-top--default .ontario-icon{margin:0.0625rem 0 0.25rem 0;width:2rem;height:2rem}}@media screen and (max-width: 40em){.ontario-back-to-top,.ontario-back-to-top--default{display:block;padding:0.25rem;font-size:0;width:3rem;height:3rem}.ontario-back-to-top .ontario-icon,.ontario-back-to-top--default .ontario-icon{margin:0.5rem 0 0 0}@-moz-document url-prefix(){.ontario-back-to-top .ontario-icon,.ontario-back-to-top--default .ontario-icon{margin-top:0.125rem}}}.ontario-back-to-top.active,.ontario-back-to-top--default.active{visibility:visible;opacity:1}';
+const OntarioBackToTopStyle0 = ontarioBackToTopCss;
+
+const OntarioBackToTop$1 = /*@__PURE__*/ proxyCustomElement(
+	class OntarioBackToTop extends HTMLElement {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			this.language = undefined;
+			this.translations = translations;
+			this.displayBackToTop = false;
+			this.scrollYValue = 200;
+		}
+		/**
+		 * This listens for the window Y scroll value to be above 200 pixels. Once it is, the Back to Top button will toggle the `displayBackToTop` state which will set an active class to control the components' visibility.
+		 */
+		showBackToTopButton() {
+			this.displayBackToTop = window.scrollY > this.scrollYValue;
+		}
+		/**
+		 * 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);
+		}
+		/**
+		 * Scroll to top functionality when the Back to Top button is clicked
+		 */
+		scrollToTop() {
+			window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+		}
+		componentWillLoad() {
+			this.language = validateLanguage(this.language);
+		}
+		render() {
+			return h(
+				'button',
+				{
+					'key': '28f085a23b68bb74b8874d03c900775fe5868ae7',
+					'class': this.displayBackToTop ? `ontario-back-to-top active` : `ontario-back-to-top`,
+					'onClick': this.scrollToTop,
+					'aria-label': this.translations.backToTop.ariaLabel[`${this.language}`],
+				},
+				h('span', {
+					'key': '8f88357f7064378065119f52bfc7a081318094da',
+					'aria-hidden': 'true',
+					'innerHTML': OntarioIconArrowUp,
+				}),
+				this.translations.backToTop.top[`${this.language}`],
+			);
+		}
+		get element() {
+			return this;
+		}
+		static get style() {
+			return OntarioBackToTopStyle0;
+		}
+	},
+	[
+		1,
+		'ontario-back-to-top',
+		{
+			language: [1025],
+			translations: [32],
+			displayBackToTop: [32],
+			scrollYValue: [32],
+		},
+		[
+			[9, 'scroll', 'showBackToTopButton'],
+			[8, 'setAppLanguage', 'handleSetAppLanguage'],
+			[8, 'headerLanguageToggled', 'handleHeaderLanguageToggled'],
+		],
+	],
+);
+function defineCustomElement$1() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = ['ontario-back-to-top'];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-back-to-top':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioBackToTop$1);
+				}
+				break;
+		}
+	});
+}
+
+const OntarioBackToTop = OntarioBackToTop$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { OntarioBackToTop, defineCustomElement };
+
+//# sourceMappingURL=ontario-back-to-top.js.map

package/dist/components/ontario-back-to-top.js.map

@@ -0,0 +1 @@
+{"file":"ontario-back-to-top.js","mappings":";;;;;;;AAAA,MAAM,mBAAmB,GAAG,kgEAAkgE,CAAC;AAC/hE,+BAAe,mBAAmB;;MCYrBA,kBAAgB;;;;;;4BASC,YAAY;gCAEI,KAAK;4BAEV,GAAG;;;;;IAM3C,mBAAmB;QAClB,IAAI,CAAC,gBAAgB,GAAG,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC;KAC3D;;;;IAMD,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;;;;IAKO,WAAW;QAClB,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;KACzD;IAED,iBAAiB;QAChB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAChD;IAED,MAAM;QACL,QACC,+DACC,KAAK,EAAE,IAAI,CAAC,gBAAgB,GAAG,4BAA4B,GAAG,qBAAqB,EACnF,OAAO,EAAE,IAAI,CAAC,WAAW,gBACb,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,IAErE,4EAAkB,MAAM,EAAC,SAAS,EAAE,kBAAkB,GAAS,EAC9D,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAC5C,EACR;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioBackToTop"],"sources":["src/components/ontario-back-to-top/ontario-back-to-top.scss?tag=ontario-back-to-top&encapsulation=shadow","src/components/ontario-back-to-top/ontario-back-to-top.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/1-variables/typography.variables' as typography;\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/font-sizes.variables' as fontSizes;\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/2-tools/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\n\n$ontario-icon-margin-top: 0.125rem;\n\n// Colour variables\n$ontario-colour-back-to-top-background: #e6e6e6;\n$ontario-colour-back-to-top--active-background: #b2b2b2;\n\n.ontario-back-to-top,\n// Fractal component style coverage ↓\n.ontario-back-to-top--default {\n\tposition: fixed;\n\tbottom: 5%;\n\tright: 2%;\n\tvisibility: hidden;\n\topacity: 0;\n\ttransition: 0.1s ease-in-out;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\theight: globalFunctions.px-to-rem(48);\n\tpadding: spacing.$spacing-2 spacing.$spacing-4 spacing.$spacing-2 spacing.$spacing-3;\n\tbackground: $ontario-colour-back-to-top-background;\n\tborder: globalFunctions.px-to-rem(2) solid colours.$ontario-colour-white;\n\tborder-radius: globalVariables.$global-radius;\n\tbox-shadow: 0 globalFunctions.px-to-rem(2) globalFunctions.px-to-rem(4) rgba(colours.$ontario-colour-black, 0.6);\n\tbox-sizing: border-box;\n\tcolor: colours.$ontario-colour-black;\n\tline-height: globalFunctions.px-to-rem(20);\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tfont-family: typography.$ontario-font-open-sans;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tz-index: 10000;\n\tcursor: pointer;\n\n\t.ontario-icon {\n\t\tmargin: $ontario-icon-margin-top spacing.$spacing-2 spacing.$spacing-0 spacing.$spacing-0;\n\t\twidth: globalFunctions.px-to-rem(32);\n\t\theight: globalFunctions.px-to-rem(32);\n\t}\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-20;\n\t}\n\n\t&:focus {\n\t\tbackground-color: $ontario-colour-back-to-top-background;\n\t\tbox-shadow: 0 0 0 globalFunctions.px-to-rem(4) colours.$ontario-colour-focus,\n\t\t\t0 globalFunctions.px-to-rem(3) globalFunctions.px-to-rem(5) globalFunctions.px-to-rem(3) rgba(0, 0, 0, 0.6);\n\t\toutline: globalFunctions.px-to-rem(4) solid transparent;\n\t\ttransition: 0.1s ease-in-out;\n\t}\n\n\t&:active {\n\t\tbackground-color: $ontario-colour-back-to-top--active-background;\n\t\tbox-shadow: 0 0 0 globalFunctions.px-to-rem(4) colours.$ontario-colour-focus,\n\t\t\t0 globalFunctions.px-to-rem(5) globalFunctions.px-to-rem(7) globalFunctions.px-to-rem(3) rgba(0, 0, 0, 0.6);\n\t\toutline: globalFunctions.px-to-rem(4) solid transparent;\n\t\ttransition: background-color 0s, focusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\tflex-direction: column;\n\t\theight: globalFunctions.px-to-rem(76);\n\t\tpadding: globalFunctions.px-to-rem(6) spacing.$spacing-3 globalFunctions.px-to-rem(9) spacing.$spacing-3;\n\n\t\t.ontario-icon {\n\t\t\tmargin: globalFunctions.px-to-rem(1) spacing.$spacing-0 spacing.$spacing-1 spacing.$spacing-0;\n\t\t\twidth: globalFunctions.px-to-rem(32);\n\t\t\theight: globalFunctions.px-to-rem(32);\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tdisplay: block;\n\t\tpadding: spacing.$spacing-1;\n\t\tfont-size: 0;\n\t\twidth: globalFunctions.px-to-rem(48);\n\t\theight: globalFunctions.px-to-rem(48);\n\n\t\t.ontario-icon {\n\t\t\tmargin: spacing.$spacing-2 spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-0;\n\n\t\t\t@-moz-document url-prefix() {\n\t\t\t\tmargin-top: $ontario-icon-margin-top;\n\t\t\t}\n\t\t}\n\t}\n\n\t&.active {\n\t\tvisibility: visible;\n\t\topacity: 1;\n\t}\n}\n","import { Component, h, Element, Prop, Listen, State } from '@stencil/core';\n\nimport OntarioIconArrowUp from '../ontario-icon/assets/ontario-icon-arrow-up.svg';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\n\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-back-to-top',\n\tstyleUrl: 'ontario-back-to-top.scss',\n\tshadow: true,\n})\nexport class OntarioBackToTop {\n\t@Element() element: HTMLElement;\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 prop 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@State() private displayBackToTop: boolean = false;\n\n\t@State() private scrollYValue: number = 200;\n\n\t/**\n\t * This listens for the window Y scroll value to be above 200 pixels. Once it is, the Back to Top button will toggle the `displayBackToTop` state which will set an active class to control the components' visibility.\n\t */\n\t@Listen('scroll', { target: 'window' })\n\tshowBackToTopButton() {\n\t\tthis.displayBackToTop = window.scrollY > this.scrollYValue;\n\t}\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 * Scroll to top functionality when the Back to Top button is clicked\n\t */\n\tprivate scrollToTop() {\n\t\twindow.scrollTo({ top: 0, left: 0, behavior: 'smooth' });\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<button\n\t\t\t\tclass={this.displayBackToTop ? `ontario-back-to-top active` : `ontario-back-to-top`}\n\t\t\t\tonClick={this.scrollToTop}\n\t\t\t\taria-label={this.translations.backToTop.ariaLabel[`${this.language}`]}\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\" innerHTML={OntarioIconArrowUp}></span>\n\t\t\t\t{this.translations.backToTop.top[`${this.language}`]}\n\t\t\t</button>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/ontario-blockquote.d.ts

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

package/dist/components/ontario-blockquote.js

@@ -0,0 +1,135 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { b as validatePropExists } from './validation-functions.js';
+import { C as ConsoleMessageClass } from './console-message.js';
+
+const ontarioBlockquoteCss =
+	'@charset "UTF-8";.ontario-blockquote{border-left:4px solid #4d4d4d;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1.1875rem;font-weight:400;letter-spacing:0.025rem;line-height:1.56;max-width:48rem;margin:2rem;padding:1.5rem 0 1.5rem 1.5rem;quotes:"“" "”"}@media screen and (max-width: 40em){.ontario-blockquote{font-size:1.125rem;letter-spacing:0.03rem;line-height:1.5;margin:1.5rem 0 2rem 0}}.ontario-blockquote p{margin:0 0 1.5rem 0}.ontario-blockquote p::before{content:open-quote}.ontario-blockquote p::after{content:close-quote}.ontario-blockquote--short{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.5}@media screen and (max-width: 40em){.ontario-blockquote--short{font-size:1.4375rem;line-height:1.43}}.ontario-blockquote__attribution,.ontario-blockquote__byline{display:block;font-size:1rem;letter-spacing:0.025rem;line-height:1.56;text-align:right}@media screen and (max-width: 40em){.ontario-blockquote__attribution,.ontario-blockquote__byline{letter-spacing:0.03rem;line-height:1.5}}.ontario-blockquote__attribution{font-style:normal;font-weight:700}.ontario-blockquote__attribution::before{content:"— "}html[lang=fr] blockquote{quotes:"« " " »"}';
+const OntarioBlockquoteStyle0 = ontarioBlockquoteCss;
+
+const OntarioBlockquote$1 = /*@__PURE__*/ proxyCustomElement(
+	class OntarioBlockquote extends HTMLElement {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			this.quote = undefined;
+			this.attribution = undefined;
+			this.byline = undefined;
+			this.shortQuoteLength = 140;
+			this.shortQuote = false;
+			this.quoteState = undefined;
+		}
+		/*
+		 * Watch for changes in the `quote` prop for validation purposes.
+		 *
+		 * If the `quote` prop is not provided, set the `quote` prop to the host textContent (if it exists).
+		 * If the `quote` prop length is 140 characters or less, set the `shortQuote` state to true - this will add additonal classes for the blockquote styles.
+		 */
+		validateQuote() {
+			var _a, _b, _c, _d;
+			this.quoteState =
+				(_b = (_a = this.quote) !== null && _a !== void 0 ? _a : this.host.textContent) !== null && _b !== void 0
+					? _b
+					: '';
+			this.validateQuoteContent(this.quoteState);
+			this.shortQuote =
+				(_d = ((_c = this.quoteState) === null || _c === void 0 ? void 0 : _c.length) <= this.shortQuoteLength) !==
+					null && _d !== void 0
+					? _d
+					: true;
+		}
+		/**
+		 * Print the missing `quote` prop warning message
+		 */
+		validateQuoteContent(newValue) {
+			if (validatePropExists(newValue)) {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addMonospaceText(' quote ')
+					.addRegularText('for')
+					.addMonospaceText(' <ontario-blockquote> ')
+					.addRegularText('was not provided')
+					.printMessage();
+			}
+		}
+		componentWillLoad() {
+			this.validateQuote();
+		}
+		/**
+		 * This helper is used to help load translations for any slots + text content passed in by the user.
+		 */
+		componentDidLoad() {
+			const observer = new MutationObserver((mutations) => {
+				mutations.forEach((mutation) => {
+					if (mutation.type === 'attributes') {
+						this.validateQuote();
+					}
+				});
+			});
+			const options = { attributes: true };
+			observer.observe(this.host, options);
+		}
+		render() {
+			return h(
+				'blockquote',
+				{
+					key: '10d7b83d6b3984b8b321c9757fb6fb5ffca89ee3',
+					class: this.shortQuote ? `ontario-blockquote ontario-blockquote--short` : `ontario-blockquote`,
+				},
+				h('p', { key: '6b557c47534fb2c50f0f7eb31967bc21f4969043' }, this.quoteState),
+				this.attribution && h('cite', { class: 'ontario-blockquote__attribution' }, this.attribution),
+				this.byline && h('cite', { class: 'ontario-blockquote__byline' }, this.byline),
+			);
+		}
+		get host() {
+			return this;
+		}
+		static get watchers() {
+			return {
+				quote: ['validateQuote'],
+			};
+		}
+		static get style() {
+			return OntarioBlockquoteStyle0;
+		}
+	},
+	[
+		1,
+		'ontario-blockquote',
+		{
+			quote: [1025],
+			attribution: [1],
+			byline: [1],
+			shortQuoteLength: [32],
+			shortQuote: [32],
+			quoteState: [32],
+		},
+		undefined,
+		{
+			quote: ['validateQuote'],
+		},
+	],
+);
+function defineCustomElement$1() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = ['ontario-blockquote'];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-blockquote':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioBlockquote$1);
+				}
+				break;
+		}
+	});
+}
+
+const OntarioBlockquote = OntarioBlockquote$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { OntarioBlockquote, defineCustomElement };
+
+//# sourceMappingURL=ontario-blockquote.js.map

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

@@ -0,0 +1 @@
+{"file":"ontario-blockquote.js","mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,gtCAAgtC,CAAC;AAC9uC,gCAAe,oBAAoB;;MCWtBA,mBAAiB;;;;;;;;gCAoBO,GAAG;0BAER,KAAK;;;;;;;;;IAWpC,aAAa;;QACZ,IAAI,CAAC,UAAU,GAAG,MAAA,MAAA,IAAI,CAAC,KAAK,mCAAI,IAAI,CAAC,IAAI,CAAC,WAAW,mCAAI,EAAE,CAAC;QAC5D,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC3C,IAAI,CAAC,UAAU,GAAG,MAAA,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,KAAI,IAAI,CAAC,gBAAgB,mCAAI,IAAI,CAAC;KAC3E;;;;IAKD,oBAAoB,CAAC,QAAgB;QACpC,IAAI,kBAAkB,CAAC,QAAQ,CAAC,EAAE;YACjC,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,SAAS,CAAC;iBAC3B,cAAc,CAAC,KAAK,CAAC;iBACrB,gBAAgB,CAAC,wBAAwB,CAAC;iBAC1C,cAAc,CAAC,kBAAkB,CAAC;iBAClC,YAAY,EAAE,CAAC;SACjB;KACD;IAED,iBAAiB;QAChB,IAAI,CAAC,aAAa,EAAE,CAAC;KACrB;;;;IAKD,gBAAgB;QACf,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,CAAC,SAAS;YAC/C,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ;gBAC1B,IAAI,QAAQ,CAAC,IAAI,KAAK,YAAY,EAAE;oBACnC,IAAI,CAAC,aAAa,EAAE,CAAC;iBACrB;aACD,CAAC,CAAC;SACH,CAAC,CAAC;QAEH,MAAM,OAAO,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC;QACrC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;KACrC;IAED,MAAM;QACL,QACC,mEAAY,KAAK,EAAE,IAAI,CAAC,UAAU,GAAG,8CAA8C,GAAG,oBAAoB,IACzG,4DAAI,IAAI,CAAC,UAAU,CAAK,EACvB,IAAI,CAAC,WAAW,IAAI,YAAM,KAAK,EAAC,iCAAiC,IAAE,IAAI,CAAC,WAAW,CAAQ,EAC3F,IAAI,CAAC,MAAM,IAAI,YAAM,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,MAAM,CAAQ,CACjE,EACZ;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioBlockquote"],"sources":["src/components/ontario-blockquote/ontario-blockquote.scss?tag=ontario-blockquote&encapsulation=shadow","src/components/ontario-blockquote/ontario-blockquote.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/1-variables/typography.variables' as typography;\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/1-variables/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n\n.ontario-blockquote {\n\tborder-left: 4px solid colours.$ontario-greyscale-70;\n\tfont-family: typography.$ontario-font-raleway-modified;\n\tfont-size: globalFunctions.px-to-rem(19);\n\tfont-weight: fontWeights.$ontario-font-weights-normal;\n\tletter-spacing: 0.025rem;\n\tline-height: lineHeights.$ontario-line-height-8;\n\tmax-width: globalVariables.$standard-width;\n\tmargin: spacing.$spacing-6;\n\tpadding: spacing.$spacing-5 0 spacing.$spacing-5 spacing.$spacing-5;\n\tquotes: '\\201C''\\201D';\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tfont-size: globalFunctions.px-to-rem(18);\n\t\tletter-spacing: 0.03rem;\n\t\tline-height: lineHeights.$ontario-line-height-7;\n\t\tmargin: spacing.$spacing-5 spacing.$spacing-0 spacing.$spacing-6 spacing.$spacing-0;\n\t}\n}\n\n.ontario-blockquote p {\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-5 spacing.$spacing-0;\n\n\t&::before {\n\t\tcontent: open-quote;\n\t}\n\n\t&::after {\n\t\tcontent: close-quote;\n\t}\n}\n\n.ontario-blockquote--short {\n\tfont-size: globalFunctions.px-to-rem(28);\n\tletter-spacing: 0.02rem;\n\tline-height: lineHeights.$ontario-line-height-7;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tfont-size: globalFunctions.px-to-rem(23);\n\t\tline-height: lineHeights.$ontario-line-height-6;\n\t}\n}\n\n.ontario-blockquote__attribution,\n.ontario-blockquote__byline {\n\tdisplay: block;\n\tfont-size: globalFunctions.px-to-rem(16);\n\tletter-spacing: 0.025rem;\n\tline-height: lineHeights.$ontario-line-height-8;\n\ttext-align: right;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tletter-spacing: 0.03rem;\n\t\tline-height: lineHeights.$ontario-line-height-7;\n\t}\n}\n\n.ontario-blockquote__attribution {\n\tfont-style: normal;\n\tfont-weight: fontWeights.$ontario-font-weights-bold;\n\n\t&::before {\n\t\tcontent: '\\2014 \\0020';\n\t}\n}\n\nhtml[lang='fr'] blockquote {\n\tquotes: '« ' ' »';\n}\n","import { Component, h, Element, Prop, State, Watch } from '@stencil/core';\n\nimport { Blockquote } from './blockquote.interface';\n\nimport { validatePropExists } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-blockquote',\n\tstyleUrl: 'ontario-blockquote.scss',\n\tshadow: true,\n})\nexport class OntarioBlockquote implements Blockquote {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * Text to be displayed as the quote.\n\t *\n\t * Note that wrapping the quotes in quotations is not needed - this is handled through the component styles\n\t */\n\t@Prop({ mutable: true }) quote: string;\n\n\t/**\n\t * Optional text to be displayed as the attribution (the author) of the quote.\n\t */\n\t@Prop() attribution?: string;\n\n\t/**\n\t * Optional text to be displayed for additional information about the attribution/author.\n\t */\n\t@Prop() byline?: string;\n\n\t@State() shortQuoteLength: number = 140;\n\n\t@State() shortQuote: boolean = false;\n\n\t@State() private quoteState: string;\n\n\t/*\n\t * Watch for changes in the `quote` prop for validation purposes.\n\t *\n\t * If the `quote` prop is not provided, set the `quote` prop to the host textContent (if it exists).\n\t * If the `quote` prop length is 140 characters or less, set the `shortQuote` state to true - this will add additonal classes for the blockquote styles.\n\t */\n\t@Watch('quote')\n\tvalidateQuote() {\n\t\tthis.quoteState = this.quote ?? this.host.textContent ?? '';\n\t\tthis.validateQuoteContent(this.quoteState);\n\t\tthis.shortQuote = this.quoteState?.length <= this.shortQuoteLength ?? true;\n\t}\n\n\t/**\n\t * Print the missing `quote` prop warning message\n\t */\n\tvalidateQuoteContent(newValue: string) {\n\t\tif (validatePropExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' quote ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-blockquote> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateQuote();\n\t}\n\n\t/**\n\t * This helper is used to help load translations for any slots + text content passed in by the user.\n\t */\n\tcomponentDidLoad() {\n\t\tconst observer = new MutationObserver((mutations) => {\n\t\t\tmutations.forEach((mutation) => {\n\t\t\t\tif (mutation.type === 'attributes') {\n\t\t\t\t\tthis.validateQuote();\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\tconst options = { attributes: true };\n\t\tobserver.observe(this.host, options);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<blockquote class={this.shortQuote ? `ontario-blockquote ontario-blockquote--short` : `ontario-blockquote`}>\n\t\t\t\t<p>{this.quoteState}</p>\n\t\t\t\t{this.attribution && <cite class=\"ontario-blockquote__attribution\">{this.attribution}</cite>}\n\t\t\t\t{this.byline && <cite class=\"ontario-blockquote__byline\">{this.byline}</cite>}\n\t\t\t</blockquote>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/ontario-button.d.ts

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

package/dist/components/ontario-button.js

@@ -0,0 +1,235 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { a as validateValueAgainstArray, b as validatePropExists } from './validation-functions.js';
+import { C as ConsoleMessageClass } from './console-message.js';
+
+const ButtonTypes = ['primary', 'secondary', 'tertiary', 'internalThemeDark'];
+const HtmlTypes = ['button', 'reset', 'submit'];
+
+const ontarioButtonCss =
+	'.ontario-button:focus,.ontario-button:active{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}.ontario-button{border:none;border-radius:4px;box-sizing:border-box;box-shadow:none;display:inline-block;font-size:1.125rem;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:600;line-height:1.5555555556;margin:0 1.75rem 1.5rem 0;min-width:10rem;padding:0.625rem 1.5rem;text-align:center;text-decoration:none;cursor:pointer}@media screen and (max-width: 40em){.ontario-button{margin-right:0;display:block;width:100%}}.ontario-button .ontario-icon{margin-right:4px}.ontario-button--primary{background-color:#0066CC;color:#FFFFFF}.ontario-button--primary:hover{background-color:#00478F;color:#FFFFFF}.ontario-button--primary:focus{background-color:#00478F;color:#FFFFFF;transition:background-color 0.2s ease-out, box-shadow 0.1s ease-in-out}.ontario-button--primary:active{background-color:#002142;color:#FFFFFF;transition:background-color 0s, box-shadow 0.1s ease-in-out}.ontario-button--primary:visited{color:#FFFFFF}.ontario-button--secondary{background-color:#FFFFFF;border:2px solid #0066CC;color:#0066CC;padding-top:0.5rem;padding-bottom:0.5rem}.ontario-button--secondary:hover{background-color:#e0f0ff;border-color:#00478F;color:#00478F}.ontario-button--secondary:focus{background-color:#e0f0ff;border-color:#00478F;color:#00478F;transition:background-color 0.2s ease-out, box-shadow 0.1s ease-in-out}.ontario-button--secondary:active{background-color:#c2e0ff;border-color:#002142;color:#002142;transition:background-color 0s, box-shadow 0.1s ease-in-out}.ontario-button--secondary:visited{color:#0066CC}.ontario-button--tertiary{background-color:transparent;color:#0066CC;text-decoration:underline}.ontario-button--tertiary:hover{background-color:#e8e8e8;color:#00478F;text-decoration:underline}.ontario-button--tertiary:focus{background-color:#e8e8e8;color:#00478F;text-decoration:underline;transition:background-color 0.2s ease-out, box-shadow 0.1s ease-in-out}.ontario-button--tertiary:active{background-color:#d1d1d1;color:#002142;text-decoration:underline;transition:background-color 0s, box-shadow 0.1s ease-in-out}.ontario-button--tertiary:visited{color:#0066CC}.ontario-button--internalThemeDark{background-color:#1a1a1a;border:2px solid #FFFFFF;color:#FFFFFF}.ontario-button--internalThemeDark:hover{background-color:#4d4d4d}.ontario-button--internalThemeDark:focus{background-color:#4d4d4d;transition:background-color 0.2s ease-out, box-shadow 0.1s ease-in-out}.ontario-button--internalThemeDark:active{background-color:#4d4d4d;transition:background-color 0s, box-shadow 0.1s ease-in-out}.ontario-button--internalThemeDark:visited{color:#0066CC}';
+const OntarioButtonStyle0 = ontarioButtonCss;
+
+const OntarioButton$1 = /*@__PURE__*/ proxyCustomElement(
+	class OntarioButton extends HTMLElement {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			this.internals = this.attachInternals();
+			this.type = 'secondary';
+			this.htmlType = 'button';
+			this.label = undefined;
+			this.ariaLabelText = undefined;
+			this.elementId = undefined;
+			this.typeState = undefined;
+			this.htmlTypeState = undefined;
+			this.labelState = undefined;
+		}
+		/*
+		 * Watch for changes to the `label` property for validation purposes.
+		 *
+		 * If  no `label` prop is provided, the `label` prop will be set to the host element textContent (if it exists).
+		 */
+		updateLabelContent() {
+			var _a, _b;
+			this.labelState =
+				(_b = (_a = this.label) !== null && _a !== void 0 ? _a : this.host.textContent) !== null && _b !== void 0
+					? _b
+					: '';
+			this.validateLabelContent(this.labelState);
+		}
+		/**
+		 * Watch for changes to the `type` property for validation purposes.
+		 *
+		 * If the user input doesn't match one of the array values then `type` will be set to its default (`secondary`).
+		 * 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, ButtonTypes);
+			if (isValid) {
+				this.typeState = this.type;
+			} else {
+				this.typeState = this.warnDefaultType();
+			}
+		}
+		/**
+		 *  Watch for changes to the `htmlType` property for validation purposes.
+		 *
+		 * If the user input doesn't match one of the array values then `htmlType` will be set to its default (`submit`).
+		 * If a match is found in one of the array values then `htmlType` will be set to the matching array key value.
+		 */
+		validateHtmlType() {
+			const isValid = validateValueAgainstArray(this.htmlType, HtmlTypes);
+			if (isValid) {
+				this.htmlTypeState = this.htmlType;
+			} else {
+				this.htmlTypeState = this.warnDefaultHtmlType();
+			}
+		}
+		/**
+		 * Print the missing `label` prop warning message
+		 */
+		validateLabelContent(newValue) {
+			if (validatePropExists(newValue)) {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addMonospaceText(' label ')
+					.addRegularText('for')
+					.addMonospaceText(' <ontario-button> ')
+					.addRegularText('was not provided')
+					.printMessage();
+			}
+		}
+		/**
+		 * Print the invalid `type` prop warning message
+		 * @returns default type (secondary)
+		 */
+		warnDefaultType() {
+			const message = new ConsoleMessageClass();
+			message
+				.addDesignSystemTag()
+				.addMonospaceText(' type ')
+				.addRegularText('on')
+				.addMonospaceText(' <ontario-button> ')
+				.addRegularText('was set to an invalid type; only')
+				.addMonospaceText(' primary, secondary, or tertiary ')
+				.addRegularText('are supported. The default type')
+				.addMonospaceText(' secondary ')
+				.addRegularText('is assumed.')
+				.printMessage();
+			return 'secondary';
+		}
+		/**
+		 * Print the invalid `htmlType` warning message
+		 * @returns default htmlType (button)
+		 */
+		warnDefaultHtmlType() {
+			const message = new ConsoleMessageClass();
+			message
+				.addDesignSystemTag()
+				.addMonospaceText(' htmlType ')
+				.addRegularText('on')
+				.addMonospaceText(' <ontario-button> ')
+				.addRegularText('was set to an invalid htmlType; only')
+				.addMonospaceText(' button, reset, or submit ')
+				.addRegularText('are supported. The default type')
+				.addMonospaceText(' button ')
+				.addRegularText('is assumed.')
+				.printMessage();
+			return 'button';
+		}
+		/**
+		 * @returns the classes of the button based of the button's `type`.
+		 */
+		getClass() {
+			return `ontario-button ontario-button--${this.typeState}`;
+		}
+		getId() {
+			var _a;
+			return (_a = this.elementId) !== null && _a !== void 0 ? _a : '';
+		}
+		/**
+		 * Set `buttonId`, `label`, and `ariaLabel` using internal component logic.
+		 */
+		componentWillLoad() {
+			var _a;
+			this.updateLabelContent();
+			this.validateHtmlType();
+			this.validateType();
+			this.ariaLabelText = (_a = this.ariaLabelText) !== null && _a !== void 0 ? _a : this.labelState;
+		}
+		componentDidLoad() {
+			// Used to help load translations for any slots + text content passed in by the user.
+			const observer = new MutationObserver((mutations) => {
+				mutations.forEach((mutation) => {
+					if (mutation.type === 'attributes') {
+						this.updateLabelContent();
+					}
+				});
+			});
+			const options = { attributes: true };
+			observer.observe(this.host, options);
+			// Add a click event listener to handle submitting a form
+			if (this.htmlTypeState === 'submit') {
+				const { form } = this.internals;
+				// Based off a comment within this bug about preventDefault(): https://bugzilla.mozilla.org/show_bug.cgi?id=1370630
+				this.buttonRef.addEventListener('click', () =>
+					form === null || form === void 0 ? void 0 : form.dispatchEvent(new Event('submit', { cancelable: true })),
+				);
+			}
+		}
+		render() {
+			return h(
+				'button',
+				{
+					'key': 'ceb1e505af5185139f76215012d1217ee6102356',
+					'ref': (el) => (this.buttonRef = el),
+					'type': this.htmlTypeState,
+					'class': this.getClass(),
+					'aria-label': this.ariaLabelText,
+					'id': this.getId(),
+				},
+				this.labelState,
+			);
+		}
+		static get formAssociated() {
+			return true;
+		}
+		get host() {
+			return this;
+		}
+		static get watchers() {
+			return {
+				label: ['updateLabelContent'],
+				type: ['validateType'],
+				htmlType: ['validateHtmlType'],
+			};
+		}
+		static get style() {
+			return OntarioButtonStyle0;
+		}
+	},
+	[
+		65,
+		'ontario-button',
+		{
+			type: [1],
+			htmlType: [1, 'html-type'],
+			label: [1],
+			ariaLabelText: [1025, 'aria-label-text'],
+			elementId: [1025, 'element-id'],
+			typeState: [32],
+			htmlTypeState: [32],
+			labelState: [32],
+		},
+		undefined,
+		{
+			label: ['updateLabelContent'],
+			type: ['validateType'],
+			htmlType: ['validateHtmlType'],
+		},
+	],
+);
+function defineCustomElement$1() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = ['ontario-button'];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-button':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioButton$1);
+				}
+				break;
+		}
+	});
+}
+
+const OntarioButton = OntarioButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { OntarioButton, defineCustomElement };
+
+//# sourceMappingURL=ontario-button.js.map

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

@@ -0,0 +1 @@
+{"file":"ontario-button.js","mappings":"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","names":["OntarioButton"],"sources":["src/components/ontario-button/ontario-button.types.ts","src/components/ontario-button/ontario-button.scss?tag=ontario-button&encapsulation=shadow","src/components/ontario-button/ontario-button.tsx"],"sourcesContent":["export const ButtonTypes = ['primary', 'secondary', 'tertiary', 'internalThemeDark'] as const;\nexport const HtmlTypes = ['button', 'reset', 'submit'] as const;\n\nexport type ButtonType = (typeof ButtonTypes)[number];\nexport type HtmlType = (typeof HtmlTypes)[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/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/2-tools/placeholder/focus.placeholders' as\n\tplaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\n\n$ontario-button-bg-primary: colours.$ontario-colour-link;\n$ontario-button-bg-primary--hover: colours.$ontario-colour-link--hover;\n$ontario-button-bg-primary--active: colours.$ontario-colour-link--active;\n$ontario-button-bg-secondary: colours.$ontario-colour-white;\n\n.ontario-button {\n\tborder: none;\n\tborder-radius: globalVariables.$global-radius;\n\tbox-sizing: border-box;\n\tbox-shadow: none;\n\tdisplay: inline-block;\n\tfont-size: 1.125rem;\n\tfont-family: typography.$ontario-font-open-sans;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tline-height: math.div(14, 9);\n\tmargin: spacing.$spacing-0 (spacing.$spacing-4 + spacing.$spacing-3) spacing.$spacing-5 spacing.$spacing-0;\n\tmin-width: 10rem;\n\tpadding: math.div((spacing.$spacing-4 + spacing.$spacing-1), 2) spacing.$spacing-5;\n\ttext-align: center;\n\ttext-decoration: none;\n\tcursor: pointer;\n\n\t&:focus,\n\t&:active {\n\t\t@extend %ontario-focus;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-right: 0;\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t}\n\n\t.ontario-icon {\n\t\tmargin-right: 4px;\n\t}\n}\n\n.ontario-button--primary {\n\tbackground-color: $ontario-button-bg-primary;\n\tcolor: colours.$ontario-colour-white;\n\n\t&:hover {\n\t\tbackground-color: $ontario-button-bg-primary--hover;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\t&:focus {\n\t\tbackground-color: $ontario-button-bg-primary--hover;\n\t\tcolor: colours.$ontario-colour-white;\n\t\ttransition: background-color 0.2s ease-out, focusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:active {\n\t\tbackground-color: $ontario-button-bg-primary--active;\n\t\tcolor: colours.$ontario-colour-white;\n\t\ttransition: background-color 0s, focusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n}\n\n.ontario-button--secondary {\n\tbackground-color: $ontario-button-bg-secondary;\n\tborder: globalVariables.$border-size-standard solid colours.$ontario-colour-link;\n\tcolor: colours.$ontario-colour-link;\n\tpadding-top: spacing.$spacing-2;\n\tpadding-bottom: spacing.$spacing-2;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-colour-button-secondary--hover;\n\t\tborder-color: colours.$ontario-colour-link--hover;\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t}\n\n\t&:focus {\n\t\tbackground-color: colours.$ontario-colour-button-secondary--hover;\n\t\tborder-color: colours.$ontario-colour-link--hover;\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t\ttransition: background-color 0.2s ease-out, focusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-button-secondary--active;\n\t\tborder-color: colours.$ontario-colour-link--active;\n\t\tcolor: colours.$ontario-colour-link--active;\n\t\ttransition: background-color 0s, focusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-link;\n\t}\n}\n\n.ontario-button--tertiary {\n\tbackground-color: transparent;\n\tcolor: colours.$ontario-colour-link;\n\ttext-decoration: underline;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-colour-button-tertiary--hover;\n\t\tcolor: $ontario-button-bg-primary--hover;\n\t\ttext-decoration: underline;\n\t}\n\n\t&:focus {\n\t\tbackground-color: colours.$ontario-colour-button-tertiary--hover;\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t\ttext-decoration: underline;\n\t\ttransition: background-color 0.2s ease-out, focusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-button-tertiary--active;\n\t\tcolor: colours.$ontario-colour-link--active;\n\t\ttext-decoration: underline;\n\t\ttransition: background-color 0s, focusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-link;\n\t}\n}\n\n.ontario-button--internalThemeDark {\n\tbackground-color: colours.$ontario-colour-black;\n\tborder: globalVariables.$border-size-standard solid colours.$ontario-colour-white;\n\tcolor: colours.$ontario-colour-white;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t}\n\n\t&:focus {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t\ttransition: background-color 0.2s ease-out, focusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t\ttransition: background-color 0s, focusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-link;\n\t}\n}\n","import { Component, Prop, Element, h, Watch, State, AttachInternals } from '@stencil/core';\n\nimport { Button } from './button.interface';\nimport { ButtonType, ButtonTypes, HtmlType, HtmlTypes } from './ontario-button.types';\n\nimport { validatePropExists, validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-button',\n\tstyleUrl: 'ontario-button.scss',\n\tshadow: true,\n\tformAssociated: true,\n})\nexport class OntarioButton implements Button {\n\t@Element() host: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\t/**\n\t * The type of button to render.\n\t *\n\t * If no type is passed, it will default to 'secondary'.\n\t */\n\t@Prop() type: ButtonType = 'secondary';\n\n\t/**\n\t * The native HTML button type the button should use.\n\t *\n\t * If no htmlType is passed, it will default to 'button'.\n\t */\n\t@Prop() htmlType: HtmlType = 'button';\n\n\t/**\n\t * Text to be displayed within the button. This will override the text provided through the host element textContent.\n\t *\n\t * @example\n\t * <ontario-button label=\"Label Text\">Text</ontario-button>\n\t *\n\t * The resulting button will have the label `\"Label Text\"`.\n\t */\n\t@Prop() label?: string;\n\n\t/**\n\t * Provides more context as to what the button interaction is doing. This should only be used for accessibility purposes, if the button interaction requires more description than what the text provides.\n\t *\n\t *  This is optional.\n\t *\n\t * @example\n\t * <ontario-button aria-label-text=\"Click button to open map\">Open</ontario button>\n\t */\n\t@Prop({ mutable: true }) ariaLabelText?: string;\n\n\t/**\n\t * The unique identifier of the button. This is optional - if no ID is passed, one will be generated.\n\t */\n\t@Prop({ mutable: true }) elementId?: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the button's type depending on validation result.\n\t */\n\t@State() private typeState: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the native HTML button type depending on validation result.\n\t */\n\t@State() private htmlTypeState: string;\n\n\t@State() private labelState: string;\n\n\t/**\n\t * A reference to the internal button element.\n\t */\n\tprivate buttonRef: HTMLButtonElement;\n\n\t/*\n\t * Watch for changes to the `label` property for validation purposes.\n\t *\n\t * If  no `label` prop is provided, the `label` prop will be set to the host element textContent (if it exists).\n\t */\n\t@Watch('label')\n\tprivate updateLabelContent() {\n\t\tthis.labelState = this.label ?? this.host.textContent ?? '';\n\t\tthis.validateLabelContent(this.labelState);\n\t}\n\n\t/**\n\t * Watch for changes to the `type` property 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 (`secondary`).\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, ButtonTypes);\n\t\tif (isValid) {\n\t\t\tthis.typeState = this.type;\n\t\t} else {\n\t\t\tthis.typeState = this.warnDefaultType();\n\t\t}\n\t}\n\n\t/**\n\t *  Watch for changes to the `htmlType` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `htmlType` will be set to its default (`submit`).\n\t * If a match is found in one of the array values then `htmlType` will be set to the matching array key value.\n\t */\n\t@Watch('htmlType')\n\tvalidateHtmlType() {\n\t\tconst isValid = validateValueAgainstArray(this.htmlType, HtmlTypes);\n\t\tif (isValid) {\n\t\t\tthis.htmlTypeState = this.htmlType;\n\t\t} else {\n\t\t\tthis.htmlTypeState = this.warnDefaultHtmlType();\n\t\t}\n\t}\n\n\t/**\n\t * Print the missing `label` prop warning message\n\t */\n\tvalidateLabelContent(newValue: string) {\n\t\tif (validatePropExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' label ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-button> ')\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 * Print the invalid `type` prop warning message\n\t * @returns default type (secondary)\n\t */\n\tprivate warnDefaultType(): ButtonType {\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-button> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' primary, secondary, or tertiary ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' secondary ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'secondary';\n\t}\n\n\t/**\n\t * Print the invalid `htmlType` warning message\n\t * @returns default htmlType (button)\n\t */\n\tprivate warnDefaultHtmlType(): HtmlType {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' htmlType ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-button> ')\n\t\t\t.addRegularText('was set to an invalid htmlType; only')\n\t\t\t.addMonospaceText(' button, reset, or submit ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' button ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'button';\n\t}\n\n\t/**\n\t * @returns the classes of the button based of the button's `type`.\n\t */\n\tprivate getClass() {\n\t\treturn `ontario-button ontario-button--${this.typeState}`;\n\t}\n\n\tpublic getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\t/**\n\t * Set `buttonId`, `label`, and `ariaLabel` using internal component logic.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.updateLabelContent();\n\t\tthis.validateHtmlType();\n\t\tthis.validateType();\n\t\tthis.ariaLabelText = this.ariaLabelText ?? this.labelState;\n\t}\n\n\tcomponentDidLoad() {\n\t\t// Used to help load translations for any slots + text content passed in by the user.\n\t\tconst observer = new MutationObserver((mutations) => {\n\t\t\tmutations.forEach((mutation) => {\n\t\t\t\tif (mutation.type === 'attributes') {\n\t\t\t\t\tthis.updateLabelContent();\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\tconst options = { attributes: true };\n\t\tobserver.observe(this.host, options);\n\n\t\t// Add a click event listener to handle submitting a form\n\t\tif (this.htmlTypeState === 'submit') {\n\t\t\tconst { form } = this.internals;\n\t\t\t// Based off a comment within this bug about preventDefault(): https://bugzilla.mozilla.org/show_bug.cgi?id=1370630\n\t\t\tthis.buttonRef.addEventListener('click', () => form?.dispatchEvent(new Event('submit', { cancelable: true })));\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<button\n\t\t\t\tref={(el) => (this.buttonRef = el as HTMLButtonElement)}\n\t\t\t\ttype={this.htmlTypeState}\n\t\t\t\tclass={this.getClass()}\n\t\t\t\taria-label={this.ariaLabelText}\n\t\t\t\tid={this.getId()}\n\t\t\t>\n\t\t\t\t{this.labelState}\n\t\t\t</button>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/ontario-callout.d.ts

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