@biggive/components 202305101345.0.0 → 202305111528.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.
@@ -1445,7 +1445,7 @@ const BiggiveTabbedContent = class {
1445
1445
  };
1446
1446
  BiggiveTabbedContent.style = biggiveTabbedContentCss;
1447
1447
 
1448
- const biggiveTextInputCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}.text-input{position:relative;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.text-input .currency-symbol{float:left}.text-input .prompt{position:absolute;z-index:2;font-size:small;top:-1em;background-color:#F4F4F4;left:4em;padding-left:1em;padding-right:1em;color:#2C089B}.text-input.select-style-bordered .sleeve{font-size:24px;line-height:30px;font-weight:bolder;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered .sleeve .inner-sleave{background-color:#F4F4F4;color:#2C089B;display:block;position:relative;padding:10px 30px 10px 10px;cursor:pointer;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered .sleeve .inner-sleave:after{content:\"\";display:block;position:absolute;right:20px;top:18px;width:10px;height:10px;background-size:contain;background-repeat:no-repeat;background-position:center center}";
1448
+ const biggiveTextInputCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}.text-input{position:relative;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.text-input .currency-symbol{position:absolute}.text-input .prompt{position:absolute;z-index:2;font-size:small;top:-1em;background-color:#F4F4F4;left:4em;padding-left:1em;padding-right:1em;color:#2C089B}.text-input.select-style-bordered .sleeve{font-size:24px;line-height:30px;font-weight:bolder;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered .sleeve .inner-sleave{background-color:#F4F4F4;color:#2C089B;display:block;position:relative;padding:10px 30px 10px 10px;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered .sleeve .inner-sleave:after{content:\"\";display:block;position:absolute;right:20px;top:18px;width:10px;height:10px;background-size:contain;background-repeat:no-repeat;background-position:center center}";
1449
1449
 
1450
1450
  const BiggiveTextInput = class {
1451
1451
  constructor(hostRef) {
@@ -78,7 +78,7 @@ a:hover {
78
78
  text-align: left;
79
79
  }
80
80
  .text-input .currency-symbol {
81
- float: left;
81
+ position: absolute;
82
82
  }
83
83
  .text-input .prompt {
84
84
  position: absolute;
@@ -106,7 +106,6 @@ a:hover {
106
106
  display: block;
107
107
  position: relative;
108
108
  padding: 10px 30px 10px 10px;
109
- cursor: pointer;
110
109
  clip-path: polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%);
111
110
  }
112
111
  .text-input.select-style-bordered .sleeve .inner-sleave:after {
@@ -2,6 +2,8 @@ import { h } from '@stencil/core';
2
2
  /**
3
3
  * Initially developed for use within the new donate stepper design. Currently has a hard-coded background
4
4
  * of $colour-grey-background, intened to appear transparent when used on a page with a matching background.
5
+ *
6
+ * Please ensure input is styled as width: 100%.
5
7
  */
6
8
  export class BiggiveTextInput {
7
9
  constructor() {
@@ -1,6 +1,6 @@
1
1
  import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
2
2
 
3
- const biggiveTextInputCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}.text-input{position:relative;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.text-input .currency-symbol{float:left}.text-input .prompt{position:absolute;z-index:2;font-size:small;top:-1em;background-color:#F4F4F4;left:4em;padding-left:1em;padding-right:1em;color:#2C089B}.text-input.select-style-bordered .sleeve{font-size:24px;line-height:30px;font-weight:bolder;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered .sleeve .inner-sleave{background-color:#F4F4F4;color:#2C089B;display:block;position:relative;padding:10px 30px 10px 10px;cursor:pointer;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered .sleeve .inner-sleave:after{content:\"\";display:block;position:absolute;right:20px;top:18px;width:10px;height:10px;background-size:contain;background-repeat:no-repeat;background-position:center center}";
3
+ const biggiveTextInputCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}.text-input{position:relative;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.text-input .currency-symbol{position:absolute}.text-input .prompt{position:absolute;z-index:2;font-size:small;top:-1em;background-color:#F4F4F4;left:4em;padding-left:1em;padding-right:1em;color:#2C089B}.text-input.select-style-bordered .sleeve{font-size:24px;line-height:30px;font-weight:bolder;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered .sleeve .inner-sleave{background-color:#F4F4F4;color:#2C089B;display:block;position:relative;padding:10px 30px 10px 10px;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered .sleeve .inner-sleave:after{content:\"\";display:block;position:absolute;right:20px;top:18px;width:10px;height:10px;background-size:contain;background-repeat:no-repeat;background-position:center center}";
4
4
 
5
5
  const BiggiveTextInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
6
6
  constructor() {
@@ -1441,7 +1441,7 @@ const BiggiveTabbedContent = class {
1441
1441
  };
1442
1442
  BiggiveTabbedContent.style = biggiveTabbedContentCss;
1443
1443
 
1444
- const biggiveTextInputCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}.text-input{position:relative;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.text-input .currency-symbol{float:left}.text-input .prompt{position:absolute;z-index:2;font-size:small;top:-1em;background-color:#F4F4F4;left:4em;padding-left:1em;padding-right:1em;color:#2C089B}.text-input.select-style-bordered .sleeve{font-size:24px;line-height:30px;font-weight:bolder;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered .sleeve .inner-sleave{background-color:#F4F4F4;color:#2C089B;display:block;position:relative;padding:10px 30px 10px 10px;cursor:pointer;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered .sleeve .inner-sleave:after{content:\"\";display:block;position:absolute;right:20px;top:18px;width:10px;height:10px;background-size:contain;background-repeat:no-repeat;background-position:center center}";
1444
+ const biggiveTextInputCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}.text-input{position:relative;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.text-input .currency-symbol{position:absolute}.text-input .prompt{position:absolute;z-index:2;font-size:small;top:-1em;background-color:#F4F4F4;left:4em;padding-left:1em;padding-right:1em;color:#2C089B}.text-input.select-style-bordered .sleeve{font-size:24px;line-height:30px;font-weight:bolder;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered .sleeve .inner-sleave{background-color:#F4F4F4;color:#2C089B;display:block;position:relative;padding:10px 30px 10px 10px;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered .sleeve .inner-sleave:after{content:\"\";display:block;position:absolute;right:20px;top:18px;width:10px;height:10px;background-size:contain;background-repeat:no-repeat;background-position:center center}";
1445
1445
 
1446
1446
  const BiggiveTextInput = class {
1447
1447
  constructor(hostRef) {
@@ -1,6 +1,8 @@
1
1
  /**
2
2
  * Initially developed for use within the new donate stepper design. Currently has a hard-coded background
3
3
  * of $colour-grey-background, intened to appear transparent when used on a page with a matching background.
4
+ *
5
+ * Please ensure input is styled as width: 100%.
4
6
  */
5
7
  export declare class BiggiveTextInput {
6
8
  value: string;
@@ -949,6 +949,7 @@ export namespace Components {
949
949
  /**
950
950
  * Initially developed for use within the new donate stepper design. Currently has a hard-coded background
951
951
  * of $colour-grey-background, intened to appear transparent when used on a page with a matching background.
952
+ * Please ensure input is styled as width: 100%.
952
953
  */
953
954
  interface BiggiveTextInput {
954
955
  /**
@@ -1411,6 +1412,7 @@ declare global {
1411
1412
  /**
1412
1413
  * Initially developed for use within the new donate stepper design. Currently has a hard-coded background
1413
1414
  * of $colour-grey-background, intened to appear transparent when used on a page with a matching background.
1415
+ * Please ensure input is styled as width: 100%.
1414
1416
  */
1415
1417
  interface HTMLBiggiveTextInputElement extends Components.BiggiveTextInput, HTMLStencilElement {
1416
1418
  }
@@ -2477,6 +2479,7 @@ declare namespace LocalJSX {
2477
2479
  /**
2478
2480
  * Initially developed for use within the new donate stepper design. Currently has a hard-coded background
2479
2481
  * of $colour-grey-background, intened to appear transparent when used on a page with a matching background.
2482
+ * Please ensure input is styled as width: 100%.
2480
2483
  */
2481
2484
  interface BiggiveTextInput {
2482
2485
  /**
@@ -2736,6 +2739,7 @@ declare module "@stencil/core" {
2736
2739
  /**
2737
2740
  * Initially developed for use within the new donate stepper design. Currently has a hard-coded background
2738
2741
  * of $colour-grey-background, intened to appear transparent when used on a page with a matching background.
2742
+ * Please ensure input is styled as width: 100%.
2739
2743
  */
2740
2744
  "biggive-text-input": LocalJSX.BiggiveTextInput & JSXBase.HTMLAttributes<HTMLBiggiveTextInputElement>;
2741
2745
  "biggive-timeline": LocalJSX.BiggiveTimeline & JSXBase.HTMLAttributes<HTMLBiggiveTimelineElement>;
package/hydrate/index.js CHANGED
@@ -8555,11 +8555,13 @@ class BiggiveTable {
8555
8555
  }; }
8556
8556
  }
8557
8557
 
8558
- const biggiveTextInputCss = "/*!@a*/a.sc-biggive-text-input{color:inherit;text-decoration:underline}/*!@a:hover*/a.sc-biggive-text-input:hover{text-decoration:none}/*!@.space-above-0*/.space-above-0.sc-biggive-text-input{margin-top:0}/*!@.space-above-1*/.space-above-1.sc-biggive-text-input{margin-top:5px}/*!@.space-above-2*/.space-above-2.sc-biggive-text-input{margin-top:10px}/*!@.space-above-3*/.space-above-3.sc-biggive-text-input{margin-top:15px}/*!@.space-above-4*/.space-above-4.sc-biggive-text-input{margin-top:30px}/*!@.space-above-5*/.space-above-5.sc-biggive-text-input{margin-top:45px}/*!@.space-above-6*/.space-above-6.sc-biggive-text-input{margin-top:60px}/*!@.space-below-0*/.space-below-0.sc-biggive-text-input{margin-bottom:0}/*!@.space-below-1*/.space-below-1.sc-biggive-text-input{margin-bottom:5px}/*!@.space-below-2*/.space-below-2.sc-biggive-text-input{margin-bottom:10px}/*!@.space-below-3*/.space-below-3.sc-biggive-text-input{margin-bottom:15px}/*!@.space-below-4*/.space-below-4.sc-biggive-text-input{margin-bottom:30px}/*!@.space-below-5*/.space-below-5.sc-biggive-text-input{margin-bottom:45px}/*!@.space-below-6*/.space-below-6.sc-biggive-text-input{margin-bottom:60px}/*!@:host*/.sc-biggive-text-input-h{display:contents}/*!@.text-input*/.text-input.sc-biggive-text-input{position:relative;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}/*!@.text-input .currency-symbol*/.text-input.sc-biggive-text-input .currency-symbol.sc-biggive-text-input{float:left}/*!@.text-input .prompt*/.text-input.sc-biggive-text-input .prompt.sc-biggive-text-input{position:absolute;z-index:2;font-size:small;top:-1em;background-color:#F4F4F4;left:4em;padding-left:1em;padding-right:1em;color:#2C089B}/*!@.text-input.select-style-bordered .sleeve*/.text-input.select-style-bordered.sc-biggive-text-input .sleeve.sc-biggive-text-input{font-size:24px;line-height:30px;font-weight:bolder;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}/*!@.text-input.select-style-bordered .sleeve .inner-sleave*/.text-input.select-style-bordered.sc-biggive-text-input .sleeve.sc-biggive-text-input .inner-sleave.sc-biggive-text-input{background-color:#F4F4F4;color:#2C089B;display:block;position:relative;padding:10px 30px 10px 10px;cursor:pointer;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}/*!@.text-input.select-style-bordered .sleeve .inner-sleave:after*/.text-input.select-style-bordered.sc-biggive-text-input .sleeve.sc-biggive-text-input .inner-sleave.sc-biggive-text-input:after{content:\"\";display:block;position:absolute;right:20px;top:18px;width:10px;height:10px;background-size:contain;background-repeat:no-repeat;background-position:center center}";
8558
+ const biggiveTextInputCss = "/*!@a*/a.sc-biggive-text-input{color:inherit;text-decoration:underline}/*!@a:hover*/a.sc-biggive-text-input:hover{text-decoration:none}/*!@.space-above-0*/.space-above-0.sc-biggive-text-input{margin-top:0}/*!@.space-above-1*/.space-above-1.sc-biggive-text-input{margin-top:5px}/*!@.space-above-2*/.space-above-2.sc-biggive-text-input{margin-top:10px}/*!@.space-above-3*/.space-above-3.sc-biggive-text-input{margin-top:15px}/*!@.space-above-4*/.space-above-4.sc-biggive-text-input{margin-top:30px}/*!@.space-above-5*/.space-above-5.sc-biggive-text-input{margin-top:45px}/*!@.space-above-6*/.space-above-6.sc-biggive-text-input{margin-top:60px}/*!@.space-below-0*/.space-below-0.sc-biggive-text-input{margin-bottom:0}/*!@.space-below-1*/.space-below-1.sc-biggive-text-input{margin-bottom:5px}/*!@.space-below-2*/.space-below-2.sc-biggive-text-input{margin-bottom:10px}/*!@.space-below-3*/.space-below-3.sc-biggive-text-input{margin-bottom:15px}/*!@.space-below-4*/.space-below-4.sc-biggive-text-input{margin-bottom:30px}/*!@.space-below-5*/.space-below-5.sc-biggive-text-input{margin-bottom:45px}/*!@.space-below-6*/.space-below-6.sc-biggive-text-input{margin-bottom:60px}/*!@:host*/.sc-biggive-text-input-h{display:contents}/*!@.text-input*/.text-input.sc-biggive-text-input{position:relative;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}/*!@.text-input .currency-symbol*/.text-input.sc-biggive-text-input .currency-symbol.sc-biggive-text-input{position:absolute}/*!@.text-input .prompt*/.text-input.sc-biggive-text-input .prompt.sc-biggive-text-input{position:absolute;z-index:2;font-size:small;top:-1em;background-color:#F4F4F4;left:4em;padding-left:1em;padding-right:1em;color:#2C089B}/*!@.text-input.select-style-bordered .sleeve*/.text-input.select-style-bordered.sc-biggive-text-input .sleeve.sc-biggive-text-input{font-size:24px;line-height:30px;font-weight:bolder;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}/*!@.text-input.select-style-bordered .sleeve .inner-sleave*/.text-input.select-style-bordered.sc-biggive-text-input .sleeve.sc-biggive-text-input .inner-sleave.sc-biggive-text-input{background-color:#F4F4F4;color:#2C089B;display:block;position:relative;padding:10px 30px 10px 10px;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}/*!@.text-input.select-style-bordered .sleeve .inner-sleave:after*/.text-input.select-style-bordered.sc-biggive-text-input .sleeve.sc-biggive-text-input .inner-sleave.sc-biggive-text-input:after{content:\"\";display:block;position:absolute;right:20px;top:18px;width:10px;height:10px;background-size:contain;background-repeat:no-repeat;background-position:center center}";
8559
8559
 
8560
8560
  /**
8561
8561
  * Initially developed for use within the new donate stepper design. Currently has a hard-coded background
8562
8562
  * of $colour-grey-background, intened to appear transparent when used on a page with a matching background.
8563
+ *
8564
+ * Please ensure input is styled as width: 100%.
8563
8565
  */
8564
8566
  class BiggiveTextInput {
8565
8567
  constructor(hostRef) {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@biggive/components",
3
3
  "_comment": "Version number below is automatically replaced during CircleCI build.",
4
- "version": "202305101345.0.0",
4
+ "version": "202305111528.0.0",
5
5
  "description": "Big Give Components",
6
6
  "main": "dist/index.cjs.js",
7
7
  "module": "dist/index.js",