npm - @ongov/ontario-design-system-component-library - Versions diffs - 4.3.1-alpha.1 → 5.0.0-alpha.10 - Mend

@ongov/ontario-design-system-component-library 4.3.1-alpha.1 → 5.0.0-alpha.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2406) hide show

package/www/fonts/open-sans-400--italic/open-sans-400--italic.woff2 CHANGED Viewed

Binary file

package/www/fonts/open-sans-600/open-sans-600.otf ADDED Viewed

Binary file

package/www/fonts/open-sans-600/open-sans-600.ttf CHANGED Viewed

Binary file

package/www/fonts/open-sans-600/open-sans-600.woff2 CHANGED Viewed

Binary file

package/www/fonts/open-sans-600--italic/open-sans-600--italic.otf ADDED Viewed

Binary file

package/www/fonts/open-sans-600--italic/open-sans-600--italic.ttf ADDED Viewed

Binary file

package/www/fonts/open-sans-600--italic/open-sans-600--italic.woff2 ADDED Viewed

Binary file

package/www/fonts/open-sans-700/open-sans-700.otf ADDED Viewed

Binary file

package/www/fonts/open-sans-700/open-sans-700.ttf CHANGED Viewed

Binary file

package/www/fonts/open-sans-700/open-sans-700.woff2 CHANGED Viewed

Binary file

package/www/fonts/open-sans-700--italic/open-sans-700--italic.otf ADDED Viewed

Binary file

package/www/fonts/open-sans-700--italic/open-sans-700--italic.woff2 ADDED Viewed

Binary file

package/www/fonts/raleway-modified-300/raleway-modified-300.otf ADDED Viewed

Binary file

package/www/fonts/raleway-modified-300/raleway-modified-300.ttf ADDED Viewed

Binary file

package/www/fonts/raleway-modified-300/raleway-modified-300.woff2 ADDED Viewed

Binary file

package/www/fonts/raleway-modified-300--italic/raleway-modified-300--italic.otf ADDED Viewed

Binary file

package/www/fonts/raleway-modified-300--italic/raleway-modified-300--italic.ttf ADDED Viewed

Binary file

package/www/fonts/raleway-modified-300--italic/raleway-modified-300--italic.woff2 ADDED Viewed

Binary file

package/www/fonts/raleway-modified-400/raleway-modified-400.otf ADDED Viewed

Binary file

package/www/fonts/raleway-modified-400/raleway-modified-400.ttf CHANGED Viewed

Binary file

package/www/fonts/raleway-modified-400/raleway-modified-400.woff2 CHANGED Viewed

Binary file

package/www/fonts/raleway-modified-400--italic/raleway-modified-400--italic.otf ADDED Viewed

Binary file

package/www/fonts/raleway-modified-400--italic/raleway-modified-400--italic.ttf ADDED Viewed

Binary file

package/www/fonts/raleway-modified-400--italic/raleway-modified-400--italic.woff2 ADDED Viewed

Binary file

package/www/fonts/raleway-modified-600/raleway-modified-600.otf ADDED Viewed

Binary file

package/www/fonts/raleway-modified-600/raleway-modified-600.ttf CHANGED Viewed

Binary file

package/www/fonts/raleway-modified-600/raleway-modified-600.woff2 CHANGED Viewed

Binary file

package/www/fonts/raleway-modified-600--italic/raleway-modified-600--italic.otf ADDED Viewed

Binary file

package/www/fonts/raleway-modified-600--italic/raleway-modified-600--italic.ttf ADDED Viewed

Binary file

package/www/fonts/raleway-modified-600--italic/raleway-modified-600--italic.woff2 ADDED Viewed

Binary file

package/www/fonts/raleway-modified-700/raleway-modified-700.otf ADDED Viewed

Binary file

package/www/fonts/raleway-modified-700/raleway-modified-700.ttf CHANGED Viewed

Binary file

package/www/fonts/raleway-modified-700/raleway-modified-700.woff2 CHANGED Viewed

Binary file

package/www/fonts/raleway-modified-700--italic/raleway-modified-700--italic.otf ADDED Viewed

Binary file

