@ongov/ontario-design-system-component-library 6.0.0-alpha.3 → 6.0.0-alpha.4

package/dist/collection/components/ontario-icon/ontario-icon-sentiment-1.js

@@ -89,14 +89,14 @@ export class OntarioIconSentiment1 {
 		return h(
 			'div',
 			{
-				key: '7aae1b69a23cd62289f95e150363236698b41f92',
+				key: '88bdc1e685809ebd24eef145b58801143a03696c',
 				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			h(
 				'svg',
 				{
-					key: '873245d5302b7e78c715f8d0474fd101cf319404',
+					key: 'ec50cf85f515c31524b81ce73c228f5f6e62d99e',
 					class: 'svg-icon',
 					style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
 					role: 'img',
@@ -105,7 +105,7 @@ export class OntarioIconSentiment1 {
 					id: 'sentiment-1',
 				},
 				h('path', {
-					key: '009c50c837d4db771680615ece33d4e5e1932923',
+					key: '09f5e05b9cfabd8ac13404ddab447e06cfc53da4',
 					d: 'M12 2a10 10 0 1 0 0 20 10.01 10.01 0 0 0 10-10A10.01 10.01 0 0 0 11.99 2zm0 18a8 8 0 1 1 0-16 8 8 0 1 1 0 16zm0-6c-2.33 0-4.32 1.45-5.12 3.5h1.67c.7-1.2 1.97-2 3.45-2s2.75.8 3.45 2h1.67c-.8-2.05-2.8-3.5-5.12-3.5zm3.5-3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 1 0 0 3zm-7 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 1 0 0 3z',
 				}),
 			),

package/dist/collection/components/ontario-icon/ontario-icon-sentiment-2.js

@@ -89,14 +89,14 @@ export class OntarioIconSentiment2 {
 		return h(
 			'div',
 			{
-				key: '6dfd9735c20a90eac7276cac4f8b003e5444bef9',
+				key: 'cfe7eb4b74d457ee166c39001b970118c7efc307',
 				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			h(
 				'svg',
 				{
-					key: 'b7dc091e05747228fdc08b5f8bf7f2189dacc7f0',
+					key: 'd80a0fcd740fd9874d0eee25b2a7c6404c05d5be',
 					class: 'svg-icon',
 					style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
 					role: 'img',
@@ -105,7 +105,7 @@ export class OntarioIconSentiment2 {
 					id: 'sentiment-2',
 				},
 				h('path', {
-					key: '4a3499184980e80bd53378b358998165315113cd',
+					key: 'ed06f8c250ed7cea2efb75e42a7ba50e9903290b',
 					d: 'M12 2a10 10 0 1 0 0 20 10.01 10.01 0 0 0 10-10A10.01 10.01 0 0 0 11.99 2zm0 18a8 8 0 1 1 0-16 8 8 0 1 1 0 16zm0-3.5c.73 0 1.4.2 1.97.53l1-1.14A5.39 5.39 0 0 0 12 15a5.61 5.61 0 0 0-3 .88c.97 1.1.01.02 1 1.14a4.03 4.03 0 0 1 1.98-.52zm3.5-5.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 1 0 0 3zm-7 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 1 0 0 3z',
 				}),
 			),

package/dist/collection/components/ontario-icon/ontario-icon-sentiment-3.js

@@ -89,14 +89,14 @@ export class OntarioIconSentiment3 {
 		return h(
 			'div',
 			{
-				key: '23f916df481e6838ff53673e1bb3913c0b8d3791',
+				key: 'fb53dc6930bd254ab4d9c6fabce842a029b75d39',
 				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			h(
 				'svg',
 				{
-					key: '1fb19ba33ff80a9c46316dd299fcf7914df9b7b9',
+					key: '494bba210fe2e5f5ca45d917c67b44ecb966888e',
 					class: 'svg-icon',
 					style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
 					role: 'img',
@@ -105,7 +105,7 @@ export class OntarioIconSentiment3 {
 					id: 'sentiment-3',
 				},
 				h('path', {
-					key: '0708f4e5e143250a32d9f37e82a1373b602b4b8d',
+					key: '8921d2a75b1745fc6dfbc36761c0b334347335bd',
 					d: 'M12 2a10 10 0 1 0 0 20 10.01 10.01 0 0 0 10-10A10.01 10.01 0 0 0 11.99 2zm0 18a8 8 0 1 1 0-16 8 8 0 1 1 0 16zm0-4a3.8 3.8 0 0 1-1.96-.52l-1 1.15c.86.55 1.87.87 2.97.87a5.49 5.49 0 0 0 2.98-.88c-.97-1.1-.01-.02-1-1.15a3.8 3.8 0 0 1-1.97.53zm3.5-5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 1 0 0 3zm-7 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 1 0 0 3z',
 				}),
 			),

package/dist/collection/components/ontario-icon/ontario-icon-sentiment-4.js

@@ -89,14 +89,14 @@ export class OntarioIconSentiment4 {
 		return h(
 			'div',
 			{
-				key: 'bd077fd6d4baee243eb59276f9f3eae1afe586f2',
+				key: '0cc6280606da4f95fba280e657ddea4e29a7cb70',
 				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			h(
 				'svg',
 				{
-					key: '7b253e0c55fb8ed742034ae9ab5a47891ea839bf',
+					key: 'e711dda58b04f460d691dc121cba7caf44b87d24',
 					class: 'svg-icon',
 					style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
 					role: 'img',
@@ -105,7 +105,7 @@ export class OntarioIconSentiment4 {
 					id: 'sentiment-4',
 				},
 				h('path', {
-					key: '005f3689419efdd366b61f11561869e1410a8c4a',
+					key: '7c8a0d6f824989040b2c35722f1e777901354832',
 					d: 'M12 2a10 10 0 1 0 0 20 10.01 10.01 0 0 0 10-10A10.01 10.01 0 0 0 11.99 2zm0 18a8 8 0 1 1 0-16 8 8 0 1 1 0 16zm0-2.5c2.33 0 4.32-1.45 5.12-3.5h-1.67c-.7 1.2-1.97 2-3.45 2s-2.75-.8-3.45-2H6.88c.8 2.05 2.8 3.5 5.12 3.5zm3.5-6.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 1 0 0 3zm-7 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 1 0 0 3z',
 				}),
 			),

package/dist/collection/components/ontario-icon/ontario-icon-sentiment-5.js

@@ -89,14 +89,14 @@ export class OntarioIconSentiment5 {
 		return h(
 			'div',
 			{
-				key: '3884294a73d0e1d95c2b4b3f7cfdc7c738ba42bd',
+				key: 'ea3705964cd4890748bcfd25bbc1dfe73b8f0e40',
 				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			h(
 				'svg',
 				{
-					key: '5fcd73fc32deb10f0be1616a6e7f7f21ecd5f971',
+					key: 'fa2a28fad7a5583c60be0e0fbf49bb86cd735d1c',
 					class: 'svg-icon',
 					style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
 					role: 'img',
@@ -105,7 +105,7 @@ export class OntarioIconSentiment5 {
 					id: 'sentiment-5',
 				},
 				h('path', {
-					key: '174988015757a24a1dcf175bd21383db17ccba53',
+					key: '0a64ae0434b5b7c75ee5c9bc18265d1c5f76472e',
 					d: 'M12 2a10 10 0 1 0 0 20 10.01 10.01 0 0 0 10-10A10.01 10.01 0 0 0 11.99 2zm0 18a8 8 0 1 1 0-16 8 8 0 1 1 0 16zm-5-6c.78 2.34 2.72 4 5 4s4.22-1.66 5-4H7zm8.5-3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 1 0 0 3zm-7 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 1 0 0 3z',
 				}),
 			),

package/dist/collection/components/ontario-icon/ontario-icon-settings.js

@@ -89,14 +89,14 @@ export class OntarioIconSettings {
 		return h(
 			'div',
 			{
-				key: 'f1dd0c7a3d54c98a0e0e8615f31dced5197700d7',
+				key: '5a7aab1b6f1133a4a9854a432f647da669de343d',
 				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			h(
 				'svg',
 				{
-					key: 'abdaa6552e0e2fea2c5c79247522f94a84e67c50',
+					key: 'd4636fe20b7495630d13a004846e1e5b3eed0e44',
 					class: 'svg-icon',
 					style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
 					role: 'img',
@@ -105,7 +105,7 @@ export class OntarioIconSettings {
 					id: 'settings',
 				},
 				h('path', {
-					key: 'f6d44a962f698a9dbb7b72e754471368081ec236',
+					key: '7d862ff087187afdfa7b84d486c1a333720fa2f9',
 					d: 'M12 15.5A3.5 3.5 0 0 1 8.5 12 3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5zm7.43-2.53a7.77 7.77 0 0 0 .07-.97 8.55 8.55 0 0 0-.07-1l2.1-1.63c.2-.15.24-.42.12-.64l-2-3.46a.49.49 0 0 0-.61-.22l-2.5 1c-.52-.4-1.06-.73-1.7-.98l-.37-2.65c-.04-.24-.25-.42-.5-.42h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.6-1.7.98l-2.5-1a.49.49 0 0 0-.61.22l-2 3.46c-.13.22-.07.5.12.64L4.57 11l-.07 1a7.77 7.77 0 0 0 .07.97l-2.1 1.66c-.2.15-.25.42-.12.64l2 3.46c.12.22.4.3.6.22l2.5-1c.52.4 1.06.74 1.7 1l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65a7.28 7.28 0 0 0 1.69-.99l2.5 1c.22.08.5 0 .6-.22l2-3.46c.12-.22.07-.5-.12-.64l-2.1-1.66z',
 				}),
 			),

package/dist/collection/components/ontario-icon/ontario-icon-share.js

@@ -89,14 +89,14 @@ export class OntarioIconShare {
 		return h(
 			'div',
 			{
-				key: '959c9927fc884208edcf1e58fc0cbd6323ebbdb3',
+				key: '5b91d08854688715f84839cdd21209a663984f47',
 				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			h(
 				'svg',
 				{
-					key: 'b2034b98a2b4d1dfd107cdaf5df98a388524d409',
+					key: 'bd73af85bf8536cb7e9dc8e1539108c21bb6de30',
 					class: 'svg-icon',
 					style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
 					role: 'img',
@@ -105,7 +105,7 @@ export class OntarioIconShare {
 					id: 'share',
 				},
 				h('path', {
-					key: '7c847ab5025d757e5deed78df38ab8bd5ff6954c',
+					key: '8e4d7d63264c742a0b0199c2444546d0eefcab00',
 					d: 'M18 16.08c-.76 0-1.44.3-1.96.77L8.9 12.7c.05-.23.1-.46.1-.7s-.04-.47-.1-.7l7.05-4.1c.54.5 1.25.8 2.04.8 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.1.7L8.04 9.8C7.5 9.3 6.8 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.8 0 1.5-.3 2.04-.8l7.12 4.16a2.82 2.82 0 0 0-.08.65c0 1.6 1.3 2.92 2.92 2.92s2.92-1.3 2.92-2.92-1.3-2.92-2.92-2.92z',
 				}),
 			),

package/dist/collection/components/ontario-icon/ontario-icon-sort-alphabetical-ascending.js

@@ -0,0 +1,207 @@
+// content automatically generated by `generate-icons.js` begins
+import { h } from '@stencil/core';
+import { IconColours } from './icon.types';
+import { ConsoleMessageClass } from '../../utils/console-message/console-message';
+import { validateValueAgainstArray } from '../../utils/validation/validation-functions';
+import validateColor from 'validate-color';
+export class OntarioIconSortAlphabeticalAscending {
+	constructor() {
+		/**
+		 * The icon width will autogenerate the height since the icons are in square format, thus preserving
+		 * the aspect ratio.
+		 */
+		this.iconWidth = 24;
+		/**
+		 * Set the icon's colour.
+		 */
+		this.colour = 'black';
+	}
+	/**
+	 * Watch for changes in the `iconWidth` variable for validation purpose.
+	 * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).
+	 */
+	validateWidth() {
+		if (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {
+			const message = new ConsoleMessageClass();
+			message
+				.addDesignSystemTag()
+				.addMonospaceText(' icon-width ')
+				.addRegularText('on')
+				.addMonospaceText(' <ontario-icon-sort-alphabetical-ascending> ')
+				.addRegularText(
+					`${isNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'}; only a positive number is allowed. The default size of`,
+				)
+				.addMonospaceText(' 24px ')
+				.addRegularText('was assumed.')
+				.printMessage();
+			this.iconWidthState = 24;
+		} else {
+			this.iconWidthState = this.iconWidth;
+		}
+	}
+	/**
+	 * Watch for changes in the `colour` variable for validation purpose.
+	 * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).
+	 * If a match is found in one of the enum values then `colour` will be set to the matching enum value.
+	 */
+	validateColour() {
+		const isValid = validateValueAgainstArray(this.colour, IconColours);
+		if (isValid) {
+			this.iconColourState = this.colour;
+		} else {
+			if (validateColor(this.colour)) {
+				this.iconCustomColourState = this.colour;
+			} else {
+				this.iconColourState = this.warnDefaultColour();
+			}
+		}
+	}
+	/**
+	 * Print the invalid colour warning message
+	 * @returns default colour (black)
+	 */
+	warnDefaultColour() {
+		const message = new ConsoleMessageClass();
+		message
+			.addDesignSystemTag()
+			.addMonospaceText(' colour ')
+			.addRegularText('on')
+			.addMonospaceText(' <ontario-icon-sort-alphabetical-ascending> ')
+			.addRegularText('was set to an invalid colour; only')
+			.addMonospaceText(' black, blue, grey or white ')
+			.addRegularText('are supported. The default colour')
+			.addMonospaceText(' black ')
+			.addRegularText('is assumed.')
+			.printMessage();
+		return 'black';
+	}
+	/**
+	 * Stencil component lifecycle method that is called once after the component is first connected to the DOM.
+	 */
+	componentWillLoad() {
+		this.validateColour();
+		this.validateWidth();
+	}
+	/**
+	 * Returns the HTML code to be rendered into a custom element.
+	 */
+	render() {
+		return h(
+			'div',
+			{
+				key: '8644c8bc0664e5cbe322ed20cadb3494a50bbbd2',
+				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
+				style: { width: `${this.iconWidthState}px` },
+			},
+			h(
+				'svg',
+				{
+					key: '27c8905e4e4fc14b9380005897f03286b53e9363',
+					width: '24',
+					height: '24',
+					viewBox: '0 0 24 24',
+					fill: 'none',
+					xmlns: 'http://www.w3.org/2000/svg',
+					id: 'sort-alphabetical-ascending',
+				},
+				h('path', {
+					key: '07639a33465cc5c76754dbd2799ee2cdabd6c58d',
+					d: 'M19 17H22L18 21L14 17H17V3H19M11 13V15L7.67 19H11V21H5V19L8.33 15H5V13M9 3H7C5.9 3 5 3.9 5 5V11H7V9H9V11H11V5C11 3.9 10.11 3 9 3ZM9 7H7V5H9V7Z',
+				}),
+			),
+		);
+	}
+	static get is() {
+		return 'ontario-icon-sort-alphabetical-ascending';
+	}
+	static get encapsulation() {
+		return 'shadow';
+	}
+	static get originalStyleUrls() {
+		return {
+			$: ['ontario-icon.scss'],
+		};
+	}
+	static get styleUrls() {
+		return {
+			$: ['ontario-icon.css'],
+		};
+	}
+	static get properties() {
+		return {
+			iconWidth: {
+				type: 'number',
+				attribute: 'icon-width',
+				mutable: false,
+				complexType: {
+					original: 'IconSize',
+					resolved: '16 | 24 | 32 | 48',
+					references: {
+						IconSize: {
+							location: 'import',
+							path: './icon.types',
+							id: 'src/components/ontario-icon/icon.types.ts::IconSize',
+						},
+					},
+				},
+				required: false,
+				optional: false,
+				docs: {
+					tags: [],
+					text: 'The icon width will autogenerate the height since the icons are in square format, thus preserving\nthe aspect ratio.',
+				},
+				getter: false,
+				setter: false,
+				reflect: false,
+				defaultValue: '24',
+			},
+			colour: {
+				type: 'string',
+				attribute: 'colour',
+				mutable: false,
+				complexType: {
+					original: 'IconColour',
+					resolved: '"black" | "blue" | "grey" | "inherit" | "white"',
+					references: {
+						IconColour: {
+							location: 'import',
+							path: './icon.types',
+							id: 'src/components/ontario-icon/icon.types.ts::IconColour',
+						},
+					},
+				},
+				required: false,
+				optional: false,
+				docs: {
+					tags: [],
+					text: "Set the icon's colour.",
+				},
+				getter: false,
+				setter: false,
+				reflect: false,
+				defaultValue: "'black'",
+			},
+		};
+	}
+	static get states() {
+		return {
+			iconWidthState: {},
+			iconColourState: {},
+			iconCustomColourState: {},
+		};
+	}
+	static get watchers() {
+		return [
+			{
+				propName: 'iconWidth',
+				methodName: 'validateWidth',
+			},
+			{
+				propName: 'colour',
+				methodName: 'validateColour',
+			},
+		];
+	}
+}
+// content automatically generated by `generate-icons.js` ends
+//# sourceMappingURL=ontario-icon-sort-alphabetical-ascending.js.map

package/dist/collection/components/ontario-icon/ontario-icon-sort-alphabetical-ascending.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-icon-sort-alphabetical-ascending.js","sourceRoot":"","sources":["../../../src/components/ontario-icon/ontario-icon-sort-alphabetical-ascending.tsx"],"names":[],"mappings":"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","sourcesContent":["// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State } from '@stencil/core';\nimport { IconWithColour } from './icon.interface';\nimport { IconSize, IconColour, IconColours } from './icon.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport validateColor from 'validate-color';\n\n@Component({\n\ttag: 'ontario-icon-sort-alphabetical-ascending',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconSortAlphabeticalAscending implements IconWithColour {\n\t/**\n\t * The icon width will autogenerate the height since the icons are in square format, thus preserving\n\t * the aspect ratio.\n\t */\n\t@Prop() iconWidth: IconSize = 24;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's width depending on validation result.\n\t */\n\t@State() iconWidthState: number;\n\n\t/**\n\t * Watch for changes in the `iconWidth` variable for validation purpose.\n\t * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).\n\t */\n\t@Watch('iconWidth')\n\tvalidateWidth() {\n\t\tif (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' icon-width ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-sort-alphabetical-ascending> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${isNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'}; only a positive number is allowed. The default size of`,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 24px ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.iconWidthState = 24;\n\t\t} else {\n\t\t\tthis.iconWidthState = this.iconWidth;\n\t\t}\n\t}\n\n\t/**\n\t * Set the icon's colour.\n\t */\n\t@Prop() colour: IconColour = 'black';\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconColourState: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconCustomColourState: string;\n\n\t/**\n\t * Watch for changes in the `colour` variable for validation purpose.\n\t * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).\n\t * If a match is found in one of the enum values then `colour` will be set to the matching enum value.\n\t */\n\t@Watch('colour')\n\tvalidateColour() {\n\t\tconst isValid = validateValueAgainstArray(this.colour, IconColours);\n\t\tif (isValid) {\n\t\t\tthis.iconColourState = this.colour;\n\t\t} else {\n\t\t\tif (validateColor(this.colour)) {\n\t\t\t\tthis.iconCustomColourState = this.colour;\n\t\t\t} else {\n\t\t\t\tthis.iconColourState = this.warnDefaultColour();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid colour warning message\n\t * @returns default colour (black)\n\t */\n\tprivate warnDefaultColour(): IconColour {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' colour ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-icon-sort-alphabetical-ascending> ')\n\t\t\t.addRegularText('was set to an invalid colour; only')\n\t\t\t.addMonospaceText(' black, blue, grey or white ')\n\t\t\t.addRegularText('are supported. The default colour')\n\t\t\t.addMonospaceText(' black ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'black';\n\t}\n\n\t/**\n\t * Stencil component lifecycle method that is called once after the component is first connected to the DOM.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateWidth();\n\t}\n\n\t/**\n\t * Returns the HTML code to be rendered into a custom element.\n\t */\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={`ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`}\n\t\t\t\tstyle={{ width: `${this.iconWidthState}px` }}\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\twidth=\"24\"\n\t\t\t\t\theight=\"24\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tid=\"sort-alphabetical-ascending\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M19 17H22L18 21L14 17H17V3H19M11 13V15L7.67 19H11V21H5V19L8.33 15H5V13M9 3H7C5.9 3 5 3.9 5 5V11H7V9H9V11H11V5C11 3.9 10.11 3 9 3ZM9 7H7V5H9V7Z\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n}\n// content automatically generated by `generate-icons.js` ends\n"]}

package/dist/collection/components/ontario-icon/ontario-icon-sort-alphabetical-descending.js

@@ -0,0 +1,207 @@
+// content automatically generated by `generate-icons.js` begins
+import { h } from '@stencil/core';
+import { IconColours } from './icon.types';
+import { ConsoleMessageClass } from '../../utils/console-message/console-message';
+import { validateValueAgainstArray } from '../../utils/validation/validation-functions';
+import validateColor from 'validate-color';
+export class OntarioIconSortAlphabeticalDescending {
+	constructor() {
+		/**
+		 * The icon width will autogenerate the height since the icons are in square format, thus preserving
+		 * the aspect ratio.
+		 */
+		this.iconWidth = 24;
+		/**
+		 * Set the icon's colour.
+		 */
+		this.colour = 'black';
+	}
+	/**
+	 * Watch for changes in the `iconWidth` variable for validation purpose.
+	 * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).
+	 */
+	validateWidth() {
+		if (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {
+			const message = new ConsoleMessageClass();
+			message
+				.addDesignSystemTag()
+				.addMonospaceText(' icon-width ')
+				.addRegularText('on')
+				.addMonospaceText(' <ontario-icon-sort-alphabetical-descending> ')
+				.addRegularText(
+					`${isNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'}; only a positive number is allowed. The default size of`,
+				)
+				.addMonospaceText(' 24px ')
+				.addRegularText('was assumed.')
+				.printMessage();
+			this.iconWidthState = 24;
+		} else {
+			this.iconWidthState = this.iconWidth;
+		}
+	}
+	/**
+	 * Watch for changes in the `colour` variable for validation purpose.
+	 * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).
+	 * If a match is found in one of the enum values then `colour` will be set to the matching enum value.
+	 */
+	validateColour() {
+		const isValid = validateValueAgainstArray(this.colour, IconColours);
+		if (isValid) {
+			this.iconColourState = this.colour;
+		} else {
+			if (validateColor(this.colour)) {
+				this.iconCustomColourState = this.colour;
+			} else {
+				this.iconColourState = this.warnDefaultColour();
+			}
+		}
+	}
+	/**
+	 * Print the invalid colour warning message
+	 * @returns default colour (black)
+	 */
+	warnDefaultColour() {
+		const message = new ConsoleMessageClass();
+		message
+			.addDesignSystemTag()
+			.addMonospaceText(' colour ')
+			.addRegularText('on')
+			.addMonospaceText(' <ontario-icon-sort-alphabetical-descending> ')
+			.addRegularText('was set to an invalid colour; only')
+			.addMonospaceText(' black, blue, grey or white ')
+			.addRegularText('are supported. The default colour')
+			.addMonospaceText(' black ')
+			.addRegularText('is assumed.')
+			.printMessage();
+		return 'black';
+	}
+	/**
+	 * Stencil component lifecycle method that is called once after the component is first connected to the DOM.
+	 */
+	componentWillLoad() {
+		this.validateColour();
+		this.validateWidth();
+	}
+	/**
+	 * Returns the HTML code to be rendered into a custom element.
+	 */
+	render() {
+		return h(
+			'div',
+			{
+				key: '6ac12fa18c4d9eda35b5911325d4591f64689fc5',
+				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
+				style: { width: `${this.iconWidthState}px` },
+			},
+			h(
+				'svg',
+				{
+					key: '7386eba129b043c1d904fea6e2e23c8f2c1e022c',
+					width: '24',
+					height: '24',
+					viewBox: '0 0 24 24',
+					fill: 'none',
+					xmlns: 'http://www.w3.org/2000/svg',
+					id: 'sort-alphabetical-descending',
+				},
+				h('path', {
+					key: 'f2597ac0dfd5372ff1de235deebddd660bbe7f01',
+					d: 'M19 7H22L18 3L14 7H17V21H19M11 13V15L7.67 19H11V21H5V19L8.33 15H5V13M9 3H7C5.9 3 5 3.9 5 5V11H7V9H9V11H11V5C11 3.9 10.11 3 9 3ZM9 7H7V5H9V7Z',
+				}),
+			),
+		);
+	}
+	static get is() {
+		return 'ontario-icon-sort-alphabetical-descending';
+	}
+	static get encapsulation() {
+		return 'shadow';
+	}
+	static get originalStyleUrls() {
+		return {
+			$: ['ontario-icon.scss'],
+		};
+	}
+	static get styleUrls() {
+		return {
+			$: ['ontario-icon.css'],
+		};
+	}
+	static get properties() {
+		return {
+			iconWidth: {
+				type: 'number',
+				attribute: 'icon-width',
+				mutable: false,
+				complexType: {
+					original: 'IconSize',
+					resolved: '16 | 24 | 32 | 48',
+					references: {
+						IconSize: {
+							location: 'import',
+							path: './icon.types',
+							id: 'src/components/ontario-icon/icon.types.ts::IconSize',
+						},
+					},
+				},
+				required: false,
+				optional: false,
+				docs: {
+					tags: [],
+					text: 'The icon width will autogenerate the height since the icons are in square format, thus preserving\nthe aspect ratio.',
+				},
+				getter: false,
+				setter: false,
+				reflect: false,
+				defaultValue: '24',
+			},
+			colour: {
+				type: 'string',
+				attribute: 'colour',
+				mutable: false,
+				complexType: {
+					original: 'IconColour',
+					resolved: '"black" | "blue" | "grey" | "inherit" | "white"',
+					references: {
+						IconColour: {
+							location: 'import',
+							path: './icon.types',
+							id: 'src/components/ontario-icon/icon.types.ts::IconColour',
+						},
+					},
+				},
+				required: false,
+				optional: false,
+				docs: {
+					tags: [],
+					text: "Set the icon's colour.",
+				},
+				getter: false,
+				setter: false,
+				reflect: false,
+				defaultValue: "'black'",
+			},
+		};
+	}
+	static get states() {
+		return {
+			iconWidthState: {},
+			iconColourState: {},
+			iconCustomColourState: {},
+		};
+	}
+	static get watchers() {
+		return [
+			{
+				propName: 'iconWidth',
+				methodName: 'validateWidth',
+			},
+			{
+				propName: 'colour',
+				methodName: 'validateColour',
+			},
+		];
+	}
+}
+// content automatically generated by `generate-icons.js` ends
+//# sourceMappingURL=ontario-icon-sort-alphabetical-descending.js.map

package/dist/collection/components/ontario-icon/ontario-icon-sort-alphabetical-descending.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-icon-sort-alphabetical-descending.js","sourceRoot":"","sources":["../../../src/components/ontario-icon/ontario-icon-sort-alphabetical-descending.tsx"],"names":[],"mappings":"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","sourcesContent":["// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State } from '@stencil/core';\nimport { IconWithColour } from './icon.interface';\nimport { IconSize, IconColour, IconColours } from './icon.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport validateColor from 'validate-color';\n\n@Component({\n\ttag: 'ontario-icon-sort-alphabetical-descending',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconSortAlphabeticalDescending implements IconWithColour {\n\t/**\n\t * The icon width will autogenerate the height since the icons are in square format, thus preserving\n\t * the aspect ratio.\n\t */\n\t@Prop() iconWidth: IconSize = 24;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's width depending on validation result.\n\t */\n\t@State() iconWidthState: number;\n\n\t/**\n\t * Watch for changes in the `iconWidth` variable for validation purpose.\n\t * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).\n\t */\n\t@Watch('iconWidth')\n\tvalidateWidth() {\n\t\tif (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' icon-width ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-sort-alphabetical-descending> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${isNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'}; only a positive number is allowed. The default size of`,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 24px ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.iconWidthState = 24;\n\t\t} else {\n\t\t\tthis.iconWidthState = this.iconWidth;\n\t\t}\n\t}\n\n\t/**\n\t * Set the icon's colour.\n\t */\n\t@Prop() colour: IconColour = 'black';\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconColourState: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconCustomColourState: string;\n\n\t/**\n\t * Watch for changes in the `colour` variable for validation purpose.\n\t * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).\n\t * If a match is found in one of the enum values then `colour` will be set to the matching enum value.\n\t */\n\t@Watch('colour')\n\tvalidateColour() {\n\t\tconst isValid = validateValueAgainstArray(this.colour, IconColours);\n\t\tif (isValid) {\n\t\t\tthis.iconColourState = this.colour;\n\t\t} else {\n\t\t\tif (validateColor(this.colour)) {\n\t\t\t\tthis.iconCustomColourState = this.colour;\n\t\t\t} else {\n\t\t\t\tthis.iconColourState = this.warnDefaultColour();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid colour warning message\n\t * @returns default colour (black)\n\t */\n\tprivate warnDefaultColour(): IconColour {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' colour ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-icon-sort-alphabetical-descending> ')\n\t\t\t.addRegularText('was set to an invalid colour; only')\n\t\t\t.addMonospaceText(' black, blue, grey or white ')\n\t\t\t.addRegularText('are supported. The default colour')\n\t\t\t.addMonospaceText(' black ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'black';\n\t}\n\n\t/**\n\t * Stencil component lifecycle method that is called once after the component is first connected to the DOM.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateWidth();\n\t}\n\n\t/**\n\t * Returns the HTML code to be rendered into a custom element.\n\t */\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={`ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`}\n\t\t\t\tstyle={{ width: `${this.iconWidthState}px` }}\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\twidth=\"24\"\n\t\t\t\t\theight=\"24\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tid=\"sort-alphabetical-descending\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M19 7H22L18 3L14 7H17V21H19M11 13V15L7.67 19H11V21H5V19L8.33 15H5V13M9 3H7C5.9 3 5 3.9 5 5V11H7V9H9V11H11V5C11 3.9 10.11 3 9 3ZM9 7H7V5H9V7Z\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n}\n// content automatically generated by `generate-icons.js` ends\n"]}