npm - @sula-tech/webcomponents - Versions diffs - 0.7.2 → 0.7.4 - Mend

@sula-tech/webcomponents 0.7.2 → 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.

Files changed (23) hide show

package/dist/components/sula-textfield.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sula-textfield.js","mappings":"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","names":["SulaTextfield","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sula-textfield/model/sula-textfield.model.ts","src/components/sula-textfield/sula-textfield.scss?tag=sula-textfield&encapsulation=shadow","src/components/sula-textfield/sula-textfield.tsx"],"sourcesContent":["export enum SulaTextfieldType {\n Text = 'text',\n Password = 'password',\n}\n\nexport enum SulaTextfieldStatus {\n Default = 'default',\n Error = 'error',\n}\n",":host {\n display: block;\n}\n\n.button-focus {\n outline: 2px solid var(--color-feedback-informational) !important;\n outline-offset: 2px !important;\n}\n\n.button-error {\n outline: 2px solid var(--color-feedback-error) !important;\n outline-offset: 2px !important;\n}\n\n.from-down {\n animation: from-down 0.2s ease-in-out;\n}\n\n.from-up {\n animation: from-up 0.2s ease-in-out;\n}\n\n@keyframes from-down {\n from {\n transform: translateY(75%);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n@keyframes from-up {\n from {\n transform: translateY(-75%);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n","import { Component, Event, EventEmitter, Host, Listen, Prop, State, h } from '@stencil/core';\nimport { SulaTextfieldStatus, SulaTextfieldType } from './model/sula-textfield.model';\n\n@Component({\n tag: 'sula-textfield',\n styleUrl: 'sula-textfield.scss',\n shadow: true,\n})\nexport class SulaTextfield {\n /*\n Value for the input.\n /\n @Prop({ mutable: true })\n value?: string;\n\n /\n The textfield type\n /\n @Prop() type: SulaTextfieldType = SulaTextfieldType.Text;\n\n /\n The textfield status\n /\n @Prop({ mutable: true }) status: SulaTextfieldStatus = SulaTextfieldStatus.Default;\n\n /\n The textfield label\n /\n @Prop() label: string;\n\n /\n The textfield placeholder\n /\n @Prop() placeholder: string;\n\n /\n The textfield is disabled\n /\n @Prop({ mutable: true }) disabled: boolean;\n\n /\n The help text for textfield\n /\n @Prop() helpText?: string;\n\n /\n The textfield max length\n /\n @Prop() maxLength?: number;\n\n /\n The textfield icon\n /\n @Prop() icon?: string;\n\n /\n Event emitted when input value changes.\n /\n @Event()\n valueChanged: EventEmitter<string>;\n\n /\n Event emitted when input is focused.\n /\n @Event()\n focusedOn: EventEmitter<void>;\n\n /\n Event emitted when input is focused out.\n */\n @Event()\n focusedOut: EventEmitter<void>;\n\n @State()\n inputIsOpen = false;\n\n @State()\n textValue: string = '';\n\n @State()\n showPassword = false;\n\n @State()\n inputIsFocused = false;\n\n inputContainer: HTMLDivElement;\n inputElement: HTMLInputElement;\n labelElement: HTMLDivElement;\n\n node?: HTMLElement;\n\n @Listen('click', { target: 'document' })\n handleClick(event: Event) {\n if (!this.node \|\| !this.inputIsFocused) return;\n\n const clickInside = this.node.contains(event.target as Node);\n\n if (!clickInside) {\n this.toggleOptions(false);\n this.focusedOut.emit();\n this.inputIsFocused = false;\n }\n }\n\n componentWillLoad() {\n if (this.value && this.value.trim().length > 0) {\n this.textValue = this.value;\n this.inputIsOpen = true;\n }\n }\n\n componentDidLoad() {\n if (this.textValue && this.textValue.trim().length > 0) {\n this.changeElementsStyle();\n }\n }\n\n handleInputClick = () => {\n this.toggleOptions(true);\n };\n\n toggleOptions(inputIsOpen: boolean) {\n if ((this.inputIsOpen && this.textValue && this.textValue.length > 0) \|\| this.disabled) return;\n\n this.inputIsOpen = inputIsOpen;\n this.changeElementsStyle();\n this.inputElement.focus();\n }\n\n changeElementsStyle() {\n this.inputContainer.style.display = this.inputIsOpen ? 'flex' : 'none';\n this.labelElement.style.display = this.inputIsOpen ? 'none' : 'block';\n if (!this.inputIsOpen) {\n this.labelElement.classList.add('from-up');\n }\n }\n\n handleInputChanges = (event: InputEvent) => {\n const newValue = (event.target as HTMLInputElement).value;\n this.textValue = newValue;\n\n this.valueChanged.emit(newValue);\n };\n\n handleFocus = () => {\n if (this.disabled) return;\n this.toggleOptions(true);\n this.inputElement.focus();\n };\n\n handleBlur = () => {\n this.toggleOptions(false);\n\n this.focusedOut.emit();\n this.inputIsFocused = false;\n };\n\n handleInputFocus = () => {\n this.focusedOn.emit();\n this.inputIsFocused = true;\n };\n\n handleIconClick = (event: MouseEvent) => {\n if (this.type === SulaTextfieldType.Password) {\n event.stopPropagation();\n this.handlePasswordIconClicked();\n }\n };\n\n handlePasswordIconClicked() {\n const cursorPosition = this.inputElement.selectionStart;\n const inputValue = this.inputElement.value;\n const inputType = this.showPassword ? SulaTextfieldType.Password : SulaTextfieldType.Text;\n\n this.inputElement.setAttribute('type', inputType);\n this.showPassword = !this.showPassword;\n\n setTimeout(() => {\n this.inputElement.value = inputValue;\n\n this.inputElement.setSelectionRange(cursorPosition, cursorPosition);\n }, 0);\n }\n\n getInputIcon() {\n if (this.type === SulaTextfieldType.Password) {\n return this.showPassword ? 'ph ph-eye' : 'ph ph-eye-slash';\n }\n\n return this.icon;\n }\n\n render() {\n return (\n <Host ref={node => (this.node = node)}>\n <div>\n <div\n id=\"button-container\"\n class={{\n 'flex items-center border rounded-sm px-16 outline-none h-[72px] caret-brand-primary': true,\n 'flex-row justify-between': !!this.icon \|\| this.type === SulaTextfieldType.Password,\n 'button-focus': this.inputIsFocused && !this.disabled && this.status === SulaTextfieldStatus.Default,\n 'button-error': this.status === SulaTextfieldStatus.Error && !this.disabled,\n 'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,\n 'bg-surface-body border-line-input cursor-pointer': !this.disabled,\n }}\n tabIndex={0}\n onFocus={this.handleFocus}\n onClick={this.handleInputClick}\n >\n {!this.disabled && (\n <div class={{ 'hidden flex-col w-full': true, 'pr-12': !!this.icon }} ref={node => (this.inputContainer = node)}>\n <label class=\"font-bold text-sm text-text-primary from-down\">{this.label}</label>\n <input\n type={this.type}\n ref={node => (this.inputElement = node)}\n placeholder={this.placeholder}\n class=\"outline-none text-base text-text-primary bg-transparent\"\n onInput={this.handleInputChanges}\n onFocus={this.handleInputFocus}\n value={this.value}\n />\n </div>\n )}\n\n <div\n id=\"textfield-label\"\n class={{ 'text-base flex items-center': true, 'text-text-primary': !this.disabled, 'text-text-disabled': this.disabled }}\n ref={node => (this.labelElement = node)}\n >\n {this.label}\n </div>\n\n {(!!this.icon \|\| this.type === SulaTextfieldType.Password) && (\n <div class=\"flex items-center justify-center\" onClick={this.handleIconClick}>\n <sula-icon icon={this.getInputIcon()} customClass={`text-2xl ${this.disabled ? 'text-icon-disabled' : 'text-icon-primary'}`} />\n </div>\n )}\n </div>\n\n {(this.helpText \|\| this.maxLength) && !this.disabled && (\n <div class=\"flex justify-between items-center px-16 mt-4 text-sm\">\n {this.helpText && (\n <div\n id=\"textfield-help-text\"\n class={{ 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error }}\n >\n {this.helpText}\n </div>\n )}\n {this.maxLength && (\n <div\n id=\"max-length-container\"\n class={{ 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error }}\n >\n {this.textValue ? this.textValue.length : 0}/{this.maxLength}\n </div>\n )}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sula-textfield.js","mappings":"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","names":["SulaTextfield","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sula-textfield/model/sula-textfield.model.ts","src/components/sula-textfield/sula-textfield.scss?tag=sula-textfield&encapsulation=shadow","src/components/sula-textfield/sula-textfield.tsx"],"sourcesContent":["export enum SulaTextfieldType {\n Text = 'text',\n Password = 'password',\n}\n\nexport enum SulaTextfieldStatus {\n Default = 'default',\n Error = 'error',\n}\n",":host {\n display: block;\n}\n\n.button-focus {\n outline: 2px solid var(--color-feedback-informational) !important;\n outline-offset: 2px !important;\n}\n\n.button-error {\n outline: 2px solid var(--color-feedback-error) !important;\n outline-offset: 2px !important;\n}\n\n.from-down {\n animation: from-down 0.2s ease-in-out;\n}\n\n.from-up {\n animation: from-up 0.2s ease-in-out;\n}\n\n@keyframes from-down {\n from {\n transform: translateY(75%);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n@keyframes from-up {\n from {\n transform: translateY(-75%);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n","import { Component, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { SulaTextfieldStatus, SulaTextfieldType } from './model/sula-textfield.model';\n\n@Component({\n tag: 'sula-textfield',\n styleUrl: 'sula-textfield.scss',\n shadow: true,\n})\nexport class SulaTextfield {\n /*\n Value for the input.\n /\n @Prop({ mutable: true })\n value?: string;\n\n /\n The textfield type\n /\n @Prop() type: SulaTextfieldType = SulaTextfieldType.Text;\n\n /\n The textfield status\n /\n @Prop({ mutable: true }) status: SulaTextfieldStatus = SulaTextfieldStatus.Default;\n\n /\n The textfield label\n /\n @Prop() label: string;\n\n /\n The textfield placeholder\n /\n @Prop() placeholder: string;\n\n /\n The textfield is disabled\n /\n @Prop({ mutable: true }) disabled: boolean;\n\n /\n The help text for textfield\n /\n @Prop() helpText?: string;\n\n /\n The textfield max length\n /\n @Prop() maxLength?: number;\n\n /\n The textfield icon\n /\n @Prop() icon?: string;\n\n /\n Event emitted when input value changes.\n /\n @Event()\n valueChanged: EventEmitter<string>;\n\n /\n Event emitted when input is focused.\n /\n @Event()\n focusedOn: EventEmitter<void>;\n\n /\n Event emitted when input is focused out.\n */\n @Event()\n focusedOut: EventEmitter<void>;\n\n @State()\n inputIsOpen = false;\n\n @State()\n textValue: string = '';\n\n @State()\n showPassword = false;\n\n @State()\n inputIsFocused = false;\n\n @Watch('value')\n watchValueHandler(newValue: string) {\n this.textValue = newValue;\n\n if (this.inputElement && this.inputElement.value !== newValue) {\n const cursorPosition = this.inputElement.selectionStart;\n this.inputElement.value = newValue \|\| '';\n\n if (this.inputIsFocused && cursorPosition !== null) {\n const newPosition = Math.min(cursorPosition, (newValue \|\| '').length);\n this.inputElement.setSelectionRange(newPosition, newPosition);\n }\n }\n\n if (newValue && newValue.trim().length > 0) {\n this.inputIsOpen = true;\n this.changeElementsStyle();\n } else if (!this.inputIsFocused) {\n this.inputIsOpen = false;\n this.changeElementsStyle();\n }\n }\n\n inputContainer: HTMLDivElement;\n inputElement: HTMLInputElement;\n labelElement: HTMLDivElement;\n\n node?: HTMLElement;\n\n @Listen('click', { target: 'document' })\n handleClick(event: Event) {\n if (!this.node \|\| !this.inputIsFocused) return;\n\n const clickInside = this.node.contains(event.target as Node);\n\n if (!clickInside) {\n this.toggleOptions(false);\n this.focusedOut.emit();\n this.inputIsFocused = false;\n }\n }\n\n componentWillLoad() {\n if (this.value && this.value.trim().length > 0) {\n this.textValue = this.value;\n this.inputIsOpen = true;\n }\n }\n\n componentDidLoad() {\n if (this.textValue && this.textValue.trim().length > 0) {\n this.changeElementsStyle();\n }\n }\n\n handleInputClick = () => {\n this.toggleOptions(true);\n };\n\n toggleOptions(inputIsOpen: boolean) {\n if ((this.inputIsOpen && this.textValue && this.textValue.length > 0) \|\| this.disabled) return;\n\n this.inputIsOpen = inputIsOpen;\n this.changeElementsStyle();\n this.inputElement.focus();\n }\n\n changeElementsStyle() {\n if (!this.inputContainer \|\| !this.labelElement) return;\n\n this.inputContainer.style.display = this.inputIsOpen ? 'flex' : 'none';\n this.labelElement.style.display = this.inputIsOpen ? 'none' : 'block';\n if (!this.inputIsOpen) {\n this.labelElement.classList.add('from-up');\n }\n }\n\n handleInputChanges = (event: InputEvent) => {\n const newValue = (event.target as HTMLInputElement).value;\n this.textValue = newValue;\n this.value = newValue;\n\n this.valueChanged.emit(newValue);\n };\n\n handleFocus = () => {\n if (this.disabled) return;\n this.toggleOptions(true);\n this.inputElement.focus();\n };\n\n handleBlur = () => {\n this.toggleOptions(false);\n\n this.focusedOut.emit();\n this.inputIsFocused = false;\n };\n\n handleInputFocus = () => {\n this.focusedOn.emit();\n this.inputIsFocused = true;\n };\n\n handleIconClick = (event: MouseEvent) => {\n if (this.type === SulaTextfieldType.Password) {\n event.stopPropagation();\n this.handlePasswordIconClicked();\n }\n };\n\n handlePasswordIconClicked() {\n const cursorPosition = this.inputElement.selectionStart;\n const inputValue = this.inputElement.value;\n const inputType = this.showPassword ? SulaTextfieldType.Password : SulaTextfieldType.Text;\n\n this.inputElement.setAttribute('type', inputType);\n this.showPassword = !this.showPassword;\n\n setTimeout(() => {\n this.inputElement.value = inputValue;\n\n this.inputElement.setSelectionRange(cursorPosition, cursorPosition);\n }, 0);\n }\n\n getInputIcon() {\n if (this.type === SulaTextfieldType.Password) {\n return this.showPassword ? 'ph ph-eye' : 'ph ph-eye-slash';\n }\n\n return this.icon;\n }\n\n render() {\n return (\n <Host ref={node => (this.node = node)}>\n <div>\n <div\n id=\"button-container\"\n class={{\n 'flex items-center border rounded-sm px-16 outline-none h-[72px] caret-brand-primary': true,\n 'flex-row justify-between': !!this.icon \|\| this.type === SulaTextfieldType.Password,\n 'button-focus': this.inputIsFocused && !this.disabled && this.status === SulaTextfieldStatus.Default,\n 'button-error': this.status === SulaTextfieldStatus.Error && !this.disabled,\n 'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,\n 'bg-surface-body border-line-input cursor-pointer': !this.disabled,\n }}\n tabIndex={0}\n onFocus={this.handleFocus}\n onClick={this.handleInputClick}\n >\n {!this.disabled && (\n <div class={{ 'hidden flex-col w-full': true, 'pr-12': !!this.icon }} ref={node => (this.inputContainer = node)}>\n <label class=\"font-bold text-sm text-text-primary from-down\">{this.label}</label>\n <input\n type={this.type}\n ref={node => (this.inputElement = node)}\n placeholder={this.placeholder}\n class=\"outline-none text-base text-text-primary bg-transparent\"\n onInput={this.handleInputChanges}\n onFocus={this.handleInputFocus}\n value={this.textValue}\n />\n </div>\n )}\n\n <div\n id=\"textfield-label\"\n class={{ 'text-base flex items-center': true, 'text-text-primary': !this.disabled, 'text-text-disabled': this.disabled }}\n ref={node => (this.labelElement = node)}\n >\n {this.label}\n </div>\n\n {(!!this.icon \|\| this.type === SulaTextfieldType.Password) && (\n <div class=\"flex items-center justify-center\" onClick={this.handleIconClick}>\n <sula-icon icon={this.getInputIcon()} customClass={`text-2xl ${this.disabled ? 'text-icon-disabled' : 'text-icon-primary'}`} />\n </div>\n )}\n </div>\n\n {(this.helpText \|\| this.maxLength) && !this.disabled && (\n <div class=\"flex justify-between items-center px-16 mt-4 text-sm\">\n {this.helpText && (\n <div\n id=\"textfield-help-text\"\n class={{ 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error }}\n >\n {this.helpText}\n </div>\n )}\n {this.maxLength && (\n <div\n id=\"max-length-container\"\n class={{ 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error }}\n >\n {this.textValue ? this.textValue.length : 0}/{this.maxLength}\n </div>\n )}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/loader.js CHANGED Viewed

@@ -4,7 +4,7 @@ export { s as setNonce } from './index-or7qTZgT.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["sula-avatar_18",[[1,"sula-button",{"text":[1025],"icon":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"appearance":[1025],"type":[1025],"size":[1025],"status":[1025],"loading":[1028],"buttonDisabled":[1028,"button-disabled"],"fullWidth":[1028,"full-width"]}],[1,"sula-chip",{"text":[1025],"appearance":[1025],"disabled":[1028],"items":[1040],"isFocused":[32],"showItems":[32]},[[4,"click","handleDocumentClick"]]],[1,"sula-dropdown",{"label":[1025],"disabled":[1028],"items":[1040],"value":[1040],"selectedItem":[32],"showItems":[32],"isFocused":[32]},[[4,"click","handleDocumentClick"]],{"value":["handleValueChange"]}],[1,"sula-avatar",{"size":[1],"imageUrl":[1,"image-url"],"text":[1],"icon":[1]}],[1,"sula-badge",{"status":[1025],"size":[1025],"type":[1025],"text":[1025],"icon":[1025],"hasSlotContent":[32]}],[1,"sula-checkbox",{"type":[1025],"label":[1025],"subTitle":[1025,"sub-title"],"disabled":[1028],"checked":[1028],"isFocus":[32]}],[1,"sula-progress-bar",{"appearance":[1025],"state":[1025],"topLabel":[1025,"top-label"],"bottomLabel":[1025,"bottom-label"],"progress":[1026],"showProgress":[1028,"show-progress"]},null,{"progress":["validateProgress"]}],[1,"sula-search-bar",{"value":[1025],"searchBarStyle":[1025,"search-bar-style"],"placeholder":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"isFocused":[32],"textValue":[32]}],[1,"sula-tag",{"label":[1025],"icon":[1025],"iconStatus":[1025,"icon-status"],"size":[1025],"appearance":[1025],"fontWeight":[1025,"font-weight"]}],[1,"sula-textfield",{"value":[1025],"type":[1],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"icon":[1],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]]],[1,"sula-tiles",{"type":[1],"size":[1],"ellipsis":[4],"icon":[1],"text":[1],"subText":[1,"sub-text"],"disabled":[4]}],[1,"sula-timeline-list",{"sulaTimelineList":[1040,"sula-timeline-list"]}],[1,"sula-radio-button",{"checked":[1028],"label":[1025],"disabled":[1028],"radioIsFocus":[32]}],[1,"sula-switch",{"type":[1025],"active":[1028],"disabled":[1028],"label":[1025],"subTitle":[1025,"sub-title"],"isFocus":[32]}],[1,"sula-textarea",{"value":[1025],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"rows":[2],"isActive":[32],"textValue":[32],"textareaIsFocused":[32]},[[4,"click","handleClick"]]],[1,"sula-loader",{"size":[1],"animationInstance":[32]}],[1,"sula-menu-select-list",{"items":[1040],"fullWidth":[4,"full-width"]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
+  return bootstrapLazy([["sula-avatar_18",[[1,"sula-button",{"text":[1025],"icon":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"appearance":[1025],"type":[1025],"size":[1025],"status":[1025],"loading":[1028],"buttonDisabled":[1028,"button-disabled"],"fullWidth":[1028,"full-width"]}],[1,"sula-chip",{"text":[1025],"appearance":[1025],"disabled":[1028],"items":[1040],"isFocused":[32],"showItems":[32]},[[4,"click","handleDocumentClick"]]],[1,"sula-dropdown",{"label":[1025],"disabled":[1028],"items":[1040],"value":[1040],"selectedItem":[32],"showItems":[32],"isFocused":[32]},[[4,"click","handleDocumentClick"]],{"value":["handleValueChange"]}],[1,"sula-avatar",{"size":[1],"imageUrl":[1,"image-url"],"text":[1],"icon":[1]}],[1,"sula-badge",{"status":[1025],"size":[1025],"type":[1025],"text":[1025],"icon":[1025],"hasSlotContent":[32]}],[1,"sula-checkbox",{"type":[1025],"label":[1025],"subTitle":[1025,"sub-title"],"disabled":[1028],"checked":[1028],"isFocus":[32]}],[1,"sula-progress-bar",{"appearance":[1025],"state":[1025],"topLabel":[1025,"top-label"],"bottomLabel":[1025,"bottom-label"],"progress":[1026],"showProgress":[1028,"show-progress"]},null,{"progress":["validateProgress"]}],[1,"sula-search-bar",{"value":[1025],"searchBarStyle":[1025,"search-bar-style"],"placeholder":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"isFocused":[32],"textValue":[32]}],[1,"sula-tag",{"label":[1025],"icon":[1025],"iconStatus":[1025,"icon-status"],"size":[1025],"appearance":[1025],"fontWeight":[1025,"font-weight"]}],[1,"sula-textfield",{"value":[1025],"type":[1],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"icon":[1],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[1,"sula-tiles",{"type":[1],"size":[1],"ellipsis":[4],"icon":[1],"text":[1],"subText":[1,"sub-text"],"disabled":[4]}],[1,"sula-timeline-list",{"sulaTimelineList":[1040,"sula-timeline-list"]}],[1,"sula-radio-button",{"checked":[1028],"label":[1025],"disabled":[1028],"radioIsFocus":[32]}],[1,"sula-switch",{"type":[1025],"active":[1028],"disabled":[1028],"label":[1025],"subTitle":[1025,"sub-title"],"isFocus":[32]}],[1,"sula-textarea",{"value":[1025],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"rows":[2],"isActive":[32],"textValue":[32],"textareaIsFocused":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[1,"sula-loader",{"size":[1],"animationInstance":[32]}],[1,"sula-menu-select-list",{"items":[1040],"fullWidth":[4,"full-width"]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
 };
 export { defineCustomElements };

package/dist/esm/sula-avatar_18.entry.js CHANGED Viewed

@@ -28183,6 +28183,23 @@ const SulaTextarea = class {
             this.setLabelUp();
         };
     }
+    watchValueHandler(newValue) {
+        this.textValue = newValue;
+        if (this.textareaElement && this.textareaElement.value !== newValue) {
+            const cursorPosition = this.textareaElement.selectionStart;
+            this.textareaElement.value = newValue || '';
+            if (this.textareaIsFocused && cursorPosition !== null) {
+                const newPosition = Math.min(cursorPosition, (newValue || '').length);
+                this.textareaElement.setSelectionRange(newPosition, newPosition);
+            }
+        }
+        if (newValue && newValue.trim().length > 0) {
+            this.setLabelUp();
+        }
+        else if (!this.textareaIsFocused) {
+            this.setLabelDown();
+        }
+    }
     handleClick(event) {
         if (!this.node || !this.textareaIsFocused)
             return;
@@ -28230,39 +28247,42 @@ const SulaTextarea = class {
     }
     render() {
         const containerHeight = this.rows * 24 + 48;
-        return (h$1(Host, { key: 'ed754651792554736de45340f7a2eca30303517e', ref: node => (this.node = node) }, h$1("div", { key: '7c8422829a17136e4f98792da018fa4a4c531de4' }, h$1("div", { key: '16f16305b5b1a059e8d1e0b956eb78d2443bd9e0', id: "textarea-container", class: {
+        return (h$1(Host, { key: '71e17dbbb92c7a05d8988820c0599b39a0f841a2', ref: node => (this.node = node) }, h$1("div", { key: '9be717191ecd92216c42830dfda5ea14a3c5c939' }, h$1("div", { key: '3765ff81f012dce9438d9c00d694fb61864acf79', id: "textarea-container", class: {
                 'relative border rounded-sm px-16 py-12 outline-none caret-brand-primary': true,
                 'textarea-focus': this.textareaIsFocused && !this.disabled && this.status === SulaTextareaStatus.Default,
                 'textarea-error': this.status === SulaTextareaStatus.Error && !this.disabled,
                 'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,
                 'bg-surface-body border-line-input cursor-text': !this.disabled,
-            }, style: { height: `${containerHeight}px` }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleTextareaClick }, h$1("label", { key: 'ca41cf5b404b52684d6597a6976b86a596bb613f', class: {
+            }, style: { height: `${containerHeight}px` }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleTextareaClick }, h$1("label", { key: '252bc2b94a3a39a478a6c919bc181514eeb13891', class: {
                 'text-base top-16 left-12 absolute transition-all duration-200 ease-in-out pointer-events-none z-10 w-[85%]': true,
                 'text-text-primary': !this.disabled && (this.isActive || this.status === SulaTextareaStatus.Default),
                 'text-text-disabled': this.disabled,
                 'bg-surface-body': !this.disabled && this.isActive,
-            }, ref: node => (this.labelElement = node) }, this.label), h$1("label", { key: 'cfcb85fadb260a530be91f347c55e6f98ae3168b', class: {
+            }, ref: node => (this.labelElement = node) }, this.label), h$1("label", { key: '71505a321c84a6c33668cb0f8e67877943225c99', class: {
                 'absolute font-bold transition-all duration-200 ease-in-out pointer-events-none z-10 active-label hidden from-down': true,
                 'text-sm top-12 left-16': this.isActive,
                 'text-text-primary': !this.disabled && (this.isActive || this.status === SulaTextareaStatus.Default),
                 'text-text-disabled': this.disabled,
                 'bg-surface-body': !this.disabled && this.isActive,
-            }, ref: node => (this.activeLabelElement = node) }, this.label), h$1("textarea", { key: 'b020d47c6e676defc7af5703142bf28b27235b68', ref: node => (this.textareaElement = node), placeholder: this.isActive ? this.placeholder : '', rows: this.rows, maxLength: this.maxLength, disabled: this.disabled, class: {
+            }, ref: node => (this.activeLabelElement = node) }, this.label), h$1("textarea", { key: '55fdbfcf690c8198c62299d884cd85bba5f08346', ref: node => (this.textareaElement = node), placeholder: this.isActive ? this.placeholder : '', rows: this.rows, maxLength: this.maxLength, disabled: this.disabled, class: {
                 'w-full h-full outline-none text-base bg-transparent border-none resize-none': true,
                 'pt-6': this.isActive,
                 'pt-0': !this.isActive,
                 'text-text-primary': !this.disabled,
                 'text-text-disabled cursor-not-allowed overflow-hidden': this.disabled,
-            }, onInput: this.handleTextareaChanges, onFocus: this.handleTextareaFocus, onBlur: this.handleBlur, value: this.textValue })), (this.helpText || this.maxLength) && (h$1("div", { key: '5772c4879f4a2e680423a025ddf371b0682fdbfc', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h$1("div", { key: 'f85f4b9195cf845d110a8f3a9b4a34e8cd522783', id: "textarea-help-text", class: {
+            }, onInput: this.handleTextareaChanges, onFocus: this.handleTextareaFocus, onBlur: this.handleBlur, value: this.textValue })), (this.helpText || this.maxLength) && (h$1("div", { key: 'a4d90c39f337137a50ac71ffdd1f0b0714761de9', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h$1("div", { key: 'a1368830518a465f2d3bec91eec42966a5eee1c0', id: "textarea-help-text", class: {
                 'text-text-primary': this.status === SulaTextareaStatus.Default && !this.disabled,
                 'text-feedback-error': this.status === SulaTextareaStatus.Error && !this.disabled,
                 'text-text-disabled': this.disabled,
-            } }, this.helpText)), this.maxLength && (h$1("div", { key: 'dffd4ae72ce81a460589f6cbb58f7615529547ea', id: "max-length-container", class: {
+            } }, this.helpText)), this.maxLength && (h$1("div", { key: 'a53bdb59f7dfab7c276a9fd34921026f25bccf12', id: "max-length-container", class: {
                 'text-text-primary': this.status === SulaTextareaStatus.Default && !this.disabled,
                 'text-feedback-error': this.status === SulaTextareaStatus.Error && !this.disabled,
                 'text-text-disabled': this.disabled,
             } }, this.textValue ? this.textValue.length : 0, "/", this.maxLength)))))));
     }
+    static get watchers() { return {
+        "value": ["watchValueHandler"]
+    }; }
 };
 SulaTextarea.style = sulaTextareaCss;
@@ -28303,6 +28323,7 @@ const SulaTextfield = class {
         this.handleInputChanges = (event) => {
             const newValue = event.target.value;
             this.textValue = newValue;
+            this.value = newValue;
             this.valueChanged.emit(newValue);
         };
         this.handleFocus = () => {
@@ -28327,6 +28348,25 @@ const SulaTextfield = class {
             }
         };
     }
+    watchValueHandler(newValue) {
+        this.textValue = newValue;
+        if (this.inputElement && this.inputElement.value !== newValue) {
+            const cursorPosition = this.inputElement.selectionStart;
+            this.inputElement.value = newValue || '';
+            if (this.inputIsFocused && cursorPosition !== null) {
+                const newPosition = Math.min(cursorPosition, (newValue || '').length);
+                this.inputElement.setSelectionRange(newPosition, newPosition);
+            }
+        }
+        if (newValue && newValue.trim().length > 0) {
+            this.inputIsOpen = true;
+            this.changeElementsStyle();
+        }
+        else if (!this.inputIsFocused) {
+            this.inputIsOpen = false;
+            this.changeElementsStyle();
+        }
+    }
     handleClick(event) {
         if (!this.node || !this.inputIsFocused)
             return;
@@ -28356,6 +28396,8 @@ const SulaTextfield = class {
         this.inputElement.focus();
     }
     changeElementsStyle() {
+        if (!this.inputContainer || !this.labelElement)
+            return;
         this.inputContainer.style.display = this.inputIsOpen ? 'flex' : 'none';
         this.labelElement.style.display = this.inputIsOpen ? 'none' : 'block';
         if (!this.inputIsOpen) {
@@ -28380,15 +28422,18 @@ const SulaTextfield = class {
         return this.icon;
     }
     render() {
-        return (h$1(Host, { key: '3805ff5fefc6ccc3b903384ac54bcf01ebd9527a', ref: node => (this.node = node) }, h$1("div", { key: 'e90a85b46e51d9c0c989bc4e0ff53b5996cc6c49' }, h$1("div", { key: '258fa53c0386cc3cc231a53d5d0e8da483cc51ce', id: "button-container", class: {
+        return (h$1(Host, { key: 'db19982329c8a6aa8989b3a68ef61a7453ee4a99', ref: node => (this.node = node) }, h$1("div", { key: 'daf060b490b07b535cb414b11c3c75f307f127aa' }, h$1("div", { key: '1d84aec41f352537a124311c076eceec3271832a', id: "button-container", class: {
                 'flex items-center border rounded-sm px-16 outline-none h-[72px] caret-brand-primary': true,
                 'flex-row justify-between': !!this.icon || this.type === SulaTextfieldType.Password,
                 'button-focus': this.inputIsFocused && !this.disabled && this.status === SulaTextfieldStatus.Default,
                 'button-error': this.status === SulaTextfieldStatus.Error && !this.disabled,
                 'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,
                 'bg-surface-body border-line-input cursor-pointer': !this.disabled,
-            }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleInputClick }, !this.disabled && (h$1("div", { key: '0e16b2a5f2bd115b65a6d8e572bde900606fb97c', class: { 'hidden flex-col w-full': true, 'pr-12': !!this.icon }, ref: node => (this.inputContainer = node) }, h$1("label", { key: '1a487915bfd317c1f1b3c04917096f402e7cb7ba', class: "font-bold text-sm text-text-primary from-down" }, this.label), h$1("input", { key: 'b2cd0285ef6cdaa4956ac1e7dc7a9d2fb850ffed', 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.value }))), h$1("div", { key: 'c26f72728243abca768732d758f7a9992c32d146', 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) && (h$1("div", { key: 'b1f375f8291a67455ae0e252321e4a0fa577bb64', class: "flex items-center justify-center", onClick: this.handleIconClick }, h$1("sula-icon", { key: 'a780572571be2d1b4e754ccb149b768bb9195800', icon: this.getInputIcon(), customClass: `text-2xl ${this.disabled ? 'text-icon-disabled' : 'text-icon-primary'}` })))), (this.helpText || this.maxLength) && !this.disabled && (h$1("div", { key: '6ac0ac18b014923a1b6a432e181beaea2f557dca', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h$1("div", { key: 'f8aa196b22755380105da258fa8e218ceb3894c0', id: "textfield-help-text", class: { 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error } }, this.helpText)), this.maxLength && (h$1("div", { key: '9a9359a270f5f84175829e2e8347e992c89a2639', 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)))))));
+            }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleInputClick }, !this.disabled && (h$1("div", { key: '6ec4a250e1bcd8f053b2dba7e6e6fe6842c1b9bf', class: { 'hidden flex-col w-full': true, 'pr-12': !!this.icon }, ref: node => (this.inputContainer = node) }, h$1("label", { key: '001ef2edc750497dc82a65341f98289fd8d28c6d', class: "font-bold text-sm text-text-primary from-down" }, this.label), h$1("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 }))), h$1("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) && (h$1("div", { key: '27596e159d5bcdd52f587350fa7ed619d5a6346e', class: "flex items-center justify-center", onClick: this.handleIconClick }, h$1("sula-icon", { key: '2fb87a5df61f3ed9f50f404ca8ff2988c71d10a7', icon: this.getInputIcon(), customClass: `text-2xl ${this.disabled ? 'text-icon-disabled' : 'text-icon-primary'}` })))), (this.helpText || this.maxLength) && !this.disabled && (h$1("div", { key: 'd54b53d64879e9a454a72c7e6726c8b0f5905baa', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h$1("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 && (h$1("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)))))));
     }
+    static get watchers() { return {
+        "value": ["watchValueHandler"]
+    }; }
 };
 SulaTextfield.style = sulaTextfieldCss;