@ongov/ontario-design-system-component-library 4.2.0-alpha.1

package/dist/ontario-design-system-components/p-c75f5396.entry.js

@@ -0,0 +1,143 @@
+import { r as c, h as e, g as a } from './p-14fa9399.js';
+import { C as t } from './p-55c48d50.js';
+const i =
+	'.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 o = i;
+const s = class {
+	constructor(e) {
+		c(this, e);
+		this.iconWidth = 24;
+		this.iconWidthState = undefined;
+	}
+	validateWidth() {
+		if (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {
+			const c = new t();
+			c.addDesignSystemTag()
+				.addMonospaceText(' icon-width ')
+				.addRegularText('on')
+				.addMonospaceText(' <ontario-icon-interac-fr-alt> ')
+				.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;
+		}
+	}
+	validateColour() {
+		if (this.host.hasAttribute('colour')) {
+			const c = new t();
+			c.addDesignSystemTag()
+				.addMonospaceText(' colour ')
+				.addRegularText('on')
+				.addMonospaceText(' <ontario-icon-interac-fr-alt> ')
+				.addRegularText('cannot be set. The provided colour is ignored.')
+				.printMessage();
+		}
+	}
+	componentWillLoad() {
+		this.validateColour();
+		this.validateWidth();
+	}
+	render() {
+		return e(
+			'div',
+			{
+				key: '7834971559387f57d1c664c894f41c8ac9c17029',
+				class: `ontario-icon ontario-icon--width-${this.iconWidthState}`,
+				style: { width: `${this.iconWidthState}px` },
+			},
+			e(
+				'svg',
+				{
+					key: '16ed182057d2b726ec5b53c720f26b1e16c51866',
+					class: 'svg-icon',
+					role: 'img',
+					xmlns: 'http://www.w3.org/2000/svg',
+					viewBox: '0 0 24 24',
+					id: 'interac-fr-alt',
+				},
+				e('path', {
+					key: 'bdb3ae5d30ab2824f2b7da5488e2269cf8200b3d',
+					d: 'M18.463 17.052H5.548a1.62 1.62 0 0 1-1.304-.693v5.093c0 .733.57 1.304 1.304 1.304h12.915c.733 0 1.304-.57 1.304-1.304V16.36c-.285.448-.774.693-1.304.693z',
+					fill: '#636466',
+				}),
+				e('path', {
+					key: 'f4abbdb7c27ce31153940918414467d663e18642',
+					d: 'M5.548 16.807h12.915c.733 0 1.304-.57 1.304-1.304V2.59c0-.652-.49-1.222-1.14-1.304H5.548c-.733 0-1.304.57-1.304 1.304v12.915c0 .733.57 1.304 1.304 1.304z',
+					fill: '#ecaa20',
+				}),
+				e(
+					'g',
+					{ key: 'a39c353de39e9e72fce49ff0b2d4f0116db95f01', fill: '#fff' },
+					e('path', {
+						key: 'b1ecc2cbbbdcb140cd5bfaffc11d569ba2021505',
+						d: 'M18.463 1H5.548A1.55 1.55 0 0 0 4 2.548v18.904A1.55 1.55 0 0 0 5.548 23h12.915a1.55 1.55 0 0 0 1.548-1.548V2.548C20.052 1.693 19.36 1 18.463 1zM4.244 2.6c0-.733.57-1.304 1.304-1.304h13.037c.652.08 1.14.6 1.14 1.304v12.915c0 .733-.57 1.304-1.304 1.304H5.548c-.733 0-1.304-.57-1.304-1.304V2.6zm15.522 18.904c0 .733-.57 1.304-1.304 1.304H5.548c-.733 0-1.304-.57-1.304-1.304V16.4a1.62 1.62 0 0 0 1.304.693h12.915a1.62 1.62 0 0 0 1.304-.693v5.093zM7.83 18.764v.407h-.937v.6h.856v.448h-.856v.693h.937v.448H6.363v-2.607H7.83zm.326.65h.5v.244a.53.53 0 0 1 .489-.285c.326 0 .5.163.5.57V21.4h-.5v-1.344c0-.204-.08-.285-.204-.285-.163 0-.285.122-.285.326V21.4h-.5v-1.996zm3.137-.65h-.5v2.607h.5v-2.607zm.447-.04h.5v.448h-.5v-.448zm0 .692h.5v1.956h-.5v-1.956zm2.364.001V21.3c0 .53-.244.774-.815.774-.407 0-.652-.204-.652-.53h.5c0 .082.04.122.082.163s.122.04.163.04c.204 0 .285-.163.285-.367v-.285c-.122.163-.245.245-.407.245-.407 0-.6-.285-.6-.978 0-.448.08-1.018.6-1.018.122 0 .326.082.407.285v-.204h.448zm-.733 1.548c.204 0 .285-.244.285-.57 0-.5-.082-.652-.245-.652-.204 0-.244.163-.244.693-.082.285-.04.53.204.53z',
+					}),
+					e('path', {
+						key: '2a70a3a66e1e78e529dea9be7fe476169498c662',
+						d: 'M14.5 19.414h.5v.244a.53.53 0 0 1 .489-.285c.326 0 .5.163.5.57V21.4h-.5v-1.344c0-.204-.08-.285-.204-.285-.163 0-.285.122-.285.326V21.4h-.5v-1.996zm2.323 1.06v.163c0 .244.08.448.244.448s.244-.122.285-.367h.448c0 .448-.244.693-.692.693-.733 0-.774-.57-.774-1.06 0-.53.122-1.018.774-1.018.57 0 .733.407.733.978v.122h-1.018v.04zm.53-.326c0-.285-.04-.448-.244-.448s-.245.204-.245.407v.08h.5v-.04z',
+					}),
+				),
+				e(
+					'g',
+					{ key: '1ce9619f78a5c66db5cfa5bc37bb78723d22ec49', fill: '#000' },
+					e('path', {
+						key: '24ab26ef3ec099bcb9404c1e300c5c1913694853',
+						d: 'M6.567 10.004c-.204 0-.367.04-.367.04V8.048l.733-.163v.326s.204-.448.733-.57c.57-.122.774.204.774.693v1.996l-.774.163V8.62c0-.285-.122-.367-.285-.326-.204.04-.367.285-.367.6v1.304c-.08-.04-.204-.204-.448-.204zm6.355-.774V6.46l.733-.163v.367s.204-.5.6-.57c.122-.04.204 0 .204 0v.693s-.163 0-.367.08c-.285.122-.407.326-.407.693v1.548l-.774.122z',
+					}),
+					e('path', {
+						key: '5512817094e6f9ffe20ce6b0aa479cc3468fb2d1',
+						d: 'M9.093 10.127s-.122-.163-.122-.815V7.926l-.367.08v-.57l.367-.08v-.61l.774-.163v.61l.53-.122v.57l-.53.122V9.19c0 .652.163.774.163.774l-.815.163z',
+					}),
+					e('path', {
+						key: '5b2a0d2e260fad90e943ed837cfc411772a34153',
+						d: 'M10.356 8.495c0-.5.08-.856.204-1.14.163-.326.5-.53.896-.652.856-.204 1.14.326 1.14.978v.367l-1.507.367v.04c0 .5.082.693.407.6.245-.04.326-.204.367-.407v-.122l.693-.163v.122c0 .285-.082.937-1.06 1.14-.896.204-1.14-.326-1.14-1.14zm1.18-1.263c-.245.04-.367.285-.367.693l.733-.163V7.64c0-.326-.08-.448-.367-.407zm5.542-.366c-.04-.856.204-1.507 1.14-1.752.6-.122.815 0 .937.163s.163.326.163.6v.04l-.733.163v-.12c0-.326-.082-.448-.326-.367-.285.08-.407.326-.407.856v.244c0 .53.08.774.407.733.285-.04.326-.285.326-.53v-.122l.733-.163v.122c0 .693-.367 1.14-1.06 1.304-.978.244-1.14-.326-1.18-1.18zM14.5 8.048c0-.652.367-.856.937-1.1.53-.204.53-.326.53-.5s-.082-.285-.326-.204c-.244.04-.285.244-.326.367v.122l-.733.163s0-.204.04-.407c.122-.367.448-.652 1.06-.774.774-.163 1.018.163 1.018.693V7.64c0 .6.122.693.122.693l-.693.122s-.08-.122-.08-.244c0 0-.163.407-.693.53s-.856-.204-.856-.693zm1.467-.896s-.163.122-.367.204c-.244.122-.326.244-.326.5 0 .204.122.326.326.244.245-.04.367-.285.367-.57v-.367z',
+					}),
+					e('path', {
+						'key': 'abe48a3673d3a3f36b53ce10464e80ce99ab569e',
+						'fill-rule': 'evenodd',
+						'd': 'M7.218 11.185l1.222.855c.163.122.285.326.285.53v3.667H7.34a1.36 1.36 0 0 1-1.344-1.344v-4.156c0-.244.204-.49.49-.49a.47.47 0 0 1 .489.489v2.404c0 .082.04.122.122.122s.122-.04.122-.163v-1.915z',
+					}),
+					e('use', { key: 'd6828c955c7c78cdf87251929a1161d568c7f91b', href: '#B2' }),
+					e('path', {
+						key: '319293d55800c269cf6b7b370182324b849b4ab6',
+						d: 'M4.693 12.49c-.04.08-.08.163-.08.244 0 .245.204.407.407.407h.08c.04 0 .326-.082.57-.122v-.733l-.978.204z',
+					}),
+					e('use', { key: '3baf26f66cfef267d5181bd221bec5d7c57d7086', href: '#B2', y: '2.036' }),
+					e('path', {
+						key: 'd38872600ad9613e59d818fe1bdc085ccd80b3ab',
+						d: 'M4.896 11.144v-4.48l.815-.204v4.482l-.815.204zM17.7 3.484h.244l.163.733.163-.733h.244v.978h-.163v-.815l-.163.815h-.163l-.163-.815h-.04v.815H17.7v-.978z',
+					}),
+					e('path', {
+						key: '75b2072568cfd89cce6d60a8e7679a3a94cb2e67',
+						d: 'M18.667 3.484h.285c.285 0 .326.204.326.49s-.04.49-.326.49h-.285v-.978zm.163.856h.122c.122 0 .163-.08.163-.367s-.04-.367-.163-.367h-.122v.733z',
+					}),
+				),
+				e(
+					'defs',
+					{ key: '8a93f26fcbc42599a0fd45c4b5000c1af78ff989' },
+					e('path', {
+						key: 'f6e6508dd562c961abd28239f562ab4090390882',
+						id: 'B2',
+						d: 'M4.693 11.47c-.04.082-.08.163-.08.245 0 .244.204.407.407.407h.08c.04 0 .326-.082.57-.122v-.733l-.978.204z',
+					}),
+				),
+			),
+		);
+	}
+	get host() {
+		return a(this);
+	}
+	static get watchers() {
+		return { iconWidth: ['validateWidth'] };
+	}
+};
+s.style = o;
+export { s as ontario_icon_interac_fr_alt };
+//# sourceMappingURL=p-c75f5396.entry.js.map

package/dist/ontario-design-system-components/p-c75f5396.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ontarioIconCss","OntarioIconInteracFrAltStyle0","OntarioIconInteracFrAlt","validateWidth","isNaN","this","iconWidth","message","ConsoleMessageClass","addDesignSystemTag","addMonospaceText","addRegularText","printMessage","iconWidthState","validateColour","host","hasAttribute","componentWillLoad","render","h","key","class","style","width","role","xmlns","viewBox","id","d","fill","href","y"],"sources":["src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-interac-fr-alt&encapsulation=shadow","src/components/ontario-icon/ontario-icon-interac-fr-alt.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, Element } from '@stencil/core';\nimport { Icon } from './icon.interface';\nimport { IconSize } from './icon.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-icon-interac-fr-alt',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconInteracFrAlt implements Icon {\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-interac-fr-alt> ')\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 * Reference to the host element\n\t * Use to check if the host element has the `colour` attribute set\n\t */\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * Validate that the `colour` attribute is not set by users\n\t * Prints a warning message if the `colour` attribute is set\n\t */\n\tvalidateColour() {\n\t\tif (this.host.hasAttribute('colour')) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' colour ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-interac-fr-alt> ')\n\t\t\t\t.addRegularText('cannot be set. The provided colour is ignored.')\n\t\t\t\t.printMessage();\n\t\t}\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--width-${this.iconWidthState}`}\n\t\t\t\tstyle={{ width: `${this.iconWidthState}px` }}\n\t\t\t>\n\t\t\t\t<svg class=\"svg-icon\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" id=\"interac-fr-alt\">\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M18.463 17.052H5.548a1.62 1.62 0 0 1-1.304-.693v5.093c0 .733.57 1.304 1.304 1.304h12.915c.733 0 1.304-.57 1.304-1.304V16.36c-.285.448-.774.693-1.304.693z\"\n\t\t\t\t\t\tfill=\"#636466\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M5.548 16.807h12.915c.733 0 1.304-.57 1.304-1.304V2.59c0-.652-.49-1.222-1.14-1.304H5.548c-.733 0-1.304.57-1.304 1.304v12.915c0 .733.57 1.304 1.304 1.304z\"\n\t\t\t\t\t\tfill=\"#ecaa20\"\n\t\t\t\t\t/>\n\t\t\t\t\t<g fill=\"#fff\">\n\t\t\t\t\t\t<path d=\"M18.463 1H5.548A1.55 1.55 0 0 0 4 2.548v18.904A1.55 1.55 0 0 0 5.548 23h12.915a1.55 1.55 0 0 0 1.548-1.548V2.548C20.052 1.693 19.36 1 18.463 1zM4.244 2.6c0-.733.57-1.304 1.304-1.304h13.037c.652.08 1.14.6 1.14 1.304v12.915c0 .733-.57 1.304-1.304 1.304H5.548c-.733 0-1.304-.57-1.304-1.304V2.6zm15.522 18.904c0 .733-.57 1.304-1.304 1.304H5.548c-.733 0-1.304-.57-1.304-1.304V16.4a1.62 1.62 0 0 0 1.304.693h12.915a1.62 1.62 0 0 0 1.304-.693v5.093zM7.83 18.764v.407h-.937v.6h.856v.448h-.856v.693h.937v.448H6.363v-2.607H7.83zm.326.65h.5v.244a.53.53 0 0 1 .489-.285c.326 0 .5.163.5.57V21.4h-.5v-1.344c0-.204-.08-.285-.204-.285-.163 0-.285.122-.285.326V21.4h-.5v-1.996zm3.137-.65h-.5v2.607h.5v-2.607zm.447-.04h.5v.448h-.5v-.448zm0 .692h.5v1.956h-.5v-1.956zm2.364.001V21.3c0 .53-.244.774-.815.774-.407 0-.652-.204-.652-.53h.5c0 .082.04.122.082.163s.122.04.163.04c.204 0 .285-.163.285-.367v-.285c-.122.163-.245.245-.407.245-.407 0-.6-.285-.6-.978 0-.448.08-1.018.6-1.018.122 0 .326.082.407.285v-.204h.448zm-.733 1.548c.204 0 .285-.244.285-.57 0-.5-.082-.652-.245-.652-.204 0-.244.163-.244.693-.082.285-.04.53.204.53z\" />\n\t\t\t\t\t\t<path d=\"M14.5 19.414h.5v.244a.53.53 0 0 1 .489-.285c.326 0 .5.163.5.57V21.4h-.5v-1.344c0-.204-.08-.285-.204-.285-.163 0-.285.122-.285.326V21.4h-.5v-1.996zm2.323 1.06v.163c0 .244.08.448.244.448s.244-.122.285-.367h.448c0 .448-.244.693-.692.693-.733 0-.774-.57-.774-1.06 0-.53.122-1.018.774-1.018.57 0 .733.407.733.978v.122h-1.018v.04zm.53-.326c0-.285-.04-.448-.244-.448s-.245.204-.245.407v.08h.5v-.04z\" />\n\t\t\t\t\t</g>\n\t\t\t\t\t<g fill=\"#000\">\n\t\t\t\t\t\t<path d=\"M6.567 10.004c-.204 0-.367.04-.367.04V8.048l.733-.163v.326s.204-.448.733-.57c.57-.122.774.204.774.693v1.996l-.774.163V8.62c0-.285-.122-.367-.285-.326-.204.04-.367.285-.367.6v1.304c-.08-.04-.204-.204-.448-.204zm6.355-.774V6.46l.733-.163v.367s.204-.5.6-.57c.122-.04.204 0 .204 0v.693s-.163 0-.367.08c-.285.122-.407.326-.407.693v1.548l-.774.122z\" />\n\t\t\t\t\t\t<path d=\"M9.093 10.127s-.122-.163-.122-.815V7.926l-.367.08v-.57l.367-.08v-.61l.774-.163v.61l.53-.122v.57l-.53.122V9.19c0 .652.163.774.163.774l-.815.163z\" />\n\t\t\t\t\t\t<path d=\"M10.356 8.495c0-.5.08-.856.204-1.14.163-.326.5-.53.896-.652.856-.204 1.14.326 1.14.978v.367l-1.507.367v.04c0 .5.082.693.407.6.245-.04.326-.204.367-.407v-.122l.693-.163v.122c0 .285-.082.937-1.06 1.14-.896.204-1.14-.326-1.14-1.14zm1.18-1.263c-.245.04-.367.285-.367.693l.733-.163V7.64c0-.326-.08-.448-.367-.407zm5.542-.366c-.04-.856.204-1.507 1.14-1.752.6-.122.815 0 .937.163s.163.326.163.6v.04l-.733.163v-.12c0-.326-.082-.448-.326-.367-.285.08-.407.326-.407.856v.244c0 .53.08.774.407.733.285-.04.326-.285.326-.53v-.122l.733-.163v.122c0 .693-.367 1.14-1.06 1.304-.978.244-1.14-.326-1.18-1.18zM14.5 8.048c0-.652.367-.856.937-1.1.53-.204.53-.326.53-.5s-.082-.285-.326-.204c-.244.04-.285.244-.326.367v.122l-.733.163s0-.204.04-.407c.122-.367.448-.652 1.06-.774.774-.163 1.018.163 1.018.693V7.64c0 .6.122.693.122.693l-.693.122s-.08-.122-.08-.244c0 0-.163.407-.693.53s-.856-.204-.856-.693zm1.467-.896s-.163.122-.367.204c-.244.122-.326.244-.326.5 0 .204.122.326.326.244.245-.04.367-.285.367-.57v-.367z\" />\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\tfill-rule=\"evenodd\"\n\t\t\t\t\t\t\td=\"M7.218 11.185l1.222.855c.163.122.285.326.285.53v3.667H7.34a1.36 1.36 0 0 1-1.344-1.344v-4.156c0-.244.204-.49.49-.49a.47.47 0 0 1 .489.489v2.404c0 .082.04.122.122.122s.122-.04.122-.163v-1.915z\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<use href=\"#B2\" />\n\t\t\t\t\t\t<path d=\"M4.693 12.49c-.04.08-.08.163-.08.244 0 .245.204.407.407.407h.08c.04 0 .326-.082.57-.122v-.733l-.978.204z\" />\n\t\t\t\t\t\t<use href=\"#B2\" y=\"2.036\" />\n\t\t\t\t\t\t<path d=\"M4.896 11.144v-4.48l.815-.204v4.482l-.815.204zM17.7 3.484h.244l.163.733.163-.733h.244v.978h-.163v-.815l-.163.815h-.163l-.163-.815h-.04v.815H17.7v-.978z\" />\n\t\t\t\t\t\t<path d=\"M18.667 3.484h.285c.285 0 .326.204.326.49s-.04.49-.326.49h-.285v-.978zm.163.856h.122c.122 0 .163-.08.163-.367s-.04-.367-.163-.367h-.122v.733z\" />\n\t\t\t\t\t</g>\n\t\t\t\t\t<defs>\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\tid=\"B2\"\n\t\t\t\t\t\t\td=\"M4.693 11.47c-.04.082-.08.163-.08.245 0 .244.204.407.407.407h.08c.04 0 .326-.082.57-.122v-.733l-.978.204z\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</defs>\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"],"mappings":"sFAAA,MAAMA,EAAiB,0ZACvB,MAAAC,EAAeD,E,MCUFE,EAAuB,M,wCAKL,G,8BAa9B,aAAAC,GACC,GAAIC,MAAMC,KAAKC,aAAgBF,MAAMC,KAAKC,YAAcD,KAAKC,WAAa,EAAI,CAC7E,MAAMC,EAAU,IAAIC,EACpBD,EACEE,qBACAC,iBAAiB,gBACjBC,eAAe,MACfD,iBAAiB,mCACjBC,eACA,GACCP,MAAMC,KAAKC,WAAa,iCAAmC,0FAG5DI,iBAAiB,UACjBC,eAAe,gBACfC,eACFP,KAAKQ,eAAiB,E,KAChB,CACNR,KAAKQ,eAAiBR,KAAKC,S,EAc7B,cAAAQ,GACC,GAAIT,KAAKU,KAAKC,aAAa,UAAW,CACrC,MAAMT,EAAU,IAAIC,EACpBD,EACEE,qBACAC,iBAAiB,YACjBC,eAAe,MACfD,iBAAiB,mCACjBC,eAAe,kDACfC,c,EAOJ,iBAAAK,GACCZ,KAAKS,iBACLT,KAAKF,e,CAMN,MAAAe,GACC,OACCC,EAAA,OAAAC,IAAA,2CACCC,MAAO,oCAAoChB,KAAKQ,iBAChDS,MAAO,CAAEC,MAAO,GAAGlB,KAAKQ,qBAExBM,EAAA,OAAAC,IAAA,2CAAKC,MAAM,WAAWG,KAAK,MAAMC,MAAM,6BAA6BC,QAAQ,YAAYC,GAAG,kBAC1FR,EAAA,QAAAC,IAAA,2CACCQ,EAAE,4JACFC,KAAK,YAENV,EAAA,QAAAC,IAAA,2CACCQ,EAAE,4JACFC,KAAK,YAENV,EAAA,KAAAC,IAAA,2CAAGS,KAAK,QACPV,EAAA,QAAAC,IAAA,2CAAMQ,EAAE,slCACRT,EAAA,QAAAC,IAAA,2CAAMQ,EAAE,6YAETT,EAAA,KAAAC,IAAA,2CAAGS,KAAK,QACPV,EAAA,QAAAC,IAAA,2CAAMQ,EAAE,2VACRT,EAAA,QAAAC,IAAA,2CAAMQ,EAAE,oJACRT,EAAA,QAAAC,IAAA,2CAAMQ,EAAE,o+BACRT,EAAA,QAAAC,IAAA,uDACW,UACVQ,EAAE,oMAEHT,EAAA,OAAAC,IAAA,2CAAKU,KAAK,QACVX,EAAA,QAAAC,IAAA,2CAAMQ,EAAE,6GACRT,EAAA,OAAAC,IAAA,2CAAKU,KAAK,MAAMC,EAAE,UAClBZ,EAAA,QAAAC,IAAA,2CAAMQ,EAAE,4JACRT,EAAA,QAAAC,IAAA,2CAAMQ,EAAE,mJAETT,EAAA,QAAAC,IAAA,4CACCD,EAAA,QAAAC,IAAA,2CACCO,GAAG,KACHC,EAAE,gH"}

package/dist/ontario-design-system-components/p-c84fd6f3.entry.js

@@ -0,0 +1,98 @@
+import { r as i, h as o } from './p-14fa9399.js';
+import { a as t, I as s, l as e } from './p-314395de.js';
+import { C as n } from './p-55c48d50.js';
+const a =
+	'.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 r = a;
+const l = class {
+	constructor(o) {
+		i(this, o);
+		this.iconWidth = 24;
+		this.iconWidthState = undefined;
+		this.colour = 'black';
+		this.iconColourState = undefined;
+		this.iconCustomColourState = undefined;
+	}
+	validateWidth() {
+		if (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {
+			const i = new n();
+			i.addDesignSystemTag()
+				.addMonospaceText(' icon-width ')
+				.addRegularText('on')
+				.addMonospaceText(' <ontario-icon-vpn-key> ')
+				.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;
+		}
+	}
+	validateColour() {
+		const i = t(this.colour, s);
+		if (i) {
+			this.iconColourState = this.colour;
+		} else {
+			if (e(this.colour)) {
+				this.iconCustomColourState = this.colour;
+			} else {
+				this.iconColourState = this.warnDefaultColour();
+			}
+		}
+	}
+	warnDefaultColour() {
+		const i = new n();
+		i.addDesignSystemTag()
+			.addMonospaceText(' colour ')
+			.addRegularText('on')
+			.addMonospaceText(' <ontario-icon-vpn-key> ')
+			.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';
+	}
+	componentWillLoad() {
+		this.validateColour();
+		this.validateWidth();
+	}
+	render() {
+		return o(
+			'div',
+			{
+				key: '88db89dba657c1f5361e9fa1b0b32b07dc6537d7',
+				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
+				style: { width: `${this.iconWidthState}px` },
+			},
+			o(
+				'svg',
+				{
+					key: '641395b46dba94e185c54489c32078c4df8e8c02',
+					class: 'svg-icon',
+					style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
+					role: 'img',
+					xmlns: 'http://www.w3.org/2000/svg',
+					viewBox: '0 0 24 24',
+					id: 'vpn-key',
+				},
+				o('path', {
+					key: '974603f8ad8cb64ccbb17881c3eff347d59d6ed9',
+					d: 'M12.65 10A5.99 5.99 0 0 0 7 6c-3.3 0-6 2.7-6 6s2.7 6 6 6a5.99 5.99 0 0 0 5.65-4H17v4h4v-4h2v-4H12.65zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z',
+				}),
+			),
+		);
+	}
+	static get watchers() {
+		return { iconWidth: ['validateWidth'], colour: ['validateColour'] };
+	}
+};
+l.style = r;
+export { l as ontario_icon_vpn_key };
+//# sourceMappingURL=p-c84fd6f3.entry.js.map

package/dist/ontario-design-system-components/p-c84fd6f3.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ontarioIconCss","OntarioIconVpnKeyStyle0","OntarioIconVpnKey","validateWidth","isNaN","this","iconWidth","message","ConsoleMessageClass","addDesignSystemTag","addMonospaceText","addRegularText","printMessage","iconWidthState","validateColour","isValid","validateValueAgainstArray","colour","IconColours","iconColourState","validateColor","iconCustomColourState","warnDefaultColour","componentWillLoad","render","h","key","class","style","width","fill","stroke","role","xmlns","viewBox","id","d"],"sources":["src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-vpn-key&encapsulation=shadow","src/components/ontario-icon/ontario-icon-vpn-key.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-vpn-key',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconVpnKey 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-vpn-key> ')\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-vpn-key> ')\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\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tid=\"vpn-key\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M12.65 10A5.99 5.99 0 0 0 7 6c-3.3 0-6 2.7-6 6s2.7 6 6 6a5.99 5.99 0 0 0 5.65-4H17v4h4v-4h2v-4H12.65zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z\" />\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"],"mappings":"iIAAA,MAAMA,EAAiB,0ZACvB,MAAAC,EAAeD,E,MCYFE,EAAiB,M,wCAKC,G,0CAsCD,Q,oEAzB7B,aAAAC,GACC,GAAIC,MAAMC,KAAKC,aAAgBF,MAAMC,KAAKC,YAAcD,KAAKC,WAAa,EAAI,CAC7E,MAAMC,EAAU,IAAIC,EACpBD,EACEE,qBACAC,iBAAiB,gBACjBC,eAAe,MACfD,iBAAiB,4BACjBC,eACA,GACCP,MAAMC,KAAKC,WAAa,iCAAmC,0FAG5DI,iBAAiB,UACjBC,eAAe,gBACfC,eACFP,KAAKQ,eAAiB,E,KAChB,CACNR,KAAKQ,eAAiBR,KAAKC,S,EA2B7B,cAAAQ,GACC,MAAMC,EAAUC,EAA0BX,KAAKY,OAAQC,GACvD,GAAIH,EAAS,CACZV,KAAKc,gBAAkBd,KAAKY,M,KACtB,CACN,GAAIG,EAAcf,KAAKY,QAAS,CAC/BZ,KAAKgB,sBAAwBhB,KAAKY,M,KAC5B,CACNZ,KAAKc,gBAAkBd,KAAKiB,mB,GASvB,iBAAAA,GACP,MAAMf,EAAU,IAAIC,EACpBD,EACEE,qBACAC,iBAAiB,YACjBC,eAAe,MACfD,iBAAiB,4BACjBC,eAAe,sCACfD,iBAAiB,gCACjBC,eAAe,qCACfD,iBAAiB,WACjBC,eAAe,eACfC,eACF,MAAO,O,CAMR,iBAAAW,GACClB,KAAKS,iBACLT,KAAKF,e,CAMN,MAAAqB,GACC,OACCC,EAAA,OAAAC,IAAA,2CACCC,MAAO,8BAA8BtB,KAAKc,uCAAuCd,KAAKQ,iBACtFe,MAAO,CAAEC,MAAO,GAAGxB,KAAKQ,qBAExBY,EAAA,OAAAC,IAAA,2CACCC,MAAM,WACNC,MAAO,CAAEE,KAAM,GAAGzB,KAAKgB,wBAAyBU,OAAQ,GAAG1B,KAAKgB,yBAChEW,KAAK,MACLC,MAAM,6BACNC,QAAQ,YACRC,GAAG,WAEHV,EAAA,QAAAC,IAAA,2CAAMU,EAAE,4J"}

package/dist/ontario-design-system-components/p-c8f2ccf5.entry.js

@@ -0,0 +1,98 @@
+import { r as i, h as o } from './p-14fa9399.js';
+import { a as t, I as s, l as e } from './p-314395de.js';
+import { C as n } from './p-55c48d50.js';
+const a =
+	'.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 l = a;
+const r = class {
+	constructor(o) {
+		i(this, o);
+		this.iconWidth = 24;
+		this.iconWidthState = undefined;
+		this.colour = 'black';
+		this.iconColourState = undefined;
+		this.iconCustomColourState = undefined;
+	}
+	validateWidth() {
+		if (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {
+			const i = new n();
+			i.addDesignSystemTag()
+				.addMonospaceText(' icon-width ')
+				.addRegularText('on')
+				.addMonospaceText(' <ontario-icon-pin-location-on> ')
+				.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;
+		}
+	}
+	validateColour() {
+		const i = t(this.colour, s);
+		if (i) {
+			this.iconColourState = this.colour;
+		} else {
+			if (e(this.colour)) {
+				this.iconCustomColourState = this.colour;
+			} else {
+				this.iconColourState = this.warnDefaultColour();
+			}
+		}
+	}
+	warnDefaultColour() {
+		const i = new n();
+		i.addDesignSystemTag()
+			.addMonospaceText(' colour ')
+			.addRegularText('on')
+			.addMonospaceText(' <ontario-icon-pin-location-on> ')
+			.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';
+	}
+	componentWillLoad() {
+		this.validateColour();
+		this.validateWidth();
+	}
+	render() {
+		return o(
+			'div',
+			{
+				key: 'b4e390a66b6741d6e64925245f238da053705be5',
+				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
+				style: { width: `${this.iconWidthState}px` },
+			},
+			o(
+				'svg',
+				{
+					key: 'b5ab266512de36f3a51e00f9915b758b5f9bd8be',
+					class: 'svg-icon',
+					style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
+					role: 'img',
+					xmlns: 'http://www.w3.org/2000/svg',
+					viewBox: '0 0 24 24',
+					id: 'pin-location-on',
+				},
+				o('path', {
+					key: 'c922b4e0c6472dca075ea56f14e4ccfbacd93fe1',
+					d: 'M12 11.5A2.5 2.5 0 0 1 9.5 9 2.5 2.5 0 0 1 12 6.5 2.5 2.5 0 0 1 14.5 9a2.5 2.5 0 0 1-.732 1.768A2.5 2.5 0 0 1 12 11.5zM12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7z',
+				}),
+			),
+		);
+	}
+	static get watchers() {
+		return { iconWidth: ['validateWidth'], colour: ['validateColour'] };
+	}
+};
+r.style = l;
+export { r as ontario_icon_pin_location_on };
+//# sourceMappingURL=p-c8f2ccf5.entry.js.map

package/dist/ontario-design-system-components/p-c8f2ccf5.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ontarioIconCss","OntarioIconPinLocationOnStyle0","OntarioIconPinLocationOn","validateWidth","isNaN","this","iconWidth","message","ConsoleMessageClass","addDesignSystemTag","addMonospaceText","addRegularText","printMessage","iconWidthState","validateColour","isValid","validateValueAgainstArray","colour","IconColours","iconColourState","validateColor","iconCustomColourState","warnDefaultColour","componentWillLoad","render","h","key","class","style","width","fill","stroke","role","xmlns","viewBox","id","d"],"sources":["src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-pin-location-on&encapsulation=shadow","src/components/ontario-icon/ontario-icon-pin-location-on.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-pin-location-on',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconPinLocationOn 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-pin-location-on> ')\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-pin-location-on> ')\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\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tid=\"pin-location-on\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M12 11.5A2.5 2.5 0 0 1 9.5 9 2.5 2.5 0 0 1 12 6.5 2.5 2.5 0 0 1 14.5 9a2.5 2.5 0 0 1-.732 1.768A2.5 2.5 0 0 1 12 11.5zM12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7z\" />\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"],"mappings":"iIAAA,MAAMA,EAAiB,0ZACvB,MAAAC,EAAeD,E,MCYFE,EAAwB,M,wCAKN,G,0CAsCD,Q,oEAzB7B,aAAAC,GACC,GAAIC,MAAMC,KAAKC,aAAgBF,MAAMC,KAAKC,YAAcD,KAAKC,WAAa,EAAI,CAC7E,MAAMC,EAAU,IAAIC,EACpBD,EACEE,qBACAC,iBAAiB,gBACjBC,eAAe,MACfD,iBAAiB,oCACjBC,eACA,GACCP,MAAMC,KAAKC,WAAa,iCAAmC,0FAG5DI,iBAAiB,UACjBC,eAAe,gBACfC,eACFP,KAAKQ,eAAiB,E,KAChB,CACNR,KAAKQ,eAAiBR,KAAKC,S,EA2B7B,cAAAQ,GACC,MAAMC,EAAUC,EAA0BX,KAAKY,OAAQC,GACvD,GAAIH,EAAS,CACZV,KAAKc,gBAAkBd,KAAKY,M,KACtB,CACN,GAAIG,EAAcf,KAAKY,QAAS,CAC/BZ,KAAKgB,sBAAwBhB,KAAKY,M,KAC5B,CACNZ,KAAKc,gBAAkBd,KAAKiB,mB,GASvB,iBAAAA,GACP,MAAMf,EAAU,IAAIC,EACpBD,EACEE,qBACAC,iBAAiB,YACjBC,eAAe,MACfD,iBAAiB,oCACjBC,eAAe,sCACfD,iBAAiB,gCACjBC,eAAe,qCACfD,iBAAiB,WACjBC,eAAe,eACfC,eACF,MAAO,O,CAMR,iBAAAW,GACClB,KAAKS,iBACLT,KAAKF,e,CAMN,MAAAqB,GACC,OACCC,EAAA,OAAAC,IAAA,2CACCC,MAAO,8BAA8BtB,KAAKc,uCAAuCd,KAAKQ,iBACtFe,MAAO,CAAEC,MAAO,GAAGxB,KAAKQ,qBAExBY,EAAA,OAAAC,IAAA,2CACCC,MAAM,WACNC,MAAO,CAAEE,KAAM,GAAGzB,KAAKgB,wBAAyBU,OAAQ,GAAG1B,KAAKgB,yBAChEW,KAAK,MACLC,MAAM,6BACNC,QAAQ,YACRC,GAAG,mBAEHV,EAAA,QAAAC,IAAA,2CAAMU,EAAE,2L"}

package/dist/ontario-design-system-components/p-c90c72e0.entry.js

@@ -0,0 +1,98 @@
+import { r as i, h as t } from './p-14fa9399.js';
+import { a as o, I as e, l as s } from './p-314395de.js';
+import { C as a } from './p-55c48d50.js';
+const n =
+	'.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 l = n;
+const r = class {
+	constructor(t) {
+		i(this, t);
+		this.iconWidth = 24;
+		this.iconWidthState = undefined;
+		this.colour = 'black';
+		this.iconColourState = undefined;
+		this.iconCustomColourState = undefined;
+	}
+	validateWidth() {
+		if (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {
+			const i = new a();
+			i.addDesignSystemTag()
+				.addMonospaceText(' icon-width ')
+				.addRegularText('on')
+				.addMonospaceText(' <ontario-icon-delete> ')
+				.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;
+		}
+	}
+	validateColour() {
+		const i = o(this.colour, e);
+		if (i) {
+			this.iconColourState = this.colour;
+		} else {
+			if (s(this.colour)) {
+				this.iconCustomColourState = this.colour;
+			} else {
+				this.iconColourState = this.warnDefaultColour();
+			}
+		}
+	}
+	warnDefaultColour() {
+		const i = new a();
+		i.addDesignSystemTag()
+			.addMonospaceText(' colour ')
+			.addRegularText('on')
+			.addMonospaceText(' <ontario-icon-delete> ')
+			.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';
+	}
+	componentWillLoad() {
+		this.validateColour();
+		this.validateWidth();
+	}
+	render() {
+		return t(
+			'div',
+			{
+				key: '6ae66fe4a184ca383a70d66f2fc4d6b30f96a93b',
+				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
+				style: { width: `${this.iconWidthState}px` },
+			},
+			t(
+				'svg',
+				{
+					key: '3afaaacc234302e41d001782f81637238d07a6ae',
+					class: 'svg-icon',
+					style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
+					role: 'img',
+					xmlns: 'http://www.w3.org/2000/svg',
+					viewBox: '0 0 24 24',
+					id: 'delete',
+				},
+				t('path', {
+					key: '48d4cca32255e86a119bb6004d9dcb0760391e68',
+					d: 'M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z',
+				}),
+			),
+		);
+	}
+	static get watchers() {
+		return { iconWidth: ['validateWidth'], colour: ['validateColour'] };
+	}
+};
+r.style = l;
+export { r as ontario_icon_delete };
+//# sourceMappingURL=p-c90c72e0.entry.js.map

package/dist/ontario-design-system-components/p-c90c72e0.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ontarioIconCss","OntarioIconDeleteStyle0","OntarioIconDelete","validateWidth","isNaN","this","iconWidth","message","ConsoleMessageClass","addDesignSystemTag","addMonospaceText","addRegularText","printMessage","iconWidthState","validateColour","isValid","validateValueAgainstArray","colour","IconColours","iconColourState","validateColor","iconCustomColourState","warnDefaultColour","componentWillLoad","render","h","key","class","style","width","fill","stroke","role","xmlns","viewBox","id","d"],"sources":["src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-delete&encapsulation=shadow","src/components/ontario-icon/ontario-icon-delete.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-delete',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconDelete 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-delete> ')\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-delete> ')\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\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tid=\"delete\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\" />\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"],"mappings":"iIAAA,MAAMA,EAAiB,0ZACvB,MAAAC,EAAeD,E,MCYFE,EAAiB,M,wCAKC,G,0CAsCD,Q,oEAzB7B,aAAAC,GACC,GAAIC,MAAMC,KAAKC,aAAgBF,MAAMC,KAAKC,YAAcD,KAAKC,WAAa,EAAI,CAC7E,MAAMC,EAAU,IAAIC,EACpBD,EACEE,qBACAC,iBAAiB,gBACjBC,eAAe,MACfD,iBAAiB,2BACjBC,eACA,GACCP,MAAMC,KAAKC,WAAa,iCAAmC,0FAG5DI,iBAAiB,UACjBC,eAAe,gBACfC,eACFP,KAAKQ,eAAiB,E,KAChB,CACNR,KAAKQ,eAAiBR,KAAKC,S,EA2B7B,cAAAQ,GACC,MAAMC,EAAUC,EAA0BX,KAAKY,OAAQC,GACvD,GAAIH,EAAS,CACZV,KAAKc,gBAAkBd,KAAKY,M,KACtB,CACN,GAAIG,EAAcf,KAAKY,QAAS,CAC/BZ,KAAKgB,sBAAwBhB,KAAKY,M,KAC5B,CACNZ,KAAKc,gBAAkBd,KAAKiB,mB,GASvB,iBAAAA,GACP,MAAMf,EAAU,IAAIC,EACpBD,EACEE,qBACAC,iBAAiB,YACjBC,eAAe,MACfD,iBAAiB,2BACjBC,eAAe,sCACfD,iBAAiB,gCACjBC,eAAe,qCACfD,iBAAiB,WACjBC,eAAe,eACfC,eACF,MAAO,O,CAMR,iBAAAW,GACClB,KAAKS,iBACLT,KAAKF,e,CAMN,MAAAqB,GACC,OACCC,EAAA,OAAAC,IAAA,2CACCC,MAAO,8BAA8BtB,KAAKc,uCAAuCd,KAAKQ,iBACtFe,MAAO,CAAEC,MAAO,GAAGxB,KAAKQ,qBAExBY,EAAA,OAAAC,IAAA,2CACCC,MAAM,WACNC,MAAO,CAAEE,KAAM,GAAGzB,KAAKgB,wBAAyBU,OAAQ,GAAG1B,KAAKgB,yBAChEW,KAAK,MACLC,MAAM,6BACNC,QAAQ,YACRC,GAAG,UAEHV,EAAA,QAAAC,IAAA,2CAAMU,EAAE,mF"}

package/dist/ontario-design-system-components/p-cad51f9e.entry.js

@@ -0,0 +1,100 @@
+import { r as i, h as t } from './p-14fa9399.js';
+import { a as o, I as s, l as a } from './p-314395de.js';
+import { C as e } from './p-55c48d50.js';
+const n =
+	'.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 l = n;
+const r = class {
+	constructor(t) {
+		i(this, t);
+		this.iconWidth = 24;
+		this.iconWidthState = undefined;
+		this.colour = 'black';
+		this.iconColourState = undefined;
+		this.iconCustomColourState = undefined;
+	}
+	validateWidth() {
+		if (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {
+			const i = new e();
+			i.addDesignSystemTag()
+				.addMonospaceText(' icon-width ')
+				.addRegularText('on')
+				.addMonospaceText(' <ontario-icon-attach> ')
+				.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;
+		}
+	}
+	validateColour() {
+		const i = o(this.colour, s);
+		if (i) {
+			this.iconColourState = this.colour;
+		} else {
+			if (a(this.colour)) {
+				this.iconCustomColourState = this.colour;
+			} else {
+				this.iconColourState = this.warnDefaultColour();
+			}
+		}
+	}
+	warnDefaultColour() {
+		const i = new e();
+		i.addDesignSystemTag()
+			.addMonospaceText(' colour ')
+			.addRegularText('on')
+			.addMonospaceText(' <ontario-icon-attach> ')
+			.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';
+	}
+	componentWillLoad() {
+		this.validateColour();
+		this.validateWidth();
+	}
+	render() {
+		return t(
+			'div',
+			{
+				key: '45bb6b01aa3097e52194f808479f0be239c681ba',
+				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
+				style: { width: `${this.iconWidthState}px` },
+			},
+			t(
+				'svg',
+				{
+					key: 'cc747f6c43584b72203befe5cbeab444925e4709',
+					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: 'attach',
+				},
+				t('path', {
+					key: 'b8ab9f2f2a8553a4721aef2996d6ce1045dbc749',
+					d: 'M16.5 6v11.5a4 4 0 1 1-8 0V5a2.5 2.5 0 1 1 5 0v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5a2.5 2.5 0 1 0 5 0V5a4 4 0 1 0-8 0v12.5a5.5 5.5 0 1 0 11 0V6h-1.5z',
+					fill: '#000',
+				}),
+			),
+		);
+	}
+	static get watchers() {
+		return { iconWidth: ['validateWidth'], colour: ['validateColour'] };
+	}
+};
+r.style = l;
+export { r as ontario_icon_attach };
+//# sourceMappingURL=p-cad51f9e.entry.js.map

package/dist/ontario-design-system-components/p-cad51f9e.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ontarioIconCss","OntarioIconAttachStyle0","OntarioIconAttach","validateWidth","isNaN","this","iconWidth","message","ConsoleMessageClass","addDesignSystemTag","addMonospaceText","addRegularText","printMessage","iconWidthState","validateColour","isValid","validateValueAgainstArray","colour","IconColours","iconColourState","validateColor","iconCustomColourState","warnDefaultColour","componentWillLoad","render","h","key","class","style","width","fill","stroke","role","xmlns","viewBox","id","d"],"sources":["src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-attach&encapsulation=shadow","src/components/ontario-icon/ontario-icon-attach.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-attach',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconAttach 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-attach> ')\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-attach> ')\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=\"attach\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M16.5 6v11.5a4 4 0 1 1-8 0V5a2.5 2.5 0 1 1 5 0v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5a2.5 2.5 0 1 0 5 0V5a4 4 0 1 0-8 0v12.5a5.5 5.5 0 1 0 11 0V6h-1.5z\"\n\t\t\t\t\t\tfill=\"#000\"\n\t\t\t\t\t/>\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"],"mappings":"iIAAA,MAAMA,EAAiB,0ZACvB,MAAAC,EAAeD,E,MCYFE,EAAiB,M,wCAKC,G,0CAsCD,Q,oEAzB7B,aAAAC,GACC,GAAIC,MAAMC,KAAKC,aAAgBF,MAAMC,KAAKC,YAAcD,KAAKC,WAAa,EAAI,CAC7E,MAAMC,EAAU,IAAIC,EACpBD,EACEE,qBACAC,iBAAiB,gBACjBC,eAAe,MACfD,iBAAiB,2BACjBC,eACA,GACCP,MAAMC,KAAKC,WAAa,iCAAmC,0FAG5DI,iBAAiB,UACjBC,eAAe,gBACfC,eACFP,KAAKQ,eAAiB,E,KAChB,CACNR,KAAKQ,eAAiBR,KAAKC,S,EA2B7B,cAAAQ,GACC,MAAMC,EAAUC,EAA0BX,KAAKY,OAAQC,GACvD,GAAIH,EAAS,CACZV,KAAKc,gBAAkBd,KAAKY,M,KACtB,CACN,GAAIG,EAAcf,KAAKY,QAAS,CAC/BZ,KAAKgB,sBAAwBhB,KAAKY,M,KAC5B,CACNZ,KAAKc,gBAAkBd,KAAKiB,mB,GASvB,iBAAAA,GACP,MAAMf,EAAU,IAAIC,EACpBD,EACEE,qBACAC,iBAAiB,YACjBC,eAAe,MACfD,iBAAiB,2BACjBC,eAAe,sCACfD,iBAAiB,gCACjBC,eAAe,qCACfD,iBAAiB,WACjBC,eAAe,eACfC,eACF,MAAO,O,CAMR,iBAAAW,GACClB,KAAKS,iBACLT,KAAKF,e,CAMN,MAAAqB,GACC,OACCC,EAAA,OAAAC,IAAA,2CACCC,MAAO,8BAA8BtB,KAAKc,uCAAuCd,KAAKQ,iBACtFe,MAAO,CAAEC,MAAO,GAAGxB,KAAKQ,qBAExBY,EAAA,OAAAC,IAAA,2CACCC,MAAM,WACNC,MAAO,CAAEE,KAAM,GAAGzB,KAAKgB,wBAAyBU,OAAQ,GAAG1B,KAAKgB,yBAChEW,KAAK,MACLC,MAAM,6BACNH,KAAK,OACLI,QAAQ,YACRC,GAAG,UAEHV,EAAA,QAAAC,IAAA,2CACCU,EAAE,4JACFN,KAAK,U"}