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

package/components/ontario-aside.js.map

@@ -0,0 +1 @@
+{"file":"ontario-aside.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,43JAA43J;;MCsBv4JA,cAAY,iBAAAC,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,GAAA;;;;AAWC;;AAEG;AACsB,QAAA,IAAkB,CAAA,kBAAA,GAAuB,QAAQ;AAiB1E;;AAEG;AACsB,QAAA,IAAe,CAAA,eAAA,GAA4B,MAAM;AAsG1E;AApGA;;;;AAIG;IAEH,mBAAmB,GAAA;AAClB,QAAA,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE;AACvB,YAAA,IAAI,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC;gBAAE,OAAO,IAAI,CAAC,WAAW;AAElE,YAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;AACzC,YAAA,OAAO;AACL,iBAAA,kBAAkB;AAClB,iBAAA,gBAAgB,CAAC,CAAgB,aAAA,EAAA,IAAI,CAAC,WAAW,GAAG;iBACpD,cAAc,CAAC,KAAK;iBACpB,gBAAgB,CAAC,mBAAmB;iBACpC,cAAc,CAAC,4FAA4F;AAC3G,iBAAA,YAAY,EAAE;;;AAIlB;;;;;AAKG;IAEH,0BAA0B,GAAA;QACzB,MAAM,OAAO,GAAG,yBAAyB,CAAC,IAAI,CAAC,kBAAkB,EAAE,mBAAmB,CAAC;QACvF,IAAI,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,kBAAkB;;aACxB;AACN,YAAA,OAAO,IAAI,CAAC,eAAe,EAAE;;;AAI/B;;;;AAIG;IAEH,uBAAuB,GAAA;AACtB,QAAA,IAAI,IAAI,CAAC,eAAe,EAAE;AACzB,YAAA,IAAI,sBAAsB,CAAC,IAAI,CAAC,eAAe,CAAC;gBAAE,OAAO,IAAI,CAAC,eAAe;iBACxE;AACJ,gBAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;gBACzC;AACE,qBAAA,kBAAkB;AAClB,qBAAA,gBAAgB,CAAC,CAAoB,iBAAA,EAAA,IAAI,CAAC,eAAe,GAAG;qBAC5D,cAAc,CAAC,KAAK;qBACpB,gBAAgB,CAAC,mBAAmB;qBACpC,cAAc,CACd,oGAAoG;AAEpG,qBAAA,YAAY,EAAE;;;;AAKlB,QAAA,OAAO,MAAM;;AAGd;;;AAGG;IACK,eAAe,GAAA;AACtB,QAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;QACzC;AACE,aAAA,kBAAkB;aAClB,gBAAgB,CAAC,sBAAsB;aACvC,cAAc,CAAC,IAAI;aACnB,gBAAgB,CAAC,mBAAmB;aACpC,cAAc,CAAC,kCAAkC;aACjD,gBAAgB,CAAC,kBAAkB;aACnC,cAAc,CAAC,iCAAiC;aAChD,gBAAgB,CAAC,UAAU;aAC3B,cAAc,CAAC,aAAa;AAC5B,aAAA,YAAY,EAAE;AAChB,QAAA,QAAQ,IAAI,CAAC,kBAAkB,GAAG,QAAQ;;IAG3C,iBAAiB,GAAA;QAChB,IAAI,CAAC,uBAAuB,EAAE;QAC9B,IAAI,CAAC,mBAAmB,EAAE;QAC1B,IAAI,CAAC,0BAA0B,EAAE;;IAGlC,MAAM,GAAA;QACL,OAAO,oBAAoB,CAC1B,OAAO,EACP,IAAI,CAAC,kBAAkB,EACvB,IAAI,CAAC,WAAW,EAChB,IAAI,CAAC,cAAc,EACnB,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,eAAe,CACpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioAside","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-aside/ontario-aside.scss?tag=ontario-aside&encapsulation=shadow","src/components/ontario-aside/ontario-aside.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/global.variables' as globalVariables;\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/4-elements/global.elements';\n\n.ontario-aside {\n\tborder-left: spacing.$spacing-1 solid colours.$ontario-colour-dark-teal;\n\tpadding: spacing.$spacing-5;\n\tmargin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-6;\n\n\t* {\n\t\tmax-width: globalVariables.$standard-width;\n\n\t\t&:last-child,\n\t\t&:last-of-type {\n\t\t\tmargin-bottom: spacing.$spacing-2;\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t.ontario-aside {\n\t\t\tmargin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-4;\n\t\t}\n\t}\n}\n\n.ontario-aside__title {\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4;\n}\n\n$aside-highlight-colours: (\n\t'teal': colours.$ontario-colour-dark-teal,\n\t'gold': colours.$ontario-colour-dark-gold,\n\t'yellow': colours.$ontario-colour-dark-yellow,\n\t'taupe': colours.$ontario-colour-dark-taupe,\n\t'green': colours.$ontario-colour-dark-green,\n\t'lime': colours.$ontario-colour-dark-lime,\n\t'sky': colours.$ontario-colour-dark-sky,\n\t'blue': colours.$ontario-colour-dark-blue,\n\t'purple': colours.$ontario-colour-dark-purple,\n);\n\n@each $colour-name, $hex in $aside-highlight-colours {\n\t.ontario-border-highlight--#{$colour-name} {\n\t\tborder-color: $hex !important;\n\t}\n}\n","import { Component, Prop, Watch } from '@stencil/core';\n\nimport {\n\tCalloutAside,\n\tHeadingLevelOptions,\n\tHeadingContentType,\n\tHeadingContentTypes,\n\tHighlightColourOptions,\n} from '../../utils/components/callout-aside/callout-aside.interface';\nimport {\n\tisValidHighlightColour,\n\tgenerateCalloutAside,\n\tisValidHeadingLevel,\n} from '../../utils/components/callout-aside/callout-aside-helpers';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-aside',\n\tstyleUrl: 'ontario-aside.scss',\n\tshadow: true,\n})\nexport class OntarioAside implements CalloutAside {\n\t/**\n\t * The heading level of the aside heading.\n\t */\n\t@Prop({ mutable: true }) headingType?: HeadingLevelOptions;\n\n\t/**\n\t * The type of the heading content. If no prop is passed, it will default to string.\n\t */\n\t@Prop({ mutable: true }) headingContentType: HeadingContentType = 'string';\n\n\t/**\n\t * Text or HTML to be displayed as the heading of the aside. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.\n\t */\n\t@Prop() headingContent?: string;\n\n\t/**\n\t * Optional text to be displayed as the content for the aside component. If a string is passed, it will automatically be nested in a paragraph tag.\n\t *\n\t * HTML content can also be passed as the child/children of the aside component if additional/different elements for the content are needed.\n\t *\n\t * @example\n\t * <ontario-aside headingType='h3' headingContent='This is the aside heading'><p>This is the first sentence of the aside content.</p><p>This is the second sentence of the aside content.</p></ontario-aside>\n\t */\n\t@Prop() content?: string;\n\n\t/**\n\t * Optional prop to choose the border colour of the aside. If none is passed, the default colour will be teal.\n\t */\n\t@Prop({ mutable: true }) highlightColour?: HighlightColourOptions = 'teal';\n\n\t/**\n\t * Watch for changes to the `headingType` prop.\n\t *\n\t * This is for validation purposes to make sure the `headingType` matches one of the `HeadingLevelOptions`.\n\t */\n\t@Watch('headingType')\n\tvalidateHeadingType() {\n\t\tif (!!this.headingType) {\n\t\t\tif (isValidHeadingLevel(this.headingType)) return this.headingType;\n\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\treturn message\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(` headingType ${this.headingType} `)\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t\t.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes in the `headingContentType` prop for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `headingContentType` will be set to its default (`string`).\n\t * If a match is found in one of the array values then `headingContentType` will be set to the matching array key value.\n\t */\n\t@Watch('headingContentType')\n\tvalidateHeadingContentType() {\n\t\tconst isValid = validateValueAgainstArray(this.headingContentType, HeadingContentTypes);\n\t\tif (isValid) {\n\t\t\treturn this.headingContentType;\n\t\t} else {\n\t\t\treturn this.warnDefaultType();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `highlightColour` prop.\n\t *\n\t * If no `highlightColour` is passed, or if the `highlightColour` does not match the `highlightColour` options, a default value of 'teal' will be applied.\n\t */\n\t@Watch('highlightColour')\n\tvalidateHighlightColour() {\n\t\tif (this.highlightColour) {\n\t\t\tif (isValidHighlightColour(this.highlightColour)) return this.highlightColour;\n\t\t\telse {\n\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\tmessage\n\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t.addMonospaceText(` highlightColour ${this.highlightColour} `)\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t\t\t.addRegularText(\n\t\t\t\t\t\t'does not match one of the valid highlightColour types. A default colour of `teal` will be applied.',\n\t\t\t\t\t)\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\n\t\t// if no highlight colour is passed, return 'teal'\n\t\treturn 'teal';\n\t}\n\n\t/**\n\t * Print the invalid `type` warning message.\n\t * @returns default type ('string')\n\t */\n\tprivate warnDefaultType() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' headingContentType ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' string or html ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' string ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn (this.headingContentType = 'string');\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateHighlightColour();\n\t\tthis.validateHeadingType();\n\t\tthis.validateHeadingContentType();\n\t}\n\n\trender() {\n\t\treturn generateCalloutAside(\n\t\t\t'aside',\n\t\t\tthis.headingContentType,\n\t\t\tthis.headingType,\n\t\t\tthis.headingContent,\n\t\t\tthis.content,\n\t\t\tthis.highlightColour,\n\t\t);\n\t}\n}\n"],"version":3}

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

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

