npm - @ongov/ontario-design-system-component-library - Versions diffs - 5.0.0-alpha.6 → 6.0.0-alpha.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2485) hide show

package/dist/components/ontario-badge.js CHANGED Viewed

@@ -1,179 +1,9 @@
-import { p as proxyCustomElement, H, h } from './p-846438ed.js';
-import { r as retrieveEnumKeys } from './p-083804e2.js';
-import { C as ConsoleMessageClass } from './p-b2019a19.js';
-import { a as validateValueAgainstArray } from './p-edb765a1.js';
-var BadgeColourToClass;
-(function (BadgeColourToClass) {
-	BadgeColourToClass['teal'] = 'ontario-badge--default-heavy';
-	BadgeColourToClass['light-teal'] = 'ontario-badge--default-light';
-	BadgeColourToClass['black'] = 'ontario-badge--neutral-heavy';
-	BadgeColourToClass['grey'] = 'ontario-badge--neutral-light';
-	BadgeColourToClass['red'] = 'ontario-badge--alert-heavy';
-	BadgeColourToClass['yellow'] = 'ontario-badge--warning-heavy';
-	BadgeColourToClass['green'] = 'ontario-badge--success-heavy';
-})(BadgeColourToClass || (BadgeColourToClass = {}));
-const BadgeColours = retrieveEnumKeys(BadgeColourToClass);
-const ontarioBadgeCss =
-	'.ontario-badge__container{display:flex;flex-direction:column;gap:2.5rem;align-items:flex-start;padding:1.5rem 1rem}.ontario-badge__label{display:block;text-align:left;font-weight:600;margin-bottom:0.75rem;font-size:0.875rem;color:#4d4d4d}.ontario-badge{display:inline-block;background-color:#E2F0F4;color:#4d4d4d;padding:0.25rem 0.5rem;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:700;line-height:1.5625rem;letter-spacing:0.03rem;text-transform:uppercase}.ontario-badge--default-light{background-color:#E2F0F4;color:#4d4d4d}.ontario-badge--default-heavy{background-color:#1080A6;color:#FFFFFF}.ontario-badge--neutral-light{background-color:#f2f2f2;color:#4d4d4d}.ontario-badge--neutral-heavy{background-color:#1a1a1a;color:#FFFFFF}.ontario-badge--alert-heavy{background-color:#CD0000;color:#FFFFFF}.ontario-badge--warning-heavy{background-color:#FFD440;color:#1a1a1a}.ontario-badge--success-heavy{background-color:#118847;color:#FFFFFF}';
-const OntarioBadgeStyle0 = ontarioBadgeCss;
-const OntarioBadge$1 = /*@__PURE__*/ proxyCustomElement(
-	class OntarioBadge extends H {
-		constructor() {
-			super();
-			this.__registerHost();
-			this.__attachShadow();
-		}
-		get host() {
-			return this;
-		}
-		internals;
-		/**
-		 * The colour of the badge.
-		 */
-		colour = 'teal';
-		/**
-		 * The label for the badge.
-		 *
-		 * Offical guidance is to keep the label length within 15 characters.
-		 */
-		label;
-		/**
-		 * An aria label for screen readers.
-		 *
-		 * Used to provide more context to screen readers if necessary.
-		 *
-		 * This property is optional.
-		 *
-		 * @example
-		 * <ontario-badge aria-label-text="This training is currently in progress.">In progress</ontario-badge>
-		 */
-		ariaLabelText;
-		/**
-		 * Watch for changes in the `label` prop for validation purposes.
-		 *
-		 * If no `label` value or host.textContent is provided, a warning message will be printed.
-		 */
-		validateLabel() {
-			if (!this.getBadgeLabel()) {
-				const message = new ConsoleMessageClass();
-				message
-					.addDesignSystemTag()
-					.addMonospaceText(' a label ')
-					.addRegularText('for')
-					.addMonospaceText(' <ontario-badge> ')
-					.addRegularText('was not provided.')
-					.printMessage();
-			}
-		}
-		/**
-		 * Watch for changes to the `colour` prop.
-		 *
-		 * If no `colour` is passed, or if the `colour` does not match the `colour` options, a default value of 'teal' will be applied.
-		 *
-		 * @returns {BadgeColour}
-		 */
-		validateColour() {
-			if (this.colour) {
-				if (validateValueAgainstArray(this.colour, BadgeColours)) {
-					return this.colour;
-				} else {
-					const message = new ConsoleMessageClass();
-					message
-						.addDesignSystemTag()
-						.addMonospaceText(` colour ${this.colour} `)
-						.addRegularText('for')
-						.addMonospaceText(' <ontario-badge> ')
-						.addRegularText('does not match one of the valid colour types. A default colour of `teal` will be applied.')
-						.printMessage();
-				}
-			}
-			return this.setBadgeColour('teal');
-		}
-		/**
-		 * Programatically set and return the colour prop.
-		 *
-		 * @prop {BadgeColour} colour
-		 *
-		 * @returns {BadgeColour}
-		 */
-		setBadgeColour(colour) {
-			this.colour = colour;
-			return this.colour;
-		}
-		/**
-		 * Returns badge label depending on if the label prop was set or
-		 * if the host.textContent (text in-between the opening and closing tag) was set.
-		 *
-		 * The label prop takes priority.
-		 *
-		 * @returns {string | null}
-		 */
-		getBadgeLabel() {
-			const badgeLabel = this.label ? this.label : this.host.textContent;
-			return badgeLabel;
-		}
-		componentWillLoad() {
-			this.validateColour();
-			this.validateLabel();
-		}
-		render() {
-			return h(
-				'span',
-				{
-					'key': '41e824c2aac3d3b8cbeff7a74bfc8bd1a09fc0ec',
-					'class': `ontario-badge ${BadgeColourToClass[this.colour]}`,
-					'aria-label': this.ariaLabelText,
-				},
-				this.getBadgeLabel(),
-			);
-		}
-		static get watchers() {
-			return {
-				label: ['validateLabel'],
-				colour: ['validateColour'],
-			};
-		}
-		static get style() {
-			return OntarioBadgeStyle0;
-		}
-	},
-	[
-		1,
-		'ontario-badge',
-		{
-			colour: [1025],
-			label: [1],
-			ariaLabelText: [1025, 'aria-label-text'],
-		},
-		undefined,
-		{
-			label: ['validateLabel'],
-			colour: ['validateColour'],
-		},
-	],
-);
-function defineCustomElement$1() {
-	if (typeof customElements === 'undefined') {
-		return;
-	}
-	const components = ['ontario-badge'];
-	components.forEach((tagName) => {
-		switch (tagName) {
-			case 'ontario-badge':
-				if (!customElements.get(tagName)) {
-					customElements.define(tagName, OntarioBadge$1);
-				}
-				break;
-		}
-	});
-}
+import { O as OntarioBadge$1, d as defineCustomElement$1 } from './p-CfKaEpHy.js';
 const OntarioBadge = OntarioBadge$1;
 const defineCustomElement = defineCustomElement$1;
 export { OntarioBadge, defineCustomElement };
+//# sourceMappingURL=ontario-badge.js.map
 //# sourceMappingURL=ontario-badge.js.map

