@ongov/ontario-design-system-component-library 5.0.0-alpha.6 → 5.0.0

package/dist/components/p-226df20b.js

@@ -1,170 +0,0 @@
-import { p as proxyCustomElement, H, h } from './p-846438ed.js';
-import { b as validatePropExists } from './p-edb765a1.js';
-import { C as ConsoleMessageClass } from './p-b2019a19.js';
-import { v as v4 } from './p-a8cac0fc.js';
-
-const ontarioHintTextCss =
-	'.ontario-hint{color:#4d4d4d;display:inline-block;margin:0 0 1rem 0;width:100%;max-width:48rem}.ontario-hint p{margin-bottom:1rem}.ontario-hint p:first-of-type{margin-top:0}.ontario-hint p:last-of-type{margin-bottom:0}.ontario-hint a[x-apple-data-detectors]{color:inherit;cursor:none;text-decoration:none}';
-const OntarioHintTextStyle0 = ontarioHintTextCss;
-
-const OntarioHintText = /*@__PURE__*/ proxyCustomElement(
-	class OntarioHintText extends H {
-		constructor() {
-			super();
-			this.__registerHost();
-			this.__attachShadow();
-		}
-		get host() {
-			return this;
-		}
-		/**
-		 * The content type of the hint.
-		 * If no prop is passed, it will default to a string.
-		 * If the hint requires multiple lines or HTML, the `hintContentType` prop should be set to `html`.
-		 */
-		hintContentType = 'string';
-		/**
-		 * Text to display as the hint text statement.
-		 *
-		 * Setting the hint can be done using the host element textContent or through setting this property.  This property will take precedence.
-		 *
-		 * @example
-		 * <ontario-hint-text hint="Override Hint Text">Hint Text</ontario-button>
-		 *
-		 * The resulting hint text will display `"Override Hint Text"`.
-		 */
-		hint;
-		/*
-		 * Used to establish a relationship between the hint text content and elements using aria-describedby. This is optional -  if no ID is provided, one will be generated.
-		 */
-		elementId;
-		hintState;
-		/**
-		 * Watch for changes to the `hintContentType` prop for validation purposes.
-		 * If none is provided, or the wrong type is provided, it will default to `string`.
-		 */
-		checkHintContentType() {
-			if (this.hintContentType !== 'string' && this.hintContentType !== 'html') {
-				const message = new ConsoleMessageClass();
-				message
-					.addDesignSystemTag()
-					.addMonospaceText(' hintContentType ')
-					.addRegularText('for')
-					.addMonospaceText(' <ontario-hint-text> ')
-					.addRegularText('was not one of the permitted types. A default type of `string` will be applied.')
-					.printMessage();
-				return (this.hintContentType = 'string');
-			}
-			return this.hintContentType;
-		}
-		/*
-		 * Watch for changes in the `hint` prop for validation purposes.
-		 * If no `hint` prop is provided, the `hint` will be set to the host element textContent (if it exists).
-		 */
-		updateHintContent() {
-			this.hintState = this.hint ?? this.host.textContent ?? '';
-			this.validateHintContent(this.hintState);
-		}
-		/*
-		 * Validate the `hint` and make sure the `hint` has a value.
-		 * Log a warning if user doesn't input a value for the `hint` or element content.
-		 */
-		validateHintContent(newValue) {
-			// If element content is not provided, check whether prop exists
-			if (!this.host.textContent) {
-				if (validatePropExists(newValue)) {
-					const message = new ConsoleMessageClass();
-					message
-						.addDesignSystemTag()
-						.addMonospaceText(' hint ')
-						.addRegularText('for')
-						.addMonospaceText(' <ontario-hint-text> ')
-						.addRegularText('was not provided')
-						.printMessage();
-				}
-			}
-		}
-		getId() {
-			return this.elementId ?? '';
-		}
-		/**
-		 * This method returns the ontario-hint-text id. It is used to make sure the hint text and `aria-describedby` value of other form components match when the internal hint text props are used.
-		 *
-		 * @returns Promise<string | undefined>
-		 */
-		async getHintTextId() {
-			return this.elementId;
-		}
-		/**
-		 * Set `hint` using internal component logic
-		 */
-		componentWillLoad() {
-			this.updateHintContent();
-			this.checkHintContentType();
-			this.elementId = this.elementId ?? v4();
-		}
-		/**
-		 * 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.updateHintContent();
-					}
-				});
-			});
-			const options = { attributes: true };
-			observer.observe(this.host, options);
-		}
-		render() {
-			return this.hintContentType === 'string'
-				? h('p', { id: this.getId(), class: 'ontario-hint' }, this.hintState)
-				: h('div', { id: this.getId(), class: 'ontario-hint', innerHTML: this.hintState });
-		}
-		static get watchers() {
-			return {
-				hintContentType: ['checkHintContentType'],
-				hint: ['updateHintContent'],
-			};
-		}
-		static get style() {
-			return OntarioHintTextStyle0;
-		}
-	},
-	[
-		1,
-		'ontario-hint-text',
-		{
-			hintContentType: [1025, 'hint-content-type'],
-			hint: [1],
-			elementId: [1025, 'element-id'],
-			hintState: [32],
-			getHintTextId: [64],
-		},
-		undefined,
-		{
-			hintContentType: ['checkHintContentType'],
-			hint: ['updateHintContent'],
-		},
-	],
-);
-function defineCustomElement() {
-	if (typeof customElements === 'undefined') {
-		return;
-	}
-	const components = ['ontario-hint-text'];
-	components.forEach((tagName) => {
-		switch (tagName) {
-			case 'ontario-hint-text':
-				if (!customElements.get(tagName)) {
-					customElements.define(tagName, OntarioHintText);
-				}
-				break;
-		}
-	});
-}
-
-export { OntarioHintText as O, defineCustomElement as d };
-
-//# sourceMappingURL=p-226df20b.js.map

package/dist/components/p-226df20b.js.map

@@ -1 +0,0 @@
-{"file":"p-226df20b.js","mappings":";;;;;AAAA,MAAM,kBAAkB,GAAG,kTAAkT,CAAC;AAC9U,8BAAe,kBAAkB;;MCYpB,eAAe;;;;;;;;;;;;IAQF,eAAe,GAAqB,QAAQ,CAAC;;;;;;;;;;;IAY9D,IAAI,CAAS;;;;IAKI,SAAS,CAAU;IAEnC,SAAS,CAAS;;;;;IAOnB,oBAAoB;QAC3B,IAAI,IAAI,CAAC,eAAe,KAAK,QAAQ,IAAI,IAAI,CAAC,eAAe,KAAK,MAAM,EAAE;YACzE,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,mBAAmB,CAAC;iBACrC,cAAc,CAAC,KAAK,CAAC;iBACrB,gBAAgB,CAAC,uBAAuB,CAAC;iBACzC,cAAc,CAAC,iFAAiF,CAAC;iBACjG,YAAY,EAAE,CAAC;YAEjB,QAAQ,IAAI,CAAC,eAAe,GAAG,QAAQ,EAAE;SACzC;QAED,OAAO,IAAI,CAAC,eAAe,CAAC;KAC5B;;;;;IAOO,iBAAiB;QACxB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC;QAC1D,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KACzC;;;;;IAMD,mBAAmB,CAAC,QAAgB;;QAEnC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YAC3B,IAAI,kBAAkB,CAAC,QAAQ,CAAC,EAAE;gBACjC,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;gBAC1C,OAAO;qBACL,kBAAkB,EAAE;qBACpB,gBAAgB,CAAC,QAAQ,CAAC;qBAC1B,cAAc,CAAC,KAAK,CAAC;qBACrB,gBAAgB,CAAC,uBAAuB,CAAC;qBACzC,cAAc,CAAC,kBAAkB,CAAC;qBAClC,YAAY,EAAE,CAAC;aACjB;SACD;KACD;IAEM,KAAK;QACX,OAAO,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC;KAC5B;;;;;;IAQD,MAAM,aAAa;QAClB,OAAO,IAAI,CAAC,SAAS,CAAC;KACtB;;;;IAKD,iBAAiB;QAChB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,IAAIA,EAAI,EAAE,CAAC;KAC1C;;;;IAKD,gBAAgB;QACf,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,CAAC,SAAS;YAC/C,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ;gBAC1B,IAAI,QAAQ,CAAC,IAAI,KAAK,YAAY,EAAE;oBACnC,IAAI,CAAC,iBAAiB,EAAE,CAAC;iBACzB;aACD,CAAC,CAAC;SACH,CAAC,CAAC;QAEH,MAAM,OAAO,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC;QACrC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;KACrC;IAED,MAAM;QACL,OAAO,IAAI,CAAC,eAAe,KAAK,QAAQ,IACvC,SAAG,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,KAAK,EAAC,cAAc,IACvC,IAAI,CAAC,SAAS,CACZ,KAEJ,WAAK,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,KAAK,EAAC,cAAc,EAAC,SAAS,EAAE,IAAI,CAAC,SAAS,GAAQ,CAC7E,CAAC;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["uuid"],"sources":["src/components/ontario-hint-text/ontario-hint-text.scss?tag=ontario-hint-text&encapsulation=shadow","src/components/ontario-hint-text/ontario-hint-text.tsx"],"sourcesContent":["@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-hint {\n\tcolor: colours.$ontario-greyscale-70;\n\tdisplay: inline-block;\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-0;\n\twidth: globalVariables.$full-width;\n\tmax-width: globalVariables.$standard-width;\n\n\tp {\n\t\tmargin-bottom: spacing.$spacing-4;\n\n\t\t&:first-of-type {\n\t\t\tmargin-top: spacing.$spacing-0;\n\t\t}\n\n\t\t&:last-of-type {\n\t\t\tmargin-bottom: spacing.$spacing-0;\n\t\t}\n\t}\n\n\t// Fractal component style coverage ↓\n\t// This is a fix to prevent auto-detection of phone numbers in Firefox & Safari on iPhone devices\n\ta[x-apple-data-detectors] {\n\t\tcolor: inherit;\n\t\tcursor: none;\n\t\ttext-decoration: none;\n\t}\n}\n","import { Component, Prop, Element, h, Watch, State, Method } from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\n\nimport { Hint, HintContentType } from '../../utils/common/common.interface';\n\nimport { validatePropExists } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-hint-text',\n\tstyleUrl: 'ontario-hint-text.scss',\n\tshadow: true,\n})\nexport class OntarioHintText implements Hint {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * The content type of the hint.\n\t * If no prop is passed, it will default to a string.\n\t * If the hint requires multiple lines or HTML, the `hintContentType` prop should be set to `html`.\n\t */\n\t@Prop({ mutable: true }) hintContentType?: HintContentType = 'string';\n\n\t/**\n\t * Text to display as the hint text statement.\n\t *\n\t * Setting the hint can be done using the host element textContent or through setting this property.  This property will take precedence.\n\t *\n\t * @example\n\t * <ontario-hint-text hint=\"Override Hint Text\">Hint Text</ontario-button>\n\t *\n\t * The resulting hint text will display `\"Override Hint Text\"`.\n\t */\n\t@Prop() hint: string;\n\n\t/*\n\t * Used to establish a relationship between the hint text content and elements using aria-describedby. This is optional -  if no ID is provided, one will be generated.\n\t */\n\t@Prop({ mutable: true }) elementId?: string;\n\n\t@State() hintState: string;\n\n\t/**\n\t * Watch for changes to the `hintContentType` prop for validation purposes.\n\t * If none is provided, or the wrong type is provided, it will default to `string`.\n\t */\n\t@Watch('hintContentType')\n\tprivate checkHintContentType() {\n\t\tif (this.hintContentType !== 'string' && this.hintContentType !== 'html') {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' hintContentType ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-hint-text> ')\n\t\t\t\t.addRegularText('was not one of the permitted types. A default type of `string` will be applied.')\n\t\t\t\t.printMessage();\n\n\t\t\treturn (this.hintContentType = 'string');\n\t\t}\n\n\t\treturn this.hintContentType;\n\t}\n\n\t/*\n\t * Watch for changes in the `hint` prop for validation purposes.\n\t * If no `hint` prop is provided, the `hint` will be set to the host element textContent (if it exists).\n\t */\n\t@Watch('hint')\n\tprivate updateHintContent() {\n\t\tthis.hintState = this.hint ?? this.host.textContent ?? '';\n\t\tthis.validateHintContent(this.hintState);\n\t}\n\n\t/*\n\t * Validate the `hint` and make sure the `hint` has a value.\n\t * Log a warning if user doesn't input a value for the `hint` or element content.\n\t */\n\tvalidateHintContent(newValue: string) {\n\t\t// If element content is not provided, check whether prop exists\n\t\tif (!this.host.textContent) {\n\t\t\tif (validatePropExists(newValue)) {\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(' hint ')\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-hint-text> ')\n\t\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\t/**\n\t * This method returns the ontario-hint-text id. It is used to make sure the hint text and `aria-describedby` value of other form components match when the internal hint text props are used.\n\t *\n\t * @returns Promise<string | undefined>\n\t */\n\t@Method()\n\tasync getHintTextId(): Promise<string | undefined> {\n\t\treturn this.elementId;\n\t}\n\n\t/**\n\t * Set `hint` using internal component logic\n\t */\n\tcomponentWillLoad() {\n\t\tthis.updateHintContent();\n\t\tthis.checkHintContentType();\n\t\tthis.elementId = this.elementId ?? uuid();\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.updateHintContent();\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 this.hintContentType === 'string' ? (\n\t\t\t<p id={this.getId()} class=\"ontario-hint\">\n\t\t\t\t{this.hintState}\n\t\t\t</p>\n\t\t) : (\n\t\t\t<div id={this.getId()} class=\"ontario-hint\" innerHTML={this.hintState}></div>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/p-318e2fc9.js

@@ -1,182 +0,0 @@
-import { p as proxyCustomElement, H, h } from './p-846438ed.js';
-import { I as IconColours, l as lib } from './p-af9b7256.js';
-import { C as ConsoleMessageClass } from './p-b2019a19.js';
-import { a as validateValueAgainstArray } from './p-edb765a1.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 OntarioIconChevronLeftStyle0 = ontarioIconCss;
-
-const OntarioIconChevronLeft = /*@__PURE__*/ proxyCustomElement(
-	class OntarioIconChevronLeft 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.
-		 */
-		iconWidth = 24;
-		/**
-		 * Mutable variable, for internal use only.
-		 * Set the icon's width depending on validation result.
-		 */
-		iconWidthState;
-		/**
-		 * 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-left> ')
-					.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;
-			}
-		}
-		/**
-		 * Set the icon's colour.
-		 */
-		colour = 'black';
-		/**
-		 * Mutable variable, for internal use only.
-		 * Set the icon's colour based on validation result.
-		 */
-		iconColourState;
-		/**
-		 * Mutable variable, for internal use only.
-		 * Set the icon's colour based on validation result.
-		 */
-		iconCustomColourState;
-		/**
-		 * 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 (lib(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-left> ')
-				.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: '15cb311530e2df38cda906ff777ff556ee48064b',
-					class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
-					style: { width: `${this.iconWidthState}px` },
-				},
-				h(
-					'svg',
-					{
-						key: '8fd4695d9d7045b8bc9ec41f38b11814868b823e',
-						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-left',
-					},
-					h('path', {
-						key: '7353ae5d7b559ba4dd00f9d25d856f02fa3d0a9b',
-						d: 'M15.4 7.4L14 6l-6 6 6 6 1.4-1.4-4.58-4.6 4.58-4.6z',
-					}),
-				),
-			);
-		}
-		static get watchers() {
-			return {
-				iconWidth: ['validateWidth'],
-				colour: ['validateColour'],
-			};
-		}
-		static get style() {
-			return OntarioIconChevronLeftStyle0;
-		}
-	},
-	[
-		1,
-		'ontario-icon-chevron-left',
-		{
-			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-left'];
-	components.forEach((tagName) => {
-		switch (tagName) {
-			case 'ontario-icon-chevron-left':
-				if (!customElements.get(tagName)) {
-					customElements.define(tagName, OntarioIconChevronLeft);
-				}
-				break;
-		}
-	});
-}
-
-export { OntarioIconChevronLeft as O, defineCustomElement as d };
-
-//# sourceMappingURL=p-318e2fc9.js.map

package/dist/components/p-318e2fc9.js.map

@@ -1 +0,0 @@
-{"file":"p-318e2fc9.js","mappings":"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","names":["validateColor"],"sources":["src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-chevron-left&encapsulation=shadow","src/components/ontario-icon/ontario-icon-chevron-left.tsx"],"sourcesContent":["@use '@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-left',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconChevronLeft 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-left> ')\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-left> ')\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-left\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M15.4 7.4L14 6l-6 6 6 6 1.4-1.4-4.58-4.6 4.58-4.6z\" />\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}