@biggive/components 1.0.144 → 1.0.146

package/hydrate/index.js

@@ -5949,12 +5949,13 @@ class BiggiveArticleCard {
     this.date = null;
     this.mainTitle = null;
     this.imageUrl = null;
+    this.imageAltText = null;
     this.imageLabel = null;
     this.buttonLabel = null;
     this.buttonUrl = null;
   }
   render() {
-    return (hAsync("div", { class: 'container space-below-' + this.spaceBelow }, hAsync("div", { class: 'sleeve background-colour-' + this.backgroundColour + ' background-colour-hover-' + this.backgroundColourHover + ' text-colour-' + this.textColour }, hAsync("div", { class: "content-wrap" }, this.slug != '' ? hAsync("div", { class: "slug text-colour-primary" }, this.slug) : null, this.date != '' ? hAsync("div", { class: "date" }, this.date) : null, hAsync("h3", { class: "title" }, hAsync("a", { href: this.buttonUrl }, this.mainTitle)), this.imageUrl != '' ? (hAsync("div", { class: "image-group" }, hAsync("div", { class: "image-wrap", style: { 'background-image': "url('" + this.imageUrl + "')" } }, hAsync("img", { src: this.imageUrl })), hAsync("div", { class: "image-label" }, this.imageLabel))) : null, this.buttonLabel != null && this.buttonUrl != null ? (hAsync("div", { class: "button-wrap align-right" }, hAsync("biggive-button", { "colour-scheme": 'clear-primary', url: this.buttonUrl, label: this.buttonLabel }))) : null))));
+    return (hAsync("div", { class: 'container space-below-' + this.spaceBelow }, hAsync("div", { class: 'sleeve background-colour-' + this.backgroundColour + ' background-colour-hover-' + this.backgroundColourHover + ' text-colour-' + this.textColour }, hAsync("div", { class: "content-wrap" }, this.slug != '' ? hAsync("div", { class: "slug text-colour-primary" }, this.slug) : null, this.date != '' ? hAsync("div", { class: "date" }, this.date) : null, hAsync("h3", { class: "title" }, hAsync("a", { href: this.buttonUrl }, this.mainTitle)), this.imageUrl != '' ? (hAsync("div", { class: "image-group" }, hAsync("div", { class: "image-wrap", style: { 'background-image': "url('" + this.imageUrl + "')" } }, hAsync("img", { src: this.imageUrl, alt: this.imageAltText, title: this.imageAltText })), hAsync("div", { class: "image-label" }, this.imageLabel))) : null, this.buttonLabel != null && this.buttonUrl != null ? (hAsync("div", { class: "button-wrap align-right" }, hAsync("biggive-button", { "colour-scheme": 'clear-primary', url: this.buttonUrl, label: this.buttonLabel }))) : null))));
   }
   static get style() { return biggiveArticleCardCss; }
   static get cmpMeta() { return {
@@ -5969,6 +5970,7 @@ class BiggiveArticleCard {
       "date": [1],
       "mainTitle": [1, "main-title"],
       "imageUrl": [1, "image-url"],
+      "imageAltText": [1, "image-alt-text"],
       "imageLabel": [1, "image-label"],
       "buttonLabel": [1, "button-label"],
       "buttonUrl": [1, "button-url"]
@@ -6382,6 +6384,10 @@ const biggiveButtonCss = "/*!@body*/body.sc-biggive-button{background-color:#D7D
 class BiggiveButton {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.doButtonClick = createEvent(this, "doButtonClick", 7);
+    this.handleButtonClick = (event) => {
+      this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });
+    };
     this.spaceBelow = 1;
     this.colourScheme = 'primary';
     this.label = 'Click me';
@@ -6391,7 +6397,7 @@ class BiggiveButton {
     this.rounded = false;
   }
   render() {
-    return (hAsync("div", { class: 'container space-below-' + this.spaceBelow }, hAsync("a", { href: this.url, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, this.label)));
+    return (hAsync("div", { class: 'container space-below-' + this.spaceBelow }, hAsync("a", { href: this.url, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, hAsync("span", { onClick: this.handleButtonClick }, this.label))));
   }
   static get style() { return biggiveButtonCss; }
   static get cmpMeta() { return {
@@ -6496,7 +6502,7 @@ class BiggiveCampaignCard {
     this.moreInfoButtonColourScheme = 'clear-primary';
   }
   render() {
-    return (hAsync("div", { class: 'container space-below-' + this.spaceBelow.toString() }, hAsync("div", { class: "sleeve" }, this.campaignType !== null ? (hAsync("div", { class: "campaign-type" }, hAsync("span", null, this.campaignType))) : null, this.banner !== null ? hAsync("div", { class: "image-wrap banner", style: { 'background-image': 'url(' + this.banner + ')' } }) : hAsync("div", { class: "image-wrap banner" }), hAsync("div", { class: "title-wrap" }, hAsync("h3", null, this.campaignTitle), hAsync("div", { class: "organisation-name" }, "By ", this.organisationName)), hAsync("div", { class: "meta-wrap" }, hAsync("div", { class: "meta-item" }, hAsync("span", { class: "label" }, this.primaryFigureLabel), hAsync("span", { class: "text" }, this.primaryFigureAmount)), hAsync("div", { class: "meta-item" }, hAsync("span", { class: "label" }, this.secondaryFigureLabel), hAsync("span", { class: "text" }, this.secondaryFigureAmount))), hAsync("div", { class: "progress-bar-wrap" }, hAsync("biggive-progress-bar", { counter: this.progressBarCounter, "colour-scheme": "primary" })), hAsync("div", { class: "button-wrap" }, hAsync("biggive-button", { "full-width": "true", "colour-scheme": this.donateButtonColourScheme, url: this.donateButtonUrl, label: this.donateButtonLabel }), hAsync("biggive-button", { "full-width": "true", "colour-scheme": this.moreInfoButtonColourScheme, url: this.moreInfoButtonUrl, label: this.moreInfoButtonLabel })))));
+    return (hAsync("div", { class: 'container space-below-' + this.spaceBelow.toString() }, hAsync("div", { class: "sleeve" }, this.campaignType !== null ? (hAsync("div", { class: "campaign-type" }, hAsync("span", null, this.campaignType))) : null, this.banner !== null ? (hAsync("div", { class: "image-wrap banner", role: "presentation", style: { 'background-image': 'url(' + this.banner + ')' } })) : (hAsync("div", { class: "image-wrap banner" })), hAsync("div", { class: "title-wrap" }, hAsync("h3", null, this.campaignTitle), hAsync("div", { class: "organisation-name" }, "By ", this.organisationName)), hAsync("div", { class: "meta-wrap" }, hAsync("div", { class: "meta-item" }, hAsync("span", { class: "label" }, this.primaryFigureLabel), hAsync("span", { class: "text" }, this.primaryFigureAmount)), hAsync("div", { class: "meta-item" }, hAsync("span", { class: "label" }, this.secondaryFigureLabel), hAsync("span", { class: "text" }, this.secondaryFigureAmount))), hAsync("div", { class: "progress-bar-wrap" }, hAsync("biggive-progress-bar", { counter: this.progressBarCounter, "colour-scheme": "primary" })), hAsync("div", { class: "button-wrap" }, hAsync("biggive-button", { "full-width": "true", "colour-scheme": this.donateButtonColourScheme, url: this.donateButtonUrl, label: this.donateButtonLabel }), hAsync("biggive-button", { "full-width": "true", "colour-scheme": this.moreInfoButtonColourScheme, url: this.moreInfoButtonUrl, label: this.moreInfoButtonLabel })))));
   }
   static get style() { return biggiveCampaignCardCss; }
   static get cmpMeta() { return {
@@ -7018,6 +7024,7 @@ class BiggiveHeroImage {
     this.slug = null;
     this.slugColour = null;
     this.logo = '';
+    this.logoAltText = '';
     this.mainImage = null;
     this.mainImageAlignHorizontal = 'center';
     this.mainImageAlignVertical = 'center';
@@ -7030,9 +7037,9 @@ class BiggiveHeroImage {
     this.buttonColourScheme = 'primary';
   }
   render() {
-    return (hAsync("div", { class: 'container colour-scheme-' + this.colourScheme + ' space-below-' + this.spaceBelow }, hAsync("div", { class: "sleeve" }, hAsync("div", { class: "content-wrap" }, this.logo.length > 0 ? (hAsync("div", { class: "logo image-wrap", style: { 'background-image': 'url(' + this.logo + ')' } }, hAsync("img", { src: this.logo }))) : hAsync("div", { class: "logo-space" }), hAsync("div", { class: 'slug text-colour-' + this.slugColour }, this.slug), hAsync("h1", { class: 'main-title text-colour-' + this.mainTitleColour }, this.mainTitle), hAsync("div", { class: 'teaser text-colour-' + this.teaserColour }, this.teaser), this.buttonLabel != null && this.buttonUrl != null
+    return (hAsync("div", { class: 'container colour-scheme-' + this.colourScheme + ' space-below-' + this.spaceBelow }, hAsync("div", { class: "sleeve" }, hAsync("div", { class: "content-wrap" }, this.logo.length > 0 ? (hAsync("div", { class: "logo image-wrap", style: { 'background-image': 'url(' + this.logo + ')' } }, hAsync("img", { src: this.logo, alt: this.logoAltText, title: this.logoAltText }))) : hAsync("div", { class: "logo-space" }), hAsync("div", { class: 'slug text-colour-' + this.slugColour }, this.slug), hAsync("h1", { class: 'main-title text-colour-' + this.mainTitleColour }, this.mainTitle), hAsync("div", { class: 'teaser text-colour-' + this.teaserColour }, this.teaser), this.buttonLabel != null && this.buttonUrl != null
       ? hAsync("biggive-button", { "colour-scheme": this.buttonColourScheme, url: this.buttonUrl, label: this.buttonLabel })
-      : null), hAsync("div", { class: "graphic-wrap" }, this.mainImage !== null ? (hAsync("div", { class: "image-wrap", style: { 'background-image': 'url(' + this.mainImage + ')', 'background-position': this.mainImageAlignHorizontal + ' ' + this.mainImageAlignVertical } })) : null))));
+      : null), hAsync("div", { class: "graphic-wrap" }, this.mainImage !== null ? (hAsync("div", { class: "image-wrap", role: "presentation", style: { 'background-image': 'url(' + this.mainImage + ')', 'background-position': this.mainImageAlignHorizontal + ' ' + this.mainImageAlignVertical } })) : null))));
   }
   static get style() { return biggiveHeroImageCss; }
   static get cmpMeta() { return {
@@ -7044,6 +7051,7 @@ class BiggiveHeroImage {
       "slug": [1],
       "slugColour": [1, "slug-colour"],
       "logo": [1],
+      "logoAltText": [1, "logo-alt-text"],
       "mainImage": [1, "main-image"],
       "mainImageAlignHorizontal": [1, "main-image-align-horizontal"],
       "mainImageAlignVertical": [1, "main-image-align-vertical"],
@@ -7094,6 +7102,7 @@ class BiggiveImage {
     this.spaceAbove = 0;
     this.spaceBelow = 0;
     this.imageUrl = '';
+    this.imageAltText = '';
     this.width = 0;
     this.height = 0;
     this.sizeUnit = 'px';
@@ -7113,7 +7122,7 @@ class BiggiveImage {
     return height;
   }
   render() {
-    return (hAsync("div", { class: 'container space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow, style: { width: this.getWidth(), height: this.getHeight() } }, hAsync("div", { class: "image-wrap" }, hAsync("img", { src: this.imageUrl, style: { width: this.getWidth(), height: this.getHeight() } }))));
+    return (hAsync("div", { class: 'container space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow, style: { width: this.getWidth(), height: this.getHeight() } }, hAsync("div", { class: "image-wrap" }, hAsync("img", { src: this.imageUrl, style: { width: this.getWidth(), height: this.getHeight() }, alt: this.imageAltText }))));
   }
   static get style() { return biggiveImageCss; }
   static get cmpMeta() { return {
@@ -7123,6 +7132,7 @@ class BiggiveImage {
       "spaceAbove": [2, "space-above"],
       "spaceBelow": [2, "space-below"],
       "imageUrl": [1, "image-url"],
+      "imageAltText": [1, "image-alt-text"],
       "width": [2],
       "height": [2],
       "sizeUnit": [1, "size-unit"]
@@ -7141,6 +7151,7 @@ class BiggiveImageFeature {
     this.spaceBelow = 0;
     this.defaultTextColour = 'primary';
     this.imageUrl = '';
+    this.imageAltText = '';
     this.slug = null;
     this.slugColour = '';
     this.mainTitle = null;
@@ -7152,7 +7163,7 @@ class BiggiveImageFeature {
     this.buttonColourScheme = 'primary';
   }
   render() {
-    return (hAsync("div", { class: 'container text-colour-' + this.defaultTextColour + ' space-below-' + this.spaceBelow }, hAsync("div", { class: "sleeve" }, hAsync("div", { class: "content-wrap" }, hAsync("div", { class: 'slug text-colour-' + this.slugColour }, this.slug), hAsync("h2", { class: 'title text-colour-' + this.mainTitleColour }, this.mainTitle), hAsync("div", { class: 'teaser text-colour-' + this.teaserColour }, this.teaser), this.buttonLabel != null && this.buttonUrl != null ? (hAsync("biggive-button", { "colour-scheme": this.buttonColourScheme, url: this.buttonUrl, label: this.buttonLabel })) : null), hAsync("div", { class: "graphic-wrap" }, this.imageUrl.length > 0 ? (hAsync("div", { class: "image-wrap" }, hAsync("img", { src: this.imageUrl }))) : null))));
+    return (hAsync("div", { class: 'container text-colour-' + this.defaultTextColour + ' space-below-' + this.spaceBelow }, hAsync("div", { class: "sleeve" }, hAsync("div", { class: "content-wrap" }, hAsync("div", { class: 'slug text-colour-' + this.slugColour }, this.slug), hAsync("h2", { class: 'title text-colour-' + this.mainTitleColour }, this.mainTitle), hAsync("div", { class: 'teaser text-colour-' + this.teaserColour }, this.teaser), this.buttonLabel != null && this.buttonUrl != null ? (hAsync("biggive-button", { "colour-scheme": this.buttonColourScheme, url: this.buttonUrl, label: this.buttonLabel })) : null), hAsync("div", { class: "graphic-wrap" }, this.imageUrl.length > 0 ? (hAsync("div", { class: "image-wrap" }, hAsync("img", { src: this.imageUrl, alt: this.imageAltText }))) : null))));
   }
   static get style() { return biggiveImageFeatureCss; }
   static get cmpMeta() { return {
@@ -7162,6 +7173,7 @@ class BiggiveImageFeature {
       "spaceBelow": [2, "space-below"],
       "defaultTextColour": [1, "default-text-colour"],
       "imageUrl": [1, "image-url"],
+      "imageAltText": [1, "image-alt-text"],
       "slug": [1],
       "slugColour": [1, "slug-colour"],
       "mainTitle": [1, "main-title"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@biggive/components",
-  "version": "1.0.144",
+  "version": "1.0.146",
   "description": "Big Give Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",