@@ -0,0 +1,119 @@
+import { p as proxyCustomElement, H, h } from './index.js';
+import { b as validateLanguage } from './p-CNqFEifG.js';
+import { t as translations } from './p-DgMhpSmi.js';
+import { a as isClientSideRendering } from './p-TS9NoIOc.js';
+
+var 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(25.5, 25.5, 25.5, 0.6);box-sizing:border-box;color:rgb(25.5, 25.5, 25.5);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 span,.ontario-back-to-top--default span{display:block}.ontario-back-to-top .ontario-icon,.ontario-back-to-top--default .ontario-icon{margin:0.125rem 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 OntarioBackToTop$1 = /*@__PURE__*/ proxyCustomElement(
+	class OntarioBackToTop extends H {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			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() {
+			if (isClientSideRendering()) {
+				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);
+			}
+		}
+		/**
+		 * 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);
+		}
+		/**
+		 * Scroll to top functionality when the Back to Top button is clicked
+		 */
+		scrollToTop() {
+			if (isClientSideRendering()) {
+				window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+			}
+		}
+		componentWillLoad() {
+			this.language = validateLanguage(this.language);
+		}
+		render() {
+			return h(
+				'button',
+				{
+					'key': '9f8cd23fef9cc1e4c241b7d56f977d7fecbbf515',
+					'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': '98f7983d4c3e8581a2bb693f1331d766841e39aa',
+					'aria-hidden': 'true',
+					'innerHTML': OntarioIconArrowUp,
+				}),
+				this.translations.backToTop.top[`${this.language}`],
+			);
+		}
+		get element() {
+			return this;
+		}
+		static get style() {
+			return ontarioBackToTopCss;
+		}
+	},
+	[
+		257,
+		'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;
+		}
+	});
+}
+defineCustomElement$1();
+
+const OntarioBackToTop = OntarioBackToTop$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { OntarioBackToTop, defineCustomElement };
+//# sourceMappingURL=ontario-back-to-top.js.map
+
+//# sourceMappingURL=ontario-back-to-top.js.map

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

