@biggive/components 202509250906.0.0 → 202510071230.0.0

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

@@ -66,7 +66,6 @@ export class BiggiveFormFieldSelect {
         return {
             "selectionChanged": {
                 "type": "unknown",
-                "attribute": "selection-changed",
                 "mutable": false,
                 "complexType": {
                     "original": "(value: string) => void",
@@ -84,7 +83,6 @@ export class BiggiveFormFieldSelect {
             },
             "prompt": {
                 "type": "string",
-                "attribute": "prompt",
                 "mutable": false,
                 "complexType": {
                     "original": "string | null",
@@ -99,11 +97,11 @@ export class BiggiveFormFieldSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "prompt"
             },
             "selectedValue": {
                 "type": "string",
-                "attribute": "selected-value",
                 "mutable": true,
                 "complexType": {
                     "original": "string | null",
@@ -118,11 +116,11 @@ export class BiggiveFormFieldSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "selected-value"
             },
             "selectedLabel": {
                 "type": "string",
-                "attribute": "selected-label",
                 "mutable": true,
                 "complexType": {
                     "original": "string | null",
@@ -137,11 +135,11 @@ export class BiggiveFormFieldSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "selected-label"
             },
             "options": {
                 "type": "string",
-                "attribute": "options",
                 "mutable": false,
                 "complexType": {
                     "original": "string | Array<{ label: string; value: string }>",
@@ -161,11 +159,11 @@ export class BiggiveFormFieldSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "options"
             },
             "selectStyle": {
                 "type": "string",
-                "attribute": "select-style",
                 "mutable": false,
                 "complexType": {
                     "original": "'bordered' | 'underlined'",
@@ -181,11 +179,11 @@ export class BiggiveFormFieldSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "select-style",
                 "defaultValue": "'bordered'"
             },
             "backgroundColour": {
                 "type": "string",
-                "attribute": "background-colour",
                 "mutable": false,
                 "complexType": {
                     "original": "'white' | 'grey'",
@@ -200,11 +198,11 @@ export class BiggiveFormFieldSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "background-colour"
             },
             "selectedOptionColour": {
                 "type": "string",
-                "attribute": "selected-option-colour",
                 "mutable": false,
                 "complexType": {
                     "original": "'inherit' | 'blue'",
@@ -220,11 +218,11 @@ export class BiggiveFormFieldSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "selected-option-colour",
                 "defaultValue": "'blue'"
             },
             "selectElementId": {
                 "type": "string",
-                "attribute": "select-element-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
@@ -239,11 +237,11 @@ export class BiggiveFormFieldSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "select-element-id"
             },
             "spaceBelow": {
                 "type": "number",
-                "attribute": "space-below",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -259,11 +257,11 @@ export class BiggiveFormFieldSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "space-below",
                 "defaultValue": "0"
             },
             "placeholder": {
                 "type": "string",
-                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
@@ -278,7 +276,8 @@ export class BiggiveFormFieldSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "placeholder"
             }
         };
     }

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

@@ -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  /**\n   * ID for the select element, used by a label. If not passed then a random id will be generated.\n   */\n  @Prop() selectElementId: string | undefined;\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  /**\n   * Placeholder. If there is no `prompt`, this should be a suitable ARIA label.\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    // Give the select a random id so we can reference it from a label\n    const selectId = this.selectElementId || 'select-' + this.getRandomInt().toString();\n\n    return (\n      <div class=\"selectWrapper\">\n        <label class={greyIfRequired} htmlFor={selectId}>\n          <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n        </label>\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 id={selectId} class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler} aria-label={this.prompt === null ? this.placeholder : this.prompt}>\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      </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  private getRandomInt(): number {\n    const min = 1_000_000;\n    const max = 9_999_999;\n    return Math.floor(Math.random() * (max - min) + min);\n  }\n}\n"]}
+{"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  /**\n   * ID for the select element, used by a label. If not passed then a random id will be generated.\n   */\n  @Prop() selectElementId: string | undefined;\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  /**\n   * Placeholder. If there is no `prompt`, this should be a suitable ARIA label.\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    // Give the select a random id so we can reference it from a label\n    const selectId = this.selectElementId || 'select-' + this.getRandomInt().toString();\n\n    return (\n      <div class=\"selectWrapper\">\n        <label class={greyIfRequired} htmlFor={selectId}>\n          <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n        </label>\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 id={selectId} class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler} aria-label={this.prompt === null ? this.placeholder : this.prompt}>\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      </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  private getRandomInt(): number {\n    const min = 1_000_000;\n    const max = 9_999_999;\n    return Math.floor(Math.random() * (max - min) + min);\n  }\n}\n"]}

package/dist/collection/components/biggive-formatted-text/biggive-formatted-text.js

@@ -26,7 +26,6 @@ export class BiggiveFormattedText {
         return {
             "spaceBelow": {
                 "type": "number",
-                "attribute": "space-below",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -42,11 +41,11 @@ export class BiggiveFormattedText {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "space-below",
                 "defaultValue": "0"
             },
             "defaultTextColour": {
                 "type": "string",
-                "attribute": "default-text-colour",
                 "mutable": false,
                 "complexType": {
                     "original": "brandColour | undefined",
@@ -67,11 +66,11 @@ export class BiggiveFormattedText {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "default-text-colour"
             },
             "maxWidth": {
                 "type": "number",
-                "attribute": "max-width",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -87,11 +86,11 @@ export class BiggiveFormattedText {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "max-width",
                 "defaultValue": "100"
             },
             "siteDesign": {
                 "type": "string",
-                "attribute": "site-design",
                 "mutable": false,
                 "complexType": {
                     "original": "'biggive' | 'philco'",
@@ -107,6 +106,7 @@ export class BiggiveFormattedText {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "site-design",
                 "defaultValue": "'biggive'"
             }
         };

package/dist/collection/components/biggive-grid/biggive-grid.js

@@ -28,7 +28,6 @@ export class BiggiveGrid {
         return {
             "spaceBelow": {
                 "type": "number",
-                "attribute": "space-below",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -44,11 +43,11 @@ export class BiggiveGrid {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "space-below",
                 "defaultValue": "4"
             },
             "columnCount": {
                 "type": "number",
-                "attribute": "column-count",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -64,11 +63,11 @@ export class BiggiveGrid {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "column-count",
                 "defaultValue": "3"
             },
             "spaceBetween": {
                 "type": "boolean",
-                "attribute": "space-between",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -84,11 +83,11 @@ export class BiggiveGrid {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "space-between",
                 "defaultValue": "false"
             },
             "columnGap": {
                 "type": "number",
-                "attribute": "column-gap",
                 "mutable": false,
                 "complexType": {
                     "original": "spacingOption",
@@ -110,6 +109,7 @@ export class BiggiveGrid {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "column-gap",
                 "defaultValue": "0"
             }
         };

package/dist/collection/components/biggive-heading/biggive-heading.js

@@ -32,7 +32,6 @@ export class BiggiveHeading {
         return {
             "spaceAbove": {
                 "type": "number",
-                "attribute": "space-above",
                 "mutable": false,
                 "complexType": {
                     "original": "spacingOption",
@@ -54,11 +53,11 @@ export class BiggiveHeading {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "space-above",
                 "defaultValue": "2"
             },
             "spaceBelow": {
                 "type": "number",
-                "attribute": "space-below",
                 "mutable": false,
                 "complexType": {
                     "original": "spacingOption",
@@ -80,11 +79,11 @@ export class BiggiveHeading {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "space-below",
                 "defaultValue": "4"
             },
             "colour": {
                 "type": "string",
-                "attribute": "colour",
                 "mutable": false,
                 "complexType": {
                     "original": "brandColour",
@@ -106,11 +105,11 @@ export class BiggiveHeading {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "colour",
                 "defaultValue": "'primary'"
             },
             "htmlElement": {
                 "type": "string",
-                "attribute": "html-element",
                 "mutable": false,
                 "complexType": {
                     "original": "headingTag",
@@ -132,11 +131,11 @@ export class BiggiveHeading {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "html-element",
                 "defaultValue": "'h1'"
             },
             "size": {
                 "type": "number",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "headingSize",
@@ -158,11 +157,11 @@ export class BiggiveHeading {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "1"
             },
             "align": {
                 "type": "string",
-                "attribute": "align",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -178,11 +177,11 @@ export class BiggiveHeading {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "align",
                 "defaultValue": "'left'"
             },
             "text": {
                 "type": "string",
-                "attribute": "text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -198,11 +197,11 @@ export class BiggiveHeading {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "text",
                 "defaultValue": "''"
             },
             "icon": {
                 "type": "boolean",
-                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -218,11 +217,11 @@ export class BiggiveHeading {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "icon",
                 "defaultValue": "false"
             },
             "iconColour": {
                 "type": "string",
-                "attribute": "icon-colour",
                 "mutable": false,
                 "complexType": {
                     "original": "brandColour",
@@ -244,11 +243,11 @@ export class BiggiveHeading {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "icon-colour",
                 "defaultValue": "'primary'"
             },
             "siteDesign": {
                 "type": "string",
-                "attribute": "site-design",
                 "mutable": false,
                 "complexType": {
                     "original": "'biggive' | 'philco'",
@@ -264,6 +263,7 @@ export class BiggiveHeading {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "site-design",
                 "defaultValue": "'biggive'"
             }
         };

package/dist/collection/components/biggive-heading-banner/biggive-heading-banner.js

@@ -93,7 +93,6 @@ export class BiggiveHeadingBanner {
         return {
             "logo": {
                 "type": "string",
-                "attribute": "logo",
                 "mutable": false,
                 "complexType": {
                     "original": "{ url: string; alt?: string } | string",
@@ -108,11 +107,11 @@ export class BiggiveHeadingBanner {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "logo"
             },
             "slug": {
                 "type": "string",
-                "attribute": "slug",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -128,11 +127,11 @@ export class BiggiveHeadingBanner {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "slug",
                 "defaultValue": "''"
             },
             "mainTitle": {
                 "type": "string",
-                "attribute": "main-title",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -147,11 +146,11 @@ export class BiggiveHeadingBanner {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "main-title"
             },
             "mainImageUrl": {
                 "type": "string",
-                "attribute": "main-image-url",
                 "mutable": false,
                 "complexType": {
                     "original": "string | null",
@@ -166,11 +165,11 @@ export class BiggiveHeadingBanner {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "main-image-url"
             },
             "focalPoint": {
                 "type": "string",
-                "attribute": "focal-point",
                 "mutable": false,
                 "complexType": {
                     "original": "string | { x: number; y: number }",
@@ -185,11 +184,11 @@ export class BiggiveHeadingBanner {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "focal-point"
             },
             "teaser": {
                 "type": "string",
-                "attribute": "teaser",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -204,11 +203,11 @@ export class BiggiveHeadingBanner {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "teaser"
             },
             "backgroundColour": {
                 "type": "string",
-                "attribute": "background-colour",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -223,11 +222,11 @@ export class BiggiveHeadingBanner {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "background-colour"
             },
             "textBackgroundColour": {
                 "type": "string",
-                "attribute": "text-background-colour",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -242,11 +241,11 @@ export class BiggiveHeadingBanner {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "text-background-colour"
             },
             "slugColour": {
                 "type": "string",
-                "attribute": "slug-colour",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -261,11 +260,11 @@ export class BiggiveHeadingBanner {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "slug-colour"
             },
             "mainTitleColour": {
                 "type": "string",
-                "attribute": "main-title-colour",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -280,11 +279,11 @@ export class BiggiveHeadingBanner {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "main-title-colour"
             },
             "teaserColour": {
                 "type": "string",
-                "attribute": "teaser-colour",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -299,11 +298,11 @@ export class BiggiveHeadingBanner {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "teaser-colour"
             },
             "height": {
                 "type": "string",
-                "attribute": "height",
                 "mutable": false,
                 "complexType": {
                     "original": "'short' | 'tall'",
@@ -319,6 +318,7 @@ export class BiggiveHeadingBanner {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "height",
                 "defaultValue": "'tall'"
             }
         };