package/www/fonts/raleway-modified-700--italic/raleway-modified-700--italic.ttf ADDED Viewed

Binary file

package/www/fonts/raleway-modified-700--italic/raleway-modified-700--italic.woff2 ADDED Viewed

Binary file

package/www/french.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html dir="ltr" lang="fr">
 	<head>
 		<link rel="stylesheet" href="/build/ontario-design-system-components.css" />

package/www/i18n/global.i18n.json CHANGED Viewed

@@ -23,6 +23,16 @@
 			"fr": "Accessibilité"
 		}
 	},
+	"termsOfUse": {
+		"link": {
+			"en": "https://www.ontario.ca/page/terms-use",
+			"fr": "https://www.ontario.ca/fr/page/conditions-dutilisation"
+		},
+		"text": {
+			"en": "Terms of Use",
+			"fr": "Conditions d’utilisation"
+		}
+	},
 	"accordion": {
 		"collapse": {
 			"en": "Collapse all",

package/www/index.html CHANGED Viewed

@@ -1,17 +1,17 @@
-<!DOCTYPE html>
+<!doctype html>
 <html dir="ltr" lang="en">
 	<head>
-		<link rel="stylesheet" href="/build/p-5c2c7e30.css" />
+		<link rel="stylesheet" href="/build/p-77459959.css" />
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
 		<title>Ontario Design System - component samples</title>
-		<link rel="modulepreload" href="/build/p-fdc9ab6d.js" />
-		<link rel="modulepreload" href="/build/p-14fa9399.js" />
-		<link rel="modulepreload" href="/build/p-314395de.js" />
-		<link rel="modulepreload" href="/build/p-55c48d50.js" />
+		<link rel="modulepreload" href="/build/p-3f2d25b9.js" />
+		<link rel="modulepreload" href="/build/p-79293fd1.js" />
+		<link rel="modulepreload" href="/build/p-b2019a19.js" />
+		<link rel="modulepreload" href="/build/p-efc52a1c.js" />
 		<script
 			type="module"
-			src="/build/p-fdc9ab6d.js"
+			src="/build/p-3f2d25b9.js"
 			data-stencil
 			data-resources-url="/build/"
 			data-stencil-namespace="ontario-design-system-components"
@@ -68,6 +68,7 @@
 						<li><a href="#text-inputs">Text inputs</a></li>
 						<li><a href="#date-input">Date input</a></li>
 						<li><a href="#step-indicator">Step indicator</a></li>
+						<li><a href="#search-box">Search Box</a></li>
 						<li><a href="#form">Form example</a></li>
 					</ol>
 					<hr />
@@ -171,61 +172,260 @@
 					<div>
 						<h2 id="card">Card Collection &amp; Card</h2>
 						<div>
+							<h3>Basic cards (no images)</h3>
 							<ontario-card-collection cards-per-row="4">
-								<ontario-card-collection cards-per-row="2">
-									<ontario-card
-										card-type="horizonal"
-										label="Card Title 1"
-										image="https://picsum.photos/200/300"
-										card-link="https://google.ca"
-										horizontal-image-position-type="left"
-										horizontal-image-size-type="one-fourth"
-										description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
-									></ontario-card>
-									<ontario-card
-										card-type="horizonal"
-										label="Card Title 2"
-										image="https://picsum.photos/200/300"
-										horizontal-image-position-type="left"
-										horizontal-image-size-type="one-fourth"
-										description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
-									></ontario-card>
-								</ontario-card-collection>
 								<ontario-card
-									card-type="basic"
-									label="Card Title 3"
-									image="https://picsum.photos/200/300"
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									label="Card Title 1"
+								></ontario-card>
+								<ontario-card
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									header-colour="sky"
+									label="Card Title 2"
+								></ontario-card>
+								<ontario-card label="Card Title 3"></ontario-card>
+								<ontario-card header-colour="sky" label="Card Title 4"></ontario-card>
+							</ontario-card-collection>
+							<h3>Basic cards with 4:3 images</h3>
+							<ontario-card-collection cards-per-row="4">
+								<ontario-card
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									image="https://picsum.photos/300/225"
+									label="Card Title 1"
+								></ontario-card>
+								<ontario-card
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									image="https://picsum.photos/300/225"
+									header-colour="sky"
+									label="Card Title 2"
+								></ontario-card>
+								<ontario-card image="https://picsum.photos/300/225" label="Card Title 3"></ontario-card>
+								<ontario-card
+									header-colour="sky"
+									image="https://picsum.photos/300/225"
+									label="Card Title 4"
+								></ontario-card>
+							</ontario-card-collection>
+							<h3>Basic cards with 16:9 images</h3>
+							<ontario-card-collection cards-per-row="4">
+								<ontario-card
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									image="https://picsum.photos/300/169"
+									label="Card Title 1"
+								></ontario-card>
+								<ontario-card
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									image="https://picsum.photos/300/169"
+									header-colour="sky"
+									label="Card Title 2"
+								></ontario-card>
+								<ontario-card image="https://picsum.photos/300/169" label="Card Title 3"></ontario-card>
+								<ontario-card
+									header-colour="sky"
+									image="https://picsum.photos/300/169"
+									label="Card Title 4"
+								></ontario-card>
+							</ontario-card-collection>
+							<h3>Basic cards with 2:1 images</h3>
+							<ontario-card-collection cards-per-row="4">
+								<ontario-card
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									image="https://picsum.photos/300/150"
+									label="Card Title 1"
+								></ontario-card>
+								<ontario-card
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									image="https://picsum.photos/300/150"
+									header-colour="sky"
+									label="Card Title 2"
+								></ontario-card>
+								<ontario-card image="https://picsum.photos/300/150" label="Card Title 3"></ontario-card>
+								<ontario-card
+									header-colour="sky"
+									image="https://picsum.photos/300/150"
+									label="Card Title 4"
+								></ontario-card>
+							</ontario-card-collection>
+							<h3>Horizontal cards with left align 9:16 images (one-fourth size)</h3>
+							<ontario-card-collection cards-per-row="4">
+								<ontario-card
+									layout="horizontal"
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									image="https://picsum.photos/169/300"
 									horizontal-image-position-type="left"
 									horizontal-image-size-type="one-fourth"
+									label="Card Title 1"
+								></ontario-card>
+								<ontario-card
+									layout="horizontal"
 									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									image="https://picsum.photos/169/300"
+									header-colour="sky"
+									horizontal-image-position-type="left"
+									horizontal-image-size-type="one-fourth"
+									label="Card Title 2"
 								></ontario-card>
 								<ontario-card
-									card-type="basic"
-									label="Card Title 4"
-									image="https://picsum.photos/200/300"
+									layout="horizontal"
+									image="https://picsum.photos/169/300"
+									horizontal-image-position-type="left"
+									horizontal-image-size-type="one-fourth"
+									label="Card Title 3"
+								></ontario-card>
+								<ontario-card
+									layout="horizontal"
+									header-colour="sky"
+									image="https://picsum.photos/169/300"
 									horizontal-image-position-type="left"
 									horizontal-image-size-type="one-fourth"
+									label="Card Title 4"
+								></ontario-card>
+							</ontario-card-collection>
+							<h3>Horizontal cards with left align 9:16 images (one-third size)</h3>
+							<ontario-card-collection cards-per-row="4">
+								<ontario-card
+									layout="horizontal"
 									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									image="https://picsum.photos/169/300"
+									horizontal-image-position-type="left"
+									horizontal-image-size-type="one-third"
+									label="Card Title 1"
 								></ontario-card>
 								<ontario-card
-									card-type="basic"
-									label="Card Title 5"
-									image="https://picsum.photos/200/300"
+									layout="horizontal"
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									image="https://picsum.photos/169/300"
+									header-colour="sky"
+									horizontal-image-position-type="left"
+									horizontal-image-size-type="one-third"
+									label="Card Title 2"
+								></ontario-card>
+								<ontario-card
+									layout="horizontal"
+									image="https://picsum.photos/169/300"
 									horizontal-image-position-type="left"
+									horizontal-image-size-type="one-third"
+									label="Card Title 3"
+								></ontario-card>
+								<ontario-card
+									layout="horizontal"
+									header-colour="sky"
+									image="https://picsum.photos/169/300"
+									horizontal-image-position-type="left"
+									horizontal-image-size-type="one-third"
+									label="Card Title 4"
+								></ontario-card>
+							</ontario-card-collection>
+							<h3>Horizontal cards with right align 9:16 images (one-fourth size)</h3>
+							<ontario-card-collection cards-per-row="4">
+								<ontario-card
+									layout="horizontal"
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									image="https://picsum.photos/169/300"
+									horizontal-image-position-type="right"
+									horizontal-image-size-type="one-fourth"
+									label="Card Title 1"
+								></ontario-card>
+								<ontario-card
+									layout="horizontal"
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									image="https://picsum.photos/169/300"
+									header-colour="sky"
+									horizontal-image-position-type="right"
+									horizontal-image-size-type="one-fourth"
+									label="Card Title 2"
+								></ontario-card>
+								<ontario-card
+									layout="horizontal"
+									image="https://picsum.photos/169/300"
+									horizontal-image-position-type="right"
+									horizontal-image-size-type="one-fourth"
+									label="Card Title 3"
+								></ontario-card>
+								<ontario-card
+									layout="horizontal"
+									header-colour="sky"
+									image="https://picsum.photos/169/300"
+									horizontal-image-position-type="right"
 									horizontal-image-size-type="one-fourth"
+									label="Card Title 4"
+								></ontario-card>
+							</ontario-card-collection>
+							<h3>Horizontal cards with right align 9:16 images (one-third size)</h3>
+							<ontario-card-collection cards-per-row="4">
+								<ontario-card
+									layout="horizontal"
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									image="https://picsum.photos/169/300"
+									horizontal-image-position-type="right"
+									horizontal-image-size-type="one-third"
+									label="Card Title 1"
+								></ontario-card>
+								<ontario-card
+									layout="horizontal"
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									image="https://picsum.photos/169/300"
+									header-colour="sky"
+									horizontal-image-position-type="right"
+									horizontal-image-size-type="one-third"
+									label="Card Title 2"
+								></ontario-card>
+								<ontario-card
+									layout="horizontal"
+									image="https://picsum.photos/169/300"
+									horizontal-image-position-type="right"
+									horizontal-image-size-type="one-third"
+									label="Card Title 3"
+								></ontario-card>
+								<ontario-card
+									layout="horizontal"
+									header-colour="sky"
+									image="https://picsum.photos/169/300"
+									horizontal-image-position-type="right"
+									horizontal-image-size-type="one-third"
+									label="Card Title 4"
+								></ontario-card>
+							</ontario-card-collection>
+							<h3>Edge cases</h3>
+							<ontario-card-collection cards-per-row="3">
+								<ontario-card
+									header-colour="orange"
+									label="Card Title 1 Card Title 1 Card Title 1"
+									image="https://picsum.photos/200/300"
+								></ontario-card>
+								<ontario-card
+									header-colour="sky"
+									label="Card Title 2"
+									image="https://picsum.photos/200/300"
 									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
 								></ontario-card>
 								<ontario-card
-									card-type="basic"
-									label="Card Title 6"
+									label="Card Title 3"
+									image="https://picsum.photos/200/300"
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+								></ontario-card>
+							</ontario-card-collection>
+							<ontario-card-collection cards-per-row="2">
+								<ontario-card
+									layout="horizontal"
+									header-colour="orange"
+									label="Card Title 1 Card Title 1 Card Title 1"
+									image="https://picsum.photos/200/300"
+									horizontal-image-position-type="left"
+									horizontal-image-size-type="one-third"
+								></ontario-card>
+								<ontario-card
+									layout="horizontal"
+									header-colour="sky"
+									label="Card Title 2"
 									image="https://picsum.photos/200/300"
 									horizontal-image-position-type="left"
 									horizontal-image-size-type="one-fourth"
 									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
 								></ontario-card>
 								<ontario-card
-									card-type="basic"
-									label="Card Title 7"
+									layout="horizontal"
+									label="Card Title 3"
 									image="https://picsum.photos/200/300"
 									horizontal-image-position-type="left"
 									horizontal-image-size-type="one-fourth"
@@ -905,6 +1105,33 @@
 							number-of-steps="5"
 						></ontario-step-indicator>
 					</div>
+					<hr />
+					<!-- Search box -->
+					<script>
+						window.addEventListener('load', () => {
+							console.log('Loaded Search Box Event Listener');
+							const searchBox = document.getElementById('ontario-search-box');
+							searchBox.performSearch = async ($value) => {
+								console.log('Performing search with value:', $value);
+							};
+							searchBox.addEventListener('searchOnSubmit', (event) => {
+								console.log('Search Event:', event);
+							});
+						});
+					</script>
+					<div>
+						<h2 id="search-box">Search box</h2>
+						<ontario-search-box
+							id="ontario-search-box"
+							caption='{
+							"captionText": "Search directory",
+							"captionType": "default"
+						}'
+							hint-text="Search by employee name or organization name."
+						></ontario-search-box>
+					</div>
+					<hr />
 					<div>
 						<!-- Form -->
 						<form id="sample-form">
@@ -1093,6 +1320,10 @@
 				},
 				"printerLink": {
 					"href": "https://www.ontario.ca/page/copyright-information"
+				},
+				"termsOfUseLink": {
+					"text": "Terms of Use",
+					"href": "https://www.ontario.ca/page/terms-use"
 				}
 			}'
 			social-links='{
