@biggive/components 1.0.136 → 1.0.137

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.
@@ -42,6 +42,7 @@ const biggiveButtonCss = "body{background-color:#D7D7D7}h1,h3,h4,h5,h6{margin-bo
42
42
  const BiggiveButton = class {
43
43
  constructor(hostRef) {
44
44
  index.registerInstance(this, hostRef);
45
+ this.doButtonClick = index.createEvent(this, "doButtonClick", 7);
45
46
  this.spaceBelow = 1;
46
47
  this.colourScheme = 'primary';
47
48
  this.label = 'Click me';
@@ -50,8 +51,11 @@ const BiggiveButton = class {
50
51
  this.size = 'medium';
51
52
  this.rounded = false;
52
53
  }
54
+ handleButtonClick() {
55
+ this.doButtonClick.emit(this.url);
56
+ }
53
57
  render() {
54
- return (index.h("div", { class: 'container space-below-' + this.spaceBelow }, index.h("a", { href: this.url, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, this.label)));
58
+ return (index.h("div", { class: 'container space-below-' + this.spaceBelow }, index.h("a", { href: this.url, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, index.h("span", { onClick: this.handleButtonClick }, this.label))));
55
59
  }
56
60
  };
57
61
  BiggiveButton.style = biggiveButtonCss;
@@ -255,16 +259,25 @@ const BiggiveFormFieldSelect = class {
255
259
  this.selectedValue = event.detail.value;
256
260
  this.selectedLabel = event.detail.label;
257
261
  this.doSelectChange.emit({ value: this.selectedValue, label: this.selectedLabel });
258
- const dropdown = this.el.shadowRoot.querySelector('.dropdown');
259
- dropdown.classList.remove('active');
262
+ console.log({ value: this.selectedValue, label: this.selectedLabel });
263
+ if (this.el.shadowRoot !== null && this.el.shadowRoot !== undefined) {
264
+ const dropdown = this.el.shadowRoot.querySelector('.dropdown');
265
+ if (dropdown !== null && dropdown !== undefined) {
266
+ dropdown.classList.remove('active');
267
+ }
268
+ }
260
269
  }
261
270
  toggleFocus(event) {
262
- const dropdown = event.target.parentElement.parentElement;
263
- if (dropdown.classList.contains('active')) {
264
- dropdown.classList.remove('active');
265
- }
266
- else {
267
- dropdown.classList.add('active');
271
+ if (event.target) {
272
+ const dropdown = event.target.parentElement.parentElement;
273
+ if (dropdown !== null && dropdown !== undefined) {
274
+ if (dropdown.classList.contains('active')) {
275
+ dropdown.classList.remove('active');
276
+ }
277
+ else {
278
+ dropdown.classList.add('active');
279
+ }
280
+ }
268
281
  }
269
282
  }
270
283
  render() {
@@ -9,8 +9,11 @@ export class BiggiveButton {
9
9
  this.size = 'medium';
10
10
  this.rounded = false;
11
11
  }
12
+ handleButtonClick() {
13
+ this.doButtonClick.emit(this.url);
14
+ }
12
15
  render() {
13
- return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("a", { href: this.url, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, this.label)));
16
+ return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("a", { href: this.url, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, h("span", { onClick: this.handleButtonClick }, this.label))));
14
17
  }
15
18
  static get is() { return "biggive-button"; }
16
19
  static get encapsulation() { return "shadow"; }
@@ -154,4 +157,22 @@ export class BiggiveButton {
154
157
  }
155
158
  };
156
159
  }
160
+ static get events() {
161
+ return [{
162
+ "method": "doButtonClick",
163
+ "name": "doButtonClick",
164
+ "bubbles": true,
165
+ "cancelable": true,
166
+ "composed": true,
167
+ "docs": {
168
+ "tags": [],
169
+ "text": ""
170
+ },
171
+ "complexType": {
172
+ "original": "string",
173
+ "resolved": "string",
174
+ "references": {}
175
+ }
176
+ }];
177
+ }
157
178
  }
