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

package/dist/components/p-94efeef1.js

@@ -1,149 +0,0 @@
-import { p as proxyCustomElement, H, h } from './p-846438ed.js';
-import { C as ConsoleMessageClass } from './p-b2019a19.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 OntarioIconAlertSuccessStyle0 = ontarioIconCss;
-
-const OntarioIconAlertSuccess = /*@__PURE__*/ proxyCustomElement(
-	class OntarioIconAlertSuccess extends H {
-		constructor() {
-			super();
-			this.__registerHost();
-			this.__attachShadow();
-		}
-		/**
-		 * The icon width will autogenerate the height since the icons are in square format, thus preserving
-		 * the aspect ratio.
-		 */
-		iconWidth = 24;
-		/**
-		 * Mutable variable, for internal use only.
-		 * Set the icon's width depending on validation result.
-		 */
-		iconWidthState;
-		/**
-		 * Watch for changes in the `iconWidth` variable for validation purpose.
-		 * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).
-		 */
-		validateWidth() {
-			if (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {
-				const message = new ConsoleMessageClass();
-				message
-					.addDesignSystemTag()
-					.addMonospaceText(' icon-width ')
-					.addRegularText('on')
-					.addMonospaceText(' <ontario-icon-alert-success> ')
-					.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;
-			}
-		}
-		get host() {
-			return this;
-		}
-		/**
-		 * 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-alert-success> ')
-					.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: '2a46ba4df11faf46c348af51294d93e8488aa2ce',
-					class: `ontario-icon ontario-icon--width-${this.iconWidthState}`,
-					style: { width: `${this.iconWidthState}px` },
-				},
-				h(
-					'svg',
-					{
-						key: 'b9f55bd9d8ed3e7fc97eab6a185bfd73dc01e20a',
-						class: 'svg-icon',
-						role: 'img',
-						xmlns: 'http://www.w3.org/2000/svg',
-						fill: 'none',
-						viewBox: '0 0 24 24',
-						id: 'alert-success',
-					},
-					h('path', {
-						key: 'edc960c6114d29da7d68be3f43c5a3cb79901491',
-						d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.4-1.4 3.6 3.58L17.17 7l1.4 1.42L10 17z',
-						fill: '#118847',
-					}),
-					h('path', {
-						key: '7796879c1b12750c1e5a1ce22cb6c3f0c4659c05',
-						d: 'M5 12l5 5 8.58-8.58L17.17 7 10 14.17 6.4 10.6 5 12z',
-						fill: '#fff',
-					}),
-				),
-			);
-		}
-		static get watchers() {
-			return {
-				iconWidth: ['validateWidth'],
-			};
-		}
-		static get style() {
-			return OntarioIconAlertSuccessStyle0;
-		}
-	},
-	[
-		1,
-		'ontario-icon-alert-success',
-		{
-			iconWidth: [2, 'icon-width'],
-			iconWidthState: [32],
-		},
-		undefined,
-		{
-			iconWidth: ['validateWidth'],
-		},
-	],
-);
-function defineCustomElement() {
-	if (typeof customElements === 'undefined') {
-		return;
-	}
-	const components = ['ontario-icon-alert-success'];
-	components.forEach((tagName) => {
-		switch (tagName) {
-			case 'ontario-icon-alert-success':
-				if (!customElements.get(tagName)) {
-					customElements.define(tagName, OntarioIconAlertSuccess);
-				}
-				break;
-		}
-	});
-}
-
-export { OntarioIconAlertSuccess as O, defineCustomElement as d };
-
-//# sourceMappingURL=p-94efeef1.js.map

package/dist/components/p-94efeef1.js.map

@@ -1 +0,0 @@
-{"file":"p-94efeef1.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,yZAAyZ,CAAC;AACjb,sCAAe,cAAc;;MCUhB,uBAAuB;;;;;;;;;;IAK3B,SAAS,GAAa,EAAE,CAAC;;;;;IAMxB,cAAc,CAAS;;;;;IAOhC,aAAa;QACZ,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,EAAE;YAC7E,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,cAAc,CAAC;iBAChC,cAAc,CAAC,IAAI,CAAC;iBACpB,gBAAgB,CAAC,gCAAgC,CAAC;iBAClD,cAAc,CACd,GACC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,gCAAgC,GAAG,8BAC5D,0DAA0D,CAC1D;iBACA,gBAAgB,CAAC,QAAQ,CAAC;iBAC1B,cAAc,CAAC,cAAc,CAAC;iBAC9B,YAAY,EAAE,CAAC;YACjB,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC;SACzB;aAAM;YACN,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC;SACrC;KACD;;;;;;IAYD,cAAc;QACb,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE;YACrC,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,UAAU,CAAC;iBAC5B,cAAc,CAAC,IAAI,CAAC;iBACpB,gBAAgB,CAAC,gCAAgC,CAAC;iBAClD,cAAc,CAAC,gDAAgD,CAAC;iBAChE,YAAY,EAAE,CAAC;SACjB;KACD;;;;IAKD,iBAAiB;QAChB,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,aAAa,EAAE,CAAC;KACrB;;;;IAKD,MAAM;QACL,QACC,4DACC,KAAK,EAAE,oCAAoC,IAAI,CAAC,cAAc,EAAE,EAChE,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,cAAc,IAAI,EAAE,IAE5C,4DACC,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,KAAK,EACV,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,EACnB,EAAE,EAAC,eAAe,IAElB,6DACC,CAAC,EAAC,wHAAwH,EAC1H,IAAI,EAAC,SAAS,GACb,EACF,6DAAM,CAAC,EAAC,qDAAqD,EAAC,IAAI,EAAC,MAAM,GAAG,CACvE,CACD,EACL;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-alert-success&encapsulation=shadow","src/components/ontario-icon/ontario-icon-alert-success.tsx"],"sourcesContent":["@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-icon svg,\n// Fractal component style coverage ↓\n.ontario-icon {\n\tdisplay: inline-block;\n\tstroke-width: 0;\n\tstroke: currentColor;\n\tfill: currentColor;\n\t/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */\n\tvertical-align: middle;\n\t/* Paths and strokes that overflow the viewBox can show in IE11. */\n\toverflow: hidden;\n}\n\n.ontario-icon--blue svg {\n\tstroke: colours.$ontario-colour-icon-blue;\n\tfill: colours.$ontario-colour-icon-blue;\n}\n\n.ontario-icon--grey svg {\n\tstroke: colours.$ontario-colour-icon-grey;\n\tfill: colours.$ontario-colour-icon-grey;\n}\n\n.ontario-icon--black svg {\n\tstroke: colours.$ontario-colour-icon-black;\n\tfill: colours.$ontario-colour-icon-black;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-icon-white;\n\tfill: colours.$ontario-colour-icon-white;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-white;\n\tfill: colours.$ontario-colour-white;\n}\n","// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State, Element } from '@stencil/core';\nimport { Icon } from './icon.interface';\nimport { IconSize } from './icon.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-icon-alert-success',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconAlertSuccess 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-alert-success> ')\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-alert-success> ')\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\n\t\t\t\t\tclass=\"svg-icon\"\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=\"alert-success\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.4-1.4 3.6 3.58L17.17 7l1.4 1.42L10 17z\"\n\t\t\t\t\t\tfill=\"#118847\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path d=\"M5 12l5 5 8.58-8.58L17.17 7 10 14.17 6.4 10.6 5 12z\" fill=\"#fff\" />\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/dist/components/p-9c61c9bc.js

@@ -1,257 +0,0 @@
-import { p as proxyCustomElement, H, d as createEvent, h } from './p-846438ed.js';
-import { b as validatePropExists } from './p-edb765a1.js';
-import { C as ConsoleMessageClass } from './p-b2019a19.js';
-import { d as defineCustomElement$2 } from './p-1dc1dba8.js';
-import { d as defineCustomElement$1 } from './p-77545837.js';
-import { v as v4 } from './p-a8cac0fc.js';
-
-const ontarioHintExpanderCss =
-	'.ontario-hint-expander__button:focus,.ontario-hint-expander__button:active{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}.ontario-hint-expander__container{max-width:48rem}.ontario-hint-expander__button{color:#0066CC;cursor:pointer;background:none;border:none;display:flex;align-items:center;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:400;font-size:1rem;text-align:left;margin:0 0 1rem 0;padding:0 0.25rem 0 0}.ontario-hint-expander__button-icon--close{display:none;margin-right:0.25rem}.ontario-hint-expander__button-icon--open{display:inline-block;margin-right:0.25rem}.ontario-hint-expander__button:hover{color:#00478F}.ontario-hint-expander__button:active{color:#002142}.ontario-hint-expander__button>*{pointer-events:none}.ontario-hint-expander__content{border-left:4px solid #cccccc;color:#1a1a1a;background-color:#f2f2f2;display:none;padding:1rem 1rem 1rem calc(1rem + 0.25rem);margin:0 0 1rem 0.25rem}.ontario-hint-expander__content *:first-child{margin-top:0}.ontario-hint-expander__content *:last-child{margin-bottom:0}.ontario-hint-expander__content img{width:100%}@media screen and (min-width: 40em){.ontario-hint-expander__content img{width:50%}}.ontario-hint-expander__content.ontario-expander__content--opened{display:block}.ontario-hint-expander__container.ontario-expander--active .ontario-hint-expander__button-icon--close{display:inline-block}.ontario-hint-expander__container.ontario-expander--active .ontario-hint-expander__button-icon--open{display:none}.ontario-hint-expander__checkbox-exists-true{margin:0.75rem 0 0 0.5rem}@media screen and (max-width: 40em){.ontario-hint-expander__checkbox-exists-true{margin-top:1rem}}.ontario-input+.ontario-hint-expander__container{margin-top:-1.5rem !important}.ontario-checkboxes__item .ontario-hint-expander__container,.ontario-radios__item .ontario-hint-expander__container{margin-left:0.5rem}.ontario-checkboxes__label+.ontario-hint-expander__container,.ontario-radios__label+.ontario-hint-expander__container{margin-top:0.75rem}@media screen and (max-width: 40em){.ontario-checkboxes__label+.ontario-hint-expander__container,.ontario-radios__label+.ontario-hint-expander__container{margin-top:1rem}}';
-const OntarioHintExpanderStyle0 = ontarioHintExpanderCss;
-
-const OntarioHintExpander = /*@__PURE__*/ proxyCustomElement(
-	class OntarioHintExpander extends H {
-		constructor() {
-			super();
-			this.__registerHost();
-			this.__attachShadow();
-			this.toggleExpanderEvent = createEvent(this, 'toggleExpanderEvent', 7);
-		}
-		get host() {
-			return this;
-		}
-		/**
-		 * The content type of the hint.
-		 * If no prop is passed, it will default to a string.
-		 * If the hint requires multiple lines or HTML, the `hintContentType` prop should be set to `html`.
-		 */
-		hintContentType = 'string';
-		/**
-		 * Text to display as the hint expander question/statement
-		 */
-		hint;
-		/**
-		 * Content to display as the hint, once the expander is toggled open.
-		 * Please note that any content that is passed into this prop will only be displayed as a string.
-		 * If you would like to add HTML content, supply child content to the component.
-		 *
-		 * @example
-		 * <ontario-hint-expander hint="This is the hint"
-		 *   <img src="https://www.jquery-az.com/html/images/banana.jpg" title="Title of image" alt="alt text here"/>
-		 *   <p> Here is the content beside the image </p>
-		 * </ontario-hint-expander>
-		 */
-		content;
-		/**
-		 * Used to used to establish a relationship between hint text content and elements using aria-describedby. This is optional - if no ID is passed, one will be generated.
-		 */
-		elementId;
-		hintState;
-		/**
-		 * Emitted when a keyboard input or mouse event occurs.
-		 */
-		toggleExpanderEvent;
-		/**
-		 * Watch for changes to the `hintContentType` prop for validation purposes.
-		 * If none is provided, or the wrong type is provided, it will default to `string`.
-		 */
-		checkHintContentType() {
-			if (this.hintContentType !== 'string' && this.hintContentType !== 'html') {
-				const message = new ConsoleMessageClass();
-				message
-					.addDesignSystemTag()
-					.addMonospaceText(' hintContentType ')
-					.addRegularText('for')
-					.addMonospaceText(' <ontario-hint-text> ')
-					.addRegularText('was not one of the permitted types. A default type of `string` will be applied.')
-					.printMessage();
-				return (this.hintContentType = 'string');
-			}
-			return this.hintContentType;
-		}
-		/*
-		 * Watch for changes in the `hint` prop for validation purposes.
-		 * If no `hint` prop is provided, the `hint` will be set to the host element textContent (if it exists).
-		 */
-		updateHintContent() {
-			this.hintState = this.hint ?? this.host.textContent ?? '';
-			this.validateHint(this.hintState);
-		}
-		/*
-		 * Watch for changes to the `content` prop for validation purposes.
-		 *
-		 * Validate the `content` and make sure the `content` has a value.
-		 * Log a warning if user doesn't input a value for the `content` or element content.
-		 */
-		validateContent(newValue) {
-			if (validatePropExists(newValue)) {
-				const message = new ConsoleMessageClass();
-				message
-					.addDesignSystemTag()
-					.addMonospaceText(' content ')
-					.addRegularText('for')
-					.addMonospaceText(' <ontario-hint-expander> ')
-					.addRegularText('was not provided')
-					.printMessage();
-			}
-		}
-		onClick = (ev) => {
-			const hintExpander = ev.target;
-			const hintExpanderParent = hintExpander?.parentElement;
-			hintExpanderParent?.classList.toggle('ontario-expander--active');
-			let content = hintExpanderParent?.querySelector("[data-toggle='ontario-expander-content']");
-			content?.classList.toggle('ontario-expander__content--opened');
-			content?.classList.contains('ontario-expander__content--opened')
-				? content.setAttribute('aria-hidden', 'false')
-				: content?.setAttribute('aria-hidden', 'true');
-			hintExpanderParent?.classList.contains('ontario-expander--active')
-				? hintExpanderParent?.setAttribute('aria-expanded', 'true')
-				: hintExpanderParent?.setAttribute('aria-expanded', 'false');
-			this.toggleExpanderEvent.emit(ev);
-		};
-		/*
-		 * Watch for changes in the `hint` prop for validation purposes.
-		 *
-		 * Validate the `hint` and make sure the `hint` has a value.
-		 * Log a warning if user doesn't input a value for the `hint`.
-		 */
-		validateHint(newValue) {
-			if (validatePropExists(newValue)) {
-				const message = new ConsoleMessageClass();
-				message
-					.addDesignSystemTag()
-					.addMonospaceText(' hint ')
-					.addRegularText('for')
-					.addMonospaceText(' <ontario-hint-expander> ')
-					.addRegularText('was not provided')
-					.printMessage();
-			}
-		}
-		/**
-		 * Set `hint` using internal component logic
-		 */
-		componentWillLoad() {
-			this.elementId = this.elementId ?? v4();
-			this.updateHintContent();
-			this.checkHintContentType();
-			this.validateContent(this.content);
-		}
-		/**
-		 * This helper is used to help load translations for any slots + text content passed in by the user.
-		 */
-		componentDidLoad() {
-			const observer = new MutationObserver((mutations) => {
-				mutations.forEach((mutation) => {
-					if (mutation.type === 'attributes') {
-						this.updateHintContent();
-					}
-				});
-			});
-			const options = { attributes: true };
-			observer.observe(this.host, options);
-		}
-		getId() {
-			return this.elementId ?? '';
-		}
-		render() {
-			return h(
-				'div',
-				{ key: '98c1d4fa4034dae6a033425d175144960c67a106', class: 'ontario-hint-expander__container' },
-				h(
-					'button',
-					{
-						'key': 'a33c39c8d8c5e7b16027c2d907a8412ba77c8521',
-						'class': 'ontario-hint-expander__button',
-						'onClick': this.onClick,
-						'id': `hint-expander-button-${this.getId()}`,
-						'aria-controls': `hint-expander-content-${this.getId()}`,
-						'aria-expanded': 'false',
-						'data-toggle': 'ontario-collapse',
-					},
-					h(
-						'span',
-						{
-							key: '62f2b8fecd7ec3caf15f8cfeaa1f8d1105dd7484',
-							class: 'ontario-hint-expander__button-icon--close ontario-icon',
-						},
-						h('ontario-icon-chevron-up', { key: '9217b08e3b7986554a3b3508e0ed3c587a599fbc', colour: 'inherit' }),
-					),
-					h(
-						'span',
-						{ key: '0517aac0847845cb484006fed649b355e2235ca5', class: 'ontario-hint-expander__button-icon--open' },
-						h('ontario-icon-chevron-down', { key: 'c1a183fcba390d9beff437b3a2b579ac5eb1695d', colour: 'inherit' }),
-					),
-					this.hint,
-				),
-				h(
-					'div',
-					{
-						'key': '29af405f98bce430f8bc618dede9973cf7a8540c',
-						'class': 'ontario-hint-expander__content',
-						'id': `hint-expander-content-${this.getId()}`,
-						'aria-labelledby': `hint-expander-button-${this.getId()}`,
-						'aria-hidden': 'true',
-						'data-toggle': 'ontario-expander-content',
-					},
-					this.hintContentType === 'string' ? this.content : h('span', { innerHTML: this.content }),
-				),
-			);
-		}
-		static get watchers() {
-			return {
-				hintContentType: ['checkHintContentType'],
-				hint: ['updateHintContent'],
-				content: ['validateContent'],
-			};
-		}
-		static get style() {
-			return OntarioHintExpanderStyle0;
-		}
-	},
-	[
-		1,
-		'ontario-hint-expander',
-		{
-			hintContentType: [1025, 'hint-content-type'],
-			hint: [1],
-			content: [1025],
-			elementId: [1025, 'element-id'],
-			hintState: [32],
-		},
-		undefined,
-		{
-			hintContentType: ['checkHintContentType'],
-			hint: ['updateHintContent'],
-			content: ['validateContent'],
-		},
-	],
-);
-function defineCustomElement() {
-	if (typeof customElements === 'undefined') {
-		return;
-	}
-	const components = ['ontario-hint-expander', 'ontario-icon-chevron-down', 'ontario-icon-chevron-up'];
-	components.forEach((tagName) => {
-		switch (tagName) {
-			case 'ontario-hint-expander':
-				if (!customElements.get(tagName)) {
-					customElements.define(tagName, OntarioHintExpander);
-				}
-				break;
-			case 'ontario-icon-chevron-down':
-				if (!customElements.get(tagName)) {
-					defineCustomElement$2();
-				}
-				break;
-			case 'ontario-icon-chevron-up':
-				if (!customElements.get(tagName)) {
-					defineCustomElement$1();
-				}
-				break;
-		}
-	});
-}
-
-export { OntarioHintExpander as O, defineCustomElement as d };
-
-//# sourceMappingURL=p-9c61c9bc.js.map

package/dist/components/p-9c61c9bc.js.map

@@ -1 +0,0 @@
-{"file":"p-9c61c9bc.js","mappings":"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","names":["uuid"],"sources":["src/components/ontario-hint-expander/ontario-hint-expander.scss?tag=ontario-hint-expander&encapsulation=shadow","src/components/ontario-hint-expander/ontario-hint-expander.tsx"],"sourcesContent":["@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tplaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n\n.ontario-hint-expander__container {\n\tmax-width: globalVariables.$standard-width;\n}\n\n.ontario-hint-expander__button {\n\tcolor: colours.$ontario-colour-link;\n\tcursor: pointer;\n\tbackground: none;\n\tborder: none;\n\tdisplay: flex;\n\talign-items: center;\n\tfont-family: fonts.$ontario-font-open-sans;\n\tfont-weight: fontWeights.$ontario-font-weights-normal;\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\ttext-align: left;\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-0;\n\tpadding: spacing.$spacing-0 spacing.$spacing-1 spacing.$spacing-0 spacing.$spacing-0;\n\n\t&-icon--close {\n\t\tdisplay: none;\n\t\tmargin-right: spacing.$spacing-1;\n\t}\n\n\t&-icon--open {\n\t\tdisplay: inline-block;\n\t\tmargin-right: spacing.$spacing-1;\n\t}\n\n\t&:hover {\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t}\n\n\t&:active {\n\t\tcolor: colours.$ontario-colour-link--active;\n\t}\n\n\t&:focus,\n\t&:active {\n\t\t@extend %ontario-focus;\n\t}\n\n\t& > * {\n\t\tpointer-events: none;\n\t}\n}\n\n.ontario-hint-expander__content {\n\tborder-left: 4px solid colours.$ontario-greyscale-20;\n\tcolor: colours.$ontario-colour-black;\n\tbackground-color: colours.$ontario-greyscale-5;\n\tdisplay: none;\n\tpadding: spacing.$spacing-4 spacing.$spacing-4 spacing.$spacing-4 calc(#{spacing.$spacing-4} + #{spacing.$spacing-1});\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-1;\n\n\t& *:first-child {\n\t\tmargin-top: spacing.$spacing-0;\n\t}\n\n\t& *:last-child {\n\t\tmargin-bottom: spacing.$spacing-0;\n\t}\n\n\t& img {\n\t\twidth: globalVariables.$full-width;\n\n\t\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\t\twidth: 50%;\n\t\t}\n\t}\n}\n\n.ontario-hint-expander__content.ontario-expander__content--opened {\n\tdisplay: block;\n}\n\n.ontario-hint-expander__container.ontario-expander--active {\n\t.ontario-hint-expander__button-icon--close {\n\t\tdisplay: inline-block;\n\t}\n\n\t.ontario-hint-expander__button-icon--open {\n\t\tdisplay: none;\n\t}\n}\n\n.ontario-hint-expander__checkbox-exists-true {\n\tmargin: spacing.$spacing-3 spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-2;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-top: spacing.$spacing-4;\n\t}\n}\n\n// Fractal component style coverage ↓\n.ontario-input + .ontario-hint-expander__container {\n\tmargin-top: -1 * spacing.$spacing-5 !important;\n}\n\n.ontario-checkboxes__item .ontario-hint-expander__container,\n.ontario-radios__item .ontario-hint-expander__container {\n\tmargin-left: spacing.$spacing-2;\n}\n\n.ontario-checkboxes__label + .ontario-hint-expander__container,\n.ontario-radios__label + .ontario-hint-expander__container {\n\tmargin-top: spacing.$spacing-3;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-top: spacing.$spacing-4;\n\t}\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, Watch, State } from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\n\nimport { HintExpander } from './hint-expander.interface';\nimport { HintContentType } from '../../utils/common/common.interface';\n\nimport { validatePropExists } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-hint-expander',\n\tstyleUrl: 'ontario-hint-expander.scss',\n\tshadow: true,\n})\nexport class OntarioHintExpander implements HintExpander {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * The content type of the hint.\n\t * If no prop is passed, it will default to a string.\n\t * If the hint requires multiple lines or HTML, the `hintContentType` prop should be set to `html`.\n\t */\n\t@Prop({ mutable: true }) hintContentType?: HintContentType = 'string';\n\n\t/**\n\t * Text to display as the hint expander question/statement\n\t */\n\t@Prop() hint: string;\n\n\t/**\n\t * Content to display as the hint, once the expander is toggled open.\n\t * Please note that any content that is passed into this prop will only be displayed as a string.\n\t * If you would like to add HTML content, supply child content to the component.\n\t *\n\t * @example\n\t * <ontario-hint-expander hint=\"This is the hint\"\n\t *   <img src=\"https://www.jquery-az.com/html/images/banana.jpg\" title=\"Title of image\" alt=\"alt text here\"/>\n\t *   <p> Here is the content beside the image </p>\n\t * </ontario-hint-expander>\n\t */\n\t@Prop({ mutable: true }) content: string;\n\n\t/**\n\t * Used to used to establish a relationship between hint text content and elements using aria-describedby. This is optional - if no ID is passed, one will be generated.\n\t */\n\t@Prop({ mutable: true }) elementId?: string;\n\n\t@State() hintState: string;\n\n\t/**\n\t * Emitted when a keyboard input or mouse event occurs.\n\t */\n\t@Event() toggleExpanderEvent!: EventEmitter<MouseEvent | KeyboardEvent>;\n\n\t/**\n\t * Watch for changes to the `hintContentType` prop for validation purposes.\n\t * If none is provided, or the wrong type is provided, it will default to `string`.\n\t */\n\t@Watch('hintContentType')\n\tprivate checkHintContentType() {\n\t\tif (this.hintContentType !== 'string' && this.hintContentType !== 'html') {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' hintContentType ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-hint-text> ')\n\t\t\t\t.addRegularText('was not one of the permitted types. A default type of `string` will be applied.')\n\t\t\t\t.printMessage();\n\n\t\t\treturn (this.hintContentType = 'string');\n\t\t}\n\n\t\treturn this.hintContentType;\n\t}\n\n\t/*\n\t * Watch for changes in the `hint` prop for validation purposes.\n\t * If no `hint` prop is provided, the `hint` will be set to the host element textContent (if it exists).\n\t */\n\t@Watch('hint')\n\tprivate updateHintContent() {\n\t\tthis.hintState = this.hint ?? this.host.textContent ?? '';\n\t\tthis.validateHint(this.hintState);\n\t}\n\n\t/*\n\t * Watch for changes to the `content` prop for validation purposes.\n\t *\n\t * Validate the `content` and make sure the `content` has a value.\n\t * Log a warning if user doesn't input a value for the `content` or element content.\n\t */\n\t@Watch('content')\n\tvalidateContent(newValue: string) {\n\t\tif (validatePropExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' content ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-hint-expander> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\tprivate onClick = (ev: Event) => {\n\t\tconst hintExpander = ev.target as HTMLButtonElement | null;\n\t\tconst hintExpanderParent = hintExpander?.parentElement;\n\n\t\thintExpanderParent?.classList.toggle('ontario-expander--active');\n\t\tlet content = hintExpanderParent?.querySelector(\"[data-toggle='ontario-expander-content']\");\n\t\tcontent?.classList.toggle('ontario-expander__content--opened');\n\t\tcontent?.classList.contains('ontario-expander__content--opened')\n\t\t\t? content.setAttribute('aria-hidden', 'false')\n\t\t\t: content?.setAttribute('aria-hidden', 'true');\n\t\thintExpanderParent?.classList.contains('ontario-expander--active')\n\t\t\t? hintExpanderParent?.setAttribute('aria-expanded', 'true')\n\t\t\t: hintExpanderParent?.setAttribute('aria-expanded', 'false');\n\n\t\tthis.toggleExpanderEvent.emit(ev as MouseEvent);\n\t};\n\n\t/*\n\t * Watch for changes in the `hint` prop for validation purposes.\n\t *\n\t * Validate the `hint` and make sure the `hint` has a value.\n\t * Log a warning if user doesn't input a value for the `hint`.\n\t */\n\tvalidateHint(newValue: string) {\n\t\tif (validatePropExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' hint ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-hint-expander> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Set `hint` using internal component logic\n\t */\n\tcomponentWillLoad() {\n\t\tthis.elementId = this.elementId ?? uuid();\n\t\tthis.updateHintContent();\n\t\tthis.checkHintContentType();\n\t\tthis.validateContent(this.content);\n\t}\n\n\t/**\n\t * This helper is used to help load translations for any slots + text content passed in by the user.\n\t */\n\tcomponentDidLoad() {\n\t\tconst observer = new MutationObserver((mutations) => {\n\t\t\tmutations.forEach((mutation) => {\n\t\t\t\tif (mutation.type === 'attributes') {\n\t\t\t\t\tthis.updateHintContent();\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\tconst options = { attributes: true };\n\t\tobserver.observe(this.host, options);\n\t}\n\n\tpublic getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"ontario-hint-expander__container\">\n\t\t\t\t<button\n\t\t\t\t\tclass=\"ontario-hint-expander__button\"\n\t\t\t\t\tonClick={this.onClick}\n\t\t\t\t\tid={`hint-expander-button-${this.getId()}`}\n\t\t\t\t\taria-controls={`hint-expander-content-${this.getId()}`}\n\t\t\t\t\taria-expanded=\"false\"\n\t\t\t\t\tdata-toggle=\"ontario-collapse\"\n\t\t\t\t>\n\t\t\t\t\t<span class=\"ontario-hint-expander__button-icon--close ontario-icon\">\n\t\t\t\t\t\t<ontario-icon-chevron-up colour=\"inherit\"></ontario-icon-chevron-up>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span class=\"ontario-hint-expander__button-icon--open\">\n\t\t\t\t\t\t<ontario-icon-chevron-down colour=\"inherit\"></ontario-icon-chevron-down>\n\t\t\t\t\t</span>\n\t\t\t\t\t{this.hint}\n\t\t\t\t</button>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ontario-hint-expander__content\"\n\t\t\t\t\tid={`hint-expander-content-${this.getId()}`}\n\t\t\t\t\taria-labelledby={`hint-expander-button-${this.getId()}`}\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tdata-toggle=\"ontario-expander-content\"\n\t\t\t\t>\n\t\t\t\t\t{this.hintContentType === 'string' ? this.content : <span innerHTML={this.content}></span>}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}