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

package/components/p-DIe1tcOp.js

@@ -0,0 +1,197 @@
+// Maps to devices associated with Screen Breakpoints
+var DeviceTypes;
+(function (DeviceTypes) {
+	DeviceTypes['Mobile'] = 'mobile';
+	DeviceTypes['Tablet'] = 'tablet';
+	DeviceTypes['Desktop'] = 'desktop';
+})(DeviceTypes || (DeviceTypes = {}));
+
+// import {
+// 	OntarioBreakpointsSmall,
+// 	OntarioBreakpointsMedium,
+// 	OntarioBreakpointsLarge,
+// } from '@ongov/ontario-design-system-design-tokens/dist/ts/tokens';
+/**
+ * TODO: Investigate why importing tokens above is leading to compiler errors with Rollup.
+ *
+ * Temp fix for now is to define them seperately in this file.
+ */
+const OntarioBreakpointsSmall = '20em';
+const OntarioBreakpointsMedium = '40em';
+const minimumGridColumns = 1;
+const maximumGridColumns = 12;
+/**
+ * Numeric screen breakpoint values pulled from the design tokens package.
+ * By default these come in as strings as they have units attached to them
+ * (e.g. '40em').
+ *
+ * However for comparision calculations we need the true numeric value.
+ *
+ * The Number() method only matches numerical values to begin with.
+ * However for further clarity I'm showing a replace on the
+ * regex /\D/g match, which matches againt any non-numeric characters,
+ * and is replacing it with nothing.
+ */
+const ScreenBreakpoints = {
+	Small: Number(OntarioBreakpointsSmall.replace(/\D/g, '')),
+	Medium: Number(OntarioBreakpointsMedium.replace(/\D/g, '')),
+};
+// standard font size in px (design tokens package has it as 1 em)
+const standardFontSizePx = 16;
+
+function hasMultipleTrueValues(arr, key) {
+	let count = 0;
+	for (const obj of arr) {
+		if (obj[key] === true || obj[key] === 'true') {
+			count++;
+			if (count > 1) {
+				return true;
+			}
+		}
+	}
+	return false;
+}
+function extractValuesByKey(objects, key) {
+	return objects.map((obj) => obj[key]);
+}
+function organizeObjectKeys(data, columns) {
+	return data.map((item) => {
+		const newData = {};
+		const otherKeys = {};
+		// Iterate through each key in the item
+		Object.keys(item).forEach((key) => {
+			if (key === 'data') {
+				// Organize keys in the 'data' object
+				columns.forEach((column) => {
+					if (column in item.data) {
+						newData[column] = item.data[column];
+					}
+				});
+			} else {
+				// Preserve other keys
+				otherKeys[key] = item[key];
+			}
+		});
+		return Object.assign({ data: newData }, otherKeys);
+	});
+}
+function removeObjectsBySpecificKey(objects, key, value) {
+	const removedObjects = [];
+	const filteredObjects = objects.filter((obj) => {
+		if (obj[key] === value) {
+			removedObjects.push(obj);
+			return false;
+		}
+		return true;
+	});
+	return [filteredObjects, removedObjects];
+}
+/**
+ * Takes an input value and determines whether or not it is a number.
+ *
+ * @param {string | number} value - The value you would like to test against.
+ *
+ * @returns {boolean}
+ */
+function isNumber(value) {
+	if (value === undefined || value === null) return false;
+	return isNaN(Number(value)) === false;
+}
+function isEmpty(str) {
+	return !str || (str === null || str === void 0 ? void 0 : str.length) <= 0;
+}
+/**
+ * Takes a string value of "true" and converts it to boolean true.
+ *
+ * All other values are converted to boolean false.
+ *
+ * Has advantages over the built in JavaScript Boolean() constructor / function.
+ *
+ * Using Boolean() could lead to unexpected results.
+ *
+ * e.g. Boolean("false") evaluates to a boolean value of true.
+ *
+ * @param {string} value - The value you would like to convert to a boolean.
+ *
+ * @returns {boolean}
+ */
+function convertStringToBoolean(value) {
+	return value.toLowerCase() === 'true';
+}
+/**
+ * Retrieves the keys from an enum and lists them in an array.
+ *
+ * @param {object} enumObject - The enum you wish to get the keys of.
+ *
+ * @returns {string[]}
+ */
+function retrieveEnumKeys(enumObject) {
+	if (enumObject === undefined || enumObject === null) return new Array(0);
+	return Object.keys(enumObject).filter((key) => !isNumber(key));
+}
+/**
+ * Prints an array as a comma delimited list, with the last element being preceded by a conjunction.
+ * As per ontario.ca content guidelines, there is no Oxford comma.
+ *
+ * @param {Array<any>} arr - The array that you wish to print.
+ * @param {Conjunction} conjunctionType - Whether you want the sentence to end with 'and value.' or 'or value.'
+ *
+ * @returns {string}
+ */
+function printArray(arr, conjunctionType = 'and') {
+	return [...arr].reduce(
+		(text, value, i, array) => text + (i < array.length - 1 ? ', ' : ` ${conjunctionType} `) + value,
+	);
+}
+/**
+ * Grabs the HTML element of the page.
+ *
+ * More targetted than document.documentElement as the documentElement could
+ * in theory be any element that is the top level. e.g. <div> if the page is not
+ * set up to be semantically correct.
+ *
+ * @returns {HTMLElement}
+ */
+function getRootHTMLElement() {
+	return document.getElementsByTagName('html')[0];
+}
+/**
+ * Determines the device type based on screen breakpoints.
+ *
+ * @returns {DeviceType}
+ */
+function determineDeviceType() {
+	const windowWidthPx = window.innerWidth;
+	/**
+	 * Converted window width in em values, useful for comparisons
+	 * against the screenBreakpoints, which are listed in em values
+	 * which are pulled from the design tokens package.
+	 */
+	const windowWidthEm = Math.ceil(windowWidthPx / standardFontSizePx);
+	if (windowWidthEm <= ScreenBreakpoints.Small) {
+		return DeviceTypes.Mobile;
+	} else if (windowWidthEm > ScreenBreakpoints.Small && windowWidthEm <= ScreenBreakpoints.Medium) {
+		return DeviceTypes.Tablet;
+	}
+	return DeviceTypes.Desktop;
+}
+
+export {
+	DeviceTypes as D,
+	maximumGridColumns as a,
+	removeObjectsBySpecificKey as b,
+	convertStringToBoolean as c,
+	isNumber as d,
+	extractValuesByKey as e,
+	determineDeviceType as f,
+	getRootHTMLElement as g,
+	hasMultipleTrueValues as h,
+	isEmpty as i,
+	minimumGridColumns as m,
+	organizeObjectKeys as o,
+	printArray as p,
+	retrieveEnumKeys as r,
+};
+//# sourceMappingURL=p-DIe1tcOp.js.map
+
+//# sourceMappingURL=p-DIe1tcOp.js.map