@@ -10,16 +10,25 @@ export class BiggiveFormFieldSelect {
10
10
  this.selectedValue = event.detail.value;
11
11
  this.selectedLabel = event.detail.label;
12
12
  this.doSelectChange.emit({ value: this.selectedValue, label: this.selectedLabel });
13
- const dropdown = this.el.shadowRoot.querySelector('.dropdown');
14
- dropdown.classList.remove('active');
13
+ console.log({ value: this.selectedValue, label: this.selectedLabel });
14
+ if (this.el.shadowRoot !== null && this.el.shadowRoot !== undefined) {
15
+ const dropdown = this.el.shadowRoot.querySelector('.dropdown');
16
+ if (dropdown !== null && dropdown !== undefined) {
17
+ dropdown.classList.remove('active');
18
+ }
19
+ }
15
20
  }
16
21
  toggleFocus(event) {
17
- const dropdown = event.target.parentElement.parentElement;
18
- if (dropdown.classList.contains('active')) {
19
- dropdown.classList.remove('active');
20
- }
21
- else {
22
- dropdown.classList.add('active');
22
+ if (event.target) {
23
+ const dropdown = event.target.parentElement.parentElement;
24
+ if (dropdown !== null && dropdown !== undefined) {
25
+ if (dropdown.classList.contains('active')) {
26
+ dropdown.classList.remove('active');
27
+ }
28
+ else {
29
+ dropdown.classList.add('active');
30
+ }
31
+ }
23
32
  }
24
33
  }
25
34
  render() {
@@ -1,4 +1,4 @@
1
- import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
1
+ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
2
2
 
3
3
  const biggiveButtonCss = "body{background-color:#D7D7D7}h1,h3,h4,h5,h6{margin-bottom:0}h1,.heading-1{font-size:47px;line-height:60px;font-weight:bold}h2,.heading-2{font-size:38px;line-height:45px;font-weight:bold}h3,.heading-3{font-size:25px;line-height:32px;font-weight:bold}h4,.heading-4{font-size:20px;line-height:24px;font-weight:bold}h5,.heading-5{font-size:17px;line-height:24px;font-weight:bold}a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.colour-primary{color:#2C089B}.colour-secondary{color:#2AF135}.colour-tertiary{color:#FF7272}.colour-white{color:#FFFFFF}.colour-black{color:#000000}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.fill-primary{fill:#2C089B}.fill-secondary{fill:#2AF135}.fill-tertiary{fill:#FF7272}.fill-white{fill:#FFFFFF}.fill-black{fill:#000000}.fill-red{fill:red}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.input-wrap{display:flex;justify-content:space-between}.input-text{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;color:#000000;padding:5px 10px;box-sizing:border-box;width:100%}.input-text:focus{outline:0}.input-text:placeholder{color:#4A4A4A}.button{font-size:17px;line-height:24px;padding:10px 30px;border-radius:5px;border:1px solid #000000;background-color:#000000;filter:drop-shadow(0px 8px 20px rgba(0, 0, 0, 0.22));color:#FFFFFF;display:inline-block;text-decoration:none;text-align:center;transition:all ease-in-out 0.5s;cursor:pointer}.button:hover{background-color:#FFFFFF;color:#000000}.button.size-small{font-size:13px;line-height:17px;padding:5px 15px}.button.button.rounded-true{border-radius:27.5px}.button.button.rounded-true.size-small{border-radius:20px}.button-primary{color:#FFFFFF;background-color:#2C089B;border-color:#2C089B}.button-primary:hover{color:#2C089B;background-color:#FFFFFF}.button-secondary{color:#2C089B;background-color:#2AF135;border-color:#2AF135}.button-secondary:hover{background-color:#FFFFFF}.button-tertiary{color:#FFFFFF;background-color:#FF7272;border-color:#FF7272}.button-tertiary:hover{background-color:#FFFFFF}.button-white{color:#2C089B;background-color:#FFFFFF;border-color:#FFFFFF}.button-white:hover{color:#FFFFFF;background-color:#2C089B}.button-black{color:#FFFFFF;background-color:#000000;border-color:#000000}.button-black:hover{color:#000000;background-color:#FFFFFF}.button-clear-primary{color:#2C089B;background-color:transparent;text-decoration:underline;box-shadow:none;border:0;padding-left:0;padding-right:0}.button-clear-primary:hover{text-decoration:none;background-color:transparent}.button-clear-secondary{color:#2AF135;background-color:transparent;text-decoration:underline;box-shadow:none;border:0;padding-left:0;padding-right:0}.button-clear-secondary:hover{text-decoration:none;background-color:transparent}.button-clear-tertiary{color:#FF7272;background-color:transparent;text-decoration:underline;box-shadow:none;border:0;padding-left:0;padding-right:0}.button-clear-tertiary:hover{text-decoration:none;background-color:transparent}.button-clear-white{color:#FFFFFF;background-color:transparent;text-decoration:underline;box-shadow:none;border:0;padding-left:0;padding-right:0}.button-clear-white:hover{color:#FFFFFF;text-decoration:none;background-color:transparent}.button-rounded{border-radius:27.5px}.button-rounded.size-small{border-radius:20px}.progress-bar{display:flex}.progress-bar .slider{margin:auto 15px auto 0;position:relative;flex-grow:1}.progress-bar .slider:before{content:\"\";position:absolute;display:block;top:0;left:0;bottom:0;right:0;background-color:#E8E8E8;border-radius:4px}.progress-bar .slider .progress{position:relative;border-radius:4px;background-color:#000000;height:8px}.progress-bar .counter{font-weight:700;color:#000000;font-size:14px;line-height:18px}.progress-bar-primary .slider .progress{background-color:#2C089B}.progress-bar-primary .counter{color:#2C089B}.progress-bar-secondary .slider .progress{background-color:#2AF135}.progress-bar-secondary .counter{color:#2AF135}.video-wrap{position:relative;padding-bottom:56.25%}.video-wrap iframe,.video-wrap video{position:absolute;border:0;display:block;left:0;right:0;top:0;bottom:0;width:100%;height:100%}.image-wrap img{width:100%;height:auto}.align-left{text-align:left}.align-right{text-align:right}.align-center{text-align:center}.align-justify{text-align:justify}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.horizontal-padding-1{padding-left:5px;padding-right:5px}.horizontal-padding-2{padding-left:10px;padding-right:10px}.horizontal-padding-3{padding-left:15px;padding-right:15px}.horizontal-padding-4{padding-left:30px;padding-right:30px}.horizontal-padding-5{padding-left:45px;padding-right:45px}.horizontal-padding-6{padding-left:60px;padding-right:60px}.vertical-padding-1{padding-top:5px;padding-bottom:5px}.vertical-padding-2{padding-top:10px;padding-bottom:10px}.vertical-padding-3{padding-top:15px;padding-bottom:15px}.vertical-padding-4{padding-top:30px;padding-bottom:30px}.vertical-padding-5{padding-top:45px;padding-bottom:45px}.vertical-padding-6{padding-top:60px;padding-bottom:60px}:host{display:contents}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}.container a{display:inline-block}.container a.full-width-true{display:block}";
4
4
 
@@ -7,6 +7,7 @@ const BiggiveButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
7
7
  super();
8
8
  this.__registerHost();
9
9
  this.__attachShadow();
10
+ this.doButtonClick = createEvent(this, "doButtonClick", 7);
10
11
  this.spaceBelow = 1;
11
12
  this.colourScheme = 'primary';
12
13
  this.label = 'Click me';
@@ -15,8 +16,11 @@ const BiggiveButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
15
16
  this.size = 'medium';
16
17
  this.rounded = false;
17
18
  }
19
+ handleButtonClick() {
20
+ this.doButtonClick.emit(this.url);
21
+ }
18
22
  render() {
19
- return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("a", { href: this.url, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, this.label)));
23
+ return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("a", { href: this.url, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, h("span", { onClick: this.handleButtonClick }, this.label))));
20
24
  }
