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

package/components/p-DgMhpSmi.js

@@ -0,0 +1,324 @@
+const accessibility = {
+	checkboxHintExpander: {
+		en: 'is available after the last checkbox item.',
+		fr: 'suivront à la dernière case à cocher.',
+	},
+	moreInfo: {
+		en: 'More information on',
+		fr: 'Des renseignements supplémentaires sur',
+	},
+	singleHintExpander: {
+		en: 'field is available in the next element.',
+		fr: 'suivront au prochain élément.',
+	},
+};
+const accessibilityLink = {
+	link: {
+		en: 'https://www.ontario.ca/page/accessibility',
+		fr: 'https://www.ontario.ca/fr/page/accessibilite',
+	},
+	text: {
+		en: 'Accessibility',
+		fr: 'Accessibilité',
+	},
+};
+const termsOfUse = {
+	link: {
+		en: 'https://www.ontario.ca/page/terms-use',
+		fr: 'https://www.ontario.ca/fr/page/conditions-dutilisation',
+	},
+	text: {
+		en: 'Terms of Use',
+		fr: 'Conditions d’utilisation',
+	},
+};
+const accordion = {
+	collapse: {
+		en: 'Collapse all',
+		fr: 'Réduire tout',
+	},
+	expand: {
+		en: 'Expand all',
+		fr: 'Agrandir tout',
+	},
+	expandCollapseAriaLabel: {
+		en: 'Expand or collapse the accordion',
+		fr: "Agrandissez ou réduisez l'accordéon",
+	},
+};
+const backToTop = {
+	ariaLabel: {
+		en: 'Scroll back to the top',
+		fr: 'Retour en haut de la page',
+	},
+	top: {
+		en: 'Top',
+		fr: 'Haut',
+	},
+};
+const contactUs = {
+	en: 'Contact us',
+	fr: 'Contactez-nous',
+};
+const dateInput = {
+	caption: {
+		en: 'Exact date',
+		fr: 'Dates exactes',
+	},
+	day: {
+		accessibility: {
+			en: '4 digits',
+			fr: '4 chiffres',
+		},
+		label: {
+			en: 'Day',
+			fr: 'Jour',
+		},
+	},
+	error: {
+		en: {
+			emptyDay: 'Enter the day.',
+			emptyDayAndMonth: 'Enter the month and day.',
+			emptyDayAndYear: 'Enter the year and day.',
+			emptyMonth: 'Enter the month.',
+			emptyMonthAndYear: 'Enter the year and month.',
+			emptyYear: 'Enter the year.',
+			invalidDate: 'Enter a valid date.',
+			invalidDay: 'Enter a valid day.',
+			invalidMonth: 'Enter a valid month.',
+			invalidYear: 'Enter a valid year.',
+		},
+		fr: {
+			emptyDay: 'Saisissez le jour.',
+			emptyDayAndMonth: 'Saisissez le mois et le jour.',
+			emptyDayAndYear: 'Saisissez l’année et le jour.',
+			emptyMonth: 'Saisissez le mois.',
+			emptyMonthAndYear: 'Saisissez l’année et le mois.',
+			emptyYear: 'Saisissez l’année.',
+			invalidDate: 'Saisissez une date valide.',
+			invalidDay: 'Saisissez un jour valide.',
+			invalidMonth: 'Saisissez un mois valide.',
+			invalidYear: 'Saisissez une année valide.',
+		},
+	},
+	month: {
+		accessibility: {
+			en: '1 or 2 digits',
+			fr: '1 ou 2 chiffres',
+		},
+		label: {
+			en: 'Month',
+			fr: 'Mois',
+		},
+	},
+	year: {
+		accessibility: {
+			en: '1 or 2 digits',
+			fr: '1 ou 2 chiffres',
+		},
+		label: {
+			en: 'Year',
+			fr: 'Année',
+		},
+	},
+};
+const dropdownList = {
+	select: {
+		en: 'Select',
+		fr: 'Sélectionner',
+	},
+};
+const header = {
+	clearSearchField: {
+		en: 'Clear field',
+		fr: 'Vider le champ',
+	},
+	close: {
+		en: 'close',
+		fr: 'fermer',
+	},
+	closeMenu: {
+		en: 'Hide navigation menu',
+		fr: 'Fermer le menu de navigation',
+	},
+	closeSearch: {
+		en: 'Close search bar',
+		fr: 'Fermer la barre de recherche',
+	},
+	logoAltText: {
+		en: 'Ontario.ca homepage',
+		fr: 'Page d’accueil Ontario.ca',
+	},
+	logoLink: {
+		en: 'https://www.ontario.ca/page/government-ontario',
+		fr: 'https://www.ontario.ca/fr/page/gouvernement-de-lontario',
+	},
+	ontarioSearchURL: {
+		en: 'https://www.ontario.ca/search/search-results?query=',
+		fr: 'https://www.ontario.ca/fr/recherche/resultats-de-recherche/?query=',
+	},
+	openMenu: {
+		en: 'Show navigation menu',
+		fr: 'Ouvrir le menu de navigation',
+	},
+	search: {
+		en: 'Search',
+		fr: 'Rechercher',
+	},
+	serviceOntario: {
+		en: 'ServiceOntario',
+		fr: 'ServiceOntario',
+	},
+	submit: {
+		en: 'Submit',
+		fr: 'Soumission',
+	},
+};
+const input = {
+	requiredFieldError: {
+		en: 'This is a required field.',
+		fr: 'Ce champ est obligatoire.',
+	},
+};
+const languageToggle = {
+	ariaLabel: {
+		en: 'Click to switch the language to English',
+		fr: 'Cliquez pour changer la langue en français',
+	},
+};
+const loading = {
+	en: 'Loading',
+	fr: 'Chargement',
+};
+const optional = {
+	en: 'optional',
+	fr: 'facultative',
+};
+const printerLink = {
+	link: {
+		en: 'https://www.ontario.ca/page/copyright-information',
+		fr: 'https://www.ontario.ca/fr/page/droits-dauteur',
+	},
+	text: {
+		en: "King's Printer for Ontario,",
+		fr: 'Imprimeur du Roi pour l’Ontario,',
+	},
+};
+const privacyLink = {
+	link: {
+		en: 'https://www.ontario.ca/page/privacy-statement',
+		fr: 'https://www.ontario.ca/fr/page/declaration-concernant-la-protection-de-la-vie-privee',
+	},
+	text: {
+		en: 'Privacy',
+		fr: 'Confidentialité',
+	},
+};
+const stepIndicator = {
+	back: {
+		en: 'Back',
+		fr: 'Retour',
+	},
+	complete: {
+		en: 'complete',
+		fr: 'complet',
+	},
+	of: {
+		en: 'of',
+		fr: 'sur',
+	},
+	step: {
+		en: 'Step',
+		fr: 'Étape',
+	},
+};
+const siteLanguage = {
+	fullWord: {
+		en: 'English',
+		fr: 'Français',
+	},
+	abbreviation: {
+		en: 'en',
+		fr: 'fr',
+	},
+};
+const taskGroup = {
+	completed: {
+		en: 'You have completed',
+		fr: 'Vous avez complété',
+	},
+	outOf: {
+		en: 'out of',
+		fr: 'sur',
+	},
+	tasks: {
+		en: 'tasks.',
+		fr: 'tâches.',
+	},
+};
+const taskStatus = {
+	taskStatus: {
+		en: 'Task Status:',
+		fr: 'Statut de la tâche:',
+	},
+	notStarted: {
+		en: 'Not Started',
+		fr: 'Pas commencé',
+	},
+	inProgress: {
+		en: 'In Progress',
+		fr: 'En cours',
+	},
+	completed: {
+		en: 'Completed',
+		fr: 'Terminé',
+	},
+	cannotStartYet: {
+		en: 'Cannot Start Yet',
+		fr: 'Peux pas encore commencer',
+	},
+	error: {
+		en: 'Error',
+		fr: 'Erreur',
+	},
+	optional: {
+		en: 'Optional',
+		fr: 'Facultatif',
+	},
+};
+const newWindow = {
+	en: 'opens in a new window',
+	fr: "s'ouvre dans une nouvelle fenêtre",
+};
+const required = {
+	en: 'required',
+	fr: 'obligatoire',
+};
+var translations = {
+	accessibility: accessibility,
+	accessibilityLink: accessibilityLink,
+	termsOfUse: termsOfUse,
+	accordion: accordion,
+	backToTop: backToTop,
+	contactUs: contactUs,
+	dateInput: dateInput,
+	dropdownList: dropdownList,
+	header: header,
+	input: input,
+	languageToggle: languageToggle,
+	loading: loading,
+	optional: optional,
+	printerLink: printerLink,
+	privacyLink: privacyLink,
+	stepIndicator: stepIndicator,
+	siteLanguage: siteLanguage,
+	taskGroup: taskGroup,
+	taskStatus: taskStatus,
+	newWindow: newWindow,
+	required: required,
+};
+
+export { translations as t };
+//# sourceMappingURL=p-DgMhpSmi.js.map
+
+//# sourceMappingURL=p-DgMhpSmi.js.map

