@actabldesign/bellhop-core 0.0.3 → 0.0.6

package/dist/collection/components/bh-checkbox/bh-checkbox.js

@@ -0,0 +1,383 @@
+import { h } from "@stencil/core";
+import { syncCheckableFormValue, validateRequired } from "../../utils/form";
+export class BhCheckbox {
+    el;
+    internals;
+    inputRef;
+    uniqueId = `bh-checkbox-${Math.random().toString(36).substring(2, 9)}`;
+    /** Checkbox size */
+    size = 'md';
+    /** Checked state */
+    checked = false;
+    /** Indeterminate state */
+    indeterminate = false;
+    /** Disabled state */
+    disabled = false;
+    /** Name attribute for form submission */
+    name = '';
+    /** Value attribute for form submission */
+    value = 'on';
+    /** Optional label text - when provided, renders checkbox with label */
+    label = '';
+    /** Optional supporting text below the label */
+    supportingText = '';
+    /** Whether the checkbox is required */
+    required = false;
+    /** Default checked state for form reset */
+    defaultChecked = false;
+    /** Internal hover state */
+    isHovered = false;
+    /** Internal focus state */
+    isFocused = false;
+    /** Emitted when checkbox state changes via user interaction */
+    bhChange;
+    handleCheckedChange(newValue) {
+        if (this.inputRef) {
+            this.inputRef.checked = newValue;
+        }
+    }
+    handleIndeterminateChange(newValue) {
+        if (this.inputRef) {
+            this.inputRef.indeterminate = newValue;
+        }
+    }
+    componentDidLoad() {
+        if (this.inputRef) {
+            this.inputRef.indeterminate = this.indeterminate;
+        }
+        syncCheckableFormValue(this.internals, this.name, this.checked, this.value);
+        validateRequired(this.internals, this.required, this.checked);
+    }
+    formResetCallback() {
+        this.checked = this.defaultChecked;
+        this.indeterminate = false;
+        if (this.inputRef) {
+            this.inputRef.checked = this.defaultChecked;
+            this.inputRef.indeterminate = false;
+        }
+        syncCheckableFormValue(this.internals, this.name, this.checked, this.value);
+        validateRequired(this.internals, this.required, this.checked);
+    }
+    handleChange = (event) => {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        const input = event.target;
+        if (this.indeterminate) {
+            this.indeterminate = false;
+            this.checked = false;
+            if (this.inputRef) {
+                this.inputRef.indeterminate = false;
+                this.inputRef.checked = false;
+            }
+        }
+        else {
+            this.checked = input.checked;
+        }
+        syncCheckableFormValue(this.internals, this.name, this.checked, this.value);
+        validateRequired(this.internals, this.required, this.checked);
+        this.bhChange.emit(this.checked);
+    };
+    handleMouseEnter = () => {
+        this.isHovered = true;
+    };
+    handleMouseLeave = () => {
+        this.isHovered = false;
+    };
+    handleFocus = () => {
+        this.isFocused = true;
+    };
+    handleBlur = () => {
+        this.isFocused = false;
+    };
+    handleControlClick = () => {
+        if (this.disabled)
+            return;
+        this.inputRef?.click();
+    };
+    renderCheckboxControl() {
+        const isCheckedState = this.checked || this.indeterminate;
+        const checkboxClasses = {
+            'checkbox': true,
+            [`checkbox-${this.size}`]: true,
+            'checkbox-checked': isCheckedState,
+            'checkbox-disabled': this.disabled,
+            'checkbox-focused': this.isFocused && !this.disabled,
+            'checkbox-hover': this.isHovered && !this.disabled,
+        };
+        return (h("div", { class: "checkbox-control", onClick: this.handleControlClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("input", { ref: (el) => (this.inputRef = el), type: "checkbox", id: this.uniqueId, name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, class: "checkbox-input", onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, "aria-describedby": this.supportingText ? `${this.uniqueId}-description` : undefined }), h("div", { class: checkboxClasses, part: "checkbox", "aria-hidden": "true" }, this.checked && !this.indeterminate && (h("span", { class: "material-symbols-outlined checkbox-icon check-icon" }, "check")), this.indeterminate && (h("span", { class: "material-symbols-outlined checkbox-icon minus-icon" }, "remove")))));
+    }
+    render() {
+        const hasLabel = this.label || this.supportingText;
+        const wrapperClasses = {
+            'checkbox-wrapper': true,
+            'checkbox-wrapper-with-label': !!hasLabel,
+            'checkbox-wrapper-disabled': this.disabled,
+        };
+        // Render with bh-label when label/supportingText is provided
+        if (hasLabel) {
+            return (h("div", { class: wrapperClasses, part: "wrapper" }, h("bh-label", { layout: "inline-start", label: this.label, supportingText: this.supportingText, disabled: this.disabled, for: this.uniqueId }, this.renderCheckboxControl())));
+        }
+        // Standalone checkbox without label
+        return (h("div", { class: wrapperClasses, part: "wrapper" }, this.renderCheckboxControl()));
+    }
+    static get is() { return "bh-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-checkbox.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CheckboxSize",
+                    "resolved": "\"md\" | \"sm\"",
+                    "references": {
+                        "CheckboxSize": {
+                            "location": "local",
+                            "path": "/Users/brunabites/localsites/bellhopOS/packages/bellhop-core/src/components/bh-checkbox/bh-checkbox.tsx",
+                            "id": "src/components/bh-checkbox/bh-checkbox.tsx::CheckboxSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Checkbox size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Checked state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indeterminate state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indeterminate",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name attribute for form submission"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value attribute for form submission"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "'on'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional label text - when provided, renders checkbox with label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "supportingText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional supporting text below the label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "supporting-text",
+                "defaultValue": "''"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the checkbox is required"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "defaultChecked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default checked state for form reset"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-checked",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isHovered": {},
+            "isFocused": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhChange",
+                "name": "bhChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when checkbox state changes via user interaction"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "handleCheckedChange"
+            }, {
+                "propName": "indeterminate",
+                "methodName": "handleIndeterminateChange"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=bh-checkbox.js.map

package/dist/collection/components/bh-checkbox/bh-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-checkbox.js","sourceRoot":"","sources":["../../../src/components/bh-checkbox/bh-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, h, Element, Watch, AttachInternals } from '@stencil/core';\nimport { syncCheckableFormValue, validateRequired } from '../../utils/form';\n\nexport type CheckboxSize = 'sm' | 'md';\n\n@Component({\n  tag: 'bh-checkbox',\n  styleUrl: 'bh-checkbox.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class BhCheckbox {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  private inputRef?: HTMLInputElement;\n  private uniqueId = `bh-checkbox-${Math.random().toString(36).substring(2, 9)}`;\n\n  /** Checkbox size */\n  @Prop() size: CheckboxSize = 'md';\n\n  /** Checked state */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Indeterminate state */\n  @Prop({ mutable: true }) indeterminate: boolean = false;\n\n  /** Disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** Name attribute for form submission */\n  @Prop() name: string = '';\n\n  /** Value attribute for form submission */\n  @Prop() value: string = 'on';\n\n  /** Optional label text - when provided, renders checkbox with label */\n  @Prop() label: string = '';\n\n  /** Optional supporting text below the label */\n  @Prop() supportingText: string = '';\n\n  /** Whether the checkbox is required */\n  @Prop() required: boolean = false;\n\n  /** Default checked state for form reset */\n  @Prop() defaultChecked: boolean = false;\n\n  /** Internal hover state */\n  @State() isHovered: boolean = false;\n\n  /** Internal focus state */\n  @State() isFocused: boolean = false;\n\n  /** Emitted when checkbox state changes via user interaction */\n  @Event() bhChange!: EventEmitter<boolean>;\n\n  @Watch('checked')\n  handleCheckedChange(newValue: boolean) {\n    if (this.inputRef) {\n      this.inputRef.checked = newValue;\n    }\n  }\n\n  @Watch('indeterminate')\n  handleIndeterminateChange(newValue: boolean) {\n    if (this.inputRef) {\n      this.inputRef.indeterminate = newValue;\n    }\n  }\n\n  componentDidLoad() {\n    if (this.inputRef) {\n      this.inputRef.indeterminate = this.indeterminate;\n    }\n    syncCheckableFormValue(this.internals, this.name, this.checked, this.value);\n    validateRequired(this.internals, this.required, this.checked);\n  }\n\n  formResetCallback() {\n    this.checked = this.defaultChecked;\n    this.indeterminate = false;\n    if (this.inputRef) {\n      this.inputRef.checked = this.defaultChecked;\n      this.inputRef.indeterminate = false;\n    }\n    syncCheckableFormValue(this.internals, this.name, this.checked, this.value);\n    validateRequired(this.internals, this.required, this.checked);\n  }\n\n  private handleChange = (event: Event) => {\n    event.stopPropagation();\n    if (this.disabled) return;\n\n    const input = event.target as HTMLInputElement;\n\n    if (this.indeterminate) {\n      this.indeterminate = false;\n      this.checked = false;\n      if (this.inputRef) {\n        this.inputRef.indeterminate = false;\n        this.inputRef.checked = false;\n      }\n    } else {\n      this.checked = input.checked;\n    }\n\n    syncCheckableFormValue(this.internals, this.name, this.checked, this.value);\n    validateRequired(this.internals, this.required, this.checked);\n    this.bhChange.emit(this.checked);\n  };\n\n  private handleMouseEnter = () => {\n    this.isHovered = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovered = false;\n  };\n\n  private handleFocus = () => {\n    this.isFocused = true;\n  };\n\n  private handleBlur = () => {\n    this.isFocused = false;\n  };\n\n  private handleControlClick = () => {\n    if (this.disabled) return;\n    this.inputRef?.click();\n  };\n\n  private renderCheckboxControl() {\n    const isCheckedState = this.checked || this.indeterminate;\n\n    const checkboxClasses = {\n      'checkbox': true,\n      [`checkbox-${this.size}`]: true,\n      'checkbox-checked': isCheckedState,\n      'checkbox-disabled': this.disabled,\n      'checkbox-focused': this.isFocused && !this.disabled,\n      'checkbox-hover': this.isHovered && !this.disabled,\n    };\n\n    return (\n      <div\n        class=\"checkbox-control\"\n        onClick={this.handleControlClick}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n      >\n        <input\n          ref={(el) => (this.inputRef = el)}\n          type=\"checkbox\"\n          id={this.uniqueId}\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n          disabled={this.disabled}\n          class=\"checkbox-input\"\n          onChange={this.handleChange}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          aria-describedby={this.supportingText ? `${this.uniqueId}-description` : undefined}\n        />\n        <div class={checkboxClasses} part=\"checkbox\" aria-hidden=\"true\">\n          {this.checked && !this.indeterminate && (\n            <span class=\"material-symbols-outlined checkbox-icon check-icon\">\n              check\n            </span>\n          )}\n          {this.indeterminate && (\n            <span class=\"material-symbols-outlined checkbox-icon minus-icon\">\n              remove\n            </span>\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    const hasLabel = this.label || this.supportingText;\n\n    const wrapperClasses = {\n      'checkbox-wrapper': true,\n      'checkbox-wrapper-with-label': !!hasLabel,\n      'checkbox-wrapper-disabled': this.disabled,\n    };\n\n    // Render with bh-label when label/supportingText is provided\n    if (hasLabel) {\n      return (\n        <div class={wrapperClasses} part=\"wrapper\">\n          <bh-label\n            layout=\"inline-start\"\n            label={this.label}\n            supportingText={this.supportingText}\n            disabled={this.disabled}\n            for={this.uniqueId}\n          >\n            {this.renderCheckboxControl()}\n          </bh-label>\n        </div>\n      );\n    }\n\n    // Standalone checkbox without label\n    return (\n      <div class={wrapperClasses} part=\"wrapper\">\n        {this.renderCheckboxControl()}\n      </div>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,218 @@
+import { h, Host } from "@stencil/core";
+export class BhCheckboxGroup {
+    el;
+    /**
+     * The type of input controls in the group
+     */
+    type = 'checkbox';
+    /**
+     * The name for radio group (required for radio type)
+     */
+    name = '';
+    /**
+     * Current selected value(s)
+     * For checkbox: array of values
+     * For radio: single value string
+     */
+    value = [];
+    /**
+     * Whether all items in the group are disabled
+     */
+    disabled = false;
+    /**
+     * Emitted when selection changes
+     */
+    bhChange;
+    handleItemChange(event) {
+        event.stopPropagation();
+        const { value: itemValue, checked } = event.detail;
+        if (this.type === 'radio' || this.type === 'icon-simple') {
+            // Radio behavior: only one can be selected
+            if (checked) {
+                this.value = itemValue;
+                this.updateChildItems();
+                this.bhChange.emit(this.value);
+            }
+        }
+        else {
+            // Checkbox behavior: multiple can be selected
+            const currentValues = Array.isArray(this.value) ? [...this.value] : [];
+            if (checked) {
+                if (!currentValues.includes(itemValue)) {
+                    currentValues.push(itemValue);
+                }
+            }
+            else {
+                const index = currentValues.indexOf(itemValue);
+                if (index > -1) {
+                    currentValues.splice(index, 1);
+                }
+            }
+            this.value = currentValues;
+            this.bhChange.emit(this.value);
+        }
+    }
+    componentDidLoad() {
+        this.updateChildItems();
+    }
+    updateChildItems() {
+        const items = this.el.querySelectorAll('bh-checkbox-group-item');
+        items.forEach((item) => {
+            // Set type from group
+            item.type = this.type;
+            // Set name for radio groups
+            if (this.type === 'radio' || this.type === 'icon-simple') {
+                item.name = this.name;
+            }
+            // Set disabled state
+            if (this.disabled) {
+                item.disabled = true;
+            }
+            // Update selection state
+            if (this.type === 'radio' || this.type === 'icon-simple') {
+                item.selected = item.value === this.value;
+                item.checked = false;
+            }
+            else {
+                const values = Array.isArray(this.value) ? this.value : [];
+                item.checked = values.includes(item.value);
+                item.selected = false;
+            }
+        });
+    }
+    render() {
+        const role = this.type === 'radio' || this.type === 'icon-simple' ? 'radiogroup' : 'group';
+        return (h(Host, { key: '14f895b1d0b5d6ba32a67ce3651c327d29d0770c' }, h("div", { key: '13b9e0179910941c223643945735fb66b699c6eb', class: "checkbox-group", role: role, "aria-disabled": this.disabled ? 'true' : null }, h("slot", { key: '6b28955878dca08ac7549e31130eb69a0880f2ae' }))));
+    }
+    static get is() { return "bh-checkbox-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-checkbox-group.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-checkbox-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CheckboxGroupType",
+                    "resolved": "\"checkbox\" | \"icon-simple\" | \"radio\"",
+                    "references": {
+                        "CheckboxGroupType": {
+                            "location": "local",
+                            "path": "/Users/brunabites/localsites/bellhopOS/packages/bellhop-core/src/components/bh-checkbox-group/bh-checkbox-group.tsx",
+                            "id": "src/components/bh-checkbox-group/bh-checkbox-group.tsx::CheckboxGroupType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of input controls in the group"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'checkbox'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name for radio group (required for radio type)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current selected value(s)\nFor checkbox: array of values\nFor radio: single value string"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "[]"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether all items in the group are disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhChange",
+                "name": "bhChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when selection changes"
+                },
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "bhItemChange",
+                "method": "handleItemChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=bh-checkbox-group.js.map