snice 2.1.5 → 2.2.0

package/dist/components/input/snice-input.js

@@ -0,0 +1,567 @@
+import { __runInitializers, __esDecorate } from 'tslib';
+import { element, property, query, ready, on, watch, dispatch } from 'snice';
+
+var css = '';
+
+let SniceInput = (() => {
+    let _classDecorators = [element('snice-input')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _type_decorators;
+    let _type_initializers = [];
+    let _type_extraInitializers = [];
+    let _size_decorators;
+    let _size_initializers = [];
+    let _size_extraInitializers = [];
+    let _variant_decorators;
+    let _variant_initializers = [];
+    let _variant_extraInitializers = [];
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _placeholder_decorators;
+    let _placeholder_initializers = [];
+    let _placeholder_extraInitializers = [];
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    let _helperText_decorators;
+    let _helperText_initializers = [];
+    let _helperText_extraInitializers = [];
+    let _errorText_decorators;
+    let _errorText_initializers = [];
+    let _errorText_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    let _readonly_decorators;
+    let _readonly_initializers = [];
+    let _readonly_extraInitializers = [];
+    let _required_decorators;
+    let _required_initializers = [];
+    let _required_extraInitializers = [];
+    let _invalid_decorators;
+    let _invalid_initializers = [];
+    let _invalid_extraInitializers = [];
+    let _clearable_decorators;
+    let _clearable_initializers = [];
+    let _clearable_extraInitializers = [];
+    let _password_decorators;
+    let _password_initializers = [];
+    let _password_extraInitializers = [];
+    let _min_decorators;
+    let _min_initializers = [];
+    let _min_extraInitializers = [];
+    let _max_decorators;
+    let _max_initializers = [];
+    let _max_extraInitializers = [];
+    let _step_decorators;
+    let _step_initializers = [];
+    let _step_extraInitializers = [];
+    let _pattern_decorators;
+    let _pattern_initializers = [];
+    let _pattern_extraInitializers = [];
+    let _maxlength_decorators;
+    let _maxlength_initializers = [];
+    let _maxlength_extraInitializers = [];
+    let _minlength_decorators;
+    let _minlength_initializers = [];
+    let _minlength_extraInitializers = [];
+    let _autocomplete_decorators;
+    let _autocomplete_initializers = [];
+    let _autocomplete_extraInitializers = [];
+    let _name_decorators;
+    let _name_initializers = [];
+    let _name_extraInitializers = [];
+    let _prefixIcon_decorators;
+    let _prefixIcon_initializers = [];
+    let _prefixIcon_extraInitializers = [];
+    let _suffixIcon_decorators;
+    let _suffixIcon_initializers = [];
+    let _suffixIcon_extraInitializers = [];
+    let _input_decorators;
+    let _input_initializers = [];
+    let _input_extraInitializers = [];
+    let _clearButton_decorators;
+    let _clearButton_initializers = [];
+    let _clearButton_extraInitializers = [];
+    let _passwordToggle_decorators;
+    let _passwordToggle_initializers = [];
+    let _passwordToggle_extraInitializers = [];
+    let _init_decorators;
+    let _handleInput_decorators;
+    let _handleChange_decorators;
+    let _handleFocus_decorators;
+    let _handleBlur_decorators;
+    let _handleClear_decorators;
+    let _handlePasswordToggle_decorators;
+    let _handleValueChange_decorators;
+    let _handleInvalidChange_decorators;
+    let _handleDisabledChange_decorators;
+    let _handleReadonlyChange_decorators;
+    let _handlePlaceholderChange_decorators;
+    let _handleMinChange_decorators;
+    let _handleMaxChange_decorators;
+    let _handleStepChange_decorators;
+    let _handleMaxLengthChange_decorators;
+    let _handleMinLengthChange_decorators;
+    let _handlePatternChange_decorators;
+    let _handleTypeChange_decorators;
+    let _handleLabelChange_decorators;
+    let _dispatchInputEvent_decorators;
+    let _dispatchChangeEvent_decorators;
+    let _dispatchFocusEvent_decorators;
+    let _dispatchBlurEvent_decorators;
+    let _dispatchClearEvent_decorators;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        constructor() {
+            super(...arguments);
+            this.type = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _type_initializers, 'text'));
+            this.size = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _size_initializers, 'medium'));
+            this.variant = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _variant_initializers, 'outlined'));
+            this.value = (__runInitializers(this, _variant_extraInitializers), __runInitializers(this, _value_initializers, ''));
+            this.placeholder = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _placeholder_initializers, ''));
+            this.label = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _label_initializers, ''));
+            this.helperText = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _helperText_initializers, ''));
+            this.errorText = (__runInitializers(this, _helperText_extraInitializers), __runInitializers(this, _errorText_initializers, ''));
+            this.disabled = (__runInitializers(this, _errorText_extraInitializers), __runInitializers(this, _disabled_initializers, false));
+            this.readonly = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _readonly_initializers, false));
+            this.required = (__runInitializers(this, _readonly_extraInitializers), __runInitializers(this, _required_initializers, false));
+            this.invalid = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _invalid_initializers, false));
+            this.clearable = (__runInitializers(this, _invalid_extraInitializers), __runInitializers(this, _clearable_initializers, false));
+            this.password = (__runInitializers(this, _clearable_extraInitializers), __runInitializers(this, _password_initializers, false));
+            this.min = (__runInitializers(this, _password_extraInitializers), __runInitializers(this, _min_initializers, ''));
+            this.max = (__runInitializers(this, _min_extraInitializers), __runInitializers(this, _max_initializers, ''));
+            this.step = (__runInitializers(this, _max_extraInitializers), __runInitializers(this, _step_initializers, ''));
+            this.pattern = (__runInitializers(this, _step_extraInitializers), __runInitializers(this, _pattern_initializers, ''));
+            this.maxlength = (__runInitializers(this, _pattern_extraInitializers), __runInitializers(this, _maxlength_initializers, -1));
+            this.minlength = (__runInitializers(this, _maxlength_extraInitializers), __runInitializers(this, _minlength_initializers, -1));
+            this.autocomplete = (__runInitializers(this, _minlength_extraInitializers), __runInitializers(this, _autocomplete_initializers, ''));
+            this.name = (__runInitializers(this, _autocomplete_extraInitializers), __runInitializers(this, _name_initializers, ''));
+            this.prefixIcon = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _prefixIcon_initializers, ''));
+            this.suffixIcon = (__runInitializers(this, _prefixIcon_extraInitializers), __runInitializers(this, _suffixIcon_initializers, ''));
+            this.input = (__runInitializers(this, _suffixIcon_extraInitializers), __runInitializers(this, _input_initializers, void 0));
+            this.clearButton = (__runInitializers(this, _input_extraInitializers), __runInitializers(this, _clearButton_initializers, void 0));
+            this.passwordToggle = (__runInitializers(this, _clearButton_extraInitializers), __runInitializers(this, _passwordToggle_initializers, void 0));
+            this.showPassword = (__runInitializers(this, _passwordToggle_extraInitializers), false);
+        }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _type_decorators = [property({ reflect: true })];
+            _size_decorators = [property({ reflect: true })];
+            _variant_decorators = [property({ reflect: true })];
+            _value_decorators = [property({ reflect: true })];
+            _placeholder_decorators = [property({ reflect: true })];
+            _label_decorators = [property({ reflect: true })];
+            _helperText_decorators = [property({ attribute: 'helper-text', reflect: true })];
+            _errorText_decorators = [property({ attribute: 'error-text', reflect: true })];
+            _disabled_decorators = [property({ type: Boolean, reflect: true })];
+            _readonly_decorators = [property({ type: Boolean, reflect: true })];
+            _required_decorators = [property({ type: Boolean, reflect: true })];
+            _invalid_decorators = [property({ type: Boolean, reflect: true })];
+            _clearable_decorators = [property({ type: Boolean, reflect: true })];
+            _password_decorators = [property({ type: Boolean, reflect: true })];
+            _min_decorators = [property({ reflect: true })];
+            _max_decorators = [property({ reflect: true })];
+            _step_decorators = [property({ reflect: true })];
+            _pattern_decorators = [property({ reflect: true })];
+            _maxlength_decorators = [property({ type: Number, reflect: true })];
+            _minlength_decorators = [property({ type: Number, reflect: true })];
+            _autocomplete_decorators = [property({ reflect: true })];
+            _name_decorators = [property({ reflect: true })];
+            _prefixIcon_decorators = [property({ attribute: 'prefix-icon', reflect: true })];
+            _suffixIcon_decorators = [property({ attribute: 'suffix-icon', reflect: true })];
+            _input_decorators = [query('.input')];
+            _clearButton_decorators = [query('.clear-button')];
+            _passwordToggle_decorators = [query('.password-toggle')];
+            _init_decorators = [ready()];
+            _handleInput_decorators = [on('input', '.input')];
+            _handleChange_decorators = [on('change', '.input')];
+            _handleFocus_decorators = [on('focus', '.input')];
+            _handleBlur_decorators = [on('blur', '.input')];
+            _handleClear_decorators = [on('click', '.clear-button')];
+            _handlePasswordToggle_decorators = [on('click', '.password-toggle')];
+            _handleValueChange_decorators = [watch('value')];
+            _handleInvalidChange_decorators = [watch('invalid')];
+            _handleDisabledChange_decorators = [watch('disabled')];
+            _handleReadonlyChange_decorators = [watch('readonly')];
+            _handlePlaceholderChange_decorators = [watch('placeholder')];
+            _handleMinChange_decorators = [watch('min')];
+            _handleMaxChange_decorators = [watch('max')];
+            _handleStepChange_decorators = [watch('step')];
+            _handleMaxLengthChange_decorators = [watch('maxlength')];
+            _handleMinLengthChange_decorators = [watch('minlength')];
+            _handlePatternChange_decorators = [watch('pattern')];
+            _handleTypeChange_decorators = [watch('type')];
+            _handleLabelChange_decorators = [watch('label')];
+            _dispatchInputEvent_decorators = [dispatch('@snice/input-input', { bubbles: true, composed: true })];
+            _dispatchChangeEvent_decorators = [dispatch('@snice/input-change', { bubbles: true, composed: true })];
+            _dispatchFocusEvent_decorators = [dispatch('@snice/input-focus', { bubbles: true, composed: true })];
+            _dispatchBlurEvent_decorators = [dispatch('@snice/input-blur', { bubbles: true, composed: true })];
+            _dispatchClearEvent_decorators = [dispatch('@snice/input-clear', { bubbles: true, composed: true })];
+            __esDecorate(this, null, _init_decorators, { kind: "method", name: "init", static: false, private: false, access: { has: obj => "init" in obj, get: obj => obj.init }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleInput_decorators, { kind: "method", name: "handleInput", static: false, private: false, access: { has: obj => "handleInput" in obj, get: obj => obj.handleInput }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleChange_decorators, { kind: "method", name: "handleChange", static: false, private: false, access: { has: obj => "handleChange" in obj, get: obj => obj.handleChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleFocus_decorators, { kind: "method", name: "handleFocus", static: false, private: false, access: { has: obj => "handleFocus" in obj, get: obj => obj.handleFocus }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleBlur_decorators, { kind: "method", name: "handleBlur", static: false, private: false, access: { has: obj => "handleBlur" in obj, get: obj => obj.handleBlur }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleClear_decorators, { kind: "method", name: "handleClear", static: false, private: false, access: { has: obj => "handleClear" in obj, get: obj => obj.handleClear }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handlePasswordToggle_decorators, { kind: "method", name: "handlePasswordToggle", static: false, private: false, access: { has: obj => "handlePasswordToggle" in obj, get: obj => obj.handlePasswordToggle }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleValueChange_decorators, { kind: "method", name: "handleValueChange", static: false, private: false, access: { has: obj => "handleValueChange" in obj, get: obj => obj.handleValueChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleInvalidChange_decorators, { kind: "method", name: "handleInvalidChange", static: false, private: false, access: { has: obj => "handleInvalidChange" in obj, get: obj => obj.handleInvalidChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleDisabledChange_decorators, { kind: "method", name: "handleDisabledChange", static: false, private: false, access: { has: obj => "handleDisabledChange" in obj, get: obj => obj.handleDisabledChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleReadonlyChange_decorators, { kind: "method", name: "handleReadonlyChange", static: false, private: false, access: { has: obj => "handleReadonlyChange" in obj, get: obj => obj.handleReadonlyChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handlePlaceholderChange_decorators, { kind: "method", name: "handlePlaceholderChange", static: false, private: false, access: { has: obj => "handlePlaceholderChange" in obj, get: obj => obj.handlePlaceholderChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleMinChange_decorators, { kind: "method", name: "handleMinChange", static: false, private: false, access: { has: obj => "handleMinChange" in obj, get: obj => obj.handleMinChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleMaxChange_decorators, { kind: "method", name: "handleMaxChange", static: false, private: false, access: { has: obj => "handleMaxChange" in obj, get: obj => obj.handleMaxChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleStepChange_decorators, { kind: "method", name: "handleStepChange", static: false, private: false, access: { has: obj => "handleStepChange" in obj, get: obj => obj.handleStepChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleMaxLengthChange_decorators, { kind: "method", name: "handleMaxLengthChange", static: false, private: false, access: { has: obj => "handleMaxLengthChange" in obj, get: obj => obj.handleMaxLengthChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleMinLengthChange_decorators, { kind: "method", name: "handleMinLengthChange", static: false, private: false, access: { has: obj => "handleMinLengthChange" in obj, get: obj => obj.handleMinLengthChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handlePatternChange_decorators, { kind: "method", name: "handlePatternChange", static: false, private: false, access: { has: obj => "handlePatternChange" in obj, get: obj => obj.handlePatternChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleTypeChange_decorators, { kind: "method", name: "handleTypeChange", static: false, private: false, access: { has: obj => "handleTypeChange" in obj, get: obj => obj.handleTypeChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleLabelChange_decorators, { kind: "method", name: "handleLabelChange", static: false, private: false, access: { has: obj => "handleLabelChange" in obj, get: obj => obj.handleLabelChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _dispatchInputEvent_decorators, { kind: "method", name: "dispatchInputEvent", static: false, private: false, access: { has: obj => "dispatchInputEvent" in obj, get: obj => obj.dispatchInputEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _dispatchChangeEvent_decorators, { kind: "method", name: "dispatchChangeEvent", static: false, private: false, access: { has: obj => "dispatchChangeEvent" in obj, get: obj => obj.dispatchChangeEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _dispatchFocusEvent_decorators, { kind: "method", name: "dispatchFocusEvent", static: false, private: false, access: { has: obj => "dispatchFocusEvent" in obj, get: obj => obj.dispatchFocusEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _dispatchBlurEvent_decorators, { kind: "method", name: "dispatchBlurEvent", static: false, private: false, access: { has: obj => "dispatchBlurEvent" in obj, get: obj => obj.dispatchBlurEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _dispatchClearEvent_decorators, { kind: "method", name: "dispatchClearEvent", static: false, private: false, access: { has: obj => "dispatchClearEvent" in obj, get: obj => obj.dispatchClearEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _type_decorators, { kind: "field", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
+            __esDecorate(null, null, _size_decorators, { kind: "field", name: "size", static: false, private: false, access: { has: obj => "size" in obj, get: obj => obj.size, set: (obj, value) => { obj.size = value; } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
+            __esDecorate(null, null, _variant_decorators, { kind: "field", name: "variant", static: false, private: false, access: { has: obj => "variant" in obj, get: obj => obj.variant, set: (obj, value) => { obj.variant = value; } }, metadata: _metadata }, _variant_initializers, _variant_extraInitializers);
+            __esDecorate(null, null, _value_decorators, { kind: "field", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+            __esDecorate(null, null, _placeholder_decorators, { kind: "field", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_extraInitializers);
+            __esDecorate(null, null, _label_decorators, { kind: "field", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
+            __esDecorate(null, null, _helperText_decorators, { kind: "field", name: "helperText", static: false, private: false, access: { has: obj => "helperText" in obj, get: obj => obj.helperText, set: (obj, value) => { obj.helperText = value; } }, metadata: _metadata }, _helperText_initializers, _helperText_extraInitializers);
+            __esDecorate(null, null, _errorText_decorators, { kind: "field", name: "errorText", static: false, private: false, access: { has: obj => "errorText" in obj, get: obj => obj.errorText, set: (obj, value) => { obj.errorText = value; } }, metadata: _metadata }, _errorText_initializers, _errorText_extraInitializers);
+            __esDecorate(null, null, _disabled_decorators, { kind: "field", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
+            __esDecorate(null, null, _readonly_decorators, { kind: "field", name: "readonly", static: false, private: false, access: { has: obj => "readonly" in obj, get: obj => obj.readonly, set: (obj, value) => { obj.readonly = value; } }, metadata: _metadata }, _readonly_initializers, _readonly_extraInitializers);
+            __esDecorate(null, null, _required_decorators, { kind: "field", name: "required", static: false, private: false, access: { has: obj => "required" in obj, get: obj => obj.required, set: (obj, value) => { obj.required = value; } }, metadata: _metadata }, _required_initializers, _required_extraInitializers);
+            __esDecorate(null, null, _invalid_decorators, { kind: "field", name: "invalid", static: false, private: false, access: { has: obj => "invalid" in obj, get: obj => obj.invalid, set: (obj, value) => { obj.invalid = value; } }, metadata: _metadata }, _invalid_initializers, _invalid_extraInitializers);
+            __esDecorate(null, null, _clearable_decorators, { kind: "field", name: "clearable", static: false, private: false, access: { has: obj => "clearable" in obj, get: obj => obj.clearable, set: (obj, value) => { obj.clearable = value; } }, metadata: _metadata }, _clearable_initializers, _clearable_extraInitializers);
+            __esDecorate(null, null, _password_decorators, { kind: "field", name: "password", static: false, private: false, access: { has: obj => "password" in obj, get: obj => obj.password, set: (obj, value) => { obj.password = value; } }, metadata: _metadata }, _password_initializers, _password_extraInitializers);
+            __esDecorate(null, null, _min_decorators, { kind: "field", name: "min", static: false, private: false, access: { has: obj => "min" in obj, get: obj => obj.min, set: (obj, value) => { obj.min = value; } }, metadata: _metadata }, _min_initializers, _min_extraInitializers);
+            __esDecorate(null, null, _max_decorators, { kind: "field", name: "max", static: false, private: false, access: { has: obj => "max" in obj, get: obj => obj.max, set: (obj, value) => { obj.max = value; } }, metadata: _metadata }, _max_initializers, _max_extraInitializers);
+            __esDecorate(null, null, _step_decorators, { kind: "field", name: "step", static: false, private: false, access: { has: obj => "step" in obj, get: obj => obj.step, set: (obj, value) => { obj.step = value; } }, metadata: _metadata }, _step_initializers, _step_extraInitializers);
+            __esDecorate(null, null, _pattern_decorators, { kind: "field", name: "pattern", static: false, private: false, access: { has: obj => "pattern" in obj, get: obj => obj.pattern, set: (obj, value) => { obj.pattern = value; } }, metadata: _metadata }, _pattern_initializers, _pattern_extraInitializers);
+            __esDecorate(null, null, _maxlength_decorators, { kind: "field", name: "maxlength", static: false, private: false, access: { has: obj => "maxlength" in obj, get: obj => obj.maxlength, set: (obj, value) => { obj.maxlength = value; } }, metadata: _metadata }, _maxlength_initializers, _maxlength_extraInitializers);
+            __esDecorate(null, null, _minlength_decorators, { kind: "field", name: "minlength", static: false, private: false, access: { has: obj => "minlength" in obj, get: obj => obj.minlength, set: (obj, value) => { obj.minlength = value; } }, metadata: _metadata }, _minlength_initializers, _minlength_extraInitializers);
+            __esDecorate(null, null, _autocomplete_decorators, { kind: "field", name: "autocomplete", static: false, private: false, access: { has: obj => "autocomplete" in obj, get: obj => obj.autocomplete, set: (obj, value) => { obj.autocomplete = value; } }, metadata: _metadata }, _autocomplete_initializers, _autocomplete_extraInitializers);
+            __esDecorate(null, null, _name_decorators, { kind: "field", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
+            __esDecorate(null, null, _prefixIcon_decorators, { kind: "field", name: "prefixIcon", static: false, private: false, access: { has: obj => "prefixIcon" in obj, get: obj => obj.prefixIcon, set: (obj, value) => { obj.prefixIcon = value; } }, metadata: _metadata }, _prefixIcon_initializers, _prefixIcon_extraInitializers);
+            __esDecorate(null, null, _suffixIcon_decorators, { kind: "field", name: "suffixIcon", static: false, private: false, access: { has: obj => "suffixIcon" in obj, get: obj => obj.suffixIcon, set: (obj, value) => { obj.suffixIcon = value; } }, metadata: _metadata }, _suffixIcon_initializers, _suffixIcon_extraInitializers);
+            __esDecorate(null, null, _input_decorators, { kind: "field", name: "input", static: false, private: false, access: { has: obj => "input" in obj, get: obj => obj.input, set: (obj, value) => { obj.input = value; } }, metadata: _metadata }, _input_initializers, _input_extraInitializers);
+            __esDecorate(null, null, _clearButton_decorators, { kind: "field", name: "clearButton", static: false, private: false, access: { has: obj => "clearButton" in obj, get: obj => obj.clearButton, set: (obj, value) => { obj.clearButton = value; } }, metadata: _metadata }, _clearButton_initializers, _clearButton_extraInitializers);
+            __esDecorate(null, null, _passwordToggle_decorators, { kind: "field", name: "passwordToggle", static: false, private: false, access: { has: obj => "passwordToggle" in obj, get: obj => obj.passwordToggle, set: (obj, value) => { obj.passwordToggle = value; } }, metadata: _metadata }, _passwordToggle_initializers, _passwordToggle_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        html() {
+            return /*html*/ `
+      <div class="input-wrapper">
+        ${this.label ? /*html*/ `
+          <label class="label ${this.required ? 'label--required' : ''}">
+            ${this.label}
+          </label>
+        ` : ''}
+        
+        <div class="input-container">
+          ${this.prefixIcon ? /*html*/ `
+            <span class="icon icon--prefix">${this.prefixIcon}</span>
+          ` : ''}
+          
+          <input
+            class="input 
+              input--${this.size} 
+              input--${this.variant}
+              ${this.invalid ? 'input--invalid' : ''}
+              ${this.prefixIcon ? 'input--with-prefix-icon' : ''}
+              ${this.suffixIcon || (this.type === 'password' && this.password) ? 'input--with-suffix-icon' : ''}
+              ${this.clearable ? 'input--clearable' : ''}"
+            type="${this.type}"
+            value="${this.value}"
+            placeholder="${this.placeholder}"
+            ${this.disabled ? 'disabled' : ''}
+            ${this.readonly ? 'readonly' : ''}
+            ${this.required ? 'required' : ''}
+            ${this.min ? `min="${this.min}"` : ''}
+            ${this.max ? `max="${this.max}"` : ''}
+            ${this.step ? `step="${this.step}"` : ''}
+            ${this.pattern ? `pattern="${this.pattern}"` : ''}
+            ${this.maxlength > 0 ? `maxlength="${this.maxlength}"` : ''}
+            ${this.minlength > 0 ? `minlength="${this.minlength}"` : ''}
+            ${this.autocomplete ? `autocomplete="${this.autocomplete}"` : ''}
+            ${this.name ? `name="${this.name}"` : ''}
+            part="input"
+          />
+          
+          <button
+            class="clear-button ${this.suffixIcon || (this.type === 'password' && this.password) ? 'clear-button--with-suffix' : ''}"
+            type="button"
+            aria-label="Clear"
+            tabindex="-1"
+            part="clear"
+            style="display: none;"
+          >
+            <svg viewBox="0 0 24 24" width="16" height="16">
+              <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="currentColor"/>
+            </svg>
+          </button>
+          
+          ${this.type === 'password' && this.password ? /*html*/ `
+            <button
+              class="password-toggle"
+              type="button"
+              aria-label="Show password"
+              tabindex="-1"
+              part="password-toggle"
+            >
+              <svg viewBox="0 0 24 24" width="18" height="18" class="password-icon password-icon--hidden">
+                <path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z" fill="currentColor"/>
+              </svg>
+              <svg viewBox="0 0 24 24" width="18" height="18" class="password-icon password-icon--visible" style="display: none;">
+                <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="currentColor"/>
+              </svg>
+            </button>
+          ` : this.suffixIcon ? /*html*/ `
+            <span class="icon icon--suffix">${this.suffixIcon}</span>
+          ` : ''}
+        </div>
+        
+        ${this.errorText ? /*html*/ `
+          <span class="error-text" part="error-text">${this.errorText}</span>
+        ` : this.helperText ? /*html*/ `
+          <span class="helper-text" part="helper-text">${this.helperText}</span>
+        ` : /*html*/ `
+          <span class="helper-text" part="helper-text">&nbsp;</span>
+        `}
+      </div>
+    `;
+        }
+        css() {
+            return css;
+        }
+        init() {
+            // Set initial clear button visibility
+            if (this.clearButton && this.clearable) {
+                const shouldShow = this.value && !this.disabled && !this.readonly;
+                this.clearButton.style.display = shouldShow ? '' : 'none';
+                this.clearButton.classList.toggle('clear-button--visible', !!shouldShow);
+            }
+            // Set initial invalid state
+            if (this.input && this.invalid) {
+                this.input.setAttribute('aria-invalid', 'true');
+                this.input.classList.add('input--invalid');
+            }
+            // Set initial input properties that may not be properly set via attributes
+            if (this.input) {
+                // Number input constraints
+                if (this.type === 'number') {
+                    if (this.min)
+                        this.input.min = this.min;
+                    if (this.max)
+                        this.input.max = this.max;
+                    if (this.step)
+                        this.input.step = this.step;
+                }
+                // Text constraints
+                if (this.maxlength > 0)
+                    this.input.maxLength = this.maxlength;
+                if (this.minlength > 0)
+                    this.input.minLength = this.minlength;
+                // Other properties
+                if (this.pattern)
+                    this.input.pattern = this.pattern;
+                if (this.placeholder)
+                    this.input.placeholder = this.placeholder;
+                if (this.value)
+                    this.input.value = this.value;
+                this.input.disabled = this.disabled;
+                this.input.readOnly = this.readonly;
+                this.input.required = this.required;
+            }
+        }
+        handleInput(e) {
+            const target = e.target;
+            this.value = target.value;
+            this.dispatchInputEvent();
+        }
+        handleChange(e) {
+            const target = e.target;
+            this.value = target.value;
+            this.dispatchChangeEvent();
+        }
+        handleFocus() {
+            this.dispatchFocusEvent();
+        }
+        handleBlur() {
+            this.dispatchBlurEvent();
+        }
+        handleClear() {
+            this.clear();
+        }
+        handlePasswordToggle() {
+            this.showPassword = !this.showPassword;
+            if (this.input) {
+                this.input.type = this.showPassword ? 'text' : 'password';
+            }
+            if (this.passwordToggle) {
+                const hiddenIcon = this.passwordToggle.querySelector('.password-icon--hidden');
+                const visibleIcon = this.passwordToggle.querySelector('.password-icon--visible');
+                if (hiddenIcon && visibleIcon) {
+                    hiddenIcon.style.display = this.showPassword ? 'none' : '';
+                    visibleIcon.style.display = this.showPassword ? '' : 'none';
+                    this.passwordToggle.setAttribute('aria-label', this.showPassword ? 'Hide password' : 'Show password');
+                }
+            }
+        }
+        handleValueChange() {
+            if (this.input) {
+                this.input.value = this.value;
+            }
+            // Show/hide clear button based on value
+            if (this.clearButton && this.clearable) {
+                const shouldShow = this.value && !this.disabled && !this.readonly;
+                this.clearButton.style.display = shouldShow ? '' : 'none';
+                this.clearButton.classList.toggle('clear-button--visible', !!shouldShow);
+            }
+        }
+        handleInvalidChange() {
+            if (this.input) {
+                this.input.setAttribute('aria-invalid', String(this.invalid));
+                if (this.invalid) {
+                    this.input.classList.add('input--invalid');
+                }
+                else {
+                    this.input.classList.remove('input--invalid');
+                }
+            }
+        }
+        handleDisabledChange() {
+            if (this.input) {
+                this.input.disabled = this.disabled;
+            }
+            // Update clear button visibility
+            if (this.clearButton && this.clearable) {
+                const shouldShow = this.value && !this.disabled && !this.readonly;
+                this.clearButton.style.display = shouldShow ? '' : 'none';
+                this.clearButton.classList.toggle('clear-button--visible', !!shouldShow);
+            }
+        }
+        handleReadonlyChange() {
+            if (this.input) {
+                this.input.readOnly = this.readonly;
+            }
+            // Update clear button visibility
+            if (this.clearButton && this.clearable) {
+                const shouldShow = this.value && !this.disabled && !this.readonly;
+                this.clearButton.style.display = shouldShow ? '' : 'none';
+                this.clearButton.classList.toggle('clear-button--visible', !!shouldShow);
+            }
+        }
+        handlePlaceholderChange() {
+            if (this.input) {
+                this.input.placeholder = this.placeholder;
+            }
+        }
+        handleMinChange() {
+            if (this.input && this.type === 'number') {
+                this.input.min = this.min;
+            }
+        }
+        handleMaxChange() {
+            if (this.input && this.type === 'number') {
+                this.input.max = this.max;
+            }
+        }
+        handleStepChange() {
+            if (this.input && this.type === 'number') {
+                this.input.step = this.step;
+            }
+        }
+        handleMaxLengthChange() {
+            if (this.input && this.maxlength > 0) {
+                this.input.maxLength = this.maxlength;
+            }
+        }
+        handleMinLengthChange() {
+            if (this.input && this.minlength > 0) {
+                this.input.minLength = this.minlength;
+            }
+        }
+        handlePatternChange() {
+            if (this.input) {
+                this.input.pattern = this.pattern;
+            }
+        }
+        handleTypeChange() {
+            if (this.input && this.type !== 'password') {
+                // Don't change type for password fields (handled by toggle)
+                this.input.type = this.type;
+            }
+        }
+        handleLabelChange() {
+            const labelEl = this.shadowRoot?.querySelector('.label');
+            if (labelEl) {
+                labelEl.textContent = this.label;
+                // Show/hide the label wrapper
+                const wrapper = labelEl.parentElement;
+                if (wrapper) {
+                    wrapper.style.display = this.label ? '' : 'none';
+                }
+            }
+        }
+        dispatchInputEvent() {
+            return { value: this.value, input: this };
+        }
+        dispatchChangeEvent() {
+            return { value: this.value, input: this };
+        }
+        dispatchFocusEvent() {
+            return { input: this };
+        }
+        dispatchBlurEvent() {
+            return { input: this };
+        }
+        dispatchClearEvent() {
+            return { input: this };
+        }
+        // Public API
+        focus() {
+            this.input?.focus();
+        }
+        blur() {
+            this.input?.blur();
+        }
+        select() {
+            this.input?.select();
+        }
+        clear() {
+            this.value = '';
+            if (this.input) {
+                this.input.value = '';
+            }
+            this.dispatchClearEvent();
+            this.dispatchInputEvent();
+            this.dispatchChangeEvent();
+            this.focus();
+        }
+        checkValidity() {
+            return this.input?.checkValidity() ?? true;
+        }
+        reportValidity() {
+            return this.input?.reportValidity() ?? true;
+        }
+        setCustomValidity(message) {
+            this.input?.setCustomValidity(message);
+        }
+    });
+    return _classThis;
+})();
+
+export { SniceInput };
+//# sourceMappingURL=snice-input.js.map