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

@biggive/components 202501021532.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-footer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"biggive-footer.js","mappings":"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","names":["BiggiveFooter"],"sources":["src/components/biggive-footer/biggive-footer.scss?tag=biggive-footer&encapsulation=shadow","src/components/biggive-footer/biggive-footer.tsx"],"sourcesContent":[":host {\n display: contents;\n}\n\n.footer {\n @include standard-font();\n color: $colour-white;\n}\n\nnav {\n width: calc(33.3% - 20px);\n margin: 0;\n padding: 0;\n .heading {\n @include heading-5();\n border-bottom: 1px solid $colour-white;\n padding-bottom: $spacer-2;\n margin-bottom: $spacer-2;\n }\n ul {\n margin: 0;\n padding: 0;\n li {\n margin: 0;\n padding: 0;\n list-style-type: none;\n margin-top: 15px;\n }\n }\n}\n\nnav ul li a {\n color: $colour-white;\n text-decoration: none;\n // target all classes prefixed with 'icon-' so we don't repeat code\n &[class^='icon-'],\n &[class='icon-'] {\n padding-left: 20px;\n background-repeat: no-repeat;\n background-size: auto 10px;\n background-position: left center;\n }\n\n &.icon-green {\n background-image: url(/assets/images/triangles-combined-green-match-white.svg);\n }\n\n &.icon-children {\n background-image: url(/assets/images/triangles-combined-children-white.svg);\n }\n\n &.icon-christmas {\n background-image: url(/assets/images/triangles-combined-christmas-challenge-white.svg);\n }\n\n &.icon-green-match {\n background-image: url(/assets/images/triangles-combined-green-match-white.svg);\n }\n\n &.icon-women-girls {\n background-image: url(/assets/images/triangles-combined-women-girls-white.svg);\n }\n\n &.icon-mental-health {\n background-image: url(/assets/images/triangles-combined-mental-health-white.svg);\n }\n\n &.icon-anchor-match {\n background-image: url(/assets/images/triangles-combined-anchor-white.svg);\n }\n\n &.icon-emergency {\n background-image: url(/assets/images/triangles-combined-emergency-white.svg);\n }\n\n &.icon-arts {\n background-image: url(/assets/images/triangles-combined-arts-white.svg);\n }\n}\n\n.row-top {\n background-image: url(/assets/images/biggive-triangle-green.svg);\n background-repeat: no-repeat;\n background-size: auto 75px;\n background-position: $spacer-6 30px;\n background-color: $colour-primary-blue;\n padding: 100px $spacer-6 $spacer-6 $spacer-6;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n\n .button-wrap {\n margin-top: $spacer-6;\n width: 100%;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n }\n}\n\nfooter .row-bottom {\n background-color: $colour-black;\n padding: $spacer-6 $spacer-6 $spacer-3 $spacer-6;\n border-top: 1px solid $colour-white;\n\n .fr-logo {\n width: 135px;\n }\n\n .postscript-wrap {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n\n @media screen and (max-width: $screen-tablet-max) {\n flex-direction: column;\n }\n }\n\n .nav.nav-postscript {\n text-align: right;\n flex-grow: 1;\n\n @media screen and (max-width: $screen-tablet-max) {\n text-align: center;\n }\n }\n\n .nav-postscript li {\n display: inline-block;\n margin-left: 1rem;\n\n &:first-child {\n margin-left: 0;\n }\n\n @media screen and (max-width: $screen-tablet-max) {\n display: block;\n width: 100%;\n margin-left: 0;\n }\n }\n\n .social-icon-wrap {\n border-top: 1px solid $colour-white;\n padding-top: $spacer-4;\n margin-top: $spacer-4;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: $spacer-4;\n\n .social-icon-item {\n margin: 0 $spacer-3;\n }\n }\n\n p {\n text-align: center;\n }\n}\n\n@media screen and (max-width: $screen-tablet-max) {\n .row-top {\n padding: $spacer-3;\n }\n}\n\n@media screen and (max-width: $screen-tablet-max) {\n nav {\n width: 100%;\n margin-right: 0;\n margin-bottom: $spacer-4;\n }\n\n .row-top {\n background-size: auto 50px;\n padding-top: 80px;\n padding-left: 15px;\n background-position: 15px 30px;\n\n .button-wrap {\n width: 100% !important;\n }\n }\n}\n","import { Component, Element, getAssetPath, h, Prop } from '@stencil/core';\nimport { makeURL } from '../../util/helper-methods';\n\n@Component({\n tag: 'biggive-footer',\n styleUrl: 'biggive-footer.scss',\n shadow: true,\n})\nexport class BiggiveFooter {\n @Element() host: HTMLBiggiveFooterElement;\n\n @Prop() headingLevel: 1 \| 2 \| 3 \| 4 \| 5 \| 6 = 5;\n\n /*\n URL prefixes vary by environment, and components library is not best placed to know what they are, so we\n * take them as props\n /\n @Prop() donateUrlPrefix: string;\n @Prop() blogUrlPrefix: string \| undefined;\n @Prop() experienceUrlPrefix: string \| undefined;\n private year: string = new Date().getFullYear().toString();\n\n /\n Conditionally render footer menu:\n * hard-coded (preset) when set to true, dynamic (slot-based) when set to false\n */\n @Prop() usePresetFooter = false;\n\n private appendMenu(menuName: string) {\n var node = this.host.querySelector(`[slot=\"${menuName}\"]`);\n if (node !== null) {\n this.host!.shadowRoot!.querySelector(`.${menuName}`)!.appendChild(node);\n }\n }\n\n componentDidRender() {\n if (!this.usePresetFooter) {\n this.appendMenu('nav-primary');\n this.appendMenu('nav-secondary');\n this.appendMenu('nav-tertiary');\n this.appendMenu('nav-postscript');\n }\n }\n\n render() {\n const HeadingTag = `h${this.headingLevel}`;\n const slotBasedFooter = () => {\n return (\n <footer class=\"footer\">\n <div class=\"row row-top\">\n <nav class=\"nav nav-primary\" aria-labelledby=\"footer-primary-heading\">\n <HeadingTag class=\"heading\" id=\"footer-primary-heading\">\n <slot name=\"nav-primary-title\"></slot>\n </HeadingTag>\n </nav>\n\n <nav class=\"nav nav-secondary\" aria-labelledby=\"footer-secondary-heading-heading\">\n <HeadingTag class=\"heading\" id=\"footer-secondary-heading\">\n <slot name=\"nav-secondary-title\"></slot>\n </HeadingTag>\n </nav>\n\n <nav class=\"nav nav-tertiary\" aria-labelledby=\"footer-tertiary-heading\">\n <HeadingTag class=\"heading\" id=\"footer-tertiary-heading\">\n <slot name=\"nav-tertiary-title\"></slot>\n </HeadingTag>\n </nav>\n\n <div class=\"button-wrap\">\n <biggive-button colour-scheme=\"white\" url=\"https://biggive.org/charities\" label=\"For charities\"></biggive-button>\n <biggive-button colour-scheme=\"white\" url=\"https://biggive.org/funders\" label=\"For funders\"></biggive-button>\n </div>\n </div>\n\n <div class=\"row row-bottom\">\n <div class=\"postscript-wrap\">\n <img class=\"fr-logo\" src={getAssetPath('/assets/images/fundraising-regulator.png')} alt=\"Registered with FUNDRAISING REGULATOR\" />\n\n <nav class=\"nav nav-postscript\" aria-label=\"Legal\"></nav>\n </div>\n\n <div class=\"social-icon-wrap\">\n <slot name=\"social-icons\"></slot>\n </div>\n <p>© 2007 – {this.year} The Big Give Trust (1136547) \| Company number 07273065 \| Dragon Court, 27-29 Macklin Street, London WC2B 5LX, United Kingdom</p>\n </div>\n </footer>\n );\n };\n\n const presetFooter = () => {\n return (\n <footer class=\"footer\">\n <div class=\"row row-top\">\n <nav class=\"nav nav-primary\" aria-labelledby=\"footer-primary-heading\">\n <HeadingTag class=\"heading\" id=\"footer-primary-heading\">\n <div slot=\"nav-primary-title\">Match Funding Opportunities</div>\n </HeadingTag>\n <ul slot=\"nav-primary\">\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'christmas-challenge')} class=\"icon-christmas\">\n Christmas Challenge\n </a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'green-match-fund')} class=\"icon-green\">\n Green Match Fund\n </a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'champions-for-children')} class=\"icon-children\">\n Champions for Children\n </a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'women-girls-match-fund')} class=\"icon-women-girls\">\n Women and Girls Match Fund\n </a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'kind2mind/')} class=\"icon-mental-health\">\n Kind²Mind\n </a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'artsforimpact')} class=\"icon-arts\">\n Arts for Impact\n </a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'emergency-campaigns/')} class=\"icon-emergency\">\n Emergency Match Fund\n </a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'run-your-own-campaign/)')}>Run your own campaign</a>\n </li>\n </ul>\n </nav>\n\n <nav class=\"nav nav-secondary\" aria-labelledby=\"footer-secondary-heading-heading\">\n <HeadingTag class=\"heading\" id=\"footer-secondary-heading\">\n <div slot=\"nav-secondary-title\">Resources</div>\n </HeadingTag>\n <ul slot=\"nav-secondary\">\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'case-studies')}>Case Studies</a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'blog')}>Blog</a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'reports-insights')}>Reports & Insights</a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'press')}>Press</a>\n </li>\n </ul>\n </nav>\n\n <nav class=\"nav nav-tertiary\" aria-labelledby=\"footer-tertiary-heading\">\n <HeadingTag class=\"heading\" id=\"footer-tertiary-heading\">\n <div slot=\"nav-tertiary-title\">About</div>\n </HeadingTag>\n <ul slot=\"nav-tertiary\">\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'support')}>Support</a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'our-story')}>Our Story</a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'our-people')}>Our People</a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'donation-funds')}>Donate by Bank Transfer</a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'our-fees')}>Our Fees</a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'careers')}>Careers</a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'faqs')}>FAQs</a>\n </li>\n </ul>\n </nav>\n\n <div class=\"button-wrap\">\n <biggive-button colour-scheme=\"white\" url={makeURL('Blog', this.blogUrlPrefix, 'charities')} label=\"For charities\"></biggive-button>\n <biggive-button colour-scheme=\"white\" url={makeURL('Blog', this.blogUrlPrefix, 'funders')} label=\"For funders\"></biggive-button>\n </div>\n </div>\n\n <div class=\"row row-bottom\">\n <div class=\"postscript-wrap\">\n <img class=\"fr-logo\" src={getAssetPath('/assets/images/fundraising-regulator.png')} alt=\"Registered with FUNDRAISING REGULATOR\" />\n\n <nav class=\"nav nav-postscript\" aria-label=\"Legal\">\n <ul slot=\"nav-postscript\">\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'terms-and-conditions')}>Terms and Conditions</a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'privacy')}>Privacy Statement</a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'privacy#cookies')}>Cookies Statement</a>\n </li>\n <li>\n <a href={makeURL('Donate', this.donateUrlPrefix, 'cookie-preferences')}>Cookies Preference Centre</a>\n </li>\n </ul>\n </nav>\n </div>\n\n <div class=\"social-icon-wrap\">\n <div slot=\"social-icons\">\n <biggive-social-icon\n service=\"Facebook\"\n url=\"https://www.facebook.com/BigGive.org\"\n background-colour=\"tertiary\"\n icon-colour=\"black\"\n wide={true}\n ></biggive-social-icon>\n <biggive-social-icon service=\"Twitter\" url=\"https://x.com/BigGive\" background-colour=\"tertiary\" icon-colour=\"black\" wide={true}></biggive-social-icon>\n <biggive-social-icon\n service=\"LinkedIn\"\n url=\"https://uk.linkedin.com/company/big-give\"\n background-colour=\"tertiary\"\n icon-colour=\"black\"\n wide={true}\n ></biggive-social-icon>\n <biggive-social-icon\n service=\"YouTube\"\n url=\"https://www.youtube.com/channel/UC9_wH1aaTuZurJ-F9R8GDcA\"\n background-colour=\"tertiary\"\n icon-colour=\"black\"\n wide={true}\n ></biggive-social-icon>\n <biggive-social-icon service=\"Instagram\" url=\"https://www.instagram.com/biggiveorg\" background-colour=\"tertiary\" icon-colour=\"black\"></biggive-social-icon>\n </div>\n </div>\n <p>© 2007 – {this.year} The Big Give Trust (1136547) \| Company number 07273065 \| Dragon Court, 27-29 Macklin Street, London WC2B 5LX, United Kingdom</p>\n </div>\n </footer>\n );\n };\n\n return this.usePresetFooter ? presetFooter() : slotBasedFooter();\n }\n}\n"],"version":3}
1	+ {"file":"biggive-footer.js","mappings":"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","names":["BiggiveFooter"],"sources":["src/components/biggive-footer/biggive-footer.scss?tag=biggive-footer&encapsulation=shadow","src/components/biggive-footer/biggive-footer.tsx"],"sourcesContent":[":host {\n display: contents;\n}\n\n.footer {\n @include standard-font();\n color: $colour-white;\n}\n\nnav {\n width: calc(33.3% - 20px);\n margin: 0;\n padding: 0;\n .heading {\n @include heading-5();\n border-bottom: 1px solid $colour-white;\n padding-bottom: $spacer-2;\n margin-bottom: $spacer-2;\n }\n ul {\n margin: 0;\n padding: 0;\n li {\n margin: 0;\n padding: 0;\n list-style-type: none;\n margin-top: 15px;\n }\n }\n}\n\nnav ul li a {\n color: $colour-white;\n text-decoration: none;\n // target all classes prefixed with 'icon-' so we don't repeat code\n &[class^='icon-'],\n &[class='icon-'] {\n padding-left: 20px;\n background-repeat: no-repeat;\n background-size: auto 10px;\n background-position: left center;\n }\n\n &.icon-green {\n background-image: url(/assets/images/triangles-combined-green-match-white.svg);\n }\n\n &.icon-children {\n background-image: url(/assets/images/triangles-combined-children-white.svg);\n }\n\n &.icon-christmas {\n background-image: url(/assets/images/triangles-combined-christmas-challenge-white.svg);\n }\n\n &.icon-green-match {\n background-image: url(/assets/images/triangles-combined-green-match-white.svg);\n }\n\n &.icon-women-girls {\n background-image: url(/assets/images/triangles-combined-women-girls-white.svg);\n }\n\n &.icon-mental-health {\n background-image: url(/assets/images/triangles-combined-mental-health-white.svg);\n }\n\n &.icon-anchor-match {\n background-image: url(/assets/images/triangles-combined-anchor-white.svg);\n }\n\n &.icon-emergency {\n background-image: url(/assets/images/triangles-combined-emergency-white.svg);\n }\n\n &.icon-arts {\n background-image: url(/assets/images/triangles-combined-arts-white.svg);\n }\n}\n\n.row-top {\n background-image: url(/assets/images/biggive-triangle-green.svg);\n background-repeat: no-repeat;\n background-size: auto 75px;\n background-position: $spacer-6 30px;\n background-color: $colour-primary-blue;\n padding: 100px $spacer-6 $spacer-6 $spacer-6;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n\n .button-wrap {\n margin-top: $spacer-6;\n width: 100%;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n }\n}\n\nfooter .row-bottom {\n background-color: $colour-black;\n padding: $spacer-6 $spacer-6 $spacer-3 $spacer-6;\n border-top: 1px solid $colour-white;\n\n .fr-logo {\n width: 135px;\n }\n\n .postscript-wrap {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n\n @media screen and (max-width: $screen-tablet-max) {\n flex-direction: column;\n }\n }\n\n .nav.nav-postscript {\n text-align: right;\n flex-grow: 1;\n\n @media screen and (max-width: $screen-tablet-max) {\n text-align: center;\n }\n }\n\n .nav-postscript li {\n display: inline-block;\n margin-left: 1rem;\n\n &:first-child {\n margin-left: 0;\n }\n\n @media screen and (max-width: $screen-tablet-max) {\n display: block;\n width: 100%;\n margin-left: 0;\n }\n }\n\n .social-icon-wrap {\n border-top: 1px solid $colour-white;\n padding-top: $spacer-4;\n margin-top: $spacer-4;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: $spacer-4;\n\n .social-icon-item {\n margin: 0 $spacer-3;\n }\n }\n\n p {\n text-align: center;\n }\n}\n\n@media screen and (max-width: $screen-tablet-max) {\n .row-top {\n padding: $spacer-3;\n }\n}\n\n@media screen and (max-width: $screen-tablet-max) {\n nav {\n width: 100%;\n margin-right: 0;\n margin-bottom: $spacer-4;\n }\n\n .row-top {\n background-size: auto 50px;\n padding-top: 80px;\n padding-left: 15px;\n background-position: 15px 30px;\n\n .button-wrap {\n width: 100% !important;\n }\n }\n}\n","import { Component, Element, getAssetPath, h, Prop } from '@stencil/core';\nimport { makeURL } from '../../util/helper-methods';\n\n@Component({\n tag: 'biggive-footer',\n styleUrl: 'biggive-footer.scss',\n shadow: true,\n})\nexport class BiggiveFooter {\n @Element() host: HTMLBiggiveFooterElement;\n\n @Prop() headingLevel: 1 \| 2 \| 3 \| 4 \| 5 \| 6 = 5;\n\n /*\n URL prefixes vary by environment, and components library is not best placed to know what they are, so we\n * take them as props\n /\n @Prop() donateUrlPrefix: string;\n @Prop() blogUrlPrefix: string \| undefined;\n @Prop() experienceUrlPrefix: string \| undefined;\n private year: string = new Date().getFullYear().toString();\n\n /\n Conditionally render footer menu:\n * hard-coded (preset) when set to true, dynamic (slot-based) when set to false\n */\n @Prop() usePresetFooter = false;\n\n private appendMenu(menuName: string) {\n var node = this.host.querySelector(`[slot=\"${menuName}\"]`);\n if (node !== null) {\n this.host!.shadowRoot!.querySelector(`.${menuName}`)!.appendChild(node);\n }\n }\n\n componentDidRender() {\n if (!this.usePresetFooter) {\n this.appendMenu('nav-primary');\n this.appendMenu('nav-secondary');\n this.appendMenu('nav-tertiary');\n this.appendMenu('nav-postscript');\n }\n }\n\n render() {\n const HeadingTag = `h${this.headingLevel}`;\n const slotBasedFooter = () => {\n return (\n <footer class=\"footer\">\n <div class=\"row row-top\">\n <nav class=\"nav nav-primary\" aria-labelledby=\"footer-primary-heading\">\n <HeadingTag class=\"heading\" id=\"footer-primary-heading\">\n <slot name=\"nav-primary-title\"></slot>\n </HeadingTag>\n </nav>\n\n <nav class=\"nav nav-secondary\" aria-labelledby=\"footer-secondary-heading-heading\">\n <HeadingTag class=\"heading\" id=\"footer-secondary-heading\">\n <slot name=\"nav-secondary-title\"></slot>\n </HeadingTag>\n </nav>\n\n <nav class=\"nav nav-tertiary\" aria-labelledby=\"footer-tertiary-heading\">\n <HeadingTag class=\"heading\" id=\"footer-tertiary-heading\">\n <slot name=\"nav-tertiary-title\"></slot>\n </HeadingTag>\n </nav>\n\n <div class=\"button-wrap\">\n <biggive-button colour-scheme=\"white\" url=\"https://biggive.org/charities\" label=\"For charities\"></biggive-button>\n <biggive-button colour-scheme=\"white\" url=\"https://biggive.org/funders\" label=\"For funders\"></biggive-button>\n </div>\n </div>\n\n <div class=\"row row-bottom\">\n <div class=\"postscript-wrap\">\n <img class=\"fr-logo\" src={getAssetPath('/assets/images/fundraising-regulator.png')} alt=\"Registered with FUNDRAISING REGULATOR\" />\n\n <nav class=\"nav nav-postscript\" aria-label=\"Legal\"></nav>\n </div>\n\n <div class=\"social-icon-wrap\">\n <slot name=\"social-icons\"></slot>\n </div>\n <p>© 2007 – {this.year} The Big Give Trust (1136547) \| Company number 07273065 \| Dragon Court, 27-29 Macklin Street, London WC2B 5LX, United Kingdom</p>\n </div>\n </footer>\n );\n };\n\n const presetFooter = () => {\n return (\n <footer class=\"footer\">\n <div class=\"row row-top\">\n <nav class=\"nav nav-primary\" aria-labelledby=\"footer-primary-heading\">\n <HeadingTag class=\"heading\" id=\"footer-primary-heading\">\n <div slot=\"nav-primary-title\">Match Funding Opportunities</div>\n </HeadingTag>\n <ul slot=\"nav-primary\">\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'christmas-challenge')} class=\"icon-christmas\">\n Christmas Challenge\n </a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'green-match-fund')} class=\"icon-green\">\n Green Match Fund\n </a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'champions-for-children')} class=\"icon-children\">\n Champions for Children\n </a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'women-girls-match-fund')} class=\"icon-women-girls\">\n Women and Girls Match Fund\n </a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'kind2mind/')} class=\"icon-mental-health\">\n Kind²Mind\n </a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'artsforimpact')} class=\"icon-arts\">\n Arts for Impact\n </a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'emergency-campaigns/')} class=\"icon-emergency\">\n Emergency Match Fund\n </a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'run-your-own-campaign/)')}>Run your own campaign</a>\n </li>\n </ul>\n </nav>\n\n <nav class=\"nav nav-secondary\" aria-labelledby=\"footer-secondary-heading-heading\">\n <HeadingTag class=\"heading\" id=\"footer-secondary-heading\">\n <div slot=\"nav-secondary-title\">Resources</div>\n </HeadingTag>\n <ul slot=\"nav-secondary\">\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'case-studies')}>Case Studies</a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'blog')}>Blog</a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'reports-insights')}>Reports & Insights</a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'press')}>Press</a>\n </li>\n </ul>\n </nav>\n\n <nav class=\"nav nav-tertiary\" aria-labelledby=\"footer-tertiary-heading\">\n <HeadingTag class=\"heading\" id=\"footer-tertiary-heading\">\n <div slot=\"nav-tertiary-title\">About</div>\n </HeadingTag>\n <ul slot=\"nav-tertiary\">\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'support')}>Support</a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'our-story')}>Our Story</a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'our-people')}>Our People</a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'donation-funds')}>Donate by Bank Transfer</a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'our-fees')}>Our Fees</a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'careers')}>Careers</a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'faqs')}>FAQs</a>\n </li>\n </ul>\n </nav>\n\n <div class=\"button-wrap\">\n <biggive-button colour-scheme=\"white\" url={makeURL('Blog', this.blogUrlPrefix, 'charities')} label=\"For charities\"></biggive-button>\n <biggive-button colour-scheme=\"white\" url={makeURL('Blog', this.blogUrlPrefix, 'funders')} label=\"For funders\"></biggive-button>\n </div>\n </div>\n\n <div class=\"row row-bottom\">\n <div class=\"postscript-wrap\">\n <img class=\"fr-logo\" src={getAssetPath('/assets/images/fundraising-regulator.png')} alt=\"Registered with FUNDRAISING REGULATOR\" />\n\n <nav class=\"nav nav-postscript\" aria-label=\"Legal\">\n <ul slot=\"nav-postscript\">\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'terms-and-conditions')}>Terms and Conditions</a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'privacy')}>Privacy Statement</a>\n </li>\n <li>\n <a href={makeURL('Blog', this.blogUrlPrefix, 'privacy#cookies')}>Cookies Statement</a>\n </li>\n <li>\n <a href={makeURL('Donate', this.donateUrlPrefix, 'cookie-preferences')}>Cookies Preference Centre</a>\n </li>\n </ul>\n </nav>\n </div>\n\n <div class=\"social-icon-wrap\">\n <div slot=\"social-icons\">\n <biggive-social-icon\n service=\"Facebook\"\n url=\"https://www.facebook.com/BigGive.org\"\n background-colour=\"tertiary\"\n icon-colour=\"black\"\n wide={true}\n ></biggive-social-icon>\n <biggive-social-icon service=\"Twitter\" url=\"https://x.com/BigGive\" background-colour=\"tertiary\" icon-colour=\"black\" wide={true}></biggive-social-icon>\n <biggive-social-icon\n service=\"LinkedIn\"\n url=\"https://uk.linkedin.com/company/big-give\"\n background-colour=\"tertiary\"\n icon-colour=\"black\"\n wide={true}\n ></biggive-social-icon>\n <biggive-social-icon\n service=\"YouTube\"\n url=\"https://www.youtube.com/channel/UC9_wH1aaTuZurJ-F9R8GDcA\"\n background-colour=\"tertiary\"\n icon-colour=\"black\"\n wide={true}\n ></biggive-social-icon>\n <biggive-social-icon service=\"Instagram\" url=\"https://www.instagram.com/biggiveorg\" background-colour=\"tertiary\" icon-colour=\"black\"></biggive-social-icon>\n </div>\n </div>\n <p>© 2007 – {this.year} The Big Give Trust (1136547) \| Company number 07273065 \| Dragon Court, 27-29 Macklin Street, London WC2B 5LX, United Kingdom</p>\n </div>\n </footer>\n );\n };\n\n return this.usePresetFooter ? presetFooter() : slotBasedFooter();\n }\n}\n"],"version":3}

