@aquera/nile-elements 0.0.51 → 0.0.53
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/index.cjs.js +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.iife.js +173 -99
- package/dist/nile-input/index.cjs.js +1 -1
- package/dist/nile-input/index.esm.js +1 -1
- package/dist/nile-input/nile-input.cjs.js +1 -1
- package/dist/nile-input/nile-input.cjs.js.map +1 -1
- package/dist/nile-input/nile-input.css.cjs.js +1 -1
- package/dist/nile-input/nile-input.css.cjs.js.map +1 -1
- package/dist/nile-input/nile-input.css.esm.js +23 -6
- package/dist/nile-input/nile-input.esm.js +9 -3
- package/dist/nile-textarea/index.cjs.js +1 -1
- package/dist/nile-textarea/index.esm.js +1 -1
- package/dist/nile-textarea/nile-textarea.cjs.js +1 -1
- package/dist/nile-textarea/nile-textarea.cjs.js.map +1 -1
- package/dist/nile-textarea/nile-textarea.css.cjs.js +1 -1
- package/dist/nile-textarea/nile-textarea.css.cjs.js.map +1 -1
- package/dist/nile-textarea/nile-textarea.css.esm.js +41 -8
- package/dist/nile-textarea/nile-textarea.esm.js +58 -40
- package/dist/src/nile-input/nile-input.css.js +23 -6
- package/dist/src/nile-input/nile-input.css.js.map +1 -1
- package/dist/src/nile-input/nile-input.d.ts +2 -1
- package/dist/src/nile-input/nile-input.js +20 -6
- package/dist/src/nile-input/nile-input.js.map +1 -1
- package/dist/src/nile-textarea/nile-textarea.css.js +41 -8
- package/dist/src/nile-textarea/nile-textarea.css.js.map +1 -1
- package/dist/src/nile-textarea/nile-textarea.d.ts +7 -2
- package/dist/src/nile-textarea/nile-textarea.js +107 -45
- package/dist/src/nile-textarea/nile-textarea.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-input/nile-input.css.ts +23 -6
- package/src/nile-input/nile-input.ts +23 -9
- package/src/nile-textarea/nile-textarea.css.ts +41 -8
- package/src/nile-textarea/nile-textarea.ts +127 -62
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-textarea.css.cjs.js","sources":["../../../src/nile-textarea/nile-textarea.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * TextArea CSS\n */\nexport const styles = css`\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: inline-block;\n margin-bottom: 12px;\n color: var(--nile-textarea-label-color);\n font-family: var(--nile-font-family-serif);\n font-size: 14px;\n font-style: normal;\n font-weight: var(--nile-textarea-label-font-weight)
|
|
1
|
+
{"version":3,"file":"nile-textarea.css.cjs.js","sources":["../../../src/nile-textarea/nile-textarea.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * TextArea CSS\n */\nexport const styles = css`\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: inline-block;\n margin-bottom: 12px;\n color: var(--nile-textarea-label-color);\n font-family: var(--nile-font-family-serif);\n font-size: 14px;\n font-style: normal;\n font-weight: var(--nile-textarea-label-font-weight);\n line-height: var(--nile-textarea-label-line-height);\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: var(--nile-font-size-base);\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: #a4121c;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: var(--nile-colors-dark-500);\n margin-top: 6px;\n }\n\n /* Error message */\n .form-control__error-message {\n display: block;\n color: var(--nile-colors-red-700);\n margin-top: 12px;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 12px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 10.24px;\n }\n\n /* Host styles */\n :host {\n display: block;\n }\n\n /* Textarea styles */\n .textarea {\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n letter-spacing: 0.5px;\n vertical-align: middle;\n border-radius: var(--nile-radius-base-standard);\n transition: 0.3s color, 0.3s border, 0.3s box-shadow, 0.3s background-color;\n cursor: text;\n min-height: 12px;\n }\n\n /* Standard textareas */\n .textarea--standard {\n background-color: var(--nile-colors-white-base);\n border: 1px solid var(--nile-textarea-standard-border-color);\n box-shadow:var(--nile-textarea-standard-box-shadow);\n }\n\n .textarea--standard:hover:not(.textarea--disabled) {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-textarea-standard-hover-border-color);\n border-radius: var(--nile-radius-base-standard);\n }\n\n .textarea--standard:hover:not(.textarea--disabled) .textarea__control {\n border-color: var(--nile-colors-dark-900);\n border-radius: var(--nile-radius-base-standard);\n }\n\n .textarea--standard.textarea--focused:not(.textarea--disabled) {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-textarea-standard-focused-border-color);\n box-shadow:var(--nile-textarea-standard-focused-box-shadow);\n }\n\n .textarea--standard.textarea--focused:not(.textarea--disabled)\n .textarea__control {\n color: #000000;\n }\n\n .textarea--standard.textarea--disabled {\n border-color: var(--nile-textarea-standard-disabled-border-color);\n background: var(--nile-textarea-standard-disabled-background-color);\n opacity: 0.5;\n cursor: not-allowed;\n box-shadow:var(--nile-textarea-standard-disabled-box-shadow);\n }\n\n .textarea--standard.textarea--disabled .textarea__control {\n color: var(--nile-colors-neutral-500);\n }\n\n .textarea--standard.textarea--disabled .textarea__control::placeholder {\n color: var(--nile-colors-neutral-500);\n }\n\n /* Textarea control styles */\n .textarea__control {\n flex: 1 1 auto;\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px; /* 100% */\n letter-spacing: 0.2px;\n color: var(--nile-colors-dark-900);\n border: none;\n background: none;\n box-shadow: none;\n cursor: inherit;\n -webkit-appearance: none;\n }\n\n .textarea__control::-webkit-search-decoration,\n .textarea__control::-webkit-search-cancel-button,\n .textarea__control::-webkit-search-results-button,\n .textarea__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .textarea__control::placeholder {\n color: var(--nile-colors-dark-500);\n user-select: none;\n }\n\n .textarea__control:focus {\n outline: none;\n }\n\n .textarea--medium .textarea__control {\n padding:var(--nile-textarea-padding);\n }\n\n /* Resize types */\n .textarea--resize-none .textarea__control {\n resize: none;\n min-height: 12px;\n }\n\n .textarea--resize-vertical .textarea__control {\n resize: vertical;\n min-height: 12px;\n }\n\n .textarea--resize-auto .textarea__control {\n resize: none;\n overflow-y: hidden;\n min-height: 12px;\n }\n\n .textarea--standard.textarea--warning {\n border-color: var(--nile-colors-yellow-500);\n }\n\n .textarea--standard.textarea--error {\n border-color: var(--nile-colors-red-500);\n }\n\n .textarea--standard.textarea--success {\n border-color: var(--nile-colors-green-500);\n }\n\n .textarea--standard.textarea--destructive {\n border-color: #fda29b;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .textarea--standard.textarea--destructive.textarea--focused {\n border-color: #fda29b;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n }\n\n .input__non-printable {\n border-radius: 4px;\n max-width: 400px;\n background-color: var(--nile-colors-white-base);\n border: 1px solid var(--nile-colors-red-500);\n color: var(--nile-colors-red-500);\n padding: 10px;\n font-size: 12px;\n max-height: 300px;\n overflow-y: scroll;\n }\n\n .input__remove-non-printable {\n color: var(--nile-colors-red-500);\n margin-left: 10px;\n font-size: 14px;\n color: var(--nile-colors-dark-900);\n }\n\n .input__srtiked-text-container {\n margin-top: 4px;\n color: var(--nile-colors-dark-900);\n word-wrap: break-all;\n line-height: 16px;\n }\n\n .input__srtiked-text {\n text-decoration: line-through;\n text-decoration-color: var(--nile-colors-white-base);\n color: var(--nile-colors-white-base);\n background-color: var(--nile-colors-red-500);\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"gXAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
|
|
@@ -15,8 +15,8 @@ import{i as e}from"../index-cd2f9c12.esm.js";const r=e`
|
|
|
15
15
|
font-family: var(--nile-font-family-serif);
|
|
16
16
|
font-size: 14px;
|
|
17
17
|
font-style: normal;
|
|
18
|
-
font-weight: var(--nile-textarea-label-font-weight);
|
|
19
|
-
line-height: var(--nile-textarea-label-line-height);
|
|
18
|
+
font-weight: var(--nile-textarea-label-font-weight);
|
|
19
|
+
line-height: var(--nile-textarea-label-line-height);
|
|
20
20
|
letter-spacing: 0.2px;
|
|
21
21
|
}
|
|
22
22
|
|
|
@@ -75,13 +75,13 @@ import{i as e}from"../index-cd2f9c12.esm.js";const r=e`
|
|
|
75
75
|
/* Standard textareas */
|
|
76
76
|
.textarea--standard {
|
|
77
77
|
background-color: var(--nile-colors-white-base);
|
|
78
|
-
border: 1px solid var(--nile-textarea-standard-border-color);
|
|
79
|
-
box-shadow:var(--nile-textarea-standard-box-shadow);
|
|
78
|
+
border: 1px solid var(--nile-textarea-standard-border-color);
|
|
79
|
+
box-shadow:var(--nile-textarea-standard-box-shadow);
|
|
80
80
|
}
|
|
81
81
|
|
|
82
82
|
.textarea--standard:hover:not(.textarea--disabled) {
|
|
83
83
|
background-color: var(--nile-colors-white-base);
|
|
84
|
-
border-color: var(--nile-textarea-standard-hover-border-color);
|
|
84
|
+
border-color: var(--nile-textarea-standard-hover-border-color);
|
|
85
85
|
border-radius: var(--nile-radius-base-standard);
|
|
86
86
|
}
|
|
87
87
|
|
|
@@ -92,7 +92,7 @@ import{i as e}from"../index-cd2f9c12.esm.js";const r=e`
|
|
|
92
92
|
|
|
93
93
|
.textarea--standard.textarea--focused:not(.textarea--disabled) {
|
|
94
94
|
background-color: var(--nile-colors-white-base);
|
|
95
|
-
border-color: var(--nile-textarea-standard-focused-border-color);
|
|
95
|
+
border-color: var(--nile-textarea-standard-focused-border-color);
|
|
96
96
|
box-shadow:var(--nile-textarea-standard-focused-box-shadow);
|
|
97
97
|
}
|
|
98
98
|
|
|
@@ -102,11 +102,11 @@ import{i as e}from"../index-cd2f9c12.esm.js";const r=e`
|
|
|
102
102
|
}
|
|
103
103
|
|
|
104
104
|
.textarea--standard.textarea--disabled {
|
|
105
|
-
border-color: var(--nile-textarea-standard-disabled-border-color);
|
|
105
|
+
border-color: var(--nile-textarea-standard-disabled-border-color);
|
|
106
106
|
background: var(--nile-textarea-standard-disabled-background-color);
|
|
107
107
|
opacity: 0.5;
|
|
108
108
|
cursor: not-allowed;
|
|
109
|
-
box-shadow:var(--nile-textarea-standard-disabled-box-shadow);
|
|
109
|
+
box-shadow:var(--nile-textarea-standard-disabled-box-shadow);
|
|
110
110
|
}
|
|
111
111
|
|
|
112
112
|
.textarea--standard.textarea--disabled .textarea__control {
|
|
@@ -193,4 +193,37 @@ import{i as e}from"../index-cd2f9c12.esm.js";const r=e`
|
|
|
193
193
|
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
|
|
194
194
|
0px 0px 0px 4px rgba(240, 68, 56, 0.24);
|
|
195
195
|
}
|
|
196
|
+
|
|
197
|
+
.input__non-printable {
|
|
198
|
+
border-radius: 4px;
|
|
199
|
+
max-width: 400px;
|
|
200
|
+
background-color: var(--nile-colors-white-base);
|
|
201
|
+
border: 1px solid var(--nile-colors-red-500);
|
|
202
|
+
color: var(--nile-colors-red-500);
|
|
203
|
+
padding: 10px;
|
|
204
|
+
font-size: 12px;
|
|
205
|
+
max-height: 300px;
|
|
206
|
+
overflow-y: scroll;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.input__remove-non-printable {
|
|
210
|
+
color: var(--nile-colors-red-500);
|
|
211
|
+
margin-left: 10px;
|
|
212
|
+
font-size: 14px;
|
|
213
|
+
color: var(--nile-colors-dark-900);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.input__srtiked-text-container {
|
|
217
|
+
margin-top: 4px;
|
|
218
|
+
color: var(--nile-colors-dark-900);
|
|
219
|
+
word-wrap: break-all;
|
|
220
|
+
line-height: 16px;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.input__srtiked-text {
|
|
224
|
+
text-decoration: line-through;
|
|
225
|
+
text-decoration-color: var(--nile-colors-white-base);
|
|
226
|
+
color: var(--nile-colors-white-base);
|
|
227
|
+
background-color: var(--nile-colors-red-500);
|
|
228
|
+
}
|
|
196
229
|
`;export{r as s};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import{__decorate as t}from"tslib";import{x as e}from"../index-cd2f9c12.esm.js";import{query as i,state as s,customElement as
|
|
1
|
+
import{__decorate as t}from"tslib";import{x as e}from"../index-cd2f9c12.esm.js";import{query as i,state as s,customElement as a}from"lit/decorators.js";import{s as r}from"./nile-textarea.css.esm.js";import{classMap as o}from"lit/directives/class-map.js";import{d as l}from"../internal/default-value.esm.js";import{H as h}from"../internal/slot.esm.js";import{ifDefined as n}from"lit/directives/if-defined.js";import{live as d}from"lit/directives/live.js";import{w as c}from"../internal/watch.esm.js";import{N as m}from"../internal/nile-element.esm.js";import{unsafeHTML as p}from"lit/directives/unsafe-html.js";import{n as u}from"../property-09139d3c.esm.js";import"lit";let v=class extends m{constructor(){super(...arguments),this.hasSlotController=new h(this,"help-text","label"),this.hasFocus=!1,this.title="",this.name="",this.value="",this.size="medium",this.filled=!1,this.label="",this.helpText="",this.errorMessage="",this.placeholder="",this.rows=4,this.resize="vertical",this.disabled=!1,this.readonly=!1,this.form="",this.required=!1,this.warning=!1,this.error=!1,this.success=!1,this.spellcheck=!0,this.defaultValue="",this.fullHeight=!1,this.checkNonPrintableChar=!1,this.hasPrintableCharacters=!1}connectedCallback(){super.connectedCallback(),this.resizeObserver=new ResizeObserver((()=>this.setTextareaHeight())),this.updateComplete.then((()=>{this.setTextareaHeight(),this.resizeObserver.observe(this.input)})),this.fullHeight&&requestAnimationFrame((()=>{let t=this.parentElement?.getBoundingClientRect().height;t&&(t-=65,t<12&&(t=12),this.shadowRoot?.querySelector("textarea")?.style.setProperty("height",`${t}px`))})),this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.input&&this.resizeObserver.unobserve(this.input),this.emit("nile-destroy")}handleBlur(){this.hasFocus=!1,this.emit("nile-blur",{value:this.value})}handleChange(){this.value=this.input.value,this.setTextareaHeight(),this.emit("nile-change",{value:this.value})}handleFocus(){this.hasFocus=!0,this.emit("nile-focus",{value:this.value})}handleInput(){this.value=this.input.value,this.emit("nile-input",{value:this.value})}setTextareaHeight(){"auto"===this.resize?(this.input.style.height="auto",this.input.style.height=`${this.input.scrollHeight}px`):this.input.style.height=void 0}handleRowsChange(){this.setTextareaHeight()}async handleValueChange(){await this.updateComplete,this.setTextareaHeight(),this.checkNonPrintableChar&&this.markNonPrintableCharacters()}markNonPrintableCharacters(){let t="";if(this.hasPrintableCharacters=!1,this.value)for(let e=0,i=this.value.length;e<i;e++){const i=this.value.charCodeAt(e);i>255&&9109!==i||[129,143,144,157,160].includes(i)?(t+=`<span class="input__srtiked-text">${this.value.charAt(e)}</span>`,this.hasPrintableCharacters=!0):t+=this.value.charAt(e)}this.markedValue=t,this.emit("nile-value-marked",{value:this.markedValue,hasNonPrintableCharacters:this.hasPrintableCharacters})}removeAllNonPrintableCharacters(){let t="";if(this.value)for(let e=0,i=this.value.length;e<i;e++){const i=this.value.charCodeAt(e);i>255&&9109!==i||[129,143,144,157,160].includes(i)||(t+=this.value.charAt(e))}this.value=t,this.emit("nile-npchar-removed",{value:this.value})}focus(t){this.input.focus(t)}blur(){this.input.blur()}select(){this.input.select()}scrollPosition(t){return t?("number"==typeof t.top&&(this.input.scrollTop=t.top),void("number"==typeof t.left&&(this.input.scrollLeft=t.left))):{top:this.input.scrollTop,left:this.input.scrollTop}}setSelectionRange(t,e,i="none"){this.input.setSelectionRange(t,e,i)}setRangeText(t,e,i,s){this.input.setRangeText(t,e,i,s),this.value!==this.input.value&&(this.value=this.input.value),this.value!==this.input.value&&(this.value=this.input.value,this.setTextareaHeight())}render(){const t=this.hasSlotController.test("label");this.hasSlotController.test("help-text");const i=!!this.label||!!t,s=!!this.helpText,a=!!this.errorMessage;return e`
|
|
2
2
|
<div
|
|
3
3
|
part="form-control"
|
|
4
|
-
class=${
|
|
4
|
+
class=${o({"form-control":!0,"form-control--medium":"medium"===this.size,"form-control--has-label":i,"form-control--has-help-text":s})}
|
|
5
5
|
>
|
|
6
6
|
<label
|
|
7
7
|
part="form-control-label"
|
|
@@ -12,50 +12,68 @@ import{__decorate as t}from"tslib";import{x as e}from"../index-cd2f9c12.esm.js";
|
|
|
12
12
|
<slot name="label">${this.label}</slot>
|
|
13
13
|
</label>
|
|
14
14
|
|
|
15
|
-
<
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
15
|
+
<nile-popup
|
|
16
|
+
?active=${this.hasPrintableCharacters}
|
|
17
|
+
placement="bottom-start"
|
|
18
|
+
distance="5"
|
|
19
|
+
strategy="fixed"
|
|
20
|
+
>
|
|
21
|
+
<div part="form-control-input" class="form-control-input" slot="anchor">
|
|
22
|
+
<div
|
|
23
|
+
part="base"
|
|
24
|
+
class=${o({textarea:!0,"textarea--medium":"medium"===this.size,"textarea--warning":this.warning,"textarea--error":this.error,"textarea--success":this.success,"textarea--standard":!this.filled,"textarea--disabled":this.disabled,"textarea--focused":this.hasFocus,"textarea--empty":!this.value,"textarea--resize-none":"none"===this.resize,"textarea--resize-vertical":"vertical"===this.resize,"textarea--resize-auto":"auto"===this.resize})}
|
|
25
|
+
>
|
|
26
|
+
<textarea
|
|
27
|
+
part="textarea"
|
|
28
|
+
id="input"
|
|
29
|
+
class="textarea__control"
|
|
30
|
+
title=${this.title}
|
|
31
|
+
name=${n(this.name)}
|
|
32
|
+
.value=${d(this.value)}
|
|
33
|
+
?disabled=${this.disabled}
|
|
34
|
+
?readonly=${this.readonly}
|
|
35
|
+
?required=${this.required}
|
|
36
|
+
placeholder=${n(this.placeholder)}
|
|
37
|
+
rows=${n(this.rows)}
|
|
38
|
+
minlength=${n(this.minlength)}
|
|
39
|
+
maxlength=${n(this.maxlength)}
|
|
40
|
+
autocapitalize=${n(this.autocapitalize)}
|
|
41
|
+
autocorrect=${n(this.autocorrect)}
|
|
42
|
+
?autofocus=${this.autofocus}
|
|
43
|
+
spellcheck=${n(this.spellcheck)}
|
|
44
|
+
enterkeyhint=${n(this.enterkeyhint)}
|
|
45
|
+
inputmode=${n(this.inputmode)}
|
|
46
|
+
aria-describedby="help-text"
|
|
47
|
+
@change=${this.handleChange}
|
|
48
|
+
@input=${this.handleInput}
|
|
49
|
+
@focus=${this.handleFocus}
|
|
50
|
+
@blur=${this.handleBlur}
|
|
51
|
+
></textarea>
|
|
52
|
+
</div>
|
|
48
53
|
</div>
|
|
49
|
-
</div>
|
|
50
54
|
|
|
51
|
-
|
|
55
|
+
${s?e`
|
|
52
56
|
<nile-form-help-text>${this.helpText}</nile-form-help-text>
|
|
53
57
|
`:""}
|
|
54
|
-
|
|
55
|
-
${o?e`
|
|
58
|
+
${a?e`
|
|
56
59
|
<nile-form-error-message
|
|
57
60
|
>${this.errorMessage}</nile-form-error-message
|
|
58
61
|
>
|
|
59
62
|
`:""}
|
|
63
|
+
<div class="input__non-printable">
|
|
64
|
+
Non-printable character detected.
|
|
65
|
+
<nile-badge
|
|
66
|
+
variant="error"
|
|
67
|
+
@click=${this.removeAllNonPrintableCharacters}
|
|
68
|
+
class="input__remove-non-printable"
|
|
69
|
+
>
|
|
70
|
+
Remove All
|
|
71
|
+
</nile-badge>
|
|
72
|
+
|
|
73
|
+
<div class="input__srtiked-text-container">
|
|
74
|
+
${p(this.markedValue)}
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
</nile-popup>
|
|
60
78
|
</div>
|
|
61
|
-
`}};
|
|
79
|
+
`}};v.styles=r,t([i(".textarea__control")],v.prototype,"input",void 0),t([s()],v.prototype,"hasFocus",void 0),t([u()],v.prototype,"title",void 0),t([u()],v.prototype,"name",void 0),t([u()],v.prototype,"value",void 0),t([u({reflect:!0})],v.prototype,"size",void 0),t([u({type:Boolean,reflect:!0})],v.prototype,"filled",void 0),t([u()],v.prototype,"label",void 0),t([u({attribute:"help-text"})],v.prototype,"helpText",void 0),t([u({attribute:"error-message"})],v.prototype,"errorMessage",void 0),t([u()],v.prototype,"placeholder",void 0),t([u({type:Number})],v.prototype,"rows",void 0),t([u()],v.prototype,"resize",void 0),t([u({type:Boolean,reflect:!0})],v.prototype,"disabled",void 0),t([u({type:Boolean,reflect:!0})],v.prototype,"readonly",void 0),t([u({reflect:!0})],v.prototype,"form",void 0),t([u({type:Boolean,reflect:!0})],v.prototype,"required",void 0),t([u({type:Number})],v.prototype,"minlength",void 0),t([u({type:Number})],v.prototype,"maxlength",void 0),t([u({type:Boolean})],v.prototype,"warning",void 0),t([u({type:Boolean})],v.prototype,"error",void 0),t([u({type:Boolean})],v.prototype,"success",void 0),t([u()],v.prototype,"autocapitalize",void 0),t([u()],v.prototype,"autocorrect",void 0),t([u()],v.prototype,"autocomplete",void 0),t([u({type:Boolean})],v.prototype,"autofocus",void 0),t([u()],v.prototype,"enterkeyhint",void 0),t([u({type:Boolean,converter:{fromAttribute:t=>!(!t||"false"===t),toAttribute:t=>t?"true":"false"}})],v.prototype,"spellcheck",void 0),t([u()],v.prototype,"inputmode",void 0),t([l()],v.prototype,"defaultValue",void 0),t([u({type:Boolean,reflect:!0})],v.prototype,"fullHeight",void 0),t([u({type:Boolean})],v.prototype,"checkNonPrintableChar",void 0),t([s()],v.prototype,"hasPrintableCharacters",void 0),t([s()],v.prototype,"markedValue",void 0),t([c("rows",{waitUntilFirstUpdate:!0})],v.prototype,"handleRowsChange",null),t([c("value",{waitUntilFirstUpdate:!0})],v.prototype,"handleValueChange",null),v=t([a("nile-textarea")],v);export{v as N};
|
|
@@ -475,19 +475,36 @@ export const styles = css `
|
|
|
475
475
|
}
|
|
476
476
|
|
|
477
477
|
.input__non-printable {
|
|
478
|
-
width: 280px;
|
|
479
|
-
height: 12px;
|
|
480
478
|
border-radius: 4px;
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
479
|
+
max-width: 400px;
|
|
480
|
+
background-color: var(--nile-colors-white-base);
|
|
481
|
+
border: 1px solid var(--nile-colors-red-500);
|
|
482
|
+
color: var(--nile-colors-red-500);
|
|
484
483
|
padding: 10px;
|
|
485
484
|
font-size: 12px;
|
|
485
|
+
max-height: 300px;
|
|
486
|
+
overflow-y: scroll;
|
|
486
487
|
}
|
|
487
488
|
|
|
488
489
|
.input__remove-non-printable {
|
|
489
|
-
color:
|
|
490
|
+
color: var(--nile-colors-red-500);
|
|
490
491
|
margin-left: 10px;
|
|
492
|
+
font-size: 14px;
|
|
493
|
+
color: var(--nile-colors-dark-900);
|
|
494
|
+
}
|
|
495
|
+
|
|
496
|
+
.input__srtiked-text-container {
|
|
497
|
+
margin-top: 4px;
|
|
498
|
+
color: var(--nile-colors-dark-900);
|
|
499
|
+
word-wrap: break-all;
|
|
500
|
+
line-height: 16px;
|
|
501
|
+
}
|
|
502
|
+
|
|
503
|
+
.input__srtiked-text {
|
|
504
|
+
text-decoration: line-through;
|
|
505
|
+
text-decoration-color: var(--nile-colors-white-base);
|
|
506
|
+
color: var(--nile-colors-white-base);
|
|
507
|
+
background-color: var(--nile-colors-red-500);
|
|
491
508
|
}
|
|
492
509
|
`;
|
|
493
510
|
export default [styles];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-input.css.js","sourceRoot":"","sources":["../../../src/nile-input/nile-input.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiexB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Input CSS\n */\nexport const styles = css`\n :host {\n display: block;\n }\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: inline-block;\n color: inherit;\n margin-bottom: 12px;\n color: var(--nile-colors-dark-900);\n font-family: var(--nile-font-family-serif);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: 14px;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: #a4121c;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: #7f7f7f;\n margin-top: 6px;\n }\n\n /* Error message */\n .form-control__error-message {\n display: block;\n color: #a4121c;\n margin-top: 12px;\n font-size: 12px;\n font-style: normal;\n line-height: 12px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 10.24px;\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: 0.25rem;\n }\n\n .input {\n flex: 1 1 auto;\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n font-weight: 400;\n vertical-align: middle;\n overflow: hidden;\n cursor: text;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n box-sizing: border-box;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n /* Standard inputs */\n .input--standard {\n background-color: var(--nile-input-standard-background-color);\n border: solid 1px var(--nile-input-standard-border-color);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); /**for v2 */\n }\n\n .input--standard:hover:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #000;\n }\n\n .input--standard.input--focused:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #005ea6;\n }\n\n .input--standard.input--focused:not(.input--disabled) .input__control {\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--standard.input--disabled {\n background-color: #fff;\n border-color: #c7ced4;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input--standard.input--disabled .input__control {\n color: hsl(240 5.9% 10%);\n }\n\n .input--standard.input--disabled .input__control::placeholder {\n color: hsl(240 5.2% 33.9%);\n color: var(--nile-input-standard-disabled-placeholder-font-color);\n }\n\n .input--standard.input--warning {\n border-color: var(--nile-colors-yellow-500);\n }\n\n .input--standard.input--error {\n border-color: #e5434d;\n }\n\n .input--standard.input--success {\n border-color: #43e5c0;\n }\n\n .input--standard.input--destructive {\n border-color: #fda29b;\n }\n\n .input--standard.input--destructive:focus {\n border: 1px solid #fda29b;\n /* Focus rings/ring-error-shadow-xs */\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n }\n\n /* Filled inputs */\n .input--filled {\n border: none;\n background-color: hsl(240 4.8% 95.9%);\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled:hover:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n }\n\n .input--filled.input--focused:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n outline: solid 3px hsl(200.4 98% 39.4%);\n outline-offset: 1px;\n }\n\n .input--filled.input--disabled {\n background-color: hsl(240 4.8% 95.9%);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input__control {\n flex: 1 1 auto;\n min-width: 0;\n height: 100%;\n border: none;\n background: none;\n box-shadow: none;\n padding: 0;\n margin: 0;\n cursor: inherit;\n -webkit-appearance: none;\n color: var(--nile-colors-dark-900);\n font-family: var(--nile-font-family-sans-serif);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .input__control::-webkit-search-decoration,\n .input__control::-webkit-search-cancel-button,\n .input__control::-webkit-search-results-button,\n .input__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input__control::placeholder {\n color: #7f7f7f;\n color: #667085; /**for v2 */\n user-select: none;\n }\n\n .input:hover:not(.input--disabled) .input__control {\n color: #000;\n font-size: 14px;\n line-height: 14px;\n font-style: normal;\n font-weight: 400;\n letter-spacing: 0.2px;\n }\n\n .input__control:focus {\n outline: none;\n }\n\n .input__prefix,\n .input__suffix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n cursor: default;\n }\n\n .input__prefix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n .input__suffix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n .input--standard:focus {\n border-radius: 4px;\n border: 1px solid #85aad1; /**for v2 */\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(133, 170, 209, 0.24); /**for v2 */\n }\n\n /*\n * Size modifiers\n */\n\n .input--small {\n border-radius: 0.25rem;\n font-size: var(--nile-input-font-size-small);\n height: 1.875rem;\n }\n\n .input--small .input__control {\n height: calc(1.875rem);\n padding: 0 0.75rem;\n }\n\n .input--small .input__clear {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__password-toggle {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__prefix::slotted(*) {\n margin-inline-start: 0.75rem;\n }\n\n .input--small .input__suffix::slotted(*) {\n margin-inline-end: 0.75rem;\n }\n\n .input--medium {\n border-radius: 0.25rem;\n font-size: var(--nile-input-font-size-medium);\n height: 38px;\n }\n\n .input--medium .input__control {\n height: 14px;\n padding: 12px;\n }\n\n .input--medium .input__clear {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__password-toggle {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__prefix::slotted(*) {\n margin-inline-start: 12px;\n }\n\n .input--medium .input__suffix::slotted(*) {\n margin-inline-end: 12px;\n }\n\n .input--large {\n border-radius: 0.25rem;\n font-size: 1.25rem;\n height: 3.125rem;\n }\n\n .input--large .input__control {\n height: calc(3.125rem - 1px * 2);\n padding: 0 1.25rem;\n }\n\n .input--large .input__clear {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__password-toggle {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__prefix::slotted(*) {\n margin-inline-start: 1.25rem;\n }\n\n .input--large .input__suffix::slotted(*) {\n margin-inline-end: 1.25rem;\n }\n\n /*\n * Pill modifier\n */\n\n .input--pill.input--small {\n border-radius: 1.875rem;\n }\n\n .input--pill.input--medium {\n border-radius: 2.5rem;\n }\n\n .input--pill.input--large {\n border-radius: 3.125rem;\n }\n\n /*\n * Clearable + Password Toggle\n */\n\n .input__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__password-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__clear:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__password-toggle:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__clear:focus,\n .input__password-toggle:focus {\n outline: none;\n }\n\n .input--empty .input__clear {\n visibility: hidden;\n }\n\n /* Don't show the browser's password toggle in Edge */\n ::-ms-reveal {\n display: none;\n }\n\n /* Hide the built-in number spinner */\n .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n -webkit-appearance: none;\n display: none;\n }\n\n .input--no-spin-buttons input[type='number'] {\n -moz-appearance: textfield;\n }\n\n :host([no-border]) .input--standard {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard:hover:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n .input__password {\n font-family: 'disc';\n }\n\n .input__non-printable {\n width: 280px;\n height: 12px;\n border-radius: 4px;\n background-color: #ffffff;\n border: 1px solid grey;\n color: red;\n padding: 10px;\n font-size: 12px;\n }\n\n .input__remove-non-printable {\n color: #035da6;\n margin-left: 10px;\n }\n`;\n\nexport default [styles];\n"]}
|
|
1
|
+
{"version":3,"file":"nile-input.css.js","sourceRoot":"","sources":["../../../src/nile-input/nile-input.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkfxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Input CSS\n */\nexport const styles = css`\n :host {\n display: block;\n }\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: inline-block;\n color: inherit;\n margin-bottom: 12px;\n color: var(--nile-colors-dark-900);\n font-family: var(--nile-font-family-serif);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: 14px;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: #a4121c;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: #7f7f7f;\n margin-top: 6px;\n }\n\n /* Error message */\n .form-control__error-message {\n display: block;\n color: #a4121c;\n margin-top: 12px;\n font-size: 12px;\n font-style: normal;\n line-height: 12px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 10.24px;\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: 0.25rem;\n }\n\n .input {\n flex: 1 1 auto;\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n font-weight: 400;\n vertical-align: middle;\n overflow: hidden;\n cursor: text;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n box-sizing: border-box;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n /* Standard inputs */\n .input--standard {\n background-color: var(--nile-input-standard-background-color);\n border: solid 1px var(--nile-input-standard-border-color);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); /**for v2 */\n }\n\n .input--standard:hover:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #000;\n }\n\n .input--standard.input--focused:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #005ea6;\n }\n\n .input--standard.input--focused:not(.input--disabled) .input__control {\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--standard.input--disabled {\n background-color: #fff;\n border-color: #c7ced4;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input--standard.input--disabled .input__control {\n color: hsl(240 5.9% 10%);\n }\n\n .input--standard.input--disabled .input__control::placeholder {\n color: hsl(240 5.2% 33.9%);\n color: var(--nile-input-standard-disabled-placeholder-font-color);\n }\n\n .input--standard.input--warning {\n border-color: var(--nile-colors-yellow-500);\n }\n\n .input--standard.input--error {\n border-color: #e5434d;\n }\n\n .input--standard.input--success {\n border-color: #43e5c0;\n }\n\n .input--standard.input--destructive {\n border-color: #fda29b;\n }\n\n .input--standard.input--destructive:focus {\n border: 1px solid #fda29b;\n /* Focus rings/ring-error-shadow-xs */\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n }\n\n /* Filled inputs */\n .input--filled {\n border: none;\n background-color: hsl(240 4.8% 95.9%);\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled:hover:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n }\n\n .input--filled.input--focused:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n outline: solid 3px hsl(200.4 98% 39.4%);\n outline-offset: 1px;\n }\n\n .input--filled.input--disabled {\n background-color: hsl(240 4.8% 95.9%);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input__control {\n flex: 1 1 auto;\n min-width: 0;\n height: 100%;\n border: none;\n background: none;\n box-shadow: none;\n padding: 0;\n margin: 0;\n cursor: inherit;\n -webkit-appearance: none;\n color: var(--nile-colors-dark-900);\n font-family: var(--nile-font-family-sans-serif);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .input__control::-webkit-search-decoration,\n .input__control::-webkit-search-cancel-button,\n .input__control::-webkit-search-results-button,\n .input__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input__control::placeholder {\n color: #7f7f7f;\n color: #667085; /**for v2 */\n user-select: none;\n }\n\n .input:hover:not(.input--disabled) .input__control {\n color: #000;\n font-size: 14px;\n line-height: 14px;\n font-style: normal;\n font-weight: 400;\n letter-spacing: 0.2px;\n }\n\n .input__control:focus {\n outline: none;\n }\n\n .input__prefix,\n .input__suffix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n cursor: default;\n }\n\n .input__prefix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n .input__suffix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n .input--standard:focus {\n border-radius: 4px;\n border: 1px solid #85aad1; /**for v2 */\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(133, 170, 209, 0.24); /**for v2 */\n }\n\n /*\n * Size modifiers\n */\n\n .input--small {\n border-radius: 0.25rem;\n font-size: var(--nile-input-font-size-small);\n height: 1.875rem;\n }\n\n .input--small .input__control {\n height: calc(1.875rem);\n padding: 0 0.75rem;\n }\n\n .input--small .input__clear {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__password-toggle {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__prefix::slotted(*) {\n margin-inline-start: 0.75rem;\n }\n\n .input--small .input__suffix::slotted(*) {\n margin-inline-end: 0.75rem;\n }\n\n .input--medium {\n border-radius: 0.25rem;\n font-size: var(--nile-input-font-size-medium);\n height: 38px;\n }\n\n .input--medium .input__control {\n height: 14px;\n padding: 12px;\n }\n\n .input--medium .input__clear {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__password-toggle {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__prefix::slotted(*) {\n margin-inline-start: 12px;\n }\n\n .input--medium .input__suffix::slotted(*) {\n margin-inline-end: 12px;\n }\n\n .input--large {\n border-radius: 0.25rem;\n font-size: 1.25rem;\n height: 3.125rem;\n }\n\n .input--large .input__control {\n height: calc(3.125rem - 1px * 2);\n padding: 0 1.25rem;\n }\n\n .input--large .input__clear {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__password-toggle {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__prefix::slotted(*) {\n margin-inline-start: 1.25rem;\n }\n\n .input--large .input__suffix::slotted(*) {\n margin-inline-end: 1.25rem;\n }\n\n /*\n * Pill modifier\n */\n\n .input--pill.input--small {\n border-radius: 1.875rem;\n }\n\n .input--pill.input--medium {\n border-radius: 2.5rem;\n }\n\n .input--pill.input--large {\n border-radius: 3.125rem;\n }\n\n /*\n * Clearable + Password Toggle\n */\n\n .input__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__password-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__clear:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__password-toggle:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__clear:focus,\n .input__password-toggle:focus {\n outline: none;\n }\n\n .input--empty .input__clear {\n visibility: hidden;\n }\n\n /* Don't show the browser's password toggle in Edge */\n ::-ms-reveal {\n display: none;\n }\n\n /* Hide the built-in number spinner */\n .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n -webkit-appearance: none;\n display: none;\n }\n\n .input--no-spin-buttons input[type='number'] {\n -moz-appearance: textfield;\n }\n\n :host([no-border]) .input--standard {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard:hover:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n .input__password {\n font-family: 'disc';\n }\n\n .input__non-printable {\n border-radius: 4px;\n max-width: 400px;\n background-color: var(--nile-colors-white-base);\n border: 1px solid var(--nile-colors-red-500);\n color: var(--nile-colors-red-500);\n padding: 10px;\n font-size: 12px;\n max-height: 300px;\n overflow-y: scroll;\n }\n\n .input__remove-non-printable {\n color: var(--nile-colors-red-500);\n margin-left: 10px;\n font-size: 14px;\n color: var(--nile-colors-dark-900);\n }\n\n .input__srtiked-text-container {\n margin-top: 4px;\n color: var(--nile-colors-dark-900);\n word-wrap: break-all;\n line-height: 16px;\n }\n\n .input__srtiked-text {\n text-decoration: line-through;\n text-decoration-color: var(--nile-colors-white-base);\n color: var(--nile-colors-white-base);\n background-color: var(--nile-colors-red-500);\n }\n`;\n\nexport default [styles];\n"]}
|
|
@@ -111,6 +111,7 @@ export declare class NileInput extends NileElement implements NileFormControl {
|
|
|
111
111
|
*/
|
|
112
112
|
inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
|
|
113
113
|
hasPrintableCharacters: boolean;
|
|
114
|
+
markedValue: string;
|
|
114
115
|
connectedCallback(): void;
|
|
115
116
|
disconnectedCallback(): void;
|
|
116
117
|
/** Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted. */
|
|
@@ -136,7 +137,7 @@ export declare class NileInput extends NileElement implements NileFormControl {
|
|
|
136
137
|
handleStepChange(): void;
|
|
137
138
|
handleValueChange(): Promise<void>;
|
|
138
139
|
/** checks non printable characters in the value. */
|
|
139
|
-
|
|
140
|
+
markNonPrintableCharacters(): void;
|
|
140
141
|
/** Removes all non printable characters from the value. */
|
|
141
142
|
removeAllNonPrintableCharacters(): void;
|
|
142
143
|
/** Sets focus on the input. */
|
|
@@ -18,6 +18,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
|
|
|
18
18
|
import { live } from 'lit/directives/live.js';
|
|
19
19
|
import { watch } from '../internal/watch';
|
|
20
20
|
import NileElement from '../internal/nile-element';
|
|
21
|
+
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
|
21
22
|
/**
|
|
22
23
|
* Nile icon component.
|
|
23
24
|
*
|
|
@@ -206,23 +207,27 @@ let NileInput = class NileInput extends NileElement {
|
|
|
206
207
|
async handleValueChange() {
|
|
207
208
|
await this.updateComplete;
|
|
208
209
|
if (this.checkNonPrintableChar) {
|
|
209
|
-
this.
|
|
210
|
+
this.markNonPrintableCharacters();
|
|
210
211
|
}
|
|
211
212
|
}
|
|
212
213
|
/** checks non printable characters in the value. */
|
|
213
|
-
|
|
214
|
+
markNonPrintableCharacters() {
|
|
215
|
+
let markedValue = '';
|
|
214
216
|
this.hasPrintableCharacters = false;
|
|
215
217
|
if (this.value) {
|
|
216
218
|
for (let i = 0, n = this.value.length; i < n; i++) {
|
|
217
219
|
const charCode = this.value.charCodeAt(i);
|
|
218
|
-
// Check if the character is non-printable
|
|
219
220
|
if ((charCode > 255 && charCode !== 9109) || [129, 143, 144, 157, 160].includes(charCode)) {
|
|
221
|
+
markedValue += `<span class="input__srtiked-text">${this.value.charAt(i)}</span>`;
|
|
220
222
|
this.hasPrintableCharacters = true;
|
|
221
|
-
|
|
222
|
-
|
|
223
|
+
}
|
|
224
|
+
else {
|
|
225
|
+
markedValue += this.value.charAt(i);
|
|
223
226
|
}
|
|
224
227
|
}
|
|
225
228
|
}
|
|
229
|
+
this.markedValue = markedValue;
|
|
230
|
+
this.emit('nile-value-marked', { value: this.markedValue, hasNonPrintableCharacters: this.hasPrintableCharacters });
|
|
226
231
|
}
|
|
227
232
|
/** Removes all non printable characters from the value. */
|
|
228
233
|
removeAllNonPrintableCharacters() {
|
|
@@ -454,7 +459,13 @@ let NileInput = class NileInput extends NileElement {
|
|
|
454
459
|
</div>
|
|
455
460
|
|
|
456
461
|
<div class="input__non-printable">
|
|
457
|
-
Non-printable character detected
|
|
462
|
+
Non-printable character detected.
|
|
463
|
+
<nile-badge variant="error" @click=${this.removeAllNonPrintableCharacters} class="input__remove-non-printable" >
|
|
464
|
+
Remove All
|
|
465
|
+
</nile-badge>
|
|
466
|
+
|
|
467
|
+
<div class="input__srtiked-text-container"> ${unsafeHTML(this.markedValue)} </div>
|
|
468
|
+
|
|
458
469
|
</div>
|
|
459
470
|
</nile-popup>
|
|
460
471
|
</div>
|
|
@@ -608,6 +619,9 @@ __decorate([
|
|
|
608
619
|
__decorate([
|
|
609
620
|
state()
|
|
610
621
|
], NileInput.prototype, "hasPrintableCharacters", void 0);
|
|
622
|
+
__decorate([
|
|
623
|
+
state()
|
|
624
|
+
], NileInput.prototype, "markedValue", void 0);
|
|
611
625
|
__decorate([
|
|
612
626
|
watch('disabled', { waitUntilFirstUpdate: true })
|
|
613
627
|
], NileInput.prototype, "handleDisabledChange", null);
|