package/components/p-DgMhpSmi.js.map

@@ -0,0 +1 @@
+{"file":"p-DgMhpSmi.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/p-TS9NoIOc.js

@@ -0,0 +1,11 @@
+function isServerSideRendering() {
+	return typeof window === 'undefined';
+}
+function isClientSideRendering() {
+	return typeof window !== 'undefined';
+}
+
+export { isClientSideRendering as a, isServerSideRendering as i };
+//# sourceMappingURL=p-TS9NoIOc.js.map
+
+//# sourceMappingURL=p-TS9NoIOc.js.map

package/components/p-TS9NoIOc.js.map

@@ -0,0 +1 @@
+{"file":"p-TS9NoIOc.js","mappings":"SAAgB,qBAAqB,GAAA;AACpC,IAAA,OAAO,OAAO,MAAM,KAAK,WAAW;AACrC;SAEgB,qBAAqB,GAAA;AACpC,IAAA,OAAO,OAAO,MAAM,KAAK,WAAW;AACrC;;;;","names":[],"sources":["src/utils/common/environment.ts"],"sourcesContent":["export function isServerSideRendering(): boolean {\n\treturn typeof window === 'undefined';\n}\n\nexport function isClientSideRendering(): boolean {\n\treturn typeof window !== 'undefined';\n}\n"],"version":3}

package/components/p-V_1wpeJe.js

@@ -0,0 +1,17 @@
+import { h } from './index.js';
+import { i as isEmpty } from './p-DIe1tcOp.js';
+
+const ErrorMessage = ({ message, error = false }) => {
+	const hideError = !error || isEmpty(message);
+	return h(
+		'div',
+		{ role: 'alert', class: `ontario-error-messaging ${hideError ? 'ontario-error__hidden' : ''}` },
+		h('ontario-icon-alert-error', null),
+		h('div', { class: 'ontario-error-messaging__content' }, message),
+	);
+};
+
+export { ErrorMessage as E };
+//# sourceMappingURL=p-V_1wpeJe.js.map
+
+//# sourceMappingURL=p-V_1wpeJe.js.map

package/components/p-V_1wpeJe.js.map

@@ -0,0 +1 @@
+{"file":"p-V_1wpeJe.js","mappings":";;;AAQO,MAAM,YAAY,GAA2C,CAAC,EAAE,OAAO,EAAE,KAAK,GAAG,KAAK,EAAE,KAAI;IAClG,MAAM,SAAS,GAAG,CAAC,KAAK,IAAI,OAAO,CAAC,OAAO,CAAC;AAE5C,IAAA,QACC,CAAK,CAAA,KAAA,EAAA,EAAA,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,CAAA,wBAAA,EAA2B,SAAS,GAAG,uBAAuB,GAAG,EAAE,CAAE,CAAA,EAAA;QAC7F,CAAqD,CAAA,0BAAA,EAAA,IAAA,CAAA;QACrD,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,kCAAkC,EAAA,EAAE,OAAO,CAAO,CACxD;AAER;;;;","names":[],"sources":["src/utils/components/error-message/error-message.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { isEmpty } from '../../../utils/helper/utils';\n\nexport type ErrorMessageProps = {\n\terror?: boolean;\n\tmessage?: string;\n};\n\nexport const ErrorMessage: FunctionalComponent<ErrorMessageProps> = ({ message, error = false }) => {\n\tconst hideError = !error || isEmpty(message);\n\n\treturn (\n\t\t<div role=\"alert\" class={`ontario-error-messaging ${hideError ? 'ontario-error__hidden' : ''}`}>\n\t\t\t<ontario-icon-alert-error></ontario-icon-alert-error>\n\t\t\t<div class=\"ontario-error-messaging__content\">{message}</div>\n\t\t</div>\n\t);\n};\n"],"version":3}

package/components/p-dXtLd1df.js

@@ -0,0 +1,63 @@
+import { h } from './index.js';
+
+const HeadingLevel = ['h2', 'h3', 'h4', 'h5', 'h6'];
+const HighlightColours = ['teal', 'gold', 'yellow', 'taupe', 'green', 'lime', 'sky', 'blue', 'purple'];
+const HeadingContentTypes = ['string', 'html'];
+
+const isValidHighlightColour = (colour) => HighlightColours.includes(colour);
+const isValidHeadingLevel = (level) => HeadingLevel.includes(level);
+const generateClasses = (type, highlightColor) => {
+	const componentType = type === 'callout' ? `ontario-callout` : `ontario-aside`;
+	const borderColor = `ontario-border-highlight--${highlightColor}`;
+	return highlightColor ? `${componentType} ${borderColor}` : `${componentType}`;
+};
+const generateHeading = (type, headingType, headingContentType, headingContent) => {
+	const headingContentIsHTML = headingContentType === 'html';
+	switch (headingType) {
+		case 'h2':
+			return headingContentIsHTML
+				? h('h2', { class: `ontario-${type}__title ontario-h5`, innerHTML: headingContent })
+				: h('h2', { class: `ontario-${type}__title ontario-h5` }, headingContent);
+		case 'h3':
+			return headingContentIsHTML
+				? h('h3', { class: `ontario-${type}__title ontario-h5`, innerHTML: headingContent })
+				: h('h3', { class: `ontario-${type}__title ontario-h5` }, headingContent);
+		case 'h4':
+			return headingContentIsHTML
+				? h('h4', { class: `ontario-${type}__title ontario-h5`, innerHTML: headingContent })
+				: h('h4', { class: `ontario-${type}__title ontario-h5` }, headingContent);
+		case 'h5':
+			return headingContentIsHTML
+				? h('h5', { class: `ontario-${type}__title ontario-h5`, innerHTML: headingContent })
+				: h('h5', { class: `ontario-${type}__title ontario-h5` }, headingContent);
+		case 'h6':
+			return headingContentIsHTML
+				? h('h6', { class: `ontario-${type}__title ontario-h5`, innerHTML: headingContent })
+				: h('h6', { class: `ontario-${type}__title ontario-h5` }, headingContent);
+		default:
+			return headingContentIsHTML
+				? h('h2', { class: `ontario-${type}__title ontario-h5`, innerHTML: headingContent })
+				: h('h2', { class: `ontario-${type}__title ontario-h5` }, headingContent);
+	}
+};
+const generateCalloutAside = (type, headingContentType, headingType, headingContent, content, highlightColour) => {
+	const contentIsString = typeof content === 'string';
+	return type === 'callout'
+		? h(
+				'div',
+				{ class: generateClasses(type, highlightColour) },
+				headingContent ? generateHeading(type, headingType, headingContentType, headingContent) : '',
+				contentIsString ? h('p', null, content) : h('slot', null),
+			)
+		: h(
+				'aside',
+				{ class: generateClasses(type, highlightColour) },
+				headingContent ? generateHeading(type, headingType, headingContentType, headingContent) : '',
+				contentIsString ? (content ? h('p', null, content) : '') : h('slot', null),
+			);
+};
+
+export { HeadingContentTypes as H, isValidHighlightColour as a, generateCalloutAside as g, isValidHeadingLevel as i };
+//# sourceMappingURL=p-dXtLd1df.js.map
+
+//# sourceMappingURL=p-dXtLd1df.js.map

package/components/p-dXtLd1df.js.map

@@ -0,0 +1 @@
+{"file":"p-dXtLd1df.js","mappings":"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","names":[],"sources":["src/utils/components/callout-aside/callout-aside.interface.ts","src/utils/components/callout-aside/callout-aside-helpers.tsx"],"sourcesContent":["import { Base } from '../../common/common.interface';\n\nexport const HeadingLevel = ['h2', 'h3', 'h4', 'h5', 'h6'] as const;\n\nexport type HeadingLevelOptions = (typeof HeadingLevel)[number];\n\nexport const HighlightColours = ['teal', 'gold', 'yellow', 'taupe', 'green', 'lime', 'sky', 'blue', 'purple'] as const;\n\nexport type HighlightColourOptions = (typeof HighlightColours)[number];\n\nexport type CalloutAsideType = 'callout' | 'aside';\n\nexport type HeadingContentType = 'string' | 'html';\n\nexport const HeadingContentTypes = ['string', 'html'] as const;\n\nexport interface CalloutAside extends Base {\n\t/**\n\t * The heading level of the callout/aside heading.\n\t */\n\theadingType?: HeadingLevelOptions;\n\n\t/**\n\t * The type of the heading content. If no prop is passed, it will default to string.\n\t */\n\theadingContentType: HeadingContentType;\n\n\t/**\n\t * Text or HTML to be displayed as the heading of the callout/aside. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.\n\t */\n\theadingContent?: string;\n\n\t/**\n\t * Optional text to be displayed as the content for the callout/aside component. If a string is passed, it will automatically be nested in a paragraph tag.\n\t *\n\t * HTML content can also be passed as the child/children of the callout/aside component if additional/different elements for the content are needed.\n\t */\n\tcontent?: string | HTMLElement;\n\n\t/**\n\t * Optional prop to choose the border colour of the callout/aside. If none is passed, the default colour will be teal.\n\t */\n\thighlightColor?: HighlightColourOptions | undefined;\n}\n","import { h } from '@stencil/core';\nimport {\n\tCalloutAsideType,\n\tHeadingLevel,\n\tHeadingLevelOptions,\n\tHeadingContentType,\n\tHighlightColours,\n\tHighlightColourOptions,\n} from './callout-aside.interface';\n\nexport const isValidHighlightColour = (colour: HighlightColourOptions): colour is HighlightColourOptions =>\n\tHighlightColours.includes(colour);\n\nexport const isValidHeadingLevel = (level: HeadingLevelOptions): level is HeadingLevelOptions =>\n\tHeadingLevel.includes(level);\n\nconst generateClasses = (type: CalloutAsideType, highlightColor?: HighlightColourOptions) => {\n\tconst componentType = type === 'callout' ? `ontario-callout` : `ontario-aside`;\n\tconst borderColor = `ontario-border-highlight--${highlightColor}`;\n\n\treturn highlightColor ? `${componentType} ${borderColor}` : `${componentType}`;\n};\n\nconst generateHeading = (\n\ttype: CalloutAsideType,\n\theadingType: HeadingLevelOptions | undefined,\n\theadingContentType: HeadingContentType,\n\theadingContent: string,\n) => {\n\tconst headingContentIsHTML = headingContentType === 'html';\n\n\tswitch (headingType) {\n\t\tcase 'h2':\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h2 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h2>\n\t\t\t) : (\n\t\t\t\t<h2 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h2>\n\t\t\t);\n\t\tcase 'h3':\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h3 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h3>\n\t\t\t) : (\n\t\t\t\t<h3 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h3>\n\t\t\t);\n\t\tcase 'h4':\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h4 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h4>\n\t\t\t) : (\n\t\t\t\t<h4 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h4>\n\t\t\t);\n\t\tcase 'h5':\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h5 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h5>\n\t\t\t) : (\n\t\t\t\t<h5 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h5>\n\t\t\t);\n\t\tcase 'h6':\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h6 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h6>\n\t\t\t) : (\n\t\t\t\t<h6 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h6>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h2 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h2>\n\t\t\t) : (\n\t\t\t\t<h2 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h2>\n\t\t\t);\n\t}\n};\n\nexport const generateCalloutAside = (\n\ttype: CalloutAsideType,\n\theadingContentType: HeadingContentType,\n\theadingType?: HeadingLevelOptions,\n\theadingContent?: string,\n\tcontent?: string | HTMLElement,\n\thighlightColour?: HighlightColourOptions,\n) => {\n\tconst contentIsString = typeof content === 'string';\n\n\treturn type === 'callout' ? (\n\t\t<div class={generateClasses(type, highlightColour)}>\n\t\t\t{headingContent ? generateHeading(type, headingType, headingContentType, headingContent) : ''}\n\t\t\t{contentIsString ? <p>{content}</p> : <slot />}\n\t\t</div>\n\t) : (\n\t\t<aside class={generateClasses(type, highlightColour)}>\n\t\t\t{headingContent ? generateHeading(type, headingType, headingContentType, headingContent) : ''}\n\t\t\t{contentIsString ? content ? <p>{content}</p> : '' : <slot />}\n\t\t</aside>\n\t);\n};\n"],"version":3}

package/components/p-vdzS-daB.js

@@ -0,0 +1,145 @@
+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 OntarioIconAlertError = /*@__PURE__*/ proxyCustomElement(
+	class OntarioIconAlertError 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-alert-error> ')
+					.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-alert-error> ')
+					.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: '32dddd031eb8d92b8cb59fb0de1f29e86294c53d',
+					class: `ontario-icon ontario-icon--width-${this.iconWidthState}`,
+					style: { width: `${this.iconWidthState}px` },
+				},
+				h(
+					'svg',
+					{
+						key: 'f91a3cfd8e568bb6a7abe1d7be225c4acb90613f',
+						class: 'svg-icon',
+						role: 'img',
+						xmlns: 'http://www.w3.org/2000/svg',
+						fill: 'none',
+						viewBox: '0 0 24 24',
+						id: 'alert-error',
+					},
+					h('path', {
+						key: '4da3c52c3a0bec730e903427602700603fa00281',
+						d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z',
+						fill: '#cd0000',
+					}),
+					h('path', {
+						key: 'c2fb139f8f739572bdfe30d6cc4ec925192cb57c',
+						d: 'M11 17h2v-2h-2v2zm0-4h2V7h-2v6z',
+						fill: '#fff',
+					}),
+				),
+			);
+		}
+		get host() {
+			return this;
+		}
+		static get watchers() {
+			return {
+				iconWidth: ['validateWidth'],
+			};
+		}
+		static get style() {
+			return ontarioIconCss;
+		}
+	},
+	[
+		257,
+		'ontario-icon-alert-error',
+		{
+			iconWidth: [2, 'icon-width'],
+			iconWidthState: [32],
+		},
+		undefined,
+		{
+			iconWidth: ['validateWidth'],
+		},
+	],
+);
+function defineCustomElement() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = ['ontario-icon-alert-error'];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-icon-alert-error':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioIconAlertError);
+				}
+				break;
+		}
+	});
+}
+defineCustomElement();
+
+export { OntarioIconAlertError as O, defineCustomElement as d };
+//# sourceMappingURL=p-vdzS-daB.js.map
+
+//# sourceMappingURL=p-vdzS-daB.js.map

