@actabldesign/bellhop-core 0.0.3

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

@@ -0,0 +1 @@
+{"version":3,"file":"bh-input-text.js","sourceRoot":"","sources":["../../../src/components/bh-input-text/bh-input-text.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-text',\n  styleUrl: 'bh-input-text.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class BhInputText {\n  @AttachInternals() internals!: ElementInternals;\n\n  private inputEl?: HTMLInputElement;\n  /**\n   * The label for the input\n   */\n  @Prop() label: string = 'Email';\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder: string = 'fujiwara@act-hq.com';\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 = false;\n\n  /**\n   * Whether to show a trailing icon\n   */\n  @Prop() showTrailingIcon: boolean = false;\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 = 'Help';\n\n  /**\n   * Leading icon name (Material Symbols)\n   */\n  @Prop() leadingIcon: string = 'mail';\n\n  /**\n   * Trailing icon name (Material Symbols)\n   */\n  @Prop() trailingIcon: string = 'search';\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   * Input type (text, email, tel, url, etc.)\n   */\n  @Prop() type: string = 'text';\n\n  /**\n   * Width of the input (e.g., '100%', '200px')\n   */\n  @Prop() width: string = '';\n\n  /**\n   * Whether the input is read-only\n   */\n  @Prop() readOnly: boolean = false;\n\n  /**\n   * Visual state of the input (for programmatic control)\n   */\n  @Prop() state: 'default' | 'error' | 'disabled' | 'focus' | 'filled' | 'hover' = 'default';\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   * 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  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  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 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 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    const wrapperStyle = this.width ? { width: this.width } : {};\n\n    return (\n      <div class=\"input-wrapper\" part=\"wrapper\" style={wrapperStyle}>\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.type}\n                class=\"input-element\"\n                name={this.name}\n                value={this.value}\n                placeholder={this.placeholder}\n                disabled={this.disabled}\n                readOnly={this.readOnly}\n                required={this.required}\n                aria-label={this.label}\n                aria-describedby={\n                  this.showHintText && this.hintText ? 'hint-text' : undefined\n                }\n                aria-invalid={String(this.error)}\n                onInput={this.handleInput}\n                onFocus={this.handleFocus}\n                onBlur={this.handleBlur}\n                part=\"input\"\n              />\n              {this.showTrailingIcon && (\n                <span class=\"material-symbols-outlined trailing-icon\">\n                  {this.trailingIcon}\n                </span>\n              )}\n            </div>\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"]}

package/collection/components/bh-input-verification/bh-input-verification.css

@@ -0,0 +1,125 @@
+:host {
+  display: block;
+}
+
+.input-verification-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  width: fit-content;
+}
+
+.input-verification-container {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.verification-input {
+  width: 64px;
+  height: 64px;
+  padding: 0;
+  border: 1px solid var(--color-neutral-300);
+  border-radius: var(--radius-lg);
+  background-color: var(--color-white);
+  font-family: var(--font-inter);
+  font-size: 3rem;
+  font-weight: var(--weight-medium);
+  line-height: 1;
+  color: var(--color-neutral-900);
+  transition: all 150ms ease;
+  outline: none;
+  box-sizing: border-box;
+}
+
+/* Size variants */
+.verification-input.size-sm {
+  width: 64px;
+  height: 64px;
+  font-size: 3rem;
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-xl) var(--spacing-md);
+}
+
+.verification-input.size-md {
+  width: 80px;
+  height: 80px;
+  font-size: 3rem;
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-2xl) var(--spacing-3xl);
+}
+
+.verification-input.size-lg {
+  width: 96px;
+  height: 96px;
+  font-size: 3.75rem;
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-3xl) var(--spacing-4xl);
+}
+
+/* States */
+.verification-input:hover:not(:disabled) {
+  border-color: var(--color-neutral-400);
+}
+
+.verification-input:focus {
+  border-color: var(--color-brand-300);
+  box-shadow: 0 0 0 4px var(--color-brand-100);
+}
+
+.verification-input.error {
+  border-color: var(--color-error-300);
+}
+
+.verification-input.error:focus {
+  border-color: var(--color-error-300);
+  box-shadow: 0 0 0 4px var(--color-error-100);
+}
+
+.verification-input:disabled {
+  background-color: var(--color-neutral-50);
+  border-color: var(--color-neutral-300);
+  color: var(--color-neutral-400);
+  cursor: not-allowed;
+}
+
+.separator {
+  font-family: var(--font-inter);
+  font-size: 1.5rem;
+  font-weight: var(--weight-medium);
+  color: var(--color-neutral-400);
+  margin: 0 var(--spacing-xs);
+  line-height: 1;
+}
+
+.separator.size-sm {
+  font-size: 1.5rem;
+}
+
+.separator.size-md {
+  font-size: 1.5rem;
+}
+
+.separator.size-lg {
+  font-size: 1.875rem;
+}
+
+.hint-text {
+  font-family: var(--font-inter);
+  font-size: var(--text-sm-size);
+  font-weight: var(--weight-regular);
+  line-height: var(--text-sm-line);
+  color: var(--color-neutral-600);
+  margin-top: var(--spacing-xs);
+}
+
+.hint-text.error {
+  color: var(--color-error-600);
+}
+
+.verification-input::placeholder {
+  color: var(--color-neutral-400);
+  opacity: 1;
+  font-size: inherit;
+  font-weight: var(--weight-regular);
+}

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

