@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.
- package/dist/biggive/biggive.esm.js +1 -1
- package/dist/biggive/p-9bee4580.entry.js +1 -0
- package/dist/cjs/biggive-back-to-top_26.cjs.entry.js +22 -9
- package/dist/collection/components/biggive-button/biggive-button.js +22 -1
- package/dist/collection/components/biggive-form-field-select/biggive-form-field-select.js +17 -8
- package/dist/components/biggive-button2.js +6 -2
- package/dist/components/biggive-form-field-select2.js +17 -8
- package/dist/esm/biggive-back-to-top_26.entry.js +22 -9
- package/dist/types/components/biggive-button/biggive-button.d.ts +3 -0
- package/dist/types/components/biggive-form-field-select/biggive-form-field-select.d.ts +1 -1
- package/dist/types/components.d.ts +5 -0
- package/hydrate/index.js +22 -9
- package/package.json +1 -1
- package/dist/biggive/p-127b8c36.entry.js +0 -1
|
@@ -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
|
-
|
|
259
|
-
|
|
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
|
-
|
|
263
|
-
|
|
264
|
-
dropdown
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
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
|
-
|
|
14
|
-
|
|
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
|
-
|
|
18
|
-
|
|
19
|
-
dropdown
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
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
|
-
|
|
21
|
-
|
|
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
|
-
|
|
25
|
-
|
|
26
|
-
dropdown
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
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
|
-
|
|
255
|
-
|
|
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
|
-
|
|
259
|
-
|
|
260
|
-
dropdown
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
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:
|
|
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
|
-
|
|
6768
|
-
|
|
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
|
-
|
|
6772
|
-
|
|
6773
|
-
dropdown
|
|
6774
|
-
|
|
6775
|
-
|
|
6776
|
-
|
|
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() {
|