@@ -1166,24 +1397,6 @@
 		></ontario-footer>
 		<ontario-back-to-top>
 			<script>
-				const changeLanguage = (e) => {
-					e.preventDefault();
-					let header = document.getElementById('ontarioHeader');
-					header.customLanguageToggle = () => {
-						setTimeout(() => {
-							window.location.href = '/french.html';
-							console.log(header);
-							console.log('Lang switch');
-						}, 5000);
-					};
-				};
-				window.addEventListener('load', changeLanguage);
-				function testFunction() {
-					alert('HELLO WORLD!');
-				}
 				function activateHeaderType(headerType) {
 					const ontarioHeaderElement = document.querySelector('ontario-header');
 					ontarioHeaderElement.type = headerType;

package/dist/cjs/app-globals-6f6b30a8.js DELETED Viewed

@@ -1,17 +0,0 @@
-'use strict';
-const index = require('./index-88d5cf20.js');
-index.setMode((elm) => {
-	// NOTE: you can write whatever you want here - it's up to you. This
-	// function must return one of the style "modes" defined in step 1.
-	return elm.type;
-});
-const globalFn = () => {};
-const globalScripts = globalFn;
-exports.globalScripts = globalScripts;
-//# sourceMappingURL=app-globals-6f6b30a8.js.map

package/dist/cjs/app-globals-6f6b30a8.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"app-globals-6f6b30a8.js","mappings":";;;;AAEAA,aAAO,CAAC,CAAC,GAAG;;;IAGX,OAAQ,GAAW,CAAC,IAAI,CAAC;AAC1B,CAAC,CAAC,CAAC;;;;ACLS,MAAC,aAAa,GAAGC;;;;","names":["setMode","appGlobalScript"],"sources":["src/global.ts","@stencil/core/internal/app-globals"],"sourcesContent":["import { setMode } from '@stencil/core';\n\nsetMode((elm) => {\n\t// NOTE: you can write whatever you want here - it's up to you. This\n\t// function must return one of the style \"modes\" defined in step 1.\n\treturn (elm as any).type;\n});\n","import appGlobalScript from '/builds/design-system/design-system/web-components/ontario-design-system-components/packages/ontario-design-system-component-library/src/global.ts';\nexport const globalScripts = appGlobalScript;\n"],"version":3}

