npm - @biggive/components - Versions diffs - 202501031034.0.0 → 202501071646.0.0 - Mend

@biggive/components 202501031034.0.0 → 202501071646.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 (321) hide show

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

@@ -10,6 +10,9 @@ const BiggiveGrid$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveGrid extends
         this.__attachShadow();
         this.spaceBelow = 4;
         this.columnCount = 3;
+        /**
+         * Deprecated - should use columGap Instead
+         */
         this.spaceBetween = false;
         this.columnGap = 0;
     }

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

	@@ -1 +1 @@
1	- {"file":"biggive-grid.js","mappings":";;AAAA,MAAM,cAAc,GAAG,63RAA63R,CAAC;AACr5R,0BAAe,cAAc;;MCOhBA,aAAW~~;;;;;0BACO~~,CAAC~~;2BAEA~~,CAAC;~~4BAKC~~,KAAK;~~yBAEF~~,CAAC~~;;IAEpC~~,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC,WAAW,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,cAAc,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,GAAG,gBAAgB,GAAG,EAAE,CAAC,IACrK,8DAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveGrid"],"sources":["src/components/biggive-grid/biggive-grid.scss?tag=biggive-grid&encapsulation=shadow","src/components/biggive-grid/biggive-grid.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n display: contents;\n}\n\n.grid {\n margin-bottom: $spacer-3;\n display: flex;\n flex-flow: row wrap;\n}\n\n.space-between {\n justify-content: space-between;\n}\n\n.grid ::slotted([slot=grid-item]) {\n display: block;\n}\n\n.column-count-2 ::slotted() {\n width: calc( 100% / 2 );\n @include flex-container-column();\n}\n\n.column-count-3 ::slotted() {\n width: calc( 100% / 3 );\n @include flex-container-column();\n}\n\n.column-count-4 ::slotted() {\n width: calc( 100% / 4 );\n @include flex-container-column();\n}\n\n.column-count-5 ::slotted() {\n width: calc( 100% / 5 );\n @include flex-container-column();\n}\n\n.column-count-6 ::slotted() {\n width: calc( 100% / 6 );\n @include flex-container-column();\n}\n\n\n.column-gap-1 { justify-content: space-between; }\n.column-gap-2 { justify-content: space-between; }\n.column-gap-3 { justify-content: space-between; }\n.column-gap-4 { justify-content: space-between; }\n.column-gap-5 { justify-content: space-between; }\n.column-gap-6 { justify-content: space-between; }\n\n\n.column-count-2.column-gap-1 ::slotted() { width: calc( 100% / 2 - (($spacer-1 * 1) / 2) );}\n.column-count-2.column-gap-2 ::slotted() { width: calc( 100% / 2 - (($spacer-2 1) / 2) );}\n.column-count-2.column-gap-3 ::slotted() { width: calc( 100% / 2 - (($spacer-3 1) / 2) );}\n.column-count-2.column-gap-4 ::slotted() { width: calc( 100% / 2 - (($spacer-4 1) / 2) );}\n.column-count-2.column-gap-5 ::slotted() { width: calc( 100% / 2 - (($spacer-5 1) / 2) );}\n.column-count-2.column-gap-6 ::slotted() { width: calc( 100% / 2 - (($spacer-6 1) / 2) );}\n\n.column-count-3.column-gap-1 ::slotted() { width: calc( 100% / 3 - (($spacer-1 2) / 3) );}\n.column-count-3.column-gap-2 ::slotted() { width: calc( 100% / 3 - (($spacer-2 2) / 3) );}\n.column-count-3.column-gap-3 ::slotted() { width: calc( 100% / 3 - (($spacer-3 2) / 3) );}\n.column-count-3.column-gap-4 ::slotted() { width: calc( 100% / 3 - (($spacer-4 2) / 3) );}\n.column-count-3.column-gap-5 ::slotted() { width: calc( 100% / 3 - (($spacer-5 2) / 3) );}\n.column-count-3.column-gap-6 ::slotted() { width: calc( 100% / 3 - (($spacer-6 2) / 3) );}\n\n.column-count-4.column-gap-1 ::slotted() { width: calc( 100% / 4 - (($spacer-1 3) / 4) );}\n.column-count-4.column-gap-2 ::slotted() { width: calc( 100% / 4 - (($spacer-2 3) / 4) );}\n.column-count-4.column-gap-3 ::slotted() { width: calc( 100% / 4 - (($spacer-3 3) / 4) );}\n.column-count-4.column-gap-4 ::slotted() { width: calc( 100% / 4 - (($spacer-4 3) / 4) );}\n.column-count-4.column-gap-5 ::slotted() { width: calc( 100% / 4 - (($spacer-5 3) / 4) );}\n.column-count-4.column-gap-6 ::slotted() { width: calc( 100% / 4 - (($spacer-6 3) / 4) );}\n\n.column-count-5.column-gap-1 ::slotted() { width: calc( 100% / 5 - (($spacer-1 4) / 5) );}\n.column-count-5.column-gap-2 ::slotted() { width: calc( 100% / 5 - (($spacer-2 4) / 5) );}\n.column-count-5.column-gap-3 ::slotted() { width: calc( 100% / 5 - (($spacer-3 4) / 5) );}\n.column-count-5.column-gap-4 ::slotted() { width: calc( 100% / 5 - (($spacer-4 4) / 5) );}\n.column-count-5.column-gap-5 ::slotted() { width: calc( 100% / 5 - (($spacer-5 4) / 5) );}\n.column-count-5.column-gap-6 ::slotted() { width: calc( 100% / 5 - (($spacer-6 4) / 5) );}\n\n.column-count-6.column-gap-1 ::slotted() { width: calc( 100% / 6 - (($spacer-1 5) / 6) );}\n.column-count-6.column-gap-2 ::slotted() { width: calc( 100% / 6 - (($spacer-2 5) / 6) );}\n.column-count-6.column-gap-3 ::slotted() { width: calc( 100% / 6 - (($spacer-3 5) / 6) );}\n.column-count-6.column-gap-4 ::slotted() { width: calc( 100% / 6 - (($spacer-4 5) / 6) );}\n.column-count-6.column-gap-5 ::slotted() { width: calc( 100% / 6 - (($spacer-5 5) / 6) );}\n.column-count-6.column-gap-6 ::slotted() { width: calc( 100% / 6 - (($spacer-6 5) / 6) );}\n\n.column-count-3.column-gap-1:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-1 * 2) / 3) );}\n.column-count-3.column-gap-2:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-2 * 2) / 3) );}\n.column-count-3.column-gap-3:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-3 * 2) / 3) );}\n.column-count-3.column-gap-4:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-4 * 2) / 3) );}\n.column-count-3.column-gap-5:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-5 * 2) / 3) );}\n.column-count-3.column-gap-6:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-6 * 2) / 3) );}\n\n\n\n\n@media screen and (max-width: $screen-large) {\n\n @for $i from 1 through 6 {\n .column-count-#{$i} ::slotted() { width: calc( 51% - (($spacer-4 1) / 2)) };\n @for $j from 1 through 6 {\n .column-count-#{$i}.column-gap-#{$j} ::slotted() { width: calc( 50% - (($spacer-4 1) / 2)) };\n }\n }\n\n}\n\n@media screen and (max-width: $screen-mobile-max) {\n @for $i from 1 through 6 {\n .column-count-#{$i} ::slotted() { width: 100%; };\n @for $j from 1 through 6 {\n .column-count-#{$i}.column-gap-#{$j} ::slotted() { width: 100%; };\n }\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n tag: 'biggive-grid',\n styleUrl: 'biggive-grid.scss',\n shadow: true,\n})\nexport class BiggiveGrid {\n @Prop() spaceBelow: number = 4;\n\n @Prop() columnCount: number = 3;\n\n /*\n Deprecated - should use columGap Instead\n */\n @Prop() spaceBetween: boolean = false;\n\n @Prop() columnGap: spacingOption = 0;\n\n render() {\n return (\n <div class={'grid column-count-' + this.columnCount + ' space-below-' + this.spaceBelow + ' column-gap-' + this.columnGap + (this.spaceBetween ? ' space-between' : '')}>\n <slot></slot>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"biggive-grid.js","mappings":";;AAAA,MAAM,cAAc,GAAG,63RAA63R,CAAC;AACr5R,0BAAe,cAAc;;MCOhBA,aAAW;IALxB;;;;QAMU,eAAU,GAAW,CAAC,CAAC;QAEvB,gBAAW,GAAW,CAAC,CAAC;;;;QAKxB,iBAAY,GAAY,KAAK,CAAC;QAE9B,cAAS,GAAkB,CAAC,CAAC;KAStC;IAPC,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC,WAAW,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,cAAc,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,GAAG,gBAAgB,GAAG,EAAE,CAAC,IACrK,8DAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveGrid"],"sources":["src/components/biggive-grid/biggive-grid.scss?tag=biggive-grid&encapsulation=shadow","src/components/biggive-grid/biggive-grid.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n display: contents;\n}\n\n.grid {\n margin-bottom: $spacer-3;\n display: flex;\n flex-flow: row wrap;\n}\n\n.space-between {\n justify-content: space-between;\n}\n\n.grid ::slotted([slot=grid-item]) {\n display: block;\n}\n\n.column-count-2 ::slotted() {\n width: calc( 100% / 2 );\n @include flex-container-column();\n}\n\n.column-count-3 ::slotted() {\n width: calc( 100% / 3 );\n @include flex-container-column();\n}\n\n.column-count-4 ::slotted() {\n width: calc( 100% / 4 );\n @include flex-container-column();\n}\n\n.column-count-5 ::slotted() {\n width: calc( 100% / 5 );\n @include flex-container-column();\n}\n\n.column-count-6 ::slotted() {\n width: calc( 100% / 6 );\n @include flex-container-column();\n}\n\n\n.column-gap-1 { justify-content: space-between; }\n.column-gap-2 { justify-content: space-between; }\n.column-gap-3 { justify-content: space-between; }\n.column-gap-4 { justify-content: space-between; }\n.column-gap-5 { justify-content: space-between; }\n.column-gap-6 { justify-content: space-between; }\n\n\n.column-count-2.column-gap-1 ::slotted() { width: calc( 100% / 2 - (($spacer-1 * 1) / 2) );}\n.column-count-2.column-gap-2 ::slotted() { width: calc( 100% / 2 - (($spacer-2 1) / 2) );}\n.column-count-2.column-gap-3 ::slotted() { width: calc( 100% / 2 - (($spacer-3 1) / 2) );}\n.column-count-2.column-gap-4 ::slotted() { width: calc( 100% / 2 - (($spacer-4 1) / 2) );}\n.column-count-2.column-gap-5 ::slotted() { width: calc( 100% / 2 - (($spacer-5 1) / 2) );}\n.column-count-2.column-gap-6 ::slotted() { width: calc( 100% / 2 - (($spacer-6 1) / 2) );}\n\n.column-count-3.column-gap-1 ::slotted() { width: calc( 100% / 3 - (($spacer-1 2) / 3) );}\n.column-count-3.column-gap-2 ::slotted() { width: calc( 100% / 3 - (($spacer-2 2) / 3) );}\n.column-count-3.column-gap-3 ::slotted() { width: calc( 100% / 3 - (($spacer-3 2) / 3) );}\n.column-count-3.column-gap-4 ::slotted() { width: calc( 100% / 3 - (($spacer-4 2) / 3) );}\n.column-count-3.column-gap-5 ::slotted() { width: calc( 100% / 3 - (($spacer-5 2) / 3) );}\n.column-count-3.column-gap-6 ::slotted() { width: calc( 100% / 3 - (($spacer-6 2) / 3) );}\n\n.column-count-4.column-gap-1 ::slotted() { width: calc( 100% / 4 - (($spacer-1 3) / 4) );}\n.column-count-4.column-gap-2 ::slotted() { width: calc( 100% / 4 - (($spacer-2 3) / 4) );}\n.column-count-4.column-gap-3 ::slotted() { width: calc( 100% / 4 - (($spacer-3 3) / 4) );}\n.column-count-4.column-gap-4 ::slotted() { width: calc( 100% / 4 - (($spacer-4 3) / 4) );}\n.column-count-4.column-gap-5 ::slotted() { width: calc( 100% / 4 - (($spacer-5 3) / 4) );}\n.column-count-4.column-gap-6 ::slotted() { width: calc( 100% / 4 - (($spacer-6 3) / 4) );}\n\n.column-count-5.column-gap-1 ::slotted() { width: calc( 100% / 5 - (($spacer-1 4) / 5) );}\n.column-count-5.column-gap-2 ::slotted() { width: calc( 100% / 5 - (($spacer-2 4) / 5) );}\n.column-count-5.column-gap-3 ::slotted() { width: calc( 100% / 5 - (($spacer-3 4) / 5) );}\n.column-count-5.column-gap-4 ::slotted() { width: calc( 100% / 5 - (($spacer-4 4) / 5) );}\n.column-count-5.column-gap-5 ::slotted() { width: calc( 100% / 5 - (($spacer-5 4) / 5) );}\n.column-count-5.column-gap-6 ::slotted() { width: calc( 100% / 5 - (($spacer-6 4) / 5) );}\n\n.column-count-6.column-gap-1 ::slotted() { width: calc( 100% / 6 - (($spacer-1 5) / 6) );}\n.column-count-6.column-gap-2 ::slotted() { width: calc( 100% / 6 - (($spacer-2 5) / 6) );}\n.column-count-6.column-gap-3 ::slotted() { width: calc( 100% / 6 - (($spacer-3 5) / 6) );}\n.column-count-6.column-gap-4 ::slotted() { width: calc( 100% / 6 - (($spacer-4 5) / 6) );}\n.column-count-6.column-gap-5 ::slotted() { width: calc( 100% / 6 - (($spacer-5 5) / 6) );}\n.column-count-6.column-gap-6 ::slotted() { width: calc( 100% / 6 - (($spacer-6 5) / 6) );}\n\n.column-count-3.column-gap-1:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-1 * 2) / 3) );}\n.column-count-3.column-gap-2:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-2 * 2) / 3) );}\n.column-count-3.column-gap-3:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-3 * 2) / 3) );}\n.column-count-3.column-gap-4:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-4 * 2) / 3) );}\n.column-count-3.column-gap-5:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-5 * 2) / 3) );}\n.column-count-3.column-gap-6:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-6 * 2) / 3) );}\n\n\n\n\n@media screen and (max-width: $screen-large) {\n\n @for $i from 1 through 6 {\n .column-count-#{$i} ::slotted() { width: calc( 51% - (($spacer-4 1) / 2)) };\n @for $j from 1 through 6 {\n .column-count-#{$i}.column-gap-#{$j} ::slotted() { width: calc( 50% - (($spacer-4 1) / 2)) };\n }\n }\n\n}\n\n@media screen and (max-width: $screen-mobile-max) {\n @for $i from 1 through 6 {\n .column-count-#{$i} ::slotted() { width: 100%; };\n @for $j from 1 through 6 {\n .column-count-#{$i}.column-gap-#{$j} ::slotted() { width: 100%; };\n }\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n tag: 'biggive-grid',\n styleUrl: 'biggive-grid.scss',\n shadow: true,\n})\nexport class BiggiveGrid {\n @Prop() spaceBelow: number = 4;\n\n @Prop() columnCount: number = 3;\n\n /*\n Deprecated - should use columGap Instead\n */\n @Prop() spaceBetween: boolean = false;\n\n @Prop() columnGap: spacingOption = 0;\n\n render() {\n return (\n <div class={'grid column-count-' + this.columnCount + ' space-below-' + this.spaceBelow + ' column-gap-' + this.columnGap + (this.spaceBetween ? ' space-between' : '')}>\n <slot></slot>\n </div>\n );\n }\n}\n"],"version":3}

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

	@@ -1 +1 @@
1	- {"file":"biggive-heading.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,yvHAAyvH,CAAC;AACpxH,6BAAe,iBAAiB;;MCUnBA,gBAAc~~;;;;;0BACW~~,CAAC;~~0BAED~~,CAAC;~~sBAEP~~,SAAS;~~2BAEL~~,IAAI;~~oBAEV~~,CAAC;~~qBAEL~~,MAAM;~~oBAEP~~,EAAE;~~oBAED~~,KAAK;~~0BAEK~~,SAAS~~;;IAE3C~~,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC;QAC7B,QACE,4DAAK,KAAK,EAAE,kBAAkB,GAAG,IAAI,CAAC,KAAK,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IACjH,EAAC,GAAG,qDAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,CAAC,MAAM,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,WAAW,GAAG,IAAI,CAAC,IAAI,IACtG,IAAI,CAAC,IAAI,IACR,WAAK,OAAO,EAAC,YAAY,IACvB,YAAM,KAAK,EAAC,KAAK,EAAC,CAAC,EAAC,4BAA4B,GAAG,EACnD,YACE,CAAC,EAAC,47CAW6C,GAC/C,CACE,IACJ,IAAI,EAEP,IAAI,CAAC,IAAI,CACN,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveHeading"],"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 headings();\n@include spacers();\n\n:host {\n display: contents;\n}\n\n.container {\n @include standard-font();\n @each $key, $colour in $brandColoursIncBrand6Turquoise {\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 $brandColoursIncBrand6Turquoise {\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\n @Prop() spaceBelow: spacingOption = 4;\n\n @Prop() colour: brandColour = 'primary';\n\n @Prop() htmlElement: headingTag = 'h1';\n\n @Prop() size: headingSize = 1;\n\n @Prop() align: string = 'left';\n\n @Prop() text: string = '';\n\n @Prop() icon: boolean = false;\n\n @Prop() iconColour: brandColour = 'primary';\n\n render() {\n const Tag = this.htmlElement;\n return (\n <div class={'container 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,yvHAAyvH,CAAC;AACpxH,6BAAe,iBAAiB;;MCUnBA,gBAAc;IAL3B;;;;QAMU,eAAU,GAAkB,CAAC,CAAC;QAE9B,eAAU,GAAkB,CAAC,CAAC;QAE9B,WAAM,GAAgB,SAAS,CAAC;QAEhC,gBAAW,GAAe,IAAI,CAAC;QAE/B,SAAI,GAAgB,CAAC,CAAC;QAEtB,UAAK,GAAW,MAAM,CAAC;QAEvB,SAAI,GAAW,EAAE,CAAC;QAElB,SAAI,GAAY,KAAK,CAAC;QAEtB,eAAU,GAAgB,SAAS,CAAC;KAgC7C;IA9BC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC;QAC7B,QACE,4DAAK,KAAK,EAAE,kBAAkB,GAAG,IAAI,CAAC,KAAK,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IACjH,EAAC,GAAG,qDAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,CAAC,MAAM,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,WAAW,GAAG,IAAI,CAAC,IAAI,IACtG,IAAI,CAAC,IAAI,IACR,WAAK,OAAO,EAAC,YAAY,IACvB,YAAM,KAAK,EAAC,KAAK,EAAC,CAAC,EAAC,4BAA4B,GAAG,EACnD,YACE,CAAC,EAAC,47CAW6C,GAC/C,CACE,IACJ,IAAI,EAEP,IAAI,CAAC,IAAI,CACN,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveHeading"],"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 headings();\n@include spacers();\n\n:host {\n display: contents;\n}\n\n.container {\n @include standard-font();\n @each $key, $colour in $brandColoursIncBrand6Turquoise {\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 $brandColoursIncBrand6Turquoise {\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\n @Prop() spaceBelow: spacingOption = 4;\n\n @Prop() colour: brandColour = 'primary';\n\n @Prop() htmlElement: headingTag = 'h1';\n\n @Prop() size: headingSize = 1;\n\n @Prop() align: string = 'left';\n\n @Prop() text: string = '';\n\n @Prop() icon: boolean = false;\n\n @Prop() iconColour: brandColour = 'primary';\n\n render() {\n const Tag = this.htmlElement;\n return (\n <div class={'container 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

@@ -9,23 +9,46 @@ const BiggiveHeroImage$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveHeroIma
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Colour Scheme
+         */
         this.colourScheme = 'primary';
-        this.slug = undefined;
-        this.slugColour = undefined;
+        /**
+         * Full URL of a logo image.
+         */
         this.logo = '';
+        /**
+        * Logo container height selection. Numbers are not measurements.
+        */
         this.logoHeight = 3;
+        /**
+         * Logo alt text
+         */
         this.logoAltText = '';
+        /**
+         * Full URL of a main hero image.
+         */
         this.mainImage = null;
+        /**
+         * Determines whether the main image is clipped to a triangle shape (default) or used as
+         * a background for the entire component. Clipping can leave a lot of blank space.
+         */
         this.mainImageShape = 'triangle';
+        /**
+         * Horizontal alignment of image
+         */
         this.mainImageAlignHorizontal = 'center';
+        /**
+     * Vertical alignment of image
+     */
         this.mainImageAlignVertical = 'center';
-        this.mainTitle = undefined;
-        this.mainTitleColour = undefined;
-        this.teaser = undefined;
-        this.teaserColour = undefined;
-        this.buttonUrl = undefined;
-        this.buttonLabel = undefined;
+        /**
+         * Button Colour Scheme
+         */
         this.buttonColourScheme = 'primary';
     }
     render() {

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"],"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 $brandColoursIncBrand6Turquoise {\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"],"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 $brandColoursIncBrand6Turquoise {\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

@@ -10,17 +10,10 @@ const BiggiveIconButton$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveIconBu
         this.__registerHost();
         this.__attachShadow();
         this.doButtonClick = createEvent(this, "doButtonClick", 7);
-        this.handleButtonClick = (event) => {
-            this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });
-        };
         this.spaceBelow = 1;
         this.backgroundColour = 'white';
         this.backgroundPadding = 0;
-        this.text = undefined;
         this.textColour = 'black';
-        this.iconGroup = undefined;
-        this.icon = undefined;
-        this.url = undefined;
         this.openInNewTab = false;
         this.size = 'medium';
         this.arrow = false;
@@ -30,6 +23,9 @@ const BiggiveIconButton$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveIconBu
         this.centered = false;
         this.rounded = false;
         this.buttonId = undefined;
+        this.handleButtonClick = (event) => {
+            this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });
+        };
     }
     render() {
         return (h("div", { key: '2345c3faaec52f17c518641b301caedc686ba150', class: 'container space-below-' +

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

	@@ -1 +1 @@
1	- {"file":"biggive-icon-button.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,6sTAA6sT,CAAC;AAC3uT,gCAAe,oBAAoB;;MCQtBA,mBAAiB~~;;;;;;QA2CpB~~,~~sBAAiB~~,~~GAAG~~,CAAC,~~KAAU~~;~~YACrC~~,~~IAAI~~,~~CAAC~~,~~aAAa~~,CAAC,~~IAAI~~,CAAC,~~EAAE~~,~~KAAK~~,~~EAAE~~,~~KAAK~~,~~EAAE~~,~~GAAG~~,~~EAAE~~,KAAK,CAAC,~~MAAM~~,~~CAAC~~,~~aAAa~~,CAAC,~~IAAI~~,~~EAAE~~,~~CAAC~~,CAAC;~~SACjF~~,CAAC;~~0BApCkC~~,CAAC;~~gCAEG~~,~~OAAO;iCAEJ~~,CAAC~~;;0BAIV~~,~~OAAO;;;;4BAQT~~,KAAK~~;oBAEiC~~,~~QAAQ~~;~~qBAErD~~,KAAK;~~2BAEK~~,~~OAAO~~;~~sBAEhB~~,~~KAAK~~;~~sBAEL~~,KAAK~~;wBAEH~~,KAAK~~;uBAEN~~,KAAK;~~wBAEO~~,~~SAAS;;IAMhD~~,MAAM;QACJ,QACE,4DACE,KAAK,EACH,wBAAwB;gBACxB,IAAI,CAAC,UAAU;gBACf,qBAAqB;gBACrB,IAAI,CAAC,gBAAgB;gBACrB,sBAAsB;gBACtB,IAAI,CAAC,iBAAiB;gBACtB,YAAY;gBACZ,IAAI,CAAC,QAAQ;gBACb,WAAW;gBACX,IAAI,CAAC,OAAO;gBACZ,UAAU;gBACV,IAAI,CAAC,MAAM,IAGb,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,YAAY,GAAG,QAAQ,GAAG,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,IAClF,4DAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IACjD,4DAAK,KAAK,EAAE,YAAY,GAAG,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,IACnF,6EAAsB,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAyB,CACrF,EAEL,IAAI,CAAC,IAAI,IAAI,EAAE,GAAG,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,GAAG,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,IAAG,IAAI,CAAC,IAAI,CAAO,GAAG,IAAI,EAE9I,IAAI,CAAC,KAAK,IACT,WAAK,KAAK,EAAE,0BAA0B,GAAG,IAAI,CAAC,WAAW,IACvD,WAAK,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC1F,YAAM,CAAC,EAAC,kDAAkD,EAAC,MAAM,EAAC,OAAO,kBAAc,GAAG,GAAG,CACzF,CACF,IACJ,IAAI,CACJ,CACJ,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveIconButton"],"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 $brandColoursIncBrand6Turquoise {\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 $brandColoursIncBrand6Turquoise {\n &.arrow-colour-#{$key} .arrow-wrap svg path { stroke: $colour; }\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-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() iconGroup: 'beneficiary' \| 'misc' \| 'social' \| 'category';\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-generic-icon iconGroup={this.iconGroup} icon={this.icon}></biggive-generic-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":";;;AAAA,MAAM,oBAAoB,GAAG,6sTAA6sT,CAAC;AAC3uT,gCAAe,oBAAoB;;MCQtBA,mBAAiB;IAL9B;;;;;QAcU,eAAU,GAAkB,CAAC,CAAC;QAE9B,qBAAgB,GAAgB,OAAO,CAAC;QAExC,sBAAiB,GAAkB,CAAC,CAAC;QAIrC,eAAU,GAAgB,OAAO,CAAC;QAQlC,iBAAY,GAAY,KAAK,CAAC;QAE9B,SAAI,GAA0D,QAAQ,CAAC;QAEvE,UAAK,GAAY,KAAK,CAAC;QAEvB,gBAAW,GAAgB,OAAO,CAAC;QAEnC,WAAM,GAAY,KAAK,CAAC;QAExB,WAAM,GAAY,KAAK,CAAC;QAExB,aAAQ,GAAY,KAAK,CAAC;QAE1B,YAAO,GAAY,KAAK,CAAC;QAEzB,aAAQ,GAAuB,SAAS,CAAC;QAEzC,sBAAiB,GAAG,CAAC,KAAU;YACrC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC;SACjF,CAAC;KAwCH;IAtCC,MAAM;QACJ,QACE,4DACE,KAAK,EACH,wBAAwB;gBACxB,IAAI,CAAC,UAAU;gBACf,qBAAqB;gBACrB,IAAI,CAAC,gBAAgB;gBACrB,sBAAsB;gBACtB,IAAI,CAAC,iBAAiB;gBACtB,YAAY;gBACZ,IAAI,CAAC,QAAQ;gBACb,WAAW;gBACX,IAAI,CAAC,OAAO;gBACZ,UAAU;gBACV,IAAI,CAAC,MAAM,IAGb,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,YAAY,GAAG,QAAQ,GAAG,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,IAClF,4DAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IACjD,4DAAK,KAAK,EAAE,YAAY,GAAG,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,IACnF,6EAAsB,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAyB,CACrF,EAEL,IAAI,CAAC,IAAI,IAAI,EAAE,GAAG,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,GAAG,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,IAAG,IAAI,CAAC,IAAI,CAAO,GAAG,IAAI,EAE9I,IAAI,CAAC,KAAK,IACT,WAAK,KAAK,EAAE,0BAA0B,GAAG,IAAI,CAAC,WAAW,IACvD,WAAK,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC1F,YAAM,CAAC,EAAC,kDAAkD,EAAC,MAAM,EAAC,OAAO,kBAAc,GAAG,GAAG,CACzF,CACF,IACJ,IAAI,CACJ,CACJ,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveIconButton"],"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 $brandColoursIncBrand6Turquoise {\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 $brandColoursIncBrand6Turquoise {\n &.arrow-colour-#{$key} .arrow-wrap svg path { stroke: $colour; }\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-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() iconGroup: 'beneficiary' \| 'misc' \| 'social' \| 'category';\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-generic-icon iconGroup={this.iconGroup} icon={this.icon}></biggive-generic-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-icon-group.js CHANGED Viewed

@@ -8,8 +8,10 @@ const BiggiveIconGroup$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveIconGro
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
-        this.label = undefined;
     }
     render() {
         return (h("div", { key: 'ee83a9c74617db46a08413348e1b15ba7468788d', class: 'container space-below-' + this.spaceBelow }, this.label != null ? h("div", { class: "label" }, this.label) : null, h("div", { key: '8492137a5f62593cc93dce4865c29086c768bb2c', class: "sleeve" }, h("slot", { key: '52b9d83703ae72a8f2ed8cb17fe6131eb5fd77d7' }))));

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

	@@ -1 +1 @@
1	- {"file":"biggive-icon-group.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,8UAA8U,CAAC;AAC3W,+BAAe,mBAAmB;;MCMrBA,kBAAgB~~;;;;;0BAIE~~,CAAC~~;;;IAO9B~~,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,IACnD,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,WAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAO,GAAG,IAAI,EAClE,4DAAK,KAAK,EAAC,QAAQ,IACjB,8DAAa,CACT,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveIconGroup"],"sources":["src/components/biggive-icon-group/biggive-icon-group.scss?tag=biggive-icon-group&encapsulation=shadow","src/components/biggive-icon-group/biggive-icon-group.tsx"],"sourcesContent":[":host {\n display: contents;\n}\n\n.container {\n @include standard-font();\n .label {\n border-bottom: 1px solid $colour-grey-dark;\n padding-bottom: $spacer-1;\n margin-bottom: $spacer-2;\n }\n .sleeve {\n display: flex;\n }\n}\n\n\n::slotted() {\n margin-right: $spacer-3;\n}","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'biggive-icon-group',\n styleUrl: 'biggive-icon-group.scss',\n shadow: true,\n})\nexport class BiggiveIconGroup {\n /\n Space below component\n /\n @Prop() spaceBelow: number = 0;\n\n /\n Label\n */\n @Prop() label: string;\n\n render() {\n return (\n <div class={'container space-below-' + this.spaceBelow}>\n {this.label != null ? <div class=\"label\">{this.label}</div> : null}\n <div class=\"sleeve\">\n <slot></slot>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"biggive-icon-group.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,8UAA8U,CAAC;AAC3W,+BAAe,mBAAmB;;MCMrBA,kBAAgB;IAL7B;;;;;;;QASU,eAAU,GAAW,CAAC,CAAC;KAiBhC;IAVC,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,IACnD,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,WAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAO,GAAG,IAAI,EAClE,4DAAK,KAAK,EAAC,QAAQ,IACjB,8DAAa,CACT,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveIconGroup"],"sources":["src/components/biggive-icon-group/biggive-icon-group.scss?tag=biggive-icon-group&encapsulation=shadow","src/components/biggive-icon-group/biggive-icon-group.tsx"],"sourcesContent":[":host {\n display: contents;\n}\n\n.container {\n @include standard-font();\n .label {\n border-bottom: 1px solid $colour-grey-dark;\n padding-bottom: $spacer-1;\n margin-bottom: $spacer-2;\n }\n .sleeve {\n display: flex;\n }\n}\n\n\n::slotted() {\n margin-right: $spacer-3;\n}","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'biggive-icon-group',\n styleUrl: 'biggive-icon-group.scss',\n shadow: true,\n})\nexport class BiggiveIconGroup {\n /\n Space below component\n /\n @Prop() spaceBelow: number = 0;\n\n /\n Label\n */\n @Prop() label: string;\n\n render() {\n return (\n <div class={'container space-below-' + this.spaceBelow}>\n {this.label != null ? <div class=\"label\">{this.label}</div> : null}\n <div class=\"sleeve\">\n <slot></slot>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

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

@@ -9,17 +9,11 @@ const BiggiveImageButton$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveImage
         this.__registerHost();
         this.__attachShadow();
         this.doButtonClick = createEvent(this, "doButtonClick", 7);
-        this.handleButtonClick = (event) => {
-            this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });
-        };
         this.spaceBelow = 1;
         this.backgroundColour = 'white';
         this.backgroundPadding = 0;
-        this.text = undefined;
         this.textColour = 'black';
-        this.imageUrl = undefined;
         this.imageStyle = 'cover';
-        this.url = undefined;
         this.openInNewTab = false;
         this.size = 'medium';
         this.arrow = false;
@@ -29,6 +23,9 @@ const BiggiveImageButton$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveImage
         this.centered = false;
         this.rounded = false;
         this.buttonId = undefined;
+        this.handleButtonClick = (event) => {
+            this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });
+        };
     }
     render() {
         return (h("div", { key: 'ca8fa701b2ebc212f7b80005f41c43953e67b187', class: 'container space-below-' +

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

	@@ -1 +1 @@
1	- {"file":"biggive-image-button.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,0jQAA0jQ,CAAC;AACzlQ,iCAAe,qBAAqB;;MCQvBA,oBAAkB~~;;;;;;QA2CrB~~,~~sBAAiB~~,~~GAAG~~,CAAC,~~KAAU~~;~~YACrC~~,~~IAAI~~,~~CAAC~~,~~aAAa~~,CAAC,~~IAAI~~,CAAC,~~EAAE~~,~~KAAK~~,~~EAAE~~,~~KAAK~~,~~EAAE~~,~~GAAG~~,~~EAAE~~,~~KAAK~~,CAAC,~~MAAM~~,~~CAAC~~,~~aAAa~~,CAAC,~~IAAI~~,~~EAAE~~,~~CAAC~~,CAAC;~~SACjF~~,~~CAAC;0BApCkC~~,CAAC;~~gCAEG~~,OAAO;~~iCAEJ~~,CAAC~~;;0BAIV~~,~~OAAO;;0BAIZ~~,~~OAAO;;4BAIJ~~,KAAK;~~oBAEiC~~,~~QAAQ~~;~~qBAErD~~,KAAK;~~2BAEK~~,~~OAAO~~;~~sBAEhB~~,~~KAAK~~;~~sBAEL~~,KAAK~~;wBAEH~~,KAAK~~;uBAEN~~,KAAK;~~wBAEO~~,~~SAAS;;IAMhD~~,MAAM;QACJ,QACE,4DACE,KAAK,EACH,wBAAwB;gBACxB,IAAI,CAAC,UAAU;gBACf,qBAAqB;gBACrB,IAAI,CAAC,gBAAgB;gBACrB,sBAAsB;gBACtB,IAAI,CAAC,iBAAiB;gBACtB,YAAY;gBACZ,IAAI,CAAC,QAAQ;gBACb,WAAW;gBACX,IAAI,CAAC,OAAO;gBACZ,UAAU;gBACV,IAAI,CAAC,MAAM,IAGb,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,YAAY,GAAG,QAAQ,GAAG,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,IAClF,4DAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IACjD,4DACE,KAAK,EAAE,aAAa,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,EACrH,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC,QAAQ,GAAG,GAAG,EAAE,GACnD,EAEN,IAAI,CAAC,IAAI,IAAI,EAAE,GAAG,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,GAAG,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,IAAG,IAAI,CAAC,IAAI,CAAO,GAAG,IAAI,EAE9I,IAAI,CAAC,KAAK,IACT,WAAK,KAAK,EAAE,0BAA0B,GAAG,IAAI,CAAC,WAAW,IACvD,WAAK,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC1F,YAAM,CAAC,EAAC,kDAAkD,EAAC,MAAM,EAAC,OAAO,kBAAc,GAAG,GAAG,CACzF,CACF,IACJ,IAAI,CACJ,CACJ,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveImageButton"],"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 $brandColoursIncBrand6Turquoise {\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":";;AAAA,MAAM,qBAAqB,GAAG,0jQAA0jQ,CAAC;AACzlQ,iCAAe,qBAAqB;;MCQvBA,oBAAkB;IAL/B;;;;;QAcU,eAAU,GAAkB,CAAC,CAAC;QAE9B,qBAAgB,GAAgB,OAAO,CAAC;QAExC,sBAAiB,GAAkB,CAAC,CAAC;QAIrC,eAAU,GAAgB,OAAO,CAAC;QAIlC,eAAU,GAAW,OAAO,CAAC;QAI7B,iBAAY,GAAY,KAAK,CAAC;QAE9B,SAAI,GAA0D,QAAQ,CAAC;QAEvE,UAAK,GAAY,KAAK,CAAC;QAEvB,gBAAW,GAAgB,OAAO,CAAC;QAEnC,WAAM,GAAY,KAAK,CAAC;QAExB,WAAM,GAAY,KAAK,CAAC;QAExB,aAAQ,GAAY,KAAK,CAAC;QAE1B,YAAO,GAAY,KAAK,CAAC;QAEzB,aAAQ,GAAuB,SAAS,CAAC;QAEzC,sBAAiB,GAAG,CAAC,KAAU;YACrC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC;SACjF,CAAC;KAyCH;IAvCC,MAAM;QACJ,QACE,4DACE,KAAK,EACH,wBAAwB;gBACxB,IAAI,CAAC,UAAU;gBACf,qBAAqB;gBACrB,IAAI,CAAC,gBAAgB;gBACrB,sBAAsB;gBACtB,IAAI,CAAC,iBAAiB;gBACtB,YAAY;gBACZ,IAAI,CAAC,QAAQ;gBACb,WAAW;gBACX,IAAI,CAAC,OAAO;gBACZ,UAAU;gBACV,IAAI,CAAC,MAAM,IAGb,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,YAAY,GAAG,QAAQ,GAAG,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,IAClF,4DAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IACjD,4DACE,KAAK,EAAE,aAAa,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,EACrH,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC,QAAQ,GAAG,GAAG,EAAE,GACnD,EAEN,IAAI,CAAC,IAAI,IAAI,EAAE,GAAG,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,GAAG,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,IAAG,IAAI,CAAC,IAAI,CAAO,GAAG,IAAI,EAE9I,IAAI,CAAC,KAAK,IACT,WAAK,KAAK,EAAE,0BAA0B,GAAG,IAAI,CAAC,WAAW,IACvD,WAAK,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC1F,YAAM,CAAC,EAAC,kDAAkD,EAAC,MAAM,EAAC,OAAO,kBAAc,GAAG,GAAG,CACzF,CACF,IACJ,IAAI,CACJ,CACJ,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveImageButton"],"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 $brandColoursIncBrand6Turquoise {\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

@@ -11,15 +11,10 @@ const BiggiveImageCard$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveImageCa
         this.__attachShadow();
         this.spaceBelow = 0;
         this.backgroundColour = 'primary';
-        this.mainImageUrl = undefined;
-        this.mainImageAltText = undefined;
         this.textAlign = 'center';
-        this.teaser = undefined;
         this.teaserColour = 'black';
         this.buttonAlign = 'center';
         this.buttonStyle = 'standard';
-        this.buttonLabel = undefined;
-        this.buttonUrl = undefined;
         this.buttonColourScheme = 'clear-primary';
         this.clipBottomLeftCorner = true;
         this.clipTopRightCorner = true;

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

	@@ -1 +1 @@
1	- {"file":"biggive-image-card.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,0qNAA0qN,CAAC;AACvsN,+BAAe,mBAAmB;;MCQrBA,kBAAgB~~;;;;;0BACS~~,CAAC;~~gCAEG~~,SAAS~~;;;yBAMA~~,QAAQ~~;;4BAIrB~~,OAAO;~~2BAEb~~,QAAQ;~~2BAER~~,UAAU~~;;;kCAMH~~,eAAe;~~oCAEZ~~,IAAI;~~kCAEN~~,IAAI;~~4BAEV~~,KAAK~~;;IAErC~~,MAAM;QACJ,QACE,4DACE,KAAK,EACH,wBAAwB;gBACxB,IAAI,CAAC,UAAU;gBACf,qBAAqB;gBACrB,IAAI,CAAC,gBAAgB;gBACrB,2BAA2B;gBAC3B,IAAI,CAAC,oBAAoB;gBACzB,yBAAyB;gBACzB,IAAI,CAAC,kBAAkB;gBACvB,iBAAiB;gBACjB,IAAI,CAAC,YAAY,IAGnB,0DAAG,IAAI,EAAE,IAAI,CAAC,SAAS,IACrB,4DAAK,KAAK,EAAE,qBAAqB,GAAG,IAAI,CAAC,YAAY,GAAG,cAAc,GAAG,IAAI,CAAC,SAAS,IACrF,4DAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,YAAY,IAAI,EAAE,IACtB,WAAK,KAAK,EAAC,sBAAsB,IAC/B,WAAK,KAAK,EAAC,YAAY,IACrB,WAAK,GAAG,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,IAAI,CAAC,gBAAgB,GAAI,CACrF,CACF,IACJ,IAAI,EACR,4DAAK,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,WAAK,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC,WAAW,IACjD,uCAA+B,IAAI,CAAC,kBAAkB,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,GAAmB,CAC9F,IACJ,IAAI,CACJ,CACF,CACJ,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveImageCard"],"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,0qNAA0qN,CAAC;AACvsN,+BAAe,mBAAmB;;MCQrBA,kBAAgB;IAL7B;;;;QAMU,eAAU,GAAkB,CAAC,CAAC;QAE9B,qBAAgB,GAAgB,SAAS,CAAC;QAM1C,cAAS,GAAgC,QAAQ,CAAC;QAIlD,iBAAY,GAAgB,OAAO,CAAC;QAEpC,gBAAW,GAAW,QAAQ,CAAC;QAE/B,gBAAW,GAAW,UAAU,CAAC;QAMjC,uBAAkB,GAAW,eAAe,CAAC;QAE7C,yBAAoB,GAAY,IAAI,CAAC;QAErC,uBAAkB,GAAY,IAAI,CAAC;QAEnC,iBAAY,GAAY,KAAK,CAAC;KAwCvC;IAtCC,MAAM;QACJ,QACE,4DACE,KAAK,EACH,wBAAwB;gBACxB,IAAI,CAAC,UAAU;gBACf,qBAAqB;gBACrB,IAAI,CAAC,gBAAgB;gBACrB,2BAA2B;gBAC3B,IAAI,CAAC,oBAAoB;gBACzB,yBAAyB;gBACzB,IAAI,CAAC,kBAAkB;gBACvB,iBAAiB;gBACjB,IAAI,CAAC,YAAY,IAGnB,0DAAG,IAAI,EAAE,IAAI,CAAC,SAAS,IACrB,4DAAK,KAAK,EAAE,qBAAqB,GAAG,IAAI,CAAC,YAAY,GAAG,cAAc,GAAG,IAAI,CAAC,SAAS,IACrF,4DAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,YAAY,IAAI,EAAE,IACtB,WAAK,KAAK,EAAC,sBAAsB,IAC/B,WAAK,KAAK,EAAC,YAAY,IACrB,WAAK,GAAG,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,IAAI,CAAC,gBAAgB,GAAI,CACrF,CACF,IACJ,IAAI,EACR,4DAAK,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,WAAK,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC,WAAW,IACjD,uCAA+B,IAAI,CAAC,kBAAkB,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,GAAmB,CAC9F,IACJ,IAAI,CACJ,CACF,CACJ,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveImageCard"],"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

@@ -9,18 +9,37 @@ const BiggiveImageFeature$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveImag
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Default text colour
+         */
         this.defaultTextColour = 'primary';
+        /**
+         * Full URL of a image.
+         */
         this.imageUrl = '';
+        /**
+         * Image alt text tag.
+         */
         this.imageAltText = '';
-        this.slug = undefined;
+        /**
+         * Slug colour
+         */
         this.slugColour = '';
-        this.mainTitle = undefined;
+        /**
+         * Slug colour
+         */
         this.mainTitleColour = '';
-        this.teaser = undefined;
+        /**
+         * Teaser colour
+         */
         this.teaserColour = '';
-        this.buttonUrl = undefined;
-        this.buttonLabel = undefined;
+        /**
+         * Button Colour Scheme
+         */
         this.buttonColourScheme = 'primary';
     }
     render() {

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

	@@ -1 +1 @@
1	- {"file":"biggive-image-feature.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,mlFAAmlF,CAAC;AACnnF,kCAAe,sBAAsB;;MCMxBA,qBAAmB~~;;;;;0BAID~~,CAAC~~;iCAIM~~,SAAS~~;wBAKlB~~,EAAE~~;4BAKE~~,EAAE~~;;0BAUJ~~,EAAE~~;;+BAUG~~,EAAE~~;;4BAUL~~,EAAE~~;;;kCAeI~~,SAAS~~;;IAE9C~~,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,iBAAiB,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAC/F,4DAAK,KAAK,EAAC,QAAQ,IACjB,4DAAK,KAAK,EAAC,cAAc,IACvB,4DAAK,KAAK,EAAE,mBAAmB,GAAG,IAAI,CAAC,UAAU,IAAG,IAAI,CAAC,IAAI,CAAO,EACpE,2DAAI,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC,eAAe,IAAG,IAAI,CAAC,SAAS,CAAM,EAC7E,4DAAK,KAAK,EAAE,qBAAqB,GAAG,IAAI,CAAC,YAAY,IAAG,IAAI,CAAC,MAAM,CAAO,EACzE,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,IACjD,uCAA+B,IAAI,CAAC,kBAAkB,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,GAAmB,IACrH,IAAI,CACJ,EACN,4DAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,QAAQ,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,IACpD,WAAK,KAAK,EAAC,YAAY,IACrB,WAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,YAAY,GAAI,CAC/C,IACJ,IAAI,CACJ,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveImageFeature"],"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,mlFAAmlF,CAAC;AACnnF,kCAAe,sBAAsB;;MCMxBA,qBAAmB;IALhC;;;;;;;QASU,eAAU,GAAW,CAAC,CAAC;;;;QAIvB,sBAAiB,GAAW,SAAS,CAAC;;;;QAKtC,aAAQ,GAAW,EAAE,CAAC;;;;QAKtB,iBAAY,GAAW,EAAE,CAAC;;;;QAU1B,eAAU,GAAW,EAAE,CAAC;;;;QAUxB,oBAAe,GAAW,EAAE,CAAC;;;;QAU7B,iBAAY,GAAW,EAAE,CAAC;;;;QAe1B,uBAAkB,GAAW,SAAS,CAAC;KAyBhD;IAvBC,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,iBAAiB,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAC/F,4DAAK,KAAK,EAAC,QAAQ,IACjB,4DAAK,KAAK,EAAC,cAAc,IACvB,4DAAK,KAAK,EAAE,mBAAmB,GAAG,IAAI,CAAC,UAAU,IAAG,IAAI,CAAC,IAAI,CAAO,EACpE,2DAAI,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC,eAAe,IAAG,IAAI,CAAC,SAAS,CAAM,EAC7E,4DAAK,KAAK,EAAE,qBAAqB,GAAG,IAAI,CAAC,YAAY,IAAG,IAAI,CAAC,MAAM,CAAO,EACzE,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,IACjD,uCAA+B,IAAI,CAAC,kBAAkB,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,GAAmB,IACrH,IAAI,CACJ,EACN,4DAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,QAAQ,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,IACpD,WAAK,KAAK,EAAC,YAAY,IACrB,WAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,YAAY,GAAI,CAC/C,IACJ,IAAI,CACJ,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveImageFeature"],"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

@@ -8,12 +8,33 @@ const BiggiveImage$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveImage exten
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * Space above component
+         */
         this.spaceAbove = 0;
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Full URL of a image.
+         */
         this.imageUrl = '';
+        /**
+         * Image alt text tag.
+         */
         this.imageAltText = '';
+        /**
+         * Image width
+         */
         this.width = 0;
+        /**
+         * Image width
+         */
         this.height = 0;
+        /**
+         * Size unit
+         */
         this.sizeUnit = 'px';
     }
     getWidth() {

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

	@@ -1 +1 @@
1	- {"file":"biggive-image.js","mappings":";;AAAA,MAAM,eAAe,GAAG,6pBAA6pB,CAAC;AACtrB,2BAAe,eAAe;;MCMjBA,cAAY~~;;;;;0BAIM~~,CAAC~~;0BAKD~~,CAAC~~;wBAKH~~,EAAE~~;4BAKE~~,EAAE~~;qBAKT~~,CAAC~~;sBAKA~~,CAAC~~;wBAKC~~,IAAI~~;;IAEvB~~,QAAQ;QACd,IAAI,KAAK,GAAG,MAAM,CAAC;QACnB,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE;YAClB,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC;SACpC;QACD,OAAO,KAAK,CAAC;KACd;IAEO,SAAS;QACf,IAAI,MAAM,GAAG,MAAM,CAAC;QACpB,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;YACnB,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC;SACtC;QACD,OAAO,MAAM,CAAC;KACf;IAED,MAAM;QACJ,QACE,4DAAK,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,IACrJ,4DAAK,KAAK,EAAC,YAAY,IACrB,4DAAK,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,GAAI,CAC5G,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveImage"],"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,CAAC;AACtrB,2BAAe,eAAe;;MCMjBA,cAAY;IALzB;;;;;;;QASU,eAAU,GAAW,CAAC,CAAC;;;;QAKvB,eAAU,GAAW,CAAC,CAAC;;;;QAKvB,aAAQ,GAAW,EAAE,CAAC;;;;QAKtB,iBAAY,GAAW,EAAE,CAAC;;;;QAK1B,UAAK,GAAW,CAAC,CAAC;;;;QAKlB,WAAM,GAAW,CAAC,CAAC;;;;QAKnB,aAAQ,GAAW,IAAI,CAAC;KA2BjC;IAzBS,QAAQ;QACd,IAAI,KAAK,GAAG,MAAM,CAAC;QACnB,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE;YAClB,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC;SACpC;QACD,OAAO,KAAK,CAAC;KACd;IAEO,SAAS;QACf,IAAI,MAAM,GAAG,MAAM,CAAC;QACpB,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;YACnB,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC;SACtC;QACD,OAAO,MAAM,CAAC;KACf;IAED,MAAM;QACJ,QACE,4DAAK,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,IACrJ,4DAAK,KAAK,EAAC,YAAY,IACrB,4DAAK,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,GAAI,CAC5G,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveImage"],"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

@@ -13,6 +13,19 @@ const BiggiveMainMenu$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveMainMenu
         this.__attachShadow();
         this.logoutClicked = createEvent(this, "logoutClicked", 7);
         this.lastScrollHeight = 0;
+        // URL prefixes vary by environment, and components library is not best placed to know what they are, so we
+        // take them as props. But somehow on first render the prop passed in doesn't seem to be used, so the defaults
+        // below are the values currently used in our prod site. They should be replaced by other values in other
+        // environments.
+        this.blogUrlPrefix = 'https://biggive.org';
+        this.donateUrlPrefix = 'https://donate.biggive.org';
+        this.experienceUrlPrefix = 'https://community.biggive.org';
+        this.myAccountFlagEnabled = false;
+        /**
+         * Whether the current user is logged in (i.e. is assumed to have a valid JWT). They get links to some
+         * extra content if they are.
+         */
+        this.isLoggedIn = false;
         this.openMobileMenu = () => {
             const mobileMenu = this.host.shadowRoot.querySelector('.nav-links');
             mobileMenu.style.left = '0';
@@ -24,11 +37,6 @@ const BiggiveMainMenu$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveMainMenu
             const mobileMenu = this.host.shadowRoot.querySelector('.nav-links');
             mobileMenu.style.left = '-100%';
         };
-        this.blogUrlPrefix = 'https://biggive.org';
-        this.donateUrlPrefix = 'https://donate.biggive.org';
-        this.experienceUrlPrefix = 'https://community.biggive.org';
-        this.myAccountFlagEnabled = false;
-        this.isLoggedIn = false;
     }
     async closeMobileMenuFromOutside() {
         const mobileMenu = this.host.shadowRoot.querySelector('.nav-links');