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

package/components/ontario-icon-mastercard-alt.js

@@ -0,0 +1,161 @@
+import { p as proxyCustomElement, H, h } from './index.js';
+import { C as ConsoleMessageClass } from './p-Cdm-Ot0O.js';
+
+const ontarioIconCss =
+	'.ontario-icon svg,.ontario-icon{display:inline-block;stroke-width:0;stroke:currentColor;fill:currentColor;vertical-align:middle;overflow:hidden}.ontario-icon--blue svg{stroke:#0066CC;fill:#0066CC}.ontario-icon--grey svg{stroke:#666666;fill:#666666}.ontario-icon--black svg{stroke:#1A1A1A;fill:#1A1A1A}.ontario-icon--white svg{stroke:#FFFFFF;fill:#FFFFFF}.ontario-icon--white svg{stroke:#FFFFFF;fill:#FFFFFF}';
+
+const OntarioIconMastercardAlt$1 = /*@__PURE__*/ proxyCustomElement(
+	class OntarioIconMastercardAlt extends H {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			/**
+			 * The icon width will autogenerate the height since the icons are in square format, thus preserving
+			 * the aspect ratio.
+			 */
+			this.iconWidth = 24;
+		}
+		/**
+		 * Watch for changes in the `iconWidth` variable for validation purpose.
+		 * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).
+		 */
+		validateWidth() {
+			if (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addMonospaceText(' icon-width ')
+					.addRegularText('on')
+					.addMonospaceText(' <ontario-icon-mastercard-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;
+			}
+		}
+		/**
+		 * Validate that the `colour` attribute is not set by users
+		 * Prints a warning message if the `colour` attribute is set
+		 */
+		validateColour() {
+			if (this.host.hasAttribute('colour')) {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addMonospaceText(' colour ')
+					.addRegularText('on')
+					.addMonospaceText(' <ontario-icon-mastercard-alt> ')
+					.addRegularText('cannot be set. The provided colour is ignored.')
+					.printMessage();
+			}
+		}
+		/**
+		 * Stencil component lifecycle method that is called once after the component is first connected to the DOM.
+		 */
+		componentWillLoad() {
+			this.validateColour();
+			this.validateWidth();
+		}
+		/**
+		 * Returns the HTML code to be rendered into a custom element.
+		 */
+		render() {
+			return h(
+				'div',
+				{
+					key: 'ddda25fbfb6b461f19277deeea5a705d65065895',
+					class: `ontario-icon ontario-icon--width-${this.iconWidthState}`,
+					style: { width: `${this.iconWidthState}px` },
+				},
+				h(
+					'svg',
+					{
+						key: '25b88727d4fa0d1ec0eef35ceb31091d4fb88be8',
+						class: 'svg-icon',
+						role: 'img',
+						xmlns: 'http://www.w3.org/2000/svg',
+						viewBox: '0 0 24 24',
+						id: 'mastercard-alt',
+					},
+					h('circle', {
+						key: '968f4597f381ae829f975dc32b19fd516f51679a',
+						cx: '8',
+						cy: '12',
+						r: '6.5',
+						fill: '#eb001b',
+					}),
+					h('circle', {
+						key: '5f9c378865951a70fbf1918947c3cc3b793729b3',
+						cx: '16',
+						cy: '12',
+						r: '6.5',
+						fill: '#f79e1b',
+					}),
+					h('path', {
+						key: '9eff7e769a41716c2ac14347418a53aab0f4f59c',
+						d: 'M12 17.124S9.5 15.5 9.5 12 12 6.876 12 6.876 14.5 8.5 14.5 12 12 17.124 12 17.124z',
+						fill: '#ff5f00',
+					}),
+					h('path', {
+						key: 'a7eea59a1b3f1614361f21dad4c026f467c4ed07',
+						d: 'M21.173 16.85v-.3h.125v-.06H21v.06h.117v.3h.055zm.578 0v-.35h-.1l-.105.25-.105-.25h-.1v.35h.065v-.265l.098.227h.067l.098-.227v.265h.063z',
+						fill: '#f79e1b',
+					}),
+				),
+			);
+		}
+		get host() {
+			return this;
+		}
+		static get watchers() {
+			return {
+				iconWidth: ['validateWidth'],
+			};
+		}
+		static get style() {
+			return ontarioIconCss;
+		}
+	},
+	[
+		257,
+		'ontario-icon-mastercard-alt',
+		{
+			iconWidth: [2, 'icon-width'],
+			iconWidthState: [32],
+		},
+		undefined,
+		{
+			iconWidth: ['validateWidth'],
+		},
+	],
+);
+function defineCustomElement$1() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = ['ontario-icon-mastercard-alt'];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-icon-mastercard-alt':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioIconMastercardAlt$1);
+				}
+				break;
+		}
+	});
+}
+defineCustomElement$1();
+
+const OntarioIconMastercardAlt = OntarioIconMastercardAlt$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { OntarioIconMastercardAlt, defineCustomElement };
+//# sourceMappingURL=ontario-icon-mastercard-alt.js.map
+
+//# sourceMappingURL=ontario-icon-mastercard-alt.js.map