package/components/p-DIe1tcOp.js.map

@@ -0,0 +1 @@
+{"file":"p-DIe1tcOp.js","mappings":"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","names":[],"sources":["src/utils/common/common.enum.ts","src/utils/common/common.variables.ts","src/utils/helper/utils.ts"],"sourcesContent":["// Maps to devices associated with Screen Breakpoints\nexport enum DeviceTypes {\n\tMobile = 'mobile',\n\tTablet = 'tablet',\n\tDesktop = 'desktop',\n}\n","// import {\n// \tOntarioBreakpointsSmall,\n// \tOntarioBreakpointsMedium,\n// \tOntarioBreakpointsLarge,\n// } from '@ongov/ontario-design-system-design-tokens/dist/ts/tokens';\n\n/**\n * TODO: Investigate why importing tokens above is leading to compiler errors with Rollup.\n *\n * Temp fix for now is to define them seperately in this file.\n */\nconst OntarioBreakpointsSmall = '20em';\nconst OntarioBreakpointsMedium = '40em';\nconst OntarioBreakpointsLarge = '73em';\n\nexport const minimumGridColumns = 1;\nexport const maximumGridColumns = 12;\n\n/**\n * Numeric screen breakpoint values pulled from the design tokens package.\n * By default these come in as strings as they have units attached to them\n * (e.g. '40em').\n *\n * However for comparision calculations we need the true numeric value.\n *\n * The Number() method only matches numerical values to begin with.\n * However for further clarity I'm showing a replace on the\n * regex /\\D/g match, which matches againt any non-numeric characters,\n * and is replacing it with nothing.\n */\nexport const ScreenBreakpoints = {\n\tSmall: Number(OntarioBreakpointsSmall.replace(/\\D/g, '')),\n\tMedium: Number(OntarioBreakpointsMedium.replace(/\\D/g, '')),\n\tLarge: Number(OntarioBreakpointsLarge.replace(/\\D/g, '')),\n};\n\n// standard font size in px (design tokens package has it as 1 em)\nexport const standardFontSizePx = 16;\n","import { DeviceTypes } from '../common/common.enum';\nimport { DeviceType, Conjunction } from './utils-types';\nimport { ScreenBreakpoints, standardFontSizePx } from '../common/common.variables';\n\nexport function format(first: string | undefined, middle: string | undefined, last: string | undefined): string {\n\treturn (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport function hasMultipleTrueValues<T>(arr: T[], key: keyof T): boolean {\n\tlet count = 0;\n\n\tfor (const obj of arr) {\n\t\tif (obj[key] === true || obj[key] === 'true') {\n\t\t\tcount++;\n\t\t\tif (count > 1) {\n\t\t\t\treturn true;\n\t\t\t}\n\t\t}\n\t}\n\n\treturn false;\n}\n\nexport function extractValuesByKey<T>(objects: T[], key: keyof T): Array<T[keyof T]> {\n\treturn objects.map((obj) => obj[key]);\n}\n\nexport function organizeObjectKeys(data: any[], columns: string[]): any[] {\n\treturn data.map((item) => {\n\t\tconst newData: any = {};\n\t\tconst otherKeys: any = {};\n\n\t\t// Iterate through each key in the item\n\t\tObject.keys(item).forEach((key) => {\n\t\t\tif (key === 'data') {\n\t\t\t\t// Organize keys in the 'data' object\n\t\t\t\tcolumns.forEach((column) => {\n\t\t\t\t\tif (column in item.data) {\n\t\t\t\t\t\tnewData[column] = item.data[column];\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\t// Preserve other keys\n\t\t\t\totherKeys[key] = item[key];\n\t\t\t}\n\t\t});\n\n\t\treturn { data: newData, ...otherKeys };\n\t});\n}\n\nexport function removeObjectsBySpecificKey<T>(objects: T[], key: keyof T, value: boolean | 'true'): [T[], T[]] {\n\tconst removedObjects: T[] = [];\n\tconst filteredObjects = objects.filter((obj) => {\n\t\tif (obj[key] === value) {\n\t\t\tremovedObjects.push(obj);\n\t\t\treturn false;\n\t\t}\n\t\treturn true;\n\t});\n\treturn [filteredObjects, removedObjects];\n}\n\n/**\n * Takes an input value and determines whether or not it is a number.\n *\n * @param {string | number} value - The value you would like to test against.\n *\n * @returns {boolean}\n */\nexport function isNumber(value: string | number): boolean {\n\tif (value === undefined || value === null) return false;\n\treturn isNaN(Number(value)) === false;\n}\n\nexport function isEmpty(str: string | undefined | null): boolean {\n\treturn !str || str?.length <= 0;\n}\n\n/**\n * Takes a string value of \"true\" and converts it to boolean true.\n *\n * All other values are converted to boolean false.\n *\n * Has advantages over the built in JavaScript Boolean() constructor / function.\n *\n * Using Boolean() could lead to unexpected results.\n *\n * e.g. Boolean(\"false\") evaluates to a boolean value of true.\n *\n * @param {string} value - The value you would like to convert to a boolean.\n *\n * @returns {boolean}\n */\nexport function convertStringToBoolean(value: string): boolean {\n\treturn value.toLowerCase() === 'true';\n}\n\n/**\n * Retrieves the keys from an enum and lists them in an array.\n *\n * @param {object} enumObject - The enum you wish to get the keys of.\n *\n * @returns {string[]}\n */\nexport function retrieveEnumKeys(enumObject: object): string[] {\n\tif (enumObject === undefined || enumObject === null) return new Array<string>(0);\n\treturn Object.keys(enumObject).filter((key) => !isNumber(key));\n}\n\n/**\n * Prints an array as a comma delimited list, with the last element being preceded by a conjunction.\n * As per ontario.ca content guidelines, there is no Oxford comma.\n *\n * @param {Array<any>} arr - The array that you wish to print.\n * @param {Conjunction} conjunctionType - Whether you want the sentence to end with 'and value.' or 'or value.'\n *\n * @returns {string}\n */\nexport function printArray(arr: Array<any>, conjunctionType: Conjunction = 'and'): string {\n\treturn [...arr].reduce(\n\t\t(text, value, i, array) => text + (i < array.length - 1 ? ', ' : ` ${conjunctionType} `) + value,\n\t);\n}\n\n/**\n * Grabs the HTML element of the page.\n *\n * More targetted than document.documentElement as the documentElement could\n * in theory be any element that is the top level. e.g. <div> if the page is not\n * set up to be semantically correct.\n *\n * @returns {HTMLElement}\n */\nexport function getRootHTMLElement(): HTMLElement {\n\treturn document.getElementsByTagName('html')[0];\n}\n\n/**\n * Determines the device type based on screen breakpoints.\n *\n * @returns {DeviceType}\n */\nexport function determineDeviceType(): DeviceType {\n\tconst windowWidthPx = window.innerWidth;\n\t/**\n\t * Converted window width in em values, useful for comparisons\n\t * against the screenBreakpoints, which are listed in em values\n\t * which are pulled from the design tokens package.\n\t */\n\tconst windowWidthEm = Math.ceil(windowWidthPx / standardFontSizePx);\n\n\tif (windowWidthEm <= ScreenBreakpoints.Small) {\n\t\treturn DeviceTypes.Mobile;\n\t} else if (windowWidthEm > ScreenBreakpoints.Small && windowWidthEm <= ScreenBreakpoints.Medium) {\n\t\treturn DeviceTypes.Tablet;\n\t}\n\n\treturn DeviceTypes.Desktop;\n}\n"],"version":3}

