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

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

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 (2351) hide show

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

@@ -1,29 +1,49 @@
-import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H } from './p-846438ed.js';
 import {
 	i as isValidHeadingLevel,
 	H as HeadingContentTypes,
 	a as isValidHighlightColour,
 	g as generateCalloutAside,
-} from './callout-aside-helpers.js';
-import { a as validateValueAgainstArray } from './validation-functions.js';
-import { C as ConsoleMessageClass } from './console-message.js';
+} from './p-7b0a81fd.js';
+import { a as validateValueAgainstArray } from './p-edb765a1.js';
+import { C as ConsoleMessageClass } from './p-b2019a19.js';
 const ontarioAsideCss =
 	'@charset "UTF-8";h6,.ontario-h6,h5,.ontario-h5,h4,.ontario-h4,h3,.ontario-h3,h2,.ontario-h2,h1,.ontario-h1{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif}h1,.ontario-h1{font-size:2rem;letter-spacing:0.04rem;line-height:1.29;margin:2.5rem 0 1.5rem 0;max-width:70rem}@media screen and (min-width: 40em){h1,.ontario-h1{font-size:2.5rem;letter-spacing:0.04rem;line-height:1.2}}h2,.ontario-h2{font-size:1.6875rem;letter-spacing:0.03rem;line-height:1.37;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h2,.ontario-h2{font-size:2.0625rem;letter-spacing:0.02rem;line-height:1.33}}h3,.ontario-h3{font-size:1.4375rem;letter-spacing:0.02rem;line-height:1.39;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h3,.ontario-h3{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.43}}h4,.ontario-h4{font-size:1.25rem;letter-spacing:0.03rem;line-height:1.5;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h4,.ontario-h4{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}h5,.ontario-h5{font-size:1.125rem;letter-spacing:0.03rem;line-height:1.56;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h5,.ontario-h5{font-size:1.1875rem;letter-spacing:0.025rem;line-height:1.5}}h6,.ontario-h6{font-size:1rem;line-height:1.56;letter-spacing:0.03rem;max-width:48rem;margin:0 0 0.75rem 0}@media screen and (min-width: 40em){h6,.ontario-h6{font-size:1rem;letter-spacing:0.025rem;line-height:1.5}}.ontario-lead-statement{font-size:1.25rem;line-height:1.6;max-width:70rem}@media screen and (min-width: 40em){.ontario-lead-statement{font-size:1.375rem}}html{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem}body{font-size:1rem;line-height:1.6;background-color:#FFFFFF;color:#1a1a1a;margin:0}p{font-size:inherit;margin-bottom:1.25rem;text-rendering:optimizeLegibility;margin:0 0 1.5rem 0}cite{font-style:italic;line-height:inherit}strong{font-weight:700;line-height:inherit}*,*::before,*::after{box-sizing:inherit}main p,main p:not(.ontario-lead-statement),main dd,main li{max-width:48rem}hr{border:0;padding:0;margin:2.5rem 0;border-bottom:4px solid #cccccc}hr.ontario-hr--dark{border-bottom:4px solid #1a1a1a}a{color:#0066CC;text-decoration:underline}a:visited{color:#551A8B}a:hover{color:#00478F}a:active{color:#002142}a:focus{-moz-box-shadow:0 0 0 4px #009ADB;-webkit-box-shadow:0 0 0 4px #009ADB;box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:all 0.1s ease-in-out}p{margin:0 0 1.5rem 0}p+h1,p+h2,p+h3,p+h4,p+h5,p+h6,ul+h1,ul+h2,ul+h3,ul+h4,ul+h5,ul+h6,ol+h1,ol+h2,ol+h3,ol+h4,ol+h5,ol+h6,h1+h2,h2+h3,h3+h4,h4+h5,h5+h6{margin-top:2rem}p code,td code,li code{line-height:2.25rem}input[type=text],input[type=number],input[type=email],input[type=date],input[type=color],input[type=search],input[type=tel],textarea{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}input[type=checkbox]+label,input[type=radio]+label{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400;margin-left:0;margin-right:0}fieldset{border:0;margin:0;padding:0;page-break-inside:avoid}legend,label{display:block;margin:0}select{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}ul,ol{padding:0}ul{margin-left:2rem}ul li{padding:0 0 0.75rem 0}ol{margin-left:1.75rem}ol li{padding:0 0 0.75rem 0.25rem}ul li:last-child,ol li:last-child{padding-bottom:0}ul[class*=columns-] li:last-child,ol[class*=columns-] li:last-child{padding-bottom:0.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 2rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 1.75rem}p+ul,p+ol{margin-top:-0.75rem}@media screen and (min-width: 40em){ul{margin:0.5rem 0 1.5rem 3rem}ol{margin:0.5rem 0 1.5rem 2.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 3rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 2.75rem}}.ontario-aside{border-left:0.25rem solid #367A76;padding:1.5rem;margin:2rem 0 2.5rem 2rem}.ontario-aside *{max-width:48rem}.ontario-aside *:last-child{margin-bottom:0.5rem}@media screen and (max-width: 40em){.ontario-aside .ontario-aside{margin:2rem 0 2.5rem 1rem}}.ontario-aside__title{margin:0 0 1rem}.ontario-border-highlight--teal{border-color:#367A76 !important}.ontario-border-highlight--gold{border-color:#86743D !important}.ontario-border-highlight--yellow{border-color:#8A600D !important}.ontario-border-highlight--taupe{border-color:#7B725C !important}.ontario-border-highlight--green{border-color:#2B8737 !important}.ontario-border-highlight--lime{border-color:#5F8129 !important}.ontario-border-highlight--sky{border-color:#1080A6 !important}.ontario-border-highlight--blue{border-color:#0369ac !important}.ontario-border-highlight--purple{border-color:#92278F !important}';
 const OntarioAsideStyle0 = ontarioAsideCss;
 const OntarioAside$1 = /*@__PURE__*/ proxyCustomElement(
-	class OntarioAside extends HTMLElement {
+	class OntarioAside extends H {
 		constructor() {
 			super();
 			this.__registerHost();
 			this.__attachShadow();
-			this.headingType = undefined;
-			this.headingContentType = 'string';
-			this.headingContent = undefined;
-			this.content = undefined;
-			this.highlightColour = 'teal';
 		}
+		/**
+		 * The heading level of the aside heading.
+		 */
+		headingType;
+		/**
+		 * The type of the heading content. If no prop is passed, it will default to string.
+		 */
+		headingContentType = 'string';
+		/**
+		 * Text or HTML to be displayed as the heading of the aside. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.
+		 */
+		headingContent;
+		/**
+		 * Optional text to be displayed as the content for the aside component. If a string is passed, it will automatically be nested in a paragraph tag.
+		 *
+		 * HTML content can also be passed as the child/children of the aside component if additional/different elements for the content are needed.
+		 *
+		 * @example
+		 * <ontario-aside headingType='h3' headingContent='This is the aside heading'><p>This is the first sentence of the aside content.</p><p>This is the second sentence of the aside content.</p></ontario-aside>
+		 */
+		content;
+		/**
+		 * Optional prop to choose the border colour of the aside. If none is passed, the default colour will be teal.
+		 */
+		highlightColour = 'teal';
 		/**
 		 * Watch for changes to the `headingType` prop.
 		 *

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

	@@ -1 +1 @@
1	- {"file":"ontario-aside.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,yzJAAyzJ,CAAC;AACl1J,2BAAe,eAAe;;MCqBjBA,cAAY~~;;;;;;kCAS0C~~,QAAQ~~;;;+BAoBN~~,MAAM~~;;;;;;;IAQ1E~~,mBAAmB;QAClB,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE;YACvB,IAAI,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC;gBAAE,OAAO,IAAI,CAAC,WAAW,CAAC;YAEnE,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO,OAAO;iBACZ,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,gBAAgB,IAAI,CAAC,WAAW,GAAG,CAAC;iBACrD,cAAc,CAAC,KAAK,CAAC;iBACrB,gBAAgB,CAAC,mBAAmB,CAAC;iBACrC,cAAc,CAAC,4FAA4F,CAAC;iBAC5G,YAAY,EAAE,CAAC;SACjB;KACD;;;;;;;IASD,0BAA0B;QACzB,MAAM,OAAO,GAAG,yBAAyB,CAAC,IAAI,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,CAAC;QACxF,IAAI,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,kBAAkB,CAAC;SAC/B;aAAM;YACN,OAAO,IAAI,CAAC,eAAe,EAAE,CAAC;SAC9B;KACD;;;;;;IAQD,uBAAuB;QACtB,IAAI,IAAI,CAAC,eAAe,EAAE;YACzB,IAAI,sBAAsB,CAAC,IAAI,CAAC,eAAe,CAAC;gBAAE,OAAO,IAAI,CAAC,eAAe,CAAC;iBACzE;gBACJ,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;gBAC1C,OAAO;qBACL,kBAAkB,EAAE;qBACpB,gBAAgB,CAAC,oBAAoB,IAAI,CAAC,eAAe,GAAG,CAAC;qBAC7D,cAAc,CAAC,KAAK,CAAC;qBACrB,gBAAgB,CAAC,mBAAmB,CAAC;qBACrC,cAAc,CACd,oGAAoG,CACpG;qBACA,YAAY,EAAE,CAAC;aACjB;SACD;;QAGD,OAAO,MAAM,CAAC;KACd;;;;;IAMO,eAAe;QACtB,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;QAC1C,OAAO;aACL,kBAAkB,EAAE;aACpB,gBAAgB,CAAC,sBAAsB,CAAC;aACxC,cAAc,CAAC,IAAI,CAAC;aACpB,gBAAgB,CAAC,mBAAmB,CAAC;aACrC,cAAc,CAAC,kCAAkC,CAAC;aAClD,gBAAgB,CAAC,kBAAkB,CAAC;aACpC,cAAc,CAAC,iCAAiC,CAAC;aACjD,gBAAgB,CAAC,UAAU,CAAC;aAC5B,cAAc,CAAC,aAAa,CAAC;aAC7B,YAAY,EAAE,CAAC;QACjB,QAAQ,IAAI,CAAC,kBAAkB,GAAG,QAAQ,EAAE;KAC5C;IAED,iBAAiB;QAChB,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,0BAA0B,EAAE,CAAC;KAClC;IAED,MAAM;QACL,OAAO,oBAAoB,CAC1B,OAAO,EACP,IAAI,CAAC,kBAAkB,EACvB,IAAI,CAAC,WAAW,EAChB,IAAI,CAAC,cAAc,EACnB,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,eAAe,CACpB,CAAC;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioAside"],"sources":["src/components/ontario-aside/ontario-aside.scss?tag=ontario-aside&encapsulation=shadow","src/components/ontario-aside/ontario-aside.tsx"],"sourcesContent":["@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/global.variables' as globalVariables;\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/4-elements/global.elements';\n\n.ontario-aside {\n\tborder-left: spacing.$spacing-1 solid colours.$ontario-colour-dark-teal;\n\tpadding: spacing.$spacing-5;\n\tmargin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-6;\n\n\t* {\n\t\tmax-width: globalVariables.$standard-width;\n\n\t\t&:last-child {\n\t\t\tmargin-bottom: spacing.$spacing-2;\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t.ontario-aside {\n\t\t\tmargin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-4;\n\t\t}\n\t}\n}\n\n.ontario-aside__title {\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4;\n}\n\n$aside-highlight-colours: (\n\t'teal': colours.$ontario-colour-dark-teal,\n\t'gold': colours.$ontario-colour-dark-gold,\n\t'yellow': colours.$ontario-colour-dark-yellow,\n\t'taupe': colours.$ontario-colour-dark-taupe,\n\t'green': colours.$ontario-colour-dark-green,\n\t'lime': colours.$ontario-colour-dark-lime,\n\t'sky': colours.$ontario-colour-dark-sky,\n\t'blue': colours.$ontario-colour-dark-blue,\n\t'purple': colours.$ontario-colour-dark-purple,\n);\n\n@each $colour-name, $hex in $aside-highlight-colours {\n\t.ontario-border-highlight--#{$colour-name} {\n\t\tborder-color: $hex !important;\n\t}\n}\n","import { Component, Prop, Watch } from '@stencil/core';\n\nimport {\n\tCalloutAside,\n\tHeadingLevelOptions,\n\tHeadingContentType,\n\tHeadingContentTypes,\n\tHighlightColourOptions,\n} from '../../utils/components/callout-aside/callout-aside.interface';\nimport {\n\tisValidHighlightColour,\n\tgenerateCalloutAside,\n\tisValidHeadingLevel,\n} from '../../utils/components/callout-aside/callout-aside-helpers';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-aside',\n\tstyleUrl: 'ontario-aside.scss',\n\tshadow: true,\n})\nexport class OntarioAside implements CalloutAside {\n\t/*\n\t The heading level of the aside heading.\n\t /\n\t@Prop({ mutable: true }) headingType?: 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\t@Prop({ mutable: true }) headingContentType: HeadingContentType = 'string';\n\n\t/\n\t Text or HTML to be displayed as the heading of the aside. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.\n\t /\n\t@Prop() headingContent?: string;\n\n\t/\n\t Optional text to be displayed as the content for the 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 aside component if additional/different elements for the content are needed.\n\t \n\t @example\n\t * <ontario-aside headingType='h3' headingContent='This is the aside heading'><p>This is the first sentence of the aside content.</p><p>This is the second sentence of the aside content.</p></ontario-aside>\n\t /\n\t@Prop() content?: string;\n\n\t/\n\t Optional prop to choose the border colour of the aside. If none is passed, the default colour will be teal.\n\t /\n\t@Prop({ mutable: true }) highlightColour?: HighlightColourOptions = 'teal';\n\n\t/\n\t Watch for changes to the `headingType` prop.\n\t \n\t This is for validation purposes to make sure the `headingType` matches one of the `HeadingLevelOptions`.\n\t /\n\t@Watch('headingType')\n\tvalidateHeadingType() {\n\t\tif (!!this.headingType) {\n\t\t\tif (isValidHeadingLevel(this.headingType)) return this.headingType;\n\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\treturn message\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(` headingType ${this.headingType} `)\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t\t.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/\n\t Watch for changes in the `headingContentType` prop for validation purposes.\n\t \n\t If the user input doesn't match one of the array values then `headingContentType` will be set to its default (`string`).\n\t * If a match is found in one of the array values then `headingContentType` will be set to the matching array key value.\n\t /\n\t@Watch('headingContentType')\n\tvalidateHeadingContentType() {\n\t\tconst isValid = validateValueAgainstArray(this.headingContentType, HeadingContentTypes);\n\t\tif (isValid) {\n\t\t\treturn this.headingContentType;\n\t\t} else {\n\t\t\treturn this.warnDefaultType();\n\t\t}\n\t}\n\n\t/\n\t Watch for changes to the `highlightColour` prop.\n\t \n\t If no `highlightColour` is passed, or if the `highlightColour` does not match the `highlightColour` options, a default value of 'teal' will be applied.\n\t /\n\t@Watch('highlightColour')\n\tvalidateHighlightColour() {\n\t\tif (this.highlightColour) {\n\t\t\tif (isValidHighlightColour(this.highlightColour)) return this.highlightColour;\n\t\t\telse {\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(` highlightColour ${this.highlightColour} `)\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t\t\t.addRegularText(\n\t\t\t\t\t\t'does not match one of the valid highlightColour types. A default colour of `teal` will be applied.',\n\t\t\t\t\t)\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\n\t\t// if no highlight colour is passed, return 'teal'\n\t\treturn 'teal';\n\t}\n\n\t/\n\t Print the invalid `type` warning message.\n\t * @returns default type ('string')\n\t */\n\tprivate warnDefaultType() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' headingContentType ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' string or html ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' string ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn (this.headingContentType = 'string');\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateHighlightColour();\n\t\tthis.validateHeadingType();\n\t\tthis.validateHeadingContentType();\n\t}\n\n\trender() {\n\t\treturn generateCalloutAside(\n\t\t\t'aside',\n\t\t\tthis.headingContentType,\n\t\t\tthis.headingType,\n\t\t\tthis.headingContent,\n\t\t\tthis.content,\n\t\t\tthis.highlightColour,\n\t\t);\n\t}\n}\n"],"version":3}
1	+ {"file":"ontario-aside.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,yzJAAyzJ,CAAC;AACl1J,2BAAe,eAAe;;MCqBjBA,cAAY;;;;;;;;;IAIC,WAAW,CAAuB;;;;IAKlC,kBAAkB,GAAuB,QAAQ,CAAC;;;;IAKnE,cAAc,CAAU;;;;;;;;;IAUxB,OAAO,CAAU;;;;IAKA,eAAe,GAA4B,MAAM,CAAC;;;;;;IAQ3E,mBAAmB;QAClB,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE;YACvB,IAAI,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC;gBAAE,OAAO,IAAI,CAAC,WAAW,CAAC;YAEnE,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO,OAAO;iBACZ,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,gBAAgB,IAAI,CAAC,WAAW,GAAG,CAAC;iBACrD,cAAc,CAAC,KAAK,CAAC;iBACrB,gBAAgB,CAAC,mBAAmB,CAAC;iBACrC,cAAc,CAAC,4FAA4F,CAAC;iBAC5G,YAAY,EAAE,CAAC;SACjB;KACD;;;;;;;IASD,0BAA0B;QACzB,MAAM,OAAO,GAAG,yBAAyB,CAAC,IAAI,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,CAAC;QACxF,IAAI,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,kBAAkB,CAAC;SAC/B;aAAM;YACN,OAAO,IAAI,CAAC,eAAe,EAAE,CAAC;SAC9B;KACD;;;;;;IAQD,uBAAuB;QACtB,IAAI,IAAI,CAAC,eAAe,EAAE;YACzB,IAAI,sBAAsB,CAAC,IAAI,CAAC,eAAe,CAAC;gBAAE,OAAO,IAAI,CAAC,eAAe,CAAC;iBACzE;gBACJ,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;gBAC1C,OAAO;qBACL,kBAAkB,EAAE;qBACpB,gBAAgB,CAAC,oBAAoB,IAAI,CAAC,eAAe,GAAG,CAAC;qBAC7D,cAAc,CAAC,KAAK,CAAC;qBACrB,gBAAgB,CAAC,mBAAmB,CAAC;qBACrC,cAAc,CACd,oGAAoG,CACpG;qBACA,YAAY,EAAE,CAAC;aACjB;SACD;;QAGD,OAAO,MAAM,CAAC;KACd;;;;;IAMO,eAAe;QACtB,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;QAC1C,OAAO;aACL,kBAAkB,EAAE;aACpB,gBAAgB,CAAC,sBAAsB,CAAC;aACxC,cAAc,CAAC,IAAI,CAAC;aACpB,gBAAgB,CAAC,mBAAmB,CAAC;aACrC,cAAc,CAAC,kCAAkC,CAAC;aAClD,gBAAgB,CAAC,kBAAkB,CAAC;aACpC,cAAc,CAAC,iCAAiC,CAAC;aACjD,gBAAgB,CAAC,UAAU,CAAC;aAC5B,cAAc,CAAC,aAAa,CAAC;aAC7B,YAAY,EAAE,CAAC;QACjB,QAAQ,IAAI,CAAC,kBAAkB,GAAG,QAAQ,EAAE;KAC5C;IAED,iBAAiB;QAChB,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,0BAA0B,EAAE,CAAC;KAClC;IAED,MAAM;QACL,OAAO,oBAAoB,CAC1B,OAAO,EACP,IAAI,CAAC,kBAAkB,EACvB,IAAI,CAAC,WAAW,EAChB,IAAI,CAAC,cAAc,EACnB,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,eAAe,CACpB,CAAC;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioAside"],"sources":["src/components/ontario-aside/ontario-aside.scss?tag=ontario-aside&encapsulation=shadow","src/components/ontario-aside/ontario-aside.tsx"],"sourcesContent":["@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/global.variables' as globalVariables;\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/4-elements/global.elements';\n\n.ontario-aside {\n\tborder-left: spacing.$spacing-1 solid colours.$ontario-colour-dark-teal;\n\tpadding: spacing.$spacing-5;\n\tmargin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-6;\n\n\t* {\n\t\tmax-width: globalVariables.$standard-width;\n\n\t\t&:last-child {\n\t\t\tmargin-bottom: spacing.$spacing-2;\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t.ontario-aside {\n\t\t\tmargin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-4;\n\t\t}\n\t}\n}\n\n.ontario-aside__title {\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4;\n}\n\n$aside-highlight-colours: (\n\t'teal': colours.$ontario-colour-dark-teal,\n\t'gold': colours.$ontario-colour-dark-gold,\n\t'yellow': colours.$ontario-colour-dark-yellow,\n\t'taupe': colours.$ontario-colour-dark-taupe,\n\t'green': colours.$ontario-colour-dark-green,\n\t'lime': colours.$ontario-colour-dark-lime,\n\t'sky': colours.$ontario-colour-dark-sky,\n\t'blue': colours.$ontario-colour-dark-blue,\n\t'purple': colours.$ontario-colour-dark-purple,\n);\n\n@each $colour-name, $hex in $aside-highlight-colours {\n\t.ontario-border-highlight--#{$colour-name} {\n\t\tborder-color: $hex !important;\n\t}\n}\n","import { Component, Prop, Watch } from '@stencil/core';\n\nimport {\n\tCalloutAside,\n\tHeadingLevelOptions,\n\tHeadingContentType,\n\tHeadingContentTypes,\n\tHighlightColourOptions,\n} from '../../utils/components/callout-aside/callout-aside.interface';\nimport {\n\tisValidHighlightColour,\n\tgenerateCalloutAside,\n\tisValidHeadingLevel,\n} from '../../utils/components/callout-aside/callout-aside-helpers';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-aside',\n\tstyleUrl: 'ontario-aside.scss',\n\tshadow: true,\n})\nexport class OntarioAside implements CalloutAside {\n\t/*\n\t The heading level of the aside heading.\n\t /\n\t@Prop({ mutable: true }) headingType?: 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\t@Prop({ mutable: true }) headingContentType: HeadingContentType = 'string';\n\n\t/\n\t Text or HTML to be displayed as the heading of the aside. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.\n\t /\n\t@Prop() headingContent?: string;\n\n\t/\n\t Optional text to be displayed as the content for the 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 aside component if additional/different elements for the content are needed.\n\t \n\t @example\n\t * <ontario-aside headingType='h3' headingContent='This is the aside heading'><p>This is the first sentence of the aside content.</p><p>This is the second sentence of the aside content.</p></ontario-aside>\n\t /\n\t@Prop() content?: string;\n\n\t/\n\t Optional prop to choose the border colour of the aside. If none is passed, the default colour will be teal.\n\t /\n\t@Prop({ mutable: true }) highlightColour?: HighlightColourOptions = 'teal';\n\n\t/\n\t Watch for changes to the `headingType` prop.\n\t \n\t This is for validation purposes to make sure the `headingType` matches one of the `HeadingLevelOptions`.\n\t /\n\t@Watch('headingType')\n\tvalidateHeadingType() {\n\t\tif (!!this.headingType) {\n\t\t\tif (isValidHeadingLevel(this.headingType)) return this.headingType;\n\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\treturn message\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(` headingType ${this.headingType} `)\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t\t.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/\n\t Watch for changes in the `headingContentType` prop for validation purposes.\n\t \n\t If the user input doesn't match one of the array values then `headingContentType` will be set to its default (`string`).\n\t * If a match is found in one of the array values then `headingContentType` will be set to the matching array key value.\n\t /\n\t@Watch('headingContentType')\n\tvalidateHeadingContentType() {\n\t\tconst isValid = validateValueAgainstArray(this.headingContentType, HeadingContentTypes);\n\t\tif (isValid) {\n\t\t\treturn this.headingContentType;\n\t\t} else {\n\t\t\treturn this.warnDefaultType();\n\t\t}\n\t}\n\n\t/\n\t Watch for changes to the `highlightColour` prop.\n\t \n\t If no `highlightColour` is passed, or if the `highlightColour` does not match the `highlightColour` options, a default value of 'teal' will be applied.\n\t /\n\t@Watch('highlightColour')\n\tvalidateHighlightColour() {\n\t\tif (this.highlightColour) {\n\t\t\tif (isValidHighlightColour(this.highlightColour)) return this.highlightColour;\n\t\t\telse {\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(` highlightColour ${this.highlightColour} `)\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t\t\t.addRegularText(\n\t\t\t\t\t\t'does not match one of the valid highlightColour types. A default colour of `teal` will be applied.',\n\t\t\t\t\t)\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\n\t\t// if no highlight colour is passed, return 'teal'\n\t\treturn 'teal';\n\t}\n\n\t/\n\t Print the invalid `type` warning message.\n\t * @returns default type ('string')\n\t */\n\tprivate warnDefaultType() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' headingContentType ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' string or html ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' string ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn (this.headingContentType = 'string');\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateHighlightColour();\n\t\tthis.validateHeadingType();\n\t\tthis.validateHeadingContentType();\n\t}\n\n\trender() {\n\t\treturn generateCalloutAside(\n\t\t\t'aside',\n\t\t\tthis.headingContentType,\n\t\t\tthis.headingType,\n\t\t\tthis.headingContent,\n\t\t\tthis.content,\n\t\t\tthis.highlightColour,\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/ontario-back-to-top.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { v as validateLanguage } from './validation-functions.js';
-import { t as translations } from './global.i18n.js';
+import { p as proxyCustomElement, H, h } from './p-846438ed.js';
+import { v as validateLanguage } from './p-edb765a1.js';
+import { t as translations } from './p-a5331e15.js';
 const OntarioIconArrowUp = `<svg class="ontario-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>
 `;
@@ -10,16 +10,23 @@ const ontarioBackToTopCss =
 const OntarioBackToTopStyle0 = ontarioBackToTopCss;
 const OntarioBackToTop$1 = /*@__PURE__*/ proxyCustomElement(
-	class OntarioBackToTop extends HTMLElement {
+	class OntarioBackToTop extends H {
 		constructor() {
 			super();
 			this.__registerHost();
 			this.__attachShadow();
-			this.language = undefined;
-			this.translations = translations;
-			this.displayBackToTop = false;
-			this.scrollYValue = 200;
 		}
+		get element() {
+			return this;
+		}
+		/**
+		 * The language of the component.
+		 * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language prop is passed, it will default to English.
+		 */
+		language;
+		translations = translations;
+		displayBackToTop = false;
+		scrollYValue = 200;
 		/**
 		 * This listens for the window Y scroll value to be above 200 pixels. Once it is, the Back to Top button will toggle the `displayBackToTop` state which will set an active class to control the components' visibility.
 		 */
@@ -63,9 +70,6 @@ const OntarioBackToTop$1 = /*@__PURE__*/ proxyCustomElement(
 				this.translations.backToTop.top[`${this.language}`],
 			);
 		}
-		get element() {
-			return this;
-		}
 		static get style() {
 			return OntarioBackToTopStyle0;
 		}

package/dist/components/ontario-back-to-top.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ontario-back-to-top.js","mappings":";;;;;;;AAAA,MAAM,mBAAmB,GAAG,kgEAAkgE,CAAC;AAC/hE,+BAAe,mBAAmB;;MCYrBA,kBAAgB~~;;;;;;4BASC~~,YAAY;~~gCAEI~~,KAAK;~~4BAEV~~,GAAG~~;;;;;IAM3C~~,mBAAmB;QAClB,IAAI,CAAC,gBAAgB,GAAG,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC;KAC3D;;;;IAMD,oBAAoB,CAAC,KAA4B;QAChD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YACnB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;SACxC;KACD;IAGD,2BAA2B,CAAC,KAA4B;QACvD,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;KACxC;;;;IAKO,WAAW;QAClB,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;KACzD;IAED,iBAAiB;QAChB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAChD;IAED,MAAM;QACL,QACC,+DACC,KAAK,EAAE,IAAI,CAAC,gBAAgB,GAAG,4BAA4B,GAAG,qBAAqB,EACnF,OAAO,EAAE,IAAI,CAAC,WAAW,gBACb,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,IAErE,4EAAkB,MAAM,EAAC,SAAS,EAAE,kBAAkB,GAAS,EAC9D,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAC5C,EACR;KACF~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["OntarioBackToTop"],"sources":["src/components/ontario-back-to-top/ontario-back-to-top.scss?tag=ontario-back-to-top&encapsulation=shadow","src/components/ontario-back-to-top/ontario-back-to-top.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/~~typography~~.variables' as ~~typography~~;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\n\n$ontario-icon-margin-top: 0.125rem;\n\n// Colour variables\n$ontario-colour-back-to-top-background: #e6e6e6;\n$ontario-colour-back-to-top--active-background: #b2b2b2;\n\n.ontario-back-to-top,\n// Fractal component style coverage ↓\n.ontario-back-to-top--default {\n\tposition: fixed;\n\tbottom: 5%;\n\tright: 2%;\n\tvisibility: hidden;\n\topacity: 0;\n\ttransition: 0.1s ease-in-out;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\theight: globalFunctions.px-to-rem(48);\n\tpadding: spacing.$spacing-2 spacing.$spacing-4 spacing.$spacing-2 spacing.$spacing-3;\n\tbackground: $ontario-colour-back-to-top-background;\n\tborder: globalFunctions.px-to-rem(2) solid colours.$ontario-colour-white;\n\tborder-radius: globalVariables.$global-radius;\n\tbox-shadow: 0 globalFunctions.px-to-rem(2) globalFunctions.px-to-rem(4) rgba(colours.$ontario-colour-black, 0.6);\n\tbox-sizing: border-box;\n\tcolor: colours.$ontario-colour-black;\n\tline-height: globalFunctions.px-to-rem(20);\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tfont-family: ~~typography~~.$ontario-font-open-sans;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tz-index: 10000;\n\tcursor: pointer;\n\n\t.ontario-icon {\n\t\tmargin: $ontario-icon-margin-top spacing.$spacing-2 spacing.$spacing-0 spacing.$spacing-0;\n\t\twidth: globalFunctions.px-to-rem(32);\n\t\theight: globalFunctions.px-to-rem(32);\n\t}\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-20;\n\t}\n\n\t&:focus {\n\t\tbackground-color: $ontario-colour-back-to-top-background;\n\t\tbox-shadow: 0 0 0 globalFunctions.px-to-rem(4) colours.$ontario-colour-focus,\n\t\t\t0 globalFunctions.px-to-rem(3) globalFunctions.px-to-rem(5) globalFunctions.px-to-rem(3) rgba(0, 0, 0, 0.6);\n\t\toutline: globalFunctions.px-to-rem(4) solid transparent;\n\t\ttransition: 0.1s ease-in-out;\n\t}\n\n\t&:active {\n\t\tbackground-color: $ontario-colour-back-to-top--active-background;\n\t\tbox-shadow: 0 0 0 globalFunctions.px-to-rem(4) colours.$ontario-colour-focus,\n\t\t\t0 globalFunctions.px-to-rem(5) globalFunctions.px-to-rem(7) globalFunctions.px-to-rem(3) rgba(0, 0, 0, 0.6);\n\t\toutline: globalFunctions.px-to-rem(4) solid transparent;\n\t\ttransition~~: background~~-color 0s~~, focusPlaceholders~~.$ontario-focus-transition;\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\tflex-direction: column;\n\t\theight: globalFunctions.px-to-rem(76);\n\t\tpadding: globalFunctions.px-to-rem(6) spacing.$spacing-3 globalFunctions.px-to-rem(9) spacing.$spacing-3;\n\n\t\t.ontario-icon {\n\t\t\tmargin: globalFunctions.px-to-rem(1) spacing.$spacing-0 spacing.$spacing-1 spacing.$spacing-0;\n\t\t\twidth: globalFunctions.px-to-rem(32);\n\t\t\theight: globalFunctions.px-to-rem(32);\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tdisplay: block;\n\t\tpadding: spacing.$spacing-1;\n\t\tfont-size: 0;\n\t\twidth: globalFunctions.px-to-rem(48);\n\t\theight: globalFunctions.px-to-rem(48);\n\n\t\t.ontario-icon {\n\t\t\tmargin: spacing.$spacing-2 spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-0;\n\n\t\t\t@-moz-document url-prefix() {\n\t\t\t\tmargin-top: $ontario-icon-margin-top;\n\t\t\t}\n\t\t}\n\t}\n\n\t&.active {\n\t\tvisibility: visible;\n\t\topacity: 1;\n\t}\n}\n","import { Component, h, Element, Prop, Listen, State } from '@stencil/core';\n\nimport OntarioIconArrowUp from '../ontario-icon/assets/ontario-icon-arrow-up.svg';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\n\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-back-to-top',\n\tstyleUrl: 'ontario-back-to-top.scss',\n\tshadow: true,\n})\nexport class OntarioBackToTop {\n\t@Element() element: HTMLElement;\n\n\t/*\n\t The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language prop is passed, it will default to English.\n\t /\n\t@Prop({ mutable: true }) language?: Language;\n\n\t@State() translations: any = translations;\n\n\t@State() private displayBackToTop: boolean = false;\n\n\t@State() private scrollYValue: number = 200;\n\n\t/\n\t This listens for the window Y scroll value to be above 200 pixels. Once it is, the Back to Top button will toggle the `displayBackToTop` state which will set an active class to control the components' visibility.\n\t /\n\t@Listen('scroll', { target: 'window' })\n\tshowBackToTopButton() {\n\t\tthis.displayBackToTop = window.scrollY > this.scrollYValue;\n\t}\n\n\t/\n\t This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.\n\t /\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t/\n\t Scroll to top functionality when the Back to Top button is clicked\n\t */\n\tprivate scrollToTop() {\n\t\twindow.scrollTo({ top: 0, left: 0, behavior: 'smooth' });\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<button\n\t\t\t\tclass={this.displayBackToTop ? `ontario-back-to-top active` : `ontario-back-to-top`}\n\t\t\t\tonClick={this.scrollToTop}\n\t\t\t\taria-label={this.translations.backToTop.ariaLabel[`${this.language}`]}\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\" innerHTML={OntarioIconArrowUp}></span>\n\t\t\t\t{this.translations.backToTop.top[`${this.language}`]}\n\t\t\t</button>\n\t\t);\n\t}\n}\n"],"version":3}
1	+ {"file":"ontario-back-to-top.js","mappings":";;;;;;;AAAA,MAAM,mBAAmB,GAAG,kgEAAkgE,CAAC;AAC/hE,+BAAe,mBAAmB;;MCYrBA,kBAAgB;;;;;;;;;;;IAOH,QAAQ,CAAY;IAEpC,YAAY,GAAQ,YAAY,CAAC;IAEzB,gBAAgB,GAAY,KAAK,CAAC;IAElC,YAAY,GAAW,GAAG,CAAC;;;;IAM5C,mBAAmB;QAClB,IAAI,CAAC,gBAAgB,GAAG,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC;KAC3D;;;;IAMD,oBAAoB,CAAC,KAA4B;QAChD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YACnB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;SACxC;KACD;IAGD,2BAA2B,CAAC,KAA4B;QACvD,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;KACxC;;;;IAKO,WAAW;QAClB,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;KACzD;IAED,iBAAiB;QAChB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAChD;IAED,MAAM;QACL,QACC,+DACC,KAAK,EAAE,IAAI,CAAC,gBAAgB,GAAG,4BAA4B,GAAG,qBAAqB,EACnF,OAAO,EAAE,IAAI,CAAC,WAAW,gBACb,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,IAErE,4EAAkB,MAAM,EAAC,SAAS,EAAE,kBAAkB,GAAS,EAC9D,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAC5C,EACR;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioBackToTop"],"sources":["src/components/ontario-back-to-top/ontario-back-to-top.scss?tag=ontario-back-to-top&encapsulation=shadow","src/components/ontario-back-to-top/ontario-back-to-top.tsx"],"sourcesContent":["@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\n\n$ontario-icon-margin-top: 0.125rem;\n\n// Colour variables\n$ontario-colour-back-to-top-background: #e6e6e6;\n$ontario-colour-back-to-top--active-background: #b2b2b2;\n\n.ontario-back-to-top,\n// Fractal component style coverage ↓\n.ontario-back-to-top--default {\n\tposition: fixed;\n\tbottom: 5%;\n\tright: 2%;\n\tvisibility: hidden;\n\topacity: 0;\n\ttransition: 0.1s ease-in-out;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\theight: globalFunctions.px-to-rem(48);\n\tpadding: spacing.$spacing-2 spacing.$spacing-4 spacing.$spacing-2 spacing.$spacing-3;\n\tbackground: $ontario-colour-back-to-top-background;\n\tborder: globalFunctions.px-to-rem(2) solid colours.$ontario-colour-white;\n\tborder-radius: globalVariables.$global-radius;\n\tbox-shadow: 0 globalFunctions.px-to-rem(2) globalFunctions.px-to-rem(4) rgba(colours.$ontario-colour-black, 0.6);\n\tbox-sizing: border-box;\n\tcolor: colours.$ontario-colour-black;\n\tline-height: globalFunctions.px-to-rem(20);\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tfont-family: fonts.$ontario-font-open-sans;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tz-index: 10000;\n\tcursor: pointer;\n\n\t.ontario-icon {\n\t\tmargin: $ontario-icon-margin-top spacing.$spacing-2 spacing.$spacing-0 spacing.$spacing-0;\n\t\twidth: globalFunctions.px-to-rem(32);\n\t\theight: globalFunctions.px-to-rem(32);\n\t}\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-20;\n\t}\n\n\t&:focus {\n\t\tbackground-color: $ontario-colour-back-to-top-background;\n\t\tbox-shadow:\n\t\t\t0 0 0 globalFunctions.px-to-rem(4) colours.$ontario-colour-focus,\n\t\t\t0 globalFunctions.px-to-rem(3) globalFunctions.px-to-rem(5) globalFunctions.px-to-rem(3) rgba(0, 0, 0, 0.6);\n\t\toutline: globalFunctions.px-to-rem(4) solid transparent;\n\t\ttransition: 0.1s ease-in-out;\n\t}\n\n\t&:active {\n\t\tbackground-color: $ontario-colour-back-to-top--active-background;\n\t\tbox-shadow:\n\t\t\t0 0 0 globalFunctions.px-to-rem(4) colours.$ontario-colour-focus,\n\t\t\t0 globalFunctions.px-to-rem(5) globalFunctions.px-to-rem(7) globalFunctions.px-to-rem(3) rgba(0, 0, 0, 0.6);\n\t\toutline: globalFunctions.px-to-rem(4) solid transparent;\n\t\ttransition:\n\t\t\tbackground-color 0s,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\tflex-direction: column;\n\t\theight: globalFunctions.px-to-rem(76);\n\t\tpadding: globalFunctions.px-to-rem(6) spacing.$spacing-3 globalFunctions.px-to-rem(9) spacing.$spacing-3;\n\n\t\t.ontario-icon {\n\t\t\tmargin: globalFunctions.px-to-rem(1) spacing.$spacing-0 spacing.$spacing-1 spacing.$spacing-0;\n\t\t\twidth: globalFunctions.px-to-rem(32);\n\t\t\theight: globalFunctions.px-to-rem(32);\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tdisplay: block;\n\t\tpadding: spacing.$spacing-1;\n\t\tfont-size: 0;\n\t\twidth: globalFunctions.px-to-rem(48);\n\t\theight: globalFunctions.px-to-rem(48);\n\n\t\t.ontario-icon {\n\t\t\tmargin: spacing.$spacing-2 spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-0;\n\n\t\t\t@-moz-document url-prefix() {\n\t\t\t\tmargin-top: $ontario-icon-margin-top;\n\t\t\t}\n\t\t}\n\t}\n\n\t&.active {\n\t\tvisibility: visible;\n\t\topacity: 1;\n\t}\n}\n","import { Component, h, Element, Prop, Listen, State } from '@stencil/core';\n\nimport OntarioIconArrowUp from '../ontario-icon/assets/ontario-icon-arrow-up.svg';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\n\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-back-to-top',\n\tstyleUrl: 'ontario-back-to-top.scss',\n\tshadow: true,\n})\nexport class OntarioBackToTop {\n\t@Element() element: HTMLElement;\n\n\t/*\n\t The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language prop is passed, it will default to English.\n\t /\n\t@Prop({ mutable: true }) language?: Language;\n\n\t@State() translations: any = translations;\n\n\t@State() private displayBackToTop: boolean = false;\n\n\t@State() private scrollYValue: number = 200;\n\n\t/\n\t This listens for the window Y scroll value to be above 200 pixels. Once it is, the Back to Top button will toggle the `displayBackToTop` state which will set an active class to control the components' visibility.\n\t /\n\t@Listen('scroll', { target: 'window' })\n\tshowBackToTopButton() {\n\t\tthis.displayBackToTop = window.scrollY > this.scrollYValue;\n\t}\n\n\t/\n\t This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.\n\t /\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t/\n\t Scroll to top functionality when the Back to Top button is clicked\n\t */\n\tprivate scrollToTop() {\n\t\twindow.scrollTo({ top: 0, left: 0, behavior: 'smooth' });\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<button\n\t\t\t\tclass={this.displayBackToTop ? `ontario-back-to-top active` : `ontario-back-to-top`}\n\t\t\t\tonClick={this.scrollToTop}\n\t\t\t\taria-label={this.translations.backToTop.ariaLabel[`${this.language}`]}\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\" innerHTML={OntarioIconArrowUp}></span>\n\t\t\t\t{this.translations.backToTop.top[`${this.language}`]}\n\t\t\t</button>\n\t\t);\n\t}\n}\n"],"version":3}

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

@@ -1,7 +1,7 @@
-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';
+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) {
@@ -20,15 +20,37 @@ const ontarioBadgeCss =
 const OntarioBadgeStyle0 = ontarioBadgeCss;
 const OntarioBadge$1 = /*@__PURE__*/ proxyCustomElement(
-	class OntarioBadge extends HTMLElement {
+	class OntarioBadge extends H {
 		constructor() {
 			super();
 			this.__registerHost();
 			this.__attachShadow();
-			this.colour = 'teal';
-			this.label = undefined;
-			this.ariaLabelText = undefined;
 		}
+		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.
 		 *
@@ -108,9 +130,6 @@ const OntarioBadge$1 = /*@__PURE__*/ proxyCustomElement(
 				this.getBadgeLabel(),
 			);
 		}
-		get host() {
-			return this;
-		}
 		static get watchers() {
 			return {
 				label: ['validateLabel'],

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~~;;;;;sBAOuB~~,MAAM~~;;;;;;;;;IA2BrD~~,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/~~typography~~.variables' as ~~typography~~;\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: ~~typography~~.$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","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":";;;;;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}

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

@@ -1,24 +1,38 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { b as validatePropExists } from './validation-functions.js';
-import { C as ConsoleMessageClass } from './console-message.js';
+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';
 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;
 const OntarioBlockquote$1 = /*@__PURE__*/ proxyCustomElement(
-	class OntarioBlockquote extends HTMLElement {
+	class OntarioBlockquote extends H {
 		constructor() {
 			super();
 			this.__registerHost();
 			this.__attachShadow();
-			this.quote = undefined;
-			this.attribution = undefined;
-			this.byline = undefined;
-			this.shortQuoteLength = 140;
-			this.shortQuote = false;
-			this.quoteState = undefined;
 		}
+		get host() {
+			return this;
+		}
+		/**
+		 * Text to be displayed as the quote.
+		 *
+		 * Note that wrapping the quotes in quotations is not needed - this is handled through the component styles
+		 */
+		quote;
+		/**
+		 * Optional text to be displayed as the attribution (the author) of the quote.
+		 */
+		attribution;
+		/**
+		 * Optional text to be displayed for additional information about the attribution/author.
+		 */
+		byline;
+		shortQuoteLength = 140;
+		shortQuote = false;
+		quoteState;
 		/*
 		 * Watch for changes in the `quote` prop for validation purposes.
 		 *
@@ -26,17 +40,9 @@ const OntarioBlockquote$1 = /*@__PURE__*/ proxyCustomElement(
 		 * 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.
 		 */
 		validateQuote() {
-			var _a, _b, _c, _d;
-			this.quoteState =
-				(_b = (_a = this.quote) !== null && _a !== void 0 ? _a : this.host.textContent) !== null && _b !== void 0
-					? _b
-					: '';
+			this.quoteState = this.quote ?? this.host.textContent ?? '';
 			this.validateQuoteContent(this.quoteState);
-			this.shortQuote =
-				(_d = ((_c = this.quoteState) === null || _c === void 0 ? void 0 : _c.length) <= this.shortQuoteLength) !==
-					null && _d !== void 0
-					? _d
-					: true;
+			this.shortQuote = this.quoteState?.length <= this.shortQuoteLength ?? true;
 		}
 		/**
 		 * Print the missing `quote` prop warning message
@@ -78,13 +84,20 @@ const OntarioBlockquote$1 = /*@__PURE__*/ proxyCustomElement(
 					class: this.shortQuote ? `ontario-blockquote ontario-blockquote--short` : `ontario-blockquote`,
 				},
 				h('p', { key: 'fa9231db3034a5e33ef2d0fc7367b589e936655d' }, this.quoteState),
-				this.attribution && h('cite', { class: 'ontario-blockquote__attribution' }, this.attribution),
-				this.byline && h('cite', { class: 'ontario-blockquote__byline' }, this.byline),
+				this.attribution &&
+					h(
+						'cite',
+						{ key: '3fc8c11981cc3e697f2cab6256358d4b10b18fef', class: 'ontario-blockquote__attribution' },
+						this.attribution,
+					),
+				this.byline &&
+					h(
+						'cite',
+						{ key: 'a69c1feec5a94db473f7195d785b966031e51843', class: 'ontario-blockquote__byline' },
+						this.byline,
+					),
 			);
 		}
-		get host() {
-			return this;
-		}
 		static get watchers() {
 			return {
 				quote: ['validateQuote'],

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~~;;;;;;;;gCAoBO~~,GAAG;~~0BAER~~,KAAK~~;;;;;;;;;IAWpC~~,aAAa;;QACZ,IAAI,CAAC,UAAU,GAAG,~~MAAA,MAAA,~~IAAI,CAAC,KAAK,~~mCAAI~~,IAAI,CAAC,IAAI,CAAC,WAAW,~~mCAAI~~,EAAE,CAAC;QAC5D,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC3C,IAAI,CAAC,UAAU,GAAG,~~MAAA,CAAA,MAAA,~~IAAI,CAAC,UAAU,~~0CAAE~~,MAAM,~~KAAI~~,IAAI,CAAC,gBAAgB,~~mCAAI~~,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,~~YAAM~~,KAAK,EAAC,iCAAiC,IAAE,IAAI,CAAC,WAAW,CAAQ,EAC3F,IAAI,CAAC,MAAM,IAAI,~~YAAM~~,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/~~typography~~.variables' as ~~typography~~;\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: ~~typography~~.$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}
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}

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

@@ -1,6 +1,6 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { a as validateValueAgainstArray, b as validatePropExists } from './validation-functions.js';
-import { C as ConsoleMessageClass } from './console-message.js';
+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';
 const ButtonTypes = ['primary', 'secondary', 'tertiary', 'internalThemeDark'];
 const HtmlTypes = ['button', 'reset', 'submit'];
@@ -10,32 +10,73 @@ const ontarioButtonCss =
 const OntarioButtonStyle0 = ontarioButtonCss;
 const OntarioButton$1 = /*@__PURE__*/ proxyCustomElement(
-	class OntarioButton extends HTMLElement {
+	class OntarioButton extends H {
 		constructor() {
 			super();
 			this.__registerHost();
 			this.__attachShadow();
 			this.internals = this.attachInternals();
-			this.type = 'secondary';
-			this.htmlType = 'button';
-			this.label = undefined;
-			this.ariaLabelText = undefined;
-			this.elementId = undefined;
-			this.typeState = undefined;
-			this.htmlTypeState = undefined;
-			this.labelState = undefined;
 		}
+		get host() {
+			return this;
+		}
+		internals;
+		/**
+		 * The type of button to render.
+		 *
+		 * If no type is passed, it will default to 'secondary'.
+		 */
+		type = 'secondary';
+		/**
+		 * The native HTML button type the button should use.
+		 *
+		 * If no htmlType is passed, it will default to 'button'.
+		 */
+		htmlType = 'button';
+		/**
+		 * Text to be displayed within the button. This will override the text provided through the host element textContent.
+		 *
+		 * @example
+		 * <ontario-button label="Label Text">Text</ontario-button>
+		 *
+		 * The resulting button will have the label `"Label Text"`.
+		 */
+		label;
+		/**
+		 * 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.
+		 *
+		 *  This is optional.
+		 *
+		 * @example
+		 * <ontario-button aria-label-text="Click button to open map">Open</ontario button>
+		 */
+		ariaLabelText;
+		/**
+		 * The unique identifier of the button. This is optional - if no ID is passed, one will be generated.
+		 */
+		elementId;
+		/**
+		 * Mutable variable, for internal use only.
+		 * Set the button's type depending on validation result.
+		 */
+		typeState;
+		/**
+		 * Mutable variable, for internal use only.
+		 * Set the native HTML button type depending on validation result.
+		 */
+		htmlTypeState;
+		labelState;
+		/**
+		 * A reference to the internal button element.
+		 */
+		buttonRef;
 		/*
 		 * Watch for changes to the `label` property for validation purposes.
 		 *
 		 * If  no `label` prop is provided, the `label` prop will be set to the host element textContent (if it exists).
 		 */
 		updateLabelContent() {
-			var _a, _b;
-			this.labelState =
-				(_b = (_a = this.label) !== null && _a !== void 0 ? _a : this.host.textContent) !== null && _b !== void 0
-					? _b
-					: '';
+			this.labelState = this.label ?? this.host.textContent ?? '';
 			this.validateLabelContent(this.labelState);
 		}
 		/**
@@ -118,18 +159,16 @@ const OntarioButton$1 = /*@__PURE__*/ proxyCustomElement(
 			return `ontario-button ontario-button--${this.typeState}`;
 		}
 		getId() {
-			var _a;
-			return (_a = this.elementId) !== null && _a !== void 0 ? _a : '';
+			return this.elementId ?? '';
 		}
 		/**
 		 * Set `buttonId`, `label`, and `ariaLabel` using internal component logic.
 		 */
 		componentWillLoad() {
-			var _a;
 			this.updateLabelContent();
 			this.validateHtmlType();
 			this.validateType();
-			this.ariaLabelText = (_a = this.ariaLabelText) !== null && _a !== void 0 ? _a : this.labelState;
+			this.ariaLabelText = this.ariaLabelText ?? this.labelState;
 		}
 		componentDidLoad() {
 			// Used to help load translations for any slots + text content passed in by the user.
@@ -146,7 +185,7 @@ const OntarioButton$1 = /*@__PURE__*/ proxyCustomElement(
 			if (this.htmlTypeState === 'submit') {
 				this.buttonRef.addEventListener('click', () => {
 					const { form } = this.internals;
-					form === null || form === void 0 ? void 0 : form.requestSubmit();
+					form?.requestSubmit();
 				});
 			}
 		}
@@ -154,7 +193,7 @@ const OntarioButton$1 = /*@__PURE__*/ proxyCustomElement(
 			return h(
 				'button',
 				{
-					'key': '625d6a833ec13a769e36479310ec5427bf9c07ce',
+					'key': '885df269319782dd2971b9fb4f6521c8d292d771',
 					'ref': (el) => (this.buttonRef = el),
 					'type': this.htmlTypeState,
 					'class': this.getClass(),
@@ -167,9 +206,6 @@ const OntarioButton$1 = /*@__PURE__*/ proxyCustomElement(
 		static get formAssociated() {
 			return true;
 		}
-		get host() {
-			return this;
-		}
 		static get watchers() {
 			return {
 				label: ['updateLabelContent'],