package/components/ontario-icon-mastercard-alt.js.map

@@ -0,0 +1 @@
+{"file":"ontario-icon-mastercard-alt.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,yZAAyZ;;MCWnaA,0BAAwB,iBAAAC,kBAAA,CAAA,MAAA,wBAAA,SAAAC,CAAA,CAAA;AALrC,IAAA,WAAA,GAAA;;;;AAMC;;;AAGG;AACK,QAAA,IAAS,CAAA,SAAA,GAAa,EAAE;AAuFhC;AA/EA;;;AAGG;IAEH,aAAa,GAAA;QACZ,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,EAAE;AAC7E,YAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;YACzC;AACE,iBAAA,kBAAkB;iBAClB,gBAAgB,CAAC,cAAc;iBAC/B,cAAc,CAAC,IAAI;iBACnB,gBAAgB,CAAC,iCAAiC;AAClD,iBAAA,cAAc,CACd,CACC,EAAA,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,gCAAgC,GAAG,8BAC5D,0DAA0D;iBAE1D,gBAAgB,CAAC,QAAQ;iBACzB,cAAc,CAAC,cAAc;AAC7B,iBAAA,YAAY,EAAE;AAChB,YAAA,IAAI,CAAC,cAAc,GAAG,EAAE;;aAClB;AACN,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,SAAS;;;AAUtC;;;AAGG;IACH,cAAc,GAAA;QACb,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE;AACrC,YAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;YACzC;AACE,iBAAA,kBAAkB;iBAClB,gBAAgB,CAAC,UAAU;iBAC3B,cAAc,CAAC,IAAI;iBACnB,gBAAgB,CAAC,iCAAiC;iBAClD,cAAc,CAAC,gDAAgD;AAC/D,iBAAA,YAAY,EAAE;;;AAIlB;;AAEG;IACH,iBAAiB,GAAA;QAChB,IAAI,CAAC,cAAc,EAAE;QACrB,IAAI,CAAC,aAAa,EAAE;;AAGrB;;AAEG;IACH,MAAM,GAAA;AACL,QAAA,QACC,4DACC,KAAK,EAAE,CAAoC,iCAAA,EAAA,IAAI,CAAC,cAAc,CAAA,CAAE,EAChE,KAAK,EAAE,EAAE,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,cAAc,CAAI,EAAA,CAAA,EAAE,EAAA,EAE5C,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,KAAK,EAAC,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAC,EAAE,EAAC,gBAAgB,EAAA,EAC1G,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,KAAK,EAAC,IAAI,EAAC,SAAS,EAAG,CAAA,EAChD,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,KAAK,EAAC,IAAI,EAAC,SAAS,EAAG,CAAA,EACjD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,oFAAoF,EAAC,IAAI,EAAC,SAAS,EAAG,CAAA,EAC9G,CACC,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAC,EAAC,0IAA0I,EAC5I,IAAI,EAAC,SAAS,EACb,CAAA,CACG,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioIconMastercardAlt","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-mastercard-alt&encapsulation=shadow","src/components/ontario-icon/ontario-icon-mastercard-alt.tsx"],"sourcesContent":["@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-icon svg,\n// Fractal component style coverage ↓\n.ontario-icon {\n\tdisplay: inline-block;\n\tstroke-width: 0;\n\tstroke: currentColor;\n\tfill: currentColor;\n\t/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */\n\tvertical-align: middle;\n\t/* Paths and strokes that overflow the viewBox can show in IE11. */\n\toverflow: hidden;\n}\n\n.ontario-icon--blue svg {\n\tstroke: colours.$ontario-colour-icon-blue;\n\tfill: colours.$ontario-colour-icon-blue;\n}\n\n.ontario-icon--grey svg {\n\tstroke: colours.$ontario-colour-icon-grey;\n\tfill: colours.$ontario-colour-icon-grey;\n}\n\n.ontario-icon--black svg {\n\tstroke: colours.$ontario-colour-icon-black;\n\tfill: colours.$ontario-colour-icon-black;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-icon-white;\n\tfill: colours.$ontario-colour-icon-white;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-white;\n\tfill: colours.$ontario-colour-white;\n}\n","// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State, 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-mastercard-alt',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconMastercardAlt 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-mastercard-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-mastercard-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=\"mastercard-alt\">\n\t\t\t\t\t<circle cx=\"8\" cy=\"12\" r=\"6.5\" fill=\"#eb001b\" />\n\t\t\t\t\t<circle cx=\"16\" cy=\"12\" r=\"6.5\" fill=\"#f79e1b\" />\n\t\t\t\t\t<path d=\"M12 17.124S9.5 15.5 9.5 12 12 6.876 12 6.876 14.5 8.5 14.5 12 12 17.124 12 17.124z\" fill=\"#ff5f00\" />\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M21.173 16.85v-.3h.125v-.06H21v.06h.117v.3h.055zm.578 0v-.35h-.1l-.105.25-.105-.25h-.1v.35h.065v-.265l.098.227h.067l.098-.227v.265h.063z\"\n\t\t\t\t\t\tfill=\"#f79e1b\"\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"],"version":3}

