@roadtrip/components 3.51.2 → 3.51.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/road-textarea.cjs.entry.js +22 -1
- package/dist/cjs/road-textarea.cjs.entry.js.map +1 -1
- package/dist/collection/components/textarea/textarea.js +22 -1
- package/dist/collection/components/textarea/textarea.js.map +1 -1
- package/dist/esm/road-textarea.entry.js +22 -1
- package/dist/esm/road-textarea.entry.js.map +1 -1
- package/dist/roadtrip/{p-c0f2eca7.entry.js → p-543ef281.entry.js} +2 -2
- package/dist/roadtrip/p-543ef281.entry.js.map +1 -0
- package/dist/roadtrip/roadtrip.esm.js +1 -1
- package/dist/types/components/textarea/textarea.d.ts +5 -0
- package/hydrate/index.js +22 -1
- package/hydrate/index.mjs +22 -1
- package/package.json +1 -1
- package/dist/roadtrip/p-c0f2eca7.entry.js.map +0 -1
|
@@ -67,6 +67,8 @@ const Textarea = class {
|
|
|
67
67
|
*/
|
|
68
68
|
this.label = `${this.textareaId}-label`;
|
|
69
69
|
this.onInput = (ev) => {
|
|
70
|
+
if (this.isComposing)
|
|
71
|
+
return;
|
|
70
72
|
const input = ev.target;
|
|
71
73
|
if (input) {
|
|
72
74
|
this.value = input.value || '';
|
|
@@ -75,6 +77,14 @@ const Textarea = class {
|
|
|
75
77
|
this.roadInput.emit(ev);
|
|
76
78
|
};
|
|
77
79
|
this.onBlur = () => {
|
|
80
|
+
var _a, _b;
|
|
81
|
+
if (this.isComposing) {
|
|
82
|
+
this.isComposing = false;
|
|
83
|
+
const domValue = (_b = (_a = this.textareaEl) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
|
|
84
|
+
if (this.value !== domValue) {
|
|
85
|
+
this.value = domValue;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
78
88
|
this.roadblur.emit();
|
|
79
89
|
this.roadBlur.emit();
|
|
80
90
|
};
|
|
@@ -82,6 +92,17 @@ const Textarea = class {
|
|
|
82
92
|
this.roadfocus.emit();
|
|
83
93
|
this.roadFocus.emit();
|
|
84
94
|
};
|
|
95
|
+
this.isComposing = false;
|
|
96
|
+
this.onCompositionStart = () => {
|
|
97
|
+
this.isComposing = true;
|
|
98
|
+
};
|
|
99
|
+
this.onCompositionUpdate = (ev) => {
|
|
100
|
+
this.onInput(ev);
|
|
101
|
+
};
|
|
102
|
+
this.onCompositionEnd = (ev) => {
|
|
103
|
+
this.isComposing = false;
|
|
104
|
+
this.onInput(ev);
|
|
105
|
+
};
|
|
85
106
|
}
|
|
86
107
|
/**
|
|
87
108
|
* Update the native textarea element when the value changes
|
|
@@ -99,7 +120,7 @@ const Textarea = class {
|
|
|
99
120
|
const hasValueClass = this.value !== '' ? 'has-value' : '';
|
|
100
121
|
const noResizeClass = this.resize == false ? 'no-resize' : '';
|
|
101
122
|
const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
|
|
102
|
-
return (index.h(index.Host, { key: '
|
|
123
|
+
return (index.h(index.Host, { key: 'e9d7e0090384cb0cf42eca630a93de1558d55421', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, index.h("textarea", { key: '502647f5de50628c8a631f239624d655276ce600', class: `form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`, id: this.textareaId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, value: value, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onCompositionstart: this.onCompositionStart, onCompositionupdate: this.onCompositionUpdate, onCompositionend: this.onCompositionEnd, onBlur: this.onBlur, onFocus: this.onFocus, ref: el => (this.textareaEl = el) }), index.h("label", { key: 'c06ce8199193e0157c25b61d803942276685dba4', class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && index.h("p", { key: '24353e133780f40637a78f17c6989450df804426', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && index.h("p", { key: '608831606425c4a5f3f351ff66b2f3271f11aab8', class: "helper" }, this.helper)));
|
|
103
124
|
}
|
|
104
125
|
static get watchers() { return {
|
|
105
126
|
"value": ["valueChanged"]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"road-textarea.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,o5GAAo5G,CAAC;AACz6G,2BAAe,WAAW;;MCMb,QAAQ;IALrB;;;;;;;;;;;;;QAUU,eAAU,GAAW,iBAAiB,WAAW,EAAE,EAAE,CAAC;;;;QAKtD,mBAAc,GAAW,MAAM,CAAC;;;;QAKhC,cAAS,GAAY,KAAK,CAAC;;;;QAK3B,aAAQ,GAAY,KAAK,CAAC;;;;QA4B1B,SAAI,GAAW,IAAI,CAAC,UAAU,CAAC;;;;QAU9B,UAAK,GAAgB,IAAI,CAAC;;;;QAK3B,aAAQ,GAAY,KAAK,CAAC;;;;QAK1B,aAAQ,GAAY,KAAK,CAAC;;;;QAK1B,eAAU,GAAY,KAAK,CAAC;;;;QAK1B,WAAM,GAAY,IAAI,CAAC;;;;QAoBR,UAAK,GAAmB,EAAE,CAAC;;;;QAK5C,UAAK,GAAW,GAAG,IAAI,CAAC,UAAU,QAAQ,CAAC;QAyD3C,YAAO,GAAG,CAAC,EAAS;YAC1B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;YACnD,IAAI,KAAK,EAAE;gBACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;aAChC;YACD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAmB,CAAC,CAAC;YACzC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAmB,CAAC,CAAC;SAC1C,CAAC;QAEM,WAAM,GAAG;YACf,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;YACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;SACtB,CAAC;QAEM,YAAO,GAAG;YAChB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;YACtB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;SACvB,CAAC;KA4CH;;;;IAtGW,YAAY;QACpB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QAC5C,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;KAC7C;IAkCO,QAAQ;QACd,OAAO,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;KACzB;IAqBD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC;QAC3C,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,KAAK,EAAE,GAAG,WAAW,GAAG,EAAE,CAAC;QAC3D,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,IAAI,KAAK,GAAG,WAAW,GAAG,EAAE,CAAC;QAC9D,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,GAAG,YAAY,GAAG,EAAE,CAAC;QAEzF,QACEA,QAACC,UAAI,sEAAgB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS,IAAI,CAAC,KAAK,EAAE,IAC5FD,uEACE,KAAK,EAAE,iCAAiC,aAAa,IAAI,aAAa,IAAI,cAAc,EAAE,EAC1F,EAAE,EAAE,IAAI,CAAC,UAAU,mBACJ,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,qBAC3B,OAAO,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,GAEZ,EACXA,oEAAO,KAAK,EAAC,YAAY,EAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,UAAU,IAAG,IAAI,CAAC,KAAK,CAAS,EACpF,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,IAAIA,gEAAG,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAK,EAC/E,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,IAAIA,gEAAG,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAK,CACpE,EACP;KACH;;;;;AAIH,IAAI,WAAW,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["src/components/textarea/textarea.css?tag=road-textarea&encapsulation=scoped","src/components/textarea/textarea.tsx"],"sourcesContent":["/*\n * Textarea\n *\n * Index\n * - Input\n * - Textarea\n * - Label\n * - Sizes\n * - Error\n * - Helper\n */\n\n:host {\n position: relative;\n display: block;\n margin-bottom: 1rem;\n font-family: var(--road-font, sans-serif);\n color: var(--road-on-surface);\n}\n\n/* INPUT\n -------------------- */\n\n.form-control {\n box-sizing: border-box;\n display: block;\n width: 100%;\n height: 3rem;\n padding: 0.75rem 1rem 0;\n margin: 0;\n font-size: var(--road-body-medium);\n color: var(--road-on-surface);\n background: var(--road-surface);\n border: 1px solid var(--road-input-outline);\n border-radius: 0.25rem;\n box-shadow: none;\n appearance: none;\n}\n\n/**\n * Placeholder\n */\n\n.form-control::placeholder {\n color: var(--road-on-surface-extra-weak);\n opacity: 1;\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n .form-control:not(:disabled):hover {\n border-color: var(--road-input-outline-variant);\n }\n}\n\n/**\n * Focus state\n */\n\n.form-control:focus ~ .form-label,\n.form-control[required]:valid ~ .form-label,\n.form-control.has-value ~ .form-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-control:placeholder-shown ~ .form-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n\n/* stylelint-disable */\n\n/* IE FIX */\n\n.form-control:-ms-input-placeholder ~ .form-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n/* stylelint-enable */\n\n.form-control:not(:disabled):focus {\n border-color: var(--road-input-outline-variant);\n}\n\n/**\n * Disabled state\n */\n\n.form-control:disabled,\n.form-control[readonly] {\n color: var(--road-on-surface-weak);\n cursor: not-allowed;\n background: var(--road-surface-disabled);\n opacity: 1;\n}\n\n/* TEXTAREA\n -------------------- */\n\n.textarea-control {\n height: auto;\n padding-top: 1rem;\n padding-bottom: 0.5rem;\n line-height: 1.5;\n}\n\n.textarea-control.no-resize {\n resize: none;\n}\n\n/* LABEL\n -------------------- */\n\n.form-label {\n position: absolute;\n top: 0.75rem;\n left: 1rem;\n display: block;\n font-size: var(--road-body-medium);\n line-height: 1.5;\n color: var(--road-on-surface-weak);\n pointer-events: none;\n transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n transform-origin: 0 0;\n width: 95%;\n white-space: normal;\n overflow-wrap: break-word;\n}\n\n/* SIZES\n -------------------- */\n\n:host(.input-xl) {\n --height: 3.5rem;\n}\n\n:host(.input-xl) .form-control {\n padding: 1.5rem 1rem 0.5rem;\n}\n\n:host(.input-xl) .form-label {\n top: 1rem;\n}\n\n:host(.input-xl) .form-control:focus ~ .form-label,\n:host(.input-xl) .form-control[required]:valid ~ .form-label,\n:host(.input-xl) .form-control.has-value ~ .form-label,\n:host(.input-xl) .form-control[type=\"date\"] ~ .form-label,\n:host(.input-xl) .form-control[type=\"time\"] ~ .form-label {\n width:100%;\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.input-xl) .form-control:placeholder-shown ~ .form-label {\n width: 100%;\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n display: none;\n width: 100%;\n margin-top: 0.5rem;\n font-size: var(--road-helper-medium);\n color: var(--road-on-danger-surface);\n}\n\n.form-control.is-invalid,\n.was-validated .form-control:invalid {\n border-color: var(--road-danger-outline);\n}\n\n.form-control.is-invalid ~ .invalid-feedback,\n.was-validated .form-control:invalid ~ .invalid-feedback {\n display: block;\n}\n\n/* HELPER\n -------------------- */\n\n.helper {\n margin-top: 0.5rem;\n font-size: var(--road-helper-medium);\n color: var(--road-on-surface-weak);\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'road-textarea',\n styleUrl: 'textarea.css',\n scoped: true,\n})\nexport class Textarea {\n\n /**\n * The id of textarea\n */\n @Prop() textareaId: string = `road-textarea-${textareaIds++}`;\n\n /**\n * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n */\n @Prop() autocapitalize: string = 'none';\n\n /**\n * This Boolean attribute lets you specify that a form control should have focus when the page loads.\n */\n @Prop() autofocus: boolean = false;\n\n /**\n * If `true`, the user cannot interact with the textarea.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * A hint to the browser for which keyboard to display.\n * This attribute applies when the value of the type attribute is `\"text\"`, `\"password\"`, `\"email\"`, or `\"url\"`. Possible values are: `\"verbatim\"`, `\"latin\"`, `\"latin-name\"`, `\"latin-prose\"`, `\"full-width-latin\"`, `\"kana\"`, `\"katakana\"`, `\"numeric\"`, `\"tel\"`, `\"email\"`, `\"url\"`.\n */\n @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\n /**\n * A hint to the browser for which enter key to display.\n * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n * `\"previous\"`, `\"search\"`, and `\"send\"`.\n */\n @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n /**\n * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n */\n @Prop() maxlength?: number;\n\n /**\n * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n */\n @Prop() minlength?: number;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.textareaId;\n\n /**\n * Instructional text that shows before the textarea has a value.\n */\n @Prop() placeholder?: string;\n\n /**\n * The sizes of the input.\n */\n @Prop() sizes: 'lg' | 'xl' = 'lg';\n\n /**\n * If `true`, the user cannot modify the value.\n */\n @Prop() readonly: boolean = false;\n\n /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n @Prop() required: boolean = false;\n\n /**\n * If `true`, the element will have its spelling and grammar checked.\n */\n @Prop() spellcheck: boolean = false;\n\n /**\n * If `false`, to disabled resize.\n */\n @Prop() resize: boolean = true;\n\n /**\n * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.\n */\n @Prop() cols?: number;\n\n /**\n * The number of rows of the control.\n */\n @Prop() rows?: number;\n\n /**\n * Indicates how the control wraps text.\n */\n @Prop() wrap?: 'hard' | 'soft' | 'off';\n\n /**\n * The value of the textarea.\n */\n @Prop({ mutable: true }) value?: string | null = '';\n\n /**\n * Label for the field\n */\n @Prop() label: string = `${this.textareaId}-label`;\n\n /**\n * Error message for the field\n */\n @Prop() error?: string;\n\n /**\n * Helper message for the field\n */\n @Prop() helper?: string;\n\n /**\n * Update the native textarea element when the value changes\n */\n @Watch('value')\n protected valueChanged() {\n this.roadchange.emit({ value: this.value });\n this.roadChange.emit({ value: this.value });\n }\n\n /**\n * Emitted when a keyboard input occurred.\n */\n @Event() roadinput!: EventEmitter<KeyboardEvent>;\n /** @internal */\n @Event() roadInput!: EventEmitter<KeyboardEvent>;\n\n /**\n * Emitted when the value has changed.\n */\n @Event() roadchange!: EventEmitter<{\n value: string | undefined | null\n }>;\n /** @internal */\n @Event() roadChange!: EventEmitter<{\n value: string | undefined | null\n }>;\n\n /**\n * Emitted when the textarea loses focus.\n */\n @Event() roadblur!: EventEmitter<void>;\n /** @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n /**\n * Emitted when the textarea has focus.\n */\n @Event() roadfocus!: EventEmitter<void>;\n /** @internal */\n @Event() roadFocus!: EventEmitter<void>;\n\n private getValue(): string {\n return this.value || '';\n }\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement | null;\n if (input) {\n this.value = input.value || '';\n }\n this.roadinput.emit(ev as KeyboardEvent);\n this.roadInput.emit(ev as KeyboardEvent);\n };\n\n private onBlur = () => {\n this.roadblur.emit();\n this.roadBlur.emit();\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n render() {\n const value = this.getValue();\n const labelId = this.textareaId + '-label';\n const hasValueClass = this.value !== '' ? 'has-value' : '';\n const noResizeClass = this.resize == false ? 'no-resize' : '';\n const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n return (\n <Host aria-disabled={this.disabled ? 'true' : null} class={this.sizes && `input-${this.sizes}`}>\n <textarea\n class={`form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`}\n id={this.textareaId}\n aria-disabled={this.disabled ? 'true' : null}\n aria-labelledby={labelId}\n disabled={this.disabled}\n autoCapitalize={this.autocapitalize}\n autoFocus={this.autofocus}\n enterKeyHint={this.enterkeyhint}\n inputMode={this.inputmode}\n maxLength={this.maxlength}\n minLength={this.minlength}\n name={this.name}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n value={value}\n spellcheck={this.spellcheck}\n cols={this.cols}\n rows={this.rows}\n wrap={this.wrap}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n >\n </textarea>\n <label class=\"form-label\" id={labelId} htmlFor={this.textareaId}>{this.label}</label>\n {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n </Host>\n );\n }\n\n}\n\nlet textareaIds = 0;\n"],"version":3}
|
|
1
|
+
{"file":"road-textarea.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/textarea/textarea.css?tag=road-textarea&encapsulation=scoped","src/components/textarea/textarea.tsx"],"sourcesContent":["/*\n * Textarea\n *\n * Index\n * - Input\n * - Textarea\n * - Label\n * - Sizes\n * - Error\n * - Helper\n */\n\n:host {\n position: relative;\n display: block;\n margin-bottom: 1rem;\n font-family: var(--road-font, sans-serif);\n color: var(--road-on-surface);\n}\n\n/* INPUT\n -------------------- */\n\n.form-control {\n box-sizing: border-box;\n display: block;\n width: 100%;\n height: 3rem;\n padding: 0.75rem 1rem 0;\n margin: 0;\n font-size: var(--road-body-medium);\n color: var(--road-on-surface);\n background: var(--road-surface);\n border: 1px solid var(--road-input-outline);\n border-radius: 0.25rem;\n box-shadow: none;\n appearance: none;\n}\n\n/**\n * Placeholder\n */\n\n.form-control::placeholder {\n color: var(--road-on-surface-extra-weak);\n opacity: 1;\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n .form-control:not(:disabled):hover {\n border-color: var(--road-input-outline-variant);\n }\n}\n\n/**\n * Focus state\n */\n\n.form-control:focus ~ .form-label,\n.form-control[required]:valid ~ .form-label,\n.form-control.has-value ~ .form-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-control:placeholder-shown ~ .form-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n\n/* stylelint-disable */\n\n/* IE FIX */\n\n.form-control:-ms-input-placeholder ~ .form-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n/* stylelint-enable */\n\n.form-control:not(:disabled):focus {\n border-color: var(--road-input-outline-variant);\n}\n\n/**\n * Disabled state\n */\n\n.form-control:disabled,\n.form-control[readonly] {\n color: var(--road-on-surface-weak);\n cursor: not-allowed;\n background: var(--road-surface-disabled);\n opacity: 1;\n}\n\n/* TEXTAREA\n -------------------- */\n\n.textarea-control {\n height: auto;\n padding-top: 1rem;\n padding-bottom: 0.5rem;\n line-height: 1.5;\n}\n\n.textarea-control.no-resize {\n resize: none;\n}\n\n/* LABEL\n -------------------- */\n\n.form-label {\n position: absolute;\n top: 0.75rem;\n left: 1rem;\n display: block;\n font-size: var(--road-body-medium);\n line-height: 1.5;\n color: var(--road-on-surface-weak);\n pointer-events: none;\n transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n transform-origin: 0 0;\n width: 95%;\n white-space: normal;\n overflow-wrap: break-word;\n}\n\n/* SIZES\n -------------------- */\n\n:host(.input-xl) {\n --height: 3.5rem;\n}\n\n:host(.input-xl) .form-control {\n padding: 1.5rem 1rem 0.5rem;\n}\n\n:host(.input-xl) .form-label {\n top: 1rem;\n}\n\n:host(.input-xl) .form-control:focus ~ .form-label,\n:host(.input-xl) .form-control[required]:valid ~ .form-label,\n:host(.input-xl) .form-control.has-value ~ .form-label,\n:host(.input-xl) .form-control[type=\"date\"] ~ .form-label,\n:host(.input-xl) .form-control[type=\"time\"] ~ .form-label {\n width:100%;\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.input-xl) .form-control:placeholder-shown ~ .form-label {\n width: 100%;\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n display: none;\n width: 100%;\n margin-top: 0.5rem;\n font-size: var(--road-helper-medium);\n color: var(--road-on-danger-surface);\n}\n\n.form-control.is-invalid,\n.was-validated .form-control:invalid {\n border-color: var(--road-danger-outline);\n}\n\n.form-control.is-invalid ~ .invalid-feedback,\n.was-validated .form-control:invalid ~ .invalid-feedback {\n display: block;\n}\n\n/* HELPER\n -------------------- */\n\n.helper {\n margin-top: 0.5rem;\n font-size: var(--road-helper-medium);\n color: var(--road-on-surface-weak);\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'road-textarea',\n styleUrl: 'textarea.css',\n scoped: true,\n})\nexport class Textarea {\n\n /**\n * The id of textarea\n */\n @Prop() textareaId: string = `road-textarea-${textareaIds++}`;\n\n /**\n * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n */\n @Prop() autocapitalize: string = 'none';\n\n /**\n * This Boolean attribute lets you specify that a form control should have focus when the page loads.\n */\n @Prop() autofocus: boolean = false;\n\n /**\n * If `true`, the user cannot interact with the textarea.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * A hint to the browser for which keyboard to display.\n * This attribute applies when the value of the type attribute is `\"text\"`, `\"password\"`, `\"email\"`, or `\"url\"`. Possible values are: `\"verbatim\"`, `\"latin\"`, `\"latin-name\"`, `\"latin-prose\"`, `\"full-width-latin\"`, `\"kana\"`, `\"katakana\"`, `\"numeric\"`, `\"tel\"`, `\"email\"`, `\"url\"`.\n */\n @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\n /**\n * A hint to the browser for which enter key to display.\n * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n * `\"previous\"`, `\"search\"`, and `\"send\"`.\n */\n @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n /**\n * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n */\n @Prop() maxlength?: number;\n\n /**\n * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n */\n @Prop() minlength?: number;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.textareaId;\n\n /**\n * Instructional text that shows before the textarea has a value.\n */\n @Prop() placeholder?: string;\n\n /**\n * The sizes of the input.\n */\n @Prop() sizes: 'lg' | 'xl' = 'lg';\n\n /**\n * If `true`, the user cannot modify the value.\n */\n @Prop() readonly: boolean = false;\n\n /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n @Prop() required: boolean = false;\n\n /**\n * If `true`, the element will have its spelling and grammar checked.\n */\n @Prop() spellcheck: boolean = false;\n\n /**\n * If `false`, to disabled resize.\n */\n @Prop() resize: boolean = true;\n\n /**\n * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.\n */\n @Prop() cols?: number;\n\n /**\n * The number of rows of the control.\n */\n @Prop() rows?: number;\n\n /**\n * Indicates how the control wraps text.\n */\n @Prop() wrap?: 'hard' | 'soft' | 'off';\n\n /**\n * The value of the textarea.\n */\n @Prop({ mutable: true }) value?: string | null = '';\n\n /**\n * Label for the field\n */\n @Prop() label: string = `${this.textareaId}-label`;\n\n /**\n * Error message for the field\n */\n @Prop() error?: string;\n\n /**\n * Helper message for the field\n */\n @Prop() helper?: string;\n\n /**\n * Update the native textarea element when the value changes\n */\n @Watch('value')\n protected valueChanged() {\n this.roadchange.emit({ value: this.value });\n this.roadChange.emit({ value: this.value });\n }\n\n /**\n * Emitted when a keyboard input occurred.\n */\n @Event() roadinput!: EventEmitter<KeyboardEvent>;\n /** @internal */\n @Event() roadInput!: EventEmitter<KeyboardEvent>;\n\n /**\n * Emitted when the value has changed.\n */\n @Event() roadchange!: EventEmitter<{\n value: string | undefined | null\n }>;\n /** @internal */\n @Event() roadChange!: EventEmitter<{\n value: string | undefined | null\n }>;\n\n /**\n * Emitted when the textarea loses focus.\n */\n @Event() roadblur!: EventEmitter<void>;\n /** @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n /**\n * Emitted when the textarea has focus.\n */\n @Event() roadfocus!: EventEmitter<void>;\n /** @internal */\n @Event() roadFocus!: EventEmitter<void>;\n\n private getValue(): string {\n return this.value || '';\n }\n\n private onInput = (ev: Event) => {\n if (this.isComposing) return;\n\n const input = ev.target as HTMLInputElement | null;\n if (input) {\n this.value = input.value || '';\n }\n this.roadinput.emit(ev as KeyboardEvent);\n this.roadInput.emit(ev as KeyboardEvent);\n };\n\n private onBlur = () => {\n if (this.isComposing) {\n this.isComposing = false;\n const domValue = this.textareaEl?.value ?? '';\n if (this.value !== domValue) {\n this.value = domValue;\n }\n }\n\n this.roadblur.emit();\n this.roadBlur.emit();\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n private isComposing = false;\n\n private onCompositionStart = () => {\n this.isComposing = true;\n };\n\n private onCompositionUpdate = (ev: CompositionEvent) => {\n this.onInput(ev as unknown as Event);\n };\n\n private onCompositionEnd = (ev: CompositionEvent) => {\n this.isComposing = false;\n this.onInput(ev as unknown as Event);\n };\n\n private textareaEl?: HTMLTextAreaElement;\n\n render() {\n const value = this.getValue();\n const labelId = this.textareaId + '-label';\n const hasValueClass = this.value !== '' ? 'has-value' : '';\n const noResizeClass = this.resize == false ? 'no-resize' : '';\n const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n return (\n <Host aria-disabled={this.disabled ? 'true' : null} class={this.sizes && `input-${this.sizes}`}>\n <textarea\n class={`form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`}\n id={this.textareaId}\n aria-disabled={this.disabled ? 'true' : null}\n aria-labelledby={labelId}\n disabled={this.disabled}\n autoCapitalize={this.autocapitalize}\n autoFocus={this.autofocus}\n enterKeyHint={this.enterkeyhint}\n inputMode={this.inputmode}\n maxLength={this.maxlength}\n minLength={this.minlength}\n name={this.name}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n value={value}\n spellcheck={this.spellcheck}\n cols={this.cols}\n rows={this.rows}\n wrap={this.wrap}\n onInput={this.onInput}\n onCompositionstart={this.onCompositionStart}\n onCompositionupdate={this.onCompositionUpdate}\n onCompositionend={this.onCompositionEnd}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n ref={el => (this.textareaEl = el as HTMLTextAreaElement)}\n >\n </textarea>\n <label class=\"form-label\" id={labelId} htmlFor={this.textareaId}>{this.label}</label>\n {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n </Host>\n );\n }\n\n}\n\nlet textareaIds = 0;\n"],"version":3}
|
|
@@ -50,6 +50,8 @@ export class Textarea {
|
|
|
50
50
|
*/
|
|
51
51
|
this.label = `${this.textareaId}-label`;
|
|
52
52
|
this.onInput = (ev) => {
|
|
53
|
+
if (this.isComposing)
|
|
54
|
+
return;
|
|
53
55
|
const input = ev.target;
|
|
54
56
|
if (input) {
|
|
55
57
|
this.value = input.value || '';
|
|
@@ -58,6 +60,14 @@ export class Textarea {
|
|
|
58
60
|
this.roadInput.emit(ev);
|
|
59
61
|
};
|
|
60
62
|
this.onBlur = () => {
|
|
63
|
+
var _a, _b;
|
|
64
|
+
if (this.isComposing) {
|
|
65
|
+
this.isComposing = false;
|
|
66
|
+
const domValue = (_b = (_a = this.textareaEl) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
|
|
67
|
+
if (this.value !== domValue) {
|
|
68
|
+
this.value = domValue;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
61
71
|
this.roadblur.emit();
|
|
62
72
|
this.roadBlur.emit();
|
|
63
73
|
};
|
|
@@ -65,6 +75,17 @@ export class Textarea {
|
|
|
65
75
|
this.roadfocus.emit();
|
|
66
76
|
this.roadFocus.emit();
|
|
67
77
|
};
|
|
78
|
+
this.isComposing = false;
|
|
79
|
+
this.onCompositionStart = () => {
|
|
80
|
+
this.isComposing = true;
|
|
81
|
+
};
|
|
82
|
+
this.onCompositionUpdate = (ev) => {
|
|
83
|
+
this.onInput(ev);
|
|
84
|
+
};
|
|
85
|
+
this.onCompositionEnd = (ev) => {
|
|
86
|
+
this.isComposing = false;
|
|
87
|
+
this.onInput(ev);
|
|
88
|
+
};
|
|
68
89
|
}
|
|
69
90
|
/**
|
|
70
91
|
* Update the native textarea element when the value changes
|
|
@@ -82,7 +103,7 @@ export class Textarea {
|
|
|
82
103
|
const hasValueClass = this.value !== '' ? 'has-value' : '';
|
|
83
104
|
const noResizeClass = this.resize == false ? 'no-resize' : '';
|
|
84
105
|
const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
|
|
85
|
-
return (h(Host, { key: '
|
|
106
|
+
return (h(Host, { key: 'e9d7e0090384cb0cf42eca630a93de1558d55421', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, h("textarea", { key: '502647f5de50628c8a631f239624d655276ce600', class: `form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`, id: this.textareaId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, value: value, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onCompositionstart: this.onCompositionStart, onCompositionupdate: this.onCompositionUpdate, onCompositionend: this.onCompositionEnd, onBlur: this.onBlur, onFocus: this.onFocus, ref: el => (this.textareaEl = el) }), h("label", { key: 'c06ce8199193e0157c25b61d803942276685dba4', class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && h("p", { key: '24353e133780f40637a78f17c6989450df804426', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: '608831606425c4a5f3f351ff66b2f3271f11aab8', class: "helper" }, this.helper)));
|
|
86
107
|
}
|
|
87
108
|
static get is() { return "road-textarea"; }
|
|
88
109
|
static get encapsulation() { return "scoped"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'road-textarea',\n styleUrl: 'textarea.css',\n scoped: true,\n})\nexport class Textarea {\n\n /**\n * The id of textarea\n */\n @Prop() textareaId: string = `road-textarea-${textareaIds++}`;\n\n /**\n * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n */\n @Prop() autocapitalize: string = 'none';\n\n /**\n * This Boolean attribute lets you specify that a form control should have focus when the page loads.\n */\n @Prop() autofocus: boolean = false;\n\n /**\n * If `true`, the user cannot interact with the textarea.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * A hint to the browser for which keyboard to display.\n * This attribute applies when the value of the type attribute is `\"text\"`, `\"password\"`, `\"email\"`, or `\"url\"`. Possible values are: `\"verbatim\"`, `\"latin\"`, `\"latin-name\"`, `\"latin-prose\"`, `\"full-width-latin\"`, `\"kana\"`, `\"katakana\"`, `\"numeric\"`, `\"tel\"`, `\"email\"`, `\"url\"`.\n */\n @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\n /**\n * A hint to the browser for which enter key to display.\n * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n * `\"previous\"`, `\"search\"`, and `\"send\"`.\n */\n @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n /**\n * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n */\n @Prop() maxlength?: number;\n\n /**\n * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n */\n @Prop() minlength?: number;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.textareaId;\n\n /**\n * Instructional text that shows before the textarea has a value.\n */\n @Prop() placeholder?: string;\n\n /**\n * The sizes of the input.\n */\n @Prop() sizes: 'lg' | 'xl' = 'lg';\n\n /**\n * If `true`, the user cannot modify the value.\n */\n @Prop() readonly: boolean = false;\n\n /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n @Prop() required: boolean = false;\n\n /**\n * If `true`, the element will have its spelling and grammar checked.\n */\n @Prop() spellcheck: boolean = false;\n\n /**\n * If `false`, to disabled resize.\n */\n @Prop() resize: boolean = true;\n\n /**\n * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.\n */\n @Prop() cols?: number;\n\n /**\n * The number of rows of the control.\n */\n @Prop() rows?: number;\n\n /**\n * Indicates how the control wraps text.\n */\n @Prop() wrap?: 'hard' | 'soft' | 'off';\n\n /**\n * The value of the textarea.\n */\n @Prop({ mutable: true }) value?: string | null = '';\n\n /**\n * Label for the field\n */\n @Prop() label: string = `${this.textareaId}-label`;\n\n /**\n * Error message for the field\n */\n @Prop() error?: string;\n\n /**\n * Helper message for the field\n */\n @Prop() helper?: string;\n\n /**\n * Update the native textarea element when the value changes\n */\n @Watch('value')\n protected valueChanged() {\n this.roadchange.emit({ value: this.value });\n this.roadChange.emit({ value: this.value });\n }\n\n /**\n * Emitted when a keyboard input occurred.\n */\n @Event() roadinput!: EventEmitter<KeyboardEvent>;\n /** @internal */\n @Event() roadInput!: EventEmitter<KeyboardEvent>;\n\n /**\n * Emitted when the value has changed.\n */\n @Event() roadchange!: EventEmitter<{\n value: string | undefined | null\n }>;\n /** @internal */\n @Event() roadChange!: EventEmitter<{\n value: string | undefined | null\n }>;\n\n /**\n * Emitted when the textarea loses focus.\n */\n @Event() roadblur!: EventEmitter<void>;\n /** @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n /**\n * Emitted when the textarea has focus.\n */\n @Event() roadfocus!: EventEmitter<void>;\n /** @internal */\n @Event() roadFocus!: EventEmitter<void>;\n\n private getValue(): string {\n return this.value || '';\n }\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement | null;\n if (input) {\n this.value = input.value || '';\n }\n this.roadinput.emit(ev as KeyboardEvent);\n this.roadInput.emit(ev as KeyboardEvent);\n };\n\n private onBlur = () => {\n this.roadblur.emit();\n this.roadBlur.emit();\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n render() {\n const value = this.getValue();\n const labelId = this.textareaId + '-label';\n const hasValueClass = this.value !== '' ? 'has-value' : '';\n const noResizeClass = this.resize == false ? 'no-resize' : '';\n const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n return (\n <Host aria-disabled={this.disabled ? 'true' : null} class={this.sizes && `input-${this.sizes}`}>\n <textarea\n class={`form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`}\n id={this.textareaId}\n aria-disabled={this.disabled ? 'true' : null}\n aria-labelledby={labelId}\n disabled={this.disabled}\n autoCapitalize={this.autocapitalize}\n autoFocus={this.autofocus}\n enterKeyHint={this.enterkeyhint}\n inputMode={this.inputmode}\n maxLength={this.maxlength}\n minLength={this.minlength}\n name={this.name}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n value={value}\n spellcheck={this.spellcheck}\n cols={this.cols}\n rows={this.rows}\n wrap={this.wrap}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n >\n </textarea>\n <label class=\"form-label\" id={labelId} htmlFor={this.textareaId}>{this.label}</label>\n {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n </Host>\n );\n }\n\n}\n\nlet textareaIds = 0;\n"]}
|
|
1
|
+
{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'road-textarea',\n styleUrl: 'textarea.css',\n scoped: true,\n})\nexport class Textarea {\n\n /**\n * The id of textarea\n */\n @Prop() textareaId: string = `road-textarea-${textareaIds++}`;\n\n /**\n * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n */\n @Prop() autocapitalize: string = 'none';\n\n /**\n * This Boolean attribute lets you specify that a form control should have focus when the page loads.\n */\n @Prop() autofocus: boolean = false;\n\n /**\n * If `true`, the user cannot interact with the textarea.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * A hint to the browser for which keyboard to display.\n * This attribute applies when the value of the type attribute is `\"text\"`, `\"password\"`, `\"email\"`, or `\"url\"`. Possible values are: `\"verbatim\"`, `\"latin\"`, `\"latin-name\"`, `\"latin-prose\"`, `\"full-width-latin\"`, `\"kana\"`, `\"katakana\"`, `\"numeric\"`, `\"tel\"`, `\"email\"`, `\"url\"`.\n */\n @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\n /**\n * A hint to the browser for which enter key to display.\n * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n * `\"previous\"`, `\"search\"`, and `\"send\"`.\n */\n @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n /**\n * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n */\n @Prop() maxlength?: number;\n\n /**\n * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n */\n @Prop() minlength?: number;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.textareaId;\n\n /**\n * Instructional text that shows before the textarea has a value.\n */\n @Prop() placeholder?: string;\n\n /**\n * The sizes of the input.\n */\n @Prop() sizes: 'lg' | 'xl' = 'lg';\n\n /**\n * If `true`, the user cannot modify the value.\n */\n @Prop() readonly: boolean = false;\n\n /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n @Prop() required: boolean = false;\n\n /**\n * If `true`, the element will have its spelling and grammar checked.\n */\n @Prop() spellcheck: boolean = false;\n\n /**\n * If `false`, to disabled resize.\n */\n @Prop() resize: boolean = true;\n\n /**\n * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.\n */\n @Prop() cols?: number;\n\n /**\n * The number of rows of the control.\n */\n @Prop() rows?: number;\n\n /**\n * Indicates how the control wraps text.\n */\n @Prop() wrap?: 'hard' | 'soft' | 'off';\n\n /**\n * The value of the textarea.\n */\n @Prop({ mutable: true }) value?: string | null = '';\n\n /**\n * Label for the field\n */\n @Prop() label: string = `${this.textareaId}-label`;\n\n /**\n * Error message for the field\n */\n @Prop() error?: string;\n\n /**\n * Helper message for the field\n */\n @Prop() helper?: string;\n\n /**\n * Update the native textarea element when the value changes\n */\n @Watch('value')\n protected valueChanged() {\n this.roadchange.emit({ value: this.value });\n this.roadChange.emit({ value: this.value });\n }\n\n /**\n * Emitted when a keyboard input occurred.\n */\n @Event() roadinput!: EventEmitter<KeyboardEvent>;\n /** @internal */\n @Event() roadInput!: EventEmitter<KeyboardEvent>;\n\n /**\n * Emitted when the value has changed.\n */\n @Event() roadchange!: EventEmitter<{\n value: string | undefined | null\n }>;\n /** @internal */\n @Event() roadChange!: EventEmitter<{\n value: string | undefined | null\n }>;\n\n /**\n * Emitted when the textarea loses focus.\n */\n @Event() roadblur!: EventEmitter<void>;\n /** @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n /**\n * Emitted when the textarea has focus.\n */\n @Event() roadfocus!: EventEmitter<void>;\n /** @internal */\n @Event() roadFocus!: EventEmitter<void>;\n\n private getValue(): string {\n return this.value || '';\n }\n\n private onInput = (ev: Event) => {\n if (this.isComposing) return;\n\n const input = ev.target as HTMLInputElement | null;\n if (input) {\n this.value = input.value || '';\n }\n this.roadinput.emit(ev as KeyboardEvent);\n this.roadInput.emit(ev as KeyboardEvent);\n };\n\n private onBlur = () => {\n if (this.isComposing) {\n this.isComposing = false;\n const domValue = this.textareaEl?.value ?? '';\n if (this.value !== domValue) {\n this.value = domValue;\n }\n }\n\n this.roadblur.emit();\n this.roadBlur.emit();\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n private isComposing = false;\n\n private onCompositionStart = () => {\n this.isComposing = true;\n };\n\n private onCompositionUpdate = (ev: CompositionEvent) => {\n this.onInput(ev as unknown as Event);\n };\n\n private onCompositionEnd = (ev: CompositionEvent) => {\n this.isComposing = false;\n this.onInput(ev as unknown as Event);\n };\n\n private textareaEl?: HTMLTextAreaElement;\n\n render() {\n const value = this.getValue();\n const labelId = this.textareaId + '-label';\n const hasValueClass = this.value !== '' ? 'has-value' : '';\n const noResizeClass = this.resize == false ? 'no-resize' : '';\n const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n return (\n <Host aria-disabled={this.disabled ? 'true' : null} class={this.sizes && `input-${this.sizes}`}>\n <textarea\n class={`form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`}\n id={this.textareaId}\n aria-disabled={this.disabled ? 'true' : null}\n aria-labelledby={labelId}\n disabled={this.disabled}\n autoCapitalize={this.autocapitalize}\n autoFocus={this.autofocus}\n enterKeyHint={this.enterkeyhint}\n inputMode={this.inputmode}\n maxLength={this.maxlength}\n minLength={this.minlength}\n name={this.name}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n value={value}\n spellcheck={this.spellcheck}\n cols={this.cols}\n rows={this.rows}\n wrap={this.wrap}\n onInput={this.onInput}\n onCompositionstart={this.onCompositionStart}\n onCompositionupdate={this.onCompositionUpdate}\n onCompositionend={this.onCompositionEnd}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n ref={el => (this.textareaEl = el as HTMLTextAreaElement)}\n >\n </textarea>\n <label class=\"form-label\" id={labelId} htmlFor={this.textareaId}>{this.label}</label>\n {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n </Host>\n );\n }\n\n}\n\nlet textareaIds = 0;\n"]}
|
|
@@ -63,6 +63,8 @@ const Textarea = class {
|
|
|
63
63
|
*/
|
|
64
64
|
this.label = `${this.textareaId}-label`;
|
|
65
65
|
this.onInput = (ev) => {
|
|
66
|
+
if (this.isComposing)
|
|
67
|
+
return;
|
|
66
68
|
const input = ev.target;
|
|
67
69
|
if (input) {
|
|
68
70
|
this.value = input.value || '';
|
|
@@ -71,6 +73,14 @@ const Textarea = class {
|
|
|
71
73
|
this.roadInput.emit(ev);
|
|
72
74
|
};
|
|
73
75
|
this.onBlur = () => {
|
|
76
|
+
var _a, _b;
|
|
77
|
+
if (this.isComposing) {
|
|
78
|
+
this.isComposing = false;
|
|
79
|
+
const domValue = (_b = (_a = this.textareaEl) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
|
|
80
|
+
if (this.value !== domValue) {
|
|
81
|
+
this.value = domValue;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
74
84
|
this.roadblur.emit();
|
|
75
85
|
this.roadBlur.emit();
|
|
76
86
|
};
|
|
@@ -78,6 +88,17 @@ const Textarea = class {
|
|
|
78
88
|
this.roadfocus.emit();
|
|
79
89
|
this.roadFocus.emit();
|
|
80
90
|
};
|
|
91
|
+
this.isComposing = false;
|
|
92
|
+
this.onCompositionStart = () => {
|
|
93
|
+
this.isComposing = true;
|
|
94
|
+
};
|
|
95
|
+
this.onCompositionUpdate = (ev) => {
|
|
96
|
+
this.onInput(ev);
|
|
97
|
+
};
|
|
98
|
+
this.onCompositionEnd = (ev) => {
|
|
99
|
+
this.isComposing = false;
|
|
100
|
+
this.onInput(ev);
|
|
101
|
+
};
|
|
81
102
|
}
|
|
82
103
|
/**
|
|
83
104
|
* Update the native textarea element when the value changes
|
|
@@ -95,7 +116,7 @@ const Textarea = class {
|
|
|
95
116
|
const hasValueClass = this.value !== '' ? 'has-value' : '';
|
|
96
117
|
const noResizeClass = this.resize == false ? 'no-resize' : '';
|
|
97
118
|
const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
|
|
98
|
-
return (h(Host, { key: '
|
|
119
|
+
return (h(Host, { key: 'e9d7e0090384cb0cf42eca630a93de1558d55421', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, h("textarea", { key: '502647f5de50628c8a631f239624d655276ce600', class: `form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`, id: this.textareaId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, value: value, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onCompositionstart: this.onCompositionStart, onCompositionupdate: this.onCompositionUpdate, onCompositionend: this.onCompositionEnd, onBlur: this.onBlur, onFocus: this.onFocus, ref: el => (this.textareaEl = el) }), h("label", { key: 'c06ce8199193e0157c25b61d803942276685dba4', class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && h("p", { key: '24353e133780f40637a78f17c6989450df804426', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: '608831606425c4a5f3f351ff66b2f3271f11aab8', class: "helper" }, this.helper)));
|
|
99
120
|
}
|
|
100
121
|
static get watchers() { return {
|
|
101
122
|
"value": ["valueChanged"]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"road-textarea.entry.js","mappings":"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","names":[],"sources":["src/components/textarea/textarea.css?tag=road-textarea&encapsulation=scoped","src/components/textarea/textarea.tsx"],"sourcesContent":["/*\n * Textarea\n *\n * Index\n * - Input\n * - Textarea\n * - Label\n * - Sizes\n * - Error\n * - Helper\n */\n\n:host {\n position: relative;\n display: block;\n margin-bottom: 1rem;\n font-family: var(--road-font, sans-serif);\n color: var(--road-on-surface);\n}\n\n/* INPUT\n -------------------- */\n\n.form-control {\n box-sizing: border-box;\n display: block;\n width: 100%;\n height: 3rem;\n padding: 0.75rem 1rem 0;\n margin: 0;\n font-size: var(--road-body-medium);\n color: var(--road-on-surface);\n background: var(--road-surface);\n border: 1px solid var(--road-input-outline);\n border-radius: 0.25rem;\n box-shadow: none;\n appearance: none;\n}\n\n/**\n * Placeholder\n */\n\n.form-control::placeholder {\n color: var(--road-on-surface-extra-weak);\n opacity: 1;\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n .form-control:not(:disabled):hover {\n border-color: var(--road-input-outline-variant);\n }\n}\n\n/**\n * Focus state\n */\n\n.form-control:focus ~ .form-label,\n.form-control[required]:valid ~ .form-label,\n.form-control.has-value ~ .form-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-control:placeholder-shown ~ .form-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n\n/* stylelint-disable */\n\n/* IE FIX */\n\n.form-control:-ms-input-placeholder ~ .form-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n/* stylelint-enable */\n\n.form-control:not(:disabled):focus {\n border-color: var(--road-input-outline-variant);\n}\n\n/**\n * Disabled state\n */\n\n.form-control:disabled,\n.form-control[readonly] {\n color: var(--road-on-surface-weak);\n cursor: not-allowed;\n background: var(--road-surface-disabled);\n opacity: 1;\n}\n\n/* TEXTAREA\n -------------------- */\n\n.textarea-control {\n height: auto;\n padding-top: 1rem;\n padding-bottom: 0.5rem;\n line-height: 1.5;\n}\n\n.textarea-control.no-resize {\n resize: none;\n}\n\n/* LABEL\n -------------------- */\n\n.form-label {\n position: absolute;\n top: 0.75rem;\n left: 1rem;\n display: block;\n font-size: var(--road-body-medium);\n line-height: 1.5;\n color: var(--road-on-surface-weak);\n pointer-events: none;\n transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n transform-origin: 0 0;\n width: 95%;\n white-space: normal;\n overflow-wrap: break-word;\n}\n\n/* SIZES\n -------------------- */\n\n:host(.input-xl) {\n --height: 3.5rem;\n}\n\n:host(.input-xl) .form-control {\n padding: 1.5rem 1rem 0.5rem;\n}\n\n:host(.input-xl) .form-label {\n top: 1rem;\n}\n\n:host(.input-xl) .form-control:focus ~ .form-label,\n:host(.input-xl) .form-control[required]:valid ~ .form-label,\n:host(.input-xl) .form-control.has-value ~ .form-label,\n:host(.input-xl) .form-control[type=\"date\"] ~ .form-label,\n:host(.input-xl) .form-control[type=\"time\"] ~ .form-label {\n width:100%;\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.input-xl) .form-control:placeholder-shown ~ .form-label {\n width: 100%;\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n display: none;\n width: 100%;\n margin-top: 0.5rem;\n font-size: var(--road-helper-medium);\n color: var(--road-on-danger-surface);\n}\n\n.form-control.is-invalid,\n.was-validated .form-control:invalid {\n border-color: var(--road-danger-outline);\n}\n\n.form-control.is-invalid ~ .invalid-feedback,\n.was-validated .form-control:invalid ~ .invalid-feedback {\n display: block;\n}\n\n/* HELPER\n -------------------- */\n\n.helper {\n margin-top: 0.5rem;\n font-size: var(--road-helper-medium);\n color: var(--road-on-surface-weak);\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'road-textarea',\n styleUrl: 'textarea.css',\n scoped: true,\n})\nexport class Textarea {\n\n /**\n * The id of textarea\n */\n @Prop() textareaId: string = `road-textarea-${textareaIds++}`;\n\n /**\n * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n */\n @Prop() autocapitalize: string = 'none';\n\n /**\n * This Boolean attribute lets you specify that a form control should have focus when the page loads.\n */\n @Prop() autofocus: boolean = false;\n\n /**\n * If `true`, the user cannot interact with the textarea.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * A hint to the browser for which keyboard to display.\n * This attribute applies when the value of the type attribute is `\"text\"`, `\"password\"`, `\"email\"`, or `\"url\"`. Possible values are: `\"verbatim\"`, `\"latin\"`, `\"latin-name\"`, `\"latin-prose\"`, `\"full-width-latin\"`, `\"kana\"`, `\"katakana\"`, `\"numeric\"`, `\"tel\"`, `\"email\"`, `\"url\"`.\n */\n @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\n /**\n * A hint to the browser for which enter key to display.\n * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n * `\"previous\"`, `\"search\"`, and `\"send\"`.\n */\n @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n /**\n * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n */\n @Prop() maxlength?: number;\n\n /**\n * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n */\n @Prop() minlength?: number;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.textareaId;\n\n /**\n * Instructional text that shows before the textarea has a value.\n */\n @Prop() placeholder?: string;\n\n /**\n * The sizes of the input.\n */\n @Prop() sizes: 'lg' | 'xl' = 'lg';\n\n /**\n * If `true`, the user cannot modify the value.\n */\n @Prop() readonly: boolean = false;\n\n /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n @Prop() required: boolean = false;\n\n /**\n * If `true`, the element will have its spelling and grammar checked.\n */\n @Prop() spellcheck: boolean = false;\n\n /**\n * If `false`, to disabled resize.\n */\n @Prop() resize: boolean = true;\n\n /**\n * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.\n */\n @Prop() cols?: number;\n\n /**\n * The number of rows of the control.\n */\n @Prop() rows?: number;\n\n /**\n * Indicates how the control wraps text.\n */\n @Prop() wrap?: 'hard' | 'soft' | 'off';\n\n /**\n * The value of the textarea.\n */\n @Prop({ mutable: true }) value?: string | null = '';\n\n /**\n * Label for the field\n */\n @Prop() label: string = `${this.textareaId}-label`;\n\n /**\n * Error message for the field\n */\n @Prop() error?: string;\n\n /**\n * Helper message for the field\n */\n @Prop() helper?: string;\n\n /**\n * Update the native textarea element when the value changes\n */\n @Watch('value')\n protected valueChanged() {\n this.roadchange.emit({ value: this.value });\n this.roadChange.emit({ value: this.value });\n }\n\n /**\n * Emitted when a keyboard input occurred.\n */\n @Event() roadinput!: EventEmitter<KeyboardEvent>;\n /** @internal */\n @Event() roadInput!: EventEmitter<KeyboardEvent>;\n\n /**\n * Emitted when the value has changed.\n */\n @Event() roadchange!: EventEmitter<{\n value: string | undefined | null\n }>;\n /** @internal */\n @Event() roadChange!: EventEmitter<{\n value: string | undefined | null\n }>;\n\n /**\n * Emitted when the textarea loses focus.\n */\n @Event() roadblur!: EventEmitter<void>;\n /** @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n /**\n * Emitted when the textarea has focus.\n */\n @Event() roadfocus!: EventEmitter<void>;\n /** @internal */\n @Event() roadFocus!: EventEmitter<void>;\n\n private getValue(): string {\n return this.value || '';\n }\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement | null;\n if (input) {\n this.value = input.value || '';\n }\n this.roadinput.emit(ev as KeyboardEvent);\n this.roadInput.emit(ev as KeyboardEvent);\n };\n\n private onBlur = () => {\n this.roadblur.emit();\n this.roadBlur.emit();\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n render() {\n const value = this.getValue();\n const labelId = this.textareaId + '-label';\n const hasValueClass = this.value !== '' ? 'has-value' : '';\n const noResizeClass = this.resize == false ? 'no-resize' : '';\n const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n return (\n <Host aria-disabled={this.disabled ? 'true' : null} class={this.sizes && `input-${this.sizes}`}>\n <textarea\n class={`form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`}\n id={this.textareaId}\n aria-disabled={this.disabled ? 'true' : null}\n aria-labelledby={labelId}\n disabled={this.disabled}\n autoCapitalize={this.autocapitalize}\n autoFocus={this.autofocus}\n enterKeyHint={this.enterkeyhint}\n inputMode={this.inputmode}\n maxLength={this.maxlength}\n minLength={this.minlength}\n name={this.name}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n value={value}\n spellcheck={this.spellcheck}\n cols={this.cols}\n rows={this.rows}\n wrap={this.wrap}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n >\n </textarea>\n <label class=\"form-label\" id={labelId} htmlFor={this.textareaId}>{this.label}</label>\n {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n </Host>\n );\n }\n\n}\n\nlet textareaIds = 0;\n"],"version":3}
|
|
1
|
+
{"file":"road-textarea.entry.js","mappings":"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","names":[],"sources":["src/components/textarea/textarea.css?tag=road-textarea&encapsulation=scoped","src/components/textarea/textarea.tsx"],"sourcesContent":["/*\n * Textarea\n *\n * Index\n * - Input\n * - Textarea\n * - Label\n * - Sizes\n * - Error\n * - Helper\n */\n\n:host {\n position: relative;\n display: block;\n margin-bottom: 1rem;\n font-family: var(--road-font, sans-serif);\n color: var(--road-on-surface);\n}\n\n/* INPUT\n -------------------- */\n\n.form-control {\n box-sizing: border-box;\n display: block;\n width: 100%;\n height: 3rem;\n padding: 0.75rem 1rem 0;\n margin: 0;\n font-size: var(--road-body-medium);\n color: var(--road-on-surface);\n background: var(--road-surface);\n border: 1px solid var(--road-input-outline);\n border-radius: 0.25rem;\n box-shadow: none;\n appearance: none;\n}\n\n/**\n * Placeholder\n */\n\n.form-control::placeholder {\n color: var(--road-on-surface-extra-weak);\n opacity: 1;\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n .form-control:not(:disabled):hover {\n border-color: var(--road-input-outline-variant);\n }\n}\n\n/**\n * Focus state\n */\n\n.form-control:focus ~ .form-label,\n.form-control[required]:valid ~ .form-label,\n.form-control.has-value ~ .form-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-control:placeholder-shown ~ .form-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n\n/* stylelint-disable */\n\n/* IE FIX */\n\n.form-control:-ms-input-placeholder ~ .form-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n/* stylelint-enable */\n\n.form-control:not(:disabled):focus {\n border-color: var(--road-input-outline-variant);\n}\n\n/**\n * Disabled state\n */\n\n.form-control:disabled,\n.form-control[readonly] {\n color: var(--road-on-surface-weak);\n cursor: not-allowed;\n background: var(--road-surface-disabled);\n opacity: 1;\n}\n\n/* TEXTAREA\n -------------------- */\n\n.textarea-control {\n height: auto;\n padding-top: 1rem;\n padding-bottom: 0.5rem;\n line-height: 1.5;\n}\n\n.textarea-control.no-resize {\n resize: none;\n}\n\n/* LABEL\n -------------------- */\n\n.form-label {\n position: absolute;\n top: 0.75rem;\n left: 1rem;\n display: block;\n font-size: var(--road-body-medium);\n line-height: 1.5;\n color: var(--road-on-surface-weak);\n pointer-events: none;\n transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n transform-origin: 0 0;\n width: 95%;\n white-space: normal;\n overflow-wrap: break-word;\n}\n\n/* SIZES\n -------------------- */\n\n:host(.input-xl) {\n --height: 3.5rem;\n}\n\n:host(.input-xl) .form-control {\n padding: 1.5rem 1rem 0.5rem;\n}\n\n:host(.input-xl) .form-label {\n top: 1rem;\n}\n\n:host(.input-xl) .form-control:focus ~ .form-label,\n:host(.input-xl) .form-control[required]:valid ~ .form-label,\n:host(.input-xl) .form-control.has-value ~ .form-label,\n:host(.input-xl) .form-control[type=\"date\"] ~ .form-label,\n:host(.input-xl) .form-control[type=\"time\"] ~ .form-label {\n width:100%;\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.input-xl) .form-control:placeholder-shown ~ .form-label {\n width: 100%;\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n display: none;\n width: 100%;\n margin-top: 0.5rem;\n font-size: var(--road-helper-medium);\n color: var(--road-on-danger-surface);\n}\n\n.form-control.is-invalid,\n.was-validated .form-control:invalid {\n border-color: var(--road-danger-outline);\n}\n\n.form-control.is-invalid ~ .invalid-feedback,\n.was-validated .form-control:invalid ~ .invalid-feedback {\n display: block;\n}\n\n/* HELPER\n -------------------- */\n\n.helper {\n margin-top: 0.5rem;\n font-size: var(--road-helper-medium);\n color: var(--road-on-surface-weak);\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'road-textarea',\n styleUrl: 'textarea.css',\n scoped: true,\n})\nexport class Textarea {\n\n /**\n * The id of textarea\n */\n @Prop() textareaId: string = `road-textarea-${textareaIds++}`;\n\n /**\n * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n */\n @Prop() autocapitalize: string = 'none';\n\n /**\n * This Boolean attribute lets you specify that a form control should have focus when the page loads.\n */\n @Prop() autofocus: boolean = false;\n\n /**\n * If `true`, the user cannot interact with the textarea.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * A hint to the browser for which keyboard to display.\n * This attribute applies when the value of the type attribute is `\"text\"`, `\"password\"`, `\"email\"`, or `\"url\"`. Possible values are: `\"verbatim\"`, `\"latin\"`, `\"latin-name\"`, `\"latin-prose\"`, `\"full-width-latin\"`, `\"kana\"`, `\"katakana\"`, `\"numeric\"`, `\"tel\"`, `\"email\"`, `\"url\"`.\n */\n @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\n /**\n * A hint to the browser for which enter key to display.\n * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n * `\"previous\"`, `\"search\"`, and `\"send\"`.\n */\n @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n /**\n * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n */\n @Prop() maxlength?: number;\n\n /**\n * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n */\n @Prop() minlength?: number;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.textareaId;\n\n /**\n * Instructional text that shows before the textarea has a value.\n */\n @Prop() placeholder?: string;\n\n /**\n * The sizes of the input.\n */\n @Prop() sizes: 'lg' | 'xl' = 'lg';\n\n /**\n * If `true`, the user cannot modify the value.\n */\n @Prop() readonly: boolean = false;\n\n /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n @Prop() required: boolean = false;\n\n /**\n * If `true`, the element will have its spelling and grammar checked.\n */\n @Prop() spellcheck: boolean = false;\n\n /**\n * If `false`, to disabled resize.\n */\n @Prop() resize: boolean = true;\n\n /**\n * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.\n */\n @Prop() cols?: number;\n\n /**\n * The number of rows of the control.\n */\n @Prop() rows?: number;\n\n /**\n * Indicates how the control wraps text.\n */\n @Prop() wrap?: 'hard' | 'soft' | 'off';\n\n /**\n * The value of the textarea.\n */\n @Prop({ mutable: true }) value?: string | null = '';\n\n /**\n * Label for the field\n */\n @Prop() label: string = `${this.textareaId}-label`;\n\n /**\n * Error message for the field\n */\n @Prop() error?: string;\n\n /**\n * Helper message for the field\n */\n @Prop() helper?: string;\n\n /**\n * Update the native textarea element when the value changes\n */\n @Watch('value')\n protected valueChanged() {\n this.roadchange.emit({ value: this.value });\n this.roadChange.emit({ value: this.value });\n }\n\n /**\n * Emitted when a keyboard input occurred.\n */\n @Event() roadinput!: EventEmitter<KeyboardEvent>;\n /** @internal */\n @Event() roadInput!: EventEmitter<KeyboardEvent>;\n\n /**\n * Emitted when the value has changed.\n */\n @Event() roadchange!: EventEmitter<{\n value: string | undefined | null\n }>;\n /** @internal */\n @Event() roadChange!: EventEmitter<{\n value: string | undefined | null\n }>;\n\n /**\n * Emitted when the textarea loses focus.\n */\n @Event() roadblur!: EventEmitter<void>;\n /** @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n /**\n * Emitted when the textarea has focus.\n */\n @Event() roadfocus!: EventEmitter<void>;\n /** @internal */\n @Event() roadFocus!: EventEmitter<void>;\n\n private getValue(): string {\n return this.value || '';\n }\n\n private onInput = (ev: Event) => {\n if (this.isComposing) return;\n\n const input = ev.target as HTMLInputElement | null;\n if (input) {\n this.value = input.value || '';\n }\n this.roadinput.emit(ev as KeyboardEvent);\n this.roadInput.emit(ev as KeyboardEvent);\n };\n\n private onBlur = () => {\n if (this.isComposing) {\n this.isComposing = false;\n const domValue = this.textareaEl?.value ?? '';\n if (this.value !== domValue) {\n this.value = domValue;\n }\n }\n\n this.roadblur.emit();\n this.roadBlur.emit();\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n private isComposing = false;\n\n private onCompositionStart = () => {\n this.isComposing = true;\n };\n\n private onCompositionUpdate = (ev: CompositionEvent) => {\n this.onInput(ev as unknown as Event);\n };\n\n private onCompositionEnd = (ev: CompositionEvent) => {\n this.isComposing = false;\n this.onInput(ev as unknown as Event);\n };\n\n private textareaEl?: HTMLTextAreaElement;\n\n render() {\n const value = this.getValue();\n const labelId = this.textareaId + '-label';\n const hasValueClass = this.value !== '' ? 'has-value' : '';\n const noResizeClass = this.resize == false ? 'no-resize' : '';\n const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n return (\n <Host aria-disabled={this.disabled ? 'true' : null} class={this.sizes && `input-${this.sizes}`}>\n <textarea\n class={`form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`}\n id={this.textareaId}\n aria-disabled={this.disabled ? 'true' : null}\n aria-labelledby={labelId}\n disabled={this.disabled}\n autoCapitalize={this.autocapitalize}\n autoFocus={this.autofocus}\n enterKeyHint={this.enterkeyhint}\n inputMode={this.inputmode}\n maxLength={this.maxlength}\n minLength={this.minlength}\n name={this.name}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n value={value}\n spellcheck={this.spellcheck}\n cols={this.cols}\n rows={this.rows}\n wrap={this.wrap}\n onInput={this.onInput}\n onCompositionstart={this.onCompositionStart}\n onCompositionupdate={this.onCompositionUpdate}\n onCompositionend={this.onCompositionEnd}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n ref={el => (this.textareaEl = el as HTMLTextAreaElement)}\n >\n </textarea>\n <label class=\"form-label\" id={labelId} htmlFor={this.textareaId}>{this.label}</label>\n {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n </Host>\n );\n }\n\n}\n\nlet textareaIds = 0;\n"],"version":3}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as a,c as
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as a,c as t,h as r,H as e}from"./p-d7aae05d.js";const o='.sc-road-textarea-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface)}.form-control.sc-road-textarea{box-sizing:border-box;display:block;width:100%;height:3rem;padding:0.75rem 1rem 0;margin:0;font-size:var(--road-body-medium);color:var(--road-on-surface);background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;box-shadow:none;appearance:none}.form-control.sc-road-textarea::placeholder{color:var(--road-on-surface-extra-weak);opacity:1}@media (hover: hover){.form-control.sc-road-textarea:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-control.sc-road-textarea:focus~.form-label.sc-road-textarea,.form-control[required].sc-road-textarea:valid~.form-label.sc-road-textarea,.form-control.has-value.sc-road-textarea~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:placeholder-shown~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:-ms-input-placeholder~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:not(:disabled):focus{border-color:var(--road-input-outline-variant)}.form-control.sc-road-textarea:disabled,.form-control[readonly].sc-road-textarea{color:var(--road-on-surface-weak);cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.textarea-control.sc-road-textarea{height:auto;padding-top:1rem;padding-bottom:0.5rem;line-height:1.5}.textarea-control.no-resize.sc-road-textarea{resize:none}.form-label.sc-road-textarea{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0;width:95%;white-space:normal;overflow-wrap:break-word}.input-xl.sc-road-textarea-h{--height:3.5rem}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea{padding:1.5rem 1rem 0.5rem}.input-xl.sc-road-textarea-h .form-label.sc-road-textarea{top:1rem}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea:focus~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[required].sc-road-textarea:valid~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control.has-value.sc-road-textarea~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[type="date"].sc-road-textarea~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[type="time"].sc-road-textarea~.form-label.sc-road-textarea{width:100%;transform:scale(0.75) translateY(-0.625rem)}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea:placeholder-shown~.form-label.sc-road-textarea{width:100%;transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-textarea{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-on-danger-surface)}.form-control.is-invalid.sc-road-textarea,.was-validated.sc-road-textarea .form-control.sc-road-textarea:invalid{border-color:var(--road-danger-outline)}.form-control.is-invalid.sc-road-textarea~.invalid-feedback.sc-road-textarea,.was-validated.sc-road-textarea .form-control.sc-road-textarea:invalid~.invalid-feedback.sc-road-textarea{display:block}.helper.sc-road-textarea{margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-on-surface-weak)}';const s=o;const i=class{constructor(r){a(this,r);this.roadinput=t(this,"roadinput",7);this.roadInput=t(this,"roadInput",7);this.roadchange=t(this,"roadchange",7);this.roadChange=t(this,"roadChange",7);this.roadblur=t(this,"roadblur",7);this.roadBlur=t(this,"roadBlur",7);this.roadfocus=t(this,"roadfocus",7);this.roadFocus=t(this,"roadFocus",7);this.textareaId=`road-textarea-${l++}`;this.autocapitalize="none";this.autofocus=false;this.disabled=false;this.name=this.textareaId;this.sizes="lg";this.readonly=false;this.required=false;this.spellcheck=false;this.resize=true;this.value="";this.label=`${this.textareaId}-label`;this.onInput=a=>{if(this.isComposing)return;const t=a.target;if(t){this.value=t.value||""}this.roadinput.emit(a);this.roadInput.emit(a)};this.onBlur=()=>{var a,t;if(this.isComposing){this.isComposing=false;const r=(t=(a=this.textareaEl)===null||a===void 0?void 0:a.value)!==null&&t!==void 0?t:"";if(this.value!==r){this.value=r}}this.roadblur.emit();this.roadBlur.emit()};this.onFocus=()=>{this.roadfocus.emit();this.roadFocus.emit()};this.isComposing=false;this.onCompositionStart=()=>{this.isComposing=true};this.onCompositionUpdate=a=>{this.onInput(a)};this.onCompositionEnd=a=>{this.isComposing=false;this.onInput(a)}}valueChanged(){this.roadchange.emit({value:this.value});this.roadChange.emit({value:this.value})}getValue(){return this.value||""}render(){const a=this.getValue();const t=this.textareaId+"-label";const o=this.value!==""?"has-value":"";const s=this.resize==false?"no-resize":"";const i=this.error!==undefined&&this.error!==""?"is-invalid":"";return r(e,{key:"e9d7e0090384cb0cf42eca630a93de1558d55421","aria-disabled":this.disabled?"true":null,class:this.sizes&&`input-${this.sizes}`},r("textarea",{key:"502647f5de50628c8a631f239624d655276ce600",class:`form-control textarea-control ${o} ${s} ${i}`,id:this.textareaId,"aria-disabled":this.disabled?"true":null,"aria-labelledby":t,disabled:this.disabled,autoCapitalize:this.autocapitalize,autoFocus:this.autofocus,enterKeyHint:this.enterkeyhint,inputMode:this.inputmode,maxLength:this.maxlength,minLength:this.minlength,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,value:a,spellcheck:this.spellcheck,cols:this.cols,rows:this.rows,wrap:this.wrap,onInput:this.onInput,onCompositionstart:this.onCompositionStart,onCompositionupdate:this.onCompositionUpdate,onCompositionend:this.onCompositionEnd,onBlur:this.onBlur,onFocus:this.onFocus,ref:a=>this.textareaEl=a}),r("label",{key:"c06ce8199193e0157c25b61d803942276685dba4",class:"form-label",id:t,htmlFor:this.textareaId},this.label),this.error&&this.error!==""&&r("p",{key:"24353e133780f40637a78f17c6989450df804426",class:"invalid-feedback"},this.error),this.helper&&this.helper!==""&&r("p",{key:"608831606425c4a5f3f351ff66b2f3271f11aab8",class:"helper"},this.helper))}static get watchers(){return{value:["valueChanged"]}}};let l=0;i.style=s;export{i as road_textarea};
|
|
2
|
+
//# sourceMappingURL=p-543ef281.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["textareaCss","RoadTextareaStyle0","Textarea","constructor","hostRef","this","textareaId","textareaIds","autocapitalize","autofocus","disabled","name","sizes","readonly","required","spellcheck","resize","value","label","onInput","ev","isComposing","input","target","roadinput","emit","roadInput","onBlur","domValue","_b","_a","textareaEl","roadblur","roadBlur","onFocus","roadfocus","roadFocus","onCompositionStart","onCompositionUpdate","onCompositionEnd","valueChanged","roadchange","roadChange","getValue","render","labelId","hasValueClass","noResizeClass","isInvalidClass","error","undefined","h","Host","key","class","id","autoCapitalize","autoFocus","enterKeyHint","enterkeyhint","inputMode","inputmode","maxLength","maxlength","minLength","minlength","placeholder","readOnly","cols","rows","wrap","onCompositionstart","onCompositionupdate","onCompositionend","ref","el","htmlFor","helper"],"sources":["src/components/textarea/textarea.css?tag=road-textarea&encapsulation=scoped","src/components/textarea/textarea.tsx"],"sourcesContent":["/*\n * Textarea\n *\n * Index\n * - Input\n * - Textarea\n * - Label\n * - Sizes\n * - Error\n * - Helper\n */\n\n:host {\n position: relative;\n display: block;\n margin-bottom: 1rem;\n font-family: var(--road-font, sans-serif);\n color: var(--road-on-surface);\n}\n\n/* INPUT\n -------------------- */\n\n.form-control {\n box-sizing: border-box;\n display: block;\n width: 100%;\n height: 3rem;\n padding: 0.75rem 1rem 0;\n margin: 0;\n font-size: var(--road-body-medium);\n color: var(--road-on-surface);\n background: var(--road-surface);\n border: 1px solid var(--road-input-outline);\n border-radius: 0.25rem;\n box-shadow: none;\n appearance: none;\n}\n\n/**\n * Placeholder\n */\n\n.form-control::placeholder {\n color: var(--road-on-surface-extra-weak);\n opacity: 1;\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n .form-control:not(:disabled):hover {\n border-color: var(--road-input-outline-variant);\n }\n}\n\n/**\n * Focus state\n */\n\n.form-control:focus ~ .form-label,\n.form-control[required]:valid ~ .form-label,\n.form-control.has-value ~ .form-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-control:placeholder-shown ~ .form-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n\n/* stylelint-disable */\n\n/* IE FIX */\n\n.form-control:-ms-input-placeholder ~ .form-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n/* stylelint-enable */\n\n.form-control:not(:disabled):focus {\n border-color: var(--road-input-outline-variant);\n}\n\n/**\n * Disabled state\n */\n\n.form-control:disabled,\n.form-control[readonly] {\n color: var(--road-on-surface-weak);\n cursor: not-allowed;\n background: var(--road-surface-disabled);\n opacity: 1;\n}\n\n/* TEXTAREA\n -------------------- */\n\n.textarea-control {\n height: auto;\n padding-top: 1rem;\n padding-bottom: 0.5rem;\n line-height: 1.5;\n}\n\n.textarea-control.no-resize {\n resize: none;\n}\n\n/* LABEL\n -------------------- */\n\n.form-label {\n position: absolute;\n top: 0.75rem;\n left: 1rem;\n display: block;\n font-size: var(--road-body-medium);\n line-height: 1.5;\n color: var(--road-on-surface-weak);\n pointer-events: none;\n transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n transform-origin: 0 0;\n width: 95%;\n white-space: normal;\n overflow-wrap: break-word;\n}\n\n/* SIZES\n -------------------- */\n\n:host(.input-xl) {\n --height: 3.5rem;\n}\n\n:host(.input-xl) .form-control {\n padding: 1.5rem 1rem 0.5rem;\n}\n\n:host(.input-xl) .form-label {\n top: 1rem;\n}\n\n:host(.input-xl) .form-control:focus ~ .form-label,\n:host(.input-xl) .form-control[required]:valid ~ .form-label,\n:host(.input-xl) .form-control.has-value ~ .form-label,\n:host(.input-xl) .form-control[type=\"date\"] ~ .form-label,\n:host(.input-xl) .form-control[type=\"time\"] ~ .form-label {\n width:100%;\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.input-xl) .form-control:placeholder-shown ~ .form-label {\n width: 100%;\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n display: none;\n width: 100%;\n margin-top: 0.5rem;\n font-size: var(--road-helper-medium);\n color: var(--road-on-danger-surface);\n}\n\n.form-control.is-invalid,\n.was-validated .form-control:invalid {\n border-color: var(--road-danger-outline);\n}\n\n.form-control.is-invalid ~ .invalid-feedback,\n.was-validated .form-control:invalid ~ .invalid-feedback {\n display: block;\n}\n\n/* HELPER\n -------------------- */\n\n.helper {\n margin-top: 0.5rem;\n font-size: var(--road-helper-medium);\n color: var(--road-on-surface-weak);\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'road-textarea',\n styleUrl: 'textarea.css',\n scoped: true,\n})\nexport class Textarea {\n\n /**\n * The id of textarea\n */\n @Prop() textareaId: string = `road-textarea-${textareaIds++}`;\n\n /**\n * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n */\n @Prop() autocapitalize: string = 'none';\n\n /**\n * This Boolean attribute lets you specify that a form control should have focus when the page loads.\n */\n @Prop() autofocus: boolean = false;\n\n /**\n * If `true`, the user cannot interact with the textarea.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * A hint to the browser for which keyboard to display.\n * This attribute applies when the value of the type attribute is `\"text\"`, `\"password\"`, `\"email\"`, or `\"url\"`. Possible values are: `\"verbatim\"`, `\"latin\"`, `\"latin-name\"`, `\"latin-prose\"`, `\"full-width-latin\"`, `\"kana\"`, `\"katakana\"`, `\"numeric\"`, `\"tel\"`, `\"email\"`, `\"url\"`.\n */\n @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\n /**\n * A hint to the browser for which enter key to display.\n * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n * `\"previous\"`, `\"search\"`, and `\"send\"`.\n */\n @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n /**\n * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n */\n @Prop() maxlength?: number;\n\n /**\n * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n */\n @Prop() minlength?: number;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.textareaId;\n\n /**\n * Instructional text that shows before the textarea has a value.\n */\n @Prop() placeholder?: string;\n\n /**\n * The sizes of the input.\n */\n @Prop() sizes: 'lg' | 'xl' = 'lg';\n\n /**\n * If `true`, the user cannot modify the value.\n */\n @Prop() readonly: boolean = false;\n\n /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n @Prop() required: boolean = false;\n\n /**\n * If `true`, the element will have its spelling and grammar checked.\n */\n @Prop() spellcheck: boolean = false;\n\n /**\n * If `false`, to disabled resize.\n */\n @Prop() resize: boolean = true;\n\n /**\n * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.\n */\n @Prop() cols?: number;\n\n /**\n * The number of rows of the control.\n */\n @Prop() rows?: number;\n\n /**\n * Indicates how the control wraps text.\n */\n @Prop() wrap?: 'hard' | 'soft' | 'off';\n\n /**\n * The value of the textarea.\n */\n @Prop({ mutable: true }) value?: string | null = '';\n\n /**\n * Label for the field\n */\n @Prop() label: string = `${this.textareaId}-label`;\n\n /**\n * Error message for the field\n */\n @Prop() error?: string;\n\n /**\n * Helper message for the field\n */\n @Prop() helper?: string;\n\n /**\n * Update the native textarea element when the value changes\n */\n @Watch('value')\n protected valueChanged() {\n this.roadchange.emit({ value: this.value });\n this.roadChange.emit({ value: this.value });\n }\n\n /**\n * Emitted when a keyboard input occurred.\n */\n @Event() roadinput!: EventEmitter<KeyboardEvent>;\n /** @internal */\n @Event() roadInput!: EventEmitter<KeyboardEvent>;\n\n /**\n * Emitted when the value has changed.\n */\n @Event() roadchange!: EventEmitter<{\n value: string | undefined | null\n }>;\n /** @internal */\n @Event() roadChange!: EventEmitter<{\n value: string | undefined | null\n }>;\n\n /**\n * Emitted when the textarea loses focus.\n */\n @Event() roadblur!: EventEmitter<void>;\n /** @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n /**\n * Emitted when the textarea has focus.\n */\n @Event() roadfocus!: EventEmitter<void>;\n /** @internal */\n @Event() roadFocus!: EventEmitter<void>;\n\n private getValue(): string {\n return this.value || '';\n }\n\n private onInput = (ev: Event) => {\n if (this.isComposing) return;\n\n const input = ev.target as HTMLInputElement | null;\n if (input) {\n this.value = input.value || '';\n }\n this.roadinput.emit(ev as KeyboardEvent);\n this.roadInput.emit(ev as KeyboardEvent);\n };\n\n private onBlur = () => {\n if (this.isComposing) {\n this.isComposing = false;\n const domValue = this.textareaEl?.value ?? '';\n if (this.value !== domValue) {\n this.value = domValue;\n }\n }\n\n this.roadblur.emit();\n this.roadBlur.emit();\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n private isComposing = false;\n\n private onCompositionStart = () => {\n this.isComposing = true;\n };\n\n private onCompositionUpdate = (ev: CompositionEvent) => {\n this.onInput(ev as unknown as Event);\n };\n\n private onCompositionEnd = (ev: CompositionEvent) => {\n this.isComposing = false;\n this.onInput(ev as unknown as Event);\n };\n\n private textareaEl?: HTMLTextAreaElement;\n\n render() {\n const value = this.getValue();\n const labelId = this.textareaId + '-label';\n const hasValueClass = this.value !== '' ? 'has-value' : '';\n const noResizeClass = this.resize == false ? 'no-resize' : '';\n const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n return (\n <Host aria-disabled={this.disabled ? 'true' : null} class={this.sizes && `input-${this.sizes}`}>\n <textarea\n class={`form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`}\n id={this.textareaId}\n aria-disabled={this.disabled ? 'true' : null}\n aria-labelledby={labelId}\n disabled={this.disabled}\n autoCapitalize={this.autocapitalize}\n autoFocus={this.autofocus}\n enterKeyHint={this.enterkeyhint}\n inputMode={this.inputmode}\n maxLength={this.maxlength}\n minLength={this.minlength}\n name={this.name}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n value={value}\n spellcheck={this.spellcheck}\n cols={this.cols}\n rows={this.rows}\n wrap={this.wrap}\n onInput={this.onInput}\n onCompositionstart={this.onCompositionStart}\n onCompositionupdate={this.onCompositionUpdate}\n onCompositionend={this.onCompositionEnd}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n ref={el => (this.textareaEl = el as HTMLTextAreaElement)}\n >\n </textarea>\n <label class=\"form-label\" id={labelId} htmlFor={this.textareaId}>{this.label}</label>\n {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n </Host>\n );\n }\n\n}\n\nlet textareaIds = 0;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as a}from"./p-d7aae05d.js";export{s as setNonce}from"./p-d7aae05d.js";import{g as o}from"./p-06bfef98.js";var d=()=>{const a=import.meta.url;const o={};if(a!==""){o.resourcesUrl=new URL(".",a).href}return e(o)};d().then((async e=>{await o();return a(JSON.parse('[["p-ce281723",[[2,"road-counter",{"inputId":[1,"input-id"],"min":[2],"max":[2],"step":[1],"value":[2],"size":[1],"dustbin":[4],"readonly":[4],"leftIconClasses":[32],"rightIconClasses":[32],"isDustbinVisible":[32]},null,{"value":["onValueChange"],"readonly":["onValueChange"]}],[1,"road-item",{"titleItem":[1,"title-item"],"text":[1],"button":[4],"detail":[4],"active":[4],"detailIcon":[1,"detail-icon"],"disabled":[4],"download":[1],"href":[1],"rel":[1],"lines":[1],"layout":[1],"target":[1],"type":[1],"multipleInputs":[32]}],[1,"road-badge",{"color":[1],"bubble":[4],"size":[513]}],[1,"road-list",{"lines":[1]}],[1,"road-toolbar",{"color":[1]}],[1,"road-drawer",{"isOpen":[1028,"is-open"],"removePadding":[1028,"remove-padding"],"position":[1],"drawerWidth":[2,"drawer-width"],"hasInverseHeader":[4,"has-inverse-header"],"hasBackIcon":[4,"has-back-icon"],"backText":[1,"back-text"],"drawerTitle":[1,"drawer-title"],"ariaLabel":[1,"aria-label"],"ariaLabelBack":[1,"aria-label-back"],"ariaLabelClose":[1,"aria-label-close"],"hasCloseIcon":[4,"has-close-icon"],"enabledFocusTrap":[4,"enabled-focus-trap"],"focusTrap":[32],"hasFooterContent":[32],"open":[64],"close":[64],"back":[64]},[[4,"keyup","onEscape"]],{"enabledFocusTrap":["handleFocusTrapProp"],"isOpen":["handleOpen"]}],[6,"road-input",{"inputId":[1,"input-id"],"autocapitalize":[1],"autocomplete":[1],"blockdecimal":[4],"autocorrect":[1],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"step":[1],"size":[2],"sizes":[1],"type":[1],"value":[1032],"label":[1],"error":[1],"success":[4],"helper":[1],"list":[1],"debounce":[2],"enforceMinMaxValue":[64],"focus":[64]},null,{"debounce":["debounceChanged"],"value":["valueChanged"]}],[1,"road-col"],[1,"road-grid"],[1,"road-row"],[1,"road-button",{"color":[1],"size":[513],"buttonType":[1,"button-type"],"inverse":[4],"iconOnly":[516,"icon-only"],"disabled":[516],"expand":[516],"download":[1],"href":[1],"rel":[1],"target":[1],"outline":[4]}],[1,"road-input-group",{"disabled":[4]},null,{"disabled":["handleDisabledChange"]}],[1,"road-label"],[1,"road-icon",{"color":[1],"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"icon":[8],"size":[1],"rotate":[1],"lazy":[4],"sanitize":[4],"svgContent":[32],"isVisible":[32]},null,{"name":["loadIcon"],"src":["loadIcon"],"icon":["loadIcon"]}]]],["p-c23dbac2",[[1,"road-duration",{"isOpen":[1028,"is-open"],"header":[1],"min":[2],"max":[2],"step":[2],"open":[64],"close":[64]},[[0,"roadcardclick","handleClick"]]]]],["p-6cdb1bf4",[[1,"road-content-card",{"insetImage":[4,"inset-image"]}]]],["p-163df174",[[2,"road-plate-number",{"country":[1],"disabled":[4],"placeholder":[1],"readonly":[4],"value":[1032],"motorbike":[4]},null,{"value":["valueChanged"]}]]],["p-3b906900",[[1,"road-profil-dropdown",{"isOpen":[1028,"is-open"]},[[4,"click","handleDocumentClick"]]]]],["p-e8d82a2e",[[1,"road-rating",{"size":[513],"rate":[2],"showreviews":[4],"readonly":[4],"reviews":[2],"reviewsText":[1,"reviews-text"],"url":[1]}]]],["p-df4cf8bb",[[1,"road-accordion",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"],"isLightSeparator":[4,"is-light-separator"],"isSmall":[4,"is-small"]}]]],["p-23b0d708",[[1,"road-alert",{"color":[1],"layout":[1],"label":[1],"button":[1],"link":[1],"url":[1],"hasCloseIcon":[4,"has-close-icon"],"isOpen":[1028,"is-open"],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["p-e2ba76f7",[[1,"road-banner",{"isOpen":[1028,"is-open"],"label":[1],"link":[1],"url":[1],"close":[64]}]]],["p-2d68aa3a",[[1,"road-carousel",{"options":[8],"pager":[4],"pagertype":[1],"arrows":[4],"update":[64],"updateAutoHeight":[64],"slideTo":[64],"slideNext":[64],"slidePrev":[64],"getActiveIndex":[64],"getPreviousIndex":[64],"length":[64],"isEnd":[64],"isBeginning":[64],"startAutoplay":[64],"stopAutoplay":[64],"lockSwipeToNext":[64],"lockSwipeToPrev":[64],"lockSwipes":[64],"getSwiper":[64]},null,{"options":["optionsChanged"]}]]],["p-741d74fd",[[6,"road-checkbox",{"checkboxId":[1,"checkbox-id"],"name":[1],"required":[4],"checked":[1028],"indeterminate":[4],"disabled":[4],"value":[1],"label":[1],"secondaryLabel":[1,"secondary-label"],"inverse":[4],"error":[1],"helper":[1],"size":[513]},null,{"checked":["checkedChanged"]}]]],["p-f99639e8",[[1,"road-chip",{"color":[1],"outline":[4],"size":[1],"hasCloseIcon":[4,"has-close-icon"]}]]],["p-39b17e20",[[1,"road-collapse",{"isOpen":[1028,"is-open"],"showMore":[1,"show-more"],"showLess":[1,"show-less"],"centered":[4]}]]],["p-a1101905",[[1,"road-dialog",{"isOpen":[1028,"is-open"],"hasCloseIcon":[4,"has-close-icon"],"color":[1],"icon":[1],"label":[1],"description":[1],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["p-d344a749",[[1,"road-dropdown",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"],"isMedium":[4,"is-medium"],"position":[513],"direction":[513]},[[4,"click","handleDocumentClick"]]]]],["p-2301c9e2",[[1,"road-modal",{"maxWidth":[2,"max-width"],"isOpen":[1028,"is-open"],"hasInverseHeader":[4,"has-inverse-header"],"modalTitle":[1,"modal-title"],"hasCloseIcon":[4,"has-close-icon"],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["p-ad5538c1",[[2,"road-phone-number-input",{"disabled":[4],"countryData":[16],"language":[1],"codeLabel":[1,"code-label"],"phoneLabel":[1,"phone-label"],"phoneValue":[1,"phone-value"],"countryCode":[1,"country-code"],"errorMessage":[1,"error-message"],"required":[4],"selectedCountry":[32],"selectedCountryCode":[32],"phoneNumber":[32],"countryOptions":[32],"returnObject":[32]}]]],["p-d7a56b79",[[6,"road-range",{"rangeId":[1,"range-id"],"value":[1032],"min":[1],"max":[1],"step":[1],"showValue":[4,"show-value"],"showTick":[4,"show-tick"],"showLabels":[4,"show-labels"],"disabled":[4]},[[2,"focus","handleFocus"],[2,"blur","handleBlur"]],{"value":["valueChanged"]}]]],["p-187ab5f5",[[1,"road-status-chip",{"size":[1]}]]],["p-ceb904c0",[[6,"road-time-range-picker",{"start":[1025],"end":[1025],"disabled":[4],"helper":[1],"separator":[1],"required":[4],"label":[1],"sizes":[1],"error":[1],"getRange":[64]}]]],["p-4374d63f",[[1,"road-toast",{"isOpen":[1028,"is-open"],"color":[1],"label":[1],"timeout":[2],"open":[64],"close":[64]},null,{"isOpen":["isOpenChanged"]}]]],["p-83f9db8d",[[2,"road-toggle",{"toggleId":[1,"toggle-id"],"name":[1],"checked":[1028],"disabled":[4],"label":[1],"hasLeftLabel":[4,"has-left-label"],"isSpaced":[4,"is-spaced"],"value":[1]},null,{"checked":["checkedChanged"]}]]],["p-e97c8d7f",[[2,"road-area-code",{"selectId":[1,"select-id"],"options":[16],"autofocus":[4],"disabled":[4],"name":[1],"required":[4],"size":[2],"sizes":[1],"label":[1],"error":[1],"value":[1025],"triggerRender":[1026,"trigger-render"],"selectedValue":[32]},null,{"value":["valueChanged"]}]]],["p-ef883f08",[[1,"road-aspect-ratio",{"ratio":[1]}]]],["p-14e42c8d",[[1,"road-asset",{"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"asset":[8],"lazy":[4],"sanitize":[4],"assetSvgContent":[32],"isVisible":[32]},null,{"name":["loadAsset"],"src":["loadAsset"],"asset":["loadAsset"]}]]],["p-edf07985",[[6,"road-autocomplete",{"options":[16],"visible":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[4,"click","onClickOutside"]]]]],["p-8426998b",[[1,"road-button-carousel",{"outline":[4],"disabled":[516]},[[9,"scroll","onScroll"]]]]],["p-f2f26300",[[1,"road-button-floating",{"position":[513],"href":[1],"rel":[1],"target":[1]},[[9,"scroll","onScroll"]]]]],["p-70909891",[[4,"road-carousel-item"]]],["p-3bac817e",[[1,"road-flap",{"color":[1],"filled":[4],"size":[513]}]]],["p-b6e3db42",[[1,"road-global-navigation",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]],{"selectedTab":["selectedTabChanged"]}]]],["p-eddc9353",[[1,"road-global-navigation-v2",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"],[8,"click","onButtonClick"]],{"selectedTab":["selectedTabChanged"]}]]],["p-abe3e334",[[1,"road-illustration",{"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"illustration":[8],"size":[1],"rotate":[1],"lazy":[4],"sanitize":[4],"illustrationSvgContent":[32],"isVisible":[32]},null,{"name":["loadIllustration"],"src":["loadIllustration"],"illustration":["loadIllustration"]}]]],["p-df4c2ff0",[[1,"road-navbar",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]],{"selectedTab":["selectedTabChanged"]}]]],["p-b40d0b3d",[[1,"road-navbar-item",{"disabled":[4],"download":[1],"href":[1],"rel":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadNavbarChanged","onNavbarChanged"],[8,"roadnavbarchanged","onNavbarChanged"]],{"selected":["handleSelectedChange"]}]]],["p-466c0ff9",[[1,"road-navbar-item-v2",{"disabled":[4],"download":[1],"href":[1],"rel":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadNavbarChanged","onNavbarChanged"],[8,"roadnavbarchanged","onNavbarChanged"]],{"selected":["handleSelectedChange"]}]]],["p-977c467d",[[1,"road-navbar-v2",{"compact":[516],"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]],{"selectedTab":["selectedTabChanged"]}]]],["p-8630081f",[[1,"road-progress",{"value":[2],"numbersteps":[2],"label":[1],"showstep":[4],"animation":[4],"light":[4],"fullwidth":[4],"color":[1],"progresscalculationbase":[1]}]]],["p-e9480f62",[[1,"road-progress-indicator-horizontal",{"color":[513],"numberStep":[2,"number-step"],"stateFirstStep":[1,"state-first-step"],"stateSecondStep":[1,"state-second-step"],"stateThirdStep":[1,"state-third-step"],"urlStep1":[1,"url-step-1"],"urlStep2":[1,"url-step-2"],"urlStep3":[1,"url-step-3"]}]]],["p-0eba704f",[[1,"road-progress-indicator-vertical"]]],["p-9a91254d",[[4,"road-progress-indicator-vertical-item"]]],["p-99146e17",[[1,"road-progress-tracker"]]],["p-cc42a593",[[4,"road-progress-tracker-item"]]],["p-12e8e42a",[[2,"road-radio",{"radioId":[1,"radio-id"],"name":[1],"required":[4],"disabled":[4],"value":[8],"label":[1],"secondaryLabel":[1,"secondary-label"],"inverse":[4],"error":[4],"helper":[1],"inline":[4],"checked":[32]},[[8,"roadChange","onRoadChangedChanged"],[8,"roadchange","onRoadChangedChanged"]]]]],["p-596d37d0",[[6,"road-radio-card",{"name":[1],"disabled":[4],"selected":[4],"value":[8],"label":[1],"inline":[4],"isSelected":[32],"radioId":[32]},[[8,"road-radio-selected","handleRadioSelected"]]]]],["p-d4f30d5d",[[6,"road-radio-group",{"radioGroupId":[1,"radio-group-id"],"allowEmptySelection":[4,"allow-empty-selection"],"name":[1],"value":[1032],"label":[1],"asterisk":[4],"ariaLabel":[513,"aria-label"],"error":[1025],"helper":[1]},null,{"value":["valueChanged"],"error":["errorChanged"]}]]],["p-f0d930e5",[[1,"road-segmented-button",{"size":[1],"selected":[1028],"tab":[1]},[[8,"roadSegmentedButtonBarChanged","onButtonBarChanged"],[8,"roadSegmentedButtonbarchanged","onButtonBarChanged"]]]]],["p-718c6406",[[1,"road-segmented-button-bar",{"selectedTab":[1,"selected-tab"]},null,{"selectedTab":["selectedTabChanged"]}]]],["p-61190b12",[[1,"road-segmented-buttons",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["p-d1de4eb6",[[2,"road-select",{"selectId":[1,"select-id"],"options":[16],"autofocus":[4],"disabled":[4],"name":[1],"required":[4],"helper":[1],"size":[2],"sizes":[1],"label":[1],"error":[1],"value":[1032]},null,{"value":["valueChanged"]}]]],["p-3dfa5636",[[6,"road-select-filter",{"options":[16],"parameters":[8],"isActive":[4,"is-active"],"onlySelect":[4,"only-select"],"loading":[4],"isOpen":[32],"currentValue":[32],"activeIndex":[32],"wasFocusedBeforeLoading":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[0,"roadBlur","handleBlur"],[0,"roadblur","handleBlur"],[0,"roadChange","handleChange"],[0,"roadchange","handleChange"],[5,"mousedown","onClickOutside"],[8,"keydown","handleKeydown"]],{"loading":["loadingChanged"],"options":["onOptionsChange"]}]]],["p-6311f3f0",[[1,"road-skeleton"]]],["p-7aceed1a",[[1,"road-spinner",{"size":[513],"color":[513]}]]],["p-5381957c",[[2,"road-switch",{"switchId":[1,"switch-id"],"name":[1],"checked":[1028],"disabled":[4],"label":[1],"color":[1],"hasLeftLabel":[4,"has-left-label"],"isSpaced":[4,"is-spaced"],"value":[1],"on":[1],"off":[1]},null,{"checked":["checkedChanged"]}]]],["p-249b8592",[[1,"road-tab",{"active":[1028],"tab":[1],"setActive":[64]},[[8,"roadtabbarchanged","onTabBarChanged"]]]]],["p-1f1021bc",[[1,"road-tab-bar",{"secondary":[4],"expand":[4],"center":[4],"selectedTab":[1537,"selected-tab"]},[[0,"roadTabButtonClick","onTabButtonClick"]],{"selectedTab":["selectedTabChanged"]}]]],["p-9b1fa6a6",[[1,"road-tab-button",{"download":[1],"href":[1],"rel":[1],"layout":[1],"selected":[1028],"disabled":[1028],"tab":[1],"target":[1]},[[8,"roadTabBarChanged","onTabBarChanged"],[8,"roadTabbarchanged","onTabBarChanged"]]]]],["p-da0a75ff",[[6,"road-table"]]],["p-ac64606d",[[1,"road-tabs",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["p-0c6ad72e",[[1,"road-tag",{"color":[1],"contrast":[4]}]]],["p-3d4cd373",[[1,"road-text",{"color":[1]}]]],["p-c0f2eca7",[[2,"road-textarea",{"textareaId":[1,"textarea-id"],"autocapitalize":[1],"autofocus":[4],"disabled":[4],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"sizes":[1],"readonly":[4],"required":[4],"spellcheck":[4],"resize":[4],"cols":[2],"rows":[2],"wrap":[1],"value":[1025],"label":[1],"error":[1],"helper":[1]},null,{"value":["valueChanged"]}]]],["p-dbb675a2",[[1,"road-toolbar-title"]]],["p-85e18b2f",[[1,"road-toolbar-title-page"]]],["p-456f66fc",[[1,"road-toolbar-v2"]]],["p-335498ee",[[1,"road-tooltip",{"tooltipId":[1,"tooltip-id"],"content":[1],"position":[1],"contentAlign":[1,"content-align"],"isOpen":[1028,"is-open"],"trigger":[1],"open":[64],"close":[64]}]]],["p-a4e45088",[[1,"road-avatar",{"size":[513]}]]],["p-4bbe3312",[[1,"road-card",{"elevation":[1],"button":[4],"value":[1],"selected":[516],"disabled":[516],"type":[1],"download":[1],"href":[1],"rel":[1],"target":[1]}]]],["p-7a51b3e1",[[1,"road-img",{"alt":[1],"src":[1],"loadSrc":[32],"loadError":[32]},null,{"src":["srcChanged"]}]]]]'),e)}));
|
|
1
|
+
import{p as e,b as a}from"./p-d7aae05d.js";export{s as setNonce}from"./p-d7aae05d.js";import{g as o}from"./p-06bfef98.js";var d=()=>{const a=import.meta.url;const o={};if(a!==""){o.resourcesUrl=new URL(".",a).href}return e(o)};d().then((async e=>{await o();return a(JSON.parse('[["p-ce281723",[[2,"road-counter",{"inputId":[1,"input-id"],"min":[2],"max":[2],"step":[1],"value":[2],"size":[1],"dustbin":[4],"readonly":[4],"leftIconClasses":[32],"rightIconClasses":[32],"isDustbinVisible":[32]},null,{"value":["onValueChange"],"readonly":["onValueChange"]}],[1,"road-item",{"titleItem":[1,"title-item"],"text":[1],"button":[4],"detail":[4],"active":[4],"detailIcon":[1,"detail-icon"],"disabled":[4],"download":[1],"href":[1],"rel":[1],"lines":[1],"layout":[1],"target":[1],"type":[1],"multipleInputs":[32]}],[1,"road-badge",{"color":[1],"bubble":[4],"size":[513]}],[1,"road-list",{"lines":[1]}],[1,"road-toolbar",{"color":[1]}],[1,"road-drawer",{"isOpen":[1028,"is-open"],"removePadding":[1028,"remove-padding"],"position":[1],"drawerWidth":[2,"drawer-width"],"hasInverseHeader":[4,"has-inverse-header"],"hasBackIcon":[4,"has-back-icon"],"backText":[1,"back-text"],"drawerTitle":[1,"drawer-title"],"ariaLabel":[1,"aria-label"],"ariaLabelBack":[1,"aria-label-back"],"ariaLabelClose":[1,"aria-label-close"],"hasCloseIcon":[4,"has-close-icon"],"enabledFocusTrap":[4,"enabled-focus-trap"],"focusTrap":[32],"hasFooterContent":[32],"open":[64],"close":[64],"back":[64]},[[4,"keyup","onEscape"]],{"enabledFocusTrap":["handleFocusTrapProp"],"isOpen":["handleOpen"]}],[6,"road-input",{"inputId":[1,"input-id"],"autocapitalize":[1],"autocomplete":[1],"blockdecimal":[4],"autocorrect":[1],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"step":[1],"size":[2],"sizes":[1],"type":[1],"value":[1032],"label":[1],"error":[1],"success":[4],"helper":[1],"list":[1],"debounce":[2],"enforceMinMaxValue":[64],"focus":[64]},null,{"debounce":["debounceChanged"],"value":["valueChanged"]}],[1,"road-col"],[1,"road-grid"],[1,"road-row"],[1,"road-button",{"color":[1],"size":[513],"buttonType":[1,"button-type"],"inverse":[4],"iconOnly":[516,"icon-only"],"disabled":[516],"expand":[516],"download":[1],"href":[1],"rel":[1],"target":[1],"outline":[4]}],[1,"road-input-group",{"disabled":[4]},null,{"disabled":["handleDisabledChange"]}],[1,"road-label"],[1,"road-icon",{"color":[1],"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"icon":[8],"size":[1],"rotate":[1],"lazy":[4],"sanitize":[4],"svgContent":[32],"isVisible":[32]},null,{"name":["loadIcon"],"src":["loadIcon"],"icon":["loadIcon"]}]]],["p-c23dbac2",[[1,"road-duration",{"isOpen":[1028,"is-open"],"header":[1],"min":[2],"max":[2],"step":[2],"open":[64],"close":[64]},[[0,"roadcardclick","handleClick"]]]]],["p-6cdb1bf4",[[1,"road-content-card",{"insetImage":[4,"inset-image"]}]]],["p-163df174",[[2,"road-plate-number",{"country":[1],"disabled":[4],"placeholder":[1],"readonly":[4],"value":[1032],"motorbike":[4]},null,{"value":["valueChanged"]}]]],["p-3b906900",[[1,"road-profil-dropdown",{"isOpen":[1028,"is-open"]},[[4,"click","handleDocumentClick"]]]]],["p-e8d82a2e",[[1,"road-rating",{"size":[513],"rate":[2],"showreviews":[4],"readonly":[4],"reviews":[2],"reviewsText":[1,"reviews-text"],"url":[1]}]]],["p-df4cf8bb",[[1,"road-accordion",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"],"isLightSeparator":[4,"is-light-separator"],"isSmall":[4,"is-small"]}]]],["p-23b0d708",[[1,"road-alert",{"color":[1],"layout":[1],"label":[1],"button":[1],"link":[1],"url":[1],"hasCloseIcon":[4,"has-close-icon"],"isOpen":[1028,"is-open"],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["p-e2ba76f7",[[1,"road-banner",{"isOpen":[1028,"is-open"],"label":[1],"link":[1],"url":[1],"close":[64]}]]],["p-2d68aa3a",[[1,"road-carousel",{"options":[8],"pager":[4],"pagertype":[1],"arrows":[4],"update":[64],"updateAutoHeight":[64],"slideTo":[64],"slideNext":[64],"slidePrev":[64],"getActiveIndex":[64],"getPreviousIndex":[64],"length":[64],"isEnd":[64],"isBeginning":[64],"startAutoplay":[64],"stopAutoplay":[64],"lockSwipeToNext":[64],"lockSwipeToPrev":[64],"lockSwipes":[64],"getSwiper":[64]},null,{"options":["optionsChanged"]}]]],["p-741d74fd",[[6,"road-checkbox",{"checkboxId":[1,"checkbox-id"],"name":[1],"required":[4],"checked":[1028],"indeterminate":[4],"disabled":[4],"value":[1],"label":[1],"secondaryLabel":[1,"secondary-label"],"inverse":[4],"error":[1],"helper":[1],"size":[513]},null,{"checked":["checkedChanged"]}]]],["p-f99639e8",[[1,"road-chip",{"color":[1],"outline":[4],"size":[1],"hasCloseIcon":[4,"has-close-icon"]}]]],["p-39b17e20",[[1,"road-collapse",{"isOpen":[1028,"is-open"],"showMore":[1,"show-more"],"showLess":[1,"show-less"],"centered":[4]}]]],["p-a1101905",[[1,"road-dialog",{"isOpen":[1028,"is-open"],"hasCloseIcon":[4,"has-close-icon"],"color":[1],"icon":[1],"label":[1],"description":[1],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["p-d344a749",[[1,"road-dropdown",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"],"isMedium":[4,"is-medium"],"position":[513],"direction":[513]},[[4,"click","handleDocumentClick"]]]]],["p-2301c9e2",[[1,"road-modal",{"maxWidth":[2,"max-width"],"isOpen":[1028,"is-open"],"hasInverseHeader":[4,"has-inverse-header"],"modalTitle":[1,"modal-title"],"hasCloseIcon":[4,"has-close-icon"],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["p-ad5538c1",[[2,"road-phone-number-input",{"disabled":[4],"countryData":[16],"language":[1],"codeLabel":[1,"code-label"],"phoneLabel":[1,"phone-label"],"phoneValue":[1,"phone-value"],"countryCode":[1,"country-code"],"errorMessage":[1,"error-message"],"required":[4],"selectedCountry":[32],"selectedCountryCode":[32],"phoneNumber":[32],"countryOptions":[32],"returnObject":[32]}]]],["p-d7a56b79",[[6,"road-range",{"rangeId":[1,"range-id"],"value":[1032],"min":[1],"max":[1],"step":[1],"showValue":[4,"show-value"],"showTick":[4,"show-tick"],"showLabels":[4,"show-labels"],"disabled":[4]},[[2,"focus","handleFocus"],[2,"blur","handleBlur"]],{"value":["valueChanged"]}]]],["p-187ab5f5",[[1,"road-status-chip",{"size":[1]}]]],["p-ceb904c0",[[6,"road-time-range-picker",{"start":[1025],"end":[1025],"disabled":[4],"helper":[1],"separator":[1],"required":[4],"label":[1],"sizes":[1],"error":[1],"getRange":[64]}]]],["p-4374d63f",[[1,"road-toast",{"isOpen":[1028,"is-open"],"color":[1],"label":[1],"timeout":[2],"open":[64],"close":[64]},null,{"isOpen":["isOpenChanged"]}]]],["p-83f9db8d",[[2,"road-toggle",{"toggleId":[1,"toggle-id"],"name":[1],"checked":[1028],"disabled":[4],"label":[1],"hasLeftLabel":[4,"has-left-label"],"isSpaced":[4,"is-spaced"],"value":[1]},null,{"checked":["checkedChanged"]}]]],["p-e97c8d7f",[[2,"road-area-code",{"selectId":[1,"select-id"],"options":[16],"autofocus":[4],"disabled":[4],"name":[1],"required":[4],"size":[2],"sizes":[1],"label":[1],"error":[1],"value":[1025],"triggerRender":[1026,"trigger-render"],"selectedValue":[32]},null,{"value":["valueChanged"]}]]],["p-ef883f08",[[1,"road-aspect-ratio",{"ratio":[1]}]]],["p-14e42c8d",[[1,"road-asset",{"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"asset":[8],"lazy":[4],"sanitize":[4],"assetSvgContent":[32],"isVisible":[32]},null,{"name":["loadAsset"],"src":["loadAsset"],"asset":["loadAsset"]}]]],["p-edf07985",[[6,"road-autocomplete",{"options":[16],"visible":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[4,"click","onClickOutside"]]]]],["p-8426998b",[[1,"road-button-carousel",{"outline":[4],"disabled":[516]},[[9,"scroll","onScroll"]]]]],["p-f2f26300",[[1,"road-button-floating",{"position":[513],"href":[1],"rel":[1],"target":[1]},[[9,"scroll","onScroll"]]]]],["p-70909891",[[4,"road-carousel-item"]]],["p-3bac817e",[[1,"road-flap",{"color":[1],"filled":[4],"size":[513]}]]],["p-b6e3db42",[[1,"road-global-navigation",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]],{"selectedTab":["selectedTabChanged"]}]]],["p-eddc9353",[[1,"road-global-navigation-v2",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"],[8,"click","onButtonClick"]],{"selectedTab":["selectedTabChanged"]}]]],["p-abe3e334",[[1,"road-illustration",{"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"illustration":[8],"size":[1],"rotate":[1],"lazy":[4],"sanitize":[4],"illustrationSvgContent":[32],"isVisible":[32]},null,{"name":["loadIllustration"],"src":["loadIllustration"],"illustration":["loadIllustration"]}]]],["p-df4c2ff0",[[1,"road-navbar",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]],{"selectedTab":["selectedTabChanged"]}]]],["p-b40d0b3d",[[1,"road-navbar-item",{"disabled":[4],"download":[1],"href":[1],"rel":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadNavbarChanged","onNavbarChanged"],[8,"roadnavbarchanged","onNavbarChanged"]],{"selected":["handleSelectedChange"]}]]],["p-466c0ff9",[[1,"road-navbar-item-v2",{"disabled":[4],"download":[1],"href":[1],"rel":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadNavbarChanged","onNavbarChanged"],[8,"roadnavbarchanged","onNavbarChanged"]],{"selected":["handleSelectedChange"]}]]],["p-977c467d",[[1,"road-navbar-v2",{"compact":[516],"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]],{"selectedTab":["selectedTabChanged"]}]]],["p-8630081f",[[1,"road-progress",{"value":[2],"numbersteps":[2],"label":[1],"showstep":[4],"animation":[4],"light":[4],"fullwidth":[4],"color":[1],"progresscalculationbase":[1]}]]],["p-e9480f62",[[1,"road-progress-indicator-horizontal",{"color":[513],"numberStep":[2,"number-step"],"stateFirstStep":[1,"state-first-step"],"stateSecondStep":[1,"state-second-step"],"stateThirdStep":[1,"state-third-step"],"urlStep1":[1,"url-step-1"],"urlStep2":[1,"url-step-2"],"urlStep3":[1,"url-step-3"]}]]],["p-0eba704f",[[1,"road-progress-indicator-vertical"]]],["p-9a91254d",[[4,"road-progress-indicator-vertical-item"]]],["p-99146e17",[[1,"road-progress-tracker"]]],["p-cc42a593",[[4,"road-progress-tracker-item"]]],["p-12e8e42a",[[2,"road-radio",{"radioId":[1,"radio-id"],"name":[1],"required":[4],"disabled":[4],"value":[8],"label":[1],"secondaryLabel":[1,"secondary-label"],"inverse":[4],"error":[4],"helper":[1],"inline":[4],"checked":[32]},[[8,"roadChange","onRoadChangedChanged"],[8,"roadchange","onRoadChangedChanged"]]]]],["p-596d37d0",[[6,"road-radio-card",{"name":[1],"disabled":[4],"selected":[4],"value":[8],"label":[1],"inline":[4],"isSelected":[32],"radioId":[32]},[[8,"road-radio-selected","handleRadioSelected"]]]]],["p-d4f30d5d",[[6,"road-radio-group",{"radioGroupId":[1,"radio-group-id"],"allowEmptySelection":[4,"allow-empty-selection"],"name":[1],"value":[1032],"label":[1],"asterisk":[4],"ariaLabel":[513,"aria-label"],"error":[1025],"helper":[1]},null,{"value":["valueChanged"],"error":["errorChanged"]}]]],["p-f0d930e5",[[1,"road-segmented-button",{"size":[1],"selected":[1028],"tab":[1]},[[8,"roadSegmentedButtonBarChanged","onButtonBarChanged"],[8,"roadSegmentedButtonbarchanged","onButtonBarChanged"]]]]],["p-718c6406",[[1,"road-segmented-button-bar",{"selectedTab":[1,"selected-tab"]},null,{"selectedTab":["selectedTabChanged"]}]]],["p-61190b12",[[1,"road-segmented-buttons",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["p-d1de4eb6",[[2,"road-select",{"selectId":[1,"select-id"],"options":[16],"autofocus":[4],"disabled":[4],"name":[1],"required":[4],"helper":[1],"size":[2],"sizes":[1],"label":[1],"error":[1],"value":[1032]},null,{"value":["valueChanged"]}]]],["p-3dfa5636",[[6,"road-select-filter",{"options":[16],"parameters":[8],"isActive":[4,"is-active"],"onlySelect":[4,"only-select"],"loading":[4],"isOpen":[32],"currentValue":[32],"activeIndex":[32],"wasFocusedBeforeLoading":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[0,"roadBlur","handleBlur"],[0,"roadblur","handleBlur"],[0,"roadChange","handleChange"],[0,"roadchange","handleChange"],[5,"mousedown","onClickOutside"],[8,"keydown","handleKeydown"]],{"loading":["loadingChanged"],"options":["onOptionsChange"]}]]],["p-6311f3f0",[[1,"road-skeleton"]]],["p-7aceed1a",[[1,"road-spinner",{"size":[513],"color":[513]}]]],["p-5381957c",[[2,"road-switch",{"switchId":[1,"switch-id"],"name":[1],"checked":[1028],"disabled":[4],"label":[1],"color":[1],"hasLeftLabel":[4,"has-left-label"],"isSpaced":[4,"is-spaced"],"value":[1],"on":[1],"off":[1]},null,{"checked":["checkedChanged"]}]]],["p-249b8592",[[1,"road-tab",{"active":[1028],"tab":[1],"setActive":[64]},[[8,"roadtabbarchanged","onTabBarChanged"]]]]],["p-1f1021bc",[[1,"road-tab-bar",{"secondary":[4],"expand":[4],"center":[4],"selectedTab":[1537,"selected-tab"]},[[0,"roadTabButtonClick","onTabButtonClick"]],{"selectedTab":["selectedTabChanged"]}]]],["p-9b1fa6a6",[[1,"road-tab-button",{"download":[1],"href":[1],"rel":[1],"layout":[1],"selected":[1028],"disabled":[1028],"tab":[1],"target":[1]},[[8,"roadTabBarChanged","onTabBarChanged"],[8,"roadTabbarchanged","onTabBarChanged"]]]]],["p-da0a75ff",[[6,"road-table"]]],["p-ac64606d",[[1,"road-tabs",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["p-0c6ad72e",[[1,"road-tag",{"color":[1],"contrast":[4]}]]],["p-3d4cd373",[[1,"road-text",{"color":[1]}]]],["p-543ef281",[[2,"road-textarea",{"textareaId":[1,"textarea-id"],"autocapitalize":[1],"autofocus":[4],"disabled":[4],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"sizes":[1],"readonly":[4],"required":[4],"spellcheck":[4],"resize":[4],"cols":[2],"rows":[2],"wrap":[1],"value":[1025],"label":[1],"error":[1],"helper":[1]},null,{"value":["valueChanged"]}]]],["p-dbb675a2",[[1,"road-toolbar-title"]]],["p-85e18b2f",[[1,"road-toolbar-title-page"]]],["p-456f66fc",[[1,"road-toolbar-v2"]]],["p-335498ee",[[1,"road-tooltip",{"tooltipId":[1,"tooltip-id"],"content":[1],"position":[1],"contentAlign":[1,"content-align"],"isOpen":[1028,"is-open"],"trigger":[1],"open":[64],"close":[64]}]]],["p-a4e45088",[[1,"road-avatar",{"size":[513]}]]],["p-4bbe3312",[[1,"road-card",{"elevation":[1],"button":[4],"value":[1],"selected":[516],"disabled":[516],"type":[1],"download":[1],"href":[1],"rel":[1],"target":[1]}]]],["p-7a51b3e1",[[1,"road-img",{"alt":[1],"src":[1],"loadSrc":[32],"loadError":[32]},null,{"src":["srcChanged"]}]]]]'),e)}));
|
|
2
2
|
//# sourceMappingURL=roadtrip.esm.js.map
|
|
@@ -127,5 +127,10 @@ export declare class Textarea {
|
|
|
127
127
|
private onInput;
|
|
128
128
|
private onBlur;
|
|
129
129
|
private onFocus;
|
|
130
|
+
private isComposing;
|
|
131
|
+
private onCompositionStart;
|
|
132
|
+
private onCompositionUpdate;
|
|
133
|
+
private onCompositionEnd;
|
|
134
|
+
private textareaEl?;
|
|
130
135
|
render(): any;
|
|
131
136
|
}
|
package/hydrate/index.js
CHANGED
|
@@ -37722,6 +37722,8 @@ class Textarea {
|
|
|
37722
37722
|
*/
|
|
37723
37723
|
this.label = `${this.textareaId}-label`;
|
|
37724
37724
|
this.onInput = (ev) => {
|
|
37725
|
+
if (this.isComposing)
|
|
37726
|
+
return;
|
|
37725
37727
|
const input = ev.target;
|
|
37726
37728
|
if (input) {
|
|
37727
37729
|
this.value = input.value || '';
|
|
@@ -37730,6 +37732,14 @@ class Textarea {
|
|
|
37730
37732
|
this.roadInput.emit(ev);
|
|
37731
37733
|
};
|
|
37732
37734
|
this.onBlur = () => {
|
|
37735
|
+
var _a, _b;
|
|
37736
|
+
if (this.isComposing) {
|
|
37737
|
+
this.isComposing = false;
|
|
37738
|
+
const domValue = (_b = (_a = this.textareaEl) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
|
|
37739
|
+
if (this.value !== domValue) {
|
|
37740
|
+
this.value = domValue;
|
|
37741
|
+
}
|
|
37742
|
+
}
|
|
37733
37743
|
this.roadblur.emit();
|
|
37734
37744
|
this.roadBlur.emit();
|
|
37735
37745
|
};
|
|
@@ -37737,6 +37747,17 @@ class Textarea {
|
|
|
37737
37747
|
this.roadfocus.emit();
|
|
37738
37748
|
this.roadFocus.emit();
|
|
37739
37749
|
};
|
|
37750
|
+
this.isComposing = false;
|
|
37751
|
+
this.onCompositionStart = () => {
|
|
37752
|
+
this.isComposing = true;
|
|
37753
|
+
};
|
|
37754
|
+
this.onCompositionUpdate = (ev) => {
|
|
37755
|
+
this.onInput(ev);
|
|
37756
|
+
};
|
|
37757
|
+
this.onCompositionEnd = (ev) => {
|
|
37758
|
+
this.isComposing = false;
|
|
37759
|
+
this.onInput(ev);
|
|
37760
|
+
};
|
|
37740
37761
|
}
|
|
37741
37762
|
/**
|
|
37742
37763
|
* Update the native textarea element when the value changes
|
|
@@ -37754,7 +37775,7 @@ class Textarea {
|
|
|
37754
37775
|
const hasValueClass = this.value !== '' ? 'has-value' : '';
|
|
37755
37776
|
const noResizeClass = this.resize == false ? 'no-resize' : '';
|
|
37756
37777
|
const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
|
|
37757
|
-
return (hAsync(Host, { key: '
|
|
37778
|
+
return (hAsync(Host, { key: 'e9d7e0090384cb0cf42eca630a93de1558d55421', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, hAsync("textarea", { key: '502647f5de50628c8a631f239624d655276ce600', class: `form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`, id: this.textareaId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, value: value, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onCompositionstart: this.onCompositionStart, onCompositionupdate: this.onCompositionUpdate, onCompositionend: this.onCompositionEnd, onBlur: this.onBlur, onFocus: this.onFocus, ref: el => (this.textareaEl = el) }), hAsync("label", { key: 'c06ce8199193e0157c25b61d803942276685dba4', class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && hAsync("p", { key: '24353e133780f40637a78f17c6989450df804426', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && hAsync("p", { key: '608831606425c4a5f3f351ff66b2f3271f11aab8', class: "helper" }, this.helper)));
|
|
37758
37779
|
}
|
|
37759
37780
|
static get watchers() { return {
|
|
37760
37781
|
"value": ["valueChanged"]
|
package/hydrate/index.mjs
CHANGED
|
@@ -37718,6 +37718,8 @@ class Textarea {
|
|
|
37718
37718
|
*/
|
|
37719
37719
|
this.label = `${this.textareaId}-label`;
|
|
37720
37720
|
this.onInput = (ev) => {
|
|
37721
|
+
if (this.isComposing)
|
|
37722
|
+
return;
|
|
37721
37723
|
const input = ev.target;
|
|
37722
37724
|
if (input) {
|
|
37723
37725
|
this.value = input.value || '';
|
|
@@ -37726,6 +37728,14 @@ class Textarea {
|
|
|
37726
37728
|
this.roadInput.emit(ev);
|
|
37727
37729
|
};
|
|
37728
37730
|
this.onBlur = () => {
|
|
37731
|
+
var _a, _b;
|
|
37732
|
+
if (this.isComposing) {
|
|
37733
|
+
this.isComposing = false;
|
|
37734
|
+
const domValue = (_b = (_a = this.textareaEl) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
|
|
37735
|
+
if (this.value !== domValue) {
|
|
37736
|
+
this.value = domValue;
|
|
37737
|
+
}
|
|
37738
|
+
}
|
|
37729
37739
|
this.roadblur.emit();
|
|
37730
37740
|
this.roadBlur.emit();
|
|
37731
37741
|
};
|
|
@@ -37733,6 +37743,17 @@ class Textarea {
|
|
|
37733
37743
|
this.roadfocus.emit();
|
|
37734
37744
|
this.roadFocus.emit();
|
|
37735
37745
|
};
|
|
37746
|
+
this.isComposing = false;
|
|
37747
|
+
this.onCompositionStart = () => {
|
|
37748
|
+
this.isComposing = true;
|
|
37749
|
+
};
|
|
37750
|
+
this.onCompositionUpdate = (ev) => {
|
|
37751
|
+
this.onInput(ev);
|
|
37752
|
+
};
|
|
37753
|
+
this.onCompositionEnd = (ev) => {
|
|
37754
|
+
this.isComposing = false;
|
|
37755
|
+
this.onInput(ev);
|
|
37756
|
+
};
|
|
37736
37757
|
}
|
|
37737
37758
|
/**
|
|
37738
37759
|
* Update the native textarea element when the value changes
|
|
@@ -37750,7 +37771,7 @@ class Textarea {
|
|
|
37750
37771
|
const hasValueClass = this.value !== '' ? 'has-value' : '';
|
|
37751
37772
|
const noResizeClass = this.resize == false ? 'no-resize' : '';
|
|
37752
37773
|
const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
|
|
37753
|
-
return (hAsync(Host, { key: '
|
|
37774
|
+
return (hAsync(Host, { key: 'e9d7e0090384cb0cf42eca630a93de1558d55421', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, hAsync("textarea", { key: '502647f5de50628c8a631f239624d655276ce600', class: `form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`, id: this.textareaId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, value: value, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onCompositionstart: this.onCompositionStart, onCompositionupdate: this.onCompositionUpdate, onCompositionend: this.onCompositionEnd, onBlur: this.onBlur, onFocus: this.onFocus, ref: el => (this.textareaEl = el) }), hAsync("label", { key: 'c06ce8199193e0157c25b61d803942276685dba4', class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && hAsync("p", { key: '24353e133780f40637a78f17c6989450df804426', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && hAsync("p", { key: '608831606425c4a5f3f351ff66b2f3271f11aab8', class: "helper" }, this.helper)));
|
|
37754
37775
|
}
|
|
37755
37776
|
static get watchers() { return {
|
|
37756
37777
|
"value": ["valueChanged"]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@roadtrip/components",
|
|
3
|
-
"version": "3.51.
|
|
3
|
+
"version": "3.51.3",
|
|
4
4
|
"description": "Web Component library for Roadtrip Design System",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"homepage": "https://gitlab.com/mobivia/driverservices/experience-platform/roadtrip/components",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["textareaCss","RoadTextareaStyle0","Textarea","constructor","hostRef","this","textareaId","textareaIds","autocapitalize","autofocus","disabled","name","sizes","readonly","required","spellcheck","resize","value","label","onInput","ev","input","target","roadinput","emit","roadInput","onBlur","roadblur","roadBlur","onFocus","roadfocus","roadFocus","valueChanged","roadchange","roadChange","getValue","render","labelId","hasValueClass","noResizeClass","isInvalidClass","error","undefined","h","Host","key","class","id","autoCapitalize","autoFocus","enterKeyHint","enterkeyhint","inputMode","inputmode","maxLength","maxlength","minLength","minlength","placeholder","readOnly","cols","rows","wrap","htmlFor","helper"],"sources":["src/components/textarea/textarea.css?tag=road-textarea&encapsulation=scoped","src/components/textarea/textarea.tsx"],"sourcesContent":["/*\n * Textarea\n *\n * Index\n * - Input\n * - Textarea\n * - Label\n * - Sizes\n * - Error\n * - Helper\n */\n\n:host {\n position: relative;\n display: block;\n margin-bottom: 1rem;\n font-family: var(--road-font, sans-serif);\n color: var(--road-on-surface);\n}\n\n/* INPUT\n -------------------- */\n\n.form-control {\n box-sizing: border-box;\n display: block;\n width: 100%;\n height: 3rem;\n padding: 0.75rem 1rem 0;\n margin: 0;\n font-size: var(--road-body-medium);\n color: var(--road-on-surface);\n background: var(--road-surface);\n border: 1px solid var(--road-input-outline);\n border-radius: 0.25rem;\n box-shadow: none;\n appearance: none;\n}\n\n/**\n * Placeholder\n */\n\n.form-control::placeholder {\n color: var(--road-on-surface-extra-weak);\n opacity: 1;\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n .form-control:not(:disabled):hover {\n border-color: var(--road-input-outline-variant);\n }\n}\n\n/**\n * Focus state\n */\n\n.form-control:focus ~ .form-label,\n.form-control[required]:valid ~ .form-label,\n.form-control.has-value ~ .form-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-control:placeholder-shown ~ .form-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n\n/* stylelint-disable */\n\n/* IE FIX */\n\n.form-control:-ms-input-placeholder ~ .form-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n/* stylelint-enable */\n\n.form-control:not(:disabled):focus {\n border-color: var(--road-input-outline-variant);\n}\n\n/**\n * Disabled state\n */\n\n.form-control:disabled,\n.form-control[readonly] {\n color: var(--road-on-surface-weak);\n cursor: not-allowed;\n background: var(--road-surface-disabled);\n opacity: 1;\n}\n\n/* TEXTAREA\n -------------------- */\n\n.textarea-control {\n height: auto;\n padding-top: 1rem;\n padding-bottom: 0.5rem;\n line-height: 1.5;\n}\n\n.textarea-control.no-resize {\n resize: none;\n}\n\n/* LABEL\n -------------------- */\n\n.form-label {\n position: absolute;\n top: 0.75rem;\n left: 1rem;\n display: block;\n font-size: var(--road-body-medium);\n line-height: 1.5;\n color: var(--road-on-surface-weak);\n pointer-events: none;\n transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n transform-origin: 0 0;\n width: 95%;\n white-space: normal;\n overflow-wrap: break-word;\n}\n\n/* SIZES\n -------------------- */\n\n:host(.input-xl) {\n --height: 3.5rem;\n}\n\n:host(.input-xl) .form-control {\n padding: 1.5rem 1rem 0.5rem;\n}\n\n:host(.input-xl) .form-label {\n top: 1rem;\n}\n\n:host(.input-xl) .form-control:focus ~ .form-label,\n:host(.input-xl) .form-control[required]:valid ~ .form-label,\n:host(.input-xl) .form-control.has-value ~ .form-label,\n:host(.input-xl) .form-control[type=\"date\"] ~ .form-label,\n:host(.input-xl) .form-control[type=\"time\"] ~ .form-label {\n width:100%;\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.input-xl) .form-control:placeholder-shown ~ .form-label {\n width: 100%;\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n display: none;\n width: 100%;\n margin-top: 0.5rem;\n font-size: var(--road-helper-medium);\n color: var(--road-on-danger-surface);\n}\n\n.form-control.is-invalid,\n.was-validated .form-control:invalid {\n border-color: var(--road-danger-outline);\n}\n\n.form-control.is-invalid ~ .invalid-feedback,\n.was-validated .form-control:invalid ~ .invalid-feedback {\n display: block;\n}\n\n/* HELPER\n -------------------- */\n\n.helper {\n margin-top: 0.5rem;\n font-size: var(--road-helper-medium);\n color: var(--road-on-surface-weak);\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'road-textarea',\n styleUrl: 'textarea.css',\n scoped: true,\n})\nexport class Textarea {\n\n /**\n * The id of textarea\n */\n @Prop() textareaId: string = `road-textarea-${textareaIds++}`;\n\n /**\n * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n */\n @Prop() autocapitalize: string = 'none';\n\n /**\n * This Boolean attribute lets you specify that a form control should have focus when the page loads.\n */\n @Prop() autofocus: boolean = false;\n\n /**\n * If `true`, the user cannot interact with the textarea.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * A hint to the browser for which keyboard to display.\n * This attribute applies when the value of the type attribute is `\"text\"`, `\"password\"`, `\"email\"`, or `\"url\"`. Possible values are: `\"verbatim\"`, `\"latin\"`, `\"latin-name\"`, `\"latin-prose\"`, `\"full-width-latin\"`, `\"kana\"`, `\"katakana\"`, `\"numeric\"`, `\"tel\"`, `\"email\"`, `\"url\"`.\n */\n @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\n /**\n * A hint to the browser for which enter key to display.\n * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n * `\"previous\"`, `\"search\"`, and `\"send\"`.\n */\n @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n /**\n * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n */\n @Prop() maxlength?: number;\n\n /**\n * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n */\n @Prop() minlength?: number;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.textareaId;\n\n /**\n * Instructional text that shows before the textarea has a value.\n */\n @Prop() placeholder?: string;\n\n /**\n * The sizes of the input.\n */\n @Prop() sizes: 'lg' | 'xl' = 'lg';\n\n /**\n * If `true`, the user cannot modify the value.\n */\n @Prop() readonly: boolean = false;\n\n /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n @Prop() required: boolean = false;\n\n /**\n * If `true`, the element will have its spelling and grammar checked.\n */\n @Prop() spellcheck: boolean = false;\n\n /**\n * If `false`, to disabled resize.\n */\n @Prop() resize: boolean = true;\n\n /**\n * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.\n */\n @Prop() cols?: number;\n\n /**\n * The number of rows of the control.\n */\n @Prop() rows?: number;\n\n /**\n * Indicates how the control wraps text.\n */\n @Prop() wrap?: 'hard' | 'soft' | 'off';\n\n /**\n * The value of the textarea.\n */\n @Prop({ mutable: true }) value?: string | null = '';\n\n /**\n * Label for the field\n */\n @Prop() label: string = `${this.textareaId}-label`;\n\n /**\n * Error message for the field\n */\n @Prop() error?: string;\n\n /**\n * Helper message for the field\n */\n @Prop() helper?: string;\n\n /**\n * Update the native textarea element when the value changes\n */\n @Watch('value')\n protected valueChanged() {\n this.roadchange.emit({ value: this.value });\n this.roadChange.emit({ value: this.value });\n }\n\n /**\n * Emitted when a keyboard input occurred.\n */\n @Event() roadinput!: EventEmitter<KeyboardEvent>;\n /** @internal */\n @Event() roadInput!: EventEmitter<KeyboardEvent>;\n\n /**\n * Emitted when the value has changed.\n */\n @Event() roadchange!: EventEmitter<{\n value: string | undefined | null\n }>;\n /** @internal */\n @Event() roadChange!: EventEmitter<{\n value: string | undefined | null\n }>;\n\n /**\n * Emitted when the textarea loses focus.\n */\n @Event() roadblur!: EventEmitter<void>;\n /** @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n /**\n * Emitted when the textarea has focus.\n */\n @Event() roadfocus!: EventEmitter<void>;\n /** @internal */\n @Event() roadFocus!: EventEmitter<void>;\n\n private getValue(): string {\n return this.value || '';\n }\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement | null;\n if (input) {\n this.value = input.value || '';\n }\n this.roadinput.emit(ev as KeyboardEvent);\n this.roadInput.emit(ev as KeyboardEvent);\n };\n\n private onBlur = () => {\n this.roadblur.emit();\n this.roadBlur.emit();\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n render() {\n const value = this.getValue();\n const labelId = this.textareaId + '-label';\n const hasValueClass = this.value !== '' ? 'has-value' : '';\n const noResizeClass = this.resize == false ? 'no-resize' : '';\n const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n return (\n <Host aria-disabled={this.disabled ? 'true' : null} class={this.sizes && `input-${this.sizes}`}>\n <textarea\n class={`form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`}\n id={this.textareaId}\n aria-disabled={this.disabled ? 'true' : null}\n aria-labelledby={labelId}\n disabled={this.disabled}\n autoCapitalize={this.autocapitalize}\n autoFocus={this.autofocus}\n enterKeyHint={this.enterkeyhint}\n inputMode={this.inputmode}\n maxLength={this.maxlength}\n minLength={this.minlength}\n name={this.name}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n value={value}\n spellcheck={this.spellcheck}\n cols={this.cols}\n rows={this.rows}\n wrap={this.wrap}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n >\n </textarea>\n <label class=\"form-label\" id={labelId} htmlFor={this.textareaId}>{this.label}</label>\n {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n </Host>\n );\n }\n\n}\n\nlet textareaIds = 0;\n"],"mappings":"yDAAA,MAAMA,EAAc,i5GACpB,MAAAC,EAAeD,E,MCMFE,EAAQ,MALrB,WAAAC,CAAAC,G,kTAUUC,KAAAC,WAAqB,iBAAiBC,MAKtCF,KAAAG,eAAyB,OAKzBH,KAAAI,UAAqB,MAKrBJ,KAAAK,SAAoB,MA4BpBL,KAAAM,KAAeN,KAAKC,WAUnBD,KAAAO,MAAqB,KAKtBP,KAAAQ,SAAoB,MAKpBR,KAAAS,SAAoB,MAKpBT,KAAAU,WAAsB,MAKpBV,KAAAW,OAAkB,KAoBHX,KAAAY,MAAwB,GAKzCZ,KAAAa,MAAgB,GAAGb,KAAKC,mBAyDxBD,KAAAc,QAAWC,IACjB,MAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACThB,KAAKY,MAAQI,EAAMJ,OAAS,E,CAE9BZ,KAAKkB,UAAUC,KAAKJ,GACpBf,KAAKoB,UAAUD,KAAKJ,EAAoB,EAGlCf,KAAAqB,OAAS,KACfrB,KAAKsB,SAASH,OACdnB,KAAKuB,SAASJ,MAAM,EAGdnB,KAAAwB,QAAU,KAChBxB,KAAKyB,UAAUN,OACfnB,KAAK0B,UAAUP,MAAM,C,CAzDb,YAAAQ,GACR3B,KAAK4B,WAAWT,KAAK,CAAEP,MAAOZ,KAAKY,QACnCZ,KAAK6B,WAAWV,KAAK,CAAEP,MAAOZ,KAAKY,O,CAmC7B,QAAAkB,GACN,OAAO9B,KAAKY,OAAS,E,CAsBvB,MAAAmB,GACE,MAAMnB,EAAQZ,KAAK8B,WACnB,MAAME,EAAUhC,KAAKC,WAAa,SAClC,MAAMgC,EAAgBjC,KAAKY,QAAU,GAAK,YAAc,GACxD,MAAMsB,EAAgBlC,KAAKW,QAAU,MAAQ,YAAc,GAC3D,MAAMwB,EAAiBnC,KAAKoC,QAAUC,WAAarC,KAAKoC,QAAU,GAAK,aAAe,GAEtF,OACEE,EAACC,EAAI,CAAAC,IAAA,2DAAgBxC,KAAKK,SAAW,OAAS,KAAMoC,MAAOzC,KAAKO,OAAS,SAASP,KAAKO,SACrF+B,EAAA,YAAAE,IAAA,2CACEC,MAAO,iCAAiCR,KAAiBC,KAAiBC,IAC1EO,GAAI1C,KAAKC,WAAU,gBACJD,KAAKK,SAAW,OAAS,KAAI,kBAC3B2B,EACjB3B,SAAUL,KAAKK,SACfsC,eAAgB3C,KAAKG,eACrByC,UAAW5C,KAAKI,UAChByC,aAAc7C,KAAK8C,aACnBC,UAAW/C,KAAKgD,UAChBC,UAAWjD,KAAKkD,UAChBC,UAAWnD,KAAKoD,UAChB9C,KAAMN,KAAKM,KACX+C,YAAarD,KAAKqD,YAClBC,SAAUtD,KAAKQ,SACfC,SAAUT,KAAKS,SACfG,MAAOA,EACPF,WAAYV,KAAKU,WACjB6C,KAAMvD,KAAKuD,KACXC,KAAMxD,KAAKwD,KACXC,KAAMzD,KAAKyD,KACX3C,QAASd,KAAKc,QACdO,OAAQrB,KAAKqB,OACbG,QAASxB,KAAKwB,UAGhBc,EAAA,SAAAE,IAAA,2CAAOC,MAAM,aAAaC,GAAIV,EAAS0B,QAAS1D,KAAKC,YAAaD,KAAKa,OACtEb,KAAKoC,OAASpC,KAAKoC,QAAU,IAAME,EAAA,KAAAE,IAAA,2CAAGC,MAAM,oBAAoBzC,KAAKoC,OACrEpC,KAAK2D,QAAU3D,KAAK2D,SAAW,IAAMrB,EAAA,KAAAE,IAAA,2CAAGC,MAAM,UAAUzC,KAAK2D,Q,wDAOtE,IAAIzD,EAAc,E","ignoreList":[]}
|