package/dist/cjs/console-message-27a94faa.js DELETED Viewed

@@ -1,96 +0,0 @@
-'use strict';
-exports.ConsoleType = void 0;
-(function (ConsoleType) {
-	ConsoleType['Error'] = 'error';
-	ConsoleType['Info'] = 'info';
-	ConsoleType['Log'] = 'log';
-	ConsoleType['Warning'] = 'warning';
-})(exports.ConsoleType || (exports.ConsoleType = {}));
-var MessageStyle;
-(function (MessageStyle) {
-	MessageStyle['Regular'] = 'regular';
-	MessageStyle['Code'] = 'code';
-})(MessageStyle || (MessageStyle = {}));
-// system tag with formatting specifier
-const designSystemTag = 'Ontario Design System';
-// default font size for console messages
-const fontSize = '12px';
-// styles for the system tag in a string format
-// the `background-color`, `color`, `padding` and `border-radius` values are hardcoded because
-// they are specific for console message use case
-const tagStyles = [
-	'background-color: #367A76',
-	'border: none',
-	'color: white',
-	'padding: 2px 5px',
-	'text-align: center',
-	'text-decoration: none',
-	'display: inline-block',
-	'cursor: pointer',
-	'border-radius: 5px',
-].join(';');
-// styles for regular text in string format
-const regularTextStyles = ['font-family: sans-serif', `font-size: ${fontSize}`].join(';');
-// styles for code in string format
-const monospaceTextStyles = ['font-family: monospace', `font-size: ${fontSize}`].join(';');
-function addSpecifier(message) {
-	const styleSpecifier = '%c';
-	return styleSpecifier.concat(message);
-}
-// build and print console message with a fluent interface design
-class ConsoleMessageClass {
-	constructor() {
-		this.message = '';
-		this.styles = [];
-	}
-	// add the `Ontario Design System` tag to the beginning of the message
-	// the first call in the chain if a tag is required
-	addDesignSystemTag() {
-		this.message = addSpecifier(designSystemTag);
-		this.styles.push(tagStyles);
-		return this;
-	}
-	// build console message as regular text
-	addRegularText(text) {
-		this.addText(text, regularTextStyles);
-		return this;
-	}
-	// build console message as monospace text
-	addMonospaceText(text) {
-		this.addText(text, monospaceTextStyles);
-		return this;
-	}
-	// print message to console depending on the `ConsoleType`
-	// the last function call in the chain
-	printMessage(consoleType = exports.ConsoleType.Warning) {
-		const messageArray = [this.message, ...this.styles];
-		// pass array of arguments into the console function for printing depending on `consoleType`
-		// the `function.apply()` function handles array of arguments which allows list of arguments to be set programmatically
-		switch (consoleType) {
-			case exports.ConsoleType.Error:
-				console.error.apply(null, messageArray);
-				break;
-			case exports.ConsoleType.Info:
-				console.info.apply(null, messageArray);
-				break;
-			case exports.ConsoleType.Warning:
-				console.warn.apply(null, messageArray);
-				break;
-			default:
-				console.log.apply(null, messageArray);
-		}
-	}
-	// add text to the `message` property and associated styles into the `styles` array
-	addText(text, style) {
-		if (text && (text === null || text === void 0 ? void 0 : text.trim().length) > 0) {
-			this.message += addSpecifier(text);
-			this.styles.push(style);
-		}
-	}
-}
-exports.ConsoleMessageClass = ConsoleMessageClass;
-//# sourceMappingURL=console-message-27a94faa.js.map

