@actabldesign/bellhop-core 0.0.3

package/collection/components/bh-input-password/bh-input-password.js

@@ -0,0 +1,581 @@
+import { h } from "@stencil/core";
+import { syncFormValue, updateValidity } from "../../utils/form";
+export class BhInputPassword {
+    internals;
+    inputEl;
+    /**
+     * The label for the input
+     */
+    label = 'Password';
+    /**
+     * Placeholder text
+     */
+    placeholder = 'Enter your password';
+    /**
+     * Hint text shown below the input
+     */
+    hintText = '';
+    /**
+     * Whether to show the label
+     */
+    showLabel = true;
+    /**
+     * Whether to show hint text
+     */
+    showHintText = true;
+    /**
+     * Whether to show the help icon
+     */
+    showHelpIcon = false;
+    /**
+     * Whether to show a leading icon
+     */
+    showLeadingIcon = true;
+    /**
+     * Whether the field has an error
+     */
+    error = false;
+    /**
+     * Whether the input is disabled
+     */
+    disabled = false;
+    /**
+     * Whether the field is required
+     */
+    required = false;
+    /**
+     * Tooltip text for the help icon
+     */
+    helpIconTooltip = 'Password requirements';
+    /**
+     * Leading icon name (Material Symbols)
+     */
+    leadingIcon = 'lock';
+    /**
+     * The input value
+     */
+    value = '';
+    /**
+     * Name attribute for form submission
+     */
+    name = '';
+    /**
+     * Default value for form reset
+     */
+    defaultValue = '';
+    /**
+     * Custom validation message
+     */
+    validationMessage = '';
+    /**
+     * Track focus state
+     */
+    isFocused = false;
+    /**
+     * Track hover state
+     */
+    isHovered = false;
+    /**
+     * Track password visibility
+     */
+    showPassword = false;
+    /**
+     * Emitted when the value changes
+     */
+    bhInput;
+    /**
+     * Emitted when the input gains focus
+     */
+    bhFocus;
+    /**
+     * Emitted when the input loses focus
+     */
+    bhBlur;
+    /**
+     * Emitted when the help icon is clicked
+     */
+    bhHelpClick;
+    /**
+     * Emitted when visibility is toggled
+     */
+    bhVisibilityToggle;
+    componentDidLoad() {
+        syncFormValue(this);
+        updateValidity(this.internals, this.inputEl, this.validationMessage);
+    }
+    formResetCallback() {
+        this.value = this.defaultValue;
+        if (this.inputEl) {
+            this.inputEl.value = this.defaultValue;
+        }
+        syncFormValue(this);
+        updateValidity(this.internals, this.inputEl);
+    }
+    handleInput = (event) => {
+        const target = event.target;
+        this.value = target.value;
+        this.bhInput.emit(this.value);
+        syncFormValue(this);
+        updateValidity(this.internals, this.inputEl, this.validationMessage);
+    };
+    handleFocus = () => {
+        this.isFocused = true;
+        this.bhFocus.emit();
+    };
+    handleBlur = () => {
+        this.isFocused = false;
+        this.bhBlur.emit();
+    };
+    handleMouseEnter = () => {
+        if (!this.isFocused) {
+            this.isHovered = true;
+        }
+    };
+    handleMouseLeave = () => {
+        this.isHovered = false;
+    };
+    togglePasswordVisibility = () => {
+        if (!this.disabled) {
+            this.showPassword = !this.showPassword;
+            this.bhVisibilityToggle.emit(this.showPassword);
+        }
+    };
+    handleHelpClick = () => {
+        this.bhHelpClick.emit();
+    };
+    render() {
+        const containerClasses = {
+            'input-container': true,
+            'input-container-focused': this.isFocused,
+            'input-container-hover': this.isHovered && !this.isFocused,
+            'input-container-error': this.error,
+            'input-container-disabled': this.disabled,
+            'input-container-with-leading': this.showLeadingIcon,
+        };
+        return (h("div", { key: '65214ad4e72bfdf75610edcac9c3f5723ea87446', class: "input-wrapper", part: "wrapper" }, h("bh-label", { key: 'a7bfffd4d1221aba3ea7642b3589869724d50286', label: this.showLabel ? this.label : '', required: this.required, showHelpIcon: this.showHelpIcon, helpIconTooltip: this.helpIconTooltip, disabled: this.disabled, onBhHelpClick: this.handleHelpClick }, h("div", { key: '2879a7616747302fbd432321db764a6e63548dae', class: containerClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '11ef311fc118a7595cb210fac70fda53599756a2', class: "input-content" }, this.showLeadingIcon && (h("span", { key: '805a132b4411f3b4016ea522701ac419915e0e88', class: "material-symbols-outlined leading-icon" }, this.leadingIcon)), h("input", { key: '0c4f69d29acb824ccf7fd23dc11b4b4d6385a38b', ref: (el) => (this.inputEl = el), type: this.showPassword ? 'text' : 'password', class: "input-element", name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.required, "aria-label": this.label, "aria-describedby": this.showHintText && this.hintText ? 'hint-text' : undefined, "aria-invalid": String(this.error), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" })), h("span", { key: 'ce8f1bd6a95110b76a573e0f65ec43a7cfe6846b', class: "material-symbols-outlined visibility-toggle", onClick: this.togglePasswordVisibility, title: this.showPassword ? 'Hide password' : 'Show password' }, this.showPassword ? 'visibility_off' : 'visibility'))), this.showHintText && this.hintText && (h("div", { key: 'cd3f626bd84d01bcda347e2844c7150a474d91eb', class: { 'hint-text': true, 'hint-error': this.error }, id: "hint-text" }, this.hintText))));
+    }
+    static get is() { return "bh-input-password"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-input-password.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-input-password.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label for the input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Password'"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Enter your password'"
+            },
+            "hintText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hint text shown below the input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hint-text",
+                "defaultValue": "''"
+            },
+            "showLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-label",
+                "defaultValue": "true"
+            },
+            "showHintText": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show hint text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-hint-text",
+                "defaultValue": "true"
+            },
+            "showHelpIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the help icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-help-icon",
+                "defaultValue": "false"
+            },
+            "showLeadingIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show a leading icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-leading-icon",
+                "defaultValue": "true"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the field has an error"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the field is required"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "helpIconTooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip text for the help icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "help-icon-tooltip",
+                "defaultValue": "'Password requirements'"
+            },
+            "leadingIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Leading icon name (Material Symbols)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "leading-icon",
+                "defaultValue": "'lock'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The input value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "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": "''"
+            },
+            "defaultValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default value for form reset"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-value",
+                "defaultValue": "''"
+            },
+            "validationMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom validation message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "validation-message",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isFocused": {},
+            "isHovered": {},
+            "showPassword": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhInput",
+                "name": "bhInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value changes"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "bhFocus",
+                "name": "bhFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input gains focus"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bhBlur",
+                "name": "bhBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input loses focus"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bhHelpClick",
+                "name": "bhHelpClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the help icon is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bhVisibilityToggle",
+                "name": "bhVisibilityToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when visibility is toggled"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=bh-input-password.js.map