package/dist/components/ontario-badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ontario-badge.js","mappings":";;;;;AAEA,IAAY,kBAQX;AARD,WAAY,kBAAkB;IAC7B,2DAAqC,CAAA;IACrC,iEAA6C,CAAA;IAC7C,4DAAsC,CAAA;IACtC,2DAAqC,CAAA;IACrC,wDAAkC,CAAA;IAClC,6DAAuC,CAAA;IACvC,4DAAsC,CAAA;AACvC,CAAC,EARW,kBAAkB,KAAlB,kBAAkB,QAQ7B;AAEM,MAAM,YAAY,GAAG,gBAAgB,CAAC,kBAAkB,CAAC;;ACZhE,MAAM,eAAe,GAAG,i/BAAi/B,CAAC;AAC1gC,2BAAe,eAAe;;MCUjBA,cAAY;;;;;;;IAEL,SAAS,CAAmB;;;;IAKtB,MAAM,GAAgB,MAAM,CAAC;;;;;;IAO9C,KAAK,CAAS;;;;;;;;;;;IAYG,aAAa,CAAU;;;;;;IAQhD,aAAa;QACZ,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE;YAC1B,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,WAAW,CAAC;iBAC7B,cAAc,CAAC,KAAK,CAAC;iBACrB,gBAAgB,CAAC,mBAAmB,CAAC;iBACrC,cAAc,CAAC,mBAAmB,CAAC;iBACnC,YAAY,EAAE,CAAC;SACjB;KACD;;;;;;;;IAUD,cAAc;QACb,IAAI,IAAI,CAAC,MAAM,EAAE;YAChB,IAAI,yBAAyB,CAAC,IAAI,CAAC,MAAM,EAAE,YAAY,CAAC,EAAE;gBACzD,OAAO,IAAI,CAAC,MAAM,CAAC;aACnB;iBAAM;gBACN,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;gBAC1C,OAAO;qBACL,kBAAkB,EAAE;qBACpB,gBAAgB,CAAC,WAAW,IAAI,CAAC,MAAM,GAAG,CAAC;qBAC3C,cAAc,CAAC,KAAK,CAAC;qBACrB,gBAAgB,CAAC,mBAAmB,CAAC;qBACrC,cAAc,CAAC,2FAA2F,CAAC;qBAC3G,YAAY,EAAE,CAAC;aACjB;SACD;QAED,OAAO,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;KACnC;;;;;;;;IASD,cAAc,CAAC,MAAmB;QACjC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,OAAO,IAAI,CAAC,MAAM,CAAC;KACnB;;;;;;;;;IAUD,aAAa;QACZ,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC;QACnE,OAAO,UAAU,CAAC;KAClB;IAED,iBAAiB;QAChB,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,aAAa,EAAE,CAAC;KACrB;IAED,MAAM;QACL,QACC,6DAAM,KAAK,EAAE,iBAAiB,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,gBAAc,IAAI,CAAC,aAAa,IAC7F,IAAI,CAAC,aAAa,EAAE,CACf,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[~~"OntarioBadge"~~],"sources":[~~"src/components/ontario-badge/ontario-badge.types.ts","src/components/ontario-badge/ontario-badge.scss?tag=ontario-badge&encapsulation=shadow","src/components/ontario-badge/ontario-badge.tsx"~~],"sourcesContent":["import { retrieveEnumKeys } from '../../utils/helper/utils';\n\nexport enum BadgeColourToClass {\n\tteal = 'ontario-badge--default-heavy',\n\t'light-teal' = 'ontario-badge--default-light',\n\tblack = 'ontario-badge--neutral-heavy',\n\tgrey = 'ontario-badge--neutral-light',\n\tred = 'ontario-badge--alert-heavy',\n\tyellow = 'ontario-badge--warning-heavy',\n\tgreen = 'ontario-badge--success-heavy',\n}\n\nexport const BadgeColours = retrieveEnumKeys(BadgeColourToClass);\n\nexport type BadgeColour = keyof typeof BadgeColourToClass;\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/fonts.variables' as fonts;\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/font-weights.variables' as fontWeights;\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/2-tools/functions/global.functions' as globalFunctions;\n\n.ontario-badge__container {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: spacing.$spacing-7;\n\talign-items: flex-start;\n\tpadding: spacing.$spacing-5 spacing.$spacing-4;\n}\n\n.ontario-badge__label {\n\tdisplay: block;\n\ttext-align: left;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tmargin-bottom: spacing.$spacing-3;\n\tfont-size: fontSizes.$ontario-font-size-small;\n\tcolor: colours.$ontario-greyscale-70;\n}\n\n.ontario-badge {\n\tdisplay: inline-block;\n\tbackground-color: colours.$ontario-colour-information-light;\n\tcolor: colours.$ontario-greyscale-70;\n\tpadding: spacing.$spacing-1 spacing.$spacing-2;\n\tfont-family: fonts.$ontario-font-raleway;\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tfont-weight: fontWeights.$ontario-font-weights-bold;\n\tline-height: globalFunctions.px-to-rem(25);\n\tletter-spacing: 0.03rem;\n\ttext-transform: uppercase;\n}\n\n.ontario-badge--default-light {\n\tbackground-color: colours.$ontario-colour-information-light;\n\tcolor: colours.$ontario-greyscale-70;\n}\n\n.ontario-badge--default-heavy {\n\tbackground-color: colours.$ontario-colour-information;\n\tcolor: colours.$ontario-colour-white;\n}\n\n.ontario-badge--neutral-light {\n\tbackground-color: colours.$ontario-greyscale-5;\n\tcolor: colours.$ontario-greyscale-70;\n}\n\n.ontario-badge--neutral-heavy {\n\tbackground-color: colours.$ontario-colour-black;\n\tcolor: colours.$ontario-colour-white;\n}\n\n.ontario-badge--alert-heavy {\n\tbackground-color: colours.$ontario-colour-alert;\n\tcolor: colours.$ontario-colour-white;\n}\n\n.ontario-badge--warning-heavy {\n\tbackground-color: colours.$ontario-colour-warning;\n\tcolor: colours.$ontario-colour-black;\n}\n\n.ontario-badge--success-heavy {\n\tbackground-color: colours.$ontario-colour-success;\n\tcolor: colours.$ontario-colour-white;\n}\n","import { Component, Prop, Element, h, Watch, AttachInternals } from '@stencil/core';\n\nimport { BadgeColour, BadgeColours, BadgeColourToClass } from './ontario-badge.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\n\n@Component({\n\ttag: 'ontario-badge',\n\tstyleUrl: 'ontario-badge.scss',\n\tshadow: true,\n})\nexport class OntarioBadge {\n\t@Element() host: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\t/*\n\t The colour of the badge.\n\t /\n\t@Prop({ mutable: true }) colour: BadgeColour = 'teal';\n\n\t/\n\t The label for the badge.\n\t \n\t Offical guidance is to keep the label length within 15 characters.\n\t /\n\t@Prop() label: string;\n\n\t/\n\t An aria label for screen readers.\n\t \n\t Used to provide more context to screen readers if necessary.\n\t \n\t This property is optional.\n\t \n\t @example\n\t * <ontario-badge aria-label-text=\"This training is currently in progress.\">In progress</ontario-badge>\n\t /\n\t@Prop({ mutable: true }) ariaLabelText?: string;\n\n\t/\n\t Watch for changes in the `label` prop for validation purposes.\n\t \n\t If no `label` value or host.textContent is provided, a warning message will be printed.\n\t /\n\t@Watch('label')\n\tvalidateLabel() {\n\t\tif (!this.getBadgeLabel()) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' a label ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-badge> ')\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 Watch for changes to the `colour` prop.\n\t \n\t If no `colour` is passed, or if the `colour` does not match the `colour` options, a default value of 'teal' will be applied.\n\t \n\t @returns {BadgeColour}\n\t /\n\t@Watch('colour')\n\tvalidateColour(): BadgeColour {\n\t\tif (this.colour) {\n\t\t\tif (validateValueAgainstArray(this.colour, BadgeColours)) {\n\t\t\t\treturn this.colour;\n\t\t\t} else {\n\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\tmessage\n\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t.addMonospaceText(` colour ${this.colour} `)\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-badge> ')\n\t\t\t\t\t.addRegularText('does not match one of the valid colour types. A default colour of `teal` will be applied.')\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\n\t\treturn this.setBadgeColour('teal');\n\t}\n\n\t/\n\t Programatically set and return the colour prop.\n\t \n\t @prop {BadgeColour} colour\n\t \n\t @returns {BadgeColour}\n\t /\n\tsetBadgeColour(colour: BadgeColour): BadgeColour {\n\t\tthis.colour = colour;\n\t\treturn this.colour;\n\t}\n\n\t/\n\t Returns badge label depending on if the label prop was set or\n\t * if the host.textContent (text in-between the opening and closing tag) was set.\n\t \n\t The label prop takes priority.\n\t \n\t @returns {string \| null}\n\t */\n\tgetBadgeLabel(): string \| null {\n\t\tconst badgeLabel = this.label ? this.label : this.host.textContent;\n\t\treturn badgeLabel;\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateLabel();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<span class={`ontario-badge ${BadgeColourToClass[this.colour]~~}`} aria-label={this.ariaLabelText}>\n\t\t\t\t{this.getBadgeLabel()}\n\t\t\t</span>\n\t\t);\n\t}\n}\n"]~~,"version":3}
1	+ {"file":"ontario-badge.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ontario-badge2.js ADDED Viewed

@@ -0,0 +1,178 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { r as retrieveEnumKeys } from './utils.js';
+import { C as ConsoleMessageClass } from './console-message.js';
+import { a as validateValueAgainstArray } from './validation-functions.js';
+var BadgeColourToClass;
+(function (BadgeColourToClass) {
+	BadgeColourToClass['teal'] = 'ontario-badge--default-heavy';
+	BadgeColourToClass['lightTeal'] = 'ontario-badge--default-light';
+	BadgeColourToClass['black'] = 'ontario-badge--neutral-heavy';
+	BadgeColourToClass['grey'] = 'ontario-badge--neutral-light';
+	BadgeColourToClass['red'] = 'ontario-badge--alert-heavy';
+	BadgeColourToClass['yellow'] = 'ontario-badge--warning-heavy';
+	BadgeColourToClass['green'] = 'ontario-badge--success-heavy';
+	BadgeColourToClass['white'] = 'ontario-badge--white';
+	BadgeColourToClass['darkGrey'] = 'ontario-badge--grey';
+})(BadgeColourToClass || (BadgeColourToClass = {}));
+const BadgeColours = retrieveEnumKeys(BadgeColourToClass);
+const ontarioBadgeCss =
+	'.ontario-badge__container{display:flex;flex-direction:column;gap:2.5rem;align-items:flex-start;padding:1.5rem 1rem}.ontario-badge__label{display:block;text-align:left;font-weight:600;margin-bottom:0.75rem;font-size:0.875rem;color:#4d4d4d}.ontario-badge{display:inline-block;background-color:#E2F0F4;color:#4d4d4d;padding:0.25rem 0.5rem;font-family:"Raleway Modified", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:700;line-height:1.5625rem;letter-spacing:0.03rem;text-transform:uppercase}.ontario-badge--default-light{background-color:#E2F0F4;color:#4d4d4d}.ontario-badge--default-heavy{background-color:#1080A6;color:#FFFFFF}.ontario-badge--neutral-light{background-color:#f2f2f2;color:#4d4d4d}.ontario-badge--neutral-heavy{background-color:#1a1a1a;color:#FFFFFF}.ontario-badge--alert-heavy{background-color:#CD0000;color:#FFFFFF}.ontario-badge--warning-heavy{background-color:#FFD440;color:#1a1a1a}.ontario-badge--success-heavy{background-color:#118847;color:#FFFFFF}.ontario-badge--white{background-color:#FFFFFF;color:#4d4d4d;border:0.0625rem solid #4d4d4d}.ontario-badge--grey{background-color:#cccccc;color:#1a1a1a}';
+const OntarioBadge = /*@__PURE__*/ proxyCustomElement(
+	class OntarioBadge extends HTMLElement {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+		}
+		get host() {
+			return this;
+		}
+		internals;
+		/**
+		 * The colour of the badge.
+		 */
+		colour = 'teal';
+		/**
+		 * The label for the badge.
+		 *
+		 * Offical guidance is to keep the label length within 15 characters.
+		 */
+		label;
+		/**
+		 * An aria label for screen readers.
+		 *
+		 * Used to provide more context to screen readers if necessary.
+		 *
+		 * This property is optional.
+		 *
+		 * @example
+		 * <ontario-badge aria-label-text="This training is currently in progress.">In progress</ontario-badge>
+		 */
+		ariaLabelText;
+		/**
+		 * Watch for changes in the `label` prop for validation purposes.
+		 *
+		 * If no `label` value or host.textContent is provided, a warning message will be printed.
+		 */
+		validateLabel() {
+			if (!this.getBadgeLabel()) {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addMonospaceText(' a label ')
+					.addRegularText('for')
+					.addMonospaceText(' <ontario-badge> ')
+					.addRegularText('was not provided.')
+					.printMessage();
+			}
+		}
+		/**
+		 * Watch for changes to the `colour` prop.
+		 *
+		 * If no `colour` is passed, or if the `colour` does not match the `colour` options, a default value of 'teal' will be applied.
+		 *
+		 * @returns {BadgeColour}
+		 */
+		validateColour() {
+			if (this.colour) {
+				if (validateValueAgainstArray(this.colour, BadgeColours)) {
+					return this.colour;
+				} else {
+					const message = new ConsoleMessageClass();
+					message
+						.addDesignSystemTag()
+						.addMonospaceText(` colour ${this.colour} `)
+						.addRegularText('for')
+						.addMonospaceText(' <ontario-badge> ')
+						.addRegularText('does not match one of the valid colour types. A default colour of `teal` will be applied.')
+						.printMessage();
+				}
+			}
+			return this.setBadgeColour('teal');
+		}
+		/**
+		 * Programatically set and return the colour prop.
+		 *
+		 * @prop {BadgeColour} colour
+		 *
+		 * @returns {BadgeColour}
+		 */
+		setBadgeColour(colour) {
+			this.colour = colour;
+			return this.colour;
+		}
+		/**
+		 * Returns badge label depending on if the label prop was set or
+		 * if the host.textContent (text in-between the opening and closing tag) was set.
+		 *
+		 * The label prop takes priority.
+		 *
+		 * @returns {string | null}
+		 */
+		getBadgeLabel() {
+			const badgeLabel = this.label ? this.label : this.host.textContent;
+			return badgeLabel;
+		}
+		componentWillLoad() {
+			this.validateColour();
+			this.validateLabel();
+		}
+		render() {
+			return h(
+				'span',
+				{
+					'key': '9fec2518bba42350d3bb2f744ae831d0bbc73265',
+					'class': `ontario-badge ${BadgeColourToClass[this.colour]}`,
+					'aria-label': this.ariaLabelText,
+				},
+				this.getBadgeLabel(),
+			);
+		}
+		static get watchers() {
+			return {
+				label: ['validateLabel'],
+				colour: ['validateColour'],
+			};
+		}
+		static get style() {
+			return ontarioBadgeCss;
+		}
+	},
+	[
+		1,
+		'ontario-badge',
+		{
+			colour: [1025],
+			label: [1],
+			ariaLabelText: [1025, 'aria-label-text'],
+		},
+		undefined,
+		{
+			label: ['validateLabel'],
+			colour: ['validateColour'],
+		},
+	],
+);
+function defineCustomElement() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = ['ontario-badge'];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-badge':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioBadge);
+				}
+				break;
+		}
+	});
+}
+export { OntarioBadge as O, defineCustomElement as d };
+//# sourceMappingURL=ontario-badge2.js.map
+//# sourceMappingURL=ontario-badge2.js.map

