npm - @biggive/components - Versions diffs - 202411061640.0.0 → 202411071423.0.0 - Mend

@biggive/components 202411061640.0.0 → 202411071423.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 (16) hide show

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

@@ -36,6 +36,9 @@ export class BiggiveFormFieldSelect {
                 (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '') }, h("div", { key: '63beb631b161db5ffe16158430af3d1eede56130', class: "sleeve" }, h("select", { key: '153a730cbf15eb1571c44e855dccc040b3a5f2a3', class: greyIfRequired, onChange: this.doOptionSelectCompletedHandler }, options.map(option => (h("option", { selected: this.selectedValue === option.value, value: option.value }, option.label)))), h("div", { key: '238e74f29d312129f831f5a4cf1598ce3024f145', class: "arrow" }))))));
     }
     formatOptions(options) {
+        if (options === undefined) {
+            return [];
+        }
         if (typeof options === 'string') {
             options = JSON.parse(options);
         }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"biggive-form-field-select.js","sourceRoot":"","sources":["../../../src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"names":[],"mappings":"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","sourcesContent":["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 (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"]}
1	+ {"version":3,"file":"biggive-form-field-select.js","sourceRoot":"","sources":["../../../src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

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

@@ -43,6 +43,9 @@ const BiggiveFormFieldSelect = /*@__PURE__*/ proxyCustomElement(class BiggiveFor
                 (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '') }, h("div", { key: '63beb631b161db5ffe16158430af3d1eede56130', class: "sleeve" }, h("select", { key: '153a730cbf15eb1571c44e855dccc040b3a5f2a3', class: greyIfRequired, onChange: this.doOptionSelectCompletedHandler }, options.map(option => (h("option", { selected: this.selectedValue === option.value, value: option.value }, option.label)))), h("div", { key: '238e74f29d312129f831f5a4cf1598ce3024f145', class: "arrow" }))))));
     }
     formatOptions(options) {
+        if (options === undefined) {
+            return [];
+        }
         if (typeof options === 'string') {
             options = JSON.parse(options);
         }

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,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 (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;;;;;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}

package/dist/esm/biggive-accordion_40.entry.js CHANGED Viewed

@@ -615,6 +615,9 @@ const BiggiveFormFieldSelect = class {
                 (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '') }, h("div", { key: '63beb631b161db5ffe16158430af3d1eede56130', class: "sleeve" }, h("select", { key: '153a730cbf15eb1571c44e855dccc040b3a5f2a3', class: greyIfRequired, onChange: this.doOptionSelectCompletedHandler }, options.map(option => (h("option", { selected: this.selectedValue === option.value, value: option.value }, option.label)))), h("div", { key: '238e74f29d312129f831f5a4cf1598ce3024f145', class: "arrow" }))))));
     }
     formatOptions(options) {
+        if (options === undefined) {
+            return [];
+        }
         if (typeof options === 'string') {
             options = JSON.parse(options);
         }