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

package/dist/ontario-design-system-components/p-b2019a19.js

@@ -0,0 +1,76 @@
+var s;
+(function (s) {
+	s['Error'] = 'error';
+	s['Info'] = 'info';
+	s['Log'] = 'log';
+	s['Warning'] = 'warning';
+})(s || (s = {}));
+var n;
+(function (s) {
+	s['Regular'] = 'regular';
+	s['Code'] = 'code';
+})(n || (n = {}));
+const t = 'Ontario Design System';
+const e = '12px';
+const o = [
+	'background-color: #367A76',
+	'border: none',
+	'color: white',
+	'padding: 2px 5px',
+	'text-align: center',
+	'text-decoration: none',
+	'display: inline-block',
+	'cursor: pointer',
+	'border-radius: 5px',
+].join(';');
+const r = ['font-family: sans-serif', `font-size: ${e}`].join(';');
+const i = ['font-family: monospace', `font-size: ${e}`].join(';');
+function a(s) {
+	const n = '%c';
+	return n.concat(s);
+}
+class c {
+	message;
+	styles;
+	constructor() {
+		this.message = '';
+		this.styles = [];
+	}
+	addDesignSystemTag() {
+		this.message = a(t);
+		this.styles.push(o);
+		return this;
+	}
+	addRegularText(s) {
+		this.addText(s, r);
+		return this;
+	}
+	addMonospaceText(s) {
+		this.addText(s, i);
+		return this;
+	}
+	printMessage(n = s.Warning) {
+		const t = [this.message, ...this.styles];
+		switch (n) {
+			case s.Error:
+				console.error.apply(null, t);
+				break;
+			case s.Info:
+				console.info.apply(null, t);
+				break;
+			case s.Warning:
+				console.warn.apply(null, t);
+				break;
+			default:
+				console.log.apply(null, t);
+		}
+	}
+	addText(s, n) {
+		if (s && s?.trim().length > 0) {
+			this.message += a(s);
+			this.styles.push(n);
+		}
+	}
+}
+export { c as C, s as a };
+//# sourceMappingURL=p-b2019a19.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["ConsoleType","MessageStyle","designSystemTag","fontSize","tagStyles","join","regularTextStyles","monospaceTextStyles","addSpecifier","message","styleSpecifier","concat","ConsoleMessageClass","styles","constructor","this","addDesignSystemTag","push","addRegularText","text","addText","addMonospaceText","printMessage","consoleType","Warning","messageArray","Error","console","error","apply","Info","info","warn","log","style","trim","length"],"sources":["src/utils/console-message/console-message.enum.ts","src/utils/console-message/console-message.ts"],"sourcesContent":["export enum ConsoleType {\n\tError = 'error',\n\tInfo = 'info',\n\tLog = 'log',\n\tWarning = 'warning',\n}\n\nexport enum MessageStyle {\n\tRegular = 'regular',\n\tCode = 'code',\n}\n","import { ConsoleMessage } from './console-message.interface';\nimport { ConsoleType, MessageStyle } from './console-message.enum';\n\n// system tag with formatting specifier\nconst designSystemTag = 'Ontario Design System';\n\n// default font size for console messages\nconst fontSize = '12px';\n\n// styles for the system tag in a string format\n// the `background-color`, `color`, `padding` and `border-radius` values are hardcoded because\n// they are specific for console message use case\nconst tagStyles = [\n\t'background-color: #367A76',\n\t'border: none',\n\t'color: white',\n\t'padding: 2px 5px',\n\t'text-align: center',\n\t'text-decoration: none',\n\t'display: inline-block',\n\t'cursor: pointer',\n\t'border-radius: 5px',\n].join(';');\n\n// styles for regular text in string format\nconst regularTextStyles = ['font-family: sans-serif', `font-size: ${fontSize}`].join(';');\n\n// styles for code in string format\nconst monospaceTextStyles = ['font-family: monospace', `font-size: ${fontSize}`].join(';');\n\nfunction addSpecifier(message: string): string {\n\tconst styleSpecifier = '%c';\n\treturn styleSpecifier.concat(message);\n}\n\n// print message to console depending on the `ConsoleType`\nexport function printConsoleMessage(\n\tmessages: ConsoleMessage[] | string,\n\tconsoleType = ConsoleType.Warning,\n\thasDesignSystemTag = true,\n) {\n\t// retrieve message from each object and concatenate them into one single string in order\n\t// if `hasSystemTag` is true then the message string will being with the value stored within `designSystemTag`.\n\tconst message =\n\t\ttypeof messages === 'string' // Note the TypeScript transpiler Stencil is using doesn't like this type guard as a const.\n\t\t\t? `${addSpecifier(designSystemTag)}${addSpecifier(` ${messages}`)}`\n\t\t\t: messages?.reduce(\n\t\t\t\t\t(message: string, currentObject: ConsoleMessage) => (message += addSpecifier(currentObject.message) ?? ''),\n\t\t\t\t\thasDesignSystemTag ? addSpecifier(designSystemTag) : '',\n\t\t\t\t);\n\n\t// array of arguments to be passed into the the console function\n\tconst messageArray: string[] = [];\n\n\t// push message into the array of arguments\n\t// depending on whether the system tag is used (i.e. `hasSystemTag` is true), push `tagStyles` into the array\n\tif (hasDesignSystemTag) {\n\t\tmessageArray.push(message, tagStyles);\n\t} else {\n\t\tmessageArray.push(message);\n\t}\n\n\t// Note the TypeScript transpiler Stencil is using doesn't like this type guard as a const.\n\tif (typeof messages === 'string') {\n\t\tmessageArray.push(regularTextStyles);\n\t} else {\n\t\t// push style of each message into the array of arguments in order\n\t\tmessages?.forEach((message: ConsoleMessage) => {\n\t\t\tmessageArray.push(message.style && message.style === MessageStyle.Code ? monospaceTextStyles : regularTextStyles);\n\t\t});\n\t}\n\n\t// pass array of arguments into the console function for printing depending on `consoleType`\n\t// the `function.apply()` function handles array of arguments which allows list of arguments to be set programmatically\n\tswitch (consoleType) {\n\t\tcase ConsoleType.Error:\n\t\t\treturn console.error.apply(null, messageArray);\n\n\t\tcase ConsoleType.Info:\n\t\t\treturn console.info.apply(null, messageArray);\n\n\t\tcase ConsoleType.Warning:\n\t\t\treturn console.warn.apply(null, messageArray);\n\n\t\tdefault:\n\t\t\treturn console.log.apply(null, messageArray);\n\t}\n}\n\n// build and print console message with a fluent interface design\nexport class ConsoleMessageClass {\n\tmessage: string;\n\tstyles: string[];\n\n\tconstructor() {\n\t\tthis.message = '';\n\t\tthis.styles = [];\n\t}\n\n\t// add the `Ontario Design System` tag to the beginning of the message\n\t// the first call in the chain if a tag is required\n\taddDesignSystemTag() {\n\t\tthis.message = addSpecifier(designSystemTag);\n\t\tthis.styles.push(tagStyles);\n\t\treturn this;\n\t}\n\n\t// build console message as regular text\n\taddRegularText(text: string) {\n\t\tthis.addText(text, regularTextStyles);\n\t\treturn this;\n\t}\n\n\t// build console message as monospace text\n\taddMonospaceText(text: string) {\n\t\tthis.addText(text, monospaceTextStyles);\n\t\treturn this;\n\t}\n\n\t// print message to console depending on the `ConsoleType`\n\t// the last function call in the chain\n\tprintMessage(consoleType = ConsoleType.Warning) {\n\t\tconst messageArray = [this.message, ...this.styles];\n\n\t\t// pass array of arguments into the console function for printing depending on `consoleType`\n\t\t// the `function.apply()` function handles array of arguments which allows list of arguments to be set programmatically\n\t\tswitch (consoleType) {\n\t\t\tcase ConsoleType.Error:\n\t\t\t\tconsole.error.apply(null, messageArray);\n\t\t\t\tbreak;\n\t\t\tcase ConsoleType.Info:\n\t\t\t\tconsole.info.apply(null, messageArray);\n\t\t\t\tbreak;\n\t\t\tcase ConsoleType.Warning:\n\t\t\t\tconsole.warn.apply(null, messageArray);\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tconsole.log.apply(null, messageArray);\n\t\t}\n\t}\n\n\t// add text to the `message` property and associated styles into the `styles` array\n\tprivate addText(text: string, style: string) {\n\t\tif (text && text?.trim().length > 0) {\n\t\t\tthis.message += addSpecifier(text);\n\t\t\tthis.styles.push(style);\n\t\t}\n\t}\n}\n"],"mappings":"IAAYA,GAAZ,SAAYA,GACXA,EAAA,iBACAA,EAAA,eACAA,EAAA,aACAA,EAAA,oBACA,EALD,CAAYA,MAAW,KAOvB,IAAYC,GAAZ,SAAYA,GACXA,EAAA,qBACAA,EAAA,cACA,EAHD,CAAYA,MAAY,KCHxB,MAAMC,EAAkB,wBAGxB,MAAMC,EAAW,OAKjB,MAAMC,EAAY,CACjB,4BACA,eACA,eACA,mBACA,qBACA,wBACA,wBACA,kBACA,sBACCC,KAAK,KAGP,MAAMC,EAAoB,CAAC,0BAA2B,cAAcH,KAAYE,KAAK,KAGrF,MAAME,EAAsB,CAAC,yBAA0B,cAAcJ,KAAYE,KAAK,KAEtF,SAASG,EAAaC,GACrB,MAAMC,EAAiB,KACvB,OAAOA,EAAeC,OAAOF,EAC9B,C,MAyDaG,EACZH,QACAI,OAEA,WAAAC,GACCC,KAAKN,QAAU,GACfM,KAAKF,OAAS,E,CAKf,kBAAAG,GACCD,KAAKN,QAAUD,EAAaN,GAC5Ba,KAAKF,OAAOI,KAAKb,GACjB,OAAOW,I,CAIR,cAAAG,CAAeC,GACdJ,KAAKK,QAAQD,EAAMb,GACnB,OAAOS,I,CAIR,gBAAAM,CAAiBF,GAChBJ,KAAKK,QAAQD,EAAMZ,GACnB,OAAOQ,I,CAKR,YAAAO,CAAaC,EAAcvB,EAAYwB,SACtC,MAAMC,EAAe,CAACV,KAAKN,WAAYM,KAAKF,QAI5C,OAAQU,GACP,KAAKvB,EAAY0B,MAChBC,QAAQC,MAAMC,MAAM,KAAMJ,GAC1B,MACD,KAAKzB,EAAY8B,KAChBH,QAAQI,KAAKF,MAAM,KAAMJ,GACzB,MACD,KAAKzB,EAAYwB,QAChBG,QAAQK,KAAKH,MAAM,KAAMJ,GACzB,MACD,QACCE,QAAQM,IAAIJ,MAAM,KAAMJ,G,CAKnB,OAAAL,CAAQD,EAAce,GAC7B,GAAIf,GAAQA,GAAMgB,OAAOC,OAAS,EAAG,CACpCrB,KAAKN,SAAWD,EAAaW,GAC7BJ,KAAKF,OAAOI,KAAKiB,E","ignoreList":[]}

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

