@sula-tech/webcomponents 0.7.3 → 0.7.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/sula-avatar_18.cjs.entry.js +4 -2
- package/dist/cjs/sula-avatar_18.cjs.entry.js.map +1 -1
- package/dist/collection/components/sula-textfield/sula-textfield.js +4 -2
- package/dist/collection/components/sula-textfield/sula-textfield.js.map +1 -1
- package/dist/components/sula-textfield.js +4 -2
- package/dist/components/sula-textfield.js.map +1 -1
- package/dist/esm/sula-avatar_18.entry.js +4 -2
- package/dist/esm/sula-avatar_18.entry.js.map +1 -1
- package/dist/webcomponents/{p-43b2dde5.entry.js → p-0cad4d30.entry.js} +14 -13
- package/dist/webcomponents/{p-43b2dde5.entry.js.map → p-0cad4d30.entry.js.map} +1 -1
- package/dist/webcomponents/webcomponents.esm.js +1 -1
- package/package.json +1 -1
|
@@ -28398,6 +28398,8 @@ const SulaTextfield = class {
|
|
|
28398
28398
|
this.inputElement.focus();
|
|
28399
28399
|
}
|
|
28400
28400
|
changeElementsStyle() {
|
|
28401
|
+
if (!this.inputContainer || !this.labelElement)
|
|
28402
|
+
return;
|
|
28401
28403
|
this.inputContainer.style.display = this.inputIsOpen ? 'flex' : 'none';
|
|
28402
28404
|
this.labelElement.style.display = this.inputIsOpen ? 'none' : 'block';
|
|
28403
28405
|
if (!this.inputIsOpen) {
|
|
@@ -28422,14 +28424,14 @@ const SulaTextfield = class {
|
|
|
28422
28424
|
return this.icon;
|
|
28423
28425
|
}
|
|
28424
28426
|
render() {
|
|
28425
|
-
return (index.h(index.Host, { key: '
|
|
28427
|
+
return (index.h(index.Host, { key: 'db19982329c8a6aa8989b3a68ef61a7453ee4a99', ref: node => (this.node = node) }, index.h("div", { key: 'daf060b490b07b535cb414b11c3c75f307f127aa' }, index.h("div", { key: '1d84aec41f352537a124311c076eceec3271832a', id: "button-container", class: {
|
|
28426
28428
|
'flex items-center border rounded-sm px-16 outline-none h-[72px] caret-brand-primary': true,
|
|
28427
28429
|
'flex-row justify-between': !!this.icon || this.type === SulaTextfieldType.Password,
|
|
28428
28430
|
'button-focus': this.inputIsFocused && !this.disabled && this.status === SulaTextfieldStatus.Default,
|
|
28429
28431
|
'button-error': this.status === SulaTextfieldStatus.Error && !this.disabled,
|
|
28430
28432
|
'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,
|
|
28431
28433
|
'bg-surface-body border-line-input cursor-pointer': !this.disabled,
|
|
28432
|
-
}, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleInputClick }, !this.disabled && (index.h("div", { key: '
|
|
28434
|
+
}, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleInputClick }, !this.disabled && (index.h("div", { key: '6ec4a250e1bcd8f053b2dba7e6e6fe6842c1b9bf', class: { 'hidden flex-col w-full': true, 'pr-12': !!this.icon }, ref: node => (this.inputContainer = node) }, index.h("label", { key: '001ef2edc750497dc82a65341f98289fd8d28c6d', class: "font-bold text-sm text-text-primary from-down" }, this.label), index.h("input", { key: '96c0725c63ed92ddbc164f8efcdc003707eb0115', type: this.type, ref: node => (this.inputElement = node), placeholder: this.placeholder, class: "outline-none text-base text-text-primary bg-transparent", onInput: this.handleInputChanges, onFocus: this.handleInputFocus, value: this.textValue }))), index.h("div", { key: 'f65cd97f9ddcadcc07789d8d3dc9421e82e31d78', id: "textfield-label", class: { 'text-base flex items-center': true, 'text-text-primary': !this.disabled, 'text-text-disabled': this.disabled }, ref: node => (this.labelElement = node) }, this.label), (!!this.icon || this.type === SulaTextfieldType.Password) && (index.h("div", { key: '27596e159d5bcdd52f587350fa7ed619d5a6346e', class: "flex items-center justify-center", onClick: this.handleIconClick }, index.h("sula-icon", { key: '2fb87a5df61f3ed9f50f404ca8ff2988c71d10a7', icon: this.getInputIcon(), customClass: `text-2xl ${this.disabled ? 'text-icon-disabled' : 'text-icon-primary'}` })))), (this.helpText || this.maxLength) && !this.disabled && (index.h("div", { key: 'd54b53d64879e9a454a72c7e6726c8b0f5905baa', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (index.h("div", { key: '7ded73f462e82f41b8766e4654cd47fabf3b3a40', id: "textfield-help-text", class: { 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error } }, this.helpText)), this.maxLength && (index.h("div", { key: 'c62b62d8b8c99a775a31092479f1e4d8f581908c', id: "max-length-container", class: { 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error } }, this.textValue ? this.textValue.length : 0, "/", this.maxLength)))))));
|
|
28433
28435
|
}
|
|
28434
28436
|
static get watchers() { return {
|
|
28435
28437
|
"value": ["watchValueHandler"]
|