package/collection/components/bh-input-password/bh-input-password.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-input-password.js","sourceRoot":"","sources":["../../../src/components/bh-input-password/bh-input-password.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, h, AttachInternals } from '@stencil/core';\nimport { syncFormValue, updateValidity } from '../../utils/form';\n\n@Component({\n  tag: 'bh-input-password',\n  styleUrl: 'bh-input-password.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class BhInputPassword {\n  @AttachInternals() internals!: ElementInternals;\n\n  private inputEl?: HTMLInputElement;\n  /**\n   * The label for the input\n   */\n  @Prop() label: string = 'Password';\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder: string = 'Enter your password';\n\n  /**\n   * Hint text shown below the input\n   */\n  @Prop() hintText: string = '';\n\n  /**\n   * Whether to show the label\n   */\n  @Prop() showLabel: boolean = true;\n\n  /**\n   * Whether to show hint text\n   */\n  @Prop() showHintText: boolean = true;\n\n  /**\n   * Whether to show the help icon\n   */\n  @Prop() showHelpIcon: boolean = false;\n\n  /**\n   * Whether to show a leading icon\n   */\n  @Prop() showLeadingIcon: boolean = true;\n\n  /**\n   * Whether the field has an error\n   */\n  @Prop() error: boolean = false;\n\n  /**\n   * Whether the input is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the field is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Tooltip text for the help icon\n   */\n  @Prop() helpIconTooltip: string = 'Password requirements';\n\n  /**\n   * Leading icon name (Material Symbols)\n   */\n  @Prop() leadingIcon: string = 'lock';\n\n  /**\n   * The input value\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * Name attribute for form submission\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Default value for form reset\n   */\n  @Prop() defaultValue: string = '';\n\n  /**\n   * Custom validation message\n   */\n  @Prop() validationMessage: string = '';\n\n  /**\n   * Track focus state\n   */\n  @State() isFocused: boolean = false;\n\n  /**\n   * Track hover state\n   */\n  @State() isHovered: boolean = false;\n\n  /**\n   * Track password visibility\n   */\n  @State() showPassword: boolean = false;\n\n  \n  /**\n   * Emitted when the value changes\n   */\n  @Event() bhInput!: EventEmitter<string>;\n\n  /**\n   * Emitted when the input gains focus\n   */\n  @Event() bhFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input loses focus\n   */\n  @Event() bhBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the help icon is clicked\n   */\n  @Event() bhHelpClick!: EventEmitter<void>;\n\n  /**\n   * Emitted when visibility is toggled\n   */\n  @Event() bhVisibilityToggle!: EventEmitter<boolean>;\n\n  componentDidLoad() {\n    syncFormValue(this);\n    updateValidity(this.internals, this.inputEl, this.validationMessage);\n  }\n\n  formResetCallback() {\n    this.value = this.defaultValue;\n    if (this.inputEl) {\n      this.inputEl.value = this.defaultValue;\n    }\n    syncFormValue(this);\n    updateValidity(this.internals, this.inputEl);\n  }\n\n  private handleInput = (event: Event): void => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n    this.bhInput.emit(this.value);\n    syncFormValue(this);\n    updateValidity(this.internals, this.inputEl, this.validationMessage);\n  };\n\n  private handleFocus = (): void => {\n    this.isFocused = true;\n    this.bhFocus.emit();\n  };\n\n  private handleBlur = (): void => {\n    this.isFocused = false;\n    this.bhBlur.emit();\n  };\n\n  private handleMouseEnter = (): void => {\n    if (!this.isFocused) {\n      this.isHovered = true;\n    }\n  };\n\n  private handleMouseLeave = (): void => {\n    this.isHovered = false;\n  };\n\n  private togglePasswordVisibility = (): void => {\n    if (!this.disabled) {\n      this.showPassword = !this.showPassword;\n      this.bhVisibilityToggle.emit(this.showPassword);\n    }\n  };\n\n  private handleHelpClick = (): void => {\n    this.bhHelpClick.emit();\n  };\n\n  render() {\n    const containerClasses = {\n      'input-container': true,\n      'input-container-focused': this.isFocused,\n      'input-container-hover': this.isHovered && !this.isFocused,\n      'input-container-error': this.error,\n      'input-container-disabled': this.disabled,\n      'input-container-with-leading': this.showLeadingIcon,\n    };\n\n    return (\n      <div class=\"input-wrapper\" part=\"wrapper\">\n        <bh-label\n          label={this.showLabel ? this.label : ''}\n          required={this.required}\n          showHelpIcon={this.showHelpIcon}\n          helpIconTooltip={this.helpIconTooltip}\n          disabled={this.disabled}\n          onBhHelpClick={this.handleHelpClick}\n        >\n          <div\n            class={containerClasses}\n            onMouseEnter={this.handleMouseEnter}\n            onMouseLeave={this.handleMouseLeave}\n          >\n            <div class=\"input-content\">\n              {this.showLeadingIcon && (\n                <span class=\"material-symbols-outlined leading-icon\">\n                  {this.leadingIcon}\n                </span>\n              )}\n              <input\n                ref={(el) => (this.inputEl = el)}\n                type={this.showPassword ? 'text' : 'password'}\n                class=\"input-element\"\n                name={this.name}\n                value={this.value}\n                placeholder={this.placeholder}\n                disabled={this.disabled}\n                required={this.required}\n                aria-label={this.label}\n                aria-describedby={this.showHintText && this.hintText ? 'hint-text' : undefined}\n                aria-invalid={String(this.error)}\n                onInput={this.handleInput}\n                onFocus={this.handleFocus}\n                onBlur={this.handleBlur}\n                part=\"input\"\n              />\n            </div>\n            <span\n              class=\"material-symbols-outlined visibility-toggle\"\n              onClick={this.togglePasswordVisibility}\n              title={this.showPassword ? 'Hide password' : 'Show password'}\n            >\n              {this.showPassword ? 'visibility_off' : 'visibility'}\n            </span>\n          </div>\n        </bh-label>\n\n        {this.showHintText && this.hintText && (\n          <div\n            class={{ 'hint-text': true, 'hint-error': this.error }}\n            id=\"hint-text\"\n          >\n            {this.hintText}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}