package/dist/components/ontario-badge2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ontario-badge2.js","mappings":";;;;;AAEA,IAAY,kBAUX;AAVD,CAAA,UAAY,kBAAkB,EAAA;AAC7B,IAAA,kBAAA,CAAA,MAAA,CAAA,GAAA,8BAAqC;AACrC,IAAA,kBAAA,CAAA,WAAA,CAAA,GAAA,8BAA0C;AAC1C,IAAA,kBAAA,CAAA,OAAA,CAAA,GAAA,8BAAsC;AACtC,IAAA,kBAAA,CAAA,MAAA,CAAA,GAAA,8BAAqC;AACrC,IAAA,kBAAA,CAAA,KAAA,CAAA,GAAA,4BAAkC;AAClC,IAAA,kBAAA,CAAA,QAAA,CAAA,GAAA,8BAAuC;AACvC,IAAA,kBAAA,CAAA,OAAA,CAAA,GAAA,8BAAsC;AACtC,IAAA,kBAAA,CAAA,OAAA,CAAA,GAAA,sBAA8B;AAC9B,IAAA,kBAAA,CAAA,UAAA,CAAA,GAAA,qBAAgC;AACjC,CAAC,EAVW,kBAAkB,KAAlB,kBAAkB,GAU7B,EAAA,CAAA,CAAA;AAEM,MAAM,YAAY,GAAG,gBAAgB,CAAC,kBAAkB,CAAC;;ACdhE,MAAM,eAAe,GAAG,kpCAAkpC;;MCW7pC,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAA,WAAA,CAAA;;;;;;;AAEL,IAAA,SAAS;AAE5B;;AAEG;IACsB,MAAM,GAAgB,MAAM;AAErD;;;;AAIG;AACK,IAAA,KAAK;AAEb;;;;;;;;;AASG;AACsB,IAAA,aAAa;AAEtC;;;;AAIG;IAEH,aAAa,GAAA;AACZ,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE;AAC1B,YAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;YACzC;AACE,iBAAA,kBAAkB;iBAClB,gBAAgB,CAAC,WAAW;iBAC5B,cAAc,CAAC,KAAK;iBACpB,gBAAgB,CAAC,mBAAmB;iBACpC,cAAc,CAAC,mBAAmB;AAClC,iBAAA,YAAY,EAAE;;;AAIlB;;;;;;AAMG;IAEH,cAAc,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;YAChB,IAAI,yBAAyB,CAAC,IAAI,CAAC,MAAM,EAAE,YAAY,CAAC,EAAE;gBACzD,OAAO,IAAI,CAAC,MAAM;;iBACZ;AACN,gBAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;gBACzC;AACE,qBAAA,kBAAkB;AAClB,qBAAA,gBAAgB,CAAC,CAAW,QAAA,EAAA,IAAI,CAAC,MAAM,GAAG;qBAC1C,cAAc,CAAC,KAAK;qBACpB,gBAAgB,CAAC,mBAAmB;qBACpC,cAAc,CAAC,2FAA2F;AAC1G,qBAAA,YAAY,EAAE;;;AAIlB,QAAA,OAAO,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC;;AAGnC;;;;;;AAMG;AACH,IAAA,cAAc,CAAC,MAAmB,EAAA;AACjC,QAAA,IAAI,CAAC,MAAM,GAAG,MAAM;QACpB,OAAO,IAAI,CAAC,MAAM;;AAGnB;;;;;;;AAOG;IACH,aAAa,GAAA;AACZ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW;AAClE,QAAA,OAAO,UAAU;;IAGlB,iBAAiB,GAAA;QAChB,IAAI,CAAC,cAAc,EAAE;QACrB,IAAI,CAAC,aAAa,EAAE;;IAGrB,MAAM,GAAA;AACL,QAAA,QACC,6DAAM,KAAK,EAAE,CAAiB,cAAA,EAAA,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAE,CAAA,EAAc,YAAA,EAAA,IAAI,CAAC,aAAa,EAC7F,EAAA,IAAI,CAAC,aAAa,EAAE,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/ontario-badge/ontario-badge.types.ts","src/components/ontario-badge/ontario-badge.scss?tag=ontario-badge&encapsulation=shadow","src/components/ontario-badge/ontario-badge.tsx"],"sourcesContent":["import { retrieveEnumKeys } from '../../utils/helper/utils';\n\nexport enum BadgeColourToClass {\n\tteal = 'ontario-badge--default-heavy',\n\tlightTeal = 'ontario-badge--default-light',\n\tblack = 'ontario-badge--neutral-heavy',\n\tgrey = 'ontario-badge--neutral-light',\n\tred = 'ontario-badge--alert-heavy',\n\tyellow = 'ontario-badge--warning-heavy',\n\tgreen = 'ontario-badge--success-heavy',\n\twhite = 'ontario-badge--white',\n\tdarkGrey = 'ontario-badge--grey',\n}\n\nexport const BadgeColours = retrieveEnumKeys(BadgeColourToClass);\n\nexport type BadgeColour = keyof typeof BadgeColourToClass;\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/fonts.variables' as fonts;\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/font-weights.variables' as fontWeights;\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/2-tools/functions/global.functions' as globalFunctions;\n\n.ontario-badge__container {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: spacing.$spacing-7;\n\talign-items: flex-start;\n\tpadding: spacing.$spacing-5 spacing.$spacing-4;\n}\n\n.ontario-badge__label {\n\tdisplay: block;\n\ttext-align: left;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tmargin-bottom: spacing.$spacing-3;\n\tfont-size: fontSizes.$ontario-font-size-small;\n\tcolor: colours.$ontario-greyscale-70;\n}\n\n.ontario-badge {\n\tdisplay: inline-block;\n\tbackground-color: colours.$ontario-colour-information-light;\n\tcolor: colours.$ontario-greyscale-70;\n\tpadding: spacing.$spacing-1 spacing.$spacing-2;\n\tfont-family: fonts.$ontario-font-raleway-modified;\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tfont-weight: fontWeights.$ontario-font-weights-bold;\n\tline-height: globalFunctions.px-to-rem(25);\n\tletter-spacing: 0.03rem;\n\ttext-transform: uppercase;\n}\n\n.ontario-badge--default-light {\n\tbackground-color: colours.$ontario-colour-information-light;\n\tcolor: colours.$ontario-greyscale-70;\n}\n\n.ontario-badge--default-heavy {\n\tbackground-color: colours.$ontario-colour-information;\n\tcolor: colours.$ontario-colour-white;\n}\n\n.ontario-badge--neutral-light {\n\tbackground-color: colours.$ontario-greyscale-5;\n\tcolor: colours.$ontario-greyscale-70;\n}\n\n.ontario-badge--neutral-heavy {\n\tbackground-color: colours.$ontario-colour-black;\n\tcolor: colours.$ontario-colour-white;\n}\n\n.ontario-badge--alert-heavy {\n\tbackground-color: colours.$ontario-colour-alert;\n\tcolor: colours.$ontario-colour-white;\n}\n\n.ontario-badge--warning-heavy {\n\tbackground-color: colours.$ontario-colour-warning;\n\tcolor: colours.$ontario-colour-black;\n}\n\n.ontario-badge--success-heavy {\n\tbackground-color: colours.$ontario-colour-success;\n\tcolor: colours.$ontario-colour-white;\n}\n\n.ontario-badge--white {\n\tbackground-color: colours.$ontario-colour-white;\n\tcolor: colours.$ontario-greyscale-70;\n\tborder: globalFunctions.px-to-rem(1) solid colours.$ontario-greyscale-70;\n}\n\n.ontario-badge--grey {\n\tbackground-color: colours.$ontario-greyscale-20;\n\tcolor: colours.$ontario-colour-black;\n}\n","import { Component, Prop, Element, h, Watch, AttachInternals } from '@stencil/core';\n\nimport { BadgeColour, BadgeColours, BadgeColourToClass } from './ontario-badge.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\n\n@Component({\n\ttag: 'ontario-badge',\n\tstyleUrl: 'ontario-badge.scss',\n\tshadow: true,\n})\nexport class OntarioBadge {\n\t@Element() host: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\t/**\n\t * The colour of the badge.\n\t */\n\t@Prop({ mutable: true }) colour: BadgeColour = 'teal';\n\n\t/**\n\t * The label for the badge.\n\t *\n\t * Offical guidance is to keep the label length within 15 characters.\n\t */\n\t@Prop() label: string;\n\n\t/**\n\t * An aria label for screen readers.\n\t *\n\t * Used to provide more context to screen readers if necessary.\n\t *\n\t * This property is optional.\n\t *\n\t * @example\n\t * <ontario-badge aria-label-text=\"This training is currently in progress.\">In progress</ontario-badge>\n\t */\n\t@Prop({ mutable: true }) ariaLabelText?: string;\n\n\t/**\n\t * Watch for changes in the `label` prop for validation purposes.\n\t *\n\t * If no `label` value or host.textContent is provided, a warning message will be printed.\n\t */\n\t@Watch('label')\n\tvalidateLabel() {\n\t\tif (!this.getBadgeLabel()) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' a label ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-badge> ')\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 * Watch for changes to the `colour` prop.\n\t *\n\t * If no `colour` is passed, or if the `colour` does not match the `colour` options, a default value of 'teal' will be applied.\n\t *\n\t * @returns {BadgeColour}\n\t */\n\t@Watch('colour')\n\tvalidateColour(): BadgeColour {\n\t\tif (this.colour) {\n\t\t\tif (validateValueAgainstArray(this.colour, BadgeColours)) {\n\t\t\t\treturn this.colour;\n\t\t\t} else {\n\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\tmessage\n\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t.addMonospaceText(` colour ${this.colour} `)\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-badge> ')\n\t\t\t\t\t.addRegularText('does not match one of the valid colour types. A default colour of `teal` will be applied.')\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\n\t\treturn this.setBadgeColour('teal');\n\t}\n\n\t/**\n\t * Programatically set and return the colour prop.\n\t *\n\t * @prop {BadgeColour} colour\n\t *\n\t * @returns {BadgeColour}\n\t */\n\tsetBadgeColour(colour: BadgeColour): BadgeColour {\n\t\tthis.colour = colour;\n\t\treturn this.colour;\n\t}\n\n\t/**\n\t * Returns badge label depending on if the label prop was set or\n\t * if the host.textContent (text in-between the opening and closing tag) was set.\n\t *\n\t * The label prop takes priority.\n\t *\n\t * @returns {string | null}\n\t */\n\tgetBadgeLabel(): string | null {\n\t\tconst badgeLabel = this.label ? this.label : this.host.textContent;\n\t\treturn badgeLabel;\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateLabel();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<span class={`ontario-badge ${BadgeColourToClass[this.colour]}`} aria-label={this.ariaLabelText}>\n\t\t\t\t{this.getBadgeLabel()}\n\t\t\t</span>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/ontario-blockquote.js CHANGED Viewed

@@ -1,10 +1,9 @@
-import { p as proxyCustomElement, H, h } from './p-846438ed.js';
-import { b as validatePropExists } from './p-edb765a1.js';
-import { C as ConsoleMessageClass } from './p-b2019a19.js';
+import { p as proxyCustomElement, H, h } from './index.js';
+import { a as validatePropExists } from './p-CNqFEifG.js';
+import { C as ConsoleMessageClass } from './p-CJXRCL8b.js';
 const ontarioBlockquoteCss =
-	'@charset "UTF-8";.ontario-blockquote{border-left:4px solid #4d4d4d;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1.1875rem;font-weight:400;letter-spacing:0.025rem;line-height:1.56;max-width:48rem;margin:2rem;padding:1.5rem 0 1.5rem 1.5rem;quotes:"“" "”"}@media screen and (max-width: 40em){.ontario-blockquote{font-size:1.125rem;letter-spacing:0.03rem;line-height:1.5;margin:1.5rem 0 2rem 0}}.ontario-blockquote p{margin:0 0 1.5rem 0}.ontario-blockquote p::before{content:open-quote}.ontario-blockquote p::after{content:close-quote}.ontario-blockquote--short{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.5}@media screen and (max-width: 40em){.ontario-blockquote--short{font-size:1.4375rem;line-height:1.43}}.ontario-blockquote__attribution,.ontario-blockquote__byline{display:block;font-size:1rem;letter-spacing:0.025rem;line-height:1.56;text-align:right}@media screen and (max-width: 40em){.ontario-blockquote__attribution,.ontario-blockquote__byline{letter-spacing:0.03rem;line-height:1.5}}.ontario-blockquote__attribution{font-style:normal;font-weight:700}.ontario-blockquote__attribution::before{content:"— "}html[lang=fr] blockquote{quotes:"« " " »"}';
-const OntarioBlockquoteStyle0 = ontarioBlockquoteCss;
+	'@charset "UTF-8";.ontario-blockquote{border-left:4px solid #4d4d4d;font-family:"Raleway Modified", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1.1875rem;font-weight:400;letter-spacing:0.025rem;line-height:1.56;max-width:48rem;margin:2rem;padding:1.5rem 0 1.5rem 1.5rem;quotes:"“" "”"}@media screen and (max-width: 40em){.ontario-blockquote{font-size:1.125rem;letter-spacing:0.03rem;line-height:1.5;margin:1.5rem 0 2rem 0}}.ontario-blockquote p{margin:0 0 1.5rem 0}.ontario-blockquote p::before{content:open-quote}.ontario-blockquote p::after{content:close-quote}.ontario-blockquote--short{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.5}@media screen and (max-width: 40em){.ontario-blockquote--short{font-size:1.4375rem;line-height:1.43}}.ontario-blockquote__attribution,.ontario-blockquote__byline{display:block;font-size:1rem;letter-spacing:0.025rem;line-height:1.56;text-align:right}@media screen and (max-width: 40em){.ontario-blockquote__attribution,.ontario-blockquote__byline{letter-spacing:0.03rem;line-height:1.5}}.ontario-blockquote__attribution{font-style:normal;font-weight:700}.ontario-blockquote__attribution::before{content:"— "}html[lang=fr] blockquote{quotes:"« " " »"}';
 const OntarioBlockquote$1 = /*@__PURE__*/ proxyCustomElement(
 	class OntarioBlockquote extends H {
@@ -80,20 +79,20 @@ const OntarioBlockquote$1 = /*@__PURE__*/ proxyCustomElement(
 			return h(
 				'blockquote',
 				{
-					key: '4d483df420706a95ac905f6225d44354c05ee957',
+					key: '2ee572aa7d71ef844a7bb1fa544962339b19b5d0',
 					class: this.shortQuote ? `ontario-blockquote ontario-blockquote--short` : `ontario-blockquote`,
 				},
-				h('p', { key: 'fa9231db3034a5e33ef2d0fc7367b589e936655d' }, this.quoteState),
+				h('p', { key: 'edda8b3587f2eab9c8e06ee3fbc4162e980cc4a2' }, this.quoteState),
 				this.attribution &&
 					h(
 						'cite',
-						{ key: '3fc8c11981cc3e697f2cab6256358d4b10b18fef', class: 'ontario-blockquote__attribution' },
+						{ key: '968f3739eae9fa5d5ae4a88462b8b23bc911e5c1', class: 'ontario-blockquote__attribution' },
 						this.attribution,
 					),
 				this.byline &&
 					h(
 						'cite',
-						{ key: 'a69c1feec5a94db473f7195d785b966031e51843', class: 'ontario-blockquote__byline' },
+						{ key: 'd6a8cd59764e78c64d0163f6a30f18ec215e32e9', class: 'ontario-blockquote__byline' },
 						this.byline,
 					),
 			);
@@ -104,7 +103,7 @@ const OntarioBlockquote$1 = /*@__PURE__*/ proxyCustomElement(
 			};
 		}
 		static get style() {
-			return OntarioBlockquoteStyle0;
+			return ontarioBlockquoteCss;
 		}
 	},
 	[
@@ -144,5 +143,6 @@ const OntarioBlockquote = OntarioBlockquote$1;
 const defineCustomElement = defineCustomElement$1;
 export { OntarioBlockquote, defineCustomElement };
+//# sourceMappingURL=ontario-blockquote.js.map
 //# sourceMappingURL=ontario-blockquote.js.map

package/dist/components/ontario-blockquote.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ontario-blockquote.js","mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,~~gtCAAgtC~~,~~CAAC;AAC9uC~~,~~gCAAe~~,~~oBAAoB;;MCWtBA~~,~~mBAAiB;;;;;;;;;;;;IAQJ~~,~~KAAK~~,~~CAAS~~;;;;~~IAK/B~~,WAAW,~~CAAU;;;;IAKrB~~,MAAM~~,CAAU~~;~~IAEf~~,gBAAgB,GAAW,GAAG~~,CAAC~~;~~IAE/B~~,UAAU,GAAY,KAAK~~,CAAC~~;~~IAEpB~~,UAAU,~~CAAS;;;;;;;IASpC~~,~~aAAa~~;~~QACZ~~,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE~~,CAAC~~;~~QAC5D~~,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,UAAU,CAAC~~,CAAC~~;~~QAC3C~~,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,IAAI,IAAI,CAAC,gBAAgB,IAAI,IAAI~~,CAAC~~;~~KAC3E;;;;IAKD~~,oBAAoB,CAAC,QAAgB;~~QACpC~~,IAAI,kBAAkB,CAAC,QAAQ,CAAC,EAAE;~~YACjC~~,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE~~,CAAC~~;~~YAC1C,OAAO~~;~~iBACL~~,kBAAkB~~,EAAE~~;~~iBACpB~~,gBAAgB,CAAC,SAAS~~,CAAC~~;~~iBAC3B~~,cAAc,CAAC,KAAK~~,CAAC~~;~~iBACrB~~,gBAAgB,CAAC,wBAAwB~~,CAAC~~;~~iBAC1C~~,cAAc,CAAC,kBAAkB~~,CAAC~~;~~iBAClC~~,YAAY,EAAE,~~CAAC;SACjB;KACD;IAED~~,~~iBAAiB~~;QAChB,IAAI,CAAC,aAAa,EAAE~~,CAAC~~;~~KACrB;;;;IAKD~~,gBAAgB;QACf,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,CAAC,SAAS;~~YAC/C~~,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ;~~gBAC1B~~,IAAI,QAAQ,CAAC,IAAI,KAAK,YAAY,EAAE;oBACnC,IAAI,CAAC,aAAa,EAAE,CAAC;~~iBACrB;aACD~~,~~CAAC~~,CAAC;~~SACH~~,~~CAAC~~,~~CAAC;QAEH,~~MAAM,OAAO,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE~~,CAAC~~;~~QACrC~~,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,~~CAAC;KACrC;IAED~~,~~MAAM~~;~~QACL~~,QACC,~~mEAAY~~,KAAK,EAAE,IAAI,CAAC,UAAU,GAAG,~~8CAA8C~~,GAAG,oBAAoB,~~IACzG~~,~~4DAAI~~,IAAI,CAAC,UAAU,CAAK,EACvB,IAAI,CAAC,WAAW,IAAI,~~6DAAM~~,KAAK,EAAC,iCAAiC,~~IAAE~~,IAAI,CAAC,WAAW,CAAQ,EAC3F,IAAI,CAAC,MAAM,IAAI,~~6DAAM~~,KAAK,EAAC,4BAA4B,~~IAAE~~,IAAI,CAAC,MAAM,CAAQ,CACjE~~,EACZ;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["OntarioBlockquote"],"sources":["src/components/ontario-blockquote/ontario-blockquote.scss?tag=ontario-blockquote&encapsulation=shadow","src/components/ontario-blockquote/ontario-blockquote.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/1-variables/line-heights.variables' as lineHeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n\n.ontario-blockquote {\n\tborder-left: 4px solid colours.$ontario-greyscale-70;\n\tfont-family: fonts.$ontario-font-raleway;\n\tfont-size: globalFunctions.px-to-rem(19);\n\tfont-weight: fontWeights.$ontario-font-weights-normal;\n\tletter-spacing: 0.025rem;\n\tline-height: lineHeights.$ontario-line-height-8;\n\tmax-width: globalVariables.$standard-width;\n\tmargin: spacing.$spacing-6;\n\tpadding: spacing.$spacing-5 0 spacing.$spacing-5 spacing.$spacing-5;\n\tquotes: '\\201C' '\\201D';\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tfont-size: globalFunctions.px-to-rem(18);\n\t\tletter-spacing: 0.03rem;\n\t\tline-height: lineHeights.$ontario-line-height-7;\n\t\tmargin: spacing.$spacing-5 spacing.$spacing-0 spacing.$spacing-6 spacing.$spacing-0;\n\t}\n}\n\n.ontario-blockquote p {\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-5 spacing.$spacing-0;\n\n\t&::before {\n\t\tcontent: open-quote;\n\t}\n\n\t&::after {\n\t\tcontent: close-quote;\n\t}\n}\n\n.ontario-blockquote--short {\n\tfont-size: globalFunctions.px-to-rem(28);\n\tletter-spacing: 0.02rem;\n\tline-height: lineHeights.$ontario-line-height-7;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tfont-size: globalFunctions.px-to-rem(23);\n\t\tline-height: lineHeights.$ontario-line-height-6;\n\t}\n}\n\n.ontario-blockquote__attribution,\n.ontario-blockquote__byline {\n\tdisplay: block;\n\tfont-size: globalFunctions.px-to-rem(16);\n\tletter-spacing: 0.025rem;\n\tline-height: lineHeights.$ontario-line-height-8;\n\ttext-align: right;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tletter-spacing: 0.03rem;\n\t\tline-height: lineHeights.$ontario-line-height-7;\n\t}\n}\n\n.ontario-blockquote__attribution {\n\tfont-style: normal;\n\tfont-weight: fontWeights.$ontario-font-weights-bold;\n\n\t&::before {\n\t\tcontent: '\\2014 \\0020';\n\t}\n}\n\nhtml[lang='fr'] blockquote {\n\tquotes: '« ' ' »';\n}\n","import { Component, h, Element, Prop, State, Watch } from '@stencil/core';\n\nimport { Blockquote } from './blockquote.interface';\n\nimport { validatePropExists } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-blockquote',\n\tstyleUrl: 'ontario-blockquote.scss',\n\tshadow: true,\n})\nexport class OntarioBlockquote implements Blockquote {\n\t@Element() host: HTMLElement;\n\n\t/*\n\t Text to be displayed as the quote.\n\t \n\t Note that wrapping the quotes in quotations is not needed - this is handled through the component styles\n\t /\n\t@Prop({ mutable: true }) quote: string;\n\n\t/\n\t Optional text to be displayed as the attribution (the author) of the quote.\n\t /\n\t@Prop() attribution?: string;\n\n\t/\n\t Optional text to be displayed for additional information about the attribution/author.\n\t /\n\t@Prop() byline?: string;\n\n\t@State() shortQuoteLength: number = 140;\n\n\t@State() shortQuote: boolean = false;\n\n\t@State() private quoteState: string;\n\n\t/\n\t * Watch for changes in the `quote` prop for validation purposes.\n\t \n\t If the `quote` prop is not provided, set the `quote` prop to the host textContent (if it exists).\n\t * If the `quote` prop length is 140 characters or less, set the `shortQuote` state to true - this will add additonal classes for the blockquote styles.\n\t /\n\t@Watch('quote')\n\tvalidateQuote() {\n\t\tthis.quoteState = this.quote ?? this.host.textContent ?? '';\n\t\tthis.validateQuoteContent(this.quoteState);\n\t\tthis.shortQuote = this.quoteState?.length <= this.shortQuoteLength ?? true;\n\t}\n\n\t/\n\t Print the missing `quote` prop warning message\n\t /\n\tvalidateQuoteContent(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(' quote ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-blockquote> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateQuote();\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.validateQuote();\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\trender() {\n\t\treturn (\n\t\t\t<blockquote class={this.shortQuote ? `ontario-blockquote ontario-blockquote--short` : `ontario-blockquote`}>\n\t\t\t\t<p>{this.quoteState}</p>\n\t\t\t\t{this.attribution && <cite class=\"ontario-blockquote__attribution\">{this.attribution}</cite>}\n\t\t\t\t{this.byline && <cite class=\"ontario-blockquote__byline\">{this.byline}</cite>}\n\t\t\t</blockquote>\n\t\t);\n\t}\n}\n"],"version":3}
1	+ {"file":"ontario-blockquote.js","mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,ytCAAytC;;MCYzuCA,mBAAiB,iBAAAC,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;;;;;;;AAG7B;;;;AAIG;AACsB,IAAA,KAAK;AAE9B;;AAEG;AACK,IAAA,WAAW;AAEnB;;AAEG;AACK,IAAA,MAAM;IAEL,gBAAgB,GAAW,GAAG;IAE9B,UAAU,GAAY,KAAK;AAEnB,IAAA,UAAU;AAE3B;;;;;AAKG;IAEH,aAAa,GAAA;AACZ,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE;AAC3D,QAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,UAAU,CAAC;AAC1C,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,IAAI,IAAI,CAAC,gBAAgB,IAAI,IAAI;;AAG3E;;AAEG;AACH,IAAA,oBAAoB,CAAC,QAAgB,EAAA;AACpC,QAAA,IAAI,kBAAkB,CAAC,QAAQ,CAAC,EAAE;AACjC,YAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;YACzC;AACE,iBAAA,kBAAkB;iBAClB,gBAAgB,CAAC,SAAS;iBAC1B,cAAc,CAAC,KAAK;iBACpB,gBAAgB,CAAC,wBAAwB;iBACzC,cAAc,CAAC,kBAAkB;AACjC,iBAAA,YAAY,EAAE;;;IAIlB,iBAAiB,GAAA;QAChB,IAAI,CAAC,aAAa,EAAE;;AAGrB;;AAEG;IACH,gBAAgB,GAAA;QACf,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,CAAC,SAAS,KAAI;AACnD,YAAA,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,KAAI;AAC9B,gBAAA,IAAI,QAAQ,CAAC,IAAI,KAAK,YAAY,EAAE;oBACnC,IAAI,CAAC,aAAa,EAAE;;AAEtB,aAAC,CAAC;AACH,SAAC,CAAC;AAEF,QAAA,MAAM,OAAO,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE;QACpC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC;;IAGrC,MAAM,GAAA;AACL,QAAA,QACC,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,KAAK,EAAE,IAAI,CAAC,UAAU,GAAG,CAA8C,4CAAA,CAAA,GAAG,oBAAoB,EAAA,EACzG,CAAI,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,UAAU,CAAK,EACvB,IAAI,CAAC,WAAW,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iCAAiC,EAAE,EAAA,IAAI,CAAC,WAAW,CAAQ,EAC3F,IAAI,CAAC,MAAM,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,4BAA4B,EAAE,EAAA,IAAI,CAAC,MAAM,CAAQ,CACjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioBlockquote","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-blockquote/ontario-blockquote.scss?tag=ontario-blockquote&encapsulation=shadow","src/components/ontario-blockquote/ontario-blockquote.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/1-variables/line-heights.variables' as lineHeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n\n.ontario-blockquote {\n\tborder-left: 4px solid colours.$ontario-greyscale-70;\n\tfont-family: fonts.$ontario-font-raleway-modified;\n\tfont-size: globalFunctions.px-to-rem(19);\n\tfont-weight: fontWeights.$ontario-font-weights-normal;\n\tletter-spacing: 0.025rem;\n\tline-height: lineHeights.$ontario-line-height-8;\n\tmax-width: globalVariables.$standard-width;\n\tmargin: spacing.$spacing-6;\n\tpadding: spacing.$spacing-5 0 spacing.$spacing-5 spacing.$spacing-5;\n\tquotes: '\\201C' '\\201D';\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tfont-size: globalFunctions.px-to-rem(18);\n\t\tletter-spacing: 0.03rem;\n\t\tline-height: lineHeights.$ontario-line-height-7;\n\t\tmargin: spacing.$spacing-5 spacing.$spacing-0 spacing.$spacing-6 spacing.$spacing-0;\n\t}\n}\n\n.ontario-blockquote p {\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-5 spacing.$spacing-0;\n\n\t&::before {\n\t\tcontent: open-quote;\n\t}\n\n\t&::after {\n\t\tcontent: close-quote;\n\t}\n}\n\n.ontario-blockquote--short {\n\tfont-size: globalFunctions.px-to-rem(28);\n\tletter-spacing: 0.02rem;\n\tline-height: lineHeights.$ontario-line-height-7;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tfont-size: globalFunctions.px-to-rem(23);\n\t\tline-height: lineHeights.$ontario-line-height-6;\n\t}\n}\n\n.ontario-blockquote__attribution,\n.ontario-blockquote__byline {\n\tdisplay: block;\n\tfont-size: globalFunctions.px-to-rem(16);\n\tletter-spacing: 0.025rem;\n\tline-height: lineHeights.$ontario-line-height-8;\n\ttext-align: right;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tletter-spacing: 0.03rem;\n\t\tline-height: lineHeights.$ontario-line-height-7;\n\t}\n}\n\n.ontario-blockquote__attribution {\n\tfont-style: normal;\n\tfont-weight: fontWeights.$ontario-font-weights-bold;\n\n\t&::before {\n\t\tcontent: '\\2014 \\0020';\n\t}\n}\n\nhtml[lang='fr'] blockquote {\n\tquotes: '« ' ' »';\n}\n","import { Component, h, Element, Prop, State, Watch } from '@stencil/core';\n\nimport { Blockquote } from './blockquote.interface';\n\nimport { validatePropExists } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-blockquote',\n\tstyleUrl: 'ontario-blockquote.scss',\n\tshadow: true,\n})\nexport class OntarioBlockquote implements Blockquote {\n\t@Element() host: HTMLElement;\n\n\t/*\n\t Text to be displayed as the quote.\n\t \n\t Note that wrapping the quotes in quotations is not needed - this is handled through the component styles\n\t /\n\t@Prop({ mutable: true }) quote: string;\n\n\t/\n\t Optional text to be displayed as the attribution (the author) of the quote.\n\t /\n\t@Prop() attribution?: string;\n\n\t/\n\t Optional text to be displayed for additional information about the attribution/author.\n\t /\n\t@Prop() byline?: string;\n\n\t@State() shortQuoteLength: number = 140;\n\n\t@State() shortQuote: boolean = false;\n\n\t@State() private quoteState: string;\n\n\t/\n\t * Watch for changes in the `quote` prop for validation purposes.\n\t \n\t If the `quote` prop is not provided, set the `quote` prop to the host textContent (if it exists).\n\t * If the `quote` prop length is 140 characters or less, set the `shortQuote` state to true - this will add additonal classes for the blockquote styles.\n\t /\n\t@Watch('quote')\n\tvalidateQuote() {\n\t\tthis.quoteState = this.quote ?? this.host.textContent ?? '';\n\t\tthis.validateQuoteContent(this.quoteState);\n\t\tthis.shortQuote = this.quoteState?.length <= this.shortQuoteLength ?? true;\n\t}\n\n\t/\n\t Print the missing `quote` prop warning message\n\t /\n\tvalidateQuoteContent(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(' quote ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-blockquote> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateQuote();\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.validateQuote();\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\trender() {\n\t\treturn (\n\t\t\t<blockquote class={this.shortQuote ? `ontario-blockquote ontario-blockquote--short` : `ontario-blockquote`}>\n\t\t\t\t<p>{this.quoteState}</p>\n\t\t\t\t{this.attribution && <cite class=\"ontario-blockquote__attribution\">{this.attribution}</cite>}\n\t\t\t\t{this.byline && <cite class=\"ontario-blockquote__byline\">{this.byline}</cite>}\n\t\t\t</blockquote>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/ontario-button.js CHANGED Viewed

@@ -1,13 +1,12 @@
-import { p as proxyCustomElement, H, h } from './p-846438ed.js';
-import { a as validateValueAgainstArray, b as validatePropExists } from './p-edb765a1.js';
-import { C as ConsoleMessageClass } from './p-b2019a19.js';
+import { p as proxyCustomElement, H, h } from './index.js';
+import { v as validateValueAgainstArray, a as validatePropExists } from './p-CNqFEifG.js';
+import { C as ConsoleMessageClass } from './p-CJXRCL8b.js';
 const ButtonTypes = ['primary', 'secondary', 'tertiary', 'internalThemeDark'];
 const HtmlTypes = ['button', 'reset', 'submit'];
 const ontarioButtonCss =
 	'.ontario-button:focus,.ontario-button:active{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}.ontario-button{border:none;border-radius:4px;box-sizing:border-box;box-shadow:none;display:inline-block;font-size:1.125rem;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:600;line-height:1.5555555556;margin:0 1.75rem 1.5rem 0;min-width:10rem;padding:0.625rem 1.5rem;text-align:center;text-decoration:none;cursor:pointer}@media screen and (max-width: 40em){.ontario-button{margin-right:0;display:block;width:100%}}.ontario-button .ontario-icon{margin-right:4px}.ontario-button--primary{background-color:#0066CC;color:#FFFFFF}.ontario-button--primary:hover{background-color:#00478F;color:#FFFFFF}.ontario-button--primary:focus{background-color:#00478F;color:#FFFFFF;transition:background-color 0.2s ease-out, box-shadow 0.1s ease-in-out}.ontario-button--primary:active{background-color:#002142;color:#FFFFFF;transition:background-color 0s, box-shadow 0.1s ease-in-out}.ontario-button--primary:visited{color:#FFFFFF}.ontario-button--secondary{background-color:#FFFFFF;border:2px solid #0066CC;color:#0066CC;padding-top:0.5rem;padding-bottom:0.5rem}.ontario-button--secondary:hover{background-color:#e0f0ff;border-color:#00478F;color:#00478F}.ontario-button--secondary:focus{background-color:#e0f0ff;border-color:#00478F;color:#00478F;transition:background-color 0.2s ease-out, box-shadow 0.1s ease-in-out}.ontario-button--secondary:active{background-color:#c2e0ff;border-color:#002142;color:#002142;transition:background-color 0s, box-shadow 0.1s ease-in-out}.ontario-button--secondary:visited{color:#0066CC}.ontario-button--tertiary{background-color:transparent;color:#0066CC;text-decoration:underline}.ontario-button--tertiary:hover{background-color:#e8e8e8;color:#00478F;text-decoration:underline}.ontario-button--tertiary:focus{background-color:#e8e8e8;color:#00478F;text-decoration:underline;transition:background-color 0.2s ease-out, box-shadow 0.1s ease-in-out}.ontario-button--tertiary:active{background-color:#d1d1d1;color:#002142;text-decoration:underline;transition:background-color 0s, box-shadow 0.1s ease-in-out}.ontario-button--tertiary:visited{color:#0066CC}.ontario-button--internalThemeDark{background-color:#1a1a1a;border:2px solid #FFFFFF;color:#FFFFFF}.ontario-button--internalThemeDark:hover{background-color:#4d4d4d}.ontario-button--internalThemeDark:focus{background-color:#4d4d4d;transition:background-color 0.2s ease-out, box-shadow 0.1s ease-in-out}.ontario-button--internalThemeDark:active{background-color:#4d4d4d;transition:background-color 0s, box-shadow 0.1s ease-in-out}.ontario-button--internalThemeDark:visited{color:#0066CC}';
-const OntarioButtonStyle0 = ontarioButtonCss;
 const OntarioButton$1 = /*@__PURE__*/ proxyCustomElement(
 	class OntarioButton extends H {
@@ -193,7 +192,7 @@ const OntarioButton$1 = /*@__PURE__*/ proxyCustomElement(
 			return h(
 				'button',
 				{
-					'key': '885df269319782dd2971b9fb4f6521c8d292d771',
+					'key': '38158ea47d07a6da873acc3fba49ea3fecc534ce',
 					'ref': (el) => (this.buttonRef = el),
 					'type': this.htmlTypeState,
 					'class': this.getClass(),
@@ -214,7 +213,7 @@ const OntarioButton$1 = /*@__PURE__*/ proxyCustomElement(
 			};
 		}
 		static get style() {
-			return OntarioButtonStyle0;
+			return ontarioButtonCss;
 		}
 	},
 	[
@@ -258,5 +257,6 @@ const OntarioButton = OntarioButton$1;
 const defineCustomElement = defineCustomElement$1;
 export { OntarioButton, defineCustomElement };
+//# sourceMappingURL=ontario-button.js.map
 //# sourceMappingURL=ontario-button.js.map

package/dist/components/ontario-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ontario-button.js","mappings":"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","names":["OntarioButton"],"sources":["src/components/ontario-button/ontario-button.types.ts","src/components/ontario-button/ontario-button.scss?tag=ontario-button&encapsulation=shadow","src/components/ontario-button/ontario-button.tsx"],"sourcesContent":["export const ButtonTypes = ['primary', 'secondary', 'tertiary', 'internalThemeDark'] as const;\nexport const HtmlTypes = ['button', 'reset', 'submit'] as const;\n\nexport type ButtonType = (typeof ButtonTypes)[number];\nexport type HtmlType = (typeof HtmlTypes)[number];\n","@use 'sass:math';\n@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/font-weights.variables' as fontWeights;\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/2-tools/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\n\n$ontario-button-bg-primary: colours.$ontario-colour-link;\n$ontario-button-bg-primary--hover: colours.$ontario-colour-link--hover;\n$ontario-button-bg-primary--active: colours.$ontario-colour-link--active;\n$ontario-button-bg-secondary: colours.$ontario-colour-white;\n\n.ontario-button {\n\tborder: none;\n\tborder-radius: globalVariables.$global-radius;\n\tbox-sizing: border-box;\n\tbox-shadow: none;\n\tdisplay: inline-block;\n\tfont-size: 1.125rem;\n\tfont-family: fonts.$ontario-font-open-sans;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tline-height: math.div(14, 9);\n\tmargin: spacing.$spacing-0 (spacing.$spacing-4 + spacing.$spacing-3) spacing.$spacing-5 spacing.$spacing-0;\n\tmin-width: 10rem;\n\tpadding: math.div((spacing.$spacing-4 + spacing.$spacing-1), 2) spacing.$spacing-5;\n\ttext-align: center;\n\ttext-decoration: none;\n\tcursor: pointer;\n\n\t&:focus,\n\t&:active {\n\t\t@extend %ontario-focus;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-right: 0;\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t}\n\n\t.ontario-icon {\n\t\tmargin-right: 4px;\n\t}\n}\n\n.ontario-button--primary {\n\tbackground-color: $ontario-button-bg-primary;\n\tcolor: colours.$ontario-colour-white;\n\n\t&:hover {\n\t\tbackground-color: $ontario-button-bg-primary--hover;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\t&:focus {\n\t\tbackground-color: $ontario-button-bg-primary--hover;\n\t\tcolor: colours.$ontario-colour-white;\n\t\ttransition:\n\t\t\tbackground-color 0.2s ease-out,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:active {\n\t\tbackground-color: $ontario-button-bg-primary--active;\n\t\tcolor: colours.$ontario-colour-white;\n\t\ttransition:\n\t\t\tbackground-color 0s,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n}\n\n.ontario-button--secondary {\n\tbackground-color: $ontario-button-bg-secondary;\n\tborder: globalVariables.$border-size-standard solid colours.$ontario-colour-link;\n\tcolor: colours.$ontario-colour-link;\n\tpadding-top: spacing.$spacing-2;\n\tpadding-bottom: spacing.$spacing-2;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-colour-button-secondary--hover;\n\t\tborder-color: colours.$ontario-colour-link--hover;\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t}\n\n\t&:focus {\n\t\tbackground-color: colours.$ontario-colour-button-secondary--hover;\n\t\tborder-color: colours.$ontario-colour-link--hover;\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t\ttransition:\n\t\t\tbackground-color 0.2s ease-out,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-button-secondary--active;\n\t\tborder-color: colours.$ontario-colour-link--active;\n\t\tcolor: colours.$ontario-colour-link--active;\n\t\ttransition:\n\t\t\tbackground-color 0s,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-link;\n\t}\n}\n\n.ontario-button--tertiary {\n\tbackground-color: transparent;\n\tcolor: colours.$ontario-colour-link;\n\ttext-decoration: underline;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-colour-button-tertiary--hover;\n\t\tcolor: $ontario-button-bg-primary--hover;\n\t\ttext-decoration: underline;\n\t}\n\n\t&:focus {\n\t\tbackground-color: colours.$ontario-colour-button-tertiary--hover;\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t\ttext-decoration: underline;\n\t\ttransition:\n\t\t\tbackground-color 0.2s ease-out,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-button-tertiary--active;\n\t\tcolor: colours.$ontario-colour-link--active;\n\t\ttext-decoration: underline;\n\t\ttransition:\n\t\t\tbackground-color 0s,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-link;\n\t}\n}\n\n.ontario-button--internalThemeDark {\n\tbackground-color: colours.$ontario-colour-black;\n\tborder: globalVariables.$border-size-standard solid colours.$ontario-colour-white;\n\tcolor: colours.$ontario-colour-white;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t}\n\n\t&:focus {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t\ttransition:\n\t\t\tbackground-color 0.2s ease-out,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t\ttransition:\n\t\t\tbackground-color 0s,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-link;\n\t}\n}\n","import { Component, Prop, Element, h, Watch, State, AttachInternals } from '@stencil/core';\n\nimport { Button } from './button.interface';\nimport { ButtonType, ButtonTypes, HtmlType, HtmlTypes } from './ontario-button.types';\n\nimport { validatePropExists, validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-button',\n\tstyleUrl: 'ontario-button.scss',\n\tshadow: true,\n\tformAssociated: true,\n})\nexport class OntarioButton implements Button {\n\t@Element() host: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\t/*\n\t The type of button to render.\n\t \n\t If no type is passed, it will default to 'secondary'.\n\t /\n\t@Prop() type: ButtonType = 'secondary';\n\n\t/\n\t The native HTML button type the button should use.\n\t \n\t If no htmlType is passed, it will default to 'button'.\n\t /\n\t@Prop() htmlType: HtmlType = 'button';\n\n\t/\n\t Text to be displayed within the button. This will override the text provided through the host element textContent.\n\t \n\t @example\n\t * <ontario-button label=\"Label Text\">Text</ontario-button>\n\t \n\t The resulting button will have the label `\"Label Text\"`.\n\t /\n\t@Prop() label?: string;\n\n\t/\n\t Provides more context as to what the button interaction is doing. This should only be used for accessibility purposes, if the button interaction requires more description than what the text provides.\n\t \n\t This is optional.\n\t \n\t @example\n\t * <ontario-button aria-label-text=\"Click button to open map\">Open</ontario button>\n\t /\n\t@Prop({ mutable: true }) ariaLabelText?: string;\n\n\t/\n\t The unique identifier of the button. This is optional - if no ID is passed, one will be generated.\n\t /\n\t@Prop({ mutable: true }) elementId?: string;\n\n\t/\n\t Mutable variable, for internal use only.\n\t * Set the button's type depending on validation result.\n\t /\n\t@State() private typeState: string;\n\n\t/\n\t Mutable variable, for internal use only.\n\t * Set the native HTML button type depending on validation result.\n\t /\n\t@State() private htmlTypeState: string;\n\n\t@State() private labelState: string;\n\n\t/\n\t A reference to the internal button element.\n\t /\n\n\tprivate buttonRef: HTMLButtonElement;\n\n\t/\n\t * Watch for changes to the `label` property for validation purposes.\n\t \n\t If no `label` prop is provided, the `label` prop will be set to the host element textContent (if it exists).\n\t /\n\t@Watch('label')\n\tprivate updateLabelContent() {\n\t\tthis.labelState = this.label ?? this.host.textContent ?? '';\n\t\tthis.validateLabelContent(this.labelState);\n\t}\n\n\t/\n\t Watch for changes to the `type` property for validation purposes.\n\t \n\t If the user input doesn't match one of the array values then `type` will be set to its default (`secondary`).\n\t * If a match is found in one of the array values then `type` will be set to the matching array key value.\n\t /\n\t@Watch('type')\n\tvalidateType() {\n\t\tconst isValid = validateValueAgainstArray(this.type, ButtonTypes);\n\t\tthis.typeState = isValid ? this.type : this.warnDefaultType();\n\t}\n\n\t/\n\t Watch for changes to the `htmlType` property for validation purposes.\n\t \n\t If the user input doesn't match one of the array values then `htmlType` will be set to its default (`submit`).\n\t * If a match is found in one of the array values then `htmlType` will be set to the matching array key value.\n\t /\n\t@Watch('htmlType')\n\tvalidateHtmlType() {\n\t\tconst isValid = validateValueAgainstArray(this.htmlType, HtmlTypes);\n\t\tthis.htmlTypeState = isValid ? this.htmlType : this.warnDefaultHtmlType();\n\t}\n\n\t/\n\t Print the missing `label` prop warning message\n\t /\n\tvalidateLabelContent(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(' label ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-button> ')\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 Print the invalid `type` prop warning message\n\t * @returns default type (secondary)\n\t /\n\tprivate warnDefaultType(): ButtonType {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' type ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-button> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' primary, secondary, or tertiary ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' secondary ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'secondary';\n\t}\n\n\t/\n\t Print the invalid `htmlType` warning message\n\t * @returns default htmlType (button)\n\t /\n\tprivate warnDefaultHtmlType(): HtmlType {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' htmlType ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-button> ')\n\t\t\t.addRegularText('was set to an invalid htmlType; only')\n\t\t\t.addMonospaceText(' button, reset, or submit ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' button ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'button';\n\t}\n\n\t/\n\t @returns the classes of the button based of the button's `type`.\n\t /\n\tprivate getClass() {\n\t\treturn `ontario-button ontario-button--${this.typeState}`;\n\t}\n\n\tpublic getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\t/\n\t Set `buttonId`, `label`, and `ariaLabel` using internal component logic.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.updateLabelContent();\n\t\tthis.validateHtmlType();\n\t\tthis.validateType();\n\t\tthis.ariaLabelText = this.ariaLabelText ?? this.labelState;\n\t}\n\n\tcomponentDidLoad() {\n\t\t// Used to help load translations for any slots + text content passed in by the user.\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.updateLabelContent();\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\n\t\t// Add a click event listener to handle submitting a form\n\t\tif (this.htmlTypeState === 'submit') {\n\t\t\tthis.buttonRef.addEventListener('click', () => {\n\t\t\t\tconst { form } = this.internals;\n\t\t\t\tform?.requestSubmit();\n\t\t\t});\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<button\n\t\t\t\tref={(el) => (this.buttonRef = el as HTMLButtonElement)}\n\t\t\t\ttype={this.htmlTypeState}\n\t\t\t\tclass={this.getClass()}\n\t\t\t\taria-label={this.ariaLabelText}\n\t\t\t\tid={this.getId()}\n\t\t\t>\n\t\t\t\t{this.labelState}\n\t\t\t</button>\n\t\t);\n\t}\n}\n"],"version":3}
1	+ {"file":"ontario-button.js","mappings":"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","names":["OntarioButton","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-button/ontario-button.types.ts","src/components/ontario-button/ontario-button.scss?tag=ontario-button&encapsulation=shadow","src/components/ontario-button/ontario-button.tsx"],"sourcesContent":["export const ButtonTypes = ['primary', 'secondary', 'tertiary', 'internalThemeDark'] as const;\nexport const HtmlTypes = ['button', 'reset', 'submit'] as const;\n\nexport type ButtonType = (typeof ButtonTypes)[number];\nexport type HtmlType = (typeof HtmlTypes)[number];\n","@use 'sass:math';\n@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/font-weights.variables' as fontWeights;\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/2-tools/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\n\n$ontario-button-bg-primary: colours.$ontario-colour-link;\n$ontario-button-bg-primary--hover: colours.$ontario-colour-link--hover;\n$ontario-button-bg-primary--active: colours.$ontario-colour-link--active;\n$ontario-button-bg-secondary: colours.$ontario-colour-white;\n\n.ontario-button {\n\tborder: none;\n\tborder-radius: globalVariables.$global-radius;\n\tbox-sizing: border-box;\n\tbox-shadow: none;\n\tdisplay: inline-block;\n\tfont-size: 1.125rem;\n\tfont-family: fonts.$ontario-font-open-sans;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tline-height: math.div(14, 9);\n\tmargin: spacing.$spacing-0 (spacing.$spacing-4 + spacing.$spacing-3) spacing.$spacing-5 spacing.$spacing-0;\n\tmin-width: 10rem;\n\tpadding: math.div((spacing.$spacing-4 + spacing.$spacing-1), 2) spacing.$spacing-5;\n\ttext-align: center;\n\ttext-decoration: none;\n\tcursor: pointer;\n\n\t&:focus,\n\t&:active {\n\t\t@extend %ontario-focus;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-right: 0;\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t}\n\n\t.ontario-icon {\n\t\tmargin-right: 4px;\n\t}\n}\n\n.ontario-button--primary {\n\tbackground-color: $ontario-button-bg-primary;\n\tcolor: colours.$ontario-colour-white;\n\n\t&:hover {\n\t\tbackground-color: $ontario-button-bg-primary--hover;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\t&:focus {\n\t\tbackground-color: $ontario-button-bg-primary--hover;\n\t\tcolor: colours.$ontario-colour-white;\n\t\ttransition:\n\t\t\tbackground-color 0.2s ease-out,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:active {\n\t\tbackground-color: $ontario-button-bg-primary--active;\n\t\tcolor: colours.$ontario-colour-white;\n\t\ttransition:\n\t\t\tbackground-color 0s,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n}\n\n.ontario-button--secondary {\n\tbackground-color: $ontario-button-bg-secondary;\n\tborder: globalVariables.$border-size-standard solid colours.$ontario-colour-link;\n\tcolor: colours.$ontario-colour-link;\n\tpadding-top: spacing.$spacing-2;\n\tpadding-bottom: spacing.$spacing-2;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-colour-button-secondary--hover;\n\t\tborder-color: colours.$ontario-colour-link--hover;\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t}\n\n\t&:focus {\n\t\tbackground-color: colours.$ontario-colour-button-secondary--hover;\n\t\tborder-color: colours.$ontario-colour-link--hover;\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t\ttransition:\n\t\t\tbackground-color 0.2s ease-out,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-button-secondary--active;\n\t\tborder-color: colours.$ontario-colour-link--active;\n\t\tcolor: colours.$ontario-colour-link--active;\n\t\ttransition:\n\t\t\tbackground-color 0s,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-link;\n\t}\n}\n\n.ontario-button--tertiary {\n\tbackground-color: transparent;\n\tcolor: colours.$ontario-colour-link;\n\ttext-decoration: underline;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-colour-button-tertiary--hover;\n\t\tcolor: $ontario-button-bg-primary--hover;\n\t\ttext-decoration: underline;\n\t}\n\n\t&:focus {\n\t\tbackground-color: colours.$ontario-colour-button-tertiary--hover;\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t\ttext-decoration: underline;\n\t\ttransition:\n\t\t\tbackground-color 0.2s ease-out,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-button-tertiary--active;\n\t\tcolor: colours.$ontario-colour-link--active;\n\t\ttext-decoration: underline;\n\t\ttransition:\n\t\t\tbackground-color 0s,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-link;\n\t}\n}\n\n.ontario-button--internalThemeDark {\n\tbackground-color: colours.$ontario-colour-black;\n\tborder: globalVariables.$border-size-standard solid colours.$ontario-colour-white;\n\tcolor: colours.$ontario-colour-white;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t}\n\n\t&:focus {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t\ttransition:\n\t\t\tbackground-color 0.2s ease-out,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t\ttransition:\n\t\t\tbackground-color 0s,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-link;\n\t}\n}\n","import { Component, Prop, Element, h, Watch, State, AttachInternals } from '@stencil/core';\n\nimport { Button } from './button.interface';\nimport { ButtonType, ButtonTypes, HtmlType, HtmlTypes } from './ontario-button.types';\n\nimport { validatePropExists, validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-button',\n\tstyleUrl: 'ontario-button.scss',\n\tshadow: true,\n\tformAssociated: true,\n})\nexport class OntarioButton implements Button {\n\t@Element() host: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\t/*\n\t The type of button to render.\n\t \n\t If no type is passed, it will default to 'secondary'.\n\t /\n\t@Prop() type: ButtonType = 'secondary';\n\n\t/\n\t The native HTML button type the button should use.\n\t \n\t If no htmlType is passed, it will default to 'button'.\n\t /\n\t@Prop() htmlType: HtmlType = 'button';\n\n\t/\n\t Text to be displayed within the button. This will override the text provided through the host element textContent.\n\t \n\t @example\n\t * <ontario-button label=\"Label Text\">Text</ontario-button>\n\t \n\t The resulting button will have the label `\"Label Text\"`.\n\t /\n\t@Prop() label?: string;\n\n\t/\n\t Provides more context as to what the button interaction is doing. This should only be used for accessibility purposes, if the button interaction requires more description than what the text provides.\n\t \n\t This is optional.\n\t \n\t @example\n\t * <ontario-button aria-label-text=\"Click button to open map\">Open</ontario button>\n\t /\n\t@Prop({ mutable: true }) ariaLabelText?: string;\n\n\t/\n\t The unique identifier of the button. This is optional - if no ID is passed, one will be generated.\n\t /\n\t@Prop({ mutable: true }) elementId?: string;\n\n\t/\n\t Mutable variable, for internal use only.\n\t * Set the button's type depending on validation result.\n\t /\n\t@State() private typeState: string;\n\n\t/\n\t Mutable variable, for internal use only.\n\t * Set the native HTML button type depending on validation result.\n\t /\n\t@State() private htmlTypeState: string;\n\n\t@State() private labelState: string;\n\n\t/\n\t A reference to the internal button element.\n\t /\n\n\tprivate buttonRef: HTMLButtonElement;\n\n\t/\n\t * Watch for changes to the `label` property for validation purposes.\n\t \n\t If no `label` prop is provided, the `label` prop will be set to the host element textContent (if it exists).\n\t /\n\t@Watch('label')\n\tprivate updateLabelContent() {\n\t\tthis.labelState = this.label ?? this.host.textContent ?? '';\n\t\tthis.validateLabelContent(this.labelState);\n\t}\n\n\t/\n\t Watch for changes to the `type` property for validation purposes.\n\t \n\t If the user input doesn't match one of the array values then `type` will be set to its default (`secondary`).\n\t * If a match is found in one of the array values then `type` will be set to the matching array key value.\n\t /\n\t@Watch('type')\n\tvalidateType() {\n\t\tconst isValid = validateValueAgainstArray(this.type, ButtonTypes);\n\t\tthis.typeState = isValid ? this.type : this.warnDefaultType();\n\t}\n\n\t/\n\t Watch for changes to the `htmlType` property for validation purposes.\n\t \n\t If the user input doesn't match one of the array values then `htmlType` will be set to its default (`submit`).\n\t * If a match is found in one of the array values then `htmlType` will be set to the matching array key value.\n\t /\n\t@Watch('htmlType')\n\tvalidateHtmlType() {\n\t\tconst isValid = validateValueAgainstArray(this.htmlType, HtmlTypes);\n\t\tthis.htmlTypeState = isValid ? this.htmlType : this.warnDefaultHtmlType();\n\t}\n\n\t/\n\t Print the missing `label` prop warning message\n\t /\n\tvalidateLabelContent(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(' label ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-button> ')\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 Print the invalid `type` prop warning message\n\t * @returns default type (secondary)\n\t /\n\tprivate warnDefaultType(): ButtonType {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' type ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-button> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' primary, secondary, or tertiary ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' secondary ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'secondary';\n\t}\n\n\t/\n\t Print the invalid `htmlType` warning message\n\t * @returns default htmlType (button)\n\t /\n\tprivate warnDefaultHtmlType(): HtmlType {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' htmlType ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-button> ')\n\t\t\t.addRegularText('was set to an invalid htmlType; only')\n\t\t\t.addMonospaceText(' button, reset, or submit ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' button ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'button';\n\t}\n\n\t/\n\t @returns the classes of the button based of the button's `type`.\n\t /\n\tprivate getClass() {\n\t\treturn `ontario-button ontario-button--${this.typeState}`;\n\t}\n\n\tpublic getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\t/\n\t Set `buttonId`, `label`, and `ariaLabel` using internal component logic.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.updateLabelContent();\n\t\tthis.validateHtmlType();\n\t\tthis.validateType();\n\t\tthis.ariaLabelText = this.ariaLabelText ?? this.labelState;\n\t}\n\n\tcomponentDidLoad() {\n\t\t// Used to help load translations for any slots + text content passed in by the user.\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.updateLabelContent();\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\n\t\t// Add a click event listener to handle submitting a form\n\t\tif (this.htmlTypeState === 'submit') {\n\t\t\tthis.buttonRef.addEventListener('click', () => {\n\t\t\t\tconst { form } = this.internals;\n\t\t\t\tform?.requestSubmit();\n\t\t\t});\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<button\n\t\t\t\tref={(el) => (this.buttonRef = el as HTMLButtonElement)}\n\t\t\t\ttype={this.htmlTypeState}\n\t\t\t\tclass={this.getClass()}\n\t\t\t\taria-label={this.ariaLabelText}\n\t\t\t\tid={this.getId()}\n\t\t\t>\n\t\t\t\t{this.labelState}\n\t\t\t</button>\n\t\t);\n\t}\n}\n"],"version":3}