@sula-tech/webcomponents 0.7.4 → 0.7.5
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 +8 -6
- package/dist/cjs/sula-avatar_18.cjs.entry.js.map +1 -1
- package/dist/collection/components/sula-textarea/sula-textarea.js +8 -6
- package/dist/collection/components/sula-textarea/sula-textarea.js.map +1 -1
- package/dist/components/sula-textarea.js +8 -6
- package/dist/components/sula-textarea.js.map +1 -1
- package/dist/esm/sula-avatar_18.entry.js +8 -6
- package/dist/esm/sula-avatar_18.entry.js.map +1 -1
- package/dist/webcomponents/{p-0cad4d30.entry.js → p-e86b2271.entry.js} +11 -10
- package/dist/webcomponents/{p-0cad4d30.entry.js.map → p-e86b2271.entry.js.map} +1 -1
- package/dist/webcomponents/webcomponents.esm.js +1 -1
- package/package.json +1 -1
|
@@ -103,6 +103,8 @@ export class SulaTextarea {
|
|
|
103
103
|
this.changeElementsStyle();
|
|
104
104
|
}
|
|
105
105
|
changeElementsStyle() {
|
|
106
|
+
if (!this.labelElement || !this.activeLabelElement)
|
|
107
|
+
return;
|
|
106
108
|
this.activeLabelElement.style.display = this.isActive ? 'flex' : 'none';
|
|
107
109
|
this.labelElement.style.display = this.isActive ? 'none' : 'block';
|
|
108
110
|
if (!this.isActive) {
|
|
@@ -111,34 +113,34 @@ export class SulaTextarea {
|
|
|
111
113
|
}
|
|
112
114
|
render() {
|
|
113
115
|
const containerHeight = this.rows * 24 + 48;
|
|
114
|
-
return (h(Host, { key: '
|
|
116
|
+
return (h(Host, { key: '1ec5c0b8f04ea2f32d48301334d2c717327d0b17', ref: node => (this.node = node) }, h("div", { key: 'be0e209759746014407a3dc9aa553faea5b4f7f9' }, h("div", { key: '238be270fa3cfdbdd0f4a5cda9d99deeb7c9667d', id: "textarea-container", class: {
|
|
115
117
|
'relative border rounded-sm px-16 py-12 outline-none caret-brand-primary': true,
|
|
116
118
|
'textarea-focus': this.textareaIsFocused && !this.disabled && this.status === SulaTextareaStatus.Default,
|
|
117
119
|
'textarea-error': this.status === SulaTextareaStatus.Error && !this.disabled,
|
|
118
120
|
'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,
|
|
119
121
|
'bg-surface-body border-line-input cursor-text': !this.disabled,
|
|
120
|
-
}, style: { height: `${containerHeight}px` }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleTextareaClick }, h("label", { key: '
|
|
122
|
+
}, style: { height: `${containerHeight}px` }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleTextareaClick }, h("label", { key: '66812b881d9396ff093cac598e6c64a54e1cdbad', class: {
|
|
121
123
|
'text-base top-16 left-12 absolute transition-all duration-200 ease-in-out pointer-events-none z-10 w-[85%]': true,
|
|
122
124
|
'text-text-primary': !this.disabled && (this.isActive || this.status === SulaTextareaStatus.Default),
|
|
123
125
|
'text-text-disabled': this.disabled,
|
|
124
126
|
'bg-surface-body': !this.disabled && this.isActive,
|
|
125
|
-
}, ref: node => (this.labelElement = node) }, this.label), h("label", { key: '
|
|
127
|
+
}, ref: node => (this.labelElement = node) }, this.label), h("label", { key: 'e0b2a3f1d35b7bd047b6324464772697d565076d', class: {
|
|
126
128
|
'absolute font-bold transition-all duration-200 ease-in-out pointer-events-none z-10 active-label hidden from-down': true,
|
|
127
129
|
'text-sm top-12 left-16': this.isActive,
|
|
128
130
|
'text-text-primary': !this.disabled && (this.isActive || this.status === SulaTextareaStatus.Default),
|
|
129
131
|
'text-text-disabled': this.disabled,
|
|
130
132
|
'bg-surface-body': !this.disabled && this.isActive,
|
|
131
|
-
}, ref: node => (this.activeLabelElement = node) }, this.label), h("textarea", { key: '
|
|
133
|
+
}, ref: node => (this.activeLabelElement = node) }, this.label), h("textarea", { key: '77603b5c3bfb9430e5a41f0b219c5f0597f4ab92', ref: node => (this.textareaElement = node), placeholder: this.isActive ? this.placeholder : '', rows: this.rows, maxLength: this.maxLength, disabled: this.disabled, class: {
|
|
132
134
|
'w-full h-full outline-none text-base bg-transparent border-none resize-none': true,
|
|
133
135
|
'pt-6': this.isActive,
|
|
134
136
|
'pt-0': !this.isActive,
|
|
135
137
|
'text-text-primary': !this.disabled,
|
|
136
138
|
'text-text-disabled cursor-not-allowed overflow-hidden': this.disabled,
|
|
137
|
-
}, onInput: this.handleTextareaChanges, onFocus: this.handleTextareaFocus, onBlur: this.handleBlur, value: this.textValue })), (this.helpText || this.maxLength) && (h("div", { key: '
|
|
139
|
+
}, onInput: this.handleTextareaChanges, onFocus: this.handleTextareaFocus, onBlur: this.handleBlur, value: this.textValue })), (this.helpText || this.maxLength) && (h("div", { key: 'ed5e9397e617eb07241dc26fed75d35f0abd16fd', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h("div", { key: '3ee82fca291f045dcee3c2c29da6ac625ee42d44', id: "textarea-help-text", class: {
|
|
138
140
|
'text-text-primary': this.status === SulaTextareaStatus.Default && !this.disabled,
|
|
139
141
|
'text-feedback-error': this.status === SulaTextareaStatus.Error && !this.disabled,
|
|
140
142
|
'text-text-disabled': this.disabled,
|
|
141
|
-
} }, this.helpText)), this.maxLength && (h("div", { key: '
|
|
143
|
+
} }, this.helpText)), this.maxLength && (h("div", { key: 'd4a3503ef45089512b85cf2cb28c32f655f9b17c', id: "max-length-container", class: {
|
|
142
144
|
'text-text-primary': this.status === SulaTextareaStatus.Default && !this.disabled,
|
|
143
145
|
'text-feedback-error': this.status === SulaTextareaStatus.Error && !this.disabled,
|
|
144
146
|
'text-text-disabled': this.disabled,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sula-textarea.js","sourceRoot":"","sources":["../../../src/components/sula-textarea/sula-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { SulaTextareaStatus } from './model/sula-textarea.model';\n\n@Component({\n tag: 'sula-textarea',\n styleUrl: 'sula-textarea.scss',\n shadow: true,\n})\nexport class SulaTextarea {\n /**\n * Value for the textarea.\n */\n @Prop({ mutable: true })\n value?: string;\n\n /**\n * The textarea status\n */\n @Prop({ mutable: true }) status: SulaTextareaStatus = SulaTextareaStatus.Default;\n\n /**\n * The textarea label\n */\n @Prop() label: string;\n\n /**\n * The textarea placeholder\n */\n @Prop() placeholder: string;\n\n /**\n * The textarea is disabled\n */\n @Prop({ mutable: true }) disabled: boolean;\n\n /**\n * The help text for textarea\n */\n @Prop() helpText?: string;\n\n /**\n * The textarea max length\n */\n @Prop() maxLength?: number;\n\n /**\n * The textarea rows (height)\n */\n @Prop() rows: number = 4;\n\n /**\n * Event emitted when textarea value changes.\n */\n @Event()\n valueChanged: EventEmitter<string>;\n\n /**\n * Event emitted when textarea is focused.\n */\n @Event()\n focusedOn: EventEmitter<void>;\n\n /**\n * Event emitted when textarea is focused out.\n */\n @Event()\n focusedOut: EventEmitter<void>;\n\n @State()\n isActive = false;\n\n @State()\n textValue: string = '';\n\n @State()\n textareaIsFocused = false;\n\n @Watch('value')\n watchValueHandler(newValue: string) {\n this.textValue = newValue;\n\n if (this.textareaElement && this.textareaElement.value !== newValue) {\n const cursorPosition = this.textareaElement.selectionStart;\n this.textareaElement.value = newValue || '';\n\n if (this.textareaIsFocused && cursorPosition !== null) {\n const newPosition = Math.min(cursorPosition, (newValue || '').length);\n this.textareaElement.setSelectionRange(newPosition, newPosition);\n }\n }\n\n if (newValue && newValue.trim().length > 0) {\n this.setLabelUp();\n } else if (!this.textareaIsFocused) {\n this.setLabelDown();\n }\n }\n\n textareaElement: HTMLTextAreaElement;\n\n node?: HTMLElement;\n\n activeLabelElement: HTMLLabelElement;\n labelElement: HTMLLabelElement;\n\n @Listen('click', { target: 'document' })\n handleClick(event: Event) {\n if (!this.node || !this.textareaIsFocused) return;\n\n const clickInside = this.node.contains(event.target as Node);\n\n if (!clickInside && (!this.textValue || this.textValue.trim().length === 0)) {\n this.setLabelDown();\n this.focusedOut.emit();\n this.textareaIsFocused = false;\n }\n }\n\n focusOnTextarea() {\n setTimeout(() => {\n this.textareaElement.focus();\n }, 0);\n }\n\n componentWillLoad() {\n if (this.value && this.value.trim().length > 0) {\n this.textValue = this.value;\n this.isActive = true;\n }\n }\n\n componentDidLoad() {\n if (this.value && this.value.trim().length > 0) {\n this.changeElementsStyle();\n }\n }\n\n setLabelUp() {\n if (!this.isActive) {\n this.isActive = true;\n }\n this.changeElementsStyle();\n }\n\n setLabelDown() {\n if (this.isActive && (!this.textValue || this.textValue.trim().length === 0)) {\n this.isActive = false;\n }\n this.changeElementsStyle();\n }\n\n changeElementsStyle() {\n this.activeLabelElement.style.display = this.isActive ? 'flex' : 'none';\n this.labelElement.style.display = this.isActive ? 'none' : 'block';\n if (!this.isActive) {\n this.labelElement.classList.add('from-up');\n }\n }\n\n handleTextareaClick = () => {\n if (this.disabled) return;\n this.setLabelUp();\n this.focusOnTextarea();\n };\n\n handleTextareaChanges = (event: InputEvent) => {\n const newValue = (event.target as HTMLTextAreaElement).value;\n this.textValue = newValue;\n this.value = newValue;\n\n if (newValue.length > 0 || this.textareaIsFocused) {\n this.setLabelUp();\n }\n\n this.valueChanged.emit(newValue);\n };\n\n handleFocus = () => {\n if (this.disabled) return;\n\n this.setLabelUp();\n this.focusOnTextarea();\n };\n\n handleBlur = () => {\n if (!this.textValue || this.textValue.trim().length === 0) {\n this.setLabelDown();\n }\n\n this.focusedOut.emit();\n this.textareaIsFocused = false;\n };\n\n handleTextareaFocus = () => {\n this.focusedOn.emit();\n this.textareaIsFocused = true;\n this.setLabelUp();\n };\n\n render() {\n const containerHeight = this.rows * 24 + 48;\n\n return (\n <Host ref={node => (this.node = node)}>\n <div>\n <div\n id=\"textarea-container\"\n class={{\n 'relative border rounded-sm px-16 py-12 outline-none caret-brand-primary': true,\n 'textarea-focus': this.textareaIsFocused && !this.disabled && this.status === SulaTextareaStatus.Default,\n 'textarea-error': this.status === SulaTextareaStatus.Error && !this.disabled,\n 'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,\n 'bg-surface-body border-line-input cursor-text': !this.disabled,\n }}\n style={{ height: `${containerHeight}px` }}\n tabIndex={0}\n onFocus={this.handleFocus}\n onClick={this.handleTextareaClick}\n >\n <label\n class={{\n 'text-base top-16 left-12 absolute transition-all duration-200 ease-in-out pointer-events-none z-10 w-[85%]': true,\n 'text-text-primary': !this.disabled && (this.isActive || this.status === SulaTextareaStatus.Default),\n 'text-text-disabled': this.disabled,\n 'bg-surface-body': !this.disabled && this.isActive,\n }}\n ref={node => (this.labelElement = node)}\n >\n {this.label}\n </label>\n\n <label\n class={{\n 'absolute font-bold transition-all duration-200 ease-in-out pointer-events-none z-10 active-label hidden from-down': true,\n 'text-sm top-12 left-16': this.isActive,\n 'text-text-primary': !this.disabled && (this.isActive || this.status === SulaTextareaStatus.Default),\n 'text-text-disabled': this.disabled,\n 'bg-surface-body': !this.disabled && this.isActive,\n }}\n ref={node => (this.activeLabelElement = node)}\n >\n {this.label}\n </label>\n\n <textarea\n ref={node => (this.textareaElement = node)}\n placeholder={this.isActive ? this.placeholder : ''}\n rows={this.rows}\n maxLength={this.maxLength}\n disabled={this.disabled}\n class={{\n 'w-full h-full outline-none text-base bg-transparent border-none resize-none': true,\n 'pt-6': this.isActive,\n 'pt-0': !this.isActive,\n 'text-text-primary': !this.disabled,\n 'text-text-disabled cursor-not-allowed overflow-hidden': this.disabled,\n }}\n onInput={this.handleTextareaChanges}\n onFocus={this.handleTextareaFocus}\n onBlur={this.handleBlur}\n value={this.textValue}\n />\n </div>\n\n {(this.helpText || this.maxLength) && (\n <div class=\"flex justify-between items-center px-16 mt-4 text-sm\">\n {this.helpText && (\n <div\n id=\"textarea-help-text\"\n class={{\n 'text-text-primary': this.status === SulaTextareaStatus.Default && !this.disabled,\n 'text-feedback-error': this.status === SulaTextareaStatus.Error && !this.disabled,\n 'text-text-disabled': this.disabled,\n }}\n >\n {this.helpText}\n </div>\n )}\n {this.maxLength && (\n <div\n id=\"max-length-container\"\n class={{\n 'text-text-primary': this.status === SulaTextareaStatus.Default && !this.disabled,\n 'text-feedback-error': this.status === SulaTextareaStatus.Error && !this.disabled,\n 'text-text-disabled': this.disabled,\n }}\n >\n {this.textValue ? this.textValue.length : 0}/{this.maxLength}\n </div>\n )}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"sula-textarea.js","sourceRoot":"","sources":["../../../src/components/sula-textarea/sula-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { SulaTextareaStatus } from './model/sula-textarea.model';\n\n@Component({\n tag: 'sula-textarea',\n styleUrl: 'sula-textarea.scss',\n shadow: true,\n})\nexport class SulaTextarea {\n /**\n * Value for the textarea.\n */\n @Prop({ mutable: true })\n value?: string;\n\n /**\n * The textarea status\n */\n @Prop({ mutable: true }) status: SulaTextareaStatus = SulaTextareaStatus.Default;\n\n /**\n * The textarea label\n */\n @Prop() label: string;\n\n /**\n * The textarea placeholder\n */\n @Prop() placeholder: string;\n\n /**\n * The textarea is disabled\n */\n @Prop({ mutable: true }) disabled: boolean;\n\n /**\n * The help text for textarea\n */\n @Prop() helpText?: string;\n\n /**\n * The textarea max length\n */\n @Prop() maxLength?: number;\n\n /**\n * The textarea rows (height)\n */\n @Prop() rows: number = 4;\n\n /**\n * Event emitted when textarea value changes.\n */\n @Event()\n valueChanged: EventEmitter<string>;\n\n /**\n * Event emitted when textarea is focused.\n */\n @Event()\n focusedOn: EventEmitter<void>;\n\n /**\n * Event emitted when textarea is focused out.\n */\n @Event()\n focusedOut: EventEmitter<void>;\n\n @State()\n isActive = false;\n\n @State()\n textValue: string = '';\n\n @State()\n textareaIsFocused = false;\n\n @Watch('value')\n watchValueHandler(newValue: string) {\n this.textValue = newValue;\n\n if (this.textareaElement && this.textareaElement.value !== newValue) {\n const cursorPosition = this.textareaElement.selectionStart;\n this.textareaElement.value = newValue || '';\n\n if (this.textareaIsFocused && cursorPosition !== null) {\n const newPosition = Math.min(cursorPosition, (newValue || '').length);\n this.textareaElement.setSelectionRange(newPosition, newPosition);\n }\n }\n\n if (newValue && newValue.trim().length > 0) {\n this.setLabelUp();\n } else if (!this.textareaIsFocused) {\n this.setLabelDown();\n }\n }\n\n textareaElement: HTMLTextAreaElement;\n\n node?: HTMLElement;\n\n activeLabelElement: HTMLLabelElement;\n labelElement: HTMLLabelElement;\n\n @Listen('click', { target: 'document' })\n handleClick(event: Event) {\n if (!this.node || !this.textareaIsFocused) return;\n\n const clickInside = this.node.contains(event.target as Node);\n\n if (!clickInside && (!this.textValue || this.textValue.trim().length === 0)) {\n this.setLabelDown();\n this.focusedOut.emit();\n this.textareaIsFocused = false;\n }\n }\n\n focusOnTextarea() {\n setTimeout(() => {\n this.textareaElement.focus();\n }, 0);\n }\n\n componentWillLoad() {\n if (this.value && this.value.trim().length > 0) {\n this.textValue = this.value;\n this.isActive = true;\n }\n }\n\n componentDidLoad() {\n if (this.value && this.value.trim().length > 0) {\n this.changeElementsStyle();\n }\n }\n\n setLabelUp() {\n if (!this.isActive) {\n this.isActive = true;\n }\n this.changeElementsStyle();\n }\n\n setLabelDown() {\n if (this.isActive && (!this.textValue || this.textValue.trim().length === 0)) {\n this.isActive = false;\n }\n this.changeElementsStyle();\n }\n\n changeElementsStyle() {\n if (!this.labelElement || !this.activeLabelElement) return;\n\n this.activeLabelElement.style.display = this.isActive ? 'flex' : 'none';\n this.labelElement.style.display = this.isActive ? 'none' : 'block';\n if (!this.isActive) {\n this.labelElement.classList.add('from-up');\n }\n }\n\n handleTextareaClick = () => {\n if (this.disabled) return;\n this.setLabelUp();\n this.focusOnTextarea();\n };\n\n handleTextareaChanges = (event: InputEvent) => {\n const newValue = (event.target as HTMLTextAreaElement).value;\n this.textValue = newValue;\n this.value = newValue;\n\n if (newValue.length > 0 || this.textareaIsFocused) {\n this.setLabelUp();\n }\n\n this.valueChanged.emit(newValue);\n };\n\n handleFocus = () => {\n if (this.disabled) return;\n\n this.setLabelUp();\n this.focusOnTextarea();\n };\n\n handleBlur = () => {\n if (!this.textValue || this.textValue.trim().length === 0) {\n this.setLabelDown();\n }\n\n this.focusedOut.emit();\n this.textareaIsFocused = false;\n };\n\n handleTextareaFocus = () => {\n this.focusedOn.emit();\n this.textareaIsFocused = true;\n this.setLabelUp();\n };\n\n render() {\n const containerHeight = this.rows * 24 + 48;\n\n return (\n <Host ref={node => (this.node = node)}>\n <div>\n <div\n id=\"textarea-container\"\n class={{\n 'relative border rounded-sm px-16 py-12 outline-none caret-brand-primary': true,\n 'textarea-focus': this.textareaIsFocused && !this.disabled && this.status === SulaTextareaStatus.Default,\n 'textarea-error': this.status === SulaTextareaStatus.Error && !this.disabled,\n 'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,\n 'bg-surface-body border-line-input cursor-text': !this.disabled,\n }}\n style={{ height: `${containerHeight}px` }}\n tabIndex={0}\n onFocus={this.handleFocus}\n onClick={this.handleTextareaClick}\n >\n <label\n class={{\n 'text-base top-16 left-12 absolute transition-all duration-200 ease-in-out pointer-events-none z-10 w-[85%]': true,\n 'text-text-primary': !this.disabled && (this.isActive || this.status === SulaTextareaStatus.Default),\n 'text-text-disabled': this.disabled,\n 'bg-surface-body': !this.disabled && this.isActive,\n }}\n ref={node => (this.labelElement = node)}\n >\n {this.label}\n </label>\n\n <label\n class={{\n 'absolute font-bold transition-all duration-200 ease-in-out pointer-events-none z-10 active-label hidden from-down': true,\n 'text-sm top-12 left-16': this.isActive,\n 'text-text-primary': !this.disabled && (this.isActive || this.status === SulaTextareaStatus.Default),\n 'text-text-disabled': this.disabled,\n 'bg-surface-body': !this.disabled && this.isActive,\n }}\n ref={node => (this.activeLabelElement = node)}\n >\n {this.label}\n </label>\n\n <textarea\n ref={node => (this.textareaElement = node)}\n placeholder={this.isActive ? this.placeholder : ''}\n rows={this.rows}\n maxLength={this.maxLength}\n disabled={this.disabled}\n class={{\n 'w-full h-full outline-none text-base bg-transparent border-none resize-none': true,\n 'pt-6': this.isActive,\n 'pt-0': !this.isActive,\n 'text-text-primary': !this.disabled,\n 'text-text-disabled cursor-not-allowed overflow-hidden': this.disabled,\n }}\n onInput={this.handleTextareaChanges}\n onFocus={this.handleTextareaFocus}\n onBlur={this.handleBlur}\n value={this.textValue}\n />\n </div>\n\n {(this.helpText || this.maxLength) && (\n <div class=\"flex justify-between items-center px-16 mt-4 text-sm\">\n {this.helpText && (\n <div\n id=\"textarea-help-text\"\n class={{\n 'text-text-primary': this.status === SulaTextareaStatus.Default && !this.disabled,\n 'text-feedback-error': this.status === SulaTextareaStatus.Error && !this.disabled,\n 'text-text-disabled': this.disabled,\n }}\n >\n {this.helpText}\n </div>\n )}\n {this.maxLength && (\n <div\n id=\"max-length-container\"\n class={{\n 'text-text-primary': this.status === SulaTextareaStatus.Default && !this.disabled,\n 'text-feedback-error': this.status === SulaTextareaStatus.Error && !this.disabled,\n 'text-text-disabled': this.disabled,\n }}\n >\n {this.textValue ? this.textValue.length : 0}/{this.maxLength}\n </div>\n )}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -117,6 +117,8 @@ const SulaTextarea$1 = /*@__PURE__*/ proxyCustomElement(class SulaTextarea exten
|
|
|
117
117
|
this.changeElementsStyle();
|
|
118
118
|
}
|
|
119
119
|
changeElementsStyle() {
|
|
120
|
+
if (!this.labelElement || !this.activeLabelElement)
|
|
121
|
+
return;
|
|
120
122
|
this.activeLabelElement.style.display = this.isActive ? 'flex' : 'none';
|
|
121
123
|
this.labelElement.style.display = this.isActive ? 'none' : 'block';
|
|
122
124
|
if (!this.isActive) {
|
|
@@ -125,34 +127,34 @@ const SulaTextarea$1 = /*@__PURE__*/ proxyCustomElement(class SulaTextarea exten
|
|
|
125
127
|
}
|
|
126
128
|
render() {
|
|
127
129
|
const containerHeight = this.rows * 24 + 48;
|
|
128
|
-
return (h(Host, { key: '
|
|
130
|
+
return (h(Host, { key: '1ec5c0b8f04ea2f32d48301334d2c717327d0b17', ref: node => (this.node = node) }, h("div", { key: 'be0e209759746014407a3dc9aa553faea5b4f7f9' }, h("div", { key: '238be270fa3cfdbdd0f4a5cda9d99deeb7c9667d', id: "textarea-container", class: {
|
|
129
131
|
'relative border rounded-sm px-16 py-12 outline-none caret-brand-primary': true,
|
|
130
132
|
'textarea-focus': this.textareaIsFocused && !this.disabled && this.status === SulaTextareaStatus.Default,
|
|
131
133
|
'textarea-error': this.status === SulaTextareaStatus.Error && !this.disabled,
|
|
132
134
|
'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,
|
|
133
135
|
'bg-surface-body border-line-input cursor-text': !this.disabled,
|
|
134
|
-
}, style: { height: `${containerHeight}px` }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleTextareaClick }, h("label", { key: '
|
|
136
|
+
}, style: { height: `${containerHeight}px` }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleTextareaClick }, h("label", { key: '66812b881d9396ff093cac598e6c64a54e1cdbad', class: {
|
|
135
137
|
'text-base top-16 left-12 absolute transition-all duration-200 ease-in-out pointer-events-none z-10 w-[85%]': true,
|
|
136
138
|
'text-text-primary': !this.disabled && (this.isActive || this.status === SulaTextareaStatus.Default),
|
|
137
139
|
'text-text-disabled': this.disabled,
|
|
138
140
|
'bg-surface-body': !this.disabled && this.isActive,
|
|
139
|
-
}, ref: node => (this.labelElement = node) }, this.label), h("label", { key: '
|
|
141
|
+
}, ref: node => (this.labelElement = node) }, this.label), h("label", { key: 'e0b2a3f1d35b7bd047b6324464772697d565076d', class: {
|
|
140
142
|
'absolute font-bold transition-all duration-200 ease-in-out pointer-events-none z-10 active-label hidden from-down': true,
|
|
141
143
|
'text-sm top-12 left-16': this.isActive,
|
|
142
144
|
'text-text-primary': !this.disabled && (this.isActive || this.status === SulaTextareaStatus.Default),
|
|
143
145
|
'text-text-disabled': this.disabled,
|
|
144
146
|
'bg-surface-body': !this.disabled && this.isActive,
|
|
145
|
-
}, ref: node => (this.activeLabelElement = node) }, this.label), h("textarea", { key: '
|
|
147
|
+
}, ref: node => (this.activeLabelElement = node) }, this.label), h("textarea", { key: '77603b5c3bfb9430e5a41f0b219c5f0597f4ab92', ref: node => (this.textareaElement = node), placeholder: this.isActive ? this.placeholder : '', rows: this.rows, maxLength: this.maxLength, disabled: this.disabled, class: {
|
|
146
148
|
'w-full h-full outline-none text-base bg-transparent border-none resize-none': true,
|
|
147
149
|
'pt-6': this.isActive,
|
|
148
150
|
'pt-0': !this.isActive,
|
|
149
151
|
'text-text-primary': !this.disabled,
|
|
150
152
|
'text-text-disabled cursor-not-allowed overflow-hidden': this.disabled,
|
|
151
|
-
}, onInput: this.handleTextareaChanges, onFocus: this.handleTextareaFocus, onBlur: this.handleBlur, value: this.textValue })), (this.helpText || this.maxLength) && (h("div", { key: '
|
|
153
|
+
}, onInput: this.handleTextareaChanges, onFocus: this.handleTextareaFocus, onBlur: this.handleBlur, value: this.textValue })), (this.helpText || this.maxLength) && (h("div", { key: 'ed5e9397e617eb07241dc26fed75d35f0abd16fd', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h("div", { key: '3ee82fca291f045dcee3c2c29da6ac625ee42d44', id: "textarea-help-text", class: {
|
|
152
154
|
'text-text-primary': this.status === SulaTextareaStatus.Default && !this.disabled,
|
|
153
155
|
'text-feedback-error': this.status === SulaTextareaStatus.Error && !this.disabled,
|
|
154
156
|
'text-text-disabled': this.disabled,
|
|
155
|
-
} }, this.helpText)), this.maxLength && (h("div", { key: '
|
|
157
|
+
} }, this.helpText)), this.maxLength && (h("div", { key: 'd4a3503ef45089512b85cf2cb28c32f655f9b17c', id: "max-length-container", class: {
|
|
156
158
|
'text-text-primary': this.status === SulaTextareaStatus.Default && !this.disabled,
|
|
157
159
|
'text-feedback-error': this.status === SulaTextareaStatus.Error && !this.disabled,
|
|
158
160
|
'text-text-disabled': this.disabled,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"sula-textarea.js","mappings":";;AAAA,IAAY,kBAGX;AAHD,CAAA,UAAY,kBAAkB,EAAA;AAC5B,IAAA,kBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,kBAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,GAG7B,EAAA,CAAA,CAAA;;ACHD,MAAM,eAAe,GAAG,wsVAAwsV;;MCQntVA,cAAY,iBAAAC,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,GAAA;;;;;;;AAYE;;AAEG;AACsB,QAAA,IAAA,CAAA,MAAM,GAAuB,kBAAkB,CAAC,OAAO;AA2BhF;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAW,CAAC;AAqBxB,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAGhB,QAAA,IAAS,CAAA,SAAA,GAAW,EAAE;AAGtB,QAAA,IAAiB,CAAA,iBAAA,GAAG,KAAK;AAoFzB,QAAA,IAAmB,CAAA,mBAAA,GAAG,MAAK;YACzB,IAAI,IAAI,CAAC,QAAQ;gBAAE;YACnB,IAAI,CAAC,UAAU,EAAE;YACjB,IAAI,CAAC,eAAe,EAAE;AACxB,SAAC;AAED,QAAA,IAAA,CAAA,qBAAqB,GAAG,CAAC,KAAiB,KAAI;AAC5C,YAAA,MAAM,QAAQ,GAAI,KAAK,CAAC,MAA8B,CAAC,KAAK;AAC5D,YAAA,IAAI,CAAC,SAAS,GAAG,QAAQ;AACzB,YAAA,IAAI,CAAC,KAAK,GAAG,QAAQ;YAErB,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,iBAAiB,EAAE;gBACjD,IAAI,CAAC,UAAU,EAAE;;AAGnB,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC;AAClC,SAAC;AAED,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;YACjB,IAAI,IAAI,CAAC,QAAQ;gBAAE;YAEnB,IAAI,CAAC,UAAU,EAAE;YACjB,IAAI,CAAC,eAAe,EAAE;AACxB,SAAC;AAED,QAAA,IAAU,CAAA,UAAA,GAAG,MAAK;AAChB,YAAA,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,EAAE;gBACzD,IAAI,CAAC,YAAY,EAAE;;AAGrB,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;AACtB,YAAA,IAAI,CAAC,iBAAiB,GAAG,KAAK;AAChC,SAAC;AAED,QAAA,IAAmB,CAAA,mBAAA,GAAG,MAAK;AACzB,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;AACrB,YAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI;YAC7B,IAAI,CAAC,UAAU,EAAE;AACnB,SAAC;AAmGF;AA1NC,IAAA,iBAAiB,CAAC,QAAgB,EAAA;AAChC,QAAA,IAAI,CAAC,SAAS,GAAG,QAAQ;AAEzB,QAAA,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,KAAK,KAAK,QAAQ,EAAE;AACnE,YAAA,MAAM,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC,cAAc;YAC1D,IAAI,CAAC,eAAe,CAAC,KAAK,GAAG,QAAQ,IAAI,EAAE;YAE3C,IAAI,IAAI,CAAC,iBAAiB,IAAI,cAAc,KAAK,IAAI,EAAE;AACrD,gBAAA,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,cAAc,EAAE,CAAC,QAAQ,IAAI,EAAE,EAAE,MAAM,CAAC;gBACrE,IAAI,CAAC,eAAe,CAAC,iBAAiB,CAAC,WAAW,EAAE,WAAW,CAAC;;;QAIpE,IAAI,QAAQ,IAAI,QAAQ,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,EAAE;YAC1C,IAAI,CAAC,UAAU,EAAE;;AACZ,aAAA,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;YAClC,IAAI,CAAC,YAAY,EAAE;;;AAYvB,IAAA,WAAW,CAAC,KAAY,EAAA;QACtB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,iBAAiB;YAAE;AAE3C,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC;QAE5D,IAAI,CAAC,WAAW,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC,EAAE;YAC3E,IAAI,CAAC,YAAY,EAAE;AACnB,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;AACtB,YAAA,IAAI,CAAC,iBAAiB,GAAG,KAAK;;;IAIlC,eAAe,GAAA;QACb,UAAU,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE;SAC7B,EAAE,CAAC,CAAC;;IAGP,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,EAAE;AAC9C,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK;AAC3B,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;;;IAIxB,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,EAAE;YAC9C,IAAI,CAAC,mBAAmB,EAAE;;;IAI9B,UAAU,GAAA;AACR,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;;QAEtB,IAAI,CAAC,mBAAmB,EAAE;;IAG5B,YAAY,GAAA;QACV,IAAI,IAAI,CAAC,QAAQ,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC,EAAE;AAC5E,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;;QAEvB,IAAI,CAAC,mBAAmB,EAAE;;IAG5B,mBAAmB,GAAA;AACjB,QAAA,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,MAAM;AACvE,QAAA,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO;AAClE,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC;;;IA4C9C,MAAM,GAAA;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE,GAAG,EAAE;QAE3C,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,EAAA,EACnC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAC,oBAAoB,EACvB,KAAK,EAAE;AACL,gBAAA,yEAAyE,EAAE,IAAI;AAC/E,gBAAA,gBAAgB,EAAE,IAAI,CAAC,iBAAiB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,MAAM,KAAK,kBAAkB,CAAC,OAAO;AACxG,gBAAA,gBAAgB,EAAE,IAAI,CAAC,MAAM,KAAK,kBAAkB,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAC5E,8DAA8D,EAAE,IAAI,CAAC,QAAQ;AAC7E,gBAAA,+CAA+C,EAAE,CAAC,IAAI,CAAC,QAAQ;AAChE,aAAA,EACD,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,eAAe,CAAA,EAAA,CAAI,EAAE,EACzC,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,mBAAmB,EAAA,EAEjC,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,4GAA4G,EAAE,IAAI;AAClH,gBAAA,mBAAmB,EAAE,CAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,MAAM,KAAK,kBAAkB,CAAC,OAAO,CAAC;gBACpG,oBAAoB,EAAE,IAAI,CAAC,QAAQ;gBACnC,iBAAiB,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;AACnD,aAAA,EACD,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAEtC,IAAI,CAAC,KAAK,CACL,EAER,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,mHAAmH,EAAE,IAAI;gBACzH,wBAAwB,EAAE,IAAI,CAAC,QAAQ;AACvC,gBAAA,mBAAmB,EAAE,CAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,MAAM,KAAK,kBAAkB,CAAC,OAAO,CAAC;gBACpG,oBAAoB,EAAE,IAAI,CAAC,QAAQ;gBACnC,iBAAiB,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;AACnD,aAAA,EACD,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,IAE5C,IAAI,CAAC,KAAK,CACL,EAER,CACE,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,EAC1C,WAAW,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,GAAG,EAAE,EAClD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;AACL,gBAAA,6EAA6E,EAAE,IAAI;gBACnF,MAAM,EAAE,IAAI,CAAC,QAAQ;AACrB,gBAAA,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ;AACtB,gBAAA,mBAAmB,EAAE,CAAC,IAAI,CAAC,QAAQ;gBACnC,uDAAuD,EAAE,IAAI,CAAC,QAAQ;AACvE,aAAA,EACD,OAAO,EAAE,IAAI,CAAC,qBAAqB,EACnC,OAAO,EAAE,IAAI,CAAC,mBAAmB,EACjC,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,KAAK,EAAE,IAAI,CAAC,SAAS,EAAA,CACrB,CACE,EAEL,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,MAC/B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sDAAsD,EAAA,EAC9D,IAAI,CAAC,QAAQ,KACZ,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAC,oBAAoB,EACvB,KAAK,EAAE;AACL,gBAAA,mBAAmB,EAAE,IAAI,CAAC,MAAM,KAAK,kBAAkB,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ;AACjF,gBAAA,qBAAqB,EAAE,IAAI,CAAC,MAAM,KAAK,kBAAkB,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ;gBACjF,oBAAoB,EAAE,IAAI,CAAC,QAAQ;aACpC,EAAA,EAEA,IAAI,CAAC,QAAQ,CACV,CACP,EACA,IAAI,CAAC,SAAS,KACb,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAC,sBAAsB,EACzB,KAAK,EAAE;AACL,gBAAA,mBAAmB,EAAE,IAAI,CAAC,MAAM,KAAK,kBAAkB,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ;AACjF,gBAAA,qBAAqB,EAAE,IAAI,CAAC,MAAM,KAAK,kBAAkB,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ;gBACjF,oBAAoB,EAAE,IAAI,CAAC,QAAQ;AACpC,aAAA,EAAA,EAEA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,OAAG,IAAI,CAAC,SAAS,CACxD,CACP,CACG,CACP,CACG,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SulaTextarea","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sula-textarea/model/sula-textarea.model.ts","src/components/sula-textarea/sula-textarea.scss?tag=sula-textarea&encapsulation=shadow","src/components/sula-textarea/sula-textarea.tsx"],"sourcesContent":["export enum SulaTextareaStatus {\n Default = 'default',\n Error = 'error',\n}\n",":host {\n display: block;\n width: 100%;\n}\n\n.textarea-focus {\n outline: 2px solid var(--color-feedback-informational) !important;\n outline-offset: 2px !important;\n}\n\n.textarea-error {\n outline: 2px solid var(--color-feedback-error) !important;\n outline-offset: 2px !important;\n}\n\n.active-label {\n width: calc(100% - 3rem);\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 { SulaTextareaStatus } from './model/sula-textarea.model';\n\n@Component({\n tag: 'sula-textarea',\n styleUrl: 'sula-textarea.scss',\n shadow: true,\n})\nexport class SulaTextarea {\n /**\n * Value for the textarea.\n */\n @Prop({ mutable: true })\n value?: string;\n\n /**\n * The textarea status\n */\n @Prop({ mutable: true }) status: SulaTextareaStatus = SulaTextareaStatus.Default;\n\n /**\n * The textarea label\n */\n @Prop() label: string;\n\n /**\n * The textarea placeholder\n */\n @Prop() placeholder: string;\n\n /**\n * The textarea is disabled\n */\n @Prop({ mutable: true }) disabled: boolean;\n\n /**\n * The help text for textarea\n */\n @Prop() helpText?: string;\n\n /**\n * The textarea max length\n */\n @Prop() maxLength?: number;\n\n /**\n * The textarea rows (height)\n */\n @Prop() rows: number = 4;\n\n /**\n * Event emitted when textarea value changes.\n */\n @Event()\n valueChanged: EventEmitter<string>;\n\n /**\n * Event emitted when textarea is focused.\n */\n @Event()\n focusedOn: EventEmitter<void>;\n\n /**\n * Event emitted when textarea is focused out.\n */\n @Event()\n focusedOut: EventEmitter<void>;\n\n @State()\n isActive = false;\n\n @State()\n textValue: string = '';\n\n @State()\n textareaIsFocused = false;\n\n @Watch('value')\n watchValueHandler(newValue: string) {\n this.textValue = newValue;\n\n if (this.textareaElement && this.textareaElement.value !== newValue) {\n const cursorPosition = this.textareaElement.selectionStart;\n this.textareaElement.value = newValue || '';\n\n if (this.textareaIsFocused && cursorPosition !== null) {\n const newPosition = Math.min(cursorPosition, (newValue || '').length);\n this.textareaElement.setSelectionRange(newPosition, newPosition);\n }\n }\n\n if (newValue && newValue.trim().length > 0) {\n this.setLabelUp();\n } else if (!this.textareaIsFocused) {\n this.setLabelDown();\n }\n }\n\n textareaElement: HTMLTextAreaElement;\n\n node?: HTMLElement;\n\n activeLabelElement: HTMLLabelElement;\n labelElement: HTMLLabelElement;\n\n @Listen('click', { target: 'document' })\n handleClick(event: Event) {\n if (!this.node || !this.textareaIsFocused) return;\n\n const clickInside = this.node.contains(event.target as Node);\n\n if (!clickInside && (!this.textValue || this.textValue.trim().length === 0)) {\n this.setLabelDown();\n this.focusedOut.emit();\n this.textareaIsFocused = false;\n }\n }\n\n focusOnTextarea() {\n setTimeout(() => {\n this.textareaElement.focus();\n }, 0);\n }\n\n componentWillLoad() {\n if (this.value && this.value.trim().length > 0) {\n this.textValue = this.value;\n this.isActive = true;\n }\n }\n\n componentDidLoad() {\n if (this.value && this.value.trim().length > 0) {\n this.changeElementsStyle();\n }\n }\n\n setLabelUp() {\n if (!this.isActive) {\n this.isActive = true;\n }\n this.changeElementsStyle();\n }\n\n setLabelDown() {\n if (this.isActive && (!this.textValue || this.textValue.trim().length === 0)) {\n this.isActive = false;\n }\n this.changeElementsStyle();\n }\n\n changeElementsStyle() {\n this.activeLabelElement.style.display = this.isActive ? 'flex' : 'none';\n this.labelElement.style.display = this.isActive ? 'none' : 'block';\n if (!this.isActive) {\n this.labelElement.classList.add('from-up');\n }\n }\n\n handleTextareaClick = () => {\n if (this.disabled) return;\n this.setLabelUp();\n this.focusOnTextarea();\n };\n\n handleTextareaChanges = (event: InputEvent) => {\n const newValue = (event.target as HTMLTextAreaElement).value;\n this.textValue = newValue;\n this.value = newValue;\n\n if (newValue.length > 0 || this.textareaIsFocused) {\n this.setLabelUp();\n }\n\n this.valueChanged.emit(newValue);\n };\n\n handleFocus = () => {\n if (this.disabled) return;\n\n this.setLabelUp();\n this.focusOnTextarea();\n };\n\n handleBlur = () => {\n if (!this.textValue || this.textValue.trim().length === 0) {\n this.setLabelDown();\n }\n\n this.focusedOut.emit();\n this.textareaIsFocused = false;\n };\n\n handleTextareaFocus = () => {\n this.focusedOn.emit();\n this.textareaIsFocused = true;\n this.setLabelUp();\n };\n\n render() {\n const containerHeight = this.rows * 24 + 48;\n\n return (\n <Host ref={node => (this.node = node)}>\n <div>\n <div\n id=\"textarea-container\"\n class={{\n 'relative border rounded-sm px-16 py-12 outline-none caret-brand-primary': true,\n 'textarea-focus': this.textareaIsFocused && !this.disabled && this.status === SulaTextareaStatus.Default,\n 'textarea-error': this.status === SulaTextareaStatus.Error && !this.disabled,\n 'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,\n 'bg-surface-body border-line-input cursor-text': !this.disabled,\n }}\n style={{ height: `${containerHeight}px` }}\n tabIndex={0}\n onFocus={this.handleFocus}\n onClick={this.handleTextareaClick}\n >\n <label\n class={{\n 'text-base top-16 left-12 absolute transition-all duration-200 ease-in-out pointer-events-none z-10 w-[85%]': true,\n 'text-text-primary': !this.disabled && (this.isActive || this.status === SulaTextareaStatus.Default),\n 'text-text-disabled': this.disabled,\n 'bg-surface-body': !this.disabled && this.isActive,\n }}\n ref={node => (this.labelElement = node)}\n >\n {this.label}\n </label>\n\n <label\n class={{\n 'absolute font-bold transition-all duration-200 ease-in-out pointer-events-none z-10 active-label hidden from-down': true,\n 'text-sm top-12 left-16': this.isActive,\n 'text-text-primary': !this.disabled && (this.isActive || this.status === SulaTextareaStatus.Default),\n 'text-text-disabled': this.disabled,\n 'bg-surface-body': !this.disabled && this.isActive,\n }}\n ref={node => (this.activeLabelElement = node)}\n >\n {this.label}\n </label>\n\n <textarea\n ref={node => (this.textareaElement = node)}\n placeholder={this.isActive ? this.placeholder : ''}\n rows={this.rows}\n maxLength={this.maxLength}\n disabled={this.disabled}\n class={{\n 'w-full h-full outline-none text-base bg-transparent border-none resize-none': true,\n 'pt-6': this.isActive,\n 'pt-0': !this.isActive,\n 'text-text-primary': !this.disabled,\n 'text-text-disabled cursor-not-allowed overflow-hidden': this.disabled,\n }}\n onInput={this.handleTextareaChanges}\n onFocus={this.handleTextareaFocus}\n onBlur={this.handleBlur}\n value={this.textValue}\n />\n </div>\n\n {(this.helpText || this.maxLength) && (\n <div class=\"flex justify-between items-center px-16 mt-4 text-sm\">\n {this.helpText && (\n <div\n id=\"textarea-help-text\"\n class={{\n 'text-text-primary': this.status === SulaTextareaStatus.Default && !this.disabled,\n 'text-feedback-error': this.status === SulaTextareaStatus.Error && !this.disabled,\n 'text-text-disabled': this.disabled,\n }}\n >\n {this.helpText}\n </div>\n )}\n {this.maxLength && (\n <div\n id=\"max-length-container\"\n class={{\n 'text-text-primary': this.status === SulaTextareaStatus.Default && !this.disabled,\n 'text-feedback-error': this.status === SulaTextareaStatus.Error && !this.disabled,\n 'text-text-disabled': this.disabled,\n }}\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-textarea.js","mappings":"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","names":["SulaTextarea","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sula-textarea/model/sula-textarea.model.ts","src/components/sula-textarea/sula-textarea.scss?tag=sula-textarea&encapsulation=shadow","src/components/sula-textarea/sula-textarea.tsx"],"sourcesContent":["export enum SulaTextareaStatus {\n Default = 'default',\n Error = 'error',\n}\n",":host {\n display: block;\n width: 100%;\n}\n\n.textarea-focus {\n outline: 2px solid var(--color-feedback-informational) !important;\n outline-offset: 2px !important;\n}\n\n.textarea-error {\n outline: 2px solid var(--color-feedback-error) !important;\n outline-offset: 2px !important;\n}\n\n.active-label {\n width: calc(100% - 3rem);\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 { SulaTextareaStatus } from './model/sula-textarea.model';\n\n@Component({\n tag: 'sula-textarea',\n styleUrl: 'sula-textarea.scss',\n shadow: true,\n})\nexport class SulaTextarea {\n /**\n * Value for the textarea.\n */\n @Prop({ mutable: true })\n value?: string;\n\n /**\n * The textarea status\n */\n @Prop({ mutable: true }) status: SulaTextareaStatus = SulaTextareaStatus.Default;\n\n /**\n * The textarea label\n */\n @Prop() label: string;\n\n /**\n * The textarea placeholder\n */\n @Prop() placeholder: string;\n\n /**\n * The textarea is disabled\n */\n @Prop({ mutable: true }) disabled: boolean;\n\n /**\n * The help text for textarea\n */\n @Prop() helpText?: string;\n\n /**\n * The textarea max length\n */\n @Prop() maxLength?: number;\n\n /**\n * The textarea rows (height)\n */\n @Prop() rows: number = 4;\n\n /**\n * Event emitted when textarea value changes.\n */\n @Event()\n valueChanged: EventEmitter<string>;\n\n /**\n * Event emitted when textarea is focused.\n */\n @Event()\n focusedOn: EventEmitter<void>;\n\n /**\n * Event emitted when textarea is focused out.\n */\n @Event()\n focusedOut: EventEmitter<void>;\n\n @State()\n isActive = false;\n\n @State()\n textValue: string = '';\n\n @State()\n textareaIsFocused = false;\n\n @Watch('value')\n watchValueHandler(newValue: string) {\n this.textValue = newValue;\n\n if (this.textareaElement && this.textareaElement.value !== newValue) {\n const cursorPosition = this.textareaElement.selectionStart;\n this.textareaElement.value = newValue || '';\n\n if (this.textareaIsFocused && cursorPosition !== null) {\n const newPosition = Math.min(cursorPosition, (newValue || '').length);\n this.textareaElement.setSelectionRange(newPosition, newPosition);\n }\n }\n\n if (newValue && newValue.trim().length > 0) {\n this.setLabelUp();\n } else if (!this.textareaIsFocused) {\n this.setLabelDown();\n }\n }\n\n textareaElement: HTMLTextAreaElement;\n\n node?: HTMLElement;\n\n activeLabelElement: HTMLLabelElement;\n labelElement: HTMLLabelElement;\n\n @Listen('click', { target: 'document' })\n handleClick(event: Event) {\n if (!this.node || !this.textareaIsFocused) return;\n\n const clickInside = this.node.contains(event.target as Node);\n\n if (!clickInside && (!this.textValue || this.textValue.trim().length === 0)) {\n this.setLabelDown();\n this.focusedOut.emit();\n this.textareaIsFocused = false;\n }\n }\n\n focusOnTextarea() {\n setTimeout(() => {\n this.textareaElement.focus();\n }, 0);\n }\n\n componentWillLoad() {\n if (this.value && this.value.trim().length > 0) {\n this.textValue = this.value;\n this.isActive = true;\n }\n }\n\n componentDidLoad() {\n if (this.value && this.value.trim().length > 0) {\n this.changeElementsStyle();\n }\n }\n\n setLabelUp() {\n if (!this.isActive) {\n this.isActive = true;\n }\n this.changeElementsStyle();\n }\n\n setLabelDown() {\n if (this.isActive && (!this.textValue || this.textValue.trim().length === 0)) {\n this.isActive = false;\n }\n this.changeElementsStyle();\n }\n\n changeElementsStyle() {\n if (!this.labelElement || !this.activeLabelElement) return;\n\n this.activeLabelElement.style.display = this.isActive ? 'flex' : 'none';\n this.labelElement.style.display = this.isActive ? 'none' : 'block';\n if (!this.isActive) {\n this.labelElement.classList.add('from-up');\n }\n }\n\n handleTextareaClick = () => {\n if (this.disabled) return;\n this.setLabelUp();\n this.focusOnTextarea();\n };\n\n handleTextareaChanges = (event: InputEvent) => {\n const newValue = (event.target as HTMLTextAreaElement).value;\n this.textValue = newValue;\n this.value = newValue;\n\n if (newValue.length > 0 || this.textareaIsFocused) {\n this.setLabelUp();\n }\n\n this.valueChanged.emit(newValue);\n };\n\n handleFocus = () => {\n if (this.disabled) return;\n\n this.setLabelUp();\n this.focusOnTextarea();\n };\n\n handleBlur = () => {\n if (!this.textValue || this.textValue.trim().length === 0) {\n this.setLabelDown();\n }\n\n this.focusedOut.emit();\n this.textareaIsFocused = false;\n };\n\n handleTextareaFocus = () => {\n this.focusedOn.emit();\n this.textareaIsFocused = true;\n this.setLabelUp();\n };\n\n render() {\n const containerHeight = this.rows * 24 + 48;\n\n return (\n <Host ref={node => (this.node = node)}>\n <div>\n <div\n id=\"textarea-container\"\n class={{\n 'relative border rounded-sm px-16 py-12 outline-none caret-brand-primary': true,\n 'textarea-focus': this.textareaIsFocused && !this.disabled && this.status === SulaTextareaStatus.Default,\n 'textarea-error': this.status === SulaTextareaStatus.Error && !this.disabled,\n 'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,\n 'bg-surface-body border-line-input cursor-text': !this.disabled,\n }}\n style={{ height: `${containerHeight}px` }}\n tabIndex={0}\n onFocus={this.handleFocus}\n onClick={this.handleTextareaClick}\n >\n <label\n class={{\n 'text-base top-16 left-12 absolute transition-all duration-200 ease-in-out pointer-events-none z-10 w-[85%]': true,\n 'text-text-primary': !this.disabled && (this.isActive || this.status === SulaTextareaStatus.Default),\n 'text-text-disabled': this.disabled,\n 'bg-surface-body': !this.disabled && this.isActive,\n }}\n ref={node => (this.labelElement = node)}\n >\n {this.label}\n </label>\n\n <label\n class={{\n 'absolute font-bold transition-all duration-200 ease-in-out pointer-events-none z-10 active-label hidden from-down': true,\n 'text-sm top-12 left-16': this.isActive,\n 'text-text-primary': !this.disabled && (this.isActive || this.status === SulaTextareaStatus.Default),\n 'text-text-disabled': this.disabled,\n 'bg-surface-body': !this.disabled && this.isActive,\n }}\n ref={node => (this.activeLabelElement = node)}\n >\n {this.label}\n </label>\n\n <textarea\n ref={node => (this.textareaElement = node)}\n placeholder={this.isActive ? this.placeholder : ''}\n rows={this.rows}\n maxLength={this.maxLength}\n disabled={this.disabled}\n class={{\n 'w-full h-full outline-none text-base bg-transparent border-none resize-none': true,\n 'pt-6': this.isActive,\n 'pt-0': !this.isActive,\n 'text-text-primary': !this.disabled,\n 'text-text-disabled cursor-not-allowed overflow-hidden': this.disabled,\n }}\n onInput={this.handleTextareaChanges}\n onFocus={this.handleTextareaFocus}\n onBlur={this.handleBlur}\n value={this.textValue}\n />\n </div>\n\n {(this.helpText || this.maxLength) && (\n <div class=\"flex justify-between items-center px-16 mt-4 text-sm\">\n {this.helpText && (\n <div\n id=\"textarea-help-text\"\n class={{\n 'text-text-primary': this.status === SulaTextareaStatus.Default && !this.disabled,\n 'text-feedback-error': this.status === SulaTextareaStatus.Error && !this.disabled,\n 'text-text-disabled': this.disabled,\n }}\n >\n {this.helpText}\n </div>\n )}\n {this.maxLength && (\n <div\n id=\"max-length-container\"\n class={{\n 'text-text-primary': this.status === SulaTextareaStatus.Default && !this.disabled,\n 'text-feedback-error': this.status === SulaTextareaStatus.Error && !this.disabled,\n 'text-text-disabled': this.disabled,\n }}\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}
|
|
@@ -28239,6 +28239,8 @@ const SulaTextarea = class {
|
|
|
28239
28239
|
this.changeElementsStyle();
|
|
28240
28240
|
}
|
|
28241
28241
|
changeElementsStyle() {
|
|
28242
|
+
if (!this.labelElement || !this.activeLabelElement)
|
|
28243
|
+
return;
|
|
28242
28244
|
this.activeLabelElement.style.display = this.isActive ? 'flex' : 'none';
|
|
28243
28245
|
this.labelElement.style.display = this.isActive ? 'none' : 'block';
|
|
28244
28246
|
if (!this.isActive) {
|
|
@@ -28247,34 +28249,34 @@ const SulaTextarea = class {
|
|
|
28247
28249
|
}
|
|
28248
28250
|
render() {
|
|
28249
28251
|
const containerHeight = this.rows * 24 + 48;
|
|
28250
|
-
return (h$1(Host, { key: '
|
|
28252
|
+
return (h$1(Host, { key: '1ec5c0b8f04ea2f32d48301334d2c717327d0b17', ref: node => (this.node = node) }, h$1("div", { key: 'be0e209759746014407a3dc9aa553faea5b4f7f9' }, h$1("div", { key: '238be270fa3cfdbdd0f4a5cda9d99deeb7c9667d', id: "textarea-container", class: {
|
|
28251
28253
|
'relative border rounded-sm px-16 py-12 outline-none caret-brand-primary': true,
|
|
28252
28254
|
'textarea-focus': this.textareaIsFocused && !this.disabled && this.status === SulaTextareaStatus.Default,
|
|
28253
28255
|
'textarea-error': this.status === SulaTextareaStatus.Error && !this.disabled,
|
|
28254
28256
|
'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,
|
|
28255
28257
|
'bg-surface-body border-line-input cursor-text': !this.disabled,
|
|
28256
|
-
}, style: { height: `${containerHeight}px` }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleTextareaClick }, h$1("label", { key: '
|
|
28258
|
+
}, style: { height: `${containerHeight}px` }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleTextareaClick }, h$1("label", { key: '66812b881d9396ff093cac598e6c64a54e1cdbad', class: {
|
|
28257
28259
|
'text-base top-16 left-12 absolute transition-all duration-200 ease-in-out pointer-events-none z-10 w-[85%]': true,
|
|
28258
28260
|
'text-text-primary': !this.disabled && (this.isActive || this.status === SulaTextareaStatus.Default),
|
|
28259
28261
|
'text-text-disabled': this.disabled,
|
|
28260
28262
|
'bg-surface-body': !this.disabled && this.isActive,
|
|
28261
|
-
}, ref: node => (this.labelElement = node) }, this.label), h$1("label", { key: '
|
|
28263
|
+
}, ref: node => (this.labelElement = node) }, this.label), h$1("label", { key: 'e0b2a3f1d35b7bd047b6324464772697d565076d', class: {
|
|
28262
28264
|
'absolute font-bold transition-all duration-200 ease-in-out pointer-events-none z-10 active-label hidden from-down': true,
|
|
28263
28265
|
'text-sm top-12 left-16': this.isActive,
|
|
28264
28266
|
'text-text-primary': !this.disabled && (this.isActive || this.status === SulaTextareaStatus.Default),
|
|
28265
28267
|
'text-text-disabled': this.disabled,
|
|
28266
28268
|
'bg-surface-body': !this.disabled && this.isActive,
|
|
28267
|
-
}, ref: node => (this.activeLabelElement = node) }, this.label), h$1("textarea", { key: '
|
|
28269
|
+
}, ref: node => (this.activeLabelElement = node) }, this.label), h$1("textarea", { key: '77603b5c3bfb9430e5a41f0b219c5f0597f4ab92', ref: node => (this.textareaElement = node), placeholder: this.isActive ? this.placeholder : '', rows: this.rows, maxLength: this.maxLength, disabled: this.disabled, class: {
|
|
28268
28270
|
'w-full h-full outline-none text-base bg-transparent border-none resize-none': true,
|
|
28269
28271
|
'pt-6': this.isActive,
|
|
28270
28272
|
'pt-0': !this.isActive,
|
|
28271
28273
|
'text-text-primary': !this.disabled,
|
|
28272
28274
|
'text-text-disabled cursor-not-allowed overflow-hidden': this.disabled,
|
|
28273
|
-
}, onInput: this.handleTextareaChanges, onFocus: this.handleTextareaFocus, onBlur: this.handleBlur, value: this.textValue })), (this.helpText || this.maxLength) && (h$1("div", { key: '
|
|
28275
|
+
}, onInput: this.handleTextareaChanges, onFocus: this.handleTextareaFocus, onBlur: this.handleBlur, value: this.textValue })), (this.helpText || this.maxLength) && (h$1("div", { key: 'ed5e9397e617eb07241dc26fed75d35f0abd16fd', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h$1("div", { key: '3ee82fca291f045dcee3c2c29da6ac625ee42d44', id: "textarea-help-text", class: {
|
|
28274
28276
|
'text-text-primary': this.status === SulaTextareaStatus.Default && !this.disabled,
|
|
28275
28277
|
'text-feedback-error': this.status === SulaTextareaStatus.Error && !this.disabled,
|
|
28276
28278
|
'text-text-disabled': this.disabled,
|
|
28277
|
-
} }, this.helpText)), this.maxLength && (h$1("div", { key: '
|
|
28279
|
+
} }, this.helpText)), this.maxLength && (h$1("div", { key: 'd4a3503ef45089512b85cf2cb28c32f655f9b17c', id: "max-length-container", class: {
|
|
28278
28280
|
'text-text-primary': this.status === SulaTextareaStatus.Default && !this.disabled,
|
|
28279
28281
|
'text-feedback-error': this.status === SulaTextareaStatus.Error && !this.disabled,
|
|
28280
28282
|
'text-text-disabled': this.disabled,
|