package/components/p-DJOzeqZ-.js

@@ -0,0 +1,168 @@
+import { p as proxyCustomElement, H, h } from './index.js';
+import { I as IconColours, v as validateColor } from './p-BOcd5PoR.js';
+import { C as ConsoleMessageClass } from './p-Cdm-Ot0O.js';
+import { v as validateValueAgainstArray } from './p-CNqFEifG.js';
+
+const ontarioIconCss =
+	'.ontario-icon svg,.ontario-icon{display:inline-block;stroke-width:0;stroke:currentColor;fill:currentColor;vertical-align:middle;overflow:hidden}.ontario-icon--blue svg{stroke:#0066CC;fill:#0066CC}.ontario-icon--grey svg{stroke:#666666;fill:#666666}.ontario-icon--black svg{stroke:#1A1A1A;fill:#1A1A1A}.ontario-icon--white svg{stroke:#FFFFFF;fill:#FFFFFF}.ontario-icon--white svg{stroke:#FFFFFF;fill:#FFFFFF}';
+
+const OntarioIconChevronDown = /*@__PURE__*/ proxyCustomElement(
+	class OntarioIconChevronDown extends H {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			/**
+			 * 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-chevron-down> ')
+					.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-chevron-down> ')
+				.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: 'd0367cc400f7dafaadd4446cc49f94751b08823f',
+					class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
+					style: { width: `${this.iconWidthState}px` },
+				},
+				h(
+					'svg',
+					{
+						key: '4e828ea6cf7316ad20016972c92c77556208433e',
+						class: 'svg-icon',
+						style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
+						role: 'img',
+						xmlns: 'http://www.w3.org/2000/svg',
+						fill: 'none',
+						viewBox: '0 0 24 24',
+						id: 'chevron-down',
+					},
+					h('path', {
+						key: 'f23f80e605887912ba55e1180eb380f2a2c13f02',
+						d: 'M7.4 8.6l4.6 4.58 4.6-4.58L18 10l-6 6-6-6 1.4-1.4z',
+					}),
+				),
+			);
+		}
+		static get watchers() {
+			return {
+				iconWidth: ['validateWidth'],
+				colour: ['validateColour'],
+			};
+		}
+		static get style() {
+			return ontarioIconCss;
+		}
+	},
+	[
+		257,
+		'ontario-icon-chevron-down',
+		{
+			iconWidth: [2, 'icon-width'],
+			colour: [1],
+			iconWidthState: [32],
+			iconColourState: [32],
+			iconCustomColourState: [32],
+		},
+		undefined,
+		{
+			iconWidth: ['validateWidth'],
+			colour: ['validateColour'],
+		},
+	],
+);
+function defineCustomElement() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = ['ontario-icon-chevron-down'];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-icon-chevron-down':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioIconChevronDown);
+				}
+				break;
+		}
+	});
+}
+defineCustomElement();
+
+export { OntarioIconChevronDown as O, defineCustomElement as d };
+//# sourceMappingURL=p-DJOzeqZ-.js.map
+
+//# sourceMappingURL=p-DJOzeqZ-.js.map

package/components/p-DJOzeqZ-.js.map

@@ -0,0 +1 @@
+{"file":"p-DJOzeqZ-.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-chevron-down&encapsulation=shadow","src/components/ontario-icon/ontario-icon-chevron-down.tsx"],"sourcesContent":["@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-icon svg,\n// Fractal component style coverage ↓\n.ontario-icon {\n\tdisplay: inline-block;\n\tstroke-width: 0;\n\tstroke: currentColor;\n\tfill: currentColor;\n\t/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */\n\tvertical-align: middle;\n\t/* Paths and strokes that overflow the viewBox can show in IE11. */\n\toverflow: hidden;\n}\n\n.ontario-icon--blue svg {\n\tstroke: colours.$ontario-colour-icon-blue;\n\tfill: colours.$ontario-colour-icon-blue;\n}\n\n.ontario-icon--grey svg {\n\tstroke: colours.$ontario-colour-icon-grey;\n\tfill: colours.$ontario-colour-icon-grey;\n}\n\n.ontario-icon--black svg {\n\tstroke: colours.$ontario-colour-icon-black;\n\tfill: colours.$ontario-colour-icon-black;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-icon-white;\n\tfill: colours.$ontario-colour-icon-white;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-white;\n\tfill: colours.$ontario-colour-white;\n}\n","// 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-chevron-down',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconChevronDown 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-chevron-down> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; 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-chevron-down> ')\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\tclass=\"svg-icon\"\n\t\t\t\t\tstyle={{ fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` }}\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tid=\"chevron-down\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M7.4 8.6l4.6 4.58 4.6-4.58L18 10l-6 6-6-6 1.4-1.4z\" />\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"],"version":3}

package/components/p-DMH_JI3w.js

@@ -0,0 +1,6 @@
+const CaptionTypes = ['default', 'large', 'heading'];
+
+export { CaptionTypes as C };
+//# sourceMappingURL=p-DMH_JI3w.js.map
+
+//# sourceMappingURL=p-DMH_JI3w.js.map

package/components/p-DMH_JI3w.js.map

@@ -0,0 +1 @@
+{"file":"p-DMH_JI3w.js","mappings":"AAAa,MAAA,YAAY,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS;;;;","names":[],"sources":["src/utils/common/input-caption/input-caption.types.ts"],"sourcesContent":["export const CaptionTypes = ['default', 'large', 'heading'] as const;\nexport type CaptionType = (typeof CaptionTypes)[number];\n"],"version":3}