package/components/ontario-icon-mastercard.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from '../dist/types/components';
+
+interface OntarioIconMastercard extends Components.OntarioIconMastercard, HTMLElement {}
+export const OntarioIconMastercard: {
+	prototype: OntarioIconMastercard;
+	new (): OntarioIconMastercard;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ontario-icon-mastercard.js

@@ -0,0 +1,173 @@
+import { p as proxyCustomElement, H, h } from './index.js';
+import { C as ConsoleMessageClass } from './p-Cdm-Ot0O.js';
+
+const ontarioIconCss =
+	'.ontario-icon svg,.ontario-icon{display:inline-block;stroke-width:0;stroke:currentColor;fill:currentColor;vertical-align:middle;overflow:hidden}.ontario-icon--blue svg{stroke:#0066CC;fill:#0066CC}.ontario-icon--grey svg{stroke:#666666;fill:#666666}.ontario-icon--black svg{stroke:#1A1A1A;fill:#1A1A1A}.ontario-icon--white svg{stroke:#FFFFFF;fill:#FFFFFF}.ontario-icon--white svg{stroke:#FFFFFF;fill:#FFFFFF}';
+
+const OntarioIconMastercard$1 = /*@__PURE__*/ proxyCustomElement(
+	class OntarioIconMastercard extends H {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			/**
+			 * The icon width will autogenerate the height since the icons are in square format, thus preserving
+			 * the aspect ratio.
+			 */
+			this.iconWidth = 24;
+		}
+		/**
+		 * Watch for changes in the `iconWidth` variable for validation purpose.
+		 * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).
+		 */
+		validateWidth() {
+			if (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addMonospaceText(' icon-width ')
+					.addRegularText('on')
+					.addMonospaceText(' <ontario-icon-mastercard> ')
+					.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;
+			}
+		}
+		/**
+		 * Validate that the `colour` attribute is not set by users
+		 * Prints a warning message if the `colour` attribute is set
+		 */
+		validateColour() {
+			if (this.host.hasAttribute('colour')) {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addMonospaceText(' colour ')
+					.addRegularText('on')
+					.addMonospaceText(' <ontario-icon-mastercard> ')
+					.addRegularText('cannot be set. The provided colour is ignored.')
+					.printMessage();
+			}
+		}
+		/**
+		 * Stencil component lifecycle method that is called once after the component is first connected to the DOM.
+		 */
+		componentWillLoad() {
+			this.validateColour();
+			this.validateWidth();
+		}
+		/**
+		 * Returns the HTML code to be rendered into a custom element.
+		 */
+		render() {
+			return h(
+				'div',
+				{
+					key: '8bd18188b1336a69d4dd2b32e2f17af192cf5589',
+					class: `ontario-icon ontario-icon--width-${this.iconWidthState}`,
+					style: { width: `${this.iconWidthState}px` },
+				},
+				h(
+					'svg',
+					{
+						key: 'dfa7242508b90540e64c871de481b352caa408c9',
+						class: 'svg-icon',
+						role: 'img',
+						xmlns: 'http://www.w3.org/2000/svg',
+						viewBox: '0 0 24 24',
+						id: 'mastercard',
+					},
+					h('circle', {
+						key: 'b42e578fd9a55a7062b06d0379591f192373ab5f',
+						cx: '8',
+						cy: '12',
+						r: '6.5',
+						fill: '#eb001b',
+					}),
+					h('circle', {
+						key: '18a7ab96e3f93e661a3e952ff1c26b9f128cb7d4',
+						cx: '16',
+						cy: '12',
+						r: '6.5',
+						fill: '#f79e1b',
+					}),
+					h('path', {
+						key: '0cfc8ee3405afa64ef2e73def62a236c86e80836',
+						d: 'M12 17.124S9.5 15.5 9.5 12 12 6.876 12 6.876 14.5 8.5 14.5 12 12 17.124 12 17.124z',
+						fill: '#ff5f00',
+					}),
+					h('path', {
+						key: 'de29cf62dd8188ff03e8684118926f5375b4626e',
+						d: 'M21.173 16.85v-.3h.125v-.06H21v.06h.117v.3h.055zm.578 0v-.35h-.1l-.105.25-.105-.25h-.1v.35h.065v-.265l.098.227h.067l.098-.227v.265h.063z',
+						fill: '#f79e1b',
+					}),
+					h(
+						'g',
+						{ key: 'de1e2463c5ea24aaf1bb2c2448b36b1d6cf8e031', fill: '#231f20' },
+						h('path', {
+							key: '4419cc817256ee48c2788e5e4c624c7cfc97fe0f',
+							d: 'M5.275 21.953v-1.098a.66.66 0 0 0-.187-.503.65.65 0 0 0-.501-.192.68.68 0 0 0-.35.072c-.108.055-.2.137-.265.24-.06-.1-.145-.18-.246-.235a.64.64 0 0 0-.332-.076.58.58 0 0 0-.513.26v-.216H2.5v1.75h.384V21c-.016-.12.023-.245.105-.333s.203-.138.324-.132c.253 0 .38.165.38.46v.974h.384V21c-.016-.12.024-.244.105-.333s.202-.138.323-.132c.26 0 .384.165.384.46v.974l.384-.007zm5.687-1.75h-.626v-.53h-.384v.53h-.348v.348h.355v.806c0 .406.157.648.608.648.168.001.333-.046.476-.136l-.1-.326c-.102.06-.218.095-.337.1-.183 0-.253-.117-.253-.293v-.798h.622l-.004-.348zm3.247-.044c-.186-.005-.368.096-.46.256v-.212h-.377v1.75h.38v-.98c0-.29.124-.45.366-.45a.62.62 0 0 1 .238.044l.117-.366c-.087-.03-.178-.047-.27-.048l.007.007zm-4.9.183a1.31 1.31 0 0 0-.714-.183c-.443 0-.732.212-.732.56 0 .286.212.46.604.516l.183.026c.21.03.308.084.308.183 0 .136-.14.212-.4.212a.93.93 0 0 1-.582-.183l-.183.297c.222.155.487.234.758.227.505 0 .798-.238.798-.57s-.23-.47-.61-.523l-.183-.026c-.165-.022-.297-.055-.297-.172s.124-.205.333-.205c.193.002.382.054.55.15l.168-.308zM19.5 20.16c-.186-.005-.368.096-.46.256v-.212h-.377v1.75h.38v-.98c0-.29.124-.45.366-.45a.62.62 0 0 1 .238.044l.117-.366c-.087-.03-.18-.047-.27-.048l.007.007zm-4.906.915c-.01.246.09.492.265.664s.423.265.67.25c.23.012.453-.063.63-.21l-.183-.308a.77.77 0 0 1-.458.158.56.56 0 0 1-.517-.56.56.56 0 0 1 .517-.56.77.77 0 0 1 .458.157l.183-.308c-.176-.146-.4-.22-.63-.21-.246-.014-.493.08-.67.25s-.274.418-.265.664v.007zm3.566 0v-.87h-.38v.212c-.13-.166-.34-.264-.55-.256-.243 0-.476.096-.647.268s-.268.404-.268.647.096.476.268.647.405.268.647.268c.21.008.42-.1.55-.256v.212h.38v-.87zm-1.417 0c.02-.323.338-.557.65-.484a.54.54 0 0 1 .4.422c.056.315-.195.62-.518.622-.3.004-.55-.264-.53-.56zm-4.595-.915c-.243.003-.474.103-.643.277s-.263.408-.26.65.103.474.277.643.408.262.65.26c.263.014.522-.07.727-.238l-.183-.282c-.145.116-.324.18-.51.183-.126.01-.25-.028-.35-.108s-.16-.195-.175-.32h1.3v-.146c0-.55-.34-.915-.83-.915l-.005-.004zm0 .34c.114-.003.227.042.31.12a.44.44 0 0 1 .133.304h-.915a.45.45 0 0 1 .465-.425h.007zm9.54.578V19.5h-.366v.915c-.13-.166-.34-.264-.55-.256-.243 0-.476.096-.647.268s-.268.404-.268.647.096.476.268.647.404.268.647.268c.21.008.42-.1.55-.256v.212h.366v-.868zm.635.62c.046-.001.092.017.126.05s.052.077.052.123-.02.1-.052.123-.08.05-.126.05c-.07-.001-.136-.043-.165-.106-.018-.043-.018-.093 0-.136a.18.18 0 0 1 .095-.091c.017-.007.072-.013.07-.013zm0 .31c.035 0 .07-.015.095-.04s.036-.058.036-.09c0-.05-.03-.1-.078-.12s-.112-.01-.15.03a.14.14 0 0 0 0 .183.14.14 0 0 0 .102.04h-.005zm-1.394-1.414c.315.074.49.43.365.723a.54.54 0 0 1-.484.321.54.54 0 0 1-.501-.347.54.54 0 0 1 .619-.697zm-13.505.484v-.875h-.38v.212c-.065-.083-.148-.15-.244-.194s-.2-.066-.306-.062c-.243 0-.476.096-.647.268s-.268.404-.268.647.096.476.268.647.404.268.647.268c.21.008.42-.1.55-.256v.212h.38v-.868zm-1.417 0c.02-.32.334-.558.65-.484a.54.54 0 0 1 .399.421c.056.315-.194.62-.518.623a.55.55 0 0 1-.535-.56h.004z',
+						}),
+						h('path', {
+							key: '5e79f72b2bb3c2c3ab5a10853f58104a5a49b242',
+							d: 'M22.335 21.79c.017-.001.033.002.047.012.005.005.01.01.013.017s.004.014.003.02c-.005.023-.008.028-.013.032-.01.01-.024.015-.038.016l.052.06h-.04l-.048-.06h-.016v.06h-.034v-.158h.075zm-.04.03v.043h.04c.012 0 .023.002.023-.008v-.023c0-.01-.002-.013-.023-.012h-.04z',
+						}),
+					),
+				),
+			);
+		}
+		get host() {
+			return this;
+		}
+		static get watchers() {
+			return {
+				iconWidth: ['validateWidth'],
+			};
+		}
+		static get style() {
+			return ontarioIconCss;
+		}
+	},
+	[
+		257,
+		'ontario-icon-mastercard',
+		{
+			iconWidth: [2, 'icon-width'],
+			iconWidthState: [32],
+		},
+		undefined,
+		{
+			iconWidth: ['validateWidth'],
+		},
+	],
+);
+function defineCustomElement$1() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = ['ontario-icon-mastercard'];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-icon-mastercard':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioIconMastercard$1);
+				}
+				break;
+		}
+	});
+}
+defineCustomElement$1();
+
+const OntarioIconMastercard = OntarioIconMastercard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { OntarioIconMastercard, defineCustomElement };
+//# sourceMappingURL=ontario-icon-mastercard.js.map
+
+//# sourceMappingURL=ontario-icon-mastercard.js.map