@@ -0,0 +1,523 @@
+import { h } from "@stencil/core";
+export class BhInputVerification {
+    el;
+    /**
+     * Size variant of the input fields
+     */
+    size = 'md';
+    /**
+     * Number of digits (4 or 6)
+     */
+    digits = 4;
+    /**
+     * Label text for the input
+     */
+    label = 'Secure code';
+    /**
+     * Whether to show the label
+     */
+    showLabel = true;
+    /**
+     * Hint text displayed below the inputs
+     */
+    hintText = 'This is a hint text to help user.';
+    /**
+     * Whether to show the hint text
+     */
+    showHintText = true;
+    /**
+     * Whether the input is in an error state
+     */
+    error = false;
+    /**
+     * Whether the input is disabled
+     */
+    disabled = false;
+    /**
+     * Whether the field is required
+     */
+    required = false;
+    /**
+     * Whether to show the separator for 6-digit codes
+     */
+    showSeparator = true;
+    /**
+     * Placeholder character for empty inputs
+     */
+    placeholder = '';
+    /**
+     * Width of the component
+     */
+    width = '';
+    /**
+     * Current value of the verification code
+     */
+    value = '';
+    values = [];
+    inputRefs = [];
+    /**
+     * Event emitted when the value changes
+     */
+    bhChange;
+    /**
+     * Event emitted when all digits are filled
+     */
+    bhComplete;
+    watchValue(newValue) {
+        const newValues = newValue.split('').concat(Array(this.digits).fill('')).slice(0, this.digits);
+        this.values = newValues;
+    }
+    watchDigits() {
+        this.values = Array(this.digits).fill('');
+    }
+    componentWillLoad() {
+        this.values = this.value
+            ? this.value.split('').concat(Array(this.digits).fill('')).slice(0, this.digits)
+            : Array(this.digits).fill('');
+    }
+    componentDidLoad() {
+        // Focus first input on mount if not disabled
+        if (!this.disabled) {
+            const firstInput = this.el.shadowRoot?.querySelector('input');
+            firstInput?.focus();
+        }
+    }
+    updateValues(newValues) {
+        this.values = newValues;
+        const newValue = newValues.join('');
+        this.value = newValue;
+        this.bhChange.emit(newValue);
+        // Check if all fields are filled
+        if (newValues.every(val => val !== '')) {
+            this.bhComplete.emit(newValue);
+        }
+    }
+    handleInputChange(index, event) {
+        const input = event.target;
+        const inputValue = input.value;
+        // Only allow single digits
+        const digit = inputValue.replace(/\D/g, '').slice(-1);
+        const newValues = [...this.values];
+        newValues[index] = digit;
+        this.updateValues(newValues);
+        // Auto-advance to next input if digit entered
+        if (digit && index < this.digits - 1) {
+            const nextInput = this.el.shadowRoot?.querySelectorAll('input')[index + 1];
+            nextInput?.focus();
+        }
+    }
+    handleKeyDown(index, event) {
+        if (event.key === 'Backspace') {
+            event.preventDefault();
+            const newValues = [...this.values];
+            if (this.values[index]) {
+                // Clear current field
+                newValues[index] = '';
+                this.updateValues(newValues);
+            }
+            else if (index > 0) {
+                // Move to previous field and clear it
+                newValues[index - 1] = '';
+                this.updateValues(newValues);
+                const prevInput = this.el.shadowRoot?.querySelectorAll('input')[index - 1];
+                prevInput?.focus();
+            }
+        }
+        else if (event.key === 'ArrowLeft' && index > 0) {
+            event.preventDefault();
+            const prevInput = this.el.shadowRoot?.querySelectorAll('input')[index - 1];
+            prevInput?.focus();
+        }
+        else if (event.key === 'ArrowRight' && index < this.digits - 1) {
+            event.preventDefault();
+            const nextInput = this.el.shadowRoot?.querySelectorAll('input')[index + 1];
+            nextInput?.focus();
+        }
+        else if (event.key >= '0' && event.key <= '9') {
+            event.preventDefault();
+            const newValues = [...this.values];
+            newValues[index] = event.key;
+            this.updateValues(newValues);
+            // Auto-advance to next input
+            if (index < this.digits - 1) {
+                const nextInput = this.el.shadowRoot?.querySelectorAll('input')[index + 1];
+                nextInput?.focus();
+            }
+        }
+    }
+    handlePaste(event) {
+        event.preventDefault();
+        const pastedText = event.clipboardData?.getData('text') || '';
+        const pastedDigits = pastedText.replace(/\D/g, '').slice(0, this.digits);
+        if (pastedDigits) {
+            const newValues = pastedDigits.split('').concat(Array(this.digits).fill('')).slice(0, this.digits);
+            this.updateValues(newValues);
+            // Focus on the next empty input or last input
+            const nextEmptyIndex = newValues.findIndex(val => val === '');
+            const focusIndex = nextEmptyIndex === -1 ? this.digits - 1 : Math.min(nextEmptyIndex, this.digits - 1);
+            const inputToFocus = this.el.shadowRoot?.querySelectorAll('input')[focusIndex];
+            inputToFocus?.focus();
+        }
+    }
+    handleFocus(event) {
+        const input = event.target;
+        input.select();
+    }
+    renderInputs() {
+        const inputs = [];
+        for (let i = 0; i < this.digits; i++) {
+            // Add separator for 6-digit codes
+            if (this.digits === 6 && i === 3 && this.showSeparator) {
+                inputs.push(h("span", { key: "separator", class: { 'separator': true, [`size-${this.size}`]: true } }, "-"));
+            }
+            inputs.push(h("input", { key: i, type: "text", inputmode: "numeric", pattern: "[0-9]", maxLength: 1, value: this.values[i] || '', placeholder: this.placeholder && i < this.placeholder.length ? this.placeholder[i] : '', disabled: this.disabled, class: {
+                    'verification-input': true,
+                    [`size-${this.size}`]: true,
+                    'error': this.error,
+                }, onInput: (e) => this.handleInputChange(i, e), onKeyDown: (e) => this.handleKeyDown(i, e), onPaste: (e) => this.handlePaste(e), onFocus: (e) => this.handleFocus(e), "aria-label": `Digit ${i + 1} of ${this.digits}` }));
+        }
+        return inputs;
+    }
+    render() {
+        const wrapperStyle = this.width ? { width: this.width } : {};
+        return (h("div", { key: 'a7068d5407c0d09021313fc6103b5073ca74f628', class: "input-verification-wrapper", style: wrapperStyle }, h("bh-label", { key: '7b62a57a432f3d8f4df7befb87f27a09afeb51fd', label: this.showLabel ? this.label : '', required: this.required, disabled: this.disabled }, h("div", { key: '99cb7311f66b69731dc1d286bd96662c4035affb', class: "input-verification-container" }, this.renderInputs())), this.showHintText && this.hintText && (h("div", { key: '5fbfc4b1f8c3a251a0d879b2554c390126a391c1', class: { 'hint-text': true, 'error': this.error } }, this.hintText))));
+    }
+    static get is() { return "bh-input-verification"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-input-verification.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-input-verification.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputVerificationSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "InputVerificationSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-input-verification/bh-input-verification.tsx",
+                            "id": "src/components/bh-input-verification/bh-input-verification.tsx::InputVerificationSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size variant of the input fields"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "digits": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputVerificationDigits",
+                    "resolved": "4 | 6",
+                    "references": {
+                        "InputVerificationDigits": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-input-verification/bh-input-verification.tsx",
+                            "id": "src/components/bh-input-verification/bh-input-verification.tsx::InputVerificationDigits"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of digits (4 or 6)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "digits",
+                "defaultValue": "4"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text for the input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Secure code'"
+            },
+            "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"
+            },
+            "hintText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hint text displayed below the inputs"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hint-text",
+                "defaultValue": "'This is a hint text to help user.'"
+            },
+            "showHintText": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the hint text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-hint-text",
+                "defaultValue": "true"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is in an error state"
+                },
+                "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"
+            },
+            "showSeparator": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the separator for 6-digit codes"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-separator",
+                "defaultValue": "true"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder character for empty inputs"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "''"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width of the component"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current value of the verification code"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "values": {},
+            "inputRefs": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhChange",
+                "name": "bhChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the value changes"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "bhComplete",
+                "name": "bhComplete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when all digits are filled"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "watchValue"
+            }, {
+                "propName": "digits",
+                "methodName": "watchDigits"
+            }];
+    }
+}
+//# sourceMappingURL=bh-input-verification.js.map