package/components/p-vdzS-daB.js.map

@@ -0,0 +1 @@
+{"file":"p-vdzS-daB.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,yZAAyZ;;MCWna,qBAAqB,iBAAAA,kBAAA,CAAA,MAAA,qBAAA,SAAAC,CAAA,CAAA;AALlC,IAAA,WAAA,GAAA;;;;AAMC;;;AAGG;AACK,QAAA,IAAS,CAAA,SAAA,GAAa,EAAE;AA4FhC;AApFA;;;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,8BAA8B;AAC/C,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,8BAA8B;iBAC/C,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;QACL,QACC,4DACC,KAAK,EAAE,CAAoC,iCAAA,EAAA,IAAI,CAAC,cAAc,CAAE,CAAA,EAChE,KAAK,EAAE,EAAE,KAAK,EAAE,CAAG,EAAA,IAAI,CAAC,cAAc,CAAA,EAAA,CAAI,EAAE,EAAA,EAE5C,CACC,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,KAAK,EACV,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,EACnB,EAAE,EAAC,aAAa,EAAA,EAEhB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,CAAC,EAAC,kGAAkG,EACpG,IAAI,EAAC,SAAS,EACb,CAAA,EACF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAC,EAAC,iCAAiC,EAAC,IAAI,EAAC,MAAM,EAAG,CAAA,CACnD,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-alert-error&encapsulation=shadow","src/components/ontario-icon/ontario-icon-alert-error.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-alert-error',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconAlertError 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-error> ')\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-error> ')\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-error\"\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 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"\n\t\t\t\t\t\tfill=\"#cd0000\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path d=\"M11 17h2v-2h-2v2zm0-4h2V7h-2v6z\" 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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ongov/ontario-design-system-component-library",
-	"version": "6.0.0-alpha.5",
+	"version": "6.0.0-alpha.6",
 	"type": "module",
 	"private": false,
 	"description": "Ontario Design System Component Library",
@@ -10,6 +10,7 @@
 	"module": "dist/index.js",
 	"types": "dist/types/index.d.ts",
 	"files": [
+		"components/",
 		"dist/",
 		"loader/",
 		"src/",
@@ -38,15 +39,16 @@
 			"require": "./hydrate/index.cjs.js",
 			"default": "./hydrate/index.js"
 		},
-		"./components/*.js": {
+		"./components/*": {
 			"types": "./dist/types/components/*.d.ts",
-			"import": "./components/*.js"
+			"import": "./components/*",
+			"require": "./components/*.cjs"
 		},
 		"./components": {
 			"types": "./dist/types/components.d.ts",
-			"import": "./dist/index.js",
-			"require": "./dist/index.cjs.js",
-			"default": "./dist/index.js"
+			"import": "./components/index.js",
+			"require": "./components/index.cjs.js",
+			"default": "./components/index.js"
 		}
 	},
 	"scripts": {
@@ -140,5 +142,5 @@
 	"collection:main": "dist/collection/index.js",
 	"es2015": "dist/esm/index.mjs",
 	"es2017": "dist/esm/index.mjs",
-	"gitHead": "0a0896ee0e66931e57accd348b3e8cf39c0c17ba"
+	"gitHead": "e0c777d0b3c79def735e2bd69dc870414adbe294"
 }