package/components/ontario-icon-mastercard.js.map

@@ -0,0 +1 @@
+{"file":"ontario-icon-mastercard.js","mappings":"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","names":["OntarioIconMastercard","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-mastercard&encapsulation=shadow","src/components/ontario-icon/ontario-icon-mastercard.tsx"],"sourcesContent":["@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-icon svg,\n// Fractal component style coverage ↓\n.ontario-icon {\n\tdisplay: inline-block;\n\tstroke-width: 0;\n\tstroke: currentColor;\n\tfill: currentColor;\n\t/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */\n\tvertical-align: middle;\n\t/* Paths and strokes that overflow the viewBox can show in IE11. */\n\toverflow: hidden;\n}\n\n.ontario-icon--blue svg {\n\tstroke: colours.$ontario-colour-icon-blue;\n\tfill: colours.$ontario-colour-icon-blue;\n}\n\n.ontario-icon--grey svg {\n\tstroke: colours.$ontario-colour-icon-grey;\n\tfill: colours.$ontario-colour-icon-grey;\n}\n\n.ontario-icon--black svg {\n\tstroke: colours.$ontario-colour-icon-black;\n\tfill: colours.$ontario-colour-icon-black;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-icon-white;\n\tfill: colours.$ontario-colour-icon-white;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-white;\n\tfill: colours.$ontario-colour-white;\n}\n","// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State, 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-mastercard',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconMastercard 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-mastercard> ')\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-mastercard> ')\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=\"mastercard\">\n\t\t\t\t\t<circle cx=\"8\" cy=\"12\" r=\"6.5\" fill=\"#eb001b\" />\n\t\t\t\t\t<circle cx=\"16\" cy=\"12\" r=\"6.5\" fill=\"#f79e1b\" />\n\t\t\t\t\t<path d=\"M12 17.124S9.5 15.5 9.5 12 12 6.876 12 6.876 14.5 8.5 14.5 12 12 17.124 12 17.124z\" fill=\"#ff5f00\" />\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M21.173 16.85v-.3h.125v-.06H21v.06h.117v.3h.055zm.578 0v-.35h-.1l-.105.25-.105-.25h-.1v.35h.065v-.265l.098.227h.067l.098-.227v.265h.063z\"\n\t\t\t\t\t\tfill=\"#f79e1b\"\n\t\t\t\t\t/>\n\t\t\t\t\t<g fill=\"#231f20\">\n\t\t\t\t\t\t<path d=\"M5.275 21.953v-1.098a.66.66 0 0 0-.187-.503.65.65 0 0 0-.501-.192.68.68 0 0 0-.35.072c-.108.055-.2.137-.265.24-.06-.1-.145-.18-.246-.235a.64.64 0 0 0-.332-.076.58.58 0 0 0-.513.26v-.216H2.5v1.75h.384V21c-.016-.12.023-.245.105-.333s.203-.138.324-.132c.253 0 .38.165.38.46v.974h.384V21c-.016-.12.024-.244.105-.333s.202-.138.323-.132c.26 0 .384.165.384.46v.974l.384-.007zm5.687-1.75h-.626v-.53h-.384v.53h-.348v.348h.355v.806c0 .406.157.648.608.648.168.001.333-.046.476-.136l-.1-.326c-.102.06-.218.095-.337.1-.183 0-.253-.117-.253-.293v-.798h.622l-.004-.348zm3.247-.044c-.186-.005-.368.096-.46.256v-.212h-.377v1.75h.38v-.98c0-.29.124-.45.366-.45a.62.62 0 0 1 .238.044l.117-.366c-.087-.03-.178-.047-.27-.048l.007.007zm-4.9.183a1.31 1.31 0 0 0-.714-.183c-.443 0-.732.212-.732.56 0 .286.212.46.604.516l.183.026c.21.03.308.084.308.183 0 .136-.14.212-.4.212a.93.93 0 0 1-.582-.183l-.183.297c.222.155.487.234.758.227.505 0 .798-.238.798-.57s-.23-.47-.61-.523l-.183-.026c-.165-.022-.297-.055-.297-.172s.124-.205.333-.205c.193.002.382.054.55.15l.168-.308zM19.5 20.16c-.186-.005-.368.096-.46.256v-.212h-.377v1.75h.38v-.98c0-.29.124-.45.366-.45a.62.62 0 0 1 .238.044l.117-.366c-.087-.03-.18-.047-.27-.048l.007.007zm-4.906.915c-.01.246.09.492.265.664s.423.265.67.25c.23.012.453-.063.63-.21l-.183-.308a.77.77 0 0 1-.458.158.56.56 0 0 1-.517-.56.56.56 0 0 1 .517-.56.77.77 0 0 1 .458.157l.183-.308c-.176-.146-.4-.22-.63-.21-.246-.014-.493.08-.67.25s-.274.418-.265.664v.007zm3.566 0v-.87h-.38v.212c-.13-.166-.34-.264-.55-.256-.243 0-.476.096-.647.268s-.268.404-.268.647.096.476.268.647.405.268.647.268c.21.008.42-.1.55-.256v.212h.38v-.87zm-1.417 0c.02-.323.338-.557.65-.484a.54.54 0 0 1 .4.422c.056.315-.195.62-.518.622-.3.004-.55-.264-.53-.56zm-4.595-.915c-.243.003-.474.103-.643.277s-.263.408-.26.65.103.474.277.643.408.262.65.26c.263.014.522-.07.727-.238l-.183-.282c-.145.116-.324.18-.51.183-.126.01-.25-.028-.35-.108s-.16-.195-.175-.32h1.3v-.146c0-.55-.34-.915-.83-.915l-.005-.004zm0 .34c.114-.003.227.042.31.12a.44.44 0 0 1 .133.304h-.915a.45.45 0 0 1 .465-.425h.007zm9.54.578V19.5h-.366v.915c-.13-.166-.34-.264-.55-.256-.243 0-.476.096-.647.268s-.268.404-.268.647.096.476.268.647.404.268.647.268c.21.008.42-.1.55-.256v.212h.366v-.868zm.635.62c.046-.001.092.017.126.05s.052.077.052.123-.02.1-.052.123-.08.05-.126.05c-.07-.001-.136-.043-.165-.106-.018-.043-.018-.093 0-.136a.18.18 0 0 1 .095-.091c.017-.007.072-.013.07-.013zm0 .31c.035 0 .07-.015.095-.04s.036-.058.036-.09c0-.05-.03-.1-.078-.12s-.112-.01-.15.03a.14.14 0 0 0 0 .183.14.14 0 0 0 .102.04h-.005zm-1.394-1.414c.315.074.49.43.365.723a.54.54 0 0 1-.484.321.54.54 0 0 1-.501-.347.54.54 0 0 1 .619-.697zm-13.505.484v-.875h-.38v.212c-.065-.083-.148-.15-.244-.194s-.2-.066-.306-.062c-.243 0-.476.096-.647.268s-.268.404-.268.647.096.476.268.647.404.268.647.268c.21.008.42-.1.55-.256v.212h.38v-.868zm-1.417 0c.02-.32.334-.558.65-.484a.54.54 0 0 1 .399.421c.056.315-.194.62-.518.623a.55.55 0 0 1-.535-.56h.004z\" />\n\t\t\t\t\t\t<path d=\"M22.335 21.79c.017-.001.033.002.047.012.005.005.01.01.013.017s.004.014.003.02c-.005.023-.008.028-.013.032-.01.01-.024.015-.038.016l.052.06h-.04l-.048-.06h-.016v.06h-.034v-.158h.075zm-.04.03v.043h.04c.012 0 .023.002.023-.008v-.023c0-.01-.002-.013-.023-.012h-.04z\" />\n\t\t\t\t\t</g>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n}\n// content automatically generated by `generate-icons.js` ends\n"],"version":3}