@@ -0,0 +1 @@
+{"file":"ontario-back-to-top.js","mappings":";;;;;;;;AAAA,MAAM,mBAAmB,GAAG,mmEAAmmE;;MCelnEA,kBAAgB,iBAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;AAL7B,IAAA,WAAA,GAAA;;;;AAcU,QAAA,IAAY,CAAA,YAAA,GAAQ,YAAY;AAExB,QAAA,IAAgB,CAAA,gBAAA,GAAY,KAAK;AAEjC,QAAA,IAAY,CAAA,YAAA,GAAW,GAAG;AAuD3C;AArDA;;AAEG;IAEH,mBAAmB,GAAA;QAClB,IAAI,qBAAqB,EAAE,EAAE;YAC5B,IAAI,CAAC,gBAAgB,GAAG,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY;;;AAI5D;;AAEG;AAEH,IAAA,oBAAoB,CAAC,KAA4B,EAAA;AAChD,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AACnB,YAAA,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC;;;AAIzC;;;AAGG;AAEH,IAAA,2BAA2B,CAAC,KAAoD,EAAA;QAC/E,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC;;AAE3D;;AAEG;IACK,WAAW,GAAA;QAClB,IAAI,qBAAqB,EAAE,EAAE;AAC5B,YAAA,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;;;IAI1D,iBAAiB,GAAA;QAChB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC;;IAGhD,MAAM,GAAA;AACL,QAAA,QACC,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,KAAK,EAAE,IAAI,CAAC,gBAAgB,GAAG,CAAA,0BAAA,CAA4B,GAAG,CAAqB,mBAAA,CAAA,EACnF,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,YAAA,EACb,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA,EAAG,IAAI,CAAC,QAAQ,CAAE,CAAA,CAAC,EAAA,EAErE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EAAkB,MAAM,EAAC,SAAS,EAAE,kBAAkB,EAAS,CAAA,EAC9D,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,CAAA,EAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAC5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioBackToTop","__stencil_proxyCustomElement","HTMLElement"],"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 'sass:math';\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as\n\tglobalFunctions;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;\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/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: fonts.$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:\n\t\t\t0 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:\n\t\t\t0 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:\n\t\t\tbackground-color 0s,\n\t\t\tfocusPlaceholders.$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\tspan {\n\t\t\tdisplay: block;\n\t\t}\n\n\t\t.ontario-icon {\n\t\t\tmargin: math.div(spacing.$spacing-1, 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';\nimport { isClientSideRendering } from '../../utils/common/environment';\nimport { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';\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\tif (isClientSideRendering()) {\n\t\t\tthis.displayBackToTop = window.scrollY > this.scrollYValue;\n\t\t}\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/**\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\t/**\n\t * Scroll to top functionality when the Back to Top button is clicked\n\t */\n\tprivate scrollToTop() {\n\t\tif (isClientSideRendering()) {\n\t\t\twindow.scrollTo({ top: 0, left: 0, behavior: 'smooth' });\n\t\t}\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/components/ontario-badge.d.ts

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

package/components/ontario-badge.js

@@ -0,0 +1,9 @@
+import { O as OntarioBadge$1, d as defineCustomElement$1 } from './p-6uqsTY-M.js';
+
+const OntarioBadge = OntarioBadge$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { OntarioBadge, defineCustomElement };
+//# sourceMappingURL=ontario-badge.js.map
+
+//# sourceMappingURL=ontario-badge.js.map

package/components/ontario-badge.js.map

@@ -0,0 +1 @@
+{"file":"ontario-badge.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/ontario-blockquote.d.ts

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

@@ -0,0 +1,145 @@
+import { p as proxyCustomElement, H, h } from './index.js';
+import { a as validatePropExists } from './p-CNqFEifG.js';
+import { C as ConsoleMessageClass } from './p-Cdm-Ot0O.js';
+import { i as isServerSideRendering } from './p-TS9NoIOc.js';
+
+const ontarioBlockquoteCss =
+	'@charset "UTF-8";.ontario-blockquote{border-left:4px solid rgb(76.5, 76.5, 76.5);font-family:"Raleway Modified", "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 OntarioBlockquote$1 = /*@__PURE__*/ proxyCustomElement(
+	class OntarioBlockquote extends H {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			this.shortQuoteLength = 140;
+			this.shortQuote = false;
+		}
+		/*
+		 * 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;
+			if (isServerSideRendering()) {
+				// Ensure host and its textContent are defined and accessible (safe for SSR environments)
+				this.quoteState = (_a = this.quote) !== null && _a !== void 0 ? _a : '';
+			} else {
+				this.quoteState =
+					(_c = (_b = this.quote) !== null && _b !== void 0 ? _b : this.host.textContent) !== null && _c !== void 0
+						? _c
+						: '';
+			}
+			this.validateQuoteContent(this.quoteState);
+			this.shortQuote =
+				((_d = this.quoteState) === null || _d === void 0 ? void 0 : _d.length) <= this.shortQuoteLength;
+		}
+		/**
+		 * 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: 'd61a06f46cdda3c01d3de4df119cff2c003e3431',
+					class: this.shortQuote ? `ontario-blockquote ontario-blockquote--short` : `ontario-blockquote`,
+				},
+				h('p', { key: '3f1dd19b694ad312e3386788e5719614a4f574eb' }, this.quoteState),
+				this.attribution &&
+					h(
+						'cite',
+						{ key: '2d05950682b2eb288b58c8dc50f18aa00189b5b7', class: 'ontario-blockquote__attribution' },
+						this.attribution,
+					),
+				this.byline &&
+					h(
+						'cite',
+						{ key: '8a14d547450f556a5c1d64324a7767c7910748e5', class: 'ontario-blockquote__byline' },
+						this.byline,
+					),
+			);
+		}
+		get host() {
+			return this;
+		}
+		static get watchers() {
+			return {
+				quote: ['validateQuote'],
+			};
+		}
+		static get style() {
+			return ontarioBlockquoteCss;
+		}
+	},
+	[
+		257,
+		'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;
+		}
+	});
+}
+defineCustomElement$1();
+
+const OntarioBlockquote = OntarioBlockquote$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { OntarioBlockquote, defineCustomElement };
+//# sourceMappingURL=ontario-blockquote.js.map
+
+//# sourceMappingURL=ontario-blockquote.js.map

package/components/ontario-blockquote.js.map

@@ -0,0 +1 @@
+{"file":"ontario-blockquote.js","mappings":";;;;;AAAA,MAAM,oBAAoB,GAAG,uuCAAuuC;;MCavvCA,mBAAiB,iBAAAC,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,GAAA;;;;AAyBU,QAAA,IAAgB,CAAA,gBAAA,GAAW,GAAG;AAE9B,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AAoEpC;AAhEA;;;;;AAKG;IAEH,aAAa,GAAA;;QACZ,IAAI,qBAAqB,EAAE,EAAE;;YAE5B,IAAI,CAAC,UAAU,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,KAAK,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,EAAE;;aAC5B;YACN,IAAI,CAAC,UAAU,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,KAAK,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,WAAW,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,EAAE;;AAG5D,QAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,UAAU,CAAC;AAC1C,QAAA,IAAI,CAAC,UAAU,GAAG,CAAA,MAAA,IAAI,CAAC,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,MAAM,KAAI,IAAI,CAAC,gBAAgB;;AAGnE;;AAEG;AACH,IAAA,oBAAoB,CAAC,QAAgB,EAAA;AACpC,QAAA,IAAI,kBAAkB,CAAC,QAAQ,CAAC,EAAE;AACjC,YAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;YACzC;AACE,iBAAA,kBAAkB;iBAClB,gBAAgB,CAAC,SAAS;iBAC1B,cAAc,CAAC,KAAK;iBACpB,gBAAgB,CAAC,wBAAwB;iBACzC,cAAc,CAAC,kBAAkB;AACjC,iBAAA,YAAY,EAAE;;;IAIlB,iBAAiB,GAAA;QAChB,IAAI,CAAC,aAAa,EAAE;;AAGrB;;AAEG;IACH,gBAAgB,GAAA;QACf,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,CAAC,SAAS,KAAI;AACnD,YAAA,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,KAAI;AAC9B,gBAAA,IAAI,QAAQ,CAAC,IAAI,KAAK,YAAY,EAAE;oBACnC,IAAI,CAAC,aAAa,EAAE;;AAEtB,aAAC,CAAC;AACH,SAAC,CAAC;AAEF,QAAA,MAAM,OAAO,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE;QACpC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC;;IAGrC,MAAM,GAAA;AACL,QAAA,QACC,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,KAAK,EAAE,IAAI,CAAC,UAAU,GAAG,CAA8C,4CAAA,CAAA,GAAG,oBAAoB,EAAA,EACzG,CAAI,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,UAAU,CAAK,EACvB,IAAI,CAAC,WAAW,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iCAAiC,EAAE,EAAA,IAAI,CAAC,WAAW,CAAQ,EAC3F,IAAI,CAAC,MAAM,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,4BAA4B,EAAE,EAAA,IAAI,CAAC,MAAM,CAAQ,CACjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioBlockquote","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-blockquote/ontario-blockquote.scss?tag=ontario-blockquote&encapsulation=shadow","src/components/ontario-blockquote/ontario-blockquote.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/1-variables/fonts.variables' as fonts;\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/1-variables/font-weights.variables' as fontWeights;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as\n\tglobalFunctions;\n\n.ontario-blockquote {\n\tborder-left: 4px solid colours.$ontario-greyscale-70;\n\tfont-family: fonts.$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';\nimport { isServerSideRendering } from '../../utils/common/environment';\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\tif (isServerSideRendering()) {\n\t\t\t// Ensure host and its textContent are defined and accessible (safe for SSR environments)\n\t\t\tthis.quoteState = this.quote ?? '';\n\t\t} else {\n\t\t\tthis.quoteState = this.quote ?? this.host.textContent ?? '';\n\t\t}\n\n\t\tthis.validateQuoteContent(this.quoteState);\n\t\tthis.shortQuote = this.quoteState?.length <= this.shortQuoteLength;\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/components/ontario-button.d.ts

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

@@ -0,0 +1,237 @@
+import { p as proxyCustomElement, H, h } from './index.js';
+import { v as validateValueAgainstArray, a as validatePropExists } from './p-CNqFEifG.js';
+import { C as ConsoleMessageClass } from './p-Cdm-Ot0O.js';
+import { i as isServerSideRendering } from './p-TS9NoIOc.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}:host{display:inline-block}.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;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:rgb(224.4, 239.7, 255);border-color:#00478F;color:#00478F}.ontario-button--secondary:focus{background-color:rgb(224.4, 239.7, 255);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:rgb(193.8, 224.4, 255);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:rgb(232.05, 232.05, 232.05);color:#00478F;text-decoration:underline}.ontario-button--tertiary:focus{background-color:rgb(232.05, 232.05, 232.05);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:rgb(209.1, 209.1, 209.1);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:rgb(25.5, 25.5, 25.5);border:2px solid #FFFFFF;color:#FFFFFF}.ontario-button--internalThemeDark:hover{background-color:rgb(76.5, 76.5, 76.5)}.ontario-button--internalThemeDark:focus{background-color:rgb(76.5, 76.5, 76.5);transition:background-color 0.2s ease-out, box-shadow 0.1s ease-in-out}.ontario-button--internalThemeDark:active{background-color:rgb(76.5, 76.5, 76.5);transition:background-color 0s, box-shadow 0.1s ease-in-out}.ontario-button--internalThemeDark:visited{color:#0066CC}';
+
+const OntarioButton$1 = /*@__PURE__*/ proxyCustomElement(
+	class OntarioButton extends H {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			this.internals = this.attachInternals();
+			/**
+			 * The type of button to render.
+			 *
+			 * If no type is passed, it will default to 'secondary'.
+			 */
+			this.type = 'secondary';
+			/**
+			 * The native HTML button type the button should use.
+			 *
+			 * If no htmlType is passed, it will default to 'button'.
+			 */
+			this.htmlType = 'button';
+		}
+		/*
+		 * 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, _c;
+			if (isServerSideRendering()) {
+				// Ensure host and its textContent are defined and accessible (safe for SSR environments)
+				this.labelState = (_a = this.label) !== null && _a !== void 0 ? _a : '';
+			} else {
+				this.labelState =
+					(_c = (_b = this.label) !== null && _b !== void 0 ? _b : this.host.textContent) !== null && _c !== void 0
+						? _c
+						: '';
+			}
+			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);
+			this.typeState = isValid ? this.type : 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);
+			this.htmlTypeState = isValid ? this.htmlType : 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') {
+				this.buttonRef.addEventListener('click', () => {
+					const { form } = this.internals;
+					form === null || form === void 0 ? void 0 : form.requestSubmit();
+				});
+			}
+		}
+		render() {
+			return h(
+				'button',
+				{
+					'key': '2b24f84f2c57c08178ee8c6fd43a0b68d44ba578',
+					'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 ontarioButtonCss;
+		}
+	},
+	[
+		321,
+		'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;
+		}
+	});
+}
+defineCustomElement$1();
+
+const OntarioButton = OntarioButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { OntarioButton, defineCustomElement };
+//# sourceMappingURL=ontario-button.js.map
+
+//# sourceMappingURL=ontario-button.js.map