@sula-tech/webcomponents 0.11.2 → 0.11.3
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_21.cjs.entry.js +6 -2
- package/dist/cjs/sula-avatar_21.cjs.entry.js.map +1 -1
- package/dist/collection/components/sula-textfield/sula-textfield.js +6 -2
- package/dist/collection/components/sula-textfield/sula-textfield.js.map +1 -1
- package/dist/collection/components/sula-textfield/sula-textfield.stories.js +61 -11
- package/dist/collection/components/sula-textfield/sula-textfield.stories.js.map +1 -1
- package/dist/components/sula-textfield.js +6 -2
- package/dist/components/sula-textfield.js.map +1 -1
- package/dist/esm/sula-avatar_21.entry.js +6 -2
- package/dist/esm/sula-avatar_21.entry.js.map +1 -1
- package/dist/webcomponents/{p-1b6e77dc.entry.js → p-0749814d.entry.js} +17 -13
- package/dist/webcomponents/{p-1b6e77dc.entry.js.map → p-0749814d.entry.js.map} +1 -1
- package/dist/webcomponents/webcomponents.esm.js +1 -1
- package/package.json +1 -1
|
@@ -29118,6 +29118,10 @@ const SulaTextfield = class {
|
|
|
29118
29118
|
}
|
|
29119
29119
|
}
|
|
29120
29120
|
componentDidLoad() {
|
|
29121
|
+
if (this.value && this.value.trim().length > 0 && this.inputElement) {
|
|
29122
|
+
this.inputElement.value = this.value;
|
|
29123
|
+
this.textValue = this.value;
|
|
29124
|
+
}
|
|
29121
29125
|
if (this.textValue && this.textValue.trim().length > 0) {
|
|
29122
29126
|
this.changeElementsStyle();
|
|
29123
29127
|
}
|
|
@@ -29162,14 +29166,14 @@ const SulaTextfield = class {
|
|
|
29162
29166
|
return this.icon;
|
|
29163
29167
|
}
|
|
29164
29168
|
render() {
|
|
29165
|
-
return (index.h(index.Host, { key: '
|
|
29169
|
+
return (index.h(index.Host, { key: 'b06e08483a4e05c4c0458991eee33683493e906a', ref: node => (this.node = node) }, index.h("div", { key: '16fa77d77f98e1dc9b4884f4d55eaae54fe1ecf6' }, index.h("div", { key: '194098398ef8219420a48cabb0b1b36b44d5d727', id: "button-container", class: {
|
|
29166
29170
|
'flex items-center border rounded-sm px-16 outline-none h-[72px] caret-brand-primary': true,
|
|
29167
29171
|
'flex-row justify-between': !!this.icon || this.type === SulaTextfieldType.Password,
|
|
29168
29172
|
'button-focus': this.inputIsFocused && !this.disabled && this.status === SulaTextfieldStatus.Default,
|
|
29169
29173
|
'button-error': this.status === SulaTextfieldStatus.Error && !this.disabled,
|
|
29170
29174
|
'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,
|
|
29171
29175
|
'bg-surface-body border-line-input cursor-pointer': !this.disabled,
|
|
29172
|
-
}, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleInputClick }, !this.disabled && (index.h("div", { key: '
|
|
29176
|
+
}, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleInputClick }, !this.disabled && (index.h("div", { key: '9795339bc40d505837b673b1350bd863829e4daa', class: { 'hidden flex-col w-full': true, 'pr-12': !!this.icon }, ref: node => (this.inputContainer = node) }, index.h("label", { key: '289548d1e1da0ef6a18106155c732307f2fedf67', class: "font-bold text-sm text-text-primary from-down" }, this.label), index.h("input", { key: 'e737484f921f93ca54f249b6e575e8c22a5e6660', 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: '44213cd6c32eb17d918f7087c58551c75a18206a', 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: '6ab542e64b6c48163ae8fc5d873258237ca253b2', class: "flex items-center justify-center", onClick: this.handleIconClick }, index.h("sula-icon", { key: '915aeca122f4ee3a28742b441c0f2067f4a8ce8a', icon: this.getInputIcon(), customClass: `text-2xl ${this.disabled ? 'text-icon-disabled' : 'text-icon-primary'}` })))), (this.helpText || this.maxLength) && !this.disabled && (index.h("div", { key: '81edcd13a69c02c31f913cd36768540417095e77', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (index.h("div", { key: 'ff99921f928181450f106413cca5ba8ead39c897', 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: '29c954591b2426eb5cf3bdeedd7ae78161573647', 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)))))));
|
|
29173
29177
|
}
|
|
29174
29178
|
static get watchers() { return {
|
|
29175
29179
|
"value": ["watchValueHandler"]
|