npm - @biggive/components - Versions diffs - 202509250906.0.0 → 202510071230.0.0 - Mend

@biggive/components 202509250906.0.0 → 202510071230.0.0

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

package/dist/components/biggive-heading.js CHANGED Viewed

@@ -3,9 +3,11 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 const biggiveHeadingCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.align-left{text-align:left}.align-right{text-align:right}.align-center{text-align:center}.align-justify{text-align:justify}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}.container{display:flex}.container.biggive{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}.container.biggive h1,.container.biggive .heading-1{font-size:47px;line-height:60px;font-weight:bold}.container.biggive h2,.container.biggive .heading-2{font-size:38px;line-height:45px;font-weight:bold}.container.biggive h3,.container.biggive .heading-3{font-size:25px;line-height:32px;font-weight:bold}.container.biggive h4,.container.biggive .heading-4{font-size:20px;line-height:24px;font-weight:bold}.container.biggive h5,.container.biggive .heading-5{font-size:17px;line-height:24px;font-weight:bold}.container.philco h1,.container.philco .heading-1,.container.philco h2,.container.philco .heading-2,.container.philco h3,.container.philco .heading-3{font-family:\"Garage Gothic\", sans-serif;font-weight:700;margin-top:0.1rem;margin-bottom:0.1rem;line-height:1.1;font-weight:700;text-transform:uppercase}.container.philco h1,.container.philco .heading-1{font-size:4rem}.container.philco h2,.container.philco .heading-2{font-size:2.5rem}.container.philco h3,.container.philco .heading-3{font-size:1.8rem}.container .heading-colour-primary{color:#2C089B}.container .heading-colour-secondary{color:#2AF135}.container .heading-colour-tertiary{color:#FF7272}.container .heading-colour-brand-cc-red{color:#B30510}.container .heading-colour-brand-wgmf-purple{color:#6E0887}.container .heading-colour-brand-gmf-green{color:#50B400}.container .heading-colour-brand-er-green{color:#50B400}.container .heading-colour-brand-er-dark-green{color:#002413}.container .heading-colour-brand-er-dark-blue{color:#0c0068}.container .heading-colour-brand-er-teal{color:#00a76d}.container .heading-colour-brand-emf-yellow{color:#FFE500}.container .heading-colour-brand-c4c-orange{color:#F07D00}.container .heading-colour-brand-afa-pink{color:#BF387D}.container .heading-colour-brand-scw-magenta{color:#EE2C65}.container .heading-colour-brand-mhf-turquoise{color:#62CFC9}.container .heading-colour-brand-grey{color:#CBC8C8}.container .heading-colour-white{color:#FFFFFF}.container .heading-colour-black{color:#000000}.container .heading-colour-grey-extra-light{color:#D7D7D7}.container .heading-colour-grey-light{color:#E8E8E8}.container .heading-colour-grey-medium{color:#8A8A8A}.container .heading-colour-grey-dark{color:#4A4A4A}.container .heading-colour-philco-orange{color:#f18a00}.container .heading-colour-philco-gray-90{color:#1d1d1B}.container .heading-colour-philco-gray-70{color:#7D7D7D}.container .heading-colour-philco-white{color:#FFFFFF}.container .heading-colour-philco-success-green{color:#1Ec691}.container .heading-colour-philco-error-coral{color:#F54242}.container .heading-colour-philco-gray-30{color:#BBBBBB}.container .heading-colour-philco-gray-20{color:#F6F6F6}.container h1,.container h2,.container h3,.container h4,.container h5{margin:0;padding:0;width:100%}.container h1 svg,.container h2 svg,.container h3 svg,.container h4 svg,.container h5 svg{height:0.7em;margin-right:0.2em}.container .icon-colour-primary svg path{fill:#2C089B}.container .icon-colour-secondary svg path{fill:#2AF135}.container .icon-colour-tertiary svg path{fill:#FF7272}.container .icon-colour-brand-cc-red svg path{fill:#B30510}.container .icon-colour-brand-wgmf-purple svg path{fill:#6E0887}.container .icon-colour-brand-gmf-green svg path{fill:#50B400}.container .icon-colour-brand-er-green svg path{fill:#50B400}.container .icon-colour-brand-er-dark-green svg path{fill:#002413}.container .icon-colour-brand-er-dark-blue svg path{fill:#0c0068}.container .icon-colour-brand-er-teal svg path{fill:#00a76d}.container .icon-colour-brand-emf-yellow svg path{fill:#FFE500}.container .icon-colour-brand-c4c-orange svg path{fill:#F07D00}.container .icon-colour-brand-afa-pink svg path{fill:#BF387D}.container .icon-colour-brand-scw-magenta svg path{fill:#EE2C65}.container .icon-colour-brand-mhf-turquoise svg path{fill:#62CFC9}.container .icon-colour-brand-grey svg path{fill:#CBC8C8}.container .icon-colour-white svg path{fill:#FFFFFF}.container .icon-colour-black svg path{fill:#000000}.container .icon-colour-grey-extra-light svg path{fill:#D7D7D7}.container .icon-colour-grey-light svg path{fill:#E8E8E8}.container .icon-colour-grey-medium svg path{fill:#8A8A8A}.container .icon-colour-grey-dark svg path{fill:#4A4A4A}.container .icon-colour-philco-orange svg path{fill:#f18a00}.container .icon-colour-philco-gray-90 svg path{fill:#1d1d1B}.container .icon-colour-philco-gray-70 svg path{fill:#7D7D7D}.container .icon-colour-philco-white svg path{fill:#FFFFFF}.container .icon-colour-philco-success-green svg path{fill:#1Ec691}.container .icon-colour-philco-error-coral svg path{fill:#F54242}.container .icon-colour-philco-gray-30 svg path{fill:#BBBBBB}.container .icon-colour-philco-gray-20 svg path{fill:#F6F6F6}";
 const BiggiveHeading$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveHeading extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.spaceAbove = 2;
         this.spaceBelow = 4;

package/dist/components/biggive-heading.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"biggive-heading.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,42KAA42K;;MCWz3KA,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAA,WAAA,CAAA;AAL3B,IAAA,WAAA,~~GAAA;;;;~~AAMU,QAAA,IAAU,CAAA,UAAA,GAAkB,CAAC;AAC7B,QAAA,IAAU,CAAA,UAAA,GAAkB,CAAC;AAC7B,QAAA,IAAM,CAAA,MAAA,GAAgB,SAAS;AAC/B,QAAA,IAAW,CAAA,WAAA,GAAe,IAAI;AAC9B,QAAA,IAAI,CAAA,IAAA,GAAgB,CAAC;AACrB,QAAA,IAAK,CAAA,KAAA,GAAW,MAAM;AACtB,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AACjB,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AACrB,QAAA,IAAU,CAAA,UAAA,GAAgB,SAAS;AACnC,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAgCrD;IA9BC,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW;QAC5B,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC,UAAU,GAAG,SAAS,GAAG,IAAI,CAAC,KAAK,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,EAAA,EACzI,CAAC,CAAA,GAAG,qDAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,CAAC,MAAM,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,WAAW,GAAG,IAAI,CAAC,IAAI,EAAA,EACtG,IAAI,CAAC,IAAI,IACR,CAAA,CAAA,KAAA,EAAA,EAAK,OAAO,EAAC,YAAY,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,KAAK,EAAC,CAAC,EAAC,4BAA4B,EAAG,CAAA,EACnD,CACE,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,47CAW6C,EAAA,CAC/C,CACE,IACJ,IAAI,EAEP,IAAI,CAAC,IAAI,CACN,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveHeading","__stencil_proxyCustomElement"],"sources":["src/components/biggive-heading/biggive-heading.scss?tag=biggive-heading&encapsulation=shadow","src/components/biggive-heading/biggive-heading.tsx"],"sourcesContent":["@include alignments();\n@include spacers();\n\n:host {\n display: contents;\n}\n\n.container {\n &.biggive {\n @include headings-biggive();\n // We reset size here but then rely on something else to make it bigger. Confusing\n // but not worth refactoring rn.\n @include standard-font();\n }\n\n &.philco {\n @include headings-philco();\n }\n\n @each $key, $colour in $brandColours {\n .heading-colour-#{$key} { color: $colour; }\n }\n display: flex;\n\n h1,h2,h3,h4,h5 {\n margin: 0;\n padding: 0;\n width: 100%;\n svg {\n height: 0.7em;\n margin-right: 0.2em;\n }\n }\n\n @each $key, $colour in $brandColours {\n .icon-colour-#{$key} svg path { fill: $colour; }\n }\n\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { headingTag } from '../../globals/heading-tag';\nimport { headingSize } from '../../globals/heading-size';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n tag: 'biggive-heading',\n styleUrl: 'biggive-heading.scss',\n shadow: true,\n})\nexport class BiggiveHeading {\n @Prop() spaceAbove: spacingOption = 2;\n @Prop() spaceBelow: spacingOption = 4;\n @Prop() colour: brandColour = 'primary';\n @Prop() htmlElement: headingTag = 'h1';\n @Prop() size: headingSize = 1;\n @Prop() align: string = 'left';\n @Prop() text: string = '';\n @Prop() icon: boolean = false;\n @Prop() iconColour: brandColour = 'primary';\n @Prop() siteDesign: 'biggive' \| 'philco' = 'biggive';\n\n render() {\n const Tag = this.htmlElement;\n return (\n <div class={'container ' + this.siteDesign + ' align-' + this.align + ' space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow}>\n <Tag class={'heading-colour-' + this.colour + ' icon-colour-' + this.iconColour + ' heading-' + this.size}>\n {this.icon ? (\n <svg viewBox=\"0 0 102 88\">\n <path class=\"st0\" d=\"M51.2,0l-51,88h102L51.2,0z\" />\n <path\n d=\"M31,68.3c-1,0-1.9-0.9-1.9-1.9c0-1,0.9-1.9,1.9-1.9c1.1,0,1.9,0.9,1.9,1.9C32.9,67.5,32.1,68.3,31,68.3z M29.5,79.4h3v-10\n h-3V79.4z M41,69.4V70c-0.5-0.5-1.4-0.9-2.5-0.9c-2.7,0-4.9,2-4.9,4.9c0,2.9,2.2,4.9,4.9,4.9c1.1,0,2-0.3,2.5-0.9v0.6\n c0,1.3-1.2,1.9-2.7,1.9c-1.3,0-2.4-0.3-3.5-0.9v3c1.3,0.5,2.7,0.6,3.6,0.6c3,0,5.5-1.3,5.5-4.6v-9.4L41,69.4L41,69.4z M41,75.3\n c-0.4,0.6-1.2,0.9-1.9,0.9c-1.3,0-2.3-0.8-2.3-2.2c0-1.4,1-2.2,2.3-2.2c0.8,0,1.5,0.4,1.9,0.9V75.3z M52.8,79.7\n c2.4,0,3.8-0.4,5.1-1.2v-7.7h-6.6v2.9h3.5v2.6c-0.5,0.1-1.1,0.3-1.9,0.3c-3,0-4.4-2-4.4-4.3c0-2.3,1.7-4.3,4.8-4.3\n c1.3,0,2.6,0.4,3.5,0.9v-3.3c-0.9-0.4-2.1-0.7-3.7-0.7c-4.6,0-7.8,3.3-7.8,7.4C45.2,76.5,48.1,79.7,52.8,79.7z M60.7,68.3\n c-1,0-1.9-0.9-1.9-1.9c0-1,0.9-1.9,1.9-1.9c1.1,0,1.9,0.9,1.9,1.9C62.6,67.5,61.8,68.3,60.7,68.3z M59.2,79.4h3v-10h-3V79.4z\n M69,73.9l-2.6-4.5h-3.5l6,10.3l6-10.3h-3.5L69,73.9z M77.5,75.1h7c0-4.4-2.5-6-5.1-6c-2.7,0-5.1,1.6-5.1,5.2c0,3.5,2.5,5.2,5.5,5.2\n c1.3,0,2.7-0.2,3.8-0.8v-2.8c-1.5,0.9-2.5,0.9-3.3,0.9C78.9,76.9,77.6,76.5,77.5,75.1z M79.4,71.5c0.9,0,1.7,0.4,1.8,1.7h-3.7\n C77.7,72,78.6,71.5,79.4,71.5z M26,71.6c0.7-0.6,1.1-1.5,1.1-2.5c0-1.9-1.8-3.9-4.4-3.9h-4.8v14.3h6.3c2.4,0,4.3-1.9,4.3-4.2\n C28.4,73.8,27.8,72.2,26,71.6z M21,68.1h1.4c0.9,0,1.5,0.7,1.5,1.4c0,0.8-0.6,1.4-1.5,1.4H21V68.1z M23.8,76.5H21v-2.9h2.8\n c0.9,0,1.5,0.6,1.5,1.4C25.3,75.9,24.7,76.5,23.8,76.5z\"\n />\n </svg>\n ) : null}\n\n {this.text}\n </Tag>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"biggive-heading.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,42KAA42K;;MCWz3KA,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAA,WAAA,CAAA;AAL3B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAMU,QAAA,IAAU,CAAA,UAAA,GAAkB,CAAC;AAC7B,QAAA,IAAU,CAAA,UAAA,GAAkB,CAAC;AAC7B,QAAA,IAAM,CAAA,MAAA,GAAgB,SAAS;AAC/B,QAAA,IAAW,CAAA,WAAA,GAAe,IAAI;AAC9B,QAAA,IAAI,CAAA,IAAA,GAAgB,CAAC;AACrB,QAAA,IAAK,CAAA,KAAA,GAAW,MAAM;AACtB,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AACjB,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AACrB,QAAA,IAAU,CAAA,UAAA,GAAgB,SAAS;AACnC,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAgCrD;IA9BC,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW;QAC5B,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC,UAAU,GAAG,SAAS,GAAG,IAAI,CAAC,KAAK,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,EAAA,EACzI,CAAC,CAAA,GAAG,qDAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,CAAC,MAAM,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,WAAW,GAAG,IAAI,CAAC,IAAI,EAAA,EACtG,IAAI,CAAC,IAAI,IACR,CAAA,CAAA,KAAA,EAAA,EAAK,OAAO,EAAC,YAAY,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,KAAK,EAAC,CAAC,EAAC,4BAA4B,EAAG,CAAA,EACnD,CACE,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,47CAW6C,EAAA,CAC/C,CACE,IACJ,IAAI,EAEP,IAAI,CAAC,IAAI,CACN,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveHeading","__stencil_proxyCustomElement"],"sources":["src/components/biggive-heading/biggive-heading.scss?tag=biggive-heading&encapsulation=shadow","src/components/biggive-heading/biggive-heading.tsx"],"sourcesContent":["@include alignments();\n@include spacers();\n\n:host {\n display: contents;\n}\n\n.container {\n &.biggive {\n @include headings-biggive();\n // We reset size here but then rely on something else to make it bigger. Confusing\n // but not worth refactoring rn.\n @include standard-font();\n }\n\n &.philco {\n @include headings-philco();\n }\n\n @each $key, $colour in $brandColours {\n .heading-colour-#{$key} { color: $colour; }\n }\n display: flex;\n\n h1,h2,h3,h4,h5 {\n margin: 0;\n padding: 0;\n width: 100%;\n svg {\n height: 0.7em;\n margin-right: 0.2em;\n }\n }\n\n @each $key, $colour in $brandColours {\n .icon-colour-#{$key} svg path { fill: $colour; }\n }\n\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { headingTag } from '../../globals/heading-tag';\nimport { headingSize } from '../../globals/heading-size';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n tag: 'biggive-heading',\n styleUrl: 'biggive-heading.scss',\n shadow: true,\n})\nexport class BiggiveHeading {\n @Prop() spaceAbove: spacingOption = 2;\n @Prop() spaceBelow: spacingOption = 4;\n @Prop() colour: brandColour = 'primary';\n @Prop() htmlElement: headingTag = 'h1';\n @Prop() size: headingSize = 1;\n @Prop() align: string = 'left';\n @Prop() text: string = '';\n @Prop() icon: boolean = false;\n @Prop() iconColour: brandColour = 'primary';\n @Prop() siteDesign: 'biggive' \| 'philco' = 'biggive';\n\n render() {\n const Tag = this.htmlElement;\n return (\n <div class={'container ' + this.siteDesign + ' align-' + this.align + ' space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow}>\n <Tag class={'heading-colour-' + this.colour + ' icon-colour-' + this.iconColour + ' heading-' + this.size}>\n {this.icon ? (\n <svg viewBox=\"0 0 102 88\">\n <path class=\"st0\" d=\"M51.2,0l-51,88h102L51.2,0z\" />\n <path\n d=\"M31,68.3c-1,0-1.9-0.9-1.9-1.9c0-1,0.9-1.9,1.9-1.9c1.1,0,1.9,0.9,1.9,1.9C32.9,67.5,32.1,68.3,31,68.3z M29.5,79.4h3v-10\n h-3V79.4z M41,69.4V70c-0.5-0.5-1.4-0.9-2.5-0.9c-2.7,0-4.9,2-4.9,4.9c0,2.9,2.2,4.9,4.9,4.9c1.1,0,2-0.3,2.5-0.9v0.6\n c0,1.3-1.2,1.9-2.7,1.9c-1.3,0-2.4-0.3-3.5-0.9v3c1.3,0.5,2.7,0.6,3.6,0.6c3,0,5.5-1.3,5.5-4.6v-9.4L41,69.4L41,69.4z M41,75.3\n c-0.4,0.6-1.2,0.9-1.9,0.9c-1.3,0-2.3-0.8-2.3-2.2c0-1.4,1-2.2,2.3-2.2c0.8,0,1.5,0.4,1.9,0.9V75.3z M52.8,79.7\n c2.4,0,3.8-0.4,5.1-1.2v-7.7h-6.6v2.9h3.5v2.6c-0.5,0.1-1.1,0.3-1.9,0.3c-3,0-4.4-2-4.4-4.3c0-2.3,1.7-4.3,4.8-4.3\n c1.3,0,2.6,0.4,3.5,0.9v-3.3c-0.9-0.4-2.1-0.7-3.7-0.7c-4.6,0-7.8,3.3-7.8,7.4C45.2,76.5,48.1,79.7,52.8,79.7z M60.7,68.3\n c-1,0-1.9-0.9-1.9-1.9c0-1,0.9-1.9,1.9-1.9c1.1,0,1.9,0.9,1.9,1.9C62.6,67.5,61.8,68.3,60.7,68.3z M59.2,79.4h3v-10h-3V79.4z\n M69,73.9l-2.6-4.5h-3.5l6,10.3l6-10.3h-3.5L69,73.9z M77.5,75.1h7c0-4.4-2.5-6-5.1-6c-2.7,0-5.1,1.6-5.1,5.2c0,3.5,2.5,5.2,5.5,5.2\n c1.3,0,2.7-0.2,3.8-0.8v-2.8c-1.5,0.9-2.5,0.9-3.3,0.9C78.9,76.9,77.6,76.5,77.5,75.1z M79.4,71.5c0.9,0,1.7,0.4,1.8,1.7h-3.7\n C77.7,72,78.6,71.5,79.4,71.5z M26,71.6c0.7-0.6,1.1-1.5,1.1-2.5c0-1.9-1.8-3.9-4.4-3.9h-4.8v14.3h6.3c2.4,0,4.3-1.9,4.3-4.2\n C28.4,73.8,27.8,72.2,26,71.6z M21,68.1h1.4c0.9,0,1.5,0.7,1.5,1.4c0,0.8-0.6,1.4-1.5,1.4H21V68.1z M23.8,76.5H21v-2.9h2.8\n c0.9,0,1.5,0.6,1.5,1.4C25.3,75.9,24.7,76.5,23.8,76.5z\"\n />\n </svg>\n ) : null}\n\n {this.text}\n </Tag>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/biggive-hero-image.js CHANGED Viewed

@@ -4,9 +4,11 @@ import { d as defineCustomElement$2 } from './biggive-button2.js';
 const biggiveHeroImageCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.image-wrap img{width:100%;height:auto}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-cc-red:hover,.text-colour-brand-cc-red{color:#B30510}.text-colour-hover-brand-wgmf-purple:hover,.text-colour-brand-wgmf-purple{color:#6E0887}.text-colour-hover-brand-gmf-green:hover,.text-colour-brand-gmf-green{color:#50B400}.text-colour-hover-brand-er-green:hover,.text-colour-brand-er-green{color:#50B400}.text-colour-hover-brand-er-dark-green:hover,.text-colour-brand-er-dark-green{color:#002413}.text-colour-hover-brand-er-dark-blue:hover,.text-colour-brand-er-dark-blue{color:#0c0068}.text-colour-hover-brand-er-teal:hover,.text-colour-brand-er-teal{color:#00a76d}.text-colour-hover-brand-emf-yellow:hover,.text-colour-brand-emf-yellow{color:#FFE500}.text-colour-hover-brand-c4c-orange:hover,.text-colour-brand-c4c-orange{color:#F07D00}.text-colour-hover-brand-afa-pink:hover,.text-colour-brand-afa-pink{color:#BF387D}.text-colour-hover-brand-scw-magenta:hover,.text-colour-brand-scw-magenta{color:#EE2C65}.text-colour-hover-brand-mhf-turquoise:hover,.text-colour-brand-mhf-turquoise{color:#62CFC9}.text-colour-hover-brand-grey:hover,.text-colour-brand-grey{color:#CBC8C8}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}.text-colour-hover-philco-orange:hover,.text-colour-philco-orange{color:#f18a00}.text-colour-hover-philco-gray-90:hover,.text-colour-philco-gray-90{color:#1d1d1B}.text-colour-hover-philco-gray-70:hover,.text-colour-philco-gray-70{color:#7D7D7D}.text-colour-hover-philco-white:hover,.text-colour-philco-white{color:#FFFFFF}.text-colour-hover-philco-success-green:hover,.text-colour-philco-success-green{color:#1Ec691}.text-colour-hover-philco-error-coral:hover,.text-colour-philco-error-coral{color:#F54242}.text-colour-hover-philco-gray-30:hover,.text-colour-philco-gray-30{color:#BBBBBB}.text-colour-hover-philco-gray-20:hover,.text-colour-philco-gray-20{color:#F6F6F6}:host{display:contents;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;overflow:hidden;position:relative;margin-bottom:30px;min-height:32.5vw}.container.colour-scheme-primary{color:#2C089B}.container.colour-scheme-secondary{color:#2AF135}.container.colour-scheme-tertiary{color:#FF7272}.container.colour-scheme-brand-cc-red{color:#B30510}.container.colour-scheme-brand-wgmf-purple{color:#6E0887}.container.colour-scheme-brand-gmf-green{color:#50B400}.container.colour-scheme-brand-er-green{color:#50B400}.container.colour-scheme-brand-er-dark-green{color:#002413}.container.colour-scheme-brand-er-dark-blue{color:#0c0068}.container.colour-scheme-brand-er-teal{color:#00a76d}.container.colour-scheme-brand-emf-yellow{color:#FFE500}.container.colour-scheme-brand-c4c-orange{color:#F07D00}.container.colour-scheme-brand-afa-pink{color:#BF387D}.container.colour-scheme-brand-scw-magenta{color:#EE2C65}.container.colour-scheme-brand-mhf-turquoise{color:#62CFC9}.container.colour-scheme-brand-grey{color:#CBC8C8}.container.colour-scheme-white{color:#FFFFFF}.container.colour-scheme-black{color:#000000}.container.colour-scheme-grey-extra-light{color:#D7D7D7}.container.colour-scheme-grey-light{color:#E8E8E8}.container.colour-scheme-grey-medium{color:#8A8A8A}.container.colour-scheme-grey-dark{color:#4A4A4A}.container.colour-scheme-philco-orange{color:#f18a00}.container.colour-scheme-philco-gray-90{color:#1d1d1B}.container.colour-scheme-philco-gray-70{color:#7D7D7D}.container.colour-scheme-philco-white{color:#FFFFFF}.container.colour-scheme-philco-success-green{color:#1Ec691}.container.colour-scheme-philco-error-coral{color:#F54242}.container.colour-scheme-philco-gray-30{color:#BBBBBB}.container.colour-scheme-philco-gray-20{color:#F6F6F6}.container .sleeve{display:flex;justify-content:space-between;max-width:1200px;margin-left:auto;margin-right:auto}.container .content-wrap{width:40%;position:relative;z-index:1;padding:120px 60px 60px 0}.container .content-wrap .logo,.container .content-wrap .logo-space{height:75px}.container .content-wrap .logo.logo-height-1,.container .content-wrap .logo-space.logo-height-1{height:50px}.container .content-wrap .logo.logo-height-2,.container .content-wrap .logo-space.logo-height-2{height:75px}.container .content-wrap .logo.logo-height-3,.container .content-wrap .logo-space.logo-height-3{height:100px}.container .content-wrap .logo.logo-height-4,.container .content-wrap .logo-space.logo-height-4{height:125px}.container .content-wrap .logo.logo-height-5,.container .content-wrap .logo-space.logo-height-5{height:150px}.container .content-wrap .logo.logo-height-6,.container .content-wrap .logo-space.logo-height-6{height:175px}.container .content-wrap .logo.logo-height-7,.container .content-wrap .logo-space.logo-height-7{height:200px}.container .content-wrap .logo.logo-height-8,.container .content-wrap .logo-space.logo-height-8{height:225px}.container .content-wrap .logo.logo-height-9,.container .content-wrap .logo-space.logo-height-9{height:250px}.container .content-wrap .logo.logo-height-10,.container .content-wrap .logo-space.logo-height-10{height:275px}.container .content-wrap .logo{background-size:contain;background-repeat:no-repeat;background-position:left center}.container .content-wrap .logo img{width:auto;height:100%;position:relative}.container .content-wrap .slug{font-size:20px;line-height:24px;font-weight:bold;min-height:24px;margin:0;padding:0}.container .content-wrap h1{font-size:47px;line-height:60px;font-weight:bold;margin:0 0 15px 0;padding:0}@media (max-width: 1200px){.container .content-wrap h1{font-size:38px;line-height:45px;font-weight:bold}}.container .content-wrap .teaser{margin:0;padding:0}.container .content-wrap .teaser-with-space{margin:0 0 45px 0}.container .graphic-wrap{position:absolute;display:block;top:0;left:0;right:0;padding-bottom:32.5vw;background-color:#F1F1F1;margin-left:20vw;clip-path:polygon(0 0, 100% 0, 100% 100%)}.container .graphic-wrap .image-wrap{position:absolute;display:block;top:0;left:0;bottom:0;right:0;background-size:cover}.container .graphic-wrap .image-wrap img{display:none}@media screen and (max-width: 1200px){.container{min-height:50vw}.container .sleeve{flex-wrap:wrap}.container .sleeve .content-wrap{width:60%;padding:18vw 15px 15px 15px;margin-bottom:50px}.container .sleeve .graphic-wrap{margin-left:0;bottom:auto;padding-bottom:50vw}}@media screen and (max-width: 768px){.container .sleeve .content-wrap{width:70%;padding-top:120px}}@media screen and (max-width: 576px){.container .sleeve .content-wrap{width:80%}}@media screen and (max-width: 450px){.container .sleeve .content-wrap{width:100%}}";
 const BiggiveHeroImage$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveHeroImage extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         /**
          * Space below component

package/dist/components/biggive-hero-image.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"biggive-hero-image.js","mappings":"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","names":["BiggiveHeroImage","__stencil_proxyCustomElement"],"sources":["src/components/biggive-hero-image/biggive-hero-image.scss?tag=biggive-hero-image&encapsulation=shadow","src/components/biggive-hero-image/biggive-hero-image.tsx"],"sourcesContent":["@include image-alignment();\n@include spacers();\n@include text-colours();\n\n:host {\n display: contents;\n @include standard-font();\n}\n\n.container {\n @include standard-font();\n overflow: hidden;\n position: relative;\n margin-bottom: $spacer-4;\n min-height: 32.5vw;\n @each $key, $colour in $brandColours {\n &.colour-scheme-#{$key} { color: $colour; }\n }\n .sleeve {\n @include flex-container-row();\n max-width: $screen-desktop-max;\n margin-left: auto;\n margin-right: auto;\n }\n .content-wrap {\n width: 40%;\n position: relative;\n z-index: 1;\n padding: $spacer-8 $spacer-6 $spacer-6 $spacer-0;\n\n .logo, .logo-space {\n height: 75px;\n &.logo-height-1 { height: 50px; }\n &.logo-height-2 { height: 75px; }\n &.logo-height-3 { height: 100px; }\n &.logo-height-4 { height: 125px; }\n &.logo-height-5 { height: 150px; }\n &.logo-height-6 { height: 175px; }\n &.logo-height-7 { height: 200px; }\n &.logo-height-8 { height: 225px; }\n &.logo-height-9 { height: 250px; }\n &.logo-height-10 { height: 275px; }\n }\n\n .logo {\n background-size: contain;\n background-repeat: no-repeat;\n background-position: left center;\n\n img {\n width: auto;\n height: 100%;\n position: relative;\n }\n }\n .slug {\n @include heading-4;\n min-height: 24px; // Sort layout when there is no slug.\n margin: 0;\n padding: 0;\n }\n h1 {\n @include heading-1;\n margin: 0 0 $spacer-3 0;\n padding: 0;\n\n @media (max-width: $screen-desktop-max) {\n @include heading-2;\n }\n }\n .teaser {\n margin: 0;\n padding: 0;\n }\n .teaser-with-space {\n margin: 0 0 $spacer-5 0;\n }\n }\n\n .graphic-wrap {\n position: absolute;\n display: block;\n top: 0;\n left: 0;\n right: 0;\n padding-bottom: 32.5vw;\n background-color: #F1F1F1;\n margin-left: 20vw;\n clip-path: polygon(0 0, 100% 0, 100% 100%);\n .image-wrap {\n @include absolute-fill();\n background-size: cover;\n img {\n display: none;\n }\n }\n }\n}\n\n@media screen and (max-width: $screen-desktop-max) {\n .container {\n min-height: 50vw;\n .sleeve {\n flex-wrap: wrap;\n .content-wrap {\n width: 60%;\n padding: 18vw $spacer-3 $spacer-3 $spacer-3;\n margin-bottom: 50px;\n }\n .graphic-wrap {\n margin-left: 0;\n bottom: auto;\n padding-bottom: 50vw;\n }\n }\n }\n}\n\n\n@media screen and (max-width: $screen-tablet-max) {\n .container {\n .sleeve {\n .content-wrap {\n width: 70%;\n padding-top: $spacer-8;\n }\n }\n }\n}\n\n@media screen and (max-width: $screen-mobile-max) {\n .container {\n .sleeve {\n .content-wrap {\n width: 80%;\n }\n }\n }\n}\n\n@media screen and (max-width: $screen-mobile-small) {\n .container {\n .sleeve {\n .content-wrap {\n width: 100%;\n }\n }\n }\n}\n","/* eslint-disable prettier/prettier /\nimport {Component, h, Prop} from '@stencil/core';\nimport {brandColour} from '../../globals/brand-colour';\nimport {spacingOption} from '../../globals/spacing-option';\n\n\n@Component({\n tag: 'biggive-hero-image',\n styleUrl: 'biggive-hero-image.scss',\n shadow: true,\n})\nexport class BiggiveHeroImage {\n /\n Space below component\n /\n @Prop() spaceBelow: spacingOption = 0;\n\n /\n Colour Scheme\n /\n @Prop() colourScheme: brandColour = 'primary';\n\n /\n Header slug\n /\n @Prop() slug: string;\n\n /\n Header slug colour\n /\n @Prop() slugColour: brandColour;\n\n /\n Full URL of a logo image.\n /\n @Prop() logo: string = '';\n\n /\n Logo container height selection. Numbers are not measurements.\n /\n @Prop() logoHeight: 1\|2\|3\|4\|5\|6\|7\|8\|9\|10 = 3;\n\n /\n Logo alt text\n /\n @Prop() logoAltText: string = '';\n\n /\n Full URL of a main hero image.\n /\n @Prop() mainImage: string\|null = null;\n\n /\n Determines whether the main image is clipped to a triangle shape (default) or used as\n * a background for the entire component. Clipping can leave a lot of blank space.\n /\n @Prop() mainImageShape: 'triangle'\|'rectangle' = 'triangle';\n\n /\n Horizontal alignment of image\n /\n @Prop() mainImageAlignHorizontal: string = 'center';\n\n /\n Vertical alignment of image\n /\n @Prop() mainImageAlignVertical: string = 'center';\n\n /\n Hero image title, typically the page.\n /\n @Prop() mainTitle: string;\n /\n Main title colour\n /\n @Prop() mainTitleColour?: brandColour;\n /\n Introductory teaser text\n /\n @Prop() teaser: string\|undefined;\n /\n Teaser colour\n /\n @Prop() teaserColour?: brandColour;\n /\n Button Url\n /\n @Prop() buttonUrl: string;\n\n /\n Button Label\n /\n @Prop() buttonLabel: string;\n\n /\n Button Colour Scheme\n /\n @Prop() buttonColourScheme: brandColour = 'primary';\n\n\n render() {\n const mainTitleClasses = 'main-title ' + (typeof this.mainTitleColour === 'string' && this.mainTitleColour.length > 0 ? `text-colour-${this.mainTitleColour}` : '');\n const teaserClasses = 'teaser ' +\n (this.buttonLabel?.length > 0 ? 'teaser-with-space ' : '') +\n (typeof this.teaserColour === 'string' && this.teaserColour.length > 0 ? `text-colour-${this.teaserColour}` : '');\n\n // Charities can use line breaks in their copy so we convert them to BR tags to display. Using this rather than\n // `pre` or `pre-wrap` so that literal whitespace inserted into the rendered output doesn't affect the layout.\n // Assuming that this is needed only for the teaser, and the main title would never contain a line break.\n const teaserLines = this.lineBreakToBr(this.teaser);\n\n return (\n <div class={'container colour-scheme-' + this.colourScheme + ' space-below-' + this.spaceBelow}\n style={this.mainImageShape === 'rectangle' ? {'background-image': 'url(' + this.mainImage + ')', 'background-size': 'cover'} : {}}\n >\n <div class=\"sleeve\">\n <div class=\"content-wrap\" >\n {this.logo !== undefined && this.logo !== null ? (\n <div class={'logo image-wrap logo-height-'+this.logoHeight}>\n <img src={this.logo} alt={this.logoAltText} title={this.logoAltText}/>\n </div>\n ) : <div class={'logo-space logo-height-'+this.logoHeight}></div>}\n {this.logo?.length > 0 \|\| this.slug?.length > 0\n ? (<div class={'slug text-colour-'+this.slugColour}>{this.slug}</div>)\n : null\n }\n <h1 class={mainTitleClasses}>{this.mainTitle}</h1>\n <div class={teaserClasses}>{teaserLines}</div>\n {this.buttonLabel != null && this.buttonUrl != null\n ? <biggive-button colour-scheme={this.buttonColourScheme} url={this.buttonUrl} label={this.buttonLabel}></biggive-button>\n : null\n }\n </div>\n {this.mainImageShape === 'triangle' && this.mainImage !== null ? (\n <div class=\"graphic-wrap\">\n <div\n class=\"image-wrap\"\n role=\"presentation\"\n style={{ 'background-image': 'url(' + this.mainImage + ')', 'background-position': this.mainImageAlignHorizontal + ' ' + this.mainImageAlignVertical }}\n >\n </div>\n </div>\n ) : null}\n </div>\n </div>\n );\n }\n\n /\n Takes a string that may contain any form of newlines, and returns an array that alternates\n * between substrings found between the newlines and <br/> elements as objects.\n */\n private lineBreakToBr(string: string\|undefined): unknown[] {\n if (string == undefined) {\n return [];\n }\n\n return string.split(/\\r?\\n\|\\r\|\\n/g)\n .map(line => [line, <br/>])\n .flat()\n .slice(0, -1);\n }\n}\n"],"version":3}
1	+ {"file":"biggive-hero-image.js","mappings":"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","names":["BiggiveHeroImage","__stencil_proxyCustomElement"],"sources":["src/components/biggive-hero-image/biggive-hero-image.scss?tag=biggive-hero-image&encapsulation=shadow","src/components/biggive-hero-image/biggive-hero-image.tsx"],"sourcesContent":["@include image-alignment();\n@include spacers();\n@include text-colours();\n\n:host {\n display: contents;\n @include standard-font();\n}\n\n.container {\n @include standard-font();\n overflow: hidden;\n position: relative;\n margin-bottom: $spacer-4;\n min-height: 32.5vw;\n @each $key, $colour in $brandColours {\n &.colour-scheme-#{$key} { color: $colour; }\n }\n .sleeve {\n @include flex-container-row();\n max-width: $screen-desktop-max;\n margin-left: auto;\n margin-right: auto;\n }\n .content-wrap {\n width: 40%;\n position: relative;\n z-index: 1;\n padding: $spacer-8 $spacer-6 $spacer-6 $spacer-0;\n\n .logo, .logo-space {\n height: 75px;\n &.logo-height-1 { height: 50px; }\n &.logo-height-2 { height: 75px; }\n &.logo-height-3 { height: 100px; }\n &.logo-height-4 { height: 125px; }\n &.logo-height-5 { height: 150px; }\n &.logo-height-6 { height: 175px; }\n &.logo-height-7 { height: 200px; }\n &.logo-height-8 { height: 225px; }\n &.logo-height-9 { height: 250px; }\n &.logo-height-10 { height: 275px; }\n }\n\n .logo {\n background-size: contain;\n background-repeat: no-repeat;\n background-position: left center;\n\n img {\n width: auto;\n height: 100%;\n position: relative;\n }\n }\n .slug {\n @include heading-4;\n min-height: 24px; // Sort layout when there is no slug.\n margin: 0;\n padding: 0;\n }\n h1 {\n @include heading-1;\n margin: 0 0 $spacer-3 0;\n padding: 0;\n\n @media (max-width: $screen-desktop-max) {\n @include heading-2;\n }\n }\n .teaser {\n margin: 0;\n padding: 0;\n }\n .teaser-with-space {\n margin: 0 0 $spacer-5 0;\n }\n }\n\n .graphic-wrap {\n position: absolute;\n display: block;\n top: 0;\n left: 0;\n right: 0;\n padding-bottom: 32.5vw;\n background-color: #F1F1F1;\n margin-left: 20vw;\n clip-path: polygon(0 0, 100% 0, 100% 100%);\n .image-wrap {\n @include absolute-fill();\n background-size: cover;\n img {\n display: none;\n }\n }\n }\n}\n\n@media screen and (max-width: $screen-desktop-max) {\n .container {\n min-height: 50vw;\n .sleeve {\n flex-wrap: wrap;\n .content-wrap {\n width: 60%;\n padding: 18vw $spacer-3 $spacer-3 $spacer-3;\n margin-bottom: 50px;\n }\n .graphic-wrap {\n margin-left: 0;\n bottom: auto;\n padding-bottom: 50vw;\n }\n }\n }\n}\n\n\n@media screen and (max-width: $screen-tablet-max) {\n .container {\n .sleeve {\n .content-wrap {\n width: 70%;\n padding-top: $spacer-8;\n }\n }\n }\n}\n\n@media screen and (max-width: $screen-mobile-max) {\n .container {\n .sleeve {\n .content-wrap {\n width: 80%;\n }\n }\n }\n}\n\n@media screen and (max-width: $screen-mobile-small) {\n .container {\n .sleeve {\n .content-wrap {\n width: 100%;\n }\n }\n }\n}\n","/* eslint-disable prettier/prettier /\nimport {Component, h, Prop} from '@stencil/core';\nimport {brandColour} from '../../globals/brand-colour';\nimport {spacingOption} from '../../globals/spacing-option';\n\n\n@Component({\n tag: 'biggive-hero-image',\n styleUrl: 'biggive-hero-image.scss',\n shadow: true,\n})\nexport class BiggiveHeroImage {\n /\n Space below component\n /\n @Prop() spaceBelow: spacingOption = 0;\n\n /\n Colour Scheme\n /\n @Prop() colourScheme: brandColour = 'primary';\n\n /\n Header slug\n /\n @Prop() slug: string;\n\n /\n Header slug colour\n /\n @Prop() slugColour: brandColour;\n\n /\n Full URL of a logo image.\n /\n @Prop() logo: string = '';\n\n /\n Logo container height selection. Numbers are not measurements.\n /\n @Prop() logoHeight: 1\|2\|3\|4\|5\|6\|7\|8\|9\|10 = 3;\n\n /\n Logo alt text\n /\n @Prop() logoAltText: string = '';\n\n /\n Full URL of a main hero image.\n /\n @Prop() mainImage: string\|null = null;\n\n /\n Determines whether the main image is clipped to a triangle shape (default) or used as\n * a background for the entire component. Clipping can leave a lot of blank space.\n /\n @Prop() mainImageShape: 'triangle'\|'rectangle' = 'triangle';\n\n /\n Horizontal alignment of image\n /\n @Prop() mainImageAlignHorizontal: string = 'center';\n\n /\n Vertical alignment of image\n /\n @Prop() mainImageAlignVertical: string = 'center';\n\n /\n Hero image title, typically the page.\n /\n @Prop() mainTitle: string;\n /\n Main title colour\n /\n @Prop() mainTitleColour?: brandColour;\n /\n Introductory teaser text\n /\n @Prop() teaser: string\|undefined;\n /\n Teaser colour\n /\n @Prop() teaserColour?: brandColour;\n /\n Button Url\n /\n @Prop() buttonUrl: string;\n\n /\n Button Label\n /\n @Prop() buttonLabel: string;\n\n /\n Button Colour Scheme\n /\n @Prop() buttonColourScheme: brandColour = 'primary';\n\n\n render() {\n const mainTitleClasses = 'main-title ' + (typeof this.mainTitleColour === 'string' && this.mainTitleColour.length > 0 ? `text-colour-${this.mainTitleColour}` : '');\n const teaserClasses = 'teaser ' +\n (this.buttonLabel?.length > 0 ? 'teaser-with-space ' : '') +\n (typeof this.teaserColour === 'string' && this.teaserColour.length > 0 ? `text-colour-${this.teaserColour}` : '');\n\n // Charities can use line breaks in their copy so we convert them to BR tags to display. Using this rather than\n // `pre` or `pre-wrap` so that literal whitespace inserted into the rendered output doesn't affect the layout.\n // Assuming that this is needed only for the teaser, and the main title would never contain a line break.\n const teaserLines = this.lineBreakToBr(this.teaser);\n\n return (\n <div class={'container colour-scheme-' + this.colourScheme + ' space-below-' + this.spaceBelow}\n style={this.mainImageShape === 'rectangle' ? {'background-image': 'url(' + this.mainImage + ')', 'background-size': 'cover'} : {}}\n >\n <div class=\"sleeve\">\n <div class=\"content-wrap\" >\n {this.logo !== undefined && this.logo !== null ? (\n <div class={'logo image-wrap logo-height-'+this.logoHeight}>\n <img src={this.logo} alt={this.logoAltText} title={this.logoAltText}/>\n </div>\n ) : <div class={'logo-space logo-height-'+this.logoHeight}></div>}\n {this.logo?.length > 0 \|\| this.slug?.length > 0\n ? (<div class={'slug text-colour-'+this.slugColour}>{this.slug}</div>)\n : null\n }\n <h1 class={mainTitleClasses}>{this.mainTitle}</h1>\n <div class={teaserClasses}>{teaserLines}</div>\n {this.buttonLabel != null && this.buttonUrl != null\n ? <biggive-button colour-scheme={this.buttonColourScheme} url={this.buttonUrl} label={this.buttonLabel}></biggive-button>\n : null\n }\n </div>\n {this.mainImageShape === 'triangle' && this.mainImage !== null ? (\n <div class=\"graphic-wrap\">\n <div\n class=\"image-wrap\"\n role=\"presentation\"\n style={{ 'background-image': 'url(' + this.mainImage + ')', 'background-position': this.mainImageAlignHorizontal + ' ' + this.mainImageAlignVertical }}\n >\n </div>\n </div>\n ) : null}\n </div>\n </div>\n );\n }\n\n /\n Takes a string that may contain any form of newlines, and returns an array that alternates\n * between substrings found between the newlines and <br/> elements as objects.\n */\n private lineBreakToBr(string: string\|undefined): unknown[] {\n if (string == undefined) {\n return [];\n }\n\n return string.split(/\\r?\\n\|\\r\|\\n/g)\n .map(line => [line, <br/>])\n .flat()\n .slice(0, -1);\n }\n}\n"],"version":3}

package/dist/components/biggive-icon-button.js CHANGED Viewed

@@ -4,9 +4,11 @@ import { d as defineCustomElement$2 } from './biggive-misc-icon2.js';
 const biggiveIconButtonCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-cc-red:hover,.background-colour-brand-cc-red{background-color:#B30510}.background-colour-hover-brand-wgmf-purple:hover,.background-colour-brand-wgmf-purple{background-color:#6E0887}.background-colour-hover-brand-gmf-green:hover,.background-colour-brand-gmf-green{background-color:#50B400}.background-colour-hover-brand-er-green:hover,.background-colour-brand-er-green{background-color:#50B400}.background-colour-hover-brand-er-dark-green:hover,.background-colour-brand-er-dark-green{background-color:#002413}.background-colour-hover-brand-er-dark-blue:hover,.background-colour-brand-er-dark-blue{background-color:#0c0068}.background-colour-hover-brand-er-teal:hover,.background-colour-brand-er-teal{background-color:#00a76d}.background-colour-hover-brand-emf-yellow:hover,.background-colour-brand-emf-yellow{background-color:#FFE500}.background-colour-hover-brand-c4c-orange:hover,.background-colour-brand-c4c-orange{background-color:#F07D00}.background-colour-hover-brand-afa-pink:hover,.background-colour-brand-afa-pink{background-color:#BF387D}.background-colour-hover-brand-scw-magenta:hover,.background-colour-brand-scw-magenta{background-color:#EE2C65}.background-colour-hover-brand-mhf-turquoise:hover,.background-colour-brand-mhf-turquoise{background-color:#62CFC9}.background-colour-hover-brand-grey:hover,.background-colour-brand-grey{background-color:#CBC8C8}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.background-colour-hover-philco-orange:hover,.background-colour-philco-orange{background-color:#f18a00}.background-colour-hover-philco-gray-90:hover,.background-colour-philco-gray-90{background-color:#1d1d1B}.background-colour-hover-philco-gray-70:hover,.background-colour-philco-gray-70{background-color:#7D7D7D}.background-colour-hover-philco-white:hover,.background-colour-philco-white{background-color:#FFFFFF}.background-colour-hover-philco-success-green:hover,.background-colour-philco-success-green{background-color:#1Ec691}.background-colour-hover-philco-error-coral:hover,.background-colour-philco-error-coral{background-color:#F54242}.background-colour-hover-philco-gray-30:hover,.background-colour-philco-gray-30{background-color:#BBBBBB}.background-colour-hover-philco-gray-20:hover,.background-colour-philco-gray-20{background-color:#F6F6F6}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-cc-red:hover,.text-colour-brand-cc-red{color:#B30510}.text-colour-hover-brand-wgmf-purple:hover,.text-colour-brand-wgmf-purple{color:#6E0887}.text-colour-hover-brand-gmf-green:hover,.text-colour-brand-gmf-green{color:#50B400}.text-colour-hover-brand-er-green:hover,.text-colour-brand-er-green{color:#50B400}.text-colour-hover-brand-er-dark-green:hover,.text-colour-brand-er-dark-green{color:#002413}.text-colour-hover-brand-er-dark-blue:hover,.text-colour-brand-er-dark-blue{color:#0c0068}.text-colour-hover-brand-er-teal:hover,.text-colour-brand-er-teal{color:#00a76d}.text-colour-hover-brand-emf-yellow:hover,.text-colour-brand-emf-yellow{color:#FFE500}.text-colour-hover-brand-c4c-orange:hover,.text-colour-brand-c4c-orange{color:#F07D00}.text-colour-hover-brand-afa-pink:hover,.text-colour-brand-afa-pink{color:#BF387D}.text-colour-hover-brand-scw-magenta:hover,.text-colour-brand-scw-magenta{color:#EE2C65}.text-colour-hover-brand-mhf-turquoise:hover,.text-colour-brand-mhf-turquoise{color:#62CFC9}.text-colour-hover-brand-grey:hover,.text-colour-brand-grey{color:#CBC8C8}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}.text-colour-hover-philco-orange:hover,.text-colour-philco-orange{color:#f18a00}.text-colour-hover-philco-gray-90:hover,.text-colour-philco-gray-90{color:#1d1d1B}.text-colour-hover-philco-gray-70:hover,.text-colour-philco-gray-70{color:#7D7D7D}.text-colour-hover-philco-white:hover,.text-colour-philco-white{color:#FFFFFF}.text-colour-hover-philco-success-green:hover,.text-colour-philco-success-green{color:#1Ec691}.text-colour-hover-philco-error-coral:hover,.text-colour-philco-error-coral{color:#F54242}.text-colour-hover-philco-gray-30:hover,.text-colour-philco-gray-30{color:#BBBBBB}.text-colour-hover-philco-gray-20:hover,.text-colour-philco-gray-20{color:#F6F6F6}:host{display:contents}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}.container a{display:block;text-decoration:none}.container a.full-width-true{display:block}.container.centered-true{text-align:center}.container.shadow-true{filter:drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.25))}.container.rounded-true{border-radius:10px}.container.background-padding-1{padding:5px}.container.background-padding-2{padding:10px}.container.background-padding-3{padding:15px}.container.background-padding-4{padding:30px}.container.background-padding-5{padding:45px}.container.background-padding-6{padding:60px}.container .sleeve{display:flex}.container .sleeve .text-wrap{margin:auto 0;text-decoration:none}.container .sleeve .text-wrap.text-padding-1{padding:0 5px}.container .sleeve .text-wrap.text-padding-2{padding:0 10px}.container .sleeve .text-wrap.text-padding-3{padding:0 15px}.container .sleeve .text-wrap.text-padding-4{padding:0 30px}.container .sleeve .text-wrap.text-padding-5{padding:0 45px}.container .sleeve .text-wrap.text-padding-6{padding:0 60px}.container .sleeve .arrow-wrap{margin:auto 0 auto auto}.container .sleeve .arrow-wrap.arrow-colour-primary .arrow-wrap svg path{stroke:#2C089B}.container .sleeve .arrow-wrap.arrow-colour-secondary .arrow-wrap svg path{stroke:#2AF135}.container .sleeve .arrow-wrap.arrow-colour-tertiary .arrow-wrap svg path{stroke:#FF7272}.container .sleeve .arrow-wrap.arrow-colour-brand-cc-red .arrow-wrap svg path{stroke:#B30510}.container .sleeve .arrow-wrap.arrow-colour-brand-wgmf-purple .arrow-wrap svg path{stroke:#6E0887}.container .sleeve .arrow-wrap.arrow-colour-brand-gmf-green .arrow-wrap svg path{stroke:#50B400}.container .sleeve .arrow-wrap.arrow-colour-brand-er-green .arrow-wrap svg path{stroke:#50B400}.container .sleeve .arrow-wrap.arrow-colour-brand-er-dark-green .arrow-wrap svg path{stroke:#002413}.container .sleeve .arrow-wrap.arrow-colour-brand-er-dark-blue .arrow-wrap svg path{stroke:#0c0068}.container .sleeve .arrow-wrap.arrow-colour-brand-er-teal .arrow-wrap svg path{stroke:#00a76d}.container .sleeve .arrow-wrap.arrow-colour-brand-emf-yellow .arrow-wrap svg path{stroke:#FFE500}.container .sleeve .arrow-wrap.arrow-colour-brand-c4c-orange .arrow-wrap svg path{stroke:#F07D00}.container .sleeve .arrow-wrap.arrow-colour-brand-afa-pink .arrow-wrap svg path{stroke:#BF387D}.container .sleeve .arrow-wrap.arrow-colour-brand-scw-magenta .arrow-wrap svg path{stroke:#EE2C65}.container .sleeve .arrow-wrap.arrow-colour-brand-mhf-turquoise .arrow-wrap svg path{stroke:#62CFC9}.container .sleeve .arrow-wrap.arrow-colour-brand-grey .arrow-wrap svg path{stroke:#CBC8C8}.container .sleeve .arrow-wrap.arrow-colour-white .arrow-wrap svg path{stroke:#FFFFFF}.container .sleeve .arrow-wrap.arrow-colour-black .arrow-wrap svg path{stroke:#000000}.container .sleeve .arrow-wrap.arrow-colour-grey-extra-light .arrow-wrap svg path{stroke:#D7D7D7}.container .sleeve .arrow-wrap.arrow-colour-grey-light .arrow-wrap svg path{stroke:#E8E8E8}.container .sleeve .arrow-wrap.arrow-colour-grey-medium .arrow-wrap svg path{stroke:#8A8A8A}.container .sleeve .arrow-wrap.arrow-colour-grey-dark .arrow-wrap svg path{stroke:#4A4A4A}.container .sleeve .arrow-wrap.arrow-colour-philco-orange .arrow-wrap svg path{stroke:#f18a00}.container .sleeve .arrow-wrap.arrow-colour-philco-gray-90 .arrow-wrap svg path{stroke:#1d1d1B}.container .sleeve .arrow-wrap.arrow-colour-philco-gray-70 .arrow-wrap svg path{stroke:#7D7D7D}.container .sleeve .arrow-wrap.arrow-colour-philco-white .arrow-wrap svg path{stroke:#FFFFFF}.container .sleeve .arrow-wrap.arrow-colour-philco-success-green .arrow-wrap svg path{stroke:#1Ec691}.container .sleeve .arrow-wrap.arrow-colour-philco-error-coral .arrow-wrap svg path{stroke:#F54242}.container .sleeve .arrow-wrap.arrow-colour-philco-gray-30 .arrow-wrap svg path{stroke:#BBBBBB}.container .sleeve .arrow-wrap.arrow-colour-philco-gray-20 .arrow-wrap svg path{stroke:#F6F6F6}.container .icon-wrap{background-position:center center;background-size:cover}.container .icon-wrap.circle-true{border-radius:50%;overflow:hidden}.container .icon-wrap.size-small{width:30px;height:30px}.container .icon-wrap.size-medium{width:45px;height:45px}.container .icon-wrap.size-large{width:60px;height:60px}.container .icon-wrap.size-x-large{width:75px;height:75px}.container .icon-wrap.size-xx-large{width:90px;height:90px}.container .icon-wrap .misc-icon-item{width:100%;height:100%}.container .icon-wrap .misc-icon-item a{padding:20%}.container.arrow-colour-primary .arrow-wrap svg path{stroke:#2C089B}.container.arrow-colour-secondary .arrow-wrap svg path{stroke:#2AF135}.container.arrow-colour-tertiary .arrow-wrap svg path{stroke:#FF7272}.container.arrow-colour-brand-cc-red .arrow-wrap svg path{stroke:#B30510}.container.arrow-colour-brand-wgmf-purple .arrow-wrap svg path{stroke:#6E0887}.container.arrow-colour-brand-gmf-green .arrow-wrap svg path{stroke:#50B400}.container.arrow-colour-brand-er-green .arrow-wrap svg path{stroke:#50B400}.container.arrow-colour-brand-er-dark-green .arrow-wrap svg path{stroke:#002413}.container.arrow-colour-brand-er-dark-blue .arrow-wrap svg path{stroke:#0c0068}.container.arrow-colour-brand-er-teal .arrow-wrap svg path{stroke:#00a76d}.container.arrow-colour-brand-emf-yellow .arrow-wrap svg path{stroke:#FFE500}.container.arrow-colour-brand-c4c-orange .arrow-wrap svg path{stroke:#F07D00}.container.arrow-colour-brand-afa-pink .arrow-wrap svg path{stroke:#BF387D}.container.arrow-colour-brand-scw-magenta .arrow-wrap svg path{stroke:#EE2C65}.container.arrow-colour-brand-mhf-turquoise .arrow-wrap svg path{stroke:#62CFC9}.container.arrow-colour-brand-grey .arrow-wrap svg path{stroke:#CBC8C8}.container.arrow-colour-white .arrow-wrap svg path{stroke:#FFFFFF}.container.arrow-colour-black .arrow-wrap svg path{stroke:#000000}.container.arrow-colour-grey-extra-light .arrow-wrap svg path{stroke:#D7D7D7}.container.arrow-colour-grey-light .arrow-wrap svg path{stroke:#E8E8E8}.container.arrow-colour-grey-medium .arrow-wrap svg path{stroke:#8A8A8A}.container.arrow-colour-grey-dark .arrow-wrap svg path{stroke:#4A4A4A}.container.arrow-colour-philco-orange .arrow-wrap svg path{stroke:#f18a00}.container.arrow-colour-philco-gray-90 .arrow-wrap svg path{stroke:#1d1d1B}.container.arrow-colour-philco-gray-70 .arrow-wrap svg path{stroke:#7D7D7D}.container.arrow-colour-philco-white .arrow-wrap svg path{stroke:#FFFFFF}.container.arrow-colour-philco-success-green .arrow-wrap svg path{stroke:#1Ec691}.container.arrow-colour-philco-error-coral .arrow-wrap svg path{stroke:#F54242}.container.arrow-colour-philco-gray-30 .arrow-wrap svg path{stroke:#BBBBBB}.container.arrow-colour-philco-gray-20 .arrow-wrap svg path{stroke:#F6F6F6}";
 const BiggiveIconButton$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveIconButton extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.doButtonClick = createEvent(this, "doButtonClick", 7);
         this.spaceBelow = 1;

package/dist/components/biggive-icon-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"biggive-icon-button.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,w/YAAw/Y;;MCSxgZA,mBAAiB,iBAAAC,kBAAA,CAAA,MAAA,iBAAA,SAAA,WAAA,CAAA;AAL9B,IAAA,WAAA,~~GAAA;;;;;~~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","names":["BiggiveIconButton","__stencil_proxyCustomElement"],"sources":["src/components/biggive-icon-button/biggive-icon-button.scss?tag=biggive-icon-button&encapsulation=shadow","src/components/biggive-icon-button/biggive-icon-button.tsx"],"sourcesContent":["@include backgrounds();\n@include spacers();\n@include text-colours();\n\n:host {\n display: contents;\n}\n\n.container {\n @include standard-font();\n a {\n display: block;\n text-decoration: none;\n &.full-width-true {\n display: block;\n }\n }\n &.centered-true {\n text-align: center;\n }\n &.shadow-true {\n filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.25));\n }\n &.rounded-true {\n border-radius: 10px;\n }\n &.background-padding-1 { padding: $spacer-1; }\n &.background-padding-2 { padding: $spacer-2; }\n &.background-padding-3 { padding: $spacer-3; }\n &.background-padding-4 { padding: $spacer-4; }\n &.background-padding-5 { padding: $spacer-5; }\n &.background-padding-6 { padding: $spacer-6; }\n\n .sleeve {\n display: flex;\n .text-wrap {\n margin: auto 0;\n text-decoration: none;\n &.text-padding-1 { padding: 0 $spacer-1; }\n &.text-padding-2 { padding: 0 $spacer-2; }\n &.text-padding-3 { padding: 0 $spacer-3; }\n &.text-padding-4 { padding: 0 $spacer-4; }\n &.text-padding-5 { padding: 0 $spacer-5; }\n &.text-padding-6 { padding: 0 $spacer-6; }\n }\n\n .arrow-wrap {\n margin: auto 0 auto auto;\n @each $key, $colour in $brandColours {\n &.arrow-colour-#{$key} .arrow-wrap svg path { stroke: $colour; }\n }\n }\n }\n\n .icon-wrap {\n background-position: center center;\n background-size: cover;\n\n &.circle-true {\n border-radius: 50%;\n overflow: hidden;\n }\n\n &.size-small {\n width: 30px;\n height: 30px;\n }\n &.size-medium {\n width: 45px;\n height: 45px;\n }\n &.size-large {\n width: 60px;\n height: 60px;\n }\n &.size-x-large {\n width: 75px;\n height: 75px;\n }\n &.size-xx-large {\n width: 90px;\n height: 90px;\n }\n\n .misc-icon-item {\n width: 100%;\n height: 100%;\n }\n\n .misc-icon-item a {\n padding: 20%;\n }\n\n }\n\n @each $key, $colour in $brandColours {\n &.arrow-colour-#{$key} .arrow-wrap svg path { stroke: $colour; }\n }\n}\n","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n tag: 'biggive-icon-button',\n styleUrl: 'biggive-icon-button.scss',\n shadow: true,\n})\nexport class BiggiveIconButton {\n @Event({\n eventName: 'doButtonClick',\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n doButtonClick: EventEmitter<{ event: object; url: string }>;\n\n @Prop() spaceBelow: spacingOption = 1;\n\n @Prop() backgroundColour: brandColour = 'white';\n\n @Prop() backgroundPadding: spacingOption = 0;\n\n @Prop() text: string;\n\n @Prop() textColour: brandColour = 'black';\n\n @Prop() icon: string;\n\n @Prop() url: string;\n\n @Prop() openInNewTab: boolean = false;\n\n @Prop() size: 'small' \| 'medium' \| 'large' \| 'x-large' \| 'xx-large' = 'medium';\n\n @Prop() arrow: boolean = false;\n\n @Prop() arrowColour: brandColour = 'black';\n\n @Prop() circle: boolean = false;\n\n @Prop() shadow: boolean = false;\n\n @Prop() centered: boolean = false;\n\n @Prop() rounded: boolean = false;\n\n @Prop() buttonId: undefined \| string = undefined;\n\n private handleButtonClick = (event: any) => {\n this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });\n };\n\n render() {\n return (\n <div\n class={\n 'container space-below-' +\n this.spaceBelow +\n ' background-colour-' +\n this.backgroundColour +\n ' background-padding-' +\n this.backgroundPadding +\n ' centered-' +\n this.centered +\n ' rounded-' +\n this.rounded +\n ' shadow-' +\n this.shadow\n }\n >\n <a href={this.url} target={this.openInNewTab ? '_blank' : '_self'} id={this.buttonId}>\n <div class=\"sleeve\" onClick={this.handleButtonClick}>\n <div class={'icon-wrap ' + ' size-' + this.size + ' circle-' + this.circle.toString()}>\n <biggive-misc-icon icon={this.icon}></biggive-misc-icon>\n </div>\n\n {this.text != '' ? <div class={'text-wrap text-colour-' + this.textColour + ' text-padding-' + this.backgroundPadding}>{this.text}</div> : null}\n\n {this.arrow ? (\n <div class={'arrow-wrap arrow-colour-' + this.arrowColour}>\n <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0.76912 1.0791L5.73828 6.04826L0.769121 11.0174\" stroke=\"black\" stroke-width=\"2\" />\n </svg>\n </div>\n ) : null}\n </div>\n </a>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"biggive-icon-button.js","mappings":"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","names":["BiggiveIconButton","__stencil_proxyCustomElement"],"sources":["src/components/biggive-icon-button/biggive-icon-button.scss?tag=biggive-icon-button&encapsulation=shadow","src/components/biggive-icon-button/biggive-icon-button.tsx"],"sourcesContent":["@include backgrounds();\n@include spacers();\n@include text-colours();\n\n:host {\n display: contents;\n}\n\n.container {\n @include standard-font();\n a {\n display: block;\n text-decoration: none;\n &.full-width-true {\n display: block;\n }\n }\n &.centered-true {\n text-align: center;\n }\n &.shadow-true {\n filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.25));\n }\n &.rounded-true {\n border-radius: 10px;\n }\n &.background-padding-1 { padding: $spacer-1; }\n &.background-padding-2 { padding: $spacer-2; }\n &.background-padding-3 { padding: $spacer-3; }\n &.background-padding-4 { padding: $spacer-4; }\n &.background-padding-5 { padding: $spacer-5; }\n &.background-padding-6 { padding: $spacer-6; }\n\n .sleeve {\n display: flex;\n .text-wrap {\n margin: auto 0;\n text-decoration: none;\n &.text-padding-1 { padding: 0 $spacer-1; }\n &.text-padding-2 { padding: 0 $spacer-2; }\n &.text-padding-3 { padding: 0 $spacer-3; }\n &.text-padding-4 { padding: 0 $spacer-4; }\n &.text-padding-5 { padding: 0 $spacer-5; }\n &.text-padding-6 { padding: 0 $spacer-6; }\n }\n\n .arrow-wrap {\n margin: auto 0 auto auto;\n @each $key, $colour in $brandColours {\n &.arrow-colour-#{$key} .arrow-wrap svg path { stroke: $colour; }\n }\n }\n }\n\n .icon-wrap {\n background-position: center center;\n background-size: cover;\n\n &.circle-true {\n border-radius: 50%;\n overflow: hidden;\n }\n\n &.size-small {\n width: 30px;\n height: 30px;\n }\n &.size-medium {\n width: 45px;\n height: 45px;\n }\n &.size-large {\n width: 60px;\n height: 60px;\n }\n &.size-x-large {\n width: 75px;\n height: 75px;\n }\n &.size-xx-large {\n width: 90px;\n height: 90px;\n }\n\n .misc-icon-item {\n width: 100%;\n height: 100%;\n }\n\n .misc-icon-item a {\n padding: 20%;\n }\n\n }\n\n @each $key, $colour in $brandColours {\n &.arrow-colour-#{$key} .arrow-wrap svg path { stroke: $colour; }\n }\n}\n","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n tag: 'biggive-icon-button',\n styleUrl: 'biggive-icon-button.scss',\n shadow: true,\n})\nexport class BiggiveIconButton {\n @Event({\n eventName: 'doButtonClick',\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n doButtonClick: EventEmitter<{ event: object; url: string }>;\n\n @Prop() spaceBelow: spacingOption = 1;\n\n @Prop() backgroundColour: brandColour = 'white';\n\n @Prop() backgroundPadding: spacingOption = 0;\n\n @Prop() text: string;\n\n @Prop() textColour: brandColour = 'black';\n\n @Prop() icon: string;\n\n @Prop() url: string;\n\n @Prop() openInNewTab: boolean = false;\n\n @Prop() size: 'small' \| 'medium' \| 'large' \| 'x-large' \| 'xx-large' = 'medium';\n\n @Prop() arrow: boolean = false;\n\n @Prop() arrowColour: brandColour = 'black';\n\n @Prop() circle: boolean = false;\n\n @Prop() shadow: boolean = false;\n\n @Prop() centered: boolean = false;\n\n @Prop() rounded: boolean = false;\n\n @Prop() buttonId: undefined \| string = undefined;\n\n private handleButtonClick = (event: any) => {\n this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });\n };\n\n render() {\n return (\n <div\n class={\n 'container space-below-' +\n this.spaceBelow +\n ' background-colour-' +\n this.backgroundColour +\n ' background-padding-' +\n this.backgroundPadding +\n ' centered-' +\n this.centered +\n ' rounded-' +\n this.rounded +\n ' shadow-' +\n this.shadow\n }\n >\n <a href={this.url} target={this.openInNewTab ? '_blank' : '_self'} id={this.buttonId}>\n <div class=\"sleeve\" onClick={this.handleButtonClick}>\n <div class={'icon-wrap ' + ' size-' + this.size + ' circle-' + this.circle.toString()}>\n <biggive-misc-icon icon={this.icon}></biggive-misc-icon>\n </div>\n\n {this.text != '' ? <div class={'text-wrap text-colour-' + this.textColour + ' text-padding-' + this.backgroundPadding}>{this.text}</div> : null}\n\n {this.arrow ? (\n <div class={'arrow-wrap arrow-colour-' + this.arrowColour}>\n <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0.76912 1.0791L5.73828 6.04826L0.769121 11.0174\" stroke=\"black\" stroke-width=\"2\" />\n </svg>\n </div>\n ) : null}\n </div>\n </a>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/biggive-image-button.js CHANGED Viewed

@@ -3,9 +3,11 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 const biggiveImageButtonCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-cc-red:hover,.background-colour-brand-cc-red{background-color:#B30510}.background-colour-hover-brand-wgmf-purple:hover,.background-colour-brand-wgmf-purple{background-color:#6E0887}.background-colour-hover-brand-gmf-green:hover,.background-colour-brand-gmf-green{background-color:#50B400}.background-colour-hover-brand-er-green:hover,.background-colour-brand-er-green{background-color:#50B400}.background-colour-hover-brand-er-dark-green:hover,.background-colour-brand-er-dark-green{background-color:#002413}.background-colour-hover-brand-er-dark-blue:hover,.background-colour-brand-er-dark-blue{background-color:#0c0068}.background-colour-hover-brand-er-teal:hover,.background-colour-brand-er-teal{background-color:#00a76d}.background-colour-hover-brand-emf-yellow:hover,.background-colour-brand-emf-yellow{background-color:#FFE500}.background-colour-hover-brand-c4c-orange:hover,.background-colour-brand-c4c-orange{background-color:#F07D00}.background-colour-hover-brand-afa-pink:hover,.background-colour-brand-afa-pink{background-color:#BF387D}.background-colour-hover-brand-scw-magenta:hover,.background-colour-brand-scw-magenta{background-color:#EE2C65}.background-colour-hover-brand-mhf-turquoise:hover,.background-colour-brand-mhf-turquoise{background-color:#62CFC9}.background-colour-hover-brand-grey:hover,.background-colour-brand-grey{background-color:#CBC8C8}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.background-colour-hover-philco-orange:hover,.background-colour-philco-orange{background-color:#f18a00}.background-colour-hover-philco-gray-90:hover,.background-colour-philco-gray-90{background-color:#1d1d1B}.background-colour-hover-philco-gray-70:hover,.background-colour-philco-gray-70{background-color:#7D7D7D}.background-colour-hover-philco-white:hover,.background-colour-philco-white{background-color:#FFFFFF}.background-colour-hover-philco-success-green:hover,.background-colour-philco-success-green{background-color:#1Ec691}.background-colour-hover-philco-error-coral:hover,.background-colour-philco-error-coral{background-color:#F54242}.background-colour-hover-philco-gray-30:hover,.background-colour-philco-gray-30{background-color:#BBBBBB}.background-colour-hover-philco-gray-20:hover,.background-colour-philco-gray-20{background-color:#F6F6F6}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-cc-red:hover,.text-colour-brand-cc-red{color:#B30510}.text-colour-hover-brand-wgmf-purple:hover,.text-colour-brand-wgmf-purple{color:#6E0887}.text-colour-hover-brand-gmf-green:hover,.text-colour-brand-gmf-green{color:#50B400}.text-colour-hover-brand-er-green:hover,.text-colour-brand-er-green{color:#50B400}.text-colour-hover-brand-er-dark-green:hover,.text-colour-brand-er-dark-green{color:#002413}.text-colour-hover-brand-er-dark-blue:hover,.text-colour-brand-er-dark-blue{color:#0c0068}.text-colour-hover-brand-er-teal:hover,.text-colour-brand-er-teal{color:#00a76d}.text-colour-hover-brand-emf-yellow:hover,.text-colour-brand-emf-yellow{color:#FFE500}.text-colour-hover-brand-c4c-orange:hover,.text-colour-brand-c4c-orange{color:#F07D00}.text-colour-hover-brand-afa-pink:hover,.text-colour-brand-afa-pink{color:#BF387D}.text-colour-hover-brand-scw-magenta:hover,.text-colour-brand-scw-magenta{color:#EE2C65}.text-colour-hover-brand-mhf-turquoise:hover,.text-colour-brand-mhf-turquoise{color:#62CFC9}.text-colour-hover-brand-grey:hover,.text-colour-brand-grey{color:#CBC8C8}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}.text-colour-hover-philco-orange:hover,.text-colour-philco-orange{color:#f18a00}.text-colour-hover-philco-gray-90:hover,.text-colour-philco-gray-90{color:#1d1d1B}.text-colour-hover-philco-gray-70:hover,.text-colour-philco-gray-70{color:#7D7D7D}.text-colour-hover-philco-white:hover,.text-colour-philco-white{color:#FFFFFF}.text-colour-hover-philco-success-green:hover,.text-colour-philco-success-green{color:#1Ec691}.text-colour-hover-philco-error-coral:hover,.text-colour-philco-error-coral{color:#F54242}.text-colour-hover-philco-gray-30:hover,.text-colour-philco-gray-30{color:#BBBBBB}.text-colour-hover-philco-gray-20:hover,.text-colour-philco-gray-20{color:#F6F6F6}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}.container a{display:block;text-decoration:none}.container a.full-width-true{display:block}.container.centered-true{text-align:center}.container.shadow-true{filter:drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.25))}.container.rounded-true{border-radius:10px}.container.background-padding-1{padding:5px}.container.background-padding-2{padding:10px}.container.background-padding-3{padding:15px}.container.background-padding-4{padding:30px}.container.background-padding-5{padding:45px}.container.background-padding-6{padding:60px}.container .sleeve{display:flex}.container .sleeve .text-wrap{margin:auto 0;text-decoration:none}.container .sleeve .text-wrap.text-padding-1{padding:0 5px}.container .sleeve .text-wrap.text-padding-2{padding:0 10px}.container .sleeve .text-wrap.text-padding-3{padding:0 15px}.container .sleeve .text-wrap.text-padding-4{padding:0 30px}.container .sleeve .text-wrap.text-padding-5{padding:0 45px}.container .sleeve .text-wrap.text-padding-6{padding:0 60px}.container .sleeve .arrow-wrap{margin:auto 0 auto auto}.container .sleeve .arrow-wrap.arrow-colour-primary .arrow-wrap svg path{stroke:#2C089B}.container .sleeve .arrow-wrap.arrow-colour-secondary .arrow-wrap svg path{stroke:#2AF135}.container .sleeve .arrow-wrap.arrow-colour-tertiary .arrow-wrap svg path{stroke:#FF7272}.container .sleeve .arrow-wrap.arrow-colour-brand-cc-red .arrow-wrap svg path{stroke:#B30510}.container .sleeve .arrow-wrap.arrow-colour-brand-wgmf-purple .arrow-wrap svg path{stroke:#6E0887}.container .sleeve .arrow-wrap.arrow-colour-brand-gmf-green .arrow-wrap svg path{stroke:#50B400}.container .sleeve .arrow-wrap.arrow-colour-brand-er-green .arrow-wrap svg path{stroke:#50B400}.container .sleeve .arrow-wrap.arrow-colour-brand-er-dark-green .arrow-wrap svg path{stroke:#002413}.container .sleeve .arrow-wrap.arrow-colour-brand-er-dark-blue .arrow-wrap svg path{stroke:#0c0068}.container .sleeve .arrow-wrap.arrow-colour-brand-er-teal .arrow-wrap svg path{stroke:#00a76d}.container .sleeve .arrow-wrap.arrow-colour-brand-emf-yellow .arrow-wrap svg path{stroke:#FFE500}.container .sleeve .arrow-wrap.arrow-colour-brand-c4c-orange .arrow-wrap svg path{stroke:#F07D00}.container .sleeve .arrow-wrap.arrow-colour-brand-afa-pink .arrow-wrap svg path{stroke:#BF387D}.container .sleeve .arrow-wrap.arrow-colour-brand-scw-magenta .arrow-wrap svg path{stroke:#EE2C65}.container .sleeve .arrow-wrap.arrow-colour-brand-mhf-turquoise .arrow-wrap svg path{stroke:#62CFC9}.container .sleeve .arrow-wrap.arrow-colour-brand-grey .arrow-wrap svg path{stroke:#CBC8C8}.container .sleeve .arrow-wrap.arrow-colour-white .arrow-wrap svg path{stroke:#FFFFFF}.container .sleeve .arrow-wrap.arrow-colour-black .arrow-wrap svg path{stroke:#000000}.container .sleeve .arrow-wrap.arrow-colour-grey-extra-light .arrow-wrap svg path{stroke:#D7D7D7}.container .sleeve .arrow-wrap.arrow-colour-grey-light .arrow-wrap svg path{stroke:#E8E8E8}.container .sleeve .arrow-wrap.arrow-colour-grey-medium .arrow-wrap svg path{stroke:#8A8A8A}.container .sleeve .arrow-wrap.arrow-colour-grey-dark .arrow-wrap svg path{stroke:#4A4A4A}.container .sleeve .arrow-wrap.arrow-colour-philco-orange .arrow-wrap svg path{stroke:#f18a00}.container .sleeve .arrow-wrap.arrow-colour-philco-gray-90 .arrow-wrap svg path{stroke:#1d1d1B}.container .sleeve .arrow-wrap.arrow-colour-philco-gray-70 .arrow-wrap svg path{stroke:#7D7D7D}.container .sleeve .arrow-wrap.arrow-colour-philco-white .arrow-wrap svg path{stroke:#FFFFFF}.container .sleeve .arrow-wrap.arrow-colour-philco-success-green .arrow-wrap svg path{stroke:#1Ec691}.container .sleeve .arrow-wrap.arrow-colour-philco-error-coral .arrow-wrap svg path{stroke:#F54242}.container .sleeve .arrow-wrap.arrow-colour-philco-gray-30 .arrow-wrap svg path{stroke:#BBBBBB}.container .sleeve .arrow-wrap.arrow-colour-philco-gray-20 .arrow-wrap svg path{stroke:#F6F6F6}.container .image-wrap{background-position:center center;background-size:cover}.container .image-wrap.image-style-contain{background-size:contain}.container .image-wrap.circle-true{border-radius:50%;overflow:hidden}.container .image-wrap.size-small{width:30px;height:30px}.container .image-wrap.size-medium{width:45px;height:45px}.container .image-wrap.size-large{width:60px;height:60px}.container .image-wrap.size-x-large{width:75px;height:75px}.container .image-wrap.size-xx-large{width:90px;height:90px}";
 const BiggiveImageButton$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveImageButton extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.doButtonClick = createEvent(this, "doButtonClick", 7);
         this.spaceBelow = 1;

package/dist/components/biggive-image-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"biggive-image-button.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,4xUAA4xU;;MCS7yUA,oBAAkB,iBAAAC,kBAAA,CAAA,MAAA,kBAAA,SAAA,WAAA,CAAA;AAL/B,IAAA,WAAA,~~GAAA;;;;;~~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","names":["BiggiveImageButton","__stencil_proxyCustomElement"],"sources":["src/components/biggive-image-button/biggive-image-button.scss?tag=biggive-image-button&encapsulation=shadow","src/components/biggive-image-button/biggive-image-button.tsx"],"sourcesContent":["@include backgrounds();\n@include text-colours();\n@include spacers();\n\n:host {\n display: contents;\n}\n\n.container {\n @include standard-font();\n a {\n display: block;\n text-decoration: none;\n &.full-width-true {\n display: block;\n }\n }\n &.centered-true {\n text-align: center;\n }\n &.shadow-true {\n filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.25));\n }\n &.rounded-true {\n border-radius: 10px;\n }\n &.background-padding-1 { padding: $spacer-1; }\n &.background-padding-2 { padding: $spacer-2; }\n &.background-padding-3 { padding: $spacer-3; }\n &.background-padding-4 { padding: $spacer-4; }\n &.background-padding-5 { padding: $spacer-5; }\n &.background-padding-6 { padding: $spacer-6; }\n\n .sleeve {\n display: flex;\n .text-wrap {\n margin: auto 0;\n text-decoration: none;\n &.text-padding-1 { padding: 0 $spacer-1; }\n &.text-padding-2 { padding: 0 $spacer-2; }\n &.text-padding-3 { padding: 0 $spacer-3; }\n &.text-padding-4 { padding: 0 $spacer-4; }\n &.text-padding-5 { padding: 0 $spacer-5; }\n &.text-padding-6 { padding: 0 $spacer-6; }\n }\n\n .arrow-wrap {\n margin: auto 0 auto auto;\n @each $key, $colour in $brandColours {\n &.arrow-colour-#{$key} .arrow-wrap svg path { stroke: $colour; }\n }\n }\n }\n\n .image-wrap {\n background-position: center center;\n background-size: cover;\n\n &.image-style-contain {\n background-size: contain;\n }\n\n &.circle-true {\n border-radius: 50%;\n overflow: hidden;\n }\n\n &.size-small {\n width: 30px;\n height: 30px;\n }\n &.size-medium {\n width: 45px;\n height: 45px;\n }\n &.size-large {\n width: 60px;\n height: 60px;\n }\n &.size-x-large {\n width: 75px;\n height: 75px;\n }\n &.size-xx-large {\n width: 90px;\n height: 90px;\n }\n\n }\n\n\n\n\n\n}\n\n\n","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n tag: 'biggive-image-button',\n styleUrl: 'biggive-image-button.scss',\n shadow: true,\n})\nexport class BiggiveImageButton {\n @Event({\n eventName: 'doButtonClick',\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n doButtonClick: EventEmitter<{ event: object; url: string }>;\n\n @Prop() spaceBelow: spacingOption = 1;\n\n @Prop() backgroundColour: brandColour = 'white';\n\n @Prop() backgroundPadding: spacingOption = 0;\n\n @Prop() text: string;\n\n @Prop() textColour: brandColour = 'black';\n\n @Prop() imageUrl: string;\n\n @Prop() imageStyle: string = 'cover';\n\n @Prop() url: string;\n\n @Prop() openInNewTab: boolean = false;\n\n @Prop() size: 'small' \| 'medium' \| 'large' \| 'x-large' \| 'xx-large' = 'medium';\n\n @Prop() arrow: boolean = false;\n\n @Prop() arrowColour: brandColour = 'black';\n\n @Prop() circle: boolean = false;\n\n @Prop() shadow: boolean = false;\n\n @Prop() centered: boolean = false;\n\n @Prop() rounded: boolean = false;\n\n @Prop() buttonId: undefined \| string = undefined;\n\n private handleButtonClick = (event: any) => {\n this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });\n };\n\n render() {\n return (\n <div\n class={\n 'container space-below-' +\n this.spaceBelow +\n ' background-colour-' +\n this.backgroundColour +\n ' background-padding-' +\n this.backgroundPadding +\n ' centered-' +\n this.centered +\n ' rounded-' +\n this.rounded +\n ' shadow-' +\n this.shadow\n }\n >\n <a href={this.url} target={this.openInNewTab ? '_blank' : '_self'} id={this.buttonId}>\n <div class=\"sleeve\" onClick={this.handleButtonClick}>\n <div\n class={'image-wrap ' + ' image-style-' + this.imageStyle + ' size-' + this.size + ' circle-' + this.circle.toString()}\n style={{ backgroundImage: 'url(' + this.imageUrl + ')' }}\n ></div>\n\n {this.text != '' ? <div class={'text-wrap text-colour-' + this.textColour + ' text-padding-' + this.backgroundPadding}>{this.text}</div> : null}\n\n {this.arrow ? (\n <div class={'arrow-wrap arrow-colour-' + this.arrowColour}>\n <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0.76912 1.0791L5.73828 6.04826L0.769121 11.0174\" stroke=\"black\" stroke-width=\"2\" />\n </svg>\n </div>\n ) : null}\n </div>\n </a>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"biggive-image-button.js","mappings":"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","names":["BiggiveImageButton","__stencil_proxyCustomElement"],"sources":["src/components/biggive-image-button/biggive-image-button.scss?tag=biggive-image-button&encapsulation=shadow","src/components/biggive-image-button/biggive-image-button.tsx"],"sourcesContent":["@include backgrounds();\n@include text-colours();\n@include spacers();\n\n:host {\n display: contents;\n}\n\n.container {\n @include standard-font();\n a {\n display: block;\n text-decoration: none;\n &.full-width-true {\n display: block;\n }\n }\n &.centered-true {\n text-align: center;\n }\n &.shadow-true {\n filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.25));\n }\n &.rounded-true {\n border-radius: 10px;\n }\n &.background-padding-1 { padding: $spacer-1; }\n &.background-padding-2 { padding: $spacer-2; }\n &.background-padding-3 { padding: $spacer-3; }\n &.background-padding-4 { padding: $spacer-4; }\n &.background-padding-5 { padding: $spacer-5; }\n &.background-padding-6 { padding: $spacer-6; }\n\n .sleeve {\n display: flex;\n .text-wrap {\n margin: auto 0;\n text-decoration: none;\n &.text-padding-1 { padding: 0 $spacer-1; }\n &.text-padding-2 { padding: 0 $spacer-2; }\n &.text-padding-3 { padding: 0 $spacer-3; }\n &.text-padding-4 { padding: 0 $spacer-4; }\n &.text-padding-5 { padding: 0 $spacer-5; }\n &.text-padding-6 { padding: 0 $spacer-6; }\n }\n\n .arrow-wrap {\n margin: auto 0 auto auto;\n @each $key, $colour in $brandColours {\n &.arrow-colour-#{$key} .arrow-wrap svg path { stroke: $colour; }\n }\n }\n }\n\n .image-wrap {\n background-position: center center;\n background-size: cover;\n\n &.image-style-contain {\n background-size: contain;\n }\n\n &.circle-true {\n border-radius: 50%;\n overflow: hidden;\n }\n\n &.size-small {\n width: 30px;\n height: 30px;\n }\n &.size-medium {\n width: 45px;\n height: 45px;\n }\n &.size-large {\n width: 60px;\n height: 60px;\n }\n &.size-x-large {\n width: 75px;\n height: 75px;\n }\n &.size-xx-large {\n width: 90px;\n height: 90px;\n }\n\n }\n\n\n\n\n\n}\n\n\n","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n tag: 'biggive-image-button',\n styleUrl: 'biggive-image-button.scss',\n shadow: true,\n})\nexport class BiggiveImageButton {\n @Event({\n eventName: 'doButtonClick',\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n doButtonClick: EventEmitter<{ event: object; url: string }>;\n\n @Prop() spaceBelow: spacingOption = 1;\n\n @Prop() backgroundColour: brandColour = 'white';\n\n @Prop() backgroundPadding: spacingOption = 0;\n\n @Prop() text: string;\n\n @Prop() textColour: brandColour = 'black';\n\n @Prop() imageUrl: string;\n\n @Prop() imageStyle: string = 'cover';\n\n @Prop() url: string;\n\n @Prop() openInNewTab: boolean = false;\n\n @Prop() size: 'small' \| 'medium' \| 'large' \| 'x-large' \| 'xx-large' = 'medium';\n\n @Prop() arrow: boolean = false;\n\n @Prop() arrowColour: brandColour = 'black';\n\n @Prop() circle: boolean = false;\n\n @Prop() shadow: boolean = false;\n\n @Prop() centered: boolean = false;\n\n @Prop() rounded: boolean = false;\n\n @Prop() buttonId: undefined \| string = undefined;\n\n private handleButtonClick = (event: any) => {\n this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });\n };\n\n render() {\n return (\n <div\n class={\n 'container space-below-' +\n this.spaceBelow +\n ' background-colour-' +\n this.backgroundColour +\n ' background-padding-' +\n this.backgroundPadding +\n ' centered-' +\n this.centered +\n ' rounded-' +\n this.rounded +\n ' shadow-' +\n this.shadow\n }\n >\n <a href={this.url} target={this.openInNewTab ? '_blank' : '_self'} id={this.buttonId}>\n <div class=\"sleeve\" onClick={this.handleButtonClick}>\n <div\n class={'image-wrap ' + ' image-style-' + this.imageStyle + ' size-' + this.size + ' circle-' + this.circle.toString()}\n style={{ backgroundImage: 'url(' + this.imageUrl + ')' }}\n ></div>\n\n {this.text != '' ? <div class={'text-wrap text-colour-' + this.textColour + ' text-padding-' + this.backgroundPadding}>{this.text}</div> : null}\n\n {this.arrow ? (\n <div class={'arrow-wrap arrow-colour-' + this.arrowColour}>\n <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0.76912 1.0791L5.73828 6.04826L0.769121 11.0174\" stroke=\"black\" stroke-width=\"2\" />\n </svg>\n </div>\n ) : null}\n </div>\n </a>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/biggive-image-card.js CHANGED Viewed

@@ -4,9 +4,11 @@ import { d as defineCustomElement$2 } from './biggive-button2.js';
 const biggiveImageCardCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-cc-red:hover,.background-colour-brand-cc-red{background-color:#B30510}.background-colour-hover-brand-wgmf-purple:hover,.background-colour-brand-wgmf-purple{background-color:#6E0887}.background-colour-hover-brand-gmf-green:hover,.background-colour-brand-gmf-green{background-color:#50B400}.background-colour-hover-brand-er-green:hover,.background-colour-brand-er-green{background-color:#50B400}.background-colour-hover-brand-er-dark-green:hover,.background-colour-brand-er-dark-green{background-color:#002413}.background-colour-hover-brand-er-dark-blue:hover,.background-colour-brand-er-dark-blue{background-color:#0c0068}.background-colour-hover-brand-er-teal:hover,.background-colour-brand-er-teal{background-color:#00a76d}.background-colour-hover-brand-emf-yellow:hover,.background-colour-brand-emf-yellow{background-color:#FFE500}.background-colour-hover-brand-c4c-orange:hover,.background-colour-brand-c4c-orange{background-color:#F07D00}.background-colour-hover-brand-afa-pink:hover,.background-colour-brand-afa-pink{background-color:#BF387D}.background-colour-hover-brand-scw-magenta:hover,.background-colour-brand-scw-magenta{background-color:#EE2C65}.background-colour-hover-brand-mhf-turquoise:hover,.background-colour-brand-mhf-turquoise{background-color:#62CFC9}.background-colour-hover-brand-grey:hover,.background-colour-brand-grey{background-color:#CBC8C8}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.background-colour-hover-philco-orange:hover,.background-colour-philco-orange{background-color:#f18a00}.background-colour-hover-philco-gray-90:hover,.background-colour-philco-gray-90{background-color:#1d1d1B}.background-colour-hover-philco-gray-70:hover,.background-colour-philco-gray-70{background-color:#7D7D7D}.background-colour-hover-philco-white:hover,.background-colour-philco-white{background-color:#FFFFFF}.background-colour-hover-philco-success-green:hover,.background-colour-philco-success-green{background-color:#1Ec691}.background-colour-hover-philco-error-coral:hover,.background-colour-philco-error-coral{background-color:#F54242}.background-colour-hover-philco-gray-30:hover,.background-colour-philco-gray-30{background-color:#BBBBBB}.background-colour-hover-philco-gray-20:hover,.background-colour-philco-gray-20{background-color:#F6F6F6}.fill-primary{fill:#2C089B}.fill-secondary{fill:#2AF135}.fill-tertiary{fill:#FF7272}.fill-brand-cc-red{fill:#B30510}.fill-brand-wgmf-purple{fill:#6E0887}.fill-brand-gmf-green{fill:#50B400}.fill-brand-er-green{fill:#50B400}.fill-brand-er-dark-green{fill:#002413}.fill-brand-er-dark-blue{fill:#0c0068}.fill-brand-er-teal{fill:#00a76d}.fill-brand-emf-yellow{fill:#FFE500}.fill-brand-c4c-orange{fill:#F07D00}.fill-brand-afa-pink{fill:#BF387D}.fill-brand-scw-magenta{fill:#EE2C65}.fill-brand-mhf-turquoise{fill:#62CFC9}.fill-brand-grey{fill:#CBC8C8}.fill-white{fill:#FFFFFF}.fill-black{fill:#000000}.fill-grey-extra-light{fill:#D7D7D7}.fill-grey-light{fill:#E8E8E8}.fill-grey-medium{fill:#8A8A8A}.fill-grey-dark{fill:#4A4A4A}.fill-philco-orange{fill:#f18a00}.fill-philco-gray-90{fill:#1d1d1B}.fill-philco-gray-70{fill:#7D7D7D}.fill-philco-white{fill:#FFFFFF}.fill-philco-success-green{fill:#1Ec691}.fill-philco-error-coral{fill:#F54242}.fill-philco-gray-30{fill:#BBBBBB}.fill-philco-gray-20{fill:#F6F6F6}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-cc-red:hover,.text-colour-brand-cc-red{color:#B30510}.text-colour-hover-brand-wgmf-purple:hover,.text-colour-brand-wgmf-purple{color:#6E0887}.text-colour-hover-brand-gmf-green:hover,.text-colour-brand-gmf-green{color:#50B400}.text-colour-hover-brand-er-green:hover,.text-colour-brand-er-green{color:#50B400}.text-colour-hover-brand-er-dark-green:hover,.text-colour-brand-er-dark-green{color:#002413}.text-colour-hover-brand-er-dark-blue:hover,.text-colour-brand-er-dark-blue{color:#0c0068}.text-colour-hover-brand-er-teal:hover,.text-colour-brand-er-teal{color:#00a76d}.text-colour-hover-brand-emf-yellow:hover,.text-colour-brand-emf-yellow{color:#FFE500}.text-colour-hover-brand-c4c-orange:hover,.text-colour-brand-c4c-orange{color:#F07D00}.text-colour-hover-brand-afa-pink:hover,.text-colour-brand-afa-pink{color:#BF387D}.text-colour-hover-brand-scw-magenta:hover,.text-colour-brand-scw-magenta{color:#EE2C65}.text-colour-hover-brand-mhf-turquoise:hover,.text-colour-brand-mhf-turquoise{color:#62CFC9}.text-colour-hover-brand-grey:hover,.text-colour-brand-grey{color:#CBC8C8}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}.text-colour-hover-philco-orange:hover,.text-colour-philco-orange{color:#f18a00}.text-colour-hover-philco-gray-90:hover,.text-colour-philco-gray-90{color:#1d1d1B}.text-colour-hover-philco-gray-70:hover,.text-colour-philco-gray-70{color:#7D7D7D}.text-colour-hover-philco-white:hover,.text-colour-philco-white{color:#FFFFFF}.text-colour-hover-philco-success-green:hover,.text-colour-philco-success-green{color:#1Ec691}.text-colour-hover-philco-error-coral:hover,.text-colour-philco-error-coral{color:#F54242}.text-colour-hover-philco-gray-30:hover,.text-colour-philco-gray-30{color:#BBBBBB}.text-colour-hover-philco-gray-20:hover,.text-colour-philco-gray-20{color:#F6F6F6}:host{display:contents}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:center;background-size:cover;background-position:center center;padding:10px;height:100%;white-space:pre-wrap;box-shadow:0px 0px 30px rgba(0, 0, 0, 0.2)}.container a,.container a:hover{text-decoration:none}.container .sleeve{padding:10px;height:100%;box-sizing:border-box;transition:all 1s ease-in-out}.container.add-animation-true:hover .sleeve{margin:-30px;padding:60px;height:calc(100% + 60px)}.container.clip-bottom-left-corner-false.clip-top-right-corner-true{clip-path:polygon(0% 0%, 0% 0%, calc(100% - 50px) 0%, 100% 50px, 100% 100%, 100% 100%, 0% 100%, 0 100%)}.container.clip-bottom-left-corner-true.clip-top-right-corner-false{clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0, 100% 100%, 100% 100%, 50px 100%, 0 calc(100% - 50px))}.container.clip-bottom-left-corner-true.clip-top-right-corner-true{clip-path:polygon(0% 0%, 0% 0%, calc(100% - 50px) 0%, 100% 50px, 100% 100%, 100% 100%, 50px 100%, 0 calc(100% - 50px))}.container .icon svg{width:50px;height:auto}.container .title{font-size:25px;line-height:32px;font-weight:bold;margin-bottom:15px}.container .teaser{margin-bottom:15px}.container .main-image-container{margin-bottom:15px}.container .main-image-container img{width:100%;height:auto}.container .button-wrap{text-align:center}.container .button-wrap.align-left{text-align:left}.container .button-wrap.align-right{text-align:right}.container .text-align-left{text-align:left}.container .text-align-center{text-align:center}.container .text-align-right{text-align:right}";
 const BiggiveImageCard$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveImageCard extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.spaceBelow = 0;
         this.backgroundColour = 'primary';

package/dist/components/biggive-image-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"biggive-image-card.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,i+QAAi+Q;;MCSh/QA,kBAAgB,iBAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAA,WAAA,CAAA;AAL7B,IAAA,WAAA,~~GAAA;;;;~~AAMU,QAAA,IAAU,CAAA,UAAA,GAAkB,CAAC;AAE7B,QAAA,IAAgB,CAAA,gBAAA,GAAgB,SAAS;AAMzC,QAAA,IAAS,CAAA,SAAA,GAAgC,QAAQ;AAIjD,QAAA,IAAY,CAAA,YAAA,GAAgB,OAAO;AAEnC,QAAA,IAAW,CAAA,WAAA,GAAW,QAAQ;AAE9B,QAAA,IAAW,CAAA,WAAA,GAAW,UAAU;AAMhC,QAAA,IAAkB,CAAA,kBAAA,GAAW,eAAe;AAE5C,QAAA,IAAoB,CAAA,oBAAA,GAAY,IAAI;AAEpC,QAAA,IAAkB,CAAA,kBAAA,GAAY,IAAI;AAElC,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAwCtC;IAtCC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EACH,wBAAwB;AACxB,gBAAA,IAAI,CAAC,UAAU;gBACf,qBAAqB;AACrB,gBAAA,IAAI,CAAC,gBAAgB;gBACrB,2BAA2B;AAC3B,gBAAA,IAAI,CAAC,oBAAoB;gBACzB,yBAAyB;AACzB,gBAAA,IAAI,CAAC,kBAAkB;gBACvB,iBAAiB;gBACjB,IAAI,CAAC,YAAY,EAAA,EAGnB,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAE,IAAI,CAAC,SAAS,EAAA,EACrB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,qBAAqB,GAAG,IAAI,CAAC,YAAY,GAAG,cAAc,GAAG,IAAI,CAAC,SAAS,EAAA,EACrF,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACtB,IAAI,CAAC,YAAY,IAAI,EAAE,IACtB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAI,CAAA,CACrF,CACF,IACJ,IAAI,EACR,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAO,EACtC,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,IAAI,IAAI,CAAC,SAAS,IAAI,EAAE,IACzE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC,WAAW,EAAA,EACjD,CAA+B,CAAA,gBAAA,EAAA,EAAA,eAAA,EAAA,IAAI,CAAC,kBAAkB,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,EAAA,CAAmB,CAC9F,IACJ,IAAI,CACJ,CACF,CACJ,CACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveImageCard","__stencil_proxyCustomElement"],"sources":["src/components/biggive-image-card/biggive-image-card.scss?tag=biggive-image-card&encapsulation=shadow","src/components/biggive-image-card/biggive-image-card.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n@include spacers();\n@include text-colours();\n\n:host {\n display: contents;\n}\n\n.container {\n @include standard-font();\n position: relative;\n text-align: center;\n background-size: cover;\n background-position: center center;\n padding: $spacer-2;\n height: 100%;\n white-space: pre-wrap;\n box-shadow: 0px 0px 30px rgb(0 0 0 / 20%);\n a,\n a:hover {\n text-decoration: none;\n }\n .sleeve {\n padding: $spacer-2;\n height: 100%;\n box-sizing: border-box;\n transition: all 1s ease-in-out;\n }\n &.add-animation-true:hover .sleeve {\n margin: -30px;\n padding: 60px;\n height: calc(100% + 60px);\n }\n &.clip-bottom-left-corner-false.clip-top-right-corner-true {\n @include corner-clip-medium-top-right();\n }\n &.clip-bottom-left-corner-true.clip-top-right-corner-false {\n @include corner-clip-medium-bottom-left();\n }\n &.clip-bottom-left-corner-true.clip-top-right-corner-true {\n @include corner-clip-medium-bottom-left-top-right();\n }\n\n .icon {\n svg {\n width: 50px;\n height: auto;\n }\n }\n .title {\n // these have to be the heading level passed in based on order of headings, but in terms of design we want it look like H3.\n @include heading-3();\n margin-bottom: $spacer-3;\n }\n .teaser {\n margin-bottom: $spacer-3;\n }\n .main-image-container {\n margin-bottom: 15px;\n img {\n width: 100%;\n height: auto;\n }\n }\n .button-wrap {\n text-align: center;\n &.align-left {\n text-align: left;\n }\n &.align-right {\n text-align: right;\n }\n }\n\n .text-align-left {\n text-align: left;\n }\n .text-align-center {\n text-align: center;\n }\n .text-align-right {\n text-align: right;\n }\n\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n tag: 'biggive-image-card',\n styleUrl: 'biggive-image-card.scss',\n shadow: true,\n})\nexport class BiggiveImageCard {\n @Prop() spaceBelow: spacingOption = 0;\n\n @Prop() backgroundColour: brandColour = 'primary';\n\n @Prop() mainImageUrl: string;\n\n @Prop() mainImageAltText: string;\n\n @Prop() textAlign: 'left' \| 'center' \| 'right' = 'center';\n\n @Prop() teaser: string;\n\n @Prop() teaserColour: brandColour = 'black';\n\n @Prop() buttonAlign: string = 'center';\n\n @Prop() buttonStyle: string = 'standard';\n\n @Prop() buttonLabel: string;\n\n @Prop() buttonUrl: string;\n\n @Prop() buttonColourScheme: string = 'clear-primary';\n\n @Prop() clipBottomLeftCorner: boolean = true;\n\n @Prop() clipTopRightCorner: boolean = true;\n\n @Prop() addAnimation: boolean = false;\n\n render() {\n return (\n <div\n class={\n 'container space-below-' +\n this.spaceBelow +\n ' background-colour-' +\n this.backgroundColour +\n ' clip-bottom-left-corner-' +\n this.clipBottomLeftCorner +\n ' clip-top-right-corner-' +\n this.clipTopRightCorner +\n ' add-animation-' +\n this.addAnimation\n }\n >\n <a href={this.buttonUrl}>\n <div class={'sleeve text-colour-' + this.teaserColour + ' text-align-' + this.textAlign}>\n <div class=\"content-wrap\">\n {this.mainImageUrl != '' ? (\n <div class=\"main-image-container\">\n <div class=\"image-wrap\">\n <img src={this.mainImageUrl} alt={this.mainImageAltText} title={this.mainImageAltText} />\n </div>\n </div>\n ) : null}\n <div class=\"teaser\">{this.teaser}</div>\n {this.buttonLabel != null && this.buttonUrl != null && this.buttonUrl != '' ? (\n <div class={'button-wrap align-' + this.buttonAlign}>\n <biggive-button colour-scheme={this.buttonColourScheme} label={this.buttonLabel}></biggive-button>\n </div>\n ) : null}\n </div>\n </div>\n </a>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"biggive-image-card.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,i+QAAi+Q;;MCSh/QA,kBAAgB,iBAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAA,WAAA,CAAA;AAL7B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAMU,QAAA,IAAU,CAAA,UAAA,GAAkB,CAAC;AAE7B,QAAA,IAAgB,CAAA,gBAAA,GAAgB,SAAS;AAMzC,QAAA,IAAS,CAAA,SAAA,GAAgC,QAAQ;AAIjD,QAAA,IAAY,CAAA,YAAA,GAAgB,OAAO;AAEnC,QAAA,IAAW,CAAA,WAAA,GAAW,QAAQ;AAE9B,QAAA,IAAW,CAAA,WAAA,GAAW,UAAU;AAMhC,QAAA,IAAkB,CAAA,kBAAA,GAAW,eAAe;AAE5C,QAAA,IAAoB,CAAA,oBAAA,GAAY,IAAI;AAEpC,QAAA,IAAkB,CAAA,kBAAA,GAAY,IAAI;AAElC,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAwCtC;IAtCC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EACH,wBAAwB;AACxB,gBAAA,IAAI,CAAC,UAAU;gBACf,qBAAqB;AACrB,gBAAA,IAAI,CAAC,gBAAgB;gBACrB,2BAA2B;AAC3B,gBAAA,IAAI,CAAC,oBAAoB;gBACzB,yBAAyB;AACzB,gBAAA,IAAI,CAAC,kBAAkB;gBACvB,iBAAiB;gBACjB,IAAI,CAAC,YAAY,EAAA,EAGnB,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAE,IAAI,CAAC,SAAS,EAAA,EACrB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,qBAAqB,GAAG,IAAI,CAAC,YAAY,GAAG,cAAc,GAAG,IAAI,CAAC,SAAS,EAAA,EACrF,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACtB,IAAI,CAAC,YAAY,IAAI,EAAE,IACtB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAI,CAAA,CACrF,CACF,IACJ,IAAI,EACR,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAO,EACtC,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,IAAI,IAAI,CAAC,SAAS,IAAI,EAAE,IACzE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC,WAAW,EAAA,EACjD,CAA+B,CAAA,gBAAA,EAAA,EAAA,eAAA,EAAA,IAAI,CAAC,kBAAkB,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,EAAA,CAAmB,CAC9F,IACJ,IAAI,CACJ,CACF,CACJ,CACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveImageCard","__stencil_proxyCustomElement"],"sources":["src/components/biggive-image-card/biggive-image-card.scss?tag=biggive-image-card&encapsulation=shadow","src/components/biggive-image-card/biggive-image-card.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n@include spacers();\n@include text-colours();\n\n:host {\n display: contents;\n}\n\n.container {\n @include standard-font();\n position: relative;\n text-align: center;\n background-size: cover;\n background-position: center center;\n padding: $spacer-2;\n height: 100%;\n white-space: pre-wrap;\n box-shadow: 0px 0px 30px rgb(0 0 0 / 20%);\n a,\n a:hover {\n text-decoration: none;\n }\n .sleeve {\n padding: $spacer-2;\n height: 100%;\n box-sizing: border-box;\n transition: all 1s ease-in-out;\n }\n &.add-animation-true:hover .sleeve {\n margin: -30px;\n padding: 60px;\n height: calc(100% + 60px);\n }\n &.clip-bottom-left-corner-false.clip-top-right-corner-true {\n @include corner-clip-medium-top-right();\n }\n &.clip-bottom-left-corner-true.clip-top-right-corner-false {\n @include corner-clip-medium-bottom-left();\n }\n &.clip-bottom-left-corner-true.clip-top-right-corner-true {\n @include corner-clip-medium-bottom-left-top-right();\n }\n\n .icon {\n svg {\n width: 50px;\n height: auto;\n }\n }\n .title {\n // these have to be the heading level passed in based on order of headings, but in terms of design we want it look like H3.\n @include heading-3();\n margin-bottom: $spacer-3;\n }\n .teaser {\n margin-bottom: $spacer-3;\n }\n .main-image-container {\n margin-bottom: 15px;\n img {\n width: 100%;\n height: auto;\n }\n }\n .button-wrap {\n text-align: center;\n &.align-left {\n text-align: left;\n }\n &.align-right {\n text-align: right;\n }\n }\n\n .text-align-left {\n text-align: left;\n }\n .text-align-center {\n text-align: center;\n }\n .text-align-right {\n text-align: right;\n }\n\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n tag: 'biggive-image-card',\n styleUrl: 'biggive-image-card.scss',\n shadow: true,\n})\nexport class BiggiveImageCard {\n @Prop() spaceBelow: spacingOption = 0;\n\n @Prop() backgroundColour: brandColour = 'primary';\n\n @Prop() mainImageUrl: string;\n\n @Prop() mainImageAltText: string;\n\n @Prop() textAlign: 'left' \| 'center' \| 'right' = 'center';\n\n @Prop() teaser: string;\n\n @Prop() teaserColour: brandColour = 'black';\n\n @Prop() buttonAlign: string = 'center';\n\n @Prop() buttonStyle: string = 'standard';\n\n @Prop() buttonLabel: string;\n\n @Prop() buttonUrl: string;\n\n @Prop() buttonColourScheme: string = 'clear-primary';\n\n @Prop() clipBottomLeftCorner: boolean = true;\n\n @Prop() clipTopRightCorner: boolean = true;\n\n @Prop() addAnimation: boolean = false;\n\n render() {\n return (\n <div\n class={\n 'container space-below-' +\n this.spaceBelow +\n ' background-colour-' +\n this.backgroundColour +\n ' clip-bottom-left-corner-' +\n this.clipBottomLeftCorner +\n ' clip-top-right-corner-' +\n this.clipTopRightCorner +\n ' add-animation-' +\n this.addAnimation\n }\n >\n <a href={this.buttonUrl}>\n <div class={'sleeve text-colour-' + this.teaserColour + ' text-align-' + this.textAlign}>\n <div class=\"content-wrap\">\n {this.mainImageUrl != '' ? (\n <div class=\"main-image-container\">\n <div class=\"image-wrap\">\n <img src={this.mainImageUrl} alt={this.mainImageAltText} title={this.mainImageAltText} />\n </div>\n </div>\n ) : null}\n <div class=\"teaser\">{this.teaser}</div>\n {this.buttonLabel != null && this.buttonUrl != null && this.buttonUrl != '' ? (\n <div class={'button-wrap align-' + this.buttonAlign}>\n <biggive-button colour-scheme={this.buttonColourScheme} label={this.buttonLabel}></biggive-button>\n </div>\n ) : null}\n </div>\n </div>\n </a>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/biggive-image-feature.js CHANGED Viewed

@@ -4,9 +4,11 @@ import { d as defineCustomElement$2 } from './biggive-button2.js';
 const biggiveImageFeatureCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.image-wrap img{width:100%;height:auto}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-cc-red:hover,.text-colour-brand-cc-red{color:#B30510}.text-colour-hover-brand-wgmf-purple:hover,.text-colour-brand-wgmf-purple{color:#6E0887}.text-colour-hover-brand-gmf-green:hover,.text-colour-brand-gmf-green{color:#50B400}.text-colour-hover-brand-er-green:hover,.text-colour-brand-er-green{color:#50B400}.text-colour-hover-brand-er-dark-green:hover,.text-colour-brand-er-dark-green{color:#002413}.text-colour-hover-brand-er-dark-blue:hover,.text-colour-brand-er-dark-blue{color:#0c0068}.text-colour-hover-brand-er-teal:hover,.text-colour-brand-er-teal{color:#00a76d}.text-colour-hover-brand-emf-yellow:hover,.text-colour-brand-emf-yellow{color:#FFE500}.text-colour-hover-brand-c4c-orange:hover,.text-colour-brand-c4c-orange{color:#F07D00}.text-colour-hover-brand-afa-pink:hover,.text-colour-brand-afa-pink{color:#BF387D}.text-colour-hover-brand-scw-magenta:hover,.text-colour-brand-scw-magenta{color:#EE2C65}.text-colour-hover-brand-mhf-turquoise:hover,.text-colour-brand-mhf-turquoise{color:#62CFC9}.text-colour-hover-brand-grey:hover,.text-colour-brand-grey{color:#CBC8C8}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}.text-colour-hover-philco-orange:hover,.text-colour-philco-orange{color:#f18a00}.text-colour-hover-philco-gray-90:hover,.text-colour-philco-gray-90{color:#1d1d1B}.text-colour-hover-philco-gray-70:hover,.text-colour-philco-gray-70{color:#7D7D7D}.text-colour-hover-philco-white:hover,.text-colour-philco-white{color:#FFFFFF}.text-colour-hover-philco-success-green:hover,.text-colour-philco-success-green{color:#1Ec691}.text-colour-hover-philco-error-coral:hover,.text-colour-philco-error-coral{color:#F54242}.text-colour-hover-philco-gray-30:hover,.text-colour-philco-gray-30{color:#BBBBBB}.text-colour-hover-philco-gray-20:hover,.text-colour-philco-gray-20{color:#F6F6F6}:host{display:contents}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative}.container .sleeve{display:flex;justify-content:space-between}.container .sleeve .content-wrap{width:calc(40% - 15px);position:relative;z-index:1}.container .sleeve .content-wrap .slug{font-size:20px;line-height:24px;font-weight:bold;margin:0;padding:0}.container .sleeve .content-wrap h2{font-size:38px;line-height:45px;font-weight:bold;margin:0 0 15px 0;padding:0}.container .sleeve .content-wrap .teaser{margin:0 0 45px 0;padding:0}.container .sleeve .graphic-wrap{width:calc(60% - 15px)}@media screen and (max-width: 576px){.container .sleeve{flex-wrap:wrap}.container .sleeve .content-wrap{width:100%}.container .sleeve .graphic-wrap{width:100%;margin-bottom:15px;order:-1}}";
 const BiggiveImageFeature$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveImageFeature extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         /**
          * Space below component

package/dist/components/biggive-image-feature.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"biggive-image-feature.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,ywGAAywG;;MCO3xGA,qBAAmB,iBAAAC,kBAAA,CAAA,MAAA,mBAAA,SAAA,WAAA,CAAA;AALhC,IAAA,WAAA,~~GAAA;;;;~~AAME;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAW,CAAC;AAC9B;;AAEG;AACK,QAAA,IAAiB,CAAA,iBAAA,GAAW,SAAS;AAE7C;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,EAAE;AAE7B;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAW,EAAE;AAOjC;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAW,EAAE;AAO/B;;AAEG;AACK,QAAA,IAAe,CAAA,eAAA,GAAW,EAAE;AAOpC;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAW,EAAE;AAYjC;;AAEG;AACK,QAAA,IAAkB,CAAA,kBAAA,GAAW,SAAS;AAyB/C;IAvBC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,iBAAiB,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,EAAA,EAC/F,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,mBAAmB,GAAG,IAAI,CAAC,UAAU,EAAG,EAAA,IAAI,CAAC,IAAI,CAAO,EACpE,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC,eAAe,EAAG,EAAA,IAAI,CAAC,SAAS,CAAM,EAC7E,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,qBAAqB,GAAG,IAAI,CAAC,YAAY,EAAG,EAAA,IAAI,CAAC,MAAM,CAAO,EACzE,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,IACjD,CAAA,CAAA,gBAAA,EAAA,EAAA,eAAA,EAA+B,IAAI,CAAC,kBAAkB,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,GAAmB,IACrH,IAAI,CACJ,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACtB,IAAI,CAAC,QAAQ,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,IACpD,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACrB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,YAAY,GAAI,CAC/C,IACJ,IAAI,CACJ,CACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveImageFeature","__stencil_proxyCustomElement"],"sources":["src/components/biggive-image-feature/biggive-image-feature.scss?tag=biggive-image-feature&encapsulation=shadow","src/components/biggive-image-feature/biggive-image-feature.tsx"],"sourcesContent":["@include image-alignment();\n@include text-colours();\n\n:host {\n display: contents;\n}\n\n.container {\n @include standard-font();\n position: relative;\n .sleeve {\n @include flex-container-row();\n .content-wrap {\n width: calc(40% - $spacer-3);\n position: relative;\n z-index: 1;\n .slug {\n @include heading-4;\n margin: 0;\n padding: 0;\n }\n h2 {\n @include heading-2;\n margin: 0 0 $spacer-3 0;\n padding: 0;\n }\n .teaser {\n margin: 0 0 $spacer-5 0;\n padding: 0;\n }\n }\n \n .graphic-wrap {\n width: calc(60% - $spacer-3);\n }\n }\n}\n\n\n@media screen and (max-width: $screen-mobile-max) {\n .container {\n .sleeve {\n flex-wrap: wrap;\n .content-wrap {\n width: 100%;\n }\n .graphic-wrap {\n width: 100%;\n margin-bottom: $spacer-3;\n order: -1;\n }\n }\n }\n}\n\n\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'biggive-image-feature',\n styleUrl: 'biggive-image-feature.scss',\n shadow: true,\n})\nexport class BiggiveImageFeature {\n /*\n Space below component\n /\n @Prop() spaceBelow: number = 0;\n /\n Default text colour\n /\n @Prop() defaultTextColour: string = 'primary';\n\n /\n Full URL of a image.\n /\n @Prop() imageUrl: string = '';\n\n /\n Image alt text tag.\n /\n @Prop() imageAltText: string = '';\n\n /\n Slug\n /\n @Prop() slug: string;\n\n /\n Slug colour\n /\n @Prop() slugColour: string = '';\n\n /\n Video title\n /\n @Prop() mainTitle: string;\n\n /\n Slug colour\n /\n @Prop() mainTitleColour: string = '';\n\n /\n Introductory teaser text\n /\n @Prop() teaser: string;\n\n /\n Teaser colour\n /\n @Prop() teaserColour: string = '';\n\n /\n Button Url\n /\n @Prop() buttonUrl: string;\n\n /\n Button Label\n /\n @Prop() buttonLabel: string;\n\n /\n Button Colour Scheme\n */\n @Prop() buttonColourScheme: string = 'primary';\n\n render() {\n return (\n <div class={'container text-colour-' + this.defaultTextColour + ' space-below-' + this.spaceBelow}>\n <div class=\"sleeve\">\n <div class=\"content-wrap\">\n <div class={'slug text-colour-' + this.slugColour}>{this.slug}</div>\n <h2 class={'title text-colour-' + this.mainTitleColour}>{this.mainTitle}</h2>\n <div class={'teaser text-colour-' + this.teaserColour}>{this.teaser}</div>\n {this.buttonLabel != null && this.buttonUrl != null ? (\n <biggive-button colour-scheme={this.buttonColourScheme} url={this.buttonUrl} label={this.buttonLabel}></biggive-button>\n ) : null}\n </div>\n <div class=\"graphic-wrap\">\n {this.imageUrl !== null && this.imageUrl !== undefined ? (\n <div class=\"image-wrap\">\n <img src={this.imageUrl} alt={this.imageAltText} />\n </div>\n ) : null}\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"biggive-image-feature.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,ywGAAywG;;MCO3xGA,qBAAmB,iBAAAC,kBAAA,CAAA,MAAA,mBAAA,SAAA,WAAA,CAAA;AALhC,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAW,CAAC;AAC9B;;AAEG;AACK,QAAA,IAAiB,CAAA,iBAAA,GAAW,SAAS;AAE7C;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,EAAE;AAE7B;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAW,EAAE;AAOjC;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAW,EAAE;AAO/B;;AAEG;AACK,QAAA,IAAe,CAAA,eAAA,GAAW,EAAE;AAOpC;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAW,EAAE;AAYjC;;AAEG;AACK,QAAA,IAAkB,CAAA,kBAAA,GAAW,SAAS;AAyB/C;IAvBC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,iBAAiB,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,EAAA,EAC/F,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,mBAAmB,GAAG,IAAI,CAAC,UAAU,EAAG,EAAA,IAAI,CAAC,IAAI,CAAO,EACpE,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC,eAAe,EAAG,EAAA,IAAI,CAAC,SAAS,CAAM,EAC7E,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,qBAAqB,GAAG,IAAI,CAAC,YAAY,EAAG,EAAA,IAAI,CAAC,MAAM,CAAO,EACzE,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,IACjD,CAAA,CAAA,gBAAA,EAAA,EAAA,eAAA,EAA+B,IAAI,CAAC,kBAAkB,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,GAAmB,IACrH,IAAI,CACJ,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACtB,IAAI,CAAC,QAAQ,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,IACpD,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACrB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,YAAY,GAAI,CAC/C,IACJ,IAAI,CACJ,CACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveImageFeature","__stencil_proxyCustomElement"],"sources":["src/components/biggive-image-feature/biggive-image-feature.scss?tag=biggive-image-feature&encapsulation=shadow","src/components/biggive-image-feature/biggive-image-feature.tsx"],"sourcesContent":["@include image-alignment();\n@include text-colours();\n\n:host {\n display: contents;\n}\n\n.container {\n @include standard-font();\n position: relative;\n .sleeve {\n @include flex-container-row();\n .content-wrap {\n width: calc(40% - $spacer-3);\n position: relative;\n z-index: 1;\n .slug {\n @include heading-4;\n margin: 0;\n padding: 0;\n }\n h2 {\n @include heading-2;\n margin: 0 0 $spacer-3 0;\n padding: 0;\n }\n .teaser {\n margin: 0 0 $spacer-5 0;\n padding: 0;\n }\n }\n \n .graphic-wrap {\n width: calc(60% - $spacer-3);\n }\n }\n}\n\n\n@media screen and (max-width: $screen-mobile-max) {\n .container {\n .sleeve {\n flex-wrap: wrap;\n .content-wrap {\n width: 100%;\n }\n .graphic-wrap {\n width: 100%;\n margin-bottom: $spacer-3;\n order: -1;\n }\n }\n }\n}\n\n\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'biggive-image-feature',\n styleUrl: 'biggive-image-feature.scss',\n shadow: true,\n})\nexport class BiggiveImageFeature {\n /*\n Space below component\n /\n @Prop() spaceBelow: number = 0;\n /\n Default text colour\n /\n @Prop() defaultTextColour: string = 'primary';\n\n /\n Full URL of a image.\n /\n @Prop() imageUrl: string = '';\n\n /\n Image alt text tag.\n /\n @Prop() imageAltText: string = '';\n\n /\n Slug\n /\n @Prop() slug: string;\n\n /\n Slug colour\n /\n @Prop() slugColour: string = '';\n\n /\n Video title\n /\n @Prop() mainTitle: string;\n\n /\n Slug colour\n /\n @Prop() mainTitleColour: string = '';\n\n /\n Introductory teaser text\n /\n @Prop() teaser: string;\n\n /\n Teaser colour\n /\n @Prop() teaserColour: string = '';\n\n /\n Button Url\n /\n @Prop() buttonUrl: string;\n\n /\n Button Label\n /\n @Prop() buttonLabel: string;\n\n /\n Button Colour Scheme\n */\n @Prop() buttonColourScheme: string = 'primary';\n\n render() {\n return (\n <div class={'container text-colour-' + this.defaultTextColour + ' space-below-' + this.spaceBelow}>\n <div class=\"sleeve\">\n <div class=\"content-wrap\">\n <div class={'slug text-colour-' + this.slugColour}>{this.slug}</div>\n <h2 class={'title text-colour-' + this.mainTitleColour}>{this.mainTitle}</h2>\n <div class={'teaser text-colour-' + this.teaserColour}>{this.teaser}</div>\n {this.buttonLabel != null && this.buttonUrl != null ? (\n <biggive-button colour-scheme={this.buttonColourScheme} url={this.buttonUrl} label={this.buttonLabel}></biggive-button>\n ) : null}\n </div>\n <div class=\"graphic-wrap\">\n {this.imageUrl !== null && this.imageUrl !== undefined ? (\n <div class=\"image-wrap\">\n <img src={this.imageUrl} alt={this.imageAltText} />\n </div>\n ) : null}\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/biggive-image.js CHANGED Viewed

@@ -3,9 +3,11 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 const biggiveImageCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.image-wrap img{width:100%;height:auto}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}";
 const BiggiveImage$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveImage extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         /**
          * Space above component

package/dist/components/biggive-image.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"biggive-image.js","mappings":";;AAAA,MAAM,eAAe,GAAG,6pBAA6pB;;MCOxqBA,cAAY,iBAAAC,kBAAA,CAAA,MAAA,YAAA,SAAA,WAAA,CAAA;AALzB,IAAA,WAAA,~~GAAA;;;;~~AAME;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAW,CAAC;AAE9B;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAW,CAAC;AAE9B;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,EAAE;AAE7B;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAW,EAAE;AAEjC;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,CAAC;AAEzB;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAW,CAAC;AAE1B;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,IAAI;AA2BhC;IAzBS,QAAQ,GAAA;QACd,IAAI,KAAK,GAAG,MAAM;AAClB,QAAA,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE;YAClB,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ;;AAEpC,QAAA,OAAO,KAAK;;IAGN,SAAS,GAAA;QACf,IAAI,MAAM,GAAG,MAAM;AACnB,QAAA,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;YACnB,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ;;AAEtC,QAAA,OAAO,MAAM;;IAGf,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,EAAA,EACrJ,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,YAAY,EAAA,CAAI,CAC5G,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveImage","__stencil_proxyCustomElement"],"sources":["src/components/biggive-image/biggive-image.scss?tag=biggive-image&encapsulation=shadow","src/components/biggive-image/biggive-image.tsx"],"sourcesContent":["@include image-alignment();\n@include spacers();\n\n:host {\n display: contents;\n}\n\n.container {\n @include standard-font();\n}","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'biggive-image',\n styleUrl: 'biggive-image.scss',\n shadow: true,\n})\nexport class BiggiveImage {\n /*\n Space above component\n /\n @Prop() spaceAbove: number = 0;\n\n /\n Space below component\n /\n @Prop() spaceBelow: number = 0;\n\n /\n Full URL of a image.\n /\n @Prop() imageUrl: string = '';\n\n /\n Image alt text tag.\n /\n @Prop() imageAltText: string = '';\n\n /\n Image width\n /\n @Prop() width: number = 0;\n\n /\n Image width\n /\n @Prop() height: number = 0;\n\n /\n Size unit\n */\n @Prop() sizeUnit: string = 'px';\n\n private getWidth(): string {\n var width = 'auto';\n if (this.width > 0) {\n width = this.width + this.sizeUnit;\n }\n return width;\n }\n\n private getHeight(): string {\n var height = 'auto';\n if (this.height > 0) {\n height = this.height + this.sizeUnit;\n }\n return height;\n }\n\n render() {\n return (\n <div class={'container space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow} style={{ width: this.getWidth(), height: this.getHeight() }}>\n <div class=\"image-wrap\">\n <img src={this.imageUrl} style={{ width: this.getWidth(), height: this.getHeight() }} alt={this.imageAltText} />\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"biggive-image.js","mappings":";;AAAA,MAAM,eAAe,GAAG,6pBAA6pB;;MCOxqBA,cAAY,iBAAAC,kBAAA,CAAA,MAAA,YAAA,SAAA,WAAA,CAAA;AALzB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAW,CAAC;AAE9B;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAW,CAAC;AAE9B;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,EAAE;AAE7B;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAW,EAAE;AAEjC;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,CAAC;AAEzB;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAW,CAAC;AAE1B;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,IAAI;AA2BhC;IAzBS,QAAQ,GAAA;QACd,IAAI,KAAK,GAAG,MAAM;AAClB,QAAA,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE;YAClB,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ;;AAEpC,QAAA,OAAO,KAAK;;IAGN,SAAS,GAAA;QACf,IAAI,MAAM,GAAG,MAAM;AACnB,QAAA,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;YACnB,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ;;AAEtC,QAAA,OAAO,MAAM;;IAGf,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,EAAA,EACrJ,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,YAAY,EAAA,CAAI,CAC5G,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveImage","__stencil_proxyCustomElement"],"sources":["src/components/biggive-image/biggive-image.scss?tag=biggive-image&encapsulation=shadow","src/components/biggive-image/biggive-image.tsx"],"sourcesContent":["@include image-alignment();\n@include spacers();\n\n:host {\n display: contents;\n}\n\n.container {\n @include standard-font();\n}","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'biggive-image',\n styleUrl: 'biggive-image.scss',\n shadow: true,\n})\nexport class BiggiveImage {\n /*\n Space above component\n /\n @Prop() spaceAbove: number = 0;\n\n /\n Space below component\n /\n @Prop() spaceBelow: number = 0;\n\n /\n Full URL of a image.\n /\n @Prop() imageUrl: string = '';\n\n /\n Image alt text tag.\n /\n @Prop() imageAltText: string = '';\n\n /\n Image width\n /\n @Prop() width: number = 0;\n\n /\n Image width\n /\n @Prop() height: number = 0;\n\n /\n Size unit\n */\n @Prop() sizeUnit: string = 'px';\n\n private getWidth(): string {\n var width = 'auto';\n if (this.width > 0) {\n width = this.width + this.sizeUnit;\n }\n return width;\n }\n\n private getHeight(): string {\n var height = 'auto';\n if (this.height > 0) {\n height = this.height + this.sizeUnit;\n }\n return height;\n }\n\n render() {\n return (\n <div class={'container space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow} style={{ width: this.getWidth(), height: this.getHeight() }}>\n <div class=\"image-wrap\">\n <img src={this.imageUrl} style={{ width: this.getWidth(), height: this.getHeight() }} alt={this.imageAltText} />\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/biggive-main-menu.js CHANGED Viewed

@@ -6,9 +6,11 @@ import { d as defineCustomElement$2 } from './biggive-social-icon2.js';
 const biggiveMainMenuCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}:host{display:block !important}:host(.fixed){position:fixed;top:0;left:0;right:0;z-index:10}*{margin:0;padding:0;box-sizing:border-box;font-family:\"Euclid Triangle\", sans-serif}a[class^=icon-],a[class*=icon-]{padding-left:20px;background-repeat:no-repeat;background-size:auto 10px;background-position:left center}a.icon-earth-raise{background-image:url(/assets/images/triangles-combined-earth-raise.svg)}a.icon-children{background-image:url(/assets/images/triangles-combined-children.svg)}a.icon-christmas{background-image:url(/assets/images/triangles-combined-christmas-challenge.svg)}a.icon-women-girls{background-image:url(/assets/images/triangles-combined-women-girls.svg)}a.icon-mental-health{background-image:url(/assets/images/triangles-combined-mental-health.svg)}a.icon-anchor-match{background-image:url(/assets/images/triangles-combined-anchor.svg)}a.icon-small-charity{background-image:url(/assets/images/triangles-combined-small-charity-week.svg)}a.icon-emergency{background-image:url(/assets/images/triangles-combined-emergency.svg)}a.icon-arts-impact{background-image:url(/assets/images/triangles-combined-arts-black.svg)}.mobile-only{display:none !important}.row-top{padding:10px 30px;background-color:#2C089B;display:flex;max-height:60px}.row-top .social-icon-wrap{display:flex;min-height:40px;margin-right:10px}.row-top .social-icon-wrap .social-icon-item{margin-right:10px}.row-top .nav-secondary{margin-left:auto;display:grid}.row-top .nav-secondary ul{list-style:none;display:inline-flex;margin:auto}.row-top .nav-secondary li{border-right:1px solid #FFFFFF;height:fit-content;padding:0 10px}.row-top .nav-secondary li:last-child{border-right:0;padding-right:0}.row-top .nav-secondary li a{color:#FFFFFF;text-decoration:none}nav{top:0;left:0;width:100%;height:70px;background:white;z-index:99;box-shadow:0 1px 2px rgba(0, 0, 0, 0.2)}nav .navbar{height:100%;width:100%;display:flex;align-items:center;justify-content:space-between;margin:auto;padding:0 50px}nav .navbar .nav-links{line-height:70px;height:100%}nav .navbar .nav-links .sidebar-logo{display:none}nav .navbar .nav-links .links{display:flex}nav .navbar .nav-links .links li{position:relative;display:flex;align-items:center;justify-content:space-between;list-style:none;padding:0 30px}nav .navbar .nav-links .links li a{height:100%;text-decoration:none;white-space:nowrap;color:black;font-size:17px;font-weight:500}nav .navbar .nav-links .links li .sub-menu{position:absolute;top:70px;left:0;line-height:40px;box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);border-radius:0 0 4px 4px;display:none;z-index:2;background-color:inherit}nav .navbar .nav-links .links li .sub-menu li{padding:0 22px;border-bottom:1px solid rgba(255, 255, 255, 0.1)}nav .navbar .nav-links .links li .sub-menu a{color:black;font-size:15px;font-weight:500}nav .navbar .nav-links .links li .sub-menu .more .sub-sub-menu{position:absolute;top:0;right:100%;border-radius:0 4px 4px 4px;z-index:1;display:none}nav .navbar .nav-links .links li .arrow{margin-left:5px;text-align:center;display:inline-block;color:black;transition:all 0.3s ease}nav .navbar .nav-links .links li .arrow.transform-90{transform:rotate(90deg)}nav .navbar .logo{min-width:180px;width:180px}nav .navbar .logo a{font-size:30px;color:black;text-decoration:none;font-weight:600;display:grid}nav .navbar .bx-menu{display:none}@media (hover: hover){.row-top .nav-secondary li a:hover{border-bottom-color:#FFFFFF;color:#FFFFFF}nav .navbar .nav-links .links li .sub-menu .more:hover .sub-sub-menu{display:block}nav .navbar .nav-links .links li:hover .sub-menu-arrow{transform:rotate(90deg)}nav .navbar .nav-links .links li:hover .sub-menu{display:block;background-color:white}nav .navbar .nav-links .links li:hover .sub-menu .sub-sub-menu{background-color:white}}@media (max-width: 1200px){nav .navbar .logo{min-width:120px;width:120px}nav .navbar .nav-links .links li{padding:0 7px}nav .navbar .nav-links .links li a{font-size:15px}nav .navbar .nav-links .links li .sub-menu a{font-size:13px}}@media (max-width: 968px){.mobile-only{display:block !important}.row-top{display:none}nav{height:60px}nav .navbar{padding:0px 25px}nav .navbar .bx-menu{display:block;font-size:25px;color:black}nav .navbar .nav-links{position:fixed;top:0;left:-100%;display:block;max-width:450px;width:100%;background:white;line-height:40px;padding:20px;box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);transition:all 0.5s ease;z-index:1000;overflow-y:scroll}nav .navbar .nav-links .sidebar-logo{display:flex;align-items:center;justify-content:space-between}nav .navbar .nav-links .sidebar-logo a{display:contents}nav .navbar .nav-links .sidebar-logo a #mobileLogo{width:130px}nav .navbar .nav-links .sidebar-logo #x{margin-right:15px}nav .navbar .nav-links .sidebar-logo i{font-size:25px;color:black}nav .navbar .nav-links .mobile-social-icon-wrap{margin-top:20px}nav .navbar .nav-links .links{display:block;margin-top:20px}nav .navbar .nav-links .links li{display:block;border-bottom:1px solid #e6e6e6}nav .navbar .nav-links .links li a{width:100%;display:block}nav .navbar .nav-links .links li .sub-menu{position:relative;top:0;box-shadow:none;display:none}nav .navbar .nav-links .links li .sub-menu li{border-bottom:none}nav .navbar .nav-links .links li .sub-menu .sub-sub-menu{display:none;position:relative;left:0}nav .navbar .nav-links .links li .sub-menu .sub-sub-menu li{display:flex;align-items:center;justify-content:space-between}nav .navbar .nav-links .links li .sub-menu .more span{display:flex;align-items:center}nav .navbar .nav-links .links li .sub-menu .more .sub-sub-menu.display-sub-menu{position:initial}}@media (max-width: 968px) and (max-width: 370px){nav .navbar .nav-links{max-width:100%}}.display-sub-menu,.display-sub-menu li{display:block !important}#nav-primary .display-sub-menu,#nav-primary .display-sub-menu li{background-color:white}.sub-menu-main{position:absolute;top:20px;left:0;line-height:40px;border-radius:0 0 4px 4px;display:none;background-color:#2C089B;z-index:2}.sub-menu-main li{border-right:none !important;padding:0 22px;display:none}@media (max-width: 968px){.sub-menu-main{position:static !important;background:none}}.arrow{margin-left:5px;text-align:center;display:inline-block;color:black;transition:all 0.3s ease}.arrow.transform-90{transform:rotate(90deg)}.nav-secondary li{position:relative !important}.nav-secondary li:hover .sub-menu-arrow{transform:rotate(90deg)}.nav-secondary li:hover .sub-menu-main{display:block}.nav-secondary li:hover .sub-menu-main li{display:block}";
 const BiggiveMainMenu$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveMainMenu extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.logoutClicked = createEvent(this, "logoutClicked", 7);
         // URL prefixes vary by environment, and components library is not best placed to know what they are, so we