package/components/ontario-icon-media-fast-forward.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from '../dist/types/components';
+
+interface OntarioIconMediaFastForward extends Components.OntarioIconMediaFastForward, HTMLElement {}
+export const OntarioIconMediaFastForward: {
+	prototype: OntarioIconMediaFastForward;
+	new (): OntarioIconMediaFastForward;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ontario-icon-media-fast-forward.js

@@ -0,0 +1,167 @@
+import { p as proxyCustomElement, H, h } from './index.js';
+import { I as IconColours, v as validateColor } from './p-BOcd5PoR.js';
+import { C as ConsoleMessageClass } from './p-Cdm-Ot0O.js';
+import { v as validateValueAgainstArray } from './p-CNqFEifG.js';
+
+const ontarioIconCss =
+	'.ontario-icon svg,.ontario-icon{display:inline-block;stroke-width:0;stroke:currentColor;fill:currentColor;vertical-align:middle;overflow:hidden}.ontario-icon--blue svg{stroke:#0066CC;fill:#0066CC}.ontario-icon--grey svg{stroke:#666666;fill:#666666}.ontario-icon--black svg{stroke:#1A1A1A;fill:#1A1A1A}.ontario-icon--white svg{stroke:#FFFFFF;fill:#FFFFFF}.ontario-icon--white svg{stroke:#FFFFFF;fill:#FFFFFF}';
+
+const OntarioIconMediaFastForward$1 = /*@__PURE__*/ proxyCustomElement(
+	class OntarioIconMediaFastForward extends H {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			/**
+			 * The icon width will autogenerate the height since the icons are in square format, thus preserving
+			 * the aspect ratio.
+			 */
+			this.iconWidth = 24;
+			/**
+			 * Set the icon's colour.
+			 */
+			this.colour = 'black';
+		}
+		/**
+		 * Watch for changes in the `iconWidth` variable for validation purpose.
+		 * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).
+		 */
+		validateWidth() {
+			if (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addMonospaceText(' icon-width ')
+					.addRegularText('on')
+					.addMonospaceText(' <ontario-icon-media-fast-forward> ')
+					.addRegularText(
+						`${isNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'}; only a positive number is allowed. The default size of`,
+					)
+					.addMonospaceText(' 24px ')
+					.addRegularText('was assumed.')
+					.printMessage();
+				this.iconWidthState = 24;
+			} else {
+				this.iconWidthState = this.iconWidth;
+			}
+		}
+		/**
+		 * Watch for changes in the `colour` variable for validation purpose.
+		 * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).
+		 * If a match is found in one of the enum values then `colour` will be set to the matching enum value.
+		 */
+		validateColour() {
+			const isValid = validateValueAgainstArray(this.colour, IconColours);
+			if (isValid) {
+				this.iconColourState = this.colour;
+			} else {
+				if (validateColor(this.colour)) {
+					this.iconCustomColourState = this.colour;
+				} else {
+					this.iconColourState = this.warnDefaultColour();
+				}
+			}
+		}
+		/**
+		 * Print the invalid colour warning message
+		 * @returns default colour (black)
+		 */
+		warnDefaultColour() {
+			const message = new ConsoleMessageClass();
+			message
+				.addDesignSystemTag()
+				.addMonospaceText(' colour ')
+				.addRegularText('on')
+				.addMonospaceText(' <ontario-icon-media-fast-forward> ')
+				.addRegularText('was set to an invalid colour; only')
+				.addMonospaceText(' black, blue, grey or white ')
+				.addRegularText('are supported. The default colour')
+				.addMonospaceText(' black ')
+				.addRegularText('is assumed.')
+				.printMessage();
+			return 'black';
+		}
+		/**
+		 * Stencil component lifecycle method that is called once after the component is first connected to the DOM.
+		 */
+		componentWillLoad() {
+			this.validateColour();
+			this.validateWidth();
+		}
+		/**
+		 * Returns the HTML code to be rendered into a custom element.
+		 */
+		render() {
+			return h(
+				'div',
+				{
+					key: 'a92621ab05c25990309e8d76d8319f2940a67c67',
+					class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
+					style: { width: `${this.iconWidthState}px` },
+				},
+				h(
+					'svg',
+					{
+						key: '80d6645c043824c4502caf5a2ebd060d129bd07d',
+						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: 'media-fast-forward',
+					},
+					h('path', { key: '2ec4addc1c592f0256f3050d3a9d1e8cbe578635', d: 'M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z' }),
+				),
+			);
+		}
+		static get watchers() {
+			return {
+				iconWidth: ['validateWidth'],
+				colour: ['validateColour'],
+			};
+		}
+		static get style() {
+			return ontarioIconCss;
+		}
+	},
+	[
+		257,
+		'ontario-icon-media-fast-forward',
+		{
+			iconWidth: [2, 'icon-width'],
+			colour: [1],
+			iconWidthState: [32],
+			iconColourState: [32],
+			iconCustomColourState: [32],
+		},
+		undefined,
+		{
+			iconWidth: ['validateWidth'],
+			colour: ['validateColour'],
+		},
+	],
+);
+function defineCustomElement$1() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = ['ontario-icon-media-fast-forward'];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-icon-media-fast-forward':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioIconMediaFastForward$1);
+				}
+				break;
+		}
+	});
+}
+defineCustomElement$1();
+
+const OntarioIconMediaFastForward = OntarioIconMediaFastForward$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { OntarioIconMediaFastForward, defineCustomElement };
+//# sourceMappingURL=ontario-icon-media-fast-forward.js.map
+
+//# sourceMappingURL=ontario-icon-media-fast-forward.js.map