package/dist/components/biggive-form-field-select2.js CHANGED Viewed

@@ -8,22 +8,18 @@ const BiggiveFormFieldSelect = /*@__PURE__*/ proxyCustomElement(class BiggiveFor
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.selectStyle = 'bordered';
+        this.selectedOptionColour = 'blue';
         this.doOptionSelectCompletedHandler = (event) => {
             const value = event.target.value;
             this.selectedValue = value;
             this.selectedLabel = event.target.label;
             this.selectionChanged(value);
         };
-        this.selectionChanged = undefined;
-        this.prompt = undefined;
-        this.selectedValue = undefined;
-        this.selectedLabel = undefined;
-        this.options = undefined;
-        this.selectStyle = 'bordered';
-        this.backgroundColour = undefined;
-        this.selectedOptionColour = 'blue';
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
-        this.placeholder = undefined;
     }
     render() {
         const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';

package/dist/components/biggive-form-field-select2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"biggive-form-field-select2.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,+vHAA+vH,CAAC;AAClyH,qCAAe,yBAAyB;;MCM3B,sBAAsB~~;;;;;QA0BzB~~,mCAA8B,GAAG,CAAC,KAAU;YAClD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACjC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACxC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;SAC9B,CAAC~~;;;;;;2BAd+C~~,~~UAAU;;oCAOR~~,~~MAAM;0BAY5B~~,CAAC~~;;;IAM9B~~,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,gBAAgB,KAAK,MAAM,GAAG,OAAO,GAAG,EAAE,CAAC;QAEvE,IAAI,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAE/C,IAAI,OAAO,IAAI,CAAC,WAAW,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,aAAa,KAAK,QAAQ,EAAE;YAClF,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,GAAG,OAAO,CAAC,CAAC;SAC/E;QAED,IAAI,OAAO,OAAO,KAAK,WAAW,EAAE;YAClC,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO,GAAG,EAAE,CAAC;SACd;QAED,QACE,4DAAK,KAAK,EAAC,eAAe,IACxB,8DAAO,KAAK,EAAE,cAAc,IAC1B,4DAAK,KAAK,EAAE,QAAQ,GAAG,cAAc,IAAG,IAAI,CAAC,MAAM,CAAO,EAC1D,4DACE,KAAK,EACH,uBAAuB;gBACvB,IAAI,CAAC,UAAU;gBACf,gBAAgB;gBAChB,IAAI,CAAC,WAAW;iBACf,IAAI,CAAC,MAAM,KAAK,IAAI,GAAG,YAAY,GAAG,EAAE,CAAC;iBACzC,IAAI,CAAC,oBAAoB,KAAK,SAAS,GAAG,iBAAiB,GAAG,EAAE,CAAC,IAGpE,4DAAK,KAAK,EAAC,QAAQ,IACjB,+DAAQ,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,IAAI,CAAC,8BAA8B,IACzE,OAAO,CAAC,GAAG,CAAC,MAAM,KACjB,cAAQ,QAAQ,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,IACvE,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACK,EACT,4DAAK,KAAK,EAAC,OAAO,GAAO,CACrB,CACF,CACA,CACJ,EACN;KACH;IAEO,aAAa,CAAC,OAAyD;QAI7E,IAAI,OAAO,KAAK,SAAS,EAAE;YACzB,OAAO,EAAE,CAAC;SACX;QAED,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;YAC/B,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;SAC/B;QAED,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YAC1B,OAAO,OAAO,CAAC;SAChB;QAED,OAAO,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,KAAK,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;KACrF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/biggive-form-field-select/biggive-form-field-select.scss?tag=biggive-form-field-select&encapsulation=shadow","src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"sourcesContent":["@include spacers();\n\n// Includes CSS taken from https://moderncss.dev/custom-select-styles-with-pure-css/\n\n:host {\n display: contents;\n}\n\n,\n::before,\n::after {\n box-sizing: border-box;\n}\n\nselect {\n appearance: none;\n border: none;\n padding: 0 1em 0 0;\n margin: 0;\n width: 100%;\n font-family: inherit;\n font-size: inherit;\n cursor: inherit;\n line-height: inherit;\n outline: none;\n display: grid;\n background-color: $colour-white;\n align-items: center;\n}\nselect.grey {\n background-color: $colour-grey-background;\n}\n.selectWrapper {\n position: relative;\n}\n.prompt {\n position: absolute;\n z-index: 2;\n font-size: small;\n top: -1em;\n background-color: $colour-white;\n left: 4em;\n padding-left: 1em;\n padding-right: 1em;\n color: $colour-primary-blue;\n}\n.prompt.grey {\n background-color: $colour-grey-background;\n}\n\n.dropdown {\n @include standard-font();\n position: relative;\n text-align: left;\n &.select-style-bordered {\n .sleeve {\n @include font-size-medium();\n padding: 2px;\n position: relative;\n background-color: $colour-primary-blue;\n @include corner-clip-small-top-right();\n select {\n color: $colour-primary-blue;\n display: block;\n position: relative;\n padding: 10px 80px 10px 10px;\n clip-path:\n polygon(\n 0% 0%, / top left /\n 0% 0%, / top left /\n calc(100% - 14px) 0%, / top right /\n 100% 14px, / top right /\n 100% 100%, / bottom right /\n 100% 100%, / bottom right /\n 0 100%, / bottom left /\n 0 100% / bottom left /\n );\n span.placeholder.grey {\n background-color: $colour-grey-background;\n }\n }\n div.arrow {\n position: absolute;\n right: 20px;\n top: 18px;\n width: 10px;\n height: 10px;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center center;\n z-index: 1;\n pointer-events: none;\n }\n }\n .sleeve:focus-within {\n background-color: $colour-tertiary-coral;\n }\n }\n &.select-style-underlined {\n .sleeve {\n @include dropdown-underlined();\n }\n }\n &.inherit-colour select{\n color: inherit !important;\n }\n\n select {\n max-height: 200px;\n overflow-x: hidden;\n overflow-y: scroll;\n width: 100%;\n z-index: 1;\n left: 0;\n right: 0;\n }\n &.active .options {\n display: block;\n }\n}\n.dropdown.noprompt {\n margin-top: 0;\n}\n.options.grey {\n background-color: $colour-grey-background;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'biggive-form-field-select',\n styleUrl: 'biggive-form-field-select.scss',\n shadow: true,\n})\nexport class BiggiveFormFieldSelect {\n @Element() el: HTMLBiggiveFormFieldSelectElement;\n\n @Prop() selectionChanged: (value: string) => void;\n\n /\n Displayed as 'eyebrow' label over the top border of the box.\n /\n @Prop() prompt!: string \| null;\n\n @Prop({ mutable: true }) selectedValue: string \| null;\n @Prop({ mutable: true }) selectedLabel: string \| null;\n\n /\n JSON array of label+value objects, or takes a stringified equiavalent (for Storybook)\n /\n @Prop() options!: string \| Array<{ label: string; value: string }>;\n @Prop() selectStyle: 'bordered' \| 'underlined' = 'bordered';\n\n /\n Must match background of containing element, or unintended shape will appear.\n /\n @Prop() backgroundColour: 'white' \| 'grey';\n\n @Prop() selectedOptionColour: 'inherit' \| 'blue' = 'blue';\n\n private doOptionSelectCompletedHandler = (event: any) => {\n const value = event.target.value;\n this.selectedValue = value;\n this.selectedLabel = event.target.label;\n this.selectionChanged(value);\n };\n\n /\n Space below component\n /\n @Prop() spaceBelow: number = 0;\n /\n Placeholder\n */\n @Prop() placeholder: string \| undefined;\n\n render() {\n const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';\n\n let options = this.formatOptions(this.options);\n\n if (typeof this.placeholder === 'string' && typeof this.selectedValue !== 'string') {\n options = [{ value: '__placeholder__', label: this.placeholder }, ...options];\n }\n\n if (typeof options === 'undefined') {\n console.error('options undefined');\n options = [];\n }\n\n return (\n <div class=\"selectWrapper\">\n <label class={greyIfRequired}>\n <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n <div\n class={\n 'dropdown space-below-' +\n this.spaceBelow +\n ' select-style-' +\n this.selectStyle +\n (this.prompt === null ? ' noprompt' : '') +\n (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '')\n }\n >\n <div class=\"sleeve\">\n <select class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler}>\n {options.map(option => (\n <option selected={this.selectedValue === option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n <div class=\"arrow\"></div>\n </div>\n </div>\n </label>\n </div>\n );\n }\n\n private formatOptions(options: string \| Array<{ label: string; value: string }>): {\n label: string;\n value: string;\n }[] {\n if (options === undefined) {\n return [];\n }\n\n if (typeof options === 'string') {\n options = JSON.parse(options);\n }\n\n if (Array.isArray(options)) {\n return options;\n }\n\n return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));\n }\n}\n"],"version":3}
1	+ {"file":"biggive-form-field-select2.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,+vHAA+vH,CAAC;AAClyH,qCAAe,yBAAyB;;MCM3B,sBAAsB;IALnC;;;;QAsBU,gBAAW,GAA8B,UAAU,CAAC;QAOpD,yBAAoB,GAAuB,MAAM,CAAC;QAElD,mCAA8B,GAAG,CAAC,KAAU;YAClD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACjC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACxC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;SAC9B,CAAC;;;;QAKM,eAAU,GAAW,CAAC,CAAC;KAoEhC;IA9DC,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,gBAAgB,KAAK,MAAM,GAAG,OAAO,GAAG,EAAE,CAAC;QAEvE,IAAI,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAE/C,IAAI,OAAO,IAAI,CAAC,WAAW,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,aAAa,KAAK,QAAQ,EAAE;YAClF,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,GAAG,OAAO,CAAC,CAAC;SAC/E;QAED,IAAI,OAAO,OAAO,KAAK,WAAW,EAAE;YAClC,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO,GAAG,EAAE,CAAC;SACd;QAED,QACE,4DAAK,KAAK,EAAC,eAAe,IACxB,8DAAO,KAAK,EAAE,cAAc,IAC1B,4DAAK,KAAK,EAAE,QAAQ,GAAG,cAAc,IAAG,IAAI,CAAC,MAAM,CAAO,EAC1D,4DACE,KAAK,EACH,uBAAuB;gBACvB,IAAI,CAAC,UAAU;gBACf,gBAAgB;gBAChB,IAAI,CAAC,WAAW;iBACf,IAAI,CAAC,MAAM,KAAK,IAAI,GAAG,YAAY,GAAG,EAAE,CAAC;iBACzC,IAAI,CAAC,oBAAoB,KAAK,SAAS,GAAG,iBAAiB,GAAG,EAAE,CAAC,IAGpE,4DAAK,KAAK,EAAC,QAAQ,IACjB,+DAAQ,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,IAAI,CAAC,8BAA8B,IACzE,OAAO,CAAC,GAAG,CAAC,MAAM,KACjB,cAAQ,QAAQ,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,IACvE,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACK,EACT,4DAAK,KAAK,EAAC,OAAO,GAAO,CACrB,CACF,CACA,CACJ,EACN;KACH;IAEO,aAAa,CAAC,OAAyD;QAI7E,IAAI,OAAO,KAAK,SAAS,EAAE;YACzB,OAAO,EAAE,CAAC;SACX;QAED,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;YAC/B,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;SAC/B;QAED,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YAC1B,OAAO,OAAO,CAAC;SAChB;QAED,OAAO,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,KAAK,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;KACrF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/biggive-form-field-select/biggive-form-field-select.scss?tag=biggive-form-field-select&encapsulation=shadow","src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"sourcesContent":["@include spacers();\n\n// Includes CSS taken from https://moderncss.dev/custom-select-styles-with-pure-css/\n\n:host {\n display: contents;\n}\n\n,\n::before,\n::after {\n box-sizing: border-box;\n}\n\nselect {\n appearance: none;\n border: none;\n padding: 0 1em 0 0;\n margin: 0;\n width: 100%;\n font-family: inherit;\n font-size: inherit;\n cursor: inherit;\n line-height: inherit;\n outline: none;\n display: grid;\n background-color: $colour-white;\n align-items: center;\n}\nselect.grey {\n background-color: $colour-grey-background;\n}\n.selectWrapper {\n position: relative;\n}\n.prompt {\n position: absolute;\n z-index: 2;\n font-size: small;\n top: -1em;\n background-color: $colour-white;\n left: 4em;\n padding-left: 1em;\n padding-right: 1em;\n color: $colour-primary-blue;\n}\n.prompt.grey {\n background-color: $colour-grey-background;\n}\n\n.dropdown {\n @include standard-font();\n position: relative;\n text-align: left;\n &.select-style-bordered {\n .sleeve {\n @include font-size-medium();\n padding: 2px;\n position: relative;\n background-color: $colour-primary-blue;\n @include corner-clip-small-top-right();\n select {\n color: $colour-primary-blue;\n display: block;\n position: relative;\n padding: 10px 80px 10px 10px;\n clip-path:\n polygon(\n 0% 0%, / top left /\n 0% 0%, / top left /\n calc(100% - 14px) 0%, / top right /\n 100% 14px, / top right /\n 100% 100%, / bottom right /\n 100% 100%, / bottom right /\n 0 100%, / bottom left /\n 0 100% / bottom left /\n );\n span.placeholder.grey {\n background-color: $colour-grey-background;\n }\n }\n div.arrow {\n position: absolute;\n right: 20px;\n top: 18px;\n width: 10px;\n height: 10px;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center center;\n z-index: 1;\n pointer-events: none;\n }\n }\n .sleeve:focus-within {\n background-color: $colour-tertiary-coral;\n }\n }\n &.select-style-underlined {\n .sleeve {\n @include dropdown-underlined();\n }\n }\n &.inherit-colour select{\n color: inherit !important;\n }\n\n select {\n max-height: 200px;\n overflow-x: hidden;\n overflow-y: scroll;\n width: 100%;\n z-index: 1;\n left: 0;\n right: 0;\n }\n &.active .options {\n display: block;\n }\n}\n.dropdown.noprompt {\n margin-top: 0;\n}\n.options.grey {\n background-color: $colour-grey-background;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'biggive-form-field-select',\n styleUrl: 'biggive-form-field-select.scss',\n shadow: true,\n})\nexport class BiggiveFormFieldSelect {\n @Element() el: HTMLBiggiveFormFieldSelectElement;\n\n @Prop() selectionChanged: (value: string) => void;\n\n /\n Displayed as 'eyebrow' label over the top border of the box.\n /\n @Prop() prompt!: string \| null;\n\n @Prop({ mutable: true }) selectedValue: string \| null;\n @Prop({ mutable: true }) selectedLabel: string \| null;\n\n /\n JSON array of label+value objects, or takes a stringified equiavalent (for Storybook)\n /\n @Prop() options!: string \| Array<{ label: string; value: string }>;\n @Prop() selectStyle: 'bordered' \| 'underlined' = 'bordered';\n\n /\n Must match background of containing element, or unintended shape will appear.\n /\n @Prop() backgroundColour: 'white' \| 'grey';\n\n @Prop() selectedOptionColour: 'inherit' \| 'blue' = 'blue';\n\n private doOptionSelectCompletedHandler = (event: any) => {\n const value = event.target.value;\n this.selectedValue = value;\n this.selectedLabel = event.target.label;\n this.selectionChanged(value);\n };\n\n /\n Space below component\n /\n @Prop() spaceBelow: number = 0;\n /\n Placeholder\n */\n @Prop() placeholder: string \| undefined;\n\n render() {\n const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';\n\n let options = this.formatOptions(this.options);\n\n if (typeof this.placeholder === 'string' && typeof this.selectedValue !== 'string') {\n options = [{ value: '__placeholder__', label: this.placeholder }, ...options];\n }\n\n if (typeof options === 'undefined') {\n console.error('options undefined');\n options = [];\n }\n\n return (\n <div class=\"selectWrapper\">\n <label class={greyIfRequired}>\n <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n <div\n class={\n 'dropdown space-below-' +\n this.spaceBelow +\n ' select-style-' +\n this.selectStyle +\n (this.prompt === null ? ' noprompt' : '') +\n (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '')\n }\n >\n <div class=\"sleeve\">\n <select class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler}>\n {options.map(option => (\n <option selected={this.selectedValue === option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n <div class=\"arrow\"></div>\n </div>\n </div>\n </label>\n </div>\n );\n }\n\n private formatOptions(options: string \| Array<{ label: string; value: string }>): {\n label: string;\n value: string;\n }[] {\n if (options === undefined) {\n return [];\n }\n\n if (typeof options === 'string') {\n options = JSON.parse(options);\n }\n\n if (Array.isArray(options)) {\n return options;\n }\n\n return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));\n }\n}\n"],"version":3}

package/dist/components/biggive-formatted-text.js CHANGED Viewed

@@ -8,8 +8,17 @@ const BiggiveFormattedText$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveFor
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Default text colour
+         */
         this.defaultTextColour = 'primary';
+        /**
+         * Width
+         */
         this.maxWidth = 100;
     }
     render() {

package/dist/components/biggive-formatted-text.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"biggive-formatted-text.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,4zHAA4zH,CAAC;AAC71H,mCAAe,uBAAuB;;MCMzBA,sBAAoB~~;;;;;0BAIF~~,CAAC~~;iCAIM~~,SAAS~~;wBAKlB~~,GAAG~~;;IAE9B~~,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,sBAAsB,GAAG,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,IAAI,CAAC,iBAAiB,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAC/H,8DAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveFormattedText"],"sources":["src/components/biggive-formatted-text/biggive-formatted-text.scss?tag=biggive-formatted-text&encapsulation=shadow","src/components/biggive-formatted-text/biggive-formatted-text.tsx"],"sourcesContent":["@include spacers();\n@include text-colours();\n\n:host {\n display: block;\n}\n\n.container {\n @include standard-font();\n img {\n width: 100%;\n height: auto;\n }\n a {\n color: inherit;\n text-decoration: underline;\n }\n &.max-width-10 .sleeve { @include max-width-10(); }\n &.max-width-15 .sleeve { @include max-width-15(); }\n &.max-width-20 .sleeve { @include max-width-20(); }\n &.max-width-25 .sleeve { @include max-width-25(); }\n &.max-width-30 .sleeve { @include max-width-30(); }\n &.max-width-35 .sleeve { @include max-width-35(); }\n &.max-width-40 .sleeve { @include max-width-40(); }\n &.max-width-45 .sleeve { @include max-width-45(); }\n &.max-width-50 .sleeve { @include max-width-50(); }\n &.max-width-55 .sleeve { @include max-width-55(); }\n &.max-width-60 .sleeve { @include max-width-60(); }\n &.max-width-65 .sleeve { @include max-width-65(); }\n &.max-width-70 .sleeve { @include max-width-70(); }\n &.max-width-75 .sleeve { @include max-width-75(); }\n &.max-width-80 .sleeve { @include max-width-80(); }\n &.max-width-85 .sleeve { @include max-width-85(); }\n &.max-width-90 .sleeve { @include max-width-90(); }\n &.max-width-95 .sleeve { @include max-width-95(); }\n}\n\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'biggive-formatted-text',\n styleUrl: 'biggive-formatted-text.scss',\n shadow: true,\n})\nexport class BiggiveFormattedText {\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 Width\n */\n @Prop() maxWidth: number = 100;\n\n render() {\n return (\n <div class={'container max-width-' + this.maxWidth + ' text-colour-' + this.defaultTextColour + ' space-below-' + this.spaceBelow}>\n <slot></slot>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"biggive-formatted-text.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,4zHAA4zH,CAAC;AAC71H,mCAAe,uBAAuB;;MCMzBA,sBAAoB;IALjC;;;;;;;QASU,eAAU,GAAW,CAAC,CAAC;;;;QAIvB,sBAAiB,GAAW,SAAS,CAAC;;;;QAKtC,aAAQ,GAAW,GAAG,CAAC;KAShC;IAPC,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,sBAAsB,GAAG,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,IAAI,CAAC,iBAAiB,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAC/H,8DAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveFormattedText"],"sources":["src/components/biggive-formatted-text/biggive-formatted-text.scss?tag=biggive-formatted-text&encapsulation=shadow","src/components/biggive-formatted-text/biggive-formatted-text.tsx"],"sourcesContent":["@include spacers();\n@include text-colours();\n\n:host {\n display: block;\n}\n\n.container {\n @include standard-font();\n img {\n width: 100%;\n height: auto;\n }\n a {\n color: inherit;\n text-decoration: underline;\n }\n &.max-width-10 .sleeve { @include max-width-10(); }\n &.max-width-15 .sleeve { @include max-width-15(); }\n &.max-width-20 .sleeve { @include max-width-20(); }\n &.max-width-25 .sleeve { @include max-width-25(); }\n &.max-width-30 .sleeve { @include max-width-30(); }\n &.max-width-35 .sleeve { @include max-width-35(); }\n &.max-width-40 .sleeve { @include max-width-40(); }\n &.max-width-45 .sleeve { @include max-width-45(); }\n &.max-width-50 .sleeve { @include max-width-50(); }\n &.max-width-55 .sleeve { @include max-width-55(); }\n &.max-width-60 .sleeve { @include max-width-60(); }\n &.max-width-65 .sleeve { @include max-width-65(); }\n &.max-width-70 .sleeve { @include max-width-70(); }\n &.max-width-75 .sleeve { @include max-width-75(); }\n &.max-width-80 .sleeve { @include max-width-80(); }\n &.max-width-85 .sleeve { @include max-width-85(); }\n &.max-width-90 .sleeve { @include max-width-90(); }\n &.max-width-95 .sleeve { @include max-width-95(); }\n}\n\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'biggive-formatted-text',\n styleUrl: 'biggive-formatted-text.scss',\n shadow: true,\n})\nexport class BiggiveFormattedText {\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 Width\n */\n @Prop() maxWidth: number = 100;\n\n render() {\n return (\n <div class={'container max-width-' + this.maxWidth + ' text-colour-' + this.defaultTextColour + ' space-below-' + this.spaceBelow}>\n <slot></slot>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/biggive-generic-icon2.js CHANGED Viewed

@@ -10,9 +10,6 @@ const BiggiveGenericIcon = /*@__PURE__*/ proxyCustomElement(class BiggiveGeneric
         this.__registerHost();
         this.backgroundColour = 'primary';
         this.iconColour = 'white';
-        this.iconGroup = undefined;
-        this.icon = undefined;
-        this.url = undefined;
     }
     getIconDefinition() {
         let iconDefinition;

package/dist/components/biggive-generic-icon2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"biggive-generic-icon2.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,+3QAA+3Q,CAAC;AAC95Q,iCAAe,qBAAqB;;MCSvB,kBAAkB~~;;;;gCACW~~,SAAS;~~0BAEf~~,OAAO~~;;;;;IAQjC~~,iBAAiB;QACvB,IAAI,cAAc,CAAC;QACnB,IAAI,IAAI,CAAC,SAAS,IAAI,aAAa,EAAE;YACnC,cAAc,GAAG,uBAAuB,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACxE;aAAM,IAAI,IAAI,CAAC,SAAS,IAAI,MAAM,EAAE;YACnC,cAAc,GAAG,uBAAuB,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACjE;aAAM,IAAI,IAAI,CAAC,SAAS,IAAI,QAAQ,EAAE;YACrC,cAAc,GAAG,uBAAuB,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACnE;aAAM,IAAI,IAAI,CAAC,SAAS,IAAI,UAAU,EAAE;YACvC,cAAc,GAAG,uBAAuB,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACrE;QACD,OAAO,cAAc,CAAC;KACvB;IAED,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAEhD;;QAEE,4DAAK,KAAK,EAAE,sCAAsC,GAAG,IAAI,CAAC,gBAAgB,GAAG,GAAG,GAAG,IAAI,CAAC,IAAI,IAC1F,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IACd,cAAc,IACb,WACE,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,EAC7B,MAAM,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,EAC9B,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC,UAAU,EAChC,OAAO,EAAE,MAAM,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,IAEvE,YAAM,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAI,CAC1C,IACJ,IAAI,CACN,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/biggive-generic-icon/biggive-generic-icon.scss?tag=biggive-generic-icon","src/components/biggive-generic-icon/biggive-generic-icon.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n\n:host {\n display: contents;\n}\n\n.generic-icon-item {\n @include icon-large();\n\n @media screen and (max-width: $screen-mobile-max) {\n @include icon-medium();\n margin: auto;\n\n a {\n margin: auto;\n }\n }\n}\n\n.CaretRight {\n height: 10px;\n width: 10px;\n margin-right: 0px;\n a {\n padding: 0px;\n }\n}\n\n.MenuClose {\n a {\n svg {\n height: 12px;\n width: 12px;\n }\n }\n}\n","import { IconDefinition } from '@fortawesome/fontawesome-svg-core';\nimport { Component, Prop, h } from '@stencil/core';\nimport { FontAwesomeIconsService } from '../../util/fontawesome-icons';\nimport { brandColour } from '../../globals/brand-colour';\n\n@Component({\n tag: 'biggive-generic-icon',\n styleUrl: 'biggive-generic-icon.scss',\n shadow: false,\n})\nexport class BiggiveGenericIcon {\n @Prop() backgroundColour: brandColour = 'primary';\n\n @Prop() iconColour: brandColour = 'white';\n\n @Prop() iconGroup: 'beneficiary' \| 'misc' \| 'social' \| 'category';\n\n @Prop() icon: string;\n\n @Prop() url: string;\n\n private getIconDefinition(): IconDefinition \| undefined {\n let iconDefinition;\n if (this.iconGroup == 'beneficiary') {\n iconDefinition = FontAwesomeIconsService.getBeneficiaryIcon(this.icon);\n } else if (this.iconGroup == 'misc') {\n iconDefinition = FontAwesomeIconsService.getMiscIcon(this.icon);\n } else if (this.iconGroup == 'social') {\n iconDefinition = FontAwesomeIconsService.getSocialIcon(this.icon);\n } else if (this.iconGroup == 'category') {\n iconDefinition = FontAwesomeIconsService.getCategoryIcon(this.icon);\n }\n return iconDefinition;\n }\n\n render() {\n const iconDefinition = this.getIconDefinition();\n\n return (\n // Note: the icon name prop is set as a css class too for any styling specific to certain icons\n <div class={'generic-icon-item background-colour-' + this.backgroundColour + ' ' + this.icon}>\n <a href={this.url}>\n {iconDefinition ? (\n <svg\n width={iconDefinition.icon[0]}\n height={iconDefinition.icon[1]}\n xmlns=\"http://www.w3.org/2000/svg\"\n class={'fill-' + this.iconColour}\n viewBox={'0 0 ' + iconDefinition.icon[0] + ' ' + iconDefinition.icon[1]}\n >\n <path d={iconDefinition.icon[4].toString()} />\n </svg>\n ) : null}\n </a>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"biggive-generic-icon2.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,+3QAA+3Q,CAAC;AAC95Q,iCAAe,qBAAqB;;MCSvB,kBAAkB;IAL/B;;;QAMU,qBAAgB,GAAgB,SAAS,CAAC;QAE1C,eAAU,GAAgB,OAAO,CAAC;KA4C3C;IApCS,iBAAiB;QACvB,IAAI,cAAc,CAAC;QACnB,IAAI,IAAI,CAAC,SAAS,IAAI,aAAa,EAAE;YACnC,cAAc,GAAG,uBAAuB,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACxE;aAAM,IAAI,IAAI,CAAC,SAAS,IAAI,MAAM,EAAE;YACnC,cAAc,GAAG,uBAAuB,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACjE;aAAM,IAAI,IAAI,CAAC,SAAS,IAAI,QAAQ,EAAE;YACrC,cAAc,GAAG,uBAAuB,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACnE;aAAM,IAAI,IAAI,CAAC,SAAS,IAAI,UAAU,EAAE;YACvC,cAAc,GAAG,uBAAuB,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACrE;QACD,OAAO,cAAc,CAAC;KACvB;IAED,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAEhD;;QAEE,4DAAK,KAAK,EAAE,sCAAsC,GAAG,IAAI,CAAC,gBAAgB,GAAG,GAAG,GAAG,IAAI,CAAC,IAAI,IAC1F,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IACd,cAAc,IACb,WACE,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,EAC7B,MAAM,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,EAC9B,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC,UAAU,EAChC,OAAO,EAAE,MAAM,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,IAEvE,YAAM,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAI,CAC1C,IACJ,IAAI,CACN,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/biggive-generic-icon/biggive-generic-icon.scss?tag=biggive-generic-icon","src/components/biggive-generic-icon/biggive-generic-icon.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n\n:host {\n display: contents;\n}\n\n.generic-icon-item {\n @include icon-large();\n\n @media screen and (max-width: $screen-mobile-max) {\n @include icon-medium();\n margin: auto;\n\n a {\n margin: auto;\n }\n }\n}\n\n.CaretRight {\n height: 10px;\n width: 10px;\n margin-right: 0px;\n a {\n padding: 0px;\n }\n}\n\n.MenuClose {\n a {\n svg {\n height: 12px;\n width: 12px;\n }\n }\n}\n","import { IconDefinition } from '@fortawesome/fontawesome-svg-core';\nimport { Component, Prop, h } from '@stencil/core';\nimport { FontAwesomeIconsService } from '../../util/fontawesome-icons';\nimport { brandColour } from '../../globals/brand-colour';\n\n@Component({\n tag: 'biggive-generic-icon',\n styleUrl: 'biggive-generic-icon.scss',\n shadow: false,\n})\nexport class BiggiveGenericIcon {\n @Prop() backgroundColour: brandColour = 'primary';\n\n @Prop() iconColour: brandColour = 'white';\n\n @Prop() iconGroup: 'beneficiary' \| 'misc' \| 'social' \| 'category';\n\n @Prop() icon: string;\n\n @Prop() url: string;\n\n private getIconDefinition(): IconDefinition \| undefined {\n let iconDefinition;\n if (this.iconGroup == 'beneficiary') {\n iconDefinition = FontAwesomeIconsService.getBeneficiaryIcon(this.icon);\n } else if (this.iconGroup == 'misc') {\n iconDefinition = FontAwesomeIconsService.getMiscIcon(this.icon);\n } else if (this.iconGroup == 'social') {\n iconDefinition = FontAwesomeIconsService.getSocialIcon(this.icon);\n } else if (this.iconGroup == 'category') {\n iconDefinition = FontAwesomeIconsService.getCategoryIcon(this.icon);\n }\n return iconDefinition;\n }\n\n render() {\n const iconDefinition = this.getIconDefinition();\n\n return (\n // Note: the icon name prop is set as a css class too for any styling specific to certain icons\n <div class={'generic-icon-item background-colour-' + this.backgroundColour + ' ' + this.icon}>\n <a href={this.url}>\n {iconDefinition ? (\n <svg\n width={iconDefinition.icon[0]}\n height={iconDefinition.icon[1]}\n xmlns=\"http://www.w3.org/2000/svg\"\n class={'fill-' + this.iconColour}\n viewBox={'0 0 ' + iconDefinition.icon[0] + ' ' + iconDefinition.icon[1]}\n >\n <path d={iconDefinition.icon[4].toString()} />\n </svg>\n ) : null}\n </a>\n </div>\n );\n }\n}\n"],"version":3}

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-' +