@@ -0,0 +1,98 @@
+import { r as o, h as t } from './p-79293fd1.js';
+import { a as i, I as s, l as a } from './p-efc52a1c.js';
+import { C as e } from './p-b2019a19.js';
+const l =
+	'.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 n = l;
+const r = class {
+	constructor(t) {
+		o(this, t);
+	}
+	iconWidth = 24;
+	iconWidthState;
+	validateWidth() {
+		if (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {
+			const o = new e();
+			o.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;
+		}
+	}
+	colour = 'black';
+	iconColourState;
+	iconCustomColourState;
+	validateColour() {
+		const o = i(this.colour, s);
+		if (o) {
+			this.iconColourState = this.colour;
+		} else {
+			if (a(this.colour)) {
+				this.iconCustomColourState = this.colour;
+			} else {
+				this.iconColourState = this.warnDefaultColour();
+			}
+		}
+	}
+	warnDefaultColour() {
+		const o = new e();
+		o.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: '14c26131c30e07125f3bfd7229d7f89d61ddfaa7',
+				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
+				style: { width: `${this.iconWidthState}px` },
+			},
+			t(
+				'svg',
+				{
+					key: '0a9c510ce559ee84f22343d707532de28cb516eb',
+					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: '11a6d523e9bf6be29778f572498e18b9ca8710b5',
+					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 = n;
+export { r as ontario_icon_attach };
+//# sourceMappingURL=p-b50dec6e.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["ontarioIconCss","OntarioIconAttachStyle0","OntarioIconAttach","iconWidth","iconWidthState","validateWidth","isNaN","this","message","ConsoleMessageClass","addDesignSystemTag","addMonospaceText","addRegularText","printMessage","colour","iconColourState","iconCustomColourState","validateColour","isValid","validateValueAgainstArray","IconColours","validateColor","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,yBAKrBC,UAAsB,GAMrBC,eAOT,aAAAC,GACC,GAAIC,MAAMC,KAAKJ,aAAgBG,MAAMC,KAAKJ,YAAcI,KAAKJ,WAAa,EAAI,CAC7E,MAAMK,EAAU,IAAIC,EACpBD,EACEE,qBACAC,iBAAiB,gBACjBC,eAAe,MACfD,iBAAiB,2BACjBC,eACA,GACCN,MAAMC,KAAKJ,WAAa,iCAAmC,0FAG5DQ,iBAAiB,UACjBC,eAAe,gBACfC,eACFN,KAAKH,eAAiB,E,KAChB,CACNG,KAAKH,eAAiBG,KAAKJ,S,EAOrBW,OAAqB,QAMpBC,gBAMAC,sBAQT,cAAAC,GACC,MAAMC,EAAUC,EAA0BZ,KAAKO,OAAQM,GACvD,GAAIF,EAAS,CACZX,KAAKQ,gBAAkBR,KAAKO,M,KACtB,CACN,GAAIO,EAAcd,KAAKO,QAAS,CAC/BP,KAAKS,sBAAwBT,KAAKO,M,KAC5B,CACNP,KAAKQ,gBAAkBR,KAAKe,mB,GASvB,iBAAAA,GACP,MAAMd,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,iBAAAU,GACChB,KAAKU,iBACLV,KAAKF,e,CAMN,MAAAmB,GACC,OACCC,EAAA,OAAAC,IAAA,2CACCC,MAAO,8BAA8BpB,KAAKQ,uCAAuCR,KAAKH,iBACtFwB,MAAO,CAAEC,MAAO,GAAGtB,KAAKH,qBAExBqB,EAAA,OAAAC,IAAA,2CACCC,MAAM,WACNC,MAAO,CAAEE,KAAM,GAAGvB,KAAKS,wBAAyBe,OAAQ,GAAGxB,KAAKS,yBAChEgB,KAAK,MACLC,MAAM,6BACNH,KAAK,OACLI,QAAQ,YACRC,GAAG,UAEHV,EAAA,QAAAC,IAAA,2CACCU,EAAE,4JACFN,KAAK,U","ignoreList":[]}

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

@@ -0,0 +1,96 @@
+import { r as o, h as i } from './p-79293fd1.js';
+import { a as t, I as s, l as a } from './p-efc52a1c.js';
+import { C as e } from './p-b2019a19.js';
+const r =
+	'.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 n = r;
+const l = class {
+	constructor(i) {
+		o(this, i);
+	}
+	iconWidth = 24;
+	iconWidthState;
+	validateWidth() {
+		if (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {
+			const o = new e();
+			o.addDesignSystemTag()
+				.addMonospaceText(' icon-width ')
+				.addRegularText('on')
+				.addMonospaceText(' <ontario-icon-facebook> ')
+				.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;
+		}
+	}
+	colour = 'black';
+	iconColourState;
+	iconCustomColourState;
+	validateColour() {
+		const o = t(this.colour, s);
+		if (o) {
+			this.iconColourState = this.colour;
+		} else {
+			if (a(this.colour)) {
+				this.iconCustomColourState = this.colour;
+			} else {
+				this.iconColourState = this.warnDefaultColour();
+			}
+		}
+	}
+	warnDefaultColour() {
+		const o = new e();
+		o.addDesignSystemTag()
+			.addMonospaceText(' colour ')
+			.addRegularText('on')
+			.addMonospaceText(' <ontario-icon-facebook> ')
+			.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 i(
+			'div',
+			{
+				key: '61464e3530606b6477056dad03d32a584abd7be8',
+				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
+				style: { width: `${this.iconWidthState}px` },
+			},
+			i(
+				'svg',
+				{
+					key: '00c23fd3569403a93c81e6761cf2784300dad1f6',
+					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: 'facebook',
+				},
+				i('path', {
+					key: 'a9573f38def048f5c41c82aafb0bf60a311a1f3c',
+					d: 'M17 2v4h-2c-.7 0-1 .8-1 1.5V10h3v4h-3v8h-4v-8H7v-4h3V6a4 4 0 0 1 4-4h3z',
+				}),
+			),
+		);
+	}
+	static get watchers() {
+		return { iconWidth: ['validateWidth'], colour: ['validateColour'] };
+	}
+};
+l.style = n;
+export { l as ontario_icon_facebook };
+//# sourceMappingURL=p-b9ae9efe.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["ontarioIconCss","OntarioIconFacebookStyle0","OntarioIconFacebook","iconWidth","iconWidthState","validateWidth","isNaN","this","message","ConsoleMessageClass","addDesignSystemTag","addMonospaceText","addRegularText","printMessage","colour","iconColourState","iconCustomColourState","validateColour","isValid","validateValueAgainstArray","IconColours","validateColor","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-facebook&encapsulation=shadow","src/components/ontario-icon/ontario-icon-facebook.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-facebook',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconFacebook 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-facebook> ')\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-facebook> ')\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=\"facebook\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M17 2v4h-2c-.7 0-1 .8-1 1.5V10h3v4h-3v8h-4v-8H7v-4h3V6a4 4 0 0 1 4-4h3z\" />\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,EAAmB,M,yBAKvBC,UAAsB,GAMrBC,eAOT,aAAAC,GACC,GAAIC,MAAMC,KAAKJ,aAAgBG,MAAMC,KAAKJ,YAAcI,KAAKJ,WAAa,EAAI,CAC7E,MAAMK,EAAU,IAAIC,EACpBD,EACEE,qBACAC,iBAAiB,gBACjBC,eAAe,MACfD,iBAAiB,6BACjBC,eACA,GACCN,MAAMC,KAAKJ,WAAa,iCAAmC,0FAG5DQ,iBAAiB,UACjBC,eAAe,gBACfC,eACFN,KAAKH,eAAiB,E,KAChB,CACNG,KAAKH,eAAiBG,KAAKJ,S,EAOrBW,OAAqB,QAMpBC,gBAMAC,sBAQT,cAAAC,GACC,MAAMC,EAAUC,EAA0BZ,KAAKO,OAAQM,GACvD,GAAIF,EAAS,CACZX,KAAKQ,gBAAkBR,KAAKO,M,KACtB,CACN,GAAIO,EAAcd,KAAKO,QAAS,CAC/BP,KAAKS,sBAAwBT,KAAKO,M,KAC5B,CACNP,KAAKQ,gBAAkBR,KAAKe,mB,GASvB,iBAAAA,GACP,MAAMd,EAAU,IAAIC,EACpBD,EACEE,qBACAC,iBAAiB,YACjBC,eAAe,MACfD,iBAAiB,6BACjBC,eAAe,sCACfD,iBAAiB,gCACjBC,eAAe,qCACfD,iBAAiB,WACjBC,eAAe,eACfC,eACF,MAAO,O,CAMR,iBAAAU,GACChB,KAAKU,iBACLV,KAAKF,e,CAMN,MAAAmB,GACC,OACCC,EAAA,OAAAC,IAAA,2CACCC,MAAO,8BAA8BpB,KAAKQ,uCAAuCR,KAAKH,iBACtFwB,MAAO,CAAEC,MAAO,GAAGtB,KAAKH,qBAExBqB,EAAA,OAAAC,IAAA,2CACCC,MAAM,WACNC,MAAO,CAAEE,KAAM,GAAGvB,KAAKS,wBAAyBe,OAAQ,GAAGxB,KAAKS,yBAChEgB,KAAK,MACLC,MAAM,6BACNC,QAAQ,YACRC,GAAG,YAEHV,EAAA,QAAAC,IAAA,2CAAMU,EAAE,6E","ignoreList":[]}

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

@@ -0,0 +1,96 @@
+import { r as o, h as t } from './p-79293fd1.js';
+import { a as i, I as s, l as e } from './p-efc52a1c.js';
+import { C as a } from './p-b2019a19.js';
+const r =
+	'.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 n = r;
+const l = class {
+	constructor(t) {
+		o(this, t);
+	}
+	iconWidth = 24;
+	iconWidthState;
+	validateWidth() {
+		if (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {
+			const o = new a();
+			o.addDesignSystemTag()
+				.addMonospaceText(' icon-width ')
+				.addRegularText('on')
+				.addMonospaceText(' <ontario-icon-sort> ')
+				.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;
+		}
+	}
+	colour = 'black';
+	iconColourState;
+	iconCustomColourState;
+	validateColour() {
+		const o = i(this.colour, s);
+		if (o) {
+			this.iconColourState = this.colour;
+		} else {
+			if (e(this.colour)) {
+				this.iconCustomColourState = this.colour;
+			} else {
+				this.iconColourState = this.warnDefaultColour();
+			}
+		}
+	}
+	warnDefaultColour() {
+		const o = new a();
+		o.addDesignSystemTag()
+			.addMonospaceText(' colour ')
+			.addRegularText('on')
+			.addMonospaceText(' <ontario-icon-sort> ')
+			.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: '86178ab12fad527203a357064eb7e95878267d6f',
+				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
+				style: { width: `${this.iconWidthState}px` },
+			},
+			t(
+				'svg',
+				{
+					key: 'd2118c3183321123a54edfc75b6c8a030a1ef764',
+					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: 'sort',
+				},
+				t('path', {
+					key: 'ba1c60faf4cbf33663861e2c2ce48c06055ae04f',
+					d: 'M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z',
+				}),
+			),
+		);
+	}
+	static get watchers() {
+		return { iconWidth: ['validateWidth'], colour: ['validateColour'] };
+	}
+};
+l.style = n;
+export { l as ontario_icon_sort };
+//# sourceMappingURL=p-bb1c6f74.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["ontarioIconCss","OntarioIconSortStyle0","OntarioIconSort","iconWidth","iconWidthState","validateWidth","isNaN","this","message","ConsoleMessageClass","addDesignSystemTag","addMonospaceText","addRegularText","printMessage","colour","iconColourState","iconCustomColourState","validateColour","isValid","validateValueAgainstArray","IconColours","validateColor","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-sort&encapsulation=shadow","src/components/ontario-icon/ontario-icon-sort.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-sort',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconSort implements IconWithColour {\n\t/**\n\t * The icon width will autogenerate the height since the icons are in square format, thus preserving\n\t * the aspect ratio.\n\t */\n\t@Prop() iconWidth: IconSize = 24;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's width depending on validation result.\n\t */\n\t@State() iconWidthState: number;\n\n\t/**\n\t * Watch for changes in the `iconWidth` variable for validation purpose.\n\t * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).\n\t */\n\t@Watch('iconWidth')\n\tvalidateWidth() {\n\t\tif (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' icon-width ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-sort> ')\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-sort> ')\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=\"sort\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z\" />\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,EAAe,M,yBAKnBC,UAAsB,GAMrBC,eAOT,aAAAC,GACC,GAAIC,MAAMC,KAAKJ,aAAgBG,MAAMC,KAAKJ,YAAcI,KAAKJ,WAAa,EAAI,CAC7E,MAAMK,EAAU,IAAIC,EACpBD,EACEE,qBACAC,iBAAiB,gBACjBC,eAAe,MACfD,iBAAiB,yBACjBC,eACA,GACCN,MAAMC,KAAKJ,WAAa,iCAAmC,0FAG5DQ,iBAAiB,UACjBC,eAAe,gBACfC,eACFN,KAAKH,eAAiB,E,KAChB,CACNG,KAAKH,eAAiBG,KAAKJ,S,EAOrBW,OAAqB,QAMpBC,gBAMAC,sBAQT,cAAAC,GACC,MAAMC,EAAUC,EAA0BZ,KAAKO,OAAQM,GACvD,GAAIF,EAAS,CACZX,KAAKQ,gBAAkBR,KAAKO,M,KACtB,CACN,GAAIO,EAAcd,KAAKO,QAAS,CAC/BP,KAAKS,sBAAwBT,KAAKO,M,KAC5B,CACNP,KAAKQ,gBAAkBR,KAAKe,mB,GASvB,iBAAAA,GACP,MAAMd,EAAU,IAAIC,EACpBD,EACEE,qBACAC,iBAAiB,YACjBC,eAAe,MACfD,iBAAiB,yBACjBC,eAAe,sCACfD,iBAAiB,gCACjBC,eAAe,qCACfD,iBAAiB,WACjBC,eAAe,eACfC,eACF,MAAO,O,CAMR,iBAAAU,GACChB,KAAKU,iBACLV,KAAKF,e,CAMN,MAAAmB,GACC,OACCC,EAAA,OAAAC,IAAA,2CACCC,MAAO,8BAA8BpB,KAAKQ,uCAAuCR,KAAKH,iBACtFwB,MAAO,CAAEC,MAAO,GAAGtB,KAAKH,qBAExBqB,EAAA,OAAAC,IAAA,2CACCC,MAAM,WACNC,MAAO,CAAEE,KAAM,GAAGvB,KAAKS,wBAAyBe,OAAQ,GAAGxB,KAAKS,yBAChEgB,KAAK,MACLC,MAAM,6BACNC,QAAQ,YACRC,GAAG,QAEHV,EAAA,QAAAC,IAAA,2CAAMU,EAAE,oD","ignoreList":[]}

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

@@ -0,0 +1,96 @@
+import { r as o, h as i } from './p-79293fd1.js';
+import { a as t, I as s, l as e } from './p-efc52a1c.js';
+import { C as a } from './p-b2019a19.js';
+const r =
+	'.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 n = r;
+const l = class {
+	constructor(i) {
+		o(this, i);
+	}
+	iconWidth = 24;
+	iconWidthState;
+	validateWidth() {
+		if (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {
+			const o = new a();
+			o.addDesignSystemTag()
+				.addMonospaceText(' icon-width ')
+				.addRegularText('on')
+				.addMonospaceText(' <ontario-icon-favourite-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;
+		}
+	}
+	colour = 'black';
+	iconColourState;
+	iconCustomColourState;
+	validateColour() {
+		const o = t(this.colour, s);
+		if (o) {
+			this.iconColourState = this.colour;
+		} else {
+			if (e(this.colour)) {
+				this.iconCustomColourState = this.colour;
+			} else {
+				this.iconColourState = this.warnDefaultColour();
+			}
+		}
+	}
+	warnDefaultColour() {
+		const o = new a();
+		o.addDesignSystemTag()
+			.addMonospaceText(' colour ')
+			.addRegularText('on')
+			.addMonospaceText(' <ontario-icon-favourite-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 i(
+			'div',
+			{
+				key: '1abe576a82421661dfcd51fca9b02fb45680f344',
+				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
+				style: { width: `${this.iconWidthState}px` },
+			},
+			i(
+				'svg',
+				{
+					key: 'f85b816ec315c777aa415198f9c28e2fb17dc14d',
+					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: 'favourite-on',
+				},
+				i('path', {
+					key: 'ac01f03c2825f36f60979e46546aad120f513b3b',
+					d: 'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3A5.99 5.99 0 0 1 12 5.09 5.99 5.99 0 0 1 16.5 3C19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z',
+				}),
+			),
+		);
+	}
+	static get watchers() {
+		return { iconWidth: ['validateWidth'], colour: ['validateColour'] };
+	}
+};
+l.style = n;
+export { l as ontario_icon_favourite_on };
+//# sourceMappingURL=p-c65f6600.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["ontarioIconCss","OntarioIconFavouriteOnStyle0","OntarioIconFavouriteOn","iconWidth","iconWidthState","validateWidth","isNaN","this","message","ConsoleMessageClass","addDesignSystemTag","addMonospaceText","addRegularText","printMessage","colour","iconColourState","iconCustomColourState","validateColour","isValid","validateValueAgainstArray","IconColours","validateColor","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-favourite-on&encapsulation=shadow","src/components/ontario-icon/ontario-icon-favourite-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-favourite-on',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconFavouriteOn 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-favourite-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-favourite-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=\"favourite-on\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3A5.99 5.99 0 0 1 12 5.09 5.99 5.99 0 0 1 16.5 3C19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z\" />\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,EAAsB,M,yBAK1BC,UAAsB,GAMrBC,eAOT,aAAAC,GACC,GAAIC,MAAMC,KAAKJ,aAAgBG,MAAMC,KAAKJ,YAAcI,KAAKJ,WAAa,EAAI,CAC7E,MAAMK,EAAU,IAAIC,EACpBD,EACEE,qBACAC,iBAAiB,gBACjBC,eAAe,MACfD,iBAAiB,iCACjBC,eACA,GACCN,MAAMC,KAAKJ,WAAa,iCAAmC,0FAG5DQ,iBAAiB,UACjBC,eAAe,gBACfC,eACFN,KAAKH,eAAiB,E,KAChB,CACNG,KAAKH,eAAiBG,KAAKJ,S,EAOrBW,OAAqB,QAMpBC,gBAMAC,sBAQT,cAAAC,GACC,MAAMC,EAAUC,EAA0BZ,KAAKO,OAAQM,GACvD,GAAIF,EAAS,CACZX,KAAKQ,gBAAkBR,KAAKO,M,KACtB,CACN,GAAIO,EAAcd,KAAKO,QAAS,CAC/BP,KAAKS,sBAAwBT,KAAKO,M,KAC5B,CACNP,KAAKQ,gBAAkBR,KAAKe,mB,GASvB,iBAAAA,GACP,MAAMd,EAAU,IAAIC,EACpBD,EACEE,qBACAC,iBAAiB,YACjBC,eAAe,MACfD,iBAAiB,iCACjBC,eAAe,sCACfD,iBAAiB,gCACjBC,eAAe,qCACfD,iBAAiB,WACjBC,eAAe,eACfC,eACF,MAAO,O,CAMR,iBAAAU,GACChB,KAAKU,iBACLV,KAAKF,e,CAMN,MAAAmB,GACC,OACCC,EAAA,OAAAC,IAAA,2CACCC,MAAO,8BAA8BpB,KAAKQ,uCAAuCR,KAAKH,iBACtFwB,MAAO,CAAEC,MAAO,GAAGtB,KAAKH,qBAExBqB,EAAA,OAAAC,IAAA,2CACCC,MAAM,WACNC,MAAO,CAAEE,KAAM,GAAGvB,KAAKS,wBAAyBe,OAAQ,GAAGxB,KAAKS,yBAChEgB,KAAK,MACLC,MAAM,6BACNC,QAAQ,YACRC,GAAG,gBAEHV,EAAA,QAAAC,IAAA,2CAAMU,EAAE,iL","ignoreList":[]}

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

@@ -0,0 +1,96 @@
+import { r as o, h as i } from './p-79293fd1.js';
+import { a as t, I as s, l as e } from './p-efc52a1c.js';
+import { C as a } from './p-b2019a19.js';
+const r =
+	'.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 n = r;
+const l = class {
+	constructor(i) {
+		o(this, i);
+	}
+	iconWidth = 24;
+	iconWidthState;
+	validateWidth() {
+		if (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {
+			const o = new a();
+			o.addDesignSystemTag()
+				.addMonospaceText(' icon-width ')
+				.addRegularText('on')
+				.addMonospaceText(' <ontario-icon-save> ')
+				.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;
+		}
+	}
+	colour = 'black';
+	iconColourState;
+	iconCustomColourState;
+	validateColour() {
+		const o = t(this.colour, s);
+		if (o) {
+			this.iconColourState = this.colour;
+		} else {
+			if (e(this.colour)) {
+				this.iconCustomColourState = this.colour;
+			} else {
+				this.iconColourState = this.warnDefaultColour();
+			}
+		}
+	}
+	warnDefaultColour() {
+		const o = new a();
+		o.addDesignSystemTag()
+			.addMonospaceText(' colour ')
+			.addRegularText('on')
+			.addMonospaceText(' <ontario-icon-save> ')
+			.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 i(
+			'div',
+			{
+				key: '5415382dd8a5df70eb7b2094e36d58b1ecdea958',
+				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
+				style: { width: `${this.iconWidthState}px` },
+			},
+			i(
+				'svg',
+				{
+					key: '09367749cf6446f94531439802fa9d0cb36ac2b4',
+					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: 'save',
+				},
+				i('path', {
+					key: '98db96419ae176587c0f0bce363f55321dee8b7f',
+					d: 'M17 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z',
+				}),
+			),
+		);
+	}
+	static get watchers() {
+		return { iconWidth: ['validateWidth'], colour: ['validateColour'] };
+	}
+};
+l.style = n;
+export { l as ontario_icon_save };
+//# sourceMappingURL=p-c8de9466.entry.js.map