package/components/ontario-icon-media-fast-forward.js.map

@@ -0,0 +1 @@
+{"file":"ontario-icon-media-fast-forward.js","mappings":"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","names":["OntarioIconMediaFastForward","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-media-fast-forward&encapsulation=shadow","src/components/ontario-icon/ontario-icon-media-fast-forward.tsx"],"sourcesContent":["@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-icon svg,\n// Fractal component style coverage ↓\n.ontario-icon {\n\tdisplay: inline-block;\n\tstroke-width: 0;\n\tstroke: currentColor;\n\tfill: currentColor;\n\t/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */\n\tvertical-align: middle;\n\t/* Paths and strokes that overflow the viewBox can show in IE11. */\n\toverflow: hidden;\n}\n\n.ontario-icon--blue svg {\n\tstroke: colours.$ontario-colour-icon-blue;\n\tfill: colours.$ontario-colour-icon-blue;\n}\n\n.ontario-icon--grey svg {\n\tstroke: colours.$ontario-colour-icon-grey;\n\tfill: colours.$ontario-colour-icon-grey;\n}\n\n.ontario-icon--black svg {\n\tstroke: colours.$ontario-colour-icon-black;\n\tfill: colours.$ontario-colour-icon-black;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-icon-white;\n\tfill: colours.$ontario-colour-icon-white;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-white;\n\tfill: colours.$ontario-colour-white;\n}\n","// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State } from '@stencil/core';\nimport { IconWithColour } from './icon.interface';\nimport { IconSize, IconColour, IconColours } from './icon.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport validateColor from 'validate-color';\n\n@Component({\n\ttag: 'ontario-icon-media-fast-forward',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconMediaFastForward 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-media-fast-forward> ')\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-media-fast-forward> ')\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=\"media-fast-forward\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n}\n// content automatically generated by `generate-icons.js` ends\n"],"version":3}

package/components/ontario-icon-media-fast-rewind.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from '../dist/types/components';
+
+interface OntarioIconMediaFastRewind extends Components.OntarioIconMediaFastRewind, HTMLElement {}
+export const OntarioIconMediaFastRewind: {
+	prototype: OntarioIconMediaFastRewind;
+	new (): OntarioIconMediaFastRewind;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;