@actabldesign/bellhop-core 0.0.3

package/collection/components/bh-checkbox-group-item/bh-checkbox-group-item.js

@@ -0,0 +1,402 @@
+import { h, Host } from "@stencil/core";
+export class BhCheckboxGroupItem {
+    /**
+     * The type of input control
+     */
+    type = 'checkbox';
+    /**
+     * The size variant
+     */
+    size = 'sm';
+    /**
+     * Unique value identifier for this item
+     */
+    value = '';
+    /**
+     * Whether the item is checked (for checkbox type)
+     */
+    checked = false;
+    /**
+     * Whether the item is selected (for radio type)
+     */
+    selected = false;
+    /**
+     * Whether the item is disabled
+     */
+    disabled = false;
+    /**
+     * Material Symbol icon name (for icon-simple type)
+     */
+    icon = '';
+    /**
+     * Title text
+     */
+    itemTitle = '';
+    /**
+     * Subtitle text (inline with title)
+     */
+    subtitle = '';
+    /**
+     * Description text
+     */
+    description = '';
+    /**
+     * Radio group name (for radio type)
+     */
+    name = '';
+    isHovered = false;
+    isFocused = false;
+    /**
+     * Emitted when the item state changes
+     */
+    bhItemChange;
+    handleClick = () => {
+        if (this.disabled)
+            return;
+        if (this.type === 'radio' || this.type === 'icon-simple') {
+            if (!this.selected) {
+                this.selected = true;
+                this.bhItemChange.emit({ value: this.value, checked: true });
+            }
+        }
+        else {
+            this.checked = !this.checked;
+            this.bhItemChange.emit({ value: this.value, checked: this.checked });
+        }
+    };
+    handleKeyDown = (event) => {
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            this.handleClick();
+        }
+    };
+    handleMouseEnter = () => {
+        if (!this.disabled)
+            this.isHovered = true;
+    };
+    handleMouseLeave = () => {
+        this.isHovered = false;
+    };
+    handleFocus = () => {
+        if (!this.disabled)
+            this.isFocused = true;
+    };
+    handleBlur = () => {
+        this.isFocused = false;
+    };
+    handleCheckboxChange = (event) => {
+        event.stopPropagation();
+        this.checked = event.detail;
+        this.bhItemChange.emit({ value: this.value, checked: this.checked });
+    };
+    handleRadioChange = (event) => {
+        event.stopPropagation();
+        this.selected = true;
+        this.bhItemChange.emit({ value: this.value, checked: true });
+    };
+    render() {
+        const isActive = (this.type === 'radio' || this.type === 'icon-simple') ? this.selected : this.checked;
+        const containerClasses = {
+            'checkbox-group-item': true,
+            [`checkbox-group-item-${this.size}`]: true,
+            [`checkbox-group-item-${this.type}`]: true,
+            'checkbox-group-item-active': isActive,
+            'checkbox-group-item-disabled': this.disabled,
+            'checkbox-group-item-hovered': this.isHovered,
+            'checkbox-group-item-focused': this.isFocused,
+        };
+        const renderInput = () => {
+            if (this.type === 'radio') {
+                return (h("bh-radio-button", { size: this.size, selected: this.selected, disabled: this.disabled, value: this.value, name: this.name, onBhChange: this.handleRadioChange }));
+            }
+            // For icon-simple, use `selected` state; for checkbox, use `checked` state
+            const isChecked = this.type === 'icon-simple' ? this.selected : this.checked;
+            return (h("bh-checkbox", { size: this.size, checked: isChecked, disabled: this.disabled, onBhChange: this.handleCheckboxChange }));
+        };
+        const renderIcon = () => {
+            if (this.type === 'icon-simple' && this.icon) {
+                return (h("bh-featured-icon", { size: "sm", icon: this.icon, color: "gray", iconStyle: "outlined" }));
+            }
+            return null;
+        };
+        const renderContent = () => (h("div", { class: "item-content" }, h("div", { class: "item-text-row" }, this.itemTitle && h("span", { class: "item-title" }, this.itemTitle), this.subtitle && h("span", { class: "item-subtitle" }, this.subtitle)), this.description && h("p", { class: "item-description" }, this.description)));
+        return (h(Host, null, h("div", { class: containerClasses, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur, tabIndex: this.disabled ? -1 : 0, role: this.type === 'radio' ? 'radio' : 'checkbox', "aria-checked": String(isActive), "aria-disabled": this.disabled ? 'true' : null }, this.type === 'icon-simple' ? (
+        // Icon Simple: icon + content | input
+        [renderIcon(), renderContent(), renderInput()]) : (
+        // Checkbox/Radio: input | content
+        [renderInput(), renderContent()]))));
+    }
+    static get is() { return "bh-checkbox-group-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-checkbox-group-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-checkbox-group-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CheckboxGroupItemType",
+                    "resolved": "\"checkbox\" | \"icon-simple\" | \"radio\"",
+                    "references": {
+                        "CheckboxGroupItemType": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-checkbox-group-item/bh-checkbox-group-item.tsx",
+                            "id": "src/components/bh-checkbox-group-item/bh-checkbox-group-item.tsx::CheckboxGroupItemType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of input control"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'checkbox'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CheckboxGroupItemSize",
+                    "resolved": "\"md\" | \"sm\"",
+                    "references": {
+                        "CheckboxGroupItemSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-checkbox-group-item/bh-checkbox-group-item.tsx",
+                            "id": "src/components/bh-checkbox-group-item/bh-checkbox-group-item.tsx::CheckboxGroupItemSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'sm'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Unique value identifier for this item"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the item is checked (for checkbox type)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the item is selected (for radio type)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the item is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Material Symbol icon name (for icon-simple type)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "''"
+            },
+            "itemTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Title text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "item-title",
+                "defaultValue": "''"
+            },
+            "subtitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Subtitle text (inline with title)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "subtitle",
+                "defaultValue": "''"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Description text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description",
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Radio group name (for radio type)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isHovered": {},
+            "isFocused": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhItemChange",
+                "name": "bhItemChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the item state changes"
+                },
+                "complexType": {
+                    "original": "{ value: string; checked: boolean }",
+                    "resolved": "{ value: string; checked: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=bh-checkbox-group-item.js.map

package/collection/components/bh-checkbox-group-item/bh-checkbox-group-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-checkbox-group-item.js","sourceRoot":"","sources":["../../../src/components/bh-checkbox-group-item/bh-checkbox-group-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type CheckboxGroupItemType = 'checkbox' | 'radio' | 'icon-simple';\nexport type CheckboxGroupItemSize = 'sm' | 'md';\n\n@Component({\n  tag: 'bh-checkbox-group-item',\n  styleUrl: 'bh-checkbox-group-item.css',\n  shadow: true,\n})\nexport class BhCheckboxGroupItem {\n  /**\n   * The type of input control\n   */\n  @Prop() type: CheckboxGroupItemType = 'checkbox';\n\n  /**\n   * The size variant\n   */\n  @Prop() size: CheckboxGroupItemSize = 'sm';\n\n  /**\n   * Unique value identifier for this item\n   */\n  @Prop() value: string = '';\n\n  /**\n   * Whether the item is checked (for checkbox type)\n   */\n  @Prop({ mutable: true }) checked: boolean = false;\n\n  /**\n   * Whether the item is selected (for radio type)\n   */\n  @Prop({ mutable: true }) selected: boolean = false;\n\n  /**\n   * Whether the item is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Material Symbol icon name (for icon-simple type)\n   */\n  @Prop() icon: string = '';\n\n\n  /**\n   * Title text\n   */\n  @Prop() itemTitle: string = '';\n\n  /**\n   * Subtitle text (inline with title)\n   */\n  @Prop() subtitle: string = '';\n\n  /**\n   * Description text\n   */\n  @Prop() description: string = '';\n\n  /**\n   * Radio group name (for radio type)\n   */\n  @Prop() name: string = '';\n\n  @State() isHovered: boolean = false;\n  @State() isFocused: boolean = false;\n\n  /**\n   * Emitted when the item state changes\n   */\n  @Event() bhItemChange!: EventEmitter<{ value: string; checked: boolean }>;\n\n  private handleClick = () => {\n    if (this.disabled) return;\n\n    if (this.type === 'radio' || this.type === 'icon-simple') {\n      if (!this.selected) {\n        this.selected = true;\n        this.bhItemChange.emit({ value: this.value, checked: true });\n      }\n    } else {\n      this.checked = !this.checked;\n      this.bhItemChange.emit({ value: this.value, checked: this.checked });\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.handleClick();\n    }\n  };\n\n  private handleMouseEnter = () => {\n    if (!this.disabled) this.isHovered = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovered = false;\n  };\n\n  private handleFocus = () => {\n    if (!this.disabled) this.isFocused = true;\n  };\n\n  private handleBlur = () => {\n    this.isFocused = false;\n  };\n\n  private handleCheckboxChange = (event: CustomEvent<boolean>) => {\n    event.stopPropagation();\n    this.checked = event.detail;\n    this.bhItemChange.emit({ value: this.value, checked: this.checked });\n  };\n\n  private handleRadioChange = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    this.selected = true;\n    this.bhItemChange.emit({ value: this.value, checked: true });\n  };\n\n  render() {\n    const isActive = (this.type === 'radio' || this.type === 'icon-simple') ? this.selected : this.checked;\n\n    const containerClasses = {\n      'checkbox-group-item': true,\n      [`checkbox-group-item-${this.size}`]: true,\n      [`checkbox-group-item-${this.type}`]: true,\n      'checkbox-group-item-active': isActive,\n      'checkbox-group-item-disabled': this.disabled,\n      'checkbox-group-item-hovered': this.isHovered,\n      'checkbox-group-item-focused': this.isFocused,\n    };\n\n    const renderInput = () => {\n      if (this.type === 'radio') {\n        return (\n          <bh-radio-button\n            size={this.size}\n            selected={this.selected}\n            disabled={this.disabled}\n            value={this.value}\n            name={this.name}\n            onBhChange={this.handleRadioChange}\n          />\n        );\n      }\n      // For icon-simple, use `selected` state; for checkbox, use `checked` state\n      const isChecked = this.type === 'icon-simple' ? this.selected : this.checked;\n      return (\n        <bh-checkbox\n          size={this.size}\n          checked={isChecked}\n          disabled={this.disabled}\n          onBhChange={this.handleCheckboxChange}\n        />\n      );\n    };\n\n    const renderIcon = () => {\n      if (this.type === 'icon-simple' && this.icon) {\n        return (\n          <bh-featured-icon\n            size=\"sm\"\n            icon={this.icon}\n            color=\"gray\"\n            iconStyle=\"outlined\"\n          />\n        );\n      }\n      return null;\n    };\n\n    const renderContent = () => (\n      <div class=\"item-content\">\n        <div class=\"item-text-row\">\n          {this.itemTitle && <span class=\"item-title\">{this.itemTitle}</span>}\n          {this.subtitle && <span class=\"item-subtitle\">{this.subtitle}</span>}\n        </div>\n        {this.description && <p class=\"item-description\">{this.description}</p>}\n      </div>\n    );\n\n    return (\n      <Host>\n        <div\n          class={containerClasses}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          tabIndex={this.disabled ? -1 : 0}\n          role={this.type === 'radio' ? 'radio' : 'checkbox'}\n          aria-checked={String(isActive)}\n          aria-disabled={this.disabled ? 'true' : null}\n        >\n          {this.type === 'icon-simple' ? (\n            // Icon Simple: icon + content | input\n            [renderIcon(), renderContent(), renderInput()]\n          ) : (\n            // Checkbox/Radio: input | content\n            [renderInput(), renderContent()]\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/collection/components/bh-container/bh-container.css

@@ -0,0 +1,21 @@
+:host {
+  display: block;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2xl);
+  padding: var(--spacing-2xl);
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-xl);
+  width: fit-content;
+  font-family: var(--font-inter);
+}
+
+/* Container with footer - removes bottom border radius and border */
+.container-with-footer {
+  border-bottom: none;
+  border-radius: var(--radius-xl) var(--radius-xl) var(--radius-none) var(--radius-none);
+}

package/collection/components/bh-container/bh-container.js

@@ -0,0 +1,51 @@
+import { h } from "@stencil/core";
+export class BhContainer {
+    /**
+     * Whether the container has a footer attached (removes bottom border radius and border)
+     */
+    withFooter = false;
+    render() {
+        const containerClasses = {
+            'container': true,
+            'container-with-footer': this.withFooter,
+        };
+        return (h("div", { key: '5db48ed0eb53a7152f5a4b85bef751aaad74c822', class: containerClasses }, h("slot", { key: '49dee6c4825466b602f2adf88304f8aeb17d9bbe' })));
+    }
+    static get is() { return "bh-container"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-container.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-container.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "withFooter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the container has a footer attached (removes bottom border radius and border)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "with-footer",
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=bh-container.js.map

package/collection/components/bh-container/bh-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-container.js","sourceRoot":"","sources":["../../../src/components/bh-container/bh-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,WAAW;IACtB;;OAEG;IACK,UAAU,GAAY,KAAK,CAAC;IAEpC,MAAM;QACJ,MAAM,gBAAgB,GAAG;YACvB,WAAW,EAAE,IAAI;YACjB,uBAAuB,EAAE,IAAI,CAAC,UAAU;SACzC,CAAC;QAEF,OAAO,CACL,4DAAK,KAAK,EAAE,gBAAgB;YAC1B,8DAAa,CACT,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'bh-container',\n  styleUrl: 'bh-container.css',\n  shadow: true,\n})\nexport class BhContainer {\n  /**\n   * Whether the container has a footer attached (removes bottom border radius and border)\n   */\n  @Prop() withFooter: boolean = false;\n\n  render() {\n    const containerClasses = {\n      'container': true,\n      'container-with-footer': this.withFooter,\n    };\n\n    return (\n      <div class={containerClasses}>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"]}

package/collection/components/bh-container-footer/bh-container-footer.css

@@ -0,0 +1,22 @@
+/* Base Container Footer Styles */
+.container-footer {
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  border-top: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-none) var(--radius-none) var(--radius-xl)
+    var(--radius-xl);
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.container-footer-content {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: var(--spacing-md) var(--spacing-2xl);
+}
+
+/* Minimal size - smaller top/bottom padding */
+.container-footer-minimal .container-footer-content {
+  padding: var(--spacing-sm) var(--spacing-2xl);
+}

package/collection/components/bh-container-footer/bh-container-footer.js

@@ -0,0 +1,106 @@
+import { h } from "@stencil/core";
+export class BhContainerFooter {
+    /**
+     * Size variant of the footer
+     */
+    size = 'standard';
+    /**
+     * Label for the footer button
+     */
+    buttonLabel = 'View report';
+    /**
+     * Event emitted when the button is clicked
+     */
+    bhButtonClick;
+    handleButtonClick = () => {
+        this.bhButtonClick.emit();
+    };
+    render() {
+        const footerClasses = {
+            'container-footer': true,
+            [`container-footer-${this.size}`]: true,
+        };
+        return (h("div", { key: '88f782bfc7a086e8facafa3450e19eb0b354e842', class: footerClasses }, h("div", { key: '02e63532e246742d155a5f74b4e8f777482711ca', class: "container-footer-content" }, h("bh-button", { key: '83aa00d05a1c0fa98fedca50724ce1fb3d293f8a', hierarchy: "quaternary", size: "sm", label: this.buttonLabel, onClick: this.handleButtonClick }))));
+    }
+    static get is() { return "bh-container-footer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-container-footer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-container-footer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ContainerFooterSize",
+                    "resolved": "\"minimal\" | \"standard\"",
+                    "references": {
+                        "ContainerFooterSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-container-footer/bh-container-footer.tsx",
+                            "id": "src/components/bh-container-footer/bh-container-footer.tsx::ContainerFooterSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size variant of the footer"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'standard'"
+            },
+            "buttonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the footer button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-label",
+                "defaultValue": "'View report'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhButtonClick",
+                "name": "bhButtonClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=bh-container-footer.js.map

package/collection/components/bh-container-footer/bh-container-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-container-footer.js","sourceRoot":"","sources":["../../../src/components/bh-container-footer/bh-container-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,eAAe,CAAC;AASxE,MAAM,OAAO,iBAAiB;IAC5B;;OAEG;IACK,IAAI,GAAwB,UAAU,CAAC;IAE/C;;OAEG;IACK,WAAW,GAAW,aAAa,CAAC;IAE5C;;OAEG;IACM,aAAa,CAAsB;IAEpC,iBAAiB,GAAG,GAAG,EAAE;QAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM;QACJ,MAAM,aAAa,GAAG;YACpB,kBAAkB,EAAE,IAAI;YACxB,CAAC,oBAAoB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;SACxC,CAAC;QAEF,OAAO,CACL,4DAAK,KAAK,EAAE,aAAa;YACvB,4DAAK,KAAK,EAAC,0BAA0B;gBACnC,kEACE,SAAS,EAAC,YAAY,EAEtB,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,OAAO,EAAE,IAAI,CAAC,iBAAiB,GAC/B,CACE,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type ContainerFooterSize = 'minimal' | 'standard';\n\n@Component({\n  tag: 'bh-container-footer',\n  styleUrl: 'bh-container-footer.css',\n  shadow: true,\n})\nexport class BhContainerFooter {\n  /**\n   * Size variant of the footer\n   */\n  @Prop() size: ContainerFooterSize = 'standard';\n\n  /**\n   * Label for the footer button\n   */\n  @Prop() buttonLabel: string = 'View report';\n\n  /**\n   * Event emitted when the button is clicked\n   */\n  @Event() bhButtonClick!: EventEmitter<void>;\n\n  private handleButtonClick = () => {\n    this.bhButtonClick.emit();\n  };\n\n  render() {\n    const footerClasses = {\n      'container-footer': true,\n      [`container-footer-${this.size}`]: true,\n    };\n\n    return (\n      <div class={footerClasses}>\n        <div class=\"container-footer-content\">\n          <bh-button\n            hierarchy=\"quaternary\"\n            \n            size=\"sm\"\n            label={this.buttonLabel}\n            onClick={this.handleButtonClick}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n"]}