21
25
  static get style() { return biggiveButtonCss; }
22
26
  }, [1, "biggive-button", {
@@ -17,16 +17,25 @@ const BiggiveFormFieldSelect = /*@__PURE__*/ proxyCustomElement(class extends HT
17
17
  this.selectedValue = event.detail.value;
18
18
  this.selectedLabel = event.detail.label;
19
19
  this.doSelectChange.emit({ value: this.selectedValue, label: this.selectedLabel });
20
- const dropdown = this.el.shadowRoot.querySelector('.dropdown');
21
- dropdown.classList.remove('active');
20
+ console.log({ value: this.selectedValue, label: this.selectedLabel });
21
+ if (this.el.shadowRoot !== null && this.el.shadowRoot !== undefined) {
22
+ const dropdown = this.el.shadowRoot.querySelector('.dropdown');
23
+ if (dropdown !== null && dropdown !== undefined) {
24
+ dropdown.classList.remove('active');
25
+ }
26
+ }
22
27
  }
23
28
  toggleFocus(event) {
24
- const dropdown = event.target.parentElement.parentElement;
25
- if (dropdown.classList.contains('active')) {
26
- dropdown.classList.remove('active');
27
- }
28
- else {
29
- dropdown.classList.add('active');
29
+ if (event.target) {
30
+ const dropdown = event.target.parentElement.parentElement;
31
+ if (dropdown !== null && dropdown !== undefined) {
32
+ if (dropdown.classList.contains('active')) {
33
+ dropdown.classList.remove('active');
34
+ }
35
+ else {
36
+ dropdown.classList.add('active');
37
+ }
38
+ }
30
39
  }
31
40
  }
32
41
  render() {
@@ -38,6 +38,7 @@ const biggiveButtonCss = "body{background-color:#D7D7D7}h1,h3,h4,h5,h6{margin-bo
38
38
  const BiggiveButton = class {
39
39
  constructor(hostRef) {
40
40
  registerInstance(this, hostRef);
41
+ this.doButtonClick = createEvent(this, "doButtonClick", 7);
41
42
  this.spaceBelow = 1;
42
43
  this.colourScheme = 'primary';
43
44
  this.label = 'Click me';
@@ -46,8 +47,11 @@ const BiggiveButton = class {
46
47
  this.size = 'medium';
47
48
  this.rounded = false;
48
49
  }
50
+ handleButtonClick() {
51
+ this.doButtonClick.emit(this.url);
52
+ }
49
53
  render() {
50
- return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("a", { href: this.url, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, this.label)));
54
+ return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("a", { href: this.url, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, h("span", { onClick: this.handleButtonClick }, this.label))));
51
55
  }
52
56
  };
53
57
  BiggiveButton.style = biggiveButtonCss;
@@ -251,16 +255,25 @@ const BiggiveFormFieldSelect = class {
251
255
  this.selectedValue = event.detail.value;
252
256
  this.selectedLabel = event.detail.label;
253
257
  this.doSelectChange.emit({ value: this.selectedValue, label: this.selectedLabel });
254
- const dropdown = this.el.shadowRoot.querySelector('.dropdown');
255
- dropdown.classList.remove('active');
258
+ console.log({ value: this.selectedValue, label: this.selectedLabel });
259
+ if (this.el.shadowRoot !== null && this.el.shadowRoot !== undefined) {
260
+ const dropdown = this.el.shadowRoot.querySelector('.dropdown');
261
+ if (dropdown !== null && dropdown !== undefined) {
262
+ dropdown.classList.remove('active');
263
+ }
264
+ }
256
265
  }
257
266
  toggleFocus(event) {
258
- const dropdown = event.target.parentElement.parentElement;
259
- if (dropdown.classList.contains('active')) {
260
- dropdown.classList.remove('active');
261
- }
262
- else {
263
- dropdown.classList.add('active');
267
+ if (event.target) {
268
+ const dropdown = event.target.parentElement.parentElement;
269
+ if (dropdown !== null && dropdown !== undefined) {
270
+ if (dropdown.classList.contains('active')) {
271
+ dropdown.classList.remove('active');
272
+ }
273
+ else {
274
+ dropdown.classList.add('active');
275
+ }
276
+ }
264
277
  }
265
278
  }
266
279
  render() {
@@ -1,4 +1,6 @@
1
+ import { EventEmitter } from '../../stencil-public-runtime';
1
2
  export declare class BiggiveButton {
3
+ doButtonClick: EventEmitter<string>;
2
4
  /**
3
5
  * Space below component
4
6
  */
@@ -27,5 +29,6 @@ export declare class BiggiveButton {
27
29
  * Rounded corners
28
30
  */
29
31
  rounded: boolean;
32
+ handleButtonClick(): void;
30
33
  render(): any;
31
34
  }
@@ -1,6 +1,6 @@
1
1
  import { EventEmitter } from '../../stencil-public-runtime';
2
2
  export declare class BiggiveFormFieldSelect {
3
- el: HTMLBiggiveFormFieldSelectElement;
3
+ el: HTMLDivElement;
4
4
  /**
5
5
  * This event `doChange` event is emitted and propogates to the parent
6
6
  * component which handles it
@@ -944,6 +944,10 @@ export namespace Components {
944
944
  "videoUrl": string;
945
945
  }
946
946
  }
947
+ export interface BiggiveButtonCustomEvent<T> extends CustomEvent<T> {
948
+ detail: T;
949
+ target: HTMLBiggiveButtonElement;
950
+ }
947
951
  export interface BiggiveCampaignCardFilterGridCustomEvent<T> extends CustomEvent<T> {
948
952
  detail: T;
949
953
  target: HTMLBiggiveCampaignCardFilterGridElement;
@@ -1443,6 +1447,7 @@ declare namespace LocalJSX {
1443
1447
  * Text
1444
1448
  */
1445
1449
  "label"?: string;
1450
+ "onDoButtonClick"?: (event: BiggiveButtonCustomEvent<string>) => void;
1446
1451
  /**
1447
1452
  * Rounded corners
1448
1453
  */
package/hydrate/index.js CHANGED
@@ -6380,6 +6380,7 @@ const biggiveButtonCss = "/*!@body*/body.sc-biggive-button{background-color:#D7D
6380
6380
  class BiggiveButton {
6381
6381
  constructor(hostRef) {
6382
6382
  registerInstance(this, hostRef);
6383
+ this.doButtonClick = createEvent(this, "doButtonClick", 7);
6383
6384
  this.spaceBelow = 1;
6384
6385
  this.colourScheme = 'primary';
6385
6386
  this.label = 'Click me';
@@ -6388,8 +6389,11 @@ class BiggiveButton {
6388
6389
  this.size = 'medium';
6389
6390
  this.rounded = false;
6390
6391
  }
6392
+ handleButtonClick() {
6393
+ this.doButtonClick.emit(this.url);
6394
+ }
6391
6395
  render() {
6392
- 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)));
6396
+ 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))));
6393
6397
  }
6394
6398
  static get style() { return biggiveButtonCss; }
6395
6399
  static get cmpMeta() { return {
@@ -6764,16 +6768,25 @@ class BiggiveFormFieldSelect {
6764
6768
  this.selectedValue = event.detail.value;
6765
6769
  this.selectedLabel = event.detail.label;
6766
6770
  this.doSelectChange.emit({ value: this.selectedValue, label: this.selectedLabel });
6767
- const dropdown = this.el.shadowRoot.querySelector('.dropdown');
6768
- dropdown.classList.remove('active');
6771
+ console.log({ value: this.selectedValue, label: this.selectedLabel });
6772
+ if (this.el.shadowRoot !== null && this.el.shadowRoot !== undefined) {
6773
+ const dropdown = this.el.shadowRoot.querySelector('.dropdown');
6774
+ if (dropdown !== null && dropdown !== undefined) {
6775
+ dropdown.classList.remove('active');
6776
+ }
6777
+ }
6769
6778
  }
6770
6779
  toggleFocus(event) {
6771
- const dropdown = event.target.parentElement.parentElement;
6772
- if (dropdown.classList.contains('active')) {
6773
- dropdown.classList.remove('active');
6774
- }
6775
- else {
6776
- dropdown.classList.add('active');
6780
+ if (event.target) {
6781
+ const dropdown = event.target.parentElement.parentElement;
6782
+ if (dropdown !== null && dropdown !== undefined) {
6783
+ if (dropdown.classList.contains('active')) {
6784
+ dropdown.classList.remove('active');
6785
+ }
6786
+ else {
6787
+ dropdown.classList.add('active');
6788
+ }
6789
+ }
6777
6790
  }
6778
6791
  }
6779
6792
  render() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@biggive/components",
3
- "version": "1.0.136",
3
+ "version": "1.0.137",
4
4
  "description": "Big Give Components",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.js",