package/dist/cjs/console-message-27a94faa.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"console-message-27a94faa.js","mappings":";;AAAYA;AAAZ,WAAY,WAAW;IACtB,8BAAe,CAAA;IACf,4BAAa,CAAA;IACb,0BAAW,CAAA;IACX,kCAAmB,CAAA;AACpB,CAAC,EALWA,mBAAW,KAAXA,mBAAW,QAKtB;AAED,IAAY,YAGX;AAHD,WAAY,YAAY;IACvB,mCAAmB,CAAA;IACnB,6BAAa,CAAA;AACd,CAAC,EAHW,YAAY,KAAZ,YAAY;;ACJxB;AACA,MAAM,eAAe,GAAG,uBAAuB,CAAC;AAEhD;AACA,MAAM,QAAQ,GAAG,MAAM,CAAC;AAExB;AACA;AACA;AACA,MAAM,SAAS,GAAG;IACjB,2BAA2B;IAC3B,cAAc;IACd,cAAc;IACd,kBAAkB;IAClB,oBAAoB;IACpB,uBAAuB;IACvB,uBAAuB;IACvB,iBAAiB;IACjB,oBAAoB;CACpB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ;AACA,MAAM,iBAAiB,GAAG,CAAC,yBAAyB,EAAE,cAAc,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAE1F;AACA,MAAM,mBAAmB,GAAG,CAAC,wBAAwB,EAAE,cAAc,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAE3F,SAAS,YAAY,CAAC,OAAe;IACpC,MAAM,cAAc,GAAG,IAAI,CAAC;IAC5B,OAAO,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;AACvC,CAAC;AAwDD;MACa,mBAAmB;IAI/B;QACC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QAClB,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;KACjB;;;IAID,kBAAkB;QACjB,IAAI,CAAC,OAAO,GAAG,YAAY,CAAC,eAAe,CAAC,CAAC;QAC7C,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC5B,OAAO,IAAI,CAAC;KACZ;;IAGD,cAAc,CAAC,IAAY;QAC1B,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;QACtC,OAAO,IAAI,CAAC;KACZ;;IAGD,gBAAgB,CAAC,IAAY;QAC5B,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,mBAAmB,CAAC,CAAC;QACxC,OAAO,IAAI,CAAC;KACZ;;;IAID,YAAY,CAAC,WAAW,GAAGA,mBAAW,CAAC,OAAO;QAC7C,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;;;QAIpD,QAAQ,WAAW;YAClB,KAAKA,mBAAW,CAAC,KAAK;gBACrB,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;gBACxC,MAAM;YACP,KAAKA,mBAAW,CAAC,IAAI;gBACpB,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;gBACvC,MAAM;YACP,KAAKA,mBAAW,CAAC,OAAO;gBACvB,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;gBACvC,MAAM;YACP;gBACC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;SACvC;KACD;;IAGO,OAAO,CAAC,IAAY,EAAE,KAAa;QAC1C,IAAI,IAAI,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,GAAG,MAAM,IAAG,CAAC,EAAE;YACpC,IAAI,CAAC,OAAO,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC;YACnC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACxB;KACD;;;;;","names":["ConsoleType"],"sources":["src/utils/console-message/console-message.enum.ts","src/utils/console-message/console-message.ts"],"sourcesContent":["export enum ConsoleType {\n\tError = 'error',\n\tInfo = 'info',\n\tLog = 'log',\n\tWarning = 'warning',\n}\n\nexport enum MessageStyle {\n\tRegular = 'regular',\n\tCode = 'code',\n}\n","import { ConsoleMessage } from './console-message.interface';\nimport { ConsoleType, MessageStyle } from './console-message.enum';\n\n// system tag with formatting specifier\nconst designSystemTag = 'Ontario Design System';\n\n// default font size for console messages\nconst fontSize = '12px';\n\n// styles for the system tag in a string format\n// the `background-color`, `color`, `padding` and `border-radius` values are hardcoded because\n// they are specific for console message use case\nconst tagStyles = [\n\t'background-color: #367A76',\n\t'border: none',\n\t'color: white',\n\t'padding: 2px 5px',\n\t'text-align: center',\n\t'text-decoration: none',\n\t'display: inline-block',\n\t'cursor: pointer',\n\t'border-radius: 5px',\n].join(';');\n\n// styles for regular text in string format\nconst regularTextStyles = ['font-family: sans-serif', `font-size: ${fontSize}`].join(';');\n\n// styles for code in string format\nconst monospaceTextStyles = ['font-family: monospace', `font-size: ${fontSize}`].join(';');\n\nfunction addSpecifier(message: string): string {\n\tconst styleSpecifier = '%c';\n\treturn styleSpecifier.concat(message);\n}\n\n// print message to console depending on the `ConsoleType`\nexport function printConsoleMessage(\n\tmessages: ConsoleMessage[] | string,\n\tconsoleType = ConsoleType.Warning,\n\thasDesignSystemTag = true,\n) {\n\t// retrieve message from each object and concatenate them into one single string in order\n\t// if `hasSystemTag` is true then the message string will being with the value stored within `designSystemTag`.\n\tconst message =\n\t\ttypeof messages === 'string' // Note the TypeScript transpiler Stencil is using doesn't like this type guard as a const.\n\t\t\t? `${addSpecifier(designSystemTag)}${addSpecifier(` ${messages}`)}`\n\t\t\t: messages?.reduce(\n\t\t\t\t\t(message: string, currentObject: ConsoleMessage) => (message += addSpecifier(currentObject.message) ?? ''),\n\t\t\t\t\thasDesignSystemTag ? addSpecifier(designSystemTag) : '',\n\t\t\t );\n\n\t// array of arguments to be passed into the the console function\n\tconst messageArray: string[] = [];\n\n\t// push message into the array of arguments\n\t// depending on whether the system tag is used (i.e. `hasSystemTag` is true), push `tagStyles` into the array\n\tif (hasDesignSystemTag) {\n\t\tmessageArray.push(message, tagStyles);\n\t} else {\n\t\tmessageArray.push(message);\n\t}\n\n\t// Note the TypeScript transpiler Stencil is using doesn't like this type guard as a const.\n\tif (typeof messages === 'string') {\n\t\tmessageArray.push(regularTextStyles);\n\t} else {\n\t\t// push style of each message into the array of arguments in order\n\t\tmessages?.forEach((message: ConsoleMessage) => {\n\t\t\tmessageArray.push(message.style && message.style === MessageStyle.Code ? monospaceTextStyles : regularTextStyles);\n\t\t});\n\t}\n\n\t// pass array of arguments into the console function for printing depending on `consoleType`\n\t// the `function.apply()` function handles array of arguments which allows list of arguments to be set programmatically\n\tswitch (consoleType) {\n\t\tcase ConsoleType.Error:\n\t\t\treturn console.error.apply(null, messageArray);\n\n\t\tcase ConsoleType.Info:\n\t\t\treturn console.info.apply(null, messageArray);\n\n\t\tcase ConsoleType.Warning:\n\t\t\treturn console.warn.apply(null, messageArray);\n\n\t\tdefault:\n\t\t\treturn console.log.apply(null, messageArray);\n\t}\n}\n\n// build and print console message with a fluent interface design\nexport class ConsoleMessageClass {\n\tmessage: string;\n\tstyles: string[];\n\n\tconstructor() {\n\t\tthis.message = '';\n\t\tthis.styles = [];\n\t}\n\n\t// add the `Ontario Design System` tag to the beginning of the message\n\t// the first call in the chain if a tag is required\n\taddDesignSystemTag() {\n\t\tthis.message = addSpecifier(designSystemTag);\n\t\tthis.styles.push(tagStyles);\n\t\treturn this;\n\t}\n\n\t// build console message as regular text\n\taddRegularText(text: string) {\n\t\tthis.addText(text, regularTextStyles);\n\t\treturn this;\n\t}\n\n\t// build console message as monospace text\n\taddMonospaceText(text: string) {\n\t\tthis.addText(text, monospaceTextStyles);\n\t\treturn this;\n\t}\n\n\t// print message to console depending on the `ConsoleType`\n\t// the last function call in the chain\n\tprintMessage(consoleType = ConsoleType.Warning) {\n\t\tconst messageArray = [this.message, ...this.styles];\n\n\t\t// pass array of arguments into the console function for printing depending on `consoleType`\n\t\t// the `function.apply()` function handles array of arguments which allows list of arguments to be set programmatically\n\t\tswitch (consoleType) {\n\t\t\tcase ConsoleType.Error:\n\t\t\t\tconsole.error.apply(null, messageArray);\n\t\t\t\tbreak;\n\t\t\tcase ConsoleType.Info:\n\t\t\t\tconsole.info.apply(null, messageArray);\n\t\t\t\tbreak;\n\t\t\tcase ConsoleType.Warning:\n\t\t\t\tconsole.warn.apply(null, messageArray);\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tconsole.log.apply(null, messageArray);\n\t\t}\n\t}\n\n\t// add text to the `message` property and associated styles into the `styles` array\n\tprivate addText(text: string, style: string) {\n\t\tif (text && text?.trim().length > 0) {\n\t\t\tthis.message += addSpecifier(text);\n\t\t\tthis.styles.push(style);\n\t\t}\n\t}\n}\n"],"version":3}