@nuralyui/input 0.0.15 → 0.0.16
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/bundle.js +48 -115
- package/index.js.map +1 -1
- package/input.component.d.ts +4 -2
- package/input.component.js +16 -3
- package/input.component.js.map +1 -1
- package/input.style.js +7 -74
- package/input.style.js.map +1 -1
- package/input.types.js.map +1 -1
- package/package.json +1 -1
- package/react.js.map +1 -1
- package/validation.js.map +1 -1
package/bundle.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{css as t,html as
|
|
1
|
+
import{css as t,html as i,nothing as r,LitElement as n}from"lit";import{property as e,state as a,customElement as o}from"lit/decorators.js";import{NuralyUIBaseMixin as s}from"@nuralyui/common/mixins";const l=[t`
|
|
2
2
|
/*
|
|
3
3
|
* Host element base styles
|
|
4
4
|
* Container for the input component with flexible layout
|
|
@@ -281,45 +281,6 @@ import{css as t,html as r,nothing as i,LitElement as n}from"lit";import{property
|
|
|
281
281
|
transition: var(--nuraly-transition-input, border-color 0.2s, box-shadow 0.2s);
|
|
282
282
|
}
|
|
283
283
|
|
|
284
|
-
/* Carbon Design System override - Carbon specific styles */
|
|
285
|
-
html[data-theme^="carbon"] nr-input #input-container,
|
|
286
|
-
body[data-theme^="carbon"] nr-input #input-container,
|
|
287
|
-
[data-theme^="carbon"] nr-input #input-container,
|
|
288
|
-
.input-wrapper[data-theme^="carbon"] #input-container {
|
|
289
|
-
border: var(--nuraly-border-width-input, 1px) solid var(--nuraly-color-input-border, transparent) !important;
|
|
290
|
-
border-bottom: var(--nuraly-border-width-input, 2px) solid var(--nuraly-color-input-border-bottom, #8d8d8d) !important;
|
|
291
|
-
border-radius: var(--nuraly-border-radius-input, 0) !important;
|
|
292
|
-
background-color: var(--nuraly-color-input-background, #f4f4f4) !important;
|
|
293
|
-
color: var(--nuraly-color-input-text, #161616) !important;
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
/* Default theme override - Default specific styles */
|
|
297
|
-
html[data-theme^="default"] nr-input #input-container,
|
|
298
|
-
body[data-theme^="default"] nr-input #input-container,
|
|
299
|
-
[data-theme^="default"] nr-input #input-container,
|
|
300
|
-
.input-wrapper[data-theme^="default"] #input-container {
|
|
301
|
-
border: var(--nuraly-border-width-input, 1px) solid var(--nuraly-color-input-border, #d9d9d9) !important;
|
|
302
|
-
border-radius: var(--nuraly-border-radius-input, 6px) !important;
|
|
303
|
-
background-color: var(--nuraly-color-input-background, #ffffff) !important;
|
|
304
|
-
color: var(--nuraly-color-input-text, rgba(0, 0, 0, 0.88)) !important;
|
|
305
|
-
}
|
|
306
|
-
|
|
307
|
-
/* Carbon input element padding override */
|
|
308
|
-
html[data-theme^="carbon"] nr-input #input-container > input,
|
|
309
|
-
body[data-theme^="carbon"] nr-input #input-container > input,
|
|
310
|
-
[data-theme^="carbon"] nr-input #input-container > input,
|
|
311
|
-
.input-wrapper[data-theme^="carbon"] #input-container > input {
|
|
312
|
-
padding: 7px 16px !important;
|
|
313
|
-
}
|
|
314
|
-
|
|
315
|
-
/* Default input element padding override */
|
|
316
|
-
html[data-theme^="default"] nr-input #input-container > input,
|
|
317
|
-
body[data-theme^="default"] nr-input #input-container > input,
|
|
318
|
-
[data-theme^="default"] nr-input #input-container > input,
|
|
319
|
-
.input-wrapper[data-theme^="default"] #input-container > input {
|
|
320
|
-
padding: var(--nuraly-spacing-input-medium-vertical, 4px) var(--nuraly-spacing-input-medium-horizontal, 11px) !important;
|
|
321
|
-
}
|
|
322
|
-
|
|
323
284
|
/* Focus state for input container */
|
|
324
285
|
#input-container:focus-within {
|
|
325
286
|
border-color: var(--nuraly-color-input-border-focus, #1890ff);
|
|
@@ -327,28 +288,6 @@ import{css as t,html as r,nothing as i,LitElement as n}from"lit";import{property
|
|
|
327
288
|
outline: none;
|
|
328
289
|
}
|
|
329
290
|
|
|
330
|
-
/* Carbon focus override */
|
|
331
|
-
html[data-theme^="carbon"] nr-input #input-container:focus-within,
|
|
332
|
-
body[data-theme^="carbon"] nr-input #input-container:focus-within,
|
|
333
|
-
[data-theme^="carbon"] nr-input #input-container:focus-within,
|
|
334
|
-
.input-wrapper[data-theme^="carbon"] #input-container:focus-within {
|
|
335
|
-
border: var(--nuraly-border-width-input, 2px) solid var(--nuraly-color-input-border-focus, #0f62fe) !important;
|
|
336
|
-
border-radius: var(--nuraly-border-radius-input, 0) !important;
|
|
337
|
-
box-shadow: var(--nuraly-shadow-input-focus, none) !important;
|
|
338
|
-
outline: none !important;
|
|
339
|
-
}
|
|
340
|
-
|
|
341
|
-
/* Default focus override */
|
|
342
|
-
html[data-theme^="default"] nr-input #input-container:focus-within,
|
|
343
|
-
body[data-theme^="default"] nr-input #input-container:focus-within,
|
|
344
|
-
[data-theme^="default"] nr-input #input-container:focus-within,
|
|
345
|
-
.input-wrapper[data-theme^="default"] #input-container:focus-within {
|
|
346
|
-
border-color: var(--nuraly-color-input-border-focus, #1890ff) !important;
|
|
347
|
-
border-radius: var(--nuraly-border-radius-input, 6px) !important;
|
|
348
|
-
box-shadow: var(--nuraly-shadow-input-focus, 0 0 0 2px rgba(24, 144, 255, 0.2)) !important;
|
|
349
|
-
outline: none !important;
|
|
350
|
-
}
|
|
351
|
-
|
|
352
291
|
/*
|
|
353
292
|
* Disabled container styles
|
|
354
293
|
* Applied when input is disabled
|
|
@@ -369,9 +308,9 @@ import{css as t,html as r,nothing as i,LitElement as n}from"lit";import{property
|
|
|
369
308
|
* Default: light border, focus: blue border
|
|
370
309
|
*/
|
|
371
310
|
:host([variant='outlined']) #input-container {
|
|
372
|
-
border: var(--nuraly-input-outlined-border, var(--nuraly-outlined-border));
|
|
373
|
-
border-radius: var(--nuraly-input-outlined-border-radius, var(--nuraly-outlined-border-radius));
|
|
374
|
-
background-color: var(--nuraly-input-outlined-background, var(--nuraly-outlined-background));
|
|
311
|
+
border: var(--nuraly-input-outlined-border, var(--nuraly-outlined-border, 1px solid #d1d5db));
|
|
312
|
+
border-radius: var(--nuraly-input-outlined-border-radius, var(--nuraly-outlined-border-radius, var(--nuraly-border-radius-input, 6px)));
|
|
313
|
+
background-color: var(--nuraly-input-outlined-background, var(--nuraly-outlined-background, transparent));
|
|
375
314
|
}
|
|
376
315
|
|
|
377
316
|
:host([variant='outlined']) .input-wrapper {
|
|
@@ -379,7 +318,8 @@ import{css as t,html as r,nothing as i,LitElement as n}from"lit";import{property
|
|
|
379
318
|
}
|
|
380
319
|
|
|
381
320
|
:host([variant='outlined']:not([state='error'])) #input-container:focus-within {
|
|
382
|
-
border: var(--nuraly-input-
|
|
321
|
+
border-color: var(--nuraly-color-input-border-focus, #3b82f6);
|
|
322
|
+
box-shadow: var(--nuraly-shadow-input-focus, 0 0 0 1px #3b82f6);
|
|
383
323
|
}
|
|
384
324
|
|
|
385
325
|
/*
|
|
@@ -388,7 +328,7 @@ import{css as t,html as r,nothing as i,LitElement as n}from"lit";import{property
|
|
|
388
328
|
*/
|
|
389
329
|
:host([variant='filled']) #input-container {
|
|
390
330
|
background-color: var(--nuraly-input-filled-background, var(--nuraly-filled-background));
|
|
391
|
-
border-radius: var(--nuraly-input-filled-border-radius, var(--nuraly-filled-border-radius));
|
|
331
|
+
border-radius: var(--nuraly-input-filled-border-radius, var(--nuraly-filled-border-radius, var(--nuraly-border-radius-input, 6px)));
|
|
392
332
|
border-bottom: var(--nuraly-input-filled-border-bottom, var(--nuraly-filled-border-bottom));
|
|
393
333
|
border-top: none;
|
|
394
334
|
border-left: none;
|
|
@@ -434,7 +374,7 @@ import{css as t,html as r,nothing as i,LitElement as n}from"lit";import{property
|
|
|
434
374
|
border-top: none;
|
|
435
375
|
border-left: none;
|
|
436
376
|
border-right: none;
|
|
437
|
-
border-radius: 0;
|
|
377
|
+
border-radius: var(--nuraly-input-underlined-border-radius, 0);
|
|
438
378
|
}
|
|
439
379
|
|
|
440
380
|
:host([variant='underlined']:not([state='error'])) #input-container:focus-within {
|
|
@@ -654,13 +594,6 @@ import{css as t,html as r,nothing as i,LitElement as n}from"lit";import{property
|
|
|
654
594
|
padding-right: var(--nuraly-input-small-padding-right, var(--nuraly-small-padding-right));
|
|
655
595
|
}
|
|
656
596
|
|
|
657
|
-
/* Carbon Design System - Size-specific padding overrides */
|
|
658
|
-
html[data-theme^="carbon"] nr-input div[data-size='medium'],
|
|
659
|
-
body[data-theme^="carbon"] nr-input div[data-size='medium'],
|
|
660
|
-
[data-theme^="carbon"] div[data-size='medium'] {
|
|
661
|
-
padding: 4px 8px !important;
|
|
662
|
-
}
|
|
663
|
-
|
|
664
597
|
/*
|
|
665
598
|
* Character count display
|
|
666
599
|
* Shows character count and limit information
|
|
@@ -819,43 +752,43 @@ import{css as t,html as r,nothing as i,LitElement as n}from"lit";import{property
|
|
|
819
752
|
}
|
|
820
753
|
}
|
|
821
754
|
*/
|
|
822
|
-
`],d={EMAIL:/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,URL:/^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/,PHONE:/^[\+]?[1-9][\d]{0,15}$/,PASSWORD_STRONG:/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/,ALPHANUMERIC:/^[a-zA-Z0-9]+$/,NUMERIC:/^\d+$/,ALPHA:/^[a-zA-Z]+$/,USERNAME:/^[a-zA-Z0-9_-]{3,16}$/,HEX_COLOR:/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,IPV4:/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,CREDIT_CARD:/^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|3[47][0-9]{13}|3[0-9]{13}|6(?:011|5[0-9]{2})[0-9]{12})$/},u=t=>({required:!0,message:t||"This field is required"}),c=t=>({type:"email",pattern:d.EMAIL,message:t||"Please enter a valid email address"}),
|
|
755
|
+
`],d={EMAIL:/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,URL:/^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/,PHONE:/^[\+]?[1-9][\d]{0,15}$/,PASSWORD_STRONG:/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/,ALPHANUMERIC:/^[a-zA-Z0-9]+$/,NUMERIC:/^\d+$/,ALPHA:/^[a-zA-Z]+$/,USERNAME:/^[a-zA-Z0-9_-]{3,16}$/,HEX_COLOR:/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,IPV4:/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,CREDIT_CARD:/^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|3[47][0-9]{13}|3[0-9]{13}|6(?:011|5[0-9]{2})[0-9]{12})$/},u=t=>({required:!0,message:t||"This field is required"}),c=t=>({type:"email",pattern:d.EMAIL,message:t||"Please enter a valid email address"}),h=t=>({type:"url",pattern:d.URL,message:t||"Please enter a valid URL"}),p=(t,i)=>({maxLength:t,message:i||`Maximum length is ${t} characters`}),v=(t,i)=>({type:"number",min:t,message:i||`Minimum value is ${t}`}),g=(t,i)=>({type:"number",max:t,message:i||`Maximum value is ${t}`});
|
|
823
756
|
/**
|
|
824
757
|
* @license
|
|
825
758
|
* Copyright 2023 Google Laabidi Aymen
|
|
826
759
|
* SPDX-License-Identifier: MIT
|
|
827
760
|
*/
|
|
828
|
-
class
|
|
761
|
+
class y{static validateNumericProperties(t,i,r,n){"number"===t&&(i&&isNaN(Number(i))&&console.warn(`Invalid min value: "${i}" is not a valid number`),r&&isNaN(Number(r))&&console.warn(`Invalid max value: "${r}" is not a valid number`),n&&isNaN(Number(n))&&console.warn(`Invalid step value: "${n}" is not a valid number`),i&&r&&Number(i)>=Number(r)&&console.warn(`Invalid range: min value (${i}) should be less than max value (${r})`))}static preventNonNumericInput(t,i){const r=t.key,n=t.target,e=n.value,a=n.selectionStart||0;if(!(t.ctrlKey||t.metaKey||["Backspace","Delete","Tab","Escape","Enter","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(r)||/^\d$/.test(r))){if("."===r||","===r){if(!(e.includes(".")||e.includes(",")))return}if("-"===r){const t=e.includes("-"),r=!i||Number(i)<0;if(!t&&0===a&&r)return}if("+"===r){if(!e.includes("+")&&0===a)return}t.preventDefault()}}static validateNumericValue(t,i,r){const n=[];if(!t)return{isValid:!0,warnings:n};const e=Number(t);return isNaN(e)?{isValid:!1,warnings:[`Invalid numeric value: "${t}"`]}:(i&&e<Number(i)&&n.push(`Value ${e} is below minimum ${i}`),r&&e>Number(r)&&n.push(`Value ${e} is above maximum ${r}`),{isValid:!0,warnings:n})}}
|
|
829
762
|
/**
|
|
830
763
|
* @license
|
|
831
764
|
* Copyright 2023 Google Laabidi Aymen
|
|
832
765
|
* SPDX-License-Identifier: MIT
|
|
833
|
-
*/class
|
|
766
|
+
*/class b{static renderPrefix(){return i`
|
|
834
767
|
<div class="input-prefix">
|
|
835
768
|
<slot name="prefix"></slot>
|
|
836
769
|
</div>
|
|
837
|
-
`}static renderSuffix(){return
|
|
770
|
+
`}static renderSuffix(){return i`
|
|
838
771
|
<div class="input-suffix">
|
|
839
772
|
<slot name="suffix"></slot>
|
|
840
773
|
</div>
|
|
841
|
-
`}static renderAddonBefore(t,n){return t?
|
|
774
|
+
`}static renderAddonBefore(t,n){return t?i`
|
|
842
775
|
<div class="input-addon-before">
|
|
843
776
|
<slot name="addon-before" @slotchange=${n}></slot>
|
|
844
777
|
</div>
|
|
845
|
-
`:
|
|
778
|
+
`:r}static renderAddonAfter(t,n){return t?i`
|
|
846
779
|
<div class="input-addon-after">
|
|
847
780
|
<slot name="addon-after" @slotchange=${n}></slot>
|
|
848
781
|
</div>
|
|
849
|
-
`:
|
|
782
|
+
`:r}static renderCopyIcon(t,n,e,a,o){return t?i`<nr-icon
|
|
850
783
|
name="copy"
|
|
851
784
|
type="regular"
|
|
852
785
|
id="copy-icon"
|
|
853
786
|
role="button"
|
|
854
787
|
aria-label="Copy input value"
|
|
855
788
|
tabindex="0"
|
|
856
|
-
@click=${n||
|
|
789
|
+
@click=${n||e?r:a}
|
|
857
790
|
@keydown=${o}
|
|
858
|
-
></nr-icon>`:
|
|
791
|
+
></nr-icon>`:r}static renderClearIcon(t,n,e,a,o,s){return!t||!n||e||a?r:i`<nr-icon
|
|
859
792
|
name="times-circle"
|
|
860
793
|
type="regular"
|
|
861
794
|
id="clear-icon"
|
|
@@ -864,33 +797,33 @@ class b{static validateNumericProperties(t,r,i,n){"number"===t&&(r&&isNaN(Number
|
|
|
864
797
|
tabindex="0"
|
|
865
798
|
@click=${o}
|
|
866
799
|
@keydown=${s}
|
|
867
|
-
></nr-icon>`}static renderStateIcon(t){switch(t){case"warning":return
|
|
800
|
+
></nr-icon>`}static renderStateIcon(t){switch(t){case"warning":return i`<nr-icon name="warning" id="warning-icon"></nr-icon>`;case"error":return i`<nr-icon name="exclamation-circle" id="error-icon"></nr-icon>`;default:return r}}static renderCalendarIcon(t,n){return"default"!==t||"calendar"!==n?r:i`<nr-icon name="calendar" type="regular" id="calendar-icon"></nr-icon>`}static renderPasswordIcon(t,n,e,a,o,s){return"password"!==t?r:"text"===n?i`<nr-icon
|
|
868
801
|
name="eye-slash"
|
|
869
802
|
type="regular"
|
|
870
803
|
id="password-icon"
|
|
871
804
|
role="button"
|
|
872
805
|
aria-label="Hide password"
|
|
873
806
|
tabindex="0"
|
|
874
|
-
@click=${a
|
|
807
|
+
@click=${e||a?r:o}
|
|
875
808
|
@keydown=${s}
|
|
876
|
-
></nr-icon>`:
|
|
809
|
+
></nr-icon>`:i`<nr-icon
|
|
877
810
|
name="eye"
|
|
878
811
|
type="regular"
|
|
879
812
|
id="password-icon"
|
|
880
813
|
role="button"
|
|
881
814
|
aria-label="Show password"
|
|
882
815
|
tabindex="0"
|
|
883
|
-
@click=${a
|
|
816
|
+
@click=${e||a?r:o}
|
|
884
817
|
@keydown=${s}
|
|
885
|
-
></nr-icon>`}static renderNumberIcons(t,n,a,
|
|
818
|
+
></nr-icon>`}static renderNumberIcons(t,n,e,a,o,s,l){return"number"!==t?r:i`
|
|
886
819
|
<div id="number-icons">
|
|
887
|
-
${"default"!==n?
|
|
820
|
+
${"default"!==n?i`<span id="icons-separator">|</span>`:r}
|
|
888
821
|
<nr-icon
|
|
889
822
|
name="minus"
|
|
890
823
|
aria-label="Decrease value"
|
|
891
824
|
role="button"
|
|
892
825
|
tabindex="0"
|
|
893
|
-
@click=${a
|
|
826
|
+
@click=${e||a?r:s}
|
|
894
827
|
@keydown=${l}
|
|
895
828
|
></nr-icon>
|
|
896
829
|
<span id="icons-separator">|</span>
|
|
@@ -899,7 +832,7 @@ class b{static validateNumericProperties(t,r,i,n){"number"===t&&(r&&isNaN(Number
|
|
|
899
832
|
aria-label="Increase value"
|
|
900
833
|
role="button"
|
|
901
834
|
tabindex="0"
|
|
902
|
-
@click=${a
|
|
835
|
+
@click=${e||a?r:o}
|
|
903
836
|
@keydown=${l}
|
|
904
837
|
></nr-icon>
|
|
905
838
|
</div>
|
|
@@ -908,7 +841,7 @@ class b{static validateNumericProperties(t,r,i,n){"number"===t&&(r&&isNaN(Number
|
|
|
908
841
|
* @license
|
|
909
842
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
910
843
|
* SPDX-License-Identifier: MIT
|
|
911
|
-
*/const
|
|
844
|
+
*/const m=t=>class extends t{get inputElement(){var t;const i=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector("#input, input, textarea");if(i)return i;const r=this.querySelector("input, textarea");if(!r)throw new Error("SelectionMixin requires an input or textarea element");return r}selectAll(){const t=this.inputElement;t&&t.select()}selectRange(t,i){const r=this.inputElement;r&&r.setSelectionRange&&(r.focus(),r.setSelectionRange(t,i))}getCursorPosition(){const t=this.inputElement;return t&&"number"==typeof t.selectionStart?t.selectionStart:null}setCursorPosition(t){const i=this.inputElement;i&&i.setSelectionRange&&(i.focus(),i.setSelectionRange(t,t))}getSelectedText(){const t=this.inputElement;return t&&null!==t.selectionStart&&null!==t.selectionEnd?t.value.substring(t.selectionStart,t.selectionEnd):""}},f=t=>class extends t{get inputElement(){var t;const i=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector("#input, input, textarea");if(i)return i;const r=this.querySelector("input, textarea");if(!r)throw new Error("FocusMixin requires an input or textarea element");return r}focus(t={}){const i=this.inputElement;i&&(i.focus({preventScroll:t.preventScroll}),t.selectText&&i.select())}blur(){const t=this.inputElement;t&&t.blur()}isFocused(){const t=this.inputElement;return!!t&&document.activeElement===t}},w=t=>class extends t{get inputElement(){var t;const i=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector("#input, input");if(i)return i;const r=this.querySelector("input");if(!r)throw new Error("NumberMixin requires an input element");return r}dispatchInputEvent(t,i){"_dispatchInputEvent"in this&&"function"==typeof this._dispatchInputEvent?this._dispatchInputEvent(t,i):this.dispatchEvent(new CustomEvent(t,{detail:i,bubbles:!0,composed:!0}))}increment(){try{const t=this.inputElement;if(!t.value){const i=t.getAttribute("min");t.value=i||"0"}t.stepUp();const i=t.value;this.dispatchInputEvent("nr-input",{value:i,target:t,action:"increment"}),"value"in this&&(this.value=i)}catch(t){console.warn("Failed to increment value:",t),this.dispatchInputEvent("nr-increment-error",{error:t,value:this.inputElement.value,target:this.inputElement})}}decrement(){try{const t=this.inputElement;t.stepDown();const i=t.value;this.dispatchInputEvent("nr-input",{value:i,target:t,action:"decrement"}),"value"in this&&(this.value=i)}catch(t){console.warn("Failed to decrement value:",t),this.dispatchInputEvent("nr-decrement-error",{error:t,value:this.inputElement.value,target:this.inputElement})}}setStep(t){const i=this.inputElement;t&&this.isValidStep(t)?i.setAttribute("step",t):i.removeAttribute("step")}isValidStep(t){if(!t)return!0;const i=parseFloat(t);return!isNaN(i)&&i>0}};
|
|
912
845
|
/**
|
|
913
846
|
* @license
|
|
914
847
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
@@ -919,23 +852,23 @@ class b{static validateNumericProperties(t,r,i,n){"number"===t&&(r&&isNaN(Number
|
|
|
919
852
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
920
853
|
* SPDX-License-Identifier: MIT
|
|
921
854
|
*/
|
|
922
|
-
class x{constructor(t){this._host=t,this._host.addController(this)}get host(){return this._host}hostConnected(){}hostDisconnected(){}hostUpdate(){}hostUpdated(){}requestUpdate(){this._host.requestUpdate()}dispatchEvent(t){return this._host.dispatchEvent(t)}handleError(t,
|
|
855
|
+
class x{constructor(t){this._host=t,this._host.addController(this)}get host(){return this._host}hostConnected(){}hostDisconnected(){}hostUpdate(){}hostUpdated(){}requestUpdate(){this._host.requestUpdate()}dispatchEvent(t){return this._host.dispatchEvent(t)}handleError(t,i){console.error(`[InputController:${i}]`,t),this.dispatchEvent(new CustomEvent("nr-controller-error",{detail:{error:t,context:i,controller:this.constructor.name},bubbles:!0,composed:!0}))}}
|
|
923
856
|
/**
|
|
924
857
|
* @license
|
|
925
858
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
926
859
|
* SPDX-License-Identifier: MIT
|
|
927
|
-
*/var k;!function(t){t.Pristine="pristine",t.Pending="pending",t.Valid="valid",t.Invalid="invalid",t.Warning="warning"}(k||(k={}));class
|
|
860
|
+
*/var k;!function(t){t.Pristine="pristine",t.Pending="pending",t.Valid="valid",t.Invalid="invalid",t.Warning="warning"}(k||(k={}));class V extends x{constructor(){super(...arguments),this._validationState=k.Pristine,this._isValidating=!1,this._isValid=!0,this._validationMessage="",this._validationResult={isValid:!0,errors:[],warnings:[],hasError:!1,hasWarning:!1},this._debounceTimer=null}get stateHost(){return this.host}get validationState(){return this._validationState}get isValidating(){return this._isValidating}get isValid(){return this._isValid}get validationMessage(){return this._validationMessage}get validationResult(){return this._validationResult}setValidationState(t){if(this._validationState!==t){const i=this._validationState;this._validationState=t,this.dispatchStateChangeEvent(i,t),this.requestUpdate()}}setValidationResult(t){this._validationResult=t,this._isValid=t.isValid,this._validationMessage=t.hasError?t.errorMessage||"":t.hasWarning&&t.warningMessage||"";let i=k.Valid;t.hasError?i=k.Invalid:t.hasWarning&&this.stateHost.allowWarnings&&(i=k.Warning),this.setValidationState(i)}setValidating(t){this._isValidating!==t&&(this._isValidating=t,t&&this.setValidationState(k.Pending),this.requestUpdate())}shouldValidateOnChange(){return this.stateHost.validateOnChangeInput&&("change"===this.stateHost.validationTrigger||this._validationState!==k.Pristine)}shouldValidateOnBlur(){return this.stateHost.validateOnBlurInput&&("blur"===this.stateHost.validationTrigger||"change"===this.stateHost.validationTrigger)}clearDebounceTimer(){null!==this._debounceTimer&&(clearTimeout(this._debounceTimer),this._debounceTimer=null)}debounceValidation(t){this.clearDebounceTimer();const i=this.stateHost.validationDebounce;i&&i>0?this._debounceTimer=window.setTimeout(()=>{this._debounceTimer=null,t()},i):t()}resetValidationState(){this.clearDebounceTimer(),this._validationState=k.Pristine,this._isValidating=!1,this._isValid=!0,this._validationMessage="",this._validationResult={isValid:!0,errors:[],warnings:[],hasError:!1,hasWarning:!1},this.requestUpdate()}markAsTouched(){this._validationState===k.Pristine&&this.setValidationState(k.Valid)}isPristine(){return this._validationState===k.Pristine}hasError(){return this._validationState===k.Invalid}hasWarning(){return this._validationState===k.Warning}isPending(){return this._validationState===k.Pending}getStateSummary(){return{state:this._validationState,isValidating:this._isValidating,isValid:this._isValid,message:this._validationMessage,result:this._validationResult,isPristine:this.isPristine(),hasError:this.hasError(),hasWarning:this.hasWarning(),shouldValidateOnChange:this.shouldValidateOnChange(),shouldValidateOnBlur:this.shouldValidateOnBlur()}}hostDisconnected(){super.hostDisconnected(),this.clearDebounceTimer()}dispatchStateChangeEvent(t,i){this.dispatchEvent(new CustomEvent("nr-validation-state-change",{detail:{previousState:t,newState:i,isValidating:this._isValidating,isValid:this._isValid,validationResult:this._validationResult},bubbles:!0,composed:!0}))}}
|
|
928
861
|
/**
|
|
929
862
|
* @license
|
|
930
863
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
931
864
|
* SPDX-License-Identifier: MIT
|
|
932
|
-
*/var V=function(t,r,i,n){return new(i||(i=Promise))((function(a,e){function o(t){try{l(n.next(t))}catch(t){e(t)}}function s(t){try{l(n.throw(t))}catch(t){e(t)}}function l(t){var r;t.done?a(t.value):(r=t.value,r instanceof i?r:new i((function(t){t(r)}))).then(o,s)}l((n=n.apply(t,r||[])).next())}))};class $ extends x{constructor(t){super(t),this.stateController=new S(this._host)}get validationHost(){return this._host}get isValid(){return this.stateController.isValid}get validationMessage(){return this.stateController.validationMessage}get validationState(){return this.stateController.validationState}get validationResult(){return this.stateController.validationResult}get isValidating(){return this.stateController.isValidating}hostConnected(){this.setupValidationRules()}hostUpdated(){}setupValidationRules(){const t=[],r=this.validationHost;"email"===r.type&&t.push(c()),"url"===r.type&&t.push(p()),r.required&&t.push(u(r.label?`${r.label} is required`:void 0)),r.maxLength&&t.push(h(r.maxLength)),"number"===r.type&&(void 0!==r.min&&t.push(v(Number(r.min))),void 0!==r.max&&t.push(m(Number(r.max))));const i=r.rules||[],n=[...t.filter((t=>!i.some((r=>this.isSameRuleType(t,r))))),...i];JSON.stringify(r.rules)!==JSON.stringify(n)&&(r.rules=n,this.requestUpdate())}validate(){try{this.stateController.setValidationState(k.Pending),this.stateController.setValidating(!0),this.dispatchValidationEvent();if(this.hasAsyncValidators())return this.performAsyncValidation(this.validationHost.value),!0;const t=this.performDetailedValidation(this.validationHost.value);return this.stateController.setValidationResult(t),t.hasError?this.setValidationResult(!1,this.stateController.validationMessage,k.Invalid):t.hasWarning&&this.validationHost.allowWarnings?this.setValidationResult(!0,this.stateController.validationMessage,k.Warning):this.setValidationResult(!0,"",k.Valid),this.stateController.setValidating(!1),this.updateHostValidationState(),t.isValid}catch(t){return this.handleError(t,"validate"),this.stateController.setValidating(!1),this.setValidationResult(!1,"Validation error occurred",k.Invalid),this.updateHostValidationState(),!1}}validateOnChange(){this.stateController.shouldValidateOnChange()&&this.stateController.debounceValidation((()=>{this.validate()}))}validateOnBlur(){this.stateController.shouldValidateOnBlur()&&(this.stateController.clearDebounceTimer(),this.validate())}addRule(t){const r=this.validationHost.rules||[];this.validationHost.rules=[...r,t],this.requestUpdate()}removeRule(t){const r=this.validationHost.rules||[];this.validationHost.rules=r.filter((r=>!t(r))),this.requestUpdate()}clearRules(){this.validationHost.rules=[],this.reset()}hasAsyncValidators(){return(this.validationHost.rules||[]).some((t=>t.asyncValidator||t.validator&&this.isValidatorAsync(t.validator)))}isValidatorAsync(t){const r=t.toString();return r.includes("Promise")||r.includes("async")||r.includes("setTimeout")||r.includes("new Promise")}performAsyncValidation(t){return V(this,void 0,void 0,(function*(){try{this.stateController.setValidating(!0),this.updateHostValidationState();const r=[],i=[],n=this.validationHost.rules||[];for(const a of n)if(!(a.asyncValidator||a.validator&&this.isValidatorAsync(a.validator))){const n=this.validateRule(a,t);n.isValid||(a.warningOnly&&this.validationHost.allowWarnings?i.push(n.message):r.push(n.message))}if(r.length>0)return this.stateController.setValidationResult({isValid:!1,errors:r,warnings:i,hasError:!0,hasWarning:i.length>0,errorMessage:r[0],warningMessage:i[0]}),this.setValidationResult(!1,this.stateController.validationMessage,k.Invalid),this.stateController.setValidating(!1),void this.updateHostValidationState();for(const a of n)if(a.asyncValidator||a.validator&&this.isValidatorAsync(a.validator))try{yield this.validateAsyncRule(a,t)}catch(t){const n=t.message||a.message||"Validation failed";a.warningOnly&&this.validationHost.allowWarnings?i.push(n):r.push(n)}const a=r.length>0,e=i.length>0;this.stateController.setValidationResult({isValid:!a,errors:r,warnings:i,hasError:a,hasWarning:e,errorMessage:r[0],warningMessage:i[0]}),a?this.setValidationResult(!1,this.stateController.validationMessage,k.Invalid):e&&this.validationHost.allowWarnings?this.setValidationResult(!0,this.stateController.validationMessage,k.Warning):this.setValidationResult(!0,"",k.Valid),this.stateController.setValidating(!1),this.updateHostValidationState()}catch(t){this.handleError(t,"performAsyncValidation"),this.stateController.setValidating(!1),this.setValidationResult(!1,"Async validation error occurred",k.Invalid),this.updateHostValidationState()}}))}validateAsyncRule(t,r){return V(this,void 0,void 0,(function*(){if(t.asyncValidator)yield t.asyncValidator(t,r);else if(t.validator){const i=t.validator(t,r);i&&"object"==typeof i&&"then"in i&&(yield i)}}))}reset(){this.stateController.setValidationResult({isValid:!0,errors:[],warnings:[],hasError:!1,hasWarning:!1}),this.stateController.setValidationState(k.Pristine),this.stateController.setValidating(!1),this.updateHostValidationState(),this.dispatchValidationEvent()}getValidationStatus(){return{isValid:this.stateController.validationResult.isValid,isValidating:this.stateController.isValidating,errors:this.stateController.validationResult.errors,warnings:this.stateController.validationResult.warnings,validationResult:this.stateController.validationResult}}setValidationStatus(t){this.stateController.setValidationResult(t),t.hasError?this.setValidationResult(!1,this.stateController.validationMessage,k.Invalid):t.hasWarning?this.setValidationResult(!0,this.stateController.validationMessage,k.Warning):t.isValid?this.setValidationResult(!0,"",k.Valid):this.setValidationResult(!0,"",k.Pristine),this.updateHostValidationState()}performDetailedValidation(t){const r=[],i=[],n=this.validationHost.rules||[];for(const a of n){const n=this.validateRule(a,t);n.isValid||(a.warningOnly&&this.validationHost.allowWarnings?i.push(n.message):r.push(n.message))}const a=r.length>0;return{isValid:!a,errors:r,warnings:i,hasError:a,hasWarning:i.length>0,errorMessage:r[0],warningMessage:i[0]}}validateRule(t,r){if(t.asyncValidator||t.validator&&this.isValidatorAsync(t.validator))return{isValid:!0,message:""};const i=t.transform?t.transform(r):r;if(t.required&&this.isValueEmpty(r))return{isValid:!1,message:t.message||`${this.validationHost.label||"This field"} is required`};if(this.isValueEmpty(r)&&!t.required)return{isValid:!0,message:""};if(t.type){const r=this.validateType(t.type,i);if(!r.isValid)return{isValid:!1,message:t.message||r.message}}if(t.pattern&&!t.pattern.test(i))return{isValid:!1,message:t.message||"Invalid format"};if(void 0!==t.minLength&&i.length<t.minLength)return{isValid:!1,message:t.message||`Minimum length is ${t.minLength} characters`};if(void 0!==t.maxLength&&i.length>t.maxLength)return{isValid:!1,message:t.message||`Maximum length is ${t.maxLength} characters`};if("number"===t.type||"number"===this.validationHost.type){const r=Number(i);if(void 0!==t.min&&r<t.min)return{isValid:!1,message:t.message||`Minimum value is ${t.min}`};if(void 0!==t.max&&r>t.max)return{isValid:!1,message:t.message||`Maximum value is ${t.max}`}}if(t.enum&&!t.enum.includes(i))return{isValid:!1,message:t.message||`Value must be one of: ${t.enum.join(", ")}`};if(t.validator)try{const r=t.validator(t,i);return r&&"object"==typeof r&&"isValid"in r?{isValid:r.isValid,message:r.isValid?"":r.message||t.message||"Validation failed"}:{isValid:!0,message:""}}catch(r){return{isValid:!1,message:t.message||r.message||"Validation failed"}}return{isValid:!0,message:""}}validateType(t,r){switch(t){case"email":return{isValid:d.EMAIL.test(r),message:"Please enter a valid email address"};case"url":return{isValid:d.URL.test(r),message:"Please enter a valid URL"};case"number":case"integer":return{isValid:!isNaN(Number(r))&&("number"===t||Number.isInteger(Number(r))),message:`Please enter a valid ${t}`};case"float":return{isValid:!isNaN(parseFloat(r)),message:"Please enter a valid number"};default:return{isValid:!0,message:""}}}isValueEmpty(t){return null==t||""===t}isSameRuleType(t,r){return t.type===r.type&&t.required===r.required&&!!t.pattern==!!r.pattern}setValidationResult(t,r,i){const n=this.stateController.isValid!==t||this.stateController.validationMessage!==r||this.stateController.validationState!==i;this.stateController.setValidationState(i),this.stateController.setValidationResult({isValid:t,errors:t?[]:[r],warnings:[],hasError:!t,hasWarning:!1,errorMessage:t?"":r,warningMessage:""}),n&&this.dispatchValidationEvent()}updateHostValidationState(){this.dispatchValidationEvent()}dispatchValidationEvent(){const t={isValid:this.stateController.isValid,validationMessage:this.stateController.validationMessage,validationState:this.stateController.validationState,errors:this.stateController.validationResult.errors,warnings:this.stateController.validationResult.warnings,validationResult:this.stateController.validationResult};this.dispatchEvent(new CustomEvent("nr-validation",{detail:t,bubbles:!0,composed:!0}))}getValidationClasses(){const t=this.host,r=this.host;return{valid:this.stateController.validationResult.isValid&&!this.stateController.validationResult.hasWarning,invalid:this.stateController.validationResult.hasError,warning:this.stateController.validationResult.hasWarning&&!this.stateController.validationResult.hasError,validating:this.stateController.isValidating,"has-feedback":r.hasFeedback||!1,touched:t.isTouched||!1,dirty:t.isDirty||!1,required:this.host.required||!1}}hasValidationFeedback(){const t=this.host;return!!t.hasFeedback&&(this.stateController.isValidating||this.stateController.validationResult.hasError||this.stateController.validationResult.hasWarning||this.stateController.validationResult.isValid&&t.value&&""!==t.value.trim()&&this.stateController.validationState!==k.Pristine)}renderValidationIcon(){const t=this.host;if(!t.hasFeedback)return"";let i="",n="";return this.stateController.isValidating?(i="hourglass-half",n="validation-loading"):this.stateController.validationResult.hasError?(i="exclamation-circle",n="validation-error"):this.stateController.validationResult.hasWarning?(i="exclamation-triangle",n="validation-warning"):this.stateController.validationResult.isValid&&t.value&&""!==t.value.trim()&&this.stateController.validationState!==k.Pristine&&(i="check-circle",n="validation-success"),i?r`
|
|
865
|
+
*/var S=function(t,i,r,n){return new(r||(r=Promise))(function(e,a){function o(t){try{l(n.next(t))}catch(t){a(t)}}function s(t){try{l(n.throw(t))}catch(t){a(t)}}function l(t){var i;t.done?e(t.value):(i=t.value,i instanceof r?i:new r(function(t){t(i)})).then(o,s)}l((n=n.apply(t,i||[])).next())})};class $ extends x{constructor(t){super(t),this.stateController=new V(this._host)}get validationHost(){return this._host}get isValid(){return this.stateController.isValid}get validationMessage(){return this.stateController.validationMessage}get validationState(){return this.stateController.validationState}get validationResult(){return this.stateController.validationResult}get isValidating(){return this.stateController.isValidating}hostConnected(){this.setupValidationRules()}hostUpdated(){}setupValidationRules(){const t=[],i=this.validationHost;"email"===i.type&&t.push(c()),"url"===i.type&&t.push(h()),i.required&&t.push(u(i.label?`${i.label} is required`:void 0)),i.maxLength&&t.push(p(i.maxLength)),"number"===i.type&&(void 0!==i.min&&t.push(v(Number(i.min))),void 0!==i.max&&t.push(g(Number(i.max))));const r=i.rules||[],n=[...t.filter(t=>!r.some(i=>this.isSameRuleType(t,i))),...r];JSON.stringify(i.rules)!==JSON.stringify(n)&&(i.rules=n,this.requestUpdate())}validate(){try{this.stateController.setValidationState(k.Pending),this.stateController.setValidating(!0),this.dispatchValidationEvent();if(this.hasAsyncValidators())return this.performAsyncValidation(this.validationHost.value),!0;const t=this.performDetailedValidation(this.validationHost.value);return this.stateController.setValidationResult(t),t.hasError?this.setValidationResult(!1,this.stateController.validationMessage,k.Invalid):t.hasWarning&&this.validationHost.allowWarnings?this.setValidationResult(!0,this.stateController.validationMessage,k.Warning):this.setValidationResult(!0,"",k.Valid),this.stateController.setValidating(!1),this.updateHostValidationState(),t.isValid}catch(t){return this.handleError(t,"validate"),this.stateController.setValidating(!1),this.setValidationResult(!1,"Validation error occurred",k.Invalid),this.updateHostValidationState(),!1}}validateOnChange(){this.stateController.shouldValidateOnChange()&&this.stateController.debounceValidation(()=>{this.validate()})}validateOnBlur(){this.stateController.shouldValidateOnBlur()&&(this.stateController.clearDebounceTimer(),this.validate())}addRule(t){const i=this.validationHost.rules||[];this.validationHost.rules=[...i,t],this.requestUpdate()}removeRule(t){const i=this.validationHost.rules||[];this.validationHost.rules=i.filter(i=>!t(i)),this.requestUpdate()}clearRules(){this.validationHost.rules=[],this.reset()}hasAsyncValidators(){return(this.validationHost.rules||[]).some(t=>t.asyncValidator||t.validator&&this.isValidatorAsync(t.validator))}isValidatorAsync(t){const i=t.toString();return i.includes("Promise")||i.includes("async")||i.includes("setTimeout")||i.includes("new Promise")}performAsyncValidation(t){return S(this,void 0,void 0,function*(){try{this.stateController.setValidating(!0),this.updateHostValidationState();const i=[],r=[],n=this.validationHost.rules||[];for(const e of n)if(!(e.asyncValidator||e.validator&&this.isValidatorAsync(e.validator))){const n=this.validateRule(e,t);n.isValid||(e.warningOnly&&this.validationHost.allowWarnings?r.push(n.message):i.push(n.message))}if(i.length>0)return this.stateController.setValidationResult({isValid:!1,errors:i,warnings:r,hasError:!0,hasWarning:r.length>0,errorMessage:i[0],warningMessage:r[0]}),this.setValidationResult(!1,this.stateController.validationMessage,k.Invalid),this.stateController.setValidating(!1),void this.updateHostValidationState();for(const e of n)if(e.asyncValidator||e.validator&&this.isValidatorAsync(e.validator))try{yield this.validateAsyncRule(e,t)}catch(t){const n=t.message||e.message||"Validation failed";e.warningOnly&&this.validationHost.allowWarnings?r.push(n):i.push(n)}const e=i.length>0,a=r.length>0;this.stateController.setValidationResult({isValid:!e,errors:i,warnings:r,hasError:e,hasWarning:a,errorMessage:i[0],warningMessage:r[0]}),e?this.setValidationResult(!1,this.stateController.validationMessage,k.Invalid):a&&this.validationHost.allowWarnings?this.setValidationResult(!0,this.stateController.validationMessage,k.Warning):this.setValidationResult(!0,"",k.Valid),this.stateController.setValidating(!1),this.updateHostValidationState()}catch(t){this.handleError(t,"performAsyncValidation"),this.stateController.setValidating(!1),this.setValidationResult(!1,"Async validation error occurred",k.Invalid),this.updateHostValidationState()}})}validateAsyncRule(t,i){return S(this,void 0,void 0,function*(){if(t.asyncValidator)yield t.asyncValidator(t,i);else if(t.validator){const r=t.validator(t,i);r&&"object"==typeof r&&"then"in r&&(yield r)}})}reset(){this.stateController.setValidationResult({isValid:!0,errors:[],warnings:[],hasError:!1,hasWarning:!1}),this.stateController.setValidationState(k.Pristine),this.stateController.setValidating(!1),this.updateHostValidationState(),this.dispatchValidationEvent()}getValidationStatus(){return{isValid:this.stateController.validationResult.isValid,isValidating:this.stateController.isValidating,errors:this.stateController.validationResult.errors,warnings:this.stateController.validationResult.warnings,validationResult:this.stateController.validationResult}}setValidationStatus(t){this.stateController.setValidationResult(t),t.hasError?this.setValidationResult(!1,this.stateController.validationMessage,k.Invalid):t.hasWarning?this.setValidationResult(!0,this.stateController.validationMessage,k.Warning):t.isValid?this.setValidationResult(!0,"",k.Valid):this.setValidationResult(!0,"",k.Pristine),this.updateHostValidationState()}performDetailedValidation(t){const i=[],r=[],n=this.validationHost.rules||[];for(const e of n){const n=this.validateRule(e,t);n.isValid||(e.warningOnly&&this.validationHost.allowWarnings?r.push(n.message):i.push(n.message))}const e=i.length>0;return{isValid:!e,errors:i,warnings:r,hasError:e,hasWarning:r.length>0,errorMessage:i[0],warningMessage:r[0]}}validateRule(t,i){if(t.asyncValidator||t.validator&&this.isValidatorAsync(t.validator))return{isValid:!0,message:""};const r=t.transform?t.transform(i):i;if(t.required&&this.isValueEmpty(i))return{isValid:!1,message:t.message||`${this.validationHost.label||"This field"} is required`};if(this.isValueEmpty(i)&&!t.required)return{isValid:!0,message:""};if(t.type){const i=this.validateType(t.type,r);if(!i.isValid)return{isValid:!1,message:t.message||i.message}}if(t.pattern&&!t.pattern.test(r))return{isValid:!1,message:t.message||"Invalid format"};if(void 0!==t.minLength&&r.length<t.minLength)return{isValid:!1,message:t.message||`Minimum length is ${t.minLength} characters`};if(void 0!==t.maxLength&&r.length>t.maxLength)return{isValid:!1,message:t.message||`Maximum length is ${t.maxLength} characters`};if("number"===t.type||"number"===this.validationHost.type){const i=Number(r);if(void 0!==t.min&&i<t.min)return{isValid:!1,message:t.message||`Minimum value is ${t.min}`};if(void 0!==t.max&&i>t.max)return{isValid:!1,message:t.message||`Maximum value is ${t.max}`}}if(t.enum&&!t.enum.includes(r))return{isValid:!1,message:t.message||`Value must be one of: ${t.enum.join(", ")}`};if(t.validator)try{const i=t.validator(t,r);return i&&"object"==typeof i&&"isValid"in i?{isValid:i.isValid,message:i.isValid?"":i.message||t.message||"Validation failed"}:{isValid:!0,message:""}}catch(i){return{isValid:!1,message:t.message||i.message||"Validation failed"}}return{isValid:!0,message:""}}validateType(t,i){switch(t){case"email":return{isValid:d.EMAIL.test(i),message:"Please enter a valid email address"};case"url":return{isValid:d.URL.test(i),message:"Please enter a valid URL"};case"number":case"integer":return{isValid:!isNaN(Number(i))&&("number"===t||Number.isInteger(Number(i))),message:`Please enter a valid ${t}`};case"float":return{isValid:!isNaN(parseFloat(i)),message:"Please enter a valid number"};default:return{isValid:!0,message:""}}}isValueEmpty(t){return null==t||""===t}isSameRuleType(t,i){return t.type===i.type&&t.required===i.required&&!!t.pattern==!!i.pattern}setValidationResult(t,i,r){const n=this.stateController.isValid!==t||this.stateController.validationMessage!==i||this.stateController.validationState!==r;this.stateController.setValidationState(r),this.stateController.setValidationResult({isValid:t,errors:t?[]:[i],warnings:[],hasError:!t,hasWarning:!1,errorMessage:t?"":i,warningMessage:""}),n&&this.dispatchValidationEvent()}updateHostValidationState(){this.dispatchValidationEvent()}dispatchValidationEvent(){const t={isValid:this.stateController.isValid,validationMessage:this.stateController.validationMessage,validationState:this.stateController.validationState,errors:this.stateController.validationResult.errors,warnings:this.stateController.validationResult.warnings,validationResult:this.stateController.validationResult};this.dispatchEvent(new CustomEvent("nr-validation",{detail:t,bubbles:!0,composed:!0}))}getValidationClasses(){const t=this.host,i=this.host;return{valid:this.stateController.validationResult.isValid&&!this.stateController.validationResult.hasWarning,invalid:this.stateController.validationResult.hasError,warning:this.stateController.validationResult.hasWarning&&!this.stateController.validationResult.hasError,validating:this.stateController.isValidating,"has-feedback":i.hasFeedback||!1,touched:t.isTouched||!1,dirty:t.isDirty||!1,required:this.host.required||!1}}hasValidationFeedback(){const t=this.host;return!!t.hasFeedback&&(this.stateController.isValidating||this.stateController.validationResult.hasError||this.stateController.validationResult.hasWarning||this.stateController.validationResult.isValid&&t.value&&""!==t.value.trim()&&this.stateController.validationState!==k.Pristine)}renderValidationIcon(){const t=this.host;if(!t.hasFeedback)return"";let r="",n="";return this.stateController.isValidating?(r="hourglass-half",n="validation-loading"):this.stateController.validationResult.hasError?(r="exclamation-circle",n="validation-error"):this.stateController.validationResult.hasWarning?(r="exclamation-triangle",n="validation-warning"):this.stateController.validationResult.isValid&&t.value&&""!==t.value.trim()&&this.stateController.validationState!==k.Pristine&&(r="check-circle",n="validation-success"),r?i`
|
|
933
866
|
<nr-icon
|
|
934
|
-
name="${
|
|
867
|
+
name="${r}"
|
|
935
868
|
class="validation-icon ${n}"
|
|
936
869
|
part="validation-icon">
|
|
937
870
|
</nr-icon>
|
|
938
|
-
`:""}renderValidationMessage(){const t=this.stateController.validationResult.hasError,
|
|
871
|
+
`:""}renderValidationMessage(){const t=this.stateController.validationResult.hasError,r=this.stateController.validationResult.hasWarning&&!t,n=t?this.stateController.validationResult.errorMessage:r?this.stateController.validationResult.warningMessage:"";return n?i`
|
|
939
872
|
<div class="validation-message ${t?"error":"warning"}"
|
|
940
873
|
part="validation-message"
|
|
941
874
|
role="alert"
|
|
@@ -947,20 +880,20 @@ class x{constructor(t){this._host=t,this._host.addController(this)}get host(){re
|
|
|
947
880
|
* @license
|
|
948
881
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
949
882
|
* SPDX-License-Identifier: MIT
|
|
950
|
-
*/var A=function(t,r,
|
|
883
|
+
*/var A=function(t,i,r,n){return new(r||(r=Promise))(function(e,a){function o(t){try{l(n.next(t))}catch(t){a(t)}}function s(t){try{l(n.throw(t))}catch(t){a(t)}}function l(t){var i;t.done?e(t.value):(i=t.value,i instanceof r?i:new r(function(t){t(i)})).then(o,s)}l((n=n.apply(t,i||[])).next())})};class E extends x{constructor(){super(...arguments),this.debounceTimer=null,this.handleKeyDown=t=>{!this.eventHost.readonly||this.isReadonlyKeyAllowed(t)?"Enter"!==t.key?"number"===this.eventHost.type&&this.handleNumericKeyDown(t):this.dispatchEnterEvent(t):t.preventDefault()},this.handleValueChange=t=>{if(this.eventHost.readonly)return void t.preventDefault();const i=t.target,r=i.value;if(this.eventHost.maxLength&&r.length>this.eventHost.maxLength)return void t.preventDefault();"number"===this.eventHost.type&&r&&this.validateNumericValue(r,t),this.eventHost.value=r;const n=this.eventHost;n.validationController&&"function"==typeof n.validationController.validateOnChange&&n.validationController.validateOnChange();const e=this.eventHost.debounce||0;e>0?(this.clearDebounceTimer(),this.debounceTimer=setTimeout(()=>{this.eventHost.dispatchInputEvent("nr-input",{value:this.eventHost.value,target:i,originalEvent:t})},e)):this.eventHost.dispatchInputEvent("nr-input",{value:this.eventHost.value,target:i,originalEvent:t})},this.handleFocus=t=>{var i;this.setFocusState(!0);const r=t.target;this.restoreCursorPosition(r);const n={focused:!0,cursorPosition:null!==(i=this.getCursorPosition())&&void 0!==i?i:void 0,selectedText:this.getSelectedText()};this.eventHost.dispatchFocusEvent("nr-focus",Object.assign({target:t.target,value:this.eventHost.value},n)),this.eventHost.dispatchFocusEvent("nr-focus-change",n)},this.handleBlur=t=>{var i;this.setFocusState(!1);const r={focused:!1,cursorPosition:null!==(i=this.getCursorPosition())&&void 0!==i?i:void 0,selectedText:this.getSelectedText()},n=this.eventHost;n.validationController&&"function"==typeof n.validationController.validateOnBlur&&n.validationController.validateOnBlur(),this.eventHost.dispatchFocusEvent("nr-blur",Object.assign({target:t.target,value:this.eventHost.value},r)),this.eventHost.dispatchFocusEvent("nr-focus-change",r)},this.handleIconKeydown=t=>{if(!this.isActivationKey(t))return;t.preventDefault();const i=t.target;switch(i.id){case"copy-icon":this.handleCopy();break;case"clear-icon":this.handleClear();break;case"password-icon":this.handleTogglePassword();break;default:i.closest("#number-icons")&&this.handleNumberIconAction(i)}},this.handleCopy=()=>A(this,void 0,void 0,function*(){if(this.eventHost.withCopy&&!this.eventHost.disabled)try{const t=this.inputElement;if(!t)return;t.select(),yield navigator.clipboard.writeText(t.value),this.eventHost.dispatchActionEvent("nr-copy-success",{value:t.value,action:"copy"})}catch(t){this.handleError(t,"copy"),this.eventHost.dispatchActionEvent("nr-copy-error",{error:t,action:"copy"})}}),this.handleClear=()=>{if(this.eventHost.disabled||this.eventHost.readonly||!this.eventHost.allowClear)return;const t=this.eventHost.value;this.eventHost.value="";const i=this.inputElement;i&&(i.value="",i.focus()),this.eventHost.dispatchActionEvent("nr-clear",{previousValue:t,newValue:this.eventHost.value,target:i,action:"clear"}),this.eventHost.dispatchInputEvent("nr-input",{value:this.eventHost.value,target:i,action:"clear"})},this.handleTogglePassword=()=>{if("password"!==this.eventHost.type)return;const t="password"===this.eventHost.inputType?"text":"password";this.eventHost.inputType=t,this.requestUpdate(),this.eventHost.dispatchActionEvent("nr-password-toggle",{visible:"text"===t,action:"password-toggle"})},this.handleIncrement=()=>{"number"===this.eventHost.type&&this.eventHost.increment&&this.eventHost.increment()},this.handleDecrement=()=>{"number"===this.eventHost.type&&this.eventHost.decrement&&this.eventHost.decrement()}}get eventHost(){return this.host}get inputElement(){var t;return(null===(t=this.eventHost.shadowRoot)||void 0===t?void 0:t.querySelector("#input"))||null}clearDebounceTimer(){this.debounceTimer&&(clearTimeout(this.debounceTimer),this.debounceTimer=null)}handleNumericKeyDown(t){["Backspace","Delete","Tab","Escape","Enter","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)||t.ctrlKey||t.metaKey||"."!==t.key&&"-"!==t.key&&(/^\d$/.test(t.key)||t.preventDefault())}handleNumberIconAction(t){const i=t.classList.contains("increment")||t.closest(".increment"),r=t.classList.contains("decrement")||t.closest(".decrement");i?this.handleIncrement():r&&this.handleDecrement()}dispatchEnterEvent(t){this.eventHost.dispatchInputEvent("nr-enter",{value:this.eventHost.value,target:t.target,originalEvent:t})}validateNumericValue(t,i){}restoreCursorPosition(t){if(t.dataset.restoreCursor){const i=parseInt(t.dataset.restoreCursor,10);isNaN(i)||t.setSelectionRange(i,i),delete t.dataset.restoreCursor}}setFocusState(t){this.eventHost.hasOwnProperty("focused")&&(this.eventHost.focused=t,this.requestUpdate())}getCursorPosition(){if(this.eventHost.getCursorPosition)return this.eventHost.getCursorPosition();const t=this.inputElement;return t?t.selectionStart:null}getSelectedText(){if(this.eventHost.getSelectedText)return this.eventHost.getSelectedText();const t=this.inputElement;return t&&null!==t.selectionStart&&null!==t.selectionEnd?t.value.substring(t.selectionStart,t.selectionEnd):""}isReadonlyKeyAllowed(t){if(this.eventHost.isReadonlyKeyAllowed)return this.eventHost.isReadonlyKeyAllowed(t);return t.ctrlKey||t.metaKey?["KeyA","KeyC"].includes(t.code):["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(t.key)}isActivationKey(t){return this.eventHost.isActivationKey?this.eventHost.isActivationKey(t):"Enter"===t.key||" "===t.key}}
|
|
951
884
|
/**
|
|
952
885
|
* @license
|
|
953
886
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
954
887
|
* SPDX-License-Identifier: MIT
|
|
955
|
-
*/var
|
|
888
|
+
*/var N=function(t,i,r,n){for(var e,a=arguments.length,o=a<3?i:null===n?n=Object.getOwnPropertyDescriptor(i,r):n,s=t.length-1;s>=0;s--)(e=t[s])&&(o=(a<3?e(o):a>3?e(i,r,o):e(i,r))||o);return a>3&&o&&Object.defineProperty(i,r,o),o},z=function(t,i,r,n){return new(r||(r=Promise))(function(e,a){function o(t){try{l(n.next(t))}catch(t){a(t)}}function s(t){try{l(n.throw(t))}catch(t){a(t)}}function l(t){var i;t.done?e(t.value):(i=t.value,i instanceof r?i:new r(function(t){t(i)})).then(o,s)}l((n=n.apply(t,i||[])).next())})};let C=class extends(w(f(m(s(n))))){constructor(){super(...arguments),this.validationController=new $(this),this.eventController=new E(this),this.disabled=!1,this.readonly=!1,this.state="default",this.value="",this.size="medium",this.variant="outlined",this.type="text",this.placeholder="",this.autocomplete="off",this.withCopy=!1,this.allowClear=!1,this.showCount=!1,this.rules=[],this.validateOnChangeInput=!0,this.validateOnBlurInput=!0,this.hasFeedback=!1,this.allowWarnings=!1,this.validationTrigger="change",this.debounce=0,this.inputType="",this.hasAddonBefore=!1,this.hasAddonAfter=!1,this.focused=!1,this.requiredComponents=["nr-icon"],this._handleValidationEvent=t=>{const i=t.detail;this.validationMessage=i.validationMessage||"";let r="default";i.validationResult.hasError?r="error":i.validationResult.hasWarning&&this.allowWarnings?r="warning":i.validationResult.isValid&&this.value&&this.hasFeedback&&(r="success"),this.state!==r&&(this.state=r),this.requestUpdate()},this._handleKeyDown=t=>{this.eventController.handleKeyDown(t)},this._valueChange=t=>{this.eventController.handleValueChange(t)},this._focusEvent=t=>{this.eventController.handleFocus(t)},this._blurEvent=t=>{this.eventController.handleBlur(t)},this._handleIconKeydown=t=>{this.eventController.handleIconKeydown(t)}}get _input(){return this.shadowRoot.querySelector("#input")}get characterCountDisplay(){const t=this.value.length;return this.maxLength?`${t}/${this.maxLength}`:`${t}`}get isOverCharacterLimit(){return!!this.maxLength&&this.value.length>this.maxLength}get input(){return this._input}get inputElement(){return this._input}connectedCallback(){super.connectedCallback(),this.addEventListener("nr-validation",this._handleValidationEvent)}disconnectedCallback(){var t,i,r,n;super.disconnectedCallback(),this.removeEventListener("nr-validation",this._handleValidationEvent),null===(i=(t=this.validationController).clearDebounceTimer)||void 0===i||i.call(t),null===(n=(r=this.eventController).clearDebounceTimer)||void 0===n||n.call(r)}willUpdate(t){super.willUpdate(t),!t.has("type")&&this.inputType||(this.inputType=this.type),(t.has("type")||t.has("min"))&&"number"===this.type&&this.min&&!this.value&&(this.value=this.min),(t.has("type")||t.has("min")||t.has("max")||t.has("step"))&&y.validateNumericProperties(this.type,this.min,this.max,this.step),(t.has("type")||t.has("required")||t.has("maxLength")||t.has("min")||t.has("max"))&&this.validationController.setupValidationRules()}updated(t){if(t.has("step")||t.has("min")||t.has("max")||t.has("maxLength")){const t=this.input;t&&(this.setStep(this.step),this.min?t.setAttribute("min",this.min):t.removeAttribute("min"),this.max?t.setAttribute("max",this.max):t.removeAttribute("max"),this.maxLength?t.setAttribute("maxlength",this.maxLength.toString()):t.removeAttribute("maxlength"))}if(t.has("value")){const t=this.input;t&&t.value!==this.value&&(t.value=this.value)}}firstUpdated(){this._checkInitialSlotContent()}_checkInitialSlotContent(){const t=this.querySelectorAll('[slot="addon-before"]');this.hasAddonBefore=t.length>0;const i=this.querySelectorAll('[slot="addon-after"]');this.hasAddonAfter=i.length>0}_handleSlotChange(t){const i=t.target,r=i.name;"addon-before"===r?this.hasAddonBefore=i.assignedElements().length>0:"addon-after"===r&&(this.hasAddonAfter=i.assignedElements().length>0)}_onCopy(){return z(this,void 0,void 0,function*(){yield this.eventController.handleCopy()})}_onClear(){this.eventController.handleClear()}_increment(){this.eventController.handleIncrement()}_decrement(){this.eventController.handleDecrement()}_togglePasswordIcon(){this.eventController.handleTogglePassword()}_getAriaDescribedBy(){var t;const i=[],r=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector('slot[name="helper-text"]');return r&&r.assignedNodes().length>0&&i.push("helper-text"),i.join(" ")||""}validateValue(t){return this.validationController.validate()}addRule(t){this.validationController.addRule(t)}removeRule(t){this.validationController.removeRule(t)}clearRules(){this.validationController.clearRules()}getValidationStatus(){return this.validationController.getValidationStatus()}validateInput(){return z(this,void 0,void 0,function*(){const t=this.validationController.validate();return this.validationController.isValidating?new Promise(t=>{const i=()=>{this.validationController.isValidating?setTimeout(i,50):t(this.validationController.isValid)};i()}):t})}setValidationStatus(t){this.validationController.setValidationStatus(t)}getValidationClasses(){return this.validationController.getValidationClasses()}renderValidationIcon(){return this.validationController.renderValidationIcon()}renderValidationMessage(){return this.validationController.renderValidationMessage()}render(){const t=this.getValidationClasses(),r=this.validationController.getValidationRenderState();return i`
|
|
956
889
|
<slot name="label"></slot>
|
|
957
|
-
<div class="input-wrapper ${Object.entries(t).filter((
|
|
890
|
+
<div class="input-wrapper ${Object.entries(t).filter(([,t])=>t).map(([t])=>t).join(" ")}"
|
|
958
891
|
part="input-wrapper"
|
|
959
892
|
data-theme="${this.currentTheme}"
|
|
960
|
-
?data-validating="${
|
|
961
|
-
${
|
|
893
|
+
?data-validating="${r.isValidating}">
|
|
894
|
+
${b.renderAddonBefore(this.hasAddonBefore,t=>this._handleSlotChange(t))}
|
|
962
895
|
<div data-size=${this.size} id="input-container" part="input-container">
|
|
963
|
-
${
|
|
896
|
+
${b.renderPrefix()}
|
|
964
897
|
<input
|
|
965
898
|
id="input"
|
|
966
899
|
part="input"
|
|
@@ -970,28 +903,28 @@ class x{constructor(t){this._host=t,this._host.addController(this)}get host(){re
|
|
|
970
903
|
.placeholder=${this.placeholder}
|
|
971
904
|
.type="${this.inputType}"
|
|
972
905
|
.autocomplete=${this.autocomplete}
|
|
973
|
-
aria-invalid=${
|
|
906
|
+
aria-invalid=${r.validationResult.hasError?"true":"false"}
|
|
974
907
|
aria-describedby=${this._getAriaDescribedBy()}
|
|
975
908
|
@input=${this._valueChange}
|
|
976
909
|
@focus=${this._focusEvent}
|
|
977
910
|
@blur=${this._blurEvent}
|
|
978
911
|
@keydown=${this._handleKeyDown}
|
|
979
912
|
/>
|
|
980
|
-
${
|
|
981
|
-
${
|
|
982
|
-
${
|
|
983
|
-
${
|
|
984
|
-
${
|
|
985
|
-
${
|
|
986
|
-
${
|
|
913
|
+
${b.renderSuffix()}
|
|
914
|
+
${b.renderCopyIcon(this.withCopy,this.disabled,this.readonly,()=>this._onCopy(),t=>this._handleIconKeydown(t))}
|
|
915
|
+
${b.renderClearIcon(this.allowClear,this.value,this.disabled,this.readonly,()=>this._onClear(),t=>this._handleIconKeydown(t))}
|
|
916
|
+
${r.hasValidationFeedback?this.renderValidationIcon():b.renderStateIcon(this.state)}
|
|
917
|
+
${b.renderCalendarIcon(this.state,this.type)}
|
|
918
|
+
${b.renderPasswordIcon(this.type,this.inputType,this.disabled,this.readonly,()=>this._togglePasswordIcon(),t=>this._handleIconKeydown(t))}
|
|
919
|
+
${b.renderNumberIcons(this.type,this.state,this.disabled,this.readonly,()=>this._increment(),()=>this._decrement(),t=>this._handleIconKeydown(t))}
|
|
987
920
|
</div>
|
|
988
|
-
${
|
|
921
|
+
${b.renderAddonAfter(this.hasAddonAfter,t=>this._handleSlotChange(t))}
|
|
989
922
|
</div>
|
|
990
923
|
<slot name="helper-text"></slot>
|
|
991
924
|
${this.renderValidationMessage()}
|
|
992
|
-
${this.showCount?
|
|
925
|
+
${this.showCount?i`
|
|
993
926
|
<div class="character-count" part="character-count" ?data-over-limit=${this.isOverCharacterLimit}>
|
|
994
927
|
${this.characterCountDisplay}
|
|
995
928
|
</div>
|
|
996
929
|
`:""}
|
|
997
|
-
`}};C.styles=l,
|
|
930
|
+
`}};C.styles=l,N([e({type:Boolean,reflect:!0})],C.prototype,"disabled",void 0),N([e({type:Boolean,reflect:!0})],C.prototype,"readonly",void 0),N([e({type:String,reflect:!0})],C.prototype,"state",void 0),N([e({type:String,reflect:!0})],C.prototype,"value",void 0),N([e({type:String})],C.prototype,"size",void 0),N([e({type:String,reflect:!0})],C.prototype,"variant",void 0),N([e({reflect:!0})],C.prototype,"type",void 0),N([e({type:String})],C.prototype,"step",void 0),N([e({type:String})],C.prototype,"min",void 0),N([e({type:String})],C.prototype,"max",void 0),N([e({type:String})],C.prototype,"placeholder",void 0),N([e({type:String})],C.prototype,"autocomplete",void 0),N([e({type:String})],C.prototype,"name",void 0),N([e({type:Boolean})],C.prototype,"required",void 0),N([e({type:Boolean,reflect:!0})],C.prototype,"withCopy",void 0),N([e({type:Boolean,reflect:!0})],C.prototype,"allowClear",void 0),N([e({type:Boolean,reflect:!0})],C.prototype,"showCount",void 0),N([e({type:Number})],C.prototype,"maxLength",void 0),N([e({type:Array})],C.prototype,"rules",void 0),N([e({type:Boolean,attribute:"validate-on-change"})],C.prototype,"validateOnChangeInput",void 0),N([e({type:Boolean,attribute:"validate-on-blur"})],C.prototype,"validateOnBlurInput",void 0),N([e({type:Boolean,attribute:"has-feedback"})],C.prototype,"hasFeedback",void 0),N([e({type:Boolean,attribute:"allow-warnings"})],C.prototype,"allowWarnings",void 0),N([e({type:String,attribute:"validation-trigger"})],C.prototype,"validationTrigger",void 0),N([e({type:Number,attribute:"validation-debounce"})],C.prototype,"validationDebounce",void 0),N([e({type:String})],C.prototype,"label",void 0),N([e({type:Number})],C.prototype,"debounce",void 0),N([a()],C.prototype,"validationMessage",void 0),N([a()],C.prototype,"inputType",void 0),N([a()],C.prototype,"hasAddonBefore",void 0),N([a()],C.prototype,"hasAddonAfter",void 0),N([a()],C.prototype,"focused",void 0),C=N([o("nr-input")],C);var I=Object.freeze({__proto__:null,PORT:/^(?:[1-9]\d{0,4}|[1-5]\d{5}|6[0-4]\d{4}|65[0-4]\d{3}|655[0-2]\d{2}|6553[0-5])$/,NOT_EMPTY:/^.+$/});export{C as NrInputElement,I as Validations};
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,OAAO,KAAK,WAAW,MAAM,iBAAiB,CAAC","sourcesContent":["export * from './input.component.js';\nexport * as Validations from './validation.js';"]}
|
package/input.component.d.ts
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
4
4
|
* SPDX-License-Identifier: MIT
|
|
5
5
|
*/
|
|
6
|
-
import { LitElement, PropertyValues } from 'lit';
|
|
6
|
+
import { LitElement, type PropertyValues } from 'lit';
|
|
7
7
|
import { INPUT_TYPE, INPUT_STATE, INPUT_SIZE, INPUT_VARIANT, ValidationRule, InputValidationResult } from './input.types.js';
|
|
8
8
|
import { InputValidationHost, InputEventHost } from './controllers/index.js';
|
|
9
9
|
declare const NrInputElement_base: (new (...args: any[]) => import("./mixins/number-mixin.js").NumberCapable) & (new (...args: any[]) => import("./mixins/focus-mixin.js").FocusCapable) & (new (...args: any[]) => import("./mixins/selection-mixin.js").SelectionCapable) & (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
|
|
@@ -84,6 +84,8 @@ export declare class NrInputElement extends NrInputElement_base implements Input
|
|
|
84
84
|
validationDebounce?: number;
|
|
85
85
|
/** Input label for better error messages */
|
|
86
86
|
label?: string;
|
|
87
|
+
/** Debounce delay in milliseconds for input events */
|
|
88
|
+
debounce: number;
|
|
87
89
|
/** Validation message */
|
|
88
90
|
validationMessage?: string;
|
|
89
91
|
inputType: string;
|
|
@@ -166,7 +168,7 @@ export declare class NrInputElement extends NrInputElement_base implements Input
|
|
|
166
168
|
* Render validation message
|
|
167
169
|
*/
|
|
168
170
|
private renderValidationMessage;
|
|
169
|
-
render(): import("lit").TemplateResult<1>;
|
|
171
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
170
172
|
}
|
|
171
173
|
export {};
|
|
172
174
|
//# sourceMappingURL=input.component.d.ts.map
|
package/input.component.js
CHANGED
|
@@ -63,7 +63,7 @@ let NrInputElement = class NrInputElement extends NumberMixin(FocusMixin(Selecti
|
|
|
63
63
|
/** Input size (small, medium, large) */
|
|
64
64
|
this.size = "medium" /* INPUT_SIZE.Medium */;
|
|
65
65
|
/** Visual variant (outlined, underlined, filled) */
|
|
66
|
-
this.variant = "
|
|
66
|
+
this.variant = "outlined" /* INPUT_VARIANT.Outlined */;
|
|
67
67
|
/** Input type (text, password, number, email, etc.) */
|
|
68
68
|
this.type = "text" /* INPUT_TYPE.TEXT */;
|
|
69
69
|
/** Placeholder text */
|
|
@@ -88,6 +88,8 @@ let NrInputElement = class NrInputElement extends NumberMixin(FocusMixin(Selecti
|
|
|
88
88
|
this.allowWarnings = false;
|
|
89
89
|
/** Custom validation trigger */
|
|
90
90
|
this.validationTrigger = 'change';
|
|
91
|
+
/** Debounce delay in milliseconds for input events */
|
|
92
|
+
this.debounce = 0;
|
|
91
93
|
this.inputType = EMPTY_STRING;
|
|
92
94
|
this.hasAddonBefore = false;
|
|
93
95
|
this.hasAddonAfter = false;
|
|
@@ -155,10 +157,11 @@ let NrInputElement = class NrInputElement extends NumberMixin(FocusMixin(Selecti
|
|
|
155
157
|
this.addEventListener('nr-validation', this._handleValidationEvent);
|
|
156
158
|
}
|
|
157
159
|
disconnectedCallback() {
|
|
158
|
-
var _a, _b;
|
|
160
|
+
var _a, _b, _c, _d;
|
|
159
161
|
super.disconnectedCallback();
|
|
160
162
|
this.removeEventListener('nr-validation', this._handleValidationEvent);
|
|
161
163
|
(_b = (_a = this.validationController).clearDebounceTimer) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
164
|
+
(_d = (_c = this.eventController).clearDebounceTimer) === null || _d === void 0 ? void 0 : _d.call(_c);
|
|
162
165
|
}
|
|
163
166
|
willUpdate(_changedProperties) {
|
|
164
167
|
super.willUpdate(_changedProperties);
|
|
@@ -203,6 +206,13 @@ let NrInputElement = class NrInputElement extends NumberMixin(FocusMixin(Selecti
|
|
|
203
206
|
input.removeAttribute('maxlength');
|
|
204
207
|
}
|
|
205
208
|
}
|
|
209
|
+
// Sync input element value when property changes externally
|
|
210
|
+
if (_changedProperties.has('value')) {
|
|
211
|
+
const input = this.input;
|
|
212
|
+
if (input && input.value !== this.value) {
|
|
213
|
+
input.value = this.value;
|
|
214
|
+
}
|
|
215
|
+
}
|
|
206
216
|
}
|
|
207
217
|
firstUpdated() {
|
|
208
218
|
this._checkInitialSlotContent();
|
|
@@ -387,7 +397,7 @@ __decorate([
|
|
|
387
397
|
property({ type: String, reflect: true })
|
|
388
398
|
], NrInputElement.prototype, "state", void 0);
|
|
389
399
|
__decorate([
|
|
390
|
-
property({ type: String })
|
|
400
|
+
property({ type: String, reflect: true })
|
|
391
401
|
], NrInputElement.prototype, "value", void 0);
|
|
392
402
|
__decorate([
|
|
393
403
|
property({ type: String })
|
|
@@ -455,6 +465,9 @@ __decorate([
|
|
|
455
465
|
__decorate([
|
|
456
466
|
property({ type: String })
|
|
457
467
|
], NrInputElement.prototype, "label", void 0);
|
|
468
|
+
__decorate([
|
|
469
|
+
property({ type: Number })
|
|
470
|
+
], NrInputElement.prototype, "debounce", void 0);
|
|
458
471
|
__decorate([
|
|
459
472
|
state()
|
|
460
473
|
], NrInputElement.prototype, "validationMessage", void 0);
|
package/input.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.component.js","sourceRoot":"","sources":["../../../src/components/input/input.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, PropertyValues, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { styles } from './input.style.js';\nimport {\n INPUT_TYPE,\n INPUT_STATE,\n INPUT_SIZE,\n INPUT_VARIANT,\n EMPTY_STRING,\n ValidationRule,\n InputValidationResult\n} from './input.types.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { InputValidationUtils, InputRenderUtils } from './utils/index.js';\nimport { SelectionMixin, FocusMixin, NumberMixin } from './mixins/index.js';\nimport {\n InputValidationController,\n InputValidationHost,\n InputEventController,\n InputEventHost\n} from './controllers/index.js';\n\n/**\n * Versatile input component with validation, multiple types, and interactive features.\n * \n * @example\n * ```html\n * <nr-input type=\"text\" placeholder=\"Enter name\"></nr-input>\n * <nr-input type=\"password\"></nr-input>\n * <nr-input type=\"number\" min=\"0\" max=\"100\"></nr-input>\n * ```\n * \n * @fires nr-input - Value changes\n * @fires nr-focus - Input focused\n * @fires nr-blur - Input blurred \n * @fires nr-enter - Enter key pressed\n * @fires nr-clear - Clear button clicked\n * \n * @slot label - Input label\n * @slot helper-text - Helper text\n * @slot addon-before - Content before input\n * @slot addon-after - Content after input\n */\n@customElement('nr-input')\nexport class NrInputElement extends NumberMixin(\n FocusMixin(\n SelectionMixin(\n NuralyUIBaseMixin(LitElement)\n ) \n )\n) implements InputValidationHost, InputEventHost {\n static override styles = styles;\n \n private validationController = new InputValidationController(this);\n private eventController = new InputEventController(this);\n\n /** Disables the input */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /** Makes the input read-only */\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n /** Visual state (default, success, warning, error) */\n @property({ type: String, reflect: true })\n state = INPUT_STATE.Default;\n\n /** Current input value */\n @property({ type: String })\n value = EMPTY_STRING;\n\n /** Input size (small, medium, large) */\n @property({ type: String })\n size = INPUT_SIZE.Medium;\n\n /** Visual variant (outlined, underlined, filled) */\n @property({ type: String, reflect: true })\n variant = INPUT_VARIANT.Underlined;\n\n /** Input type (text, password, number, email, etc.) */\n @property({ reflect: true })\n type = INPUT_TYPE.TEXT;\n\n /** Step value for number inputs */\n @property({ type: String })\n step?: string;\n\n /** Minimum value for number inputs */\n @property({ type: String })\n min?: string;\n\n /** Maximum value for number inputs */\n @property({ type: String })\n max?: string;\n\n /** Placeholder text */\n @property({ type: String })\n placeholder = EMPTY_STRING;\n\n /** HTML autocomplete attribute */\n @property({ type: String })\n autocomplete = 'off';\n\n /** Field name for form submission */\n @property({ type: String })\n name?: string;\n\n /** Required field indicator */\n @property({ type: Boolean })\n required?: boolean;\n\n /** Shows copy button */\n @property({ type: Boolean, reflect: true })\n withCopy = false;\n\n /** Shows clear button */\n @property({ type: Boolean, reflect: true })\n allowClear = false;\n\n /** Shows character counter */\n @property({ type: Boolean, reflect: true })\n showCount = false;\n\n /** Maximum character limit */\n @property({ type: Number })\n maxLength?: number;\n\n\n /** Array of validation rules */\n @property({ type: Array })\n rules: ValidationRule[] = [];\n\n /** Validate on change */\n @property({ type: Boolean, attribute: 'validate-on-change' })\n validateOnChangeInput = true;\n\n /** Validate on blur */\n @property({ type: Boolean, attribute: 'validate-on-blur' })\n validateOnBlurInput = true;\n\n /** Show validation status icon */\n @property({ type: Boolean, attribute: 'has-feedback' })\n hasFeedback = false;\n\n /** Allow validation warnings */\n @property({ type: Boolean, attribute: 'allow-warnings' })\n allowWarnings = false;\n\n /** Custom validation trigger */\n @property({ type: String, attribute: 'validation-trigger' })\n validationTrigger: 'change' | 'blur' | 'submit' = 'change';\n\n /** Validation debounce delay in milliseconds */\n @property({ type: Number, attribute: 'validation-debounce' })\n validationDebounce?: number;\n\n /** Input label for better error messages */\n @property({ type: String })\n label?: string;\n\n /** Validation message */\n @state()\n validationMessage?: string;\n\n\n @state()\n inputType = EMPTY_STRING;\n\n @state()\n hasAddonBefore = false;\n\n @state()\n hasAddonAfter = false;\n\n @state()\n focused = false;\n\n private get _input(): HTMLInputElement {\n return this.shadowRoot!.querySelector('#input') as HTMLInputElement;\n }\n\n\n get characterCountDisplay(): string {\n const currentLength = this.value.length;\n if (this.maxLength) {\n return `${currentLength}/${this.maxLength}`;\n }\n return `${currentLength}`;\n }\n\n get isOverCharacterLimit(): boolean {\n return this.maxLength ? this.value.length > this.maxLength : false;\n }\n\n protected get input(): HTMLInputElement {\n return this._input;\n }\n\n protected get inputElement(): HTMLInputElement {\n return this._input;\n }\n\n\n\n override requiredComponents = ['nr-icon'];\n\n override connectedCallback() {\n super.connectedCallback();\n \n this.addEventListener('nr-validation', this._handleValidationEvent as EventListener);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n \n this.removeEventListener('nr-validation', this._handleValidationEvent as EventListener);\n \n this.validationController.clearDebounceTimer?.();\n }\n\n /**\n * Handle validation events from the controller\n */\n private _handleValidationEvent = (event: Event) => {\n const customEvent = event as CustomEvent;\n const detail = customEvent.detail;\n \n this.validationMessage = detail.validationMessage || '';\n \n let newState = INPUT_STATE.Default;\n \n if (detail.validationResult.hasError) {\n newState = INPUT_STATE.Error;\n } else if (detail.validationResult.hasWarning && this.allowWarnings) {\n newState = INPUT_STATE.Warning;\n } else if (detail.validationResult.isValid && this.value && this.hasFeedback) {\n newState = INPUT_STATE.Success;\n }\n \n if (this.state !== newState) {\n this.state = newState;\n }\n \n this.requestUpdate();\n }\n\n override willUpdate(_changedProperties: PropertyValues): void {\n super.willUpdate(_changedProperties);\n\n if (_changedProperties.has('type') || !this.inputType) {\n this.inputType = this.type;\n }\n\n if (_changedProperties.has('type') || _changedProperties.has('min')) {\n if (this.type === INPUT_TYPE.NUMBER && this.min && !this.value) {\n this.value = this.min;\n }\n }\n\n if (_changedProperties.has('type') ||\n _changedProperties.has('min') ||\n _changedProperties.has('max') ||\n _changedProperties.has('step')) {\n InputValidationUtils.validateNumericProperties(this.type, this.min, this.max, this.step);\n }\n\n if (_changedProperties.has('type') || \n _changedProperties.has('required') || \n _changedProperties.has('maxLength') ||\n _changedProperties.has('min') ||\n _changedProperties.has('max')) {\n this.validationController.setupValidationRules();\n }\n }\n\n override updated(_changedProperties: PropertyValues): void {\n if (_changedProperties.has('step') || _changedProperties.has('min') || _changedProperties.has('max') || _changedProperties.has('maxLength')) {\n const input = this.input;\n if (input) {\n this.setStep(this.step);\n\n if (this.min) input.setAttribute('min', this.min);\n else input.removeAttribute('min');\n\n if (this.max) input.setAttribute('max', this.max);\n else input.removeAttribute('max');\n\n if (this.maxLength) input.setAttribute('maxlength', this.maxLength.toString());\n else input.removeAttribute('maxlength');\n }\n }\n }\n\n override firstUpdated(): void {\n this._checkInitialSlotContent();\n }\n\n\n private _checkInitialSlotContent(): void {\n const addonBeforeElements = this.querySelectorAll('[slot=\"addon-before\"]');\n this.hasAddonBefore = addonBeforeElements.length > 0;\n\n const addonAfterElements = this.querySelectorAll('[slot=\"addon-after\"]');\n this.hasAddonAfter = addonAfterElements.length > 0;\n }\n\n private _handleSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const slotName = slot.name;\n\n if (slotName === 'addon-before') {\n this.hasAddonBefore = slot.assignedElements().length > 0;\n } else if (slotName === 'addon-after') {\n this.hasAddonAfter = slot.assignedElements().length > 0;\n }\n }\n\n\n private _handleKeyDown = (keyDownEvent: KeyboardEvent): void => {\n this.eventController.handleKeyDown(keyDownEvent);\n };\n\n private _valueChange = (e: Event): void => {\n this.eventController.handleValueChange(e);\n };\n\n private _focusEvent = (e: Event): void => {\n this.eventController.handleFocus(e);\n };\n\n private _blurEvent = (e: Event): void => {\n this.eventController.handleBlur(e);\n };\n\n private _handleIconKeydown = (keyDownEvent: KeyboardEvent): void => {\n this.eventController.handleIconKeydown(keyDownEvent);\n };\n\n private async _onCopy(): Promise<void> {\n await this.eventController.handleCopy();\n }\n\n private _onClear(): void {\n this.eventController.handleClear();\n }\n\n\n private _increment(): void {\n this.eventController.handleIncrement();\n }\n\n private _decrement(): void {\n this.eventController.handleDecrement();\n }\n\n private _togglePasswordIcon(): void {\n this.eventController.handleTogglePassword();\n }\n\n private _getAriaDescribedBy(): string {\n const describedBy: string[] = [];\n\n const helperSlot = this.shadowRoot?.querySelector('slot[name=\"helper-text\"]');\n if (helperSlot && (helperSlot as HTMLSlotElement).assignedNodes().length > 0) {\n describedBy.push('helper-text');\n }\n\n return describedBy.join(' ') || '';\n }\n\n /**\n * Setup default validation rules based on input properties\n */\n /**\n * Override the form mixin's validateValue method with controller logic\n */\n protected validateValue(_value: string): boolean {\n return this.validationController.validate();\n }\n\n /**\n * Add validation rule dynamically\n */\n addRule(rule: ValidationRule): void {\n this.validationController.addRule(rule);\n }\n\n /**\n * Remove validation rule\n */\n removeRule(predicate: (rule: ValidationRule) => boolean): void {\n this.validationController.removeRule(predicate);\n }\n\n /**\n * Clear all validation rules\n */\n clearRules(): void {\n this.validationController.clearRules();\n }\n\n /**\n * Get current validation status\n */\n getValidationStatus(): {\n isValid: boolean;\n isValidating: boolean;\n errors: string[];\n warnings: string[];\n } {\n return this.validationController.getValidationStatus();\n }\n\n /**\n * Trigger validation manually\n */\n async validateInput(): Promise<boolean> {\n const result = this.validationController.validate();\n \n if (this.validationController.isValidating) {\n return new Promise((resolve) => {\n const checkValidation = () => {\n if (!this.validationController.isValidating) {\n resolve(this.validationController.isValid);\n } else {\n setTimeout(checkValidation, 50);\n }\n };\n checkValidation();\n });\n }\n \n return result;\n }\n\n /**\n * Set validation state externally (for form integration)\n */\n setValidationStatus(result: InputValidationResult): void {\n this.validationController.setValidationStatus(result);\n }\n\n /**\n * Get validation classes for CSS styling\n */\n protected getValidationClasses(): Record<string, boolean> {\n return this.validationController.getValidationClasses();\n }\n\n /**\n * Render validation feedback icon\n */\n private renderValidationIcon() {\n return this.validationController.renderValidationIcon();\n }\n\n /**\n * Render validation message\n */\n private renderValidationMessage() {\n return this.validationController.renderValidationMessage();\n }\n\n\n override render() {\n const validationClasses = this.getValidationClasses();\n const validationRenderState = this.validationController.getValidationRenderState();\n \n return html`\n <slot name=\"label\"></slot>\n <div class=\"input-wrapper ${Object.entries(validationClasses).filter(([, value]) => value).map(([key]) => key).join(' ')}\" \n part=\"input-wrapper\" \n data-theme=\"${this.currentTheme}\"\n ?data-validating=\"${validationRenderState.isValidating}\">\n ${InputRenderUtils.renderAddonBefore(this.hasAddonBefore, (e: Event) => this._handleSlotChange(e))}\n <div data-size=${this.size} id=\"input-container\" part=\"input-container\">\n ${InputRenderUtils.renderPrefix()}\n <input\n id=\"input\"\n part=\"input\"\n .disabled=${this.disabled}\n .readOnly=${this.readonly}\n .value=${this.value}\n .placeholder=${this.placeholder}\n .type=\"${this.inputType}\"\n .autocomplete=${this.autocomplete}\n aria-invalid=${validationRenderState.validationResult.hasError ? 'true' : 'false'}\n aria-describedby=${this._getAriaDescribedBy()}\n @input=${this._valueChange}\n @focus=${this._focusEvent}\n @blur=${this._blurEvent}\n @keydown=${this._handleKeyDown}\n />\n ${InputRenderUtils.renderSuffix()}\n ${InputRenderUtils.renderCopyIcon(\n this.withCopy,\n this.disabled,\n this.readonly,\n () => this._onCopy(),\n (e: KeyboardEvent) => this._handleIconKeydown(e)\n )}\n ${InputRenderUtils.renderClearIcon(\n this.allowClear,\n this.value,\n this.disabled,\n this.readonly,\n () => this._onClear(),\n (e: KeyboardEvent) => this._handleIconKeydown(e)\n )}\n ${validationRenderState.hasValidationFeedback ? this.renderValidationIcon() : InputRenderUtils.renderStateIcon(this.state)}\n ${InputRenderUtils.renderCalendarIcon(this.state, this.type)}\n ${InputRenderUtils.renderPasswordIcon(\n this.type,\n this.inputType,\n this.disabled,\n this.readonly,\n () => this._togglePasswordIcon(),\n (e: KeyboardEvent) => this._handleIconKeydown(e)\n )}\n ${InputRenderUtils.renderNumberIcons(\n this.type,\n this.state,\n this.disabled,\n this.readonly,\n () => this._increment(),\n () => this._decrement(),\n (e: KeyboardEvent) => this._handleIconKeydown(e)\n )}\n </div>\n ${InputRenderUtils.renderAddonAfter(this.hasAddonAfter, (e: Event) => this._handleSlotChange(e))}\n </div>\n <slot name=\"helper-text\"></slot>\n ${this.renderValidationMessage()}\n ${this.showCount ? html`\n <div class=\"character-count\" part=\"character-count\" ?data-over-limit=${this.isOverCharacterLimit}>\n ${this.characterCountDisplay}\n </div>\n ` : ''}\n `;\n }\n}\n\n"]}
|
|
1
|
+
{"version":3,"file":"input.component.js","sourceRoot":"","sources":["../../../../src/components/input/input.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { styles } from './input.style.js';\nimport {\n INPUT_TYPE,\n INPUT_STATE,\n INPUT_SIZE,\n INPUT_VARIANT,\n EMPTY_STRING,\n ValidationRule,\n InputValidationResult\n} from './input.types.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { InputValidationUtils, InputRenderUtils } from './utils/index.js';\nimport { SelectionMixin, FocusMixin, NumberMixin } from './mixins/index.js';\nimport {\n InputValidationController,\n InputValidationHost,\n InputEventController,\n InputEventHost\n} from './controllers/index.js';\n\n/**\n * Versatile input component with validation, multiple types, and interactive features.\n * \n * @example\n * ```html\n * <nr-input type=\"text\" placeholder=\"Enter name\"></nr-input>\n * <nr-input type=\"password\"></nr-input>\n * <nr-input type=\"number\" min=\"0\" max=\"100\"></nr-input>\n * ```\n * \n * @fires nr-input - Value changes\n * @fires nr-focus - Input focused\n * @fires nr-blur - Input blurred \n * @fires nr-enter - Enter key pressed\n * @fires nr-clear - Clear button clicked\n * \n * @slot label - Input label\n * @slot helper-text - Helper text\n * @slot addon-before - Content before input\n * @slot addon-after - Content after input\n */\n@customElement('nr-input')\nexport class NrInputElement extends NumberMixin(\n FocusMixin(\n SelectionMixin(\n NuralyUIBaseMixin(LitElement)\n ) \n )\n) implements InputValidationHost, InputEventHost {\n static override styles = styles;\n \n private validationController = new InputValidationController(this);\n private eventController = new InputEventController(this);\n\n /** Disables the input */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /** Makes the input read-only */\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n /** Visual state (default, success, warning, error) */\n @property({ type: String, reflect: true })\n state = INPUT_STATE.Default;\n\n /** Current input value */\n @property({ type: String, reflect: true })\n value = EMPTY_STRING;\n\n /** Input size (small, medium, large) */\n @property({ type: String })\n size = INPUT_SIZE.Medium;\n\n /** Visual variant (outlined, underlined, filled) */\n @property({ type: String, reflect: true })\n variant = INPUT_VARIANT.Outlined;\n\n /** Input type (text, password, number, email, etc.) */\n @property({ reflect: true })\n type = INPUT_TYPE.TEXT;\n\n /** Step value for number inputs */\n @property({ type: String })\n step?: string;\n\n /** Minimum value for number inputs */\n @property({ type: String })\n min?: string;\n\n /** Maximum value for number inputs */\n @property({ type: String })\n max?: string;\n\n /** Placeholder text */\n @property({ type: String })\n placeholder = EMPTY_STRING;\n\n /** HTML autocomplete attribute */\n @property({ type: String })\n autocomplete = 'off';\n\n /** Field name for form submission */\n @property({ type: String })\n name?: string;\n\n /** Required field indicator */\n @property({ type: Boolean })\n required?: boolean;\n\n /** Shows copy button */\n @property({ type: Boolean, reflect: true })\n withCopy = false;\n\n /** Shows clear button */\n @property({ type: Boolean, reflect: true })\n allowClear = false;\n\n /** Shows character counter */\n @property({ type: Boolean, reflect: true })\n showCount = false;\n\n /** Maximum character limit */\n @property({ type: Number })\n maxLength?: number;\n\n\n /** Array of validation rules */\n @property({ type: Array })\n rules: ValidationRule[] = [];\n\n /** Validate on change */\n @property({ type: Boolean, attribute: 'validate-on-change' })\n validateOnChangeInput = true;\n\n /** Validate on blur */\n @property({ type: Boolean, attribute: 'validate-on-blur' })\n validateOnBlurInput = true;\n\n /** Show validation status icon */\n @property({ type: Boolean, attribute: 'has-feedback' })\n hasFeedback = false;\n\n /** Allow validation warnings */\n @property({ type: Boolean, attribute: 'allow-warnings' })\n allowWarnings = false;\n\n /** Custom validation trigger */\n @property({ type: String, attribute: 'validation-trigger' })\n validationTrigger: 'change' | 'blur' | 'submit' = 'change';\n\n /** Validation debounce delay in milliseconds */\n @property({ type: Number, attribute: 'validation-debounce' })\n validationDebounce?: number;\n\n /** Input label for better error messages */\n @property({ type: String })\n label?: string;\n\n /** Debounce delay in milliseconds for input events */\n @property({ type: Number })\n debounce = 0;\n\n /** Validation message */\n @state()\n validationMessage?: string;\n\n\n @state()\n inputType = EMPTY_STRING;\n\n @state()\n hasAddonBefore = false;\n\n @state()\n hasAddonAfter = false;\n\n @state()\n focused = false;\n\n private get _input(): HTMLInputElement {\n return this.shadowRoot!.querySelector('#input') as HTMLInputElement;\n }\n\n\n get characterCountDisplay(): string {\n const currentLength = this.value.length;\n if (this.maxLength) {\n return `${currentLength}/${this.maxLength}`;\n }\n return `${currentLength}`;\n }\n\n get isOverCharacterLimit(): boolean {\n return this.maxLength ? this.value.length > this.maxLength : false;\n }\n\n protected get input(): HTMLInputElement {\n return this._input;\n }\n\n protected get inputElement(): HTMLInputElement {\n return this._input;\n }\n\n\n\n override requiredComponents = ['nr-icon'];\n\n override connectedCallback() {\n super.connectedCallback();\n \n this.addEventListener('nr-validation', this._handleValidationEvent as EventListener);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener('nr-validation', this._handleValidationEvent as EventListener);\n\n this.validationController.clearDebounceTimer?.();\n this.eventController.clearDebounceTimer?.();\n }\n\n /**\n * Handle validation events from the controller\n */\n private _handleValidationEvent = (event: Event) => {\n const customEvent = event as CustomEvent;\n const detail = customEvent.detail;\n \n this.validationMessage = detail.validationMessage || '';\n \n let newState = INPUT_STATE.Default;\n \n if (detail.validationResult.hasError) {\n newState = INPUT_STATE.Error;\n } else if (detail.validationResult.hasWarning && this.allowWarnings) {\n newState = INPUT_STATE.Warning;\n } else if (detail.validationResult.isValid && this.value && this.hasFeedback) {\n newState = INPUT_STATE.Success;\n }\n \n if (this.state !== newState) {\n this.state = newState;\n }\n \n this.requestUpdate();\n }\n\n override willUpdate(_changedProperties: PropertyValues): void {\n super.willUpdate(_changedProperties);\n\n if (_changedProperties.has('type') || !this.inputType) {\n this.inputType = this.type;\n }\n\n if (_changedProperties.has('type') || _changedProperties.has('min')) {\n if (this.type === INPUT_TYPE.NUMBER && this.min && !this.value) {\n this.value = this.min;\n }\n }\n\n if (_changedProperties.has('type') ||\n _changedProperties.has('min') ||\n _changedProperties.has('max') ||\n _changedProperties.has('step')) {\n InputValidationUtils.validateNumericProperties(this.type, this.min, this.max, this.step);\n }\n\n if (_changedProperties.has('type') || \n _changedProperties.has('required') || \n _changedProperties.has('maxLength') ||\n _changedProperties.has('min') ||\n _changedProperties.has('max')) {\n this.validationController.setupValidationRules();\n }\n }\n\n override updated(_changedProperties: PropertyValues): void {\n if (_changedProperties.has('step') || _changedProperties.has('min') || _changedProperties.has('max') || _changedProperties.has('maxLength')) {\n const input = this.input;\n if (input) {\n this.setStep(this.step);\n\n if (this.min) input.setAttribute('min', this.min);\n else input.removeAttribute('min');\n\n if (this.max) input.setAttribute('max', this.max);\n else input.removeAttribute('max');\n\n if (this.maxLength) input.setAttribute('maxlength', this.maxLength.toString());\n else input.removeAttribute('maxlength');\n }\n }\n\n // Sync input element value when property changes externally\n if (_changedProperties.has('value')) {\n const input = this.input;\n if (input && input.value !== this.value) {\n input.value = this.value;\n }\n }\n }\n\n override firstUpdated(): void {\n this._checkInitialSlotContent();\n }\n\n\n private _checkInitialSlotContent(): void {\n const addonBeforeElements = this.querySelectorAll('[slot=\"addon-before\"]');\n this.hasAddonBefore = addonBeforeElements.length > 0;\n\n const addonAfterElements = this.querySelectorAll('[slot=\"addon-after\"]');\n this.hasAddonAfter = addonAfterElements.length > 0;\n }\n\n private _handleSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const slotName = slot.name;\n\n if (slotName === 'addon-before') {\n this.hasAddonBefore = slot.assignedElements().length > 0;\n } else if (slotName === 'addon-after') {\n this.hasAddonAfter = slot.assignedElements().length > 0;\n }\n }\n\n\n private _handleKeyDown = (keyDownEvent: KeyboardEvent): void => {\n this.eventController.handleKeyDown(keyDownEvent);\n };\n\n private _valueChange = (e: Event): void => {\n this.eventController.handleValueChange(e);\n };\n\n private _focusEvent = (e: Event): void => {\n this.eventController.handleFocus(e);\n };\n\n private _blurEvent = (e: Event): void => {\n this.eventController.handleBlur(e);\n };\n\n private _handleIconKeydown = (keyDownEvent: KeyboardEvent): void => {\n this.eventController.handleIconKeydown(keyDownEvent);\n };\n\n private async _onCopy(): Promise<void> {\n await this.eventController.handleCopy();\n }\n\n private _onClear(): void {\n this.eventController.handleClear();\n }\n\n\n private _increment(): void {\n this.eventController.handleIncrement();\n }\n\n private _decrement(): void {\n this.eventController.handleDecrement();\n }\n\n private _togglePasswordIcon(): void {\n this.eventController.handleTogglePassword();\n }\n\n private _getAriaDescribedBy(): string {\n const describedBy: string[] = [];\n\n const helperSlot = this.shadowRoot?.querySelector('slot[name=\"helper-text\"]');\n if (helperSlot && (helperSlot as HTMLSlotElement).assignedNodes().length > 0) {\n describedBy.push('helper-text');\n }\n\n return describedBy.join(' ') || '';\n }\n\n /**\n * Setup default validation rules based on input properties\n */\n /**\n * Override the form mixin's validateValue method with controller logic\n */\n protected validateValue(_value: string): boolean {\n return this.validationController.validate();\n }\n\n /**\n * Add validation rule dynamically\n */\n addRule(rule: ValidationRule): void {\n this.validationController.addRule(rule);\n }\n\n /**\n * Remove validation rule\n */\n removeRule(predicate: (rule: ValidationRule) => boolean): void {\n this.validationController.removeRule(predicate);\n }\n\n /**\n * Clear all validation rules\n */\n clearRules(): void {\n this.validationController.clearRules();\n }\n\n /**\n * Get current validation status\n */\n getValidationStatus(): {\n isValid: boolean;\n isValidating: boolean;\n errors: string[];\n warnings: string[];\n } {\n return this.validationController.getValidationStatus();\n }\n\n /**\n * Trigger validation manually\n */\n async validateInput(): Promise<boolean> {\n const result = this.validationController.validate();\n \n if (this.validationController.isValidating) {\n return new Promise((resolve) => {\n const checkValidation = () => {\n if (!this.validationController.isValidating) {\n resolve(this.validationController.isValid);\n } else {\n setTimeout(checkValidation, 50);\n }\n };\n checkValidation();\n });\n }\n \n return result;\n }\n\n /**\n * Set validation state externally (for form integration)\n */\n setValidationStatus(result: InputValidationResult): void {\n this.validationController.setValidationStatus(result);\n }\n\n /**\n * Get validation classes for CSS styling\n */\n protected getValidationClasses(): Record<string, boolean> {\n return this.validationController.getValidationClasses();\n }\n\n /**\n * Render validation feedback icon\n */\n private renderValidationIcon() {\n return this.validationController.renderValidationIcon();\n }\n\n /**\n * Render validation message\n */\n private renderValidationMessage() {\n return this.validationController.renderValidationMessage();\n }\n\n\n override render() {\n const validationClasses = this.getValidationClasses();\n const validationRenderState = this.validationController.getValidationRenderState();\n \n return html`\n <slot name=\"label\"></slot>\n <div class=\"input-wrapper ${Object.entries(validationClasses).filter(([, value]) => value).map(([key]) => key).join(' ')}\" \n part=\"input-wrapper\" \n data-theme=\"${this.currentTheme}\"\n ?data-validating=\"${validationRenderState.isValidating}\">\n ${InputRenderUtils.renderAddonBefore(this.hasAddonBefore, (e: Event) => this._handleSlotChange(e))}\n <div data-size=${this.size} id=\"input-container\" part=\"input-container\">\n ${InputRenderUtils.renderPrefix()}\n <input\n id=\"input\"\n part=\"input\"\n .disabled=${this.disabled}\n .readOnly=${this.readonly}\n .value=${this.value}\n .placeholder=${this.placeholder}\n .type=\"${this.inputType}\"\n .autocomplete=${this.autocomplete}\n aria-invalid=${validationRenderState.validationResult.hasError ? 'true' : 'false'}\n aria-describedby=${this._getAriaDescribedBy()}\n @input=${this._valueChange}\n @focus=${this._focusEvent}\n @blur=${this._blurEvent}\n @keydown=${this._handleKeyDown}\n />\n ${InputRenderUtils.renderSuffix()}\n ${InputRenderUtils.renderCopyIcon(\n this.withCopy,\n this.disabled,\n this.readonly,\n () => this._onCopy(),\n (e: KeyboardEvent) => this._handleIconKeydown(e)\n )}\n ${InputRenderUtils.renderClearIcon(\n this.allowClear,\n this.value,\n this.disabled,\n this.readonly,\n () => this._onClear(),\n (e: KeyboardEvent) => this._handleIconKeydown(e)\n )}\n ${validationRenderState.hasValidationFeedback ? this.renderValidationIcon() : InputRenderUtils.renderStateIcon(this.state)}\n ${InputRenderUtils.renderCalendarIcon(this.state, this.type)}\n ${InputRenderUtils.renderPasswordIcon(\n this.type,\n this.inputType,\n this.disabled,\n this.readonly,\n () => this._togglePasswordIcon(),\n (e: KeyboardEvent) => this._handleIconKeydown(e)\n )}\n ${InputRenderUtils.renderNumberIcons(\n this.type,\n this.state,\n this.disabled,\n this.readonly,\n () => this._increment(),\n () => this._decrement(),\n (e: KeyboardEvent) => this._handleIconKeydown(e)\n )}\n </div>\n ${InputRenderUtils.renderAddonAfter(this.hasAddonAfter, (e: Event) => this._handleSlotChange(e))}\n </div>\n <slot name=\"helper-text\"></slot>\n ${this.renderValidationMessage()}\n ${this.showCount ? html`\n <div class=\"character-count\" part=\"character-count\" ?data-over-limit=${this.isOverCharacterLimit}>\n ${this.characterCountDisplay}\n </div>\n ` : ''}\n `;\n }\n}\n\n"]}
|
package/input.style.js
CHANGED
|
@@ -329,45 +329,6 @@ const inputStyle = css `
|
|
|
329
329
|
transition: var(--nuraly-transition-input, border-color 0.2s, box-shadow 0.2s);
|
|
330
330
|
}
|
|
331
331
|
|
|
332
|
-
/* Carbon Design System override - Carbon specific styles */
|
|
333
|
-
html[data-theme^="carbon"] nr-input #input-container,
|
|
334
|
-
body[data-theme^="carbon"] nr-input #input-container,
|
|
335
|
-
[data-theme^="carbon"] nr-input #input-container,
|
|
336
|
-
.input-wrapper[data-theme^="carbon"] #input-container {
|
|
337
|
-
border: var(--nuraly-border-width-input, 1px) solid var(--nuraly-color-input-border, transparent) !important;
|
|
338
|
-
border-bottom: var(--nuraly-border-width-input, 2px) solid var(--nuraly-color-input-border-bottom, #8d8d8d) !important;
|
|
339
|
-
border-radius: var(--nuraly-border-radius-input, 0) !important;
|
|
340
|
-
background-color: var(--nuraly-color-input-background, #f4f4f4) !important;
|
|
341
|
-
color: var(--nuraly-color-input-text, #161616) !important;
|
|
342
|
-
}
|
|
343
|
-
|
|
344
|
-
/* Default theme override - Default specific styles */
|
|
345
|
-
html[data-theme^="default"] nr-input #input-container,
|
|
346
|
-
body[data-theme^="default"] nr-input #input-container,
|
|
347
|
-
[data-theme^="default"] nr-input #input-container,
|
|
348
|
-
.input-wrapper[data-theme^="default"] #input-container {
|
|
349
|
-
border: var(--nuraly-border-width-input, 1px) solid var(--nuraly-color-input-border, #d9d9d9) !important;
|
|
350
|
-
border-radius: var(--nuraly-border-radius-input, 6px) !important;
|
|
351
|
-
background-color: var(--nuraly-color-input-background, #ffffff) !important;
|
|
352
|
-
color: var(--nuraly-color-input-text, rgba(0, 0, 0, 0.88)) !important;
|
|
353
|
-
}
|
|
354
|
-
|
|
355
|
-
/* Carbon input element padding override */
|
|
356
|
-
html[data-theme^="carbon"] nr-input #input-container > input,
|
|
357
|
-
body[data-theme^="carbon"] nr-input #input-container > input,
|
|
358
|
-
[data-theme^="carbon"] nr-input #input-container > input,
|
|
359
|
-
.input-wrapper[data-theme^="carbon"] #input-container > input {
|
|
360
|
-
padding: 7px 16px !important;
|
|
361
|
-
}
|
|
362
|
-
|
|
363
|
-
/* Default input element padding override */
|
|
364
|
-
html[data-theme^="default"] nr-input #input-container > input,
|
|
365
|
-
body[data-theme^="default"] nr-input #input-container > input,
|
|
366
|
-
[data-theme^="default"] nr-input #input-container > input,
|
|
367
|
-
.input-wrapper[data-theme^="default"] #input-container > input {
|
|
368
|
-
padding: var(--nuraly-spacing-input-medium-vertical, 4px) var(--nuraly-spacing-input-medium-horizontal, 11px) !important;
|
|
369
|
-
}
|
|
370
|
-
|
|
371
332
|
/* Focus state for input container */
|
|
372
333
|
#input-container:focus-within {
|
|
373
334
|
border-color: var(--nuraly-color-input-border-focus, #1890ff);
|
|
@@ -375,28 +336,6 @@ const inputStyle = css `
|
|
|
375
336
|
outline: none;
|
|
376
337
|
}
|
|
377
338
|
|
|
378
|
-
/* Carbon focus override */
|
|
379
|
-
html[data-theme^="carbon"] nr-input #input-container:focus-within,
|
|
380
|
-
body[data-theme^="carbon"] nr-input #input-container:focus-within,
|
|
381
|
-
[data-theme^="carbon"] nr-input #input-container:focus-within,
|
|
382
|
-
.input-wrapper[data-theme^="carbon"] #input-container:focus-within {
|
|
383
|
-
border: var(--nuraly-border-width-input, 2px) solid var(--nuraly-color-input-border-focus, #0f62fe) !important;
|
|
384
|
-
border-radius: var(--nuraly-border-radius-input, 0) !important;
|
|
385
|
-
box-shadow: var(--nuraly-shadow-input-focus, none) !important;
|
|
386
|
-
outline: none !important;
|
|
387
|
-
}
|
|
388
|
-
|
|
389
|
-
/* Default focus override */
|
|
390
|
-
html[data-theme^="default"] nr-input #input-container:focus-within,
|
|
391
|
-
body[data-theme^="default"] nr-input #input-container:focus-within,
|
|
392
|
-
[data-theme^="default"] nr-input #input-container:focus-within,
|
|
393
|
-
.input-wrapper[data-theme^="default"] #input-container:focus-within {
|
|
394
|
-
border-color: var(--nuraly-color-input-border-focus, #1890ff) !important;
|
|
395
|
-
border-radius: var(--nuraly-border-radius-input, 6px) !important;
|
|
396
|
-
box-shadow: var(--nuraly-shadow-input-focus, 0 0 0 2px rgba(24, 144, 255, 0.2)) !important;
|
|
397
|
-
outline: none !important;
|
|
398
|
-
}
|
|
399
|
-
|
|
400
339
|
/*
|
|
401
340
|
* Disabled container styles
|
|
402
341
|
* Applied when input is disabled
|
|
@@ -417,9 +356,9 @@ const inputStyle = css `
|
|
|
417
356
|
* Default: light border, focus: blue border
|
|
418
357
|
*/
|
|
419
358
|
:host([variant='outlined']) #input-container {
|
|
420
|
-
border: var(--nuraly-input-outlined-border, var(--nuraly-outlined-border));
|
|
421
|
-
border-radius: var(--nuraly-input-outlined-border-radius, var(--nuraly-outlined-border-radius));
|
|
422
|
-
background-color: var(--nuraly-input-outlined-background, var(--nuraly-outlined-background));
|
|
359
|
+
border: var(--nuraly-input-outlined-border, var(--nuraly-outlined-border, 1px solid #d1d5db));
|
|
360
|
+
border-radius: var(--nuraly-input-outlined-border-radius, var(--nuraly-outlined-border-radius, var(--nuraly-border-radius-input, 6px)));
|
|
361
|
+
background-color: var(--nuraly-input-outlined-background, var(--nuraly-outlined-background, transparent));
|
|
423
362
|
}
|
|
424
363
|
|
|
425
364
|
:host([variant='outlined']) .input-wrapper {
|
|
@@ -427,7 +366,8 @@ const inputStyle = css `
|
|
|
427
366
|
}
|
|
428
367
|
|
|
429
368
|
:host([variant='outlined']:not([state='error'])) #input-container:focus-within {
|
|
430
|
-
border: var(--nuraly-input-
|
|
369
|
+
border-color: var(--nuraly-color-input-border-focus, #3b82f6);
|
|
370
|
+
box-shadow: var(--nuraly-shadow-input-focus, 0 0 0 1px #3b82f6);
|
|
431
371
|
}
|
|
432
372
|
|
|
433
373
|
/*
|
|
@@ -436,7 +376,7 @@ const inputStyle = css `
|
|
|
436
376
|
*/
|
|
437
377
|
:host([variant='filled']) #input-container {
|
|
438
378
|
background-color: var(--nuraly-input-filled-background, var(--nuraly-filled-background));
|
|
439
|
-
border-radius: var(--nuraly-input-filled-border-radius, var(--nuraly-filled-border-radius));
|
|
379
|
+
border-radius: var(--nuraly-input-filled-border-radius, var(--nuraly-filled-border-radius, var(--nuraly-border-radius-input, 6px)));
|
|
440
380
|
border-bottom: var(--nuraly-input-filled-border-bottom, var(--nuraly-filled-border-bottom));
|
|
441
381
|
border-top: none;
|
|
442
382
|
border-left: none;
|
|
@@ -482,7 +422,7 @@ const inputStyle = css `
|
|
|
482
422
|
border-top: none;
|
|
483
423
|
border-left: none;
|
|
484
424
|
border-right: none;
|
|
485
|
-
border-radius: 0;
|
|
425
|
+
border-radius: var(--nuraly-input-underlined-border-radius, 0);
|
|
486
426
|
}
|
|
487
427
|
|
|
488
428
|
:host([variant='underlined']:not([state='error'])) #input-container:focus-within {
|
|
@@ -707,13 +647,6 @@ const sizeInputStyle = css `
|
|
|
707
647
|
padding-right: var(--nuraly-input-small-padding-right, var(--nuraly-small-padding-right));
|
|
708
648
|
}
|
|
709
649
|
|
|
710
|
-
/* Carbon Design System - Size-specific padding overrides */
|
|
711
|
-
html[data-theme^="carbon"] nr-input div[data-size='medium'],
|
|
712
|
-
body[data-theme^="carbon"] nr-input div[data-size='medium'],
|
|
713
|
-
[data-theme^="carbon"] div[data-size='medium'] {
|
|
714
|
-
padding: 4px 8px !important;
|
|
715
|
-
}
|
|
716
|
-
|
|
717
650
|
/*
|
|
718
651
|
* Character count display
|
|
719
652
|
* Shows character count and limit information
|
package/input.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.style.js","sourceRoot":"","sources":["../../../src/components/input/input.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AAEH,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmnBrB,CAAC;AAEF;;;GAGG;AACH,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkMzB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Input component styles for the Hybrid UI Library\n * \n * This file contains all the styling for the nr-input component, including:\n * - Base input styles with CSS custom properties for theming\n * - Multiple input states (default, warning, error)\n * - Size variations (small, medium, large)\n * - Different input types (text, password, number, calendar)\n * - Icon positioning and styling with comprehensive CSS variable overrides\n * - Focus, disabled, and validation states\n * - Dark theme support\n * \n * Icon Color Customization:\n * The input component provides multiple levels of CSS variable overrides for icon colors:\n * \n * Global Level:\n * - --nuraly-color-input-icon: Controls all icons in input components\n * - --nuraly-size-input-icon: Controls size of all icons in input components\n * - --nuraly-color-input-icon-hover: Hover state for all icons\n * - --nuraly-color-input-icon-active: Active state for all icons\n * - --nuraly-color-input-icon-disabled: Disabled state for all icons\n * \n * Specific Icon Types:\n * - --nuraly-color-input-warning-icon: Warning state icons\n * - --nuraly-color-input-error-icon: Error state icons\n * - --nuraly-color-input-calendar-icon: Calendar input type icons\n * - --nuraly-color-input-password-icon: Password toggle icons\n * - --nuraly-color-input-copy-icon: Copy functionality icons\n * - --nuraly-color-input-clear-icon: Clear functionality icons\n * - --nuraly-color-input-number-icons: Number input increment/decrement icons\n * \n * Usage Examples:\n * ```css\n * :root {\n * --nuraly-color-input-icon: #0066cc;\n * --nuraly-color-input-error-icon: #cc0000;\n * --nuraly-size-input-icon: 20px;\n * }\n * \n * .custom-input {\n * --nuraly-color-input-icon: #purple;\n * }\n * ```\n * \n * The styling system uses CSS custom properties with fallbacks to allow\n * for both global and local customization of input appearance.\n */\n\nconst inputStyle = css`\n /* \n * Host element base styles\n * Container for the input component with flexible layout\n */\n :host {\n display: flex;\n flex-direction: column;\n font-family: var(--nuraly-font-family-input, 'IBM Plex Sans', ui-sans-serif, system-ui);\n }\n\n /* \n * Base input wrapper and input element styles\n * Background applied to wrapper to cover entire container including addons\n * Uses theme CSS custom properties for comprehensive theming support\n */\n .input-wrapper {\n background-color: var(--nuraly-color-input-background, var(--nuraly-color-input-background-fallback, #ffffff));\n }\n\n\n #input-container > input {\n background-color: transparent;\n border: var(--nuraly-input-border, none);\n outline: var(--nuraly-input-outline, none);\n flex: 1;\n min-width: 0;\n width: 100%;\n \n /* Typography from theme */\n font-family: var(--nuraly-font-family-input, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto);\n font-size: var(--nuraly-font-size-input, 14px);\n color: var(--nuraly-color-input-text, var(--nuraly-color-input-text-fallback, rgba(0, 0, 0, 0.88)));\n \n /* Padding from theme */\n padding: var(--nuraly-spacing-input-medium-vertical, 4px) var(--nuraly-spacing-input-medium-horizontal, 11px);\n }\n\n /* \n * Disabled state styles for wrapper and input\n * Applied when input is disabled - removes interactivity and applies muted colors\n */\n :host([disabled]) .input-wrapper {\n background-color: var(--nuraly-color-input-disabled-background, var(--nuraly-color-input-disabled-background-fallback, #f4f4f4));\n }\n\n :host([disabled]) #input-container > input {\n background-color: transparent;\n cursor: var(--nuraly-cursor-disabled, not-allowed);\n color: var(--nuraly-color-input-disabled-text, var(--nuraly-color-input-disabled-text-fallback, rgba(0, 0, 0, 0.25)));\n }\n\n /* \n * Icon base styles\n * Common styling for all icons within the input component\n * Provides comprehensive CSS variable override system\n */\n nr-icon {\n display: flex;\n align-items: center;\n \n /* Global icon color override - applies to all icons in input */\n --nuraly-color-icon: var(--nuraly-color-input-icon, var(--nuraly-color-icon, var(--nuraly-color-icon-fallback, #161616)));\n \n /* Size override for input icons */\n --nuraly-icon-size: var(--nuraly-size-input-icon, var(--nuraly-icon-size, var(--nuraly-icon-size-fallback, 18px)));\n \n /* Interactive state overrides */\n --nuraly-color-icon-hover: var(--nuraly-color-input-icon-hover, var(--nuraly-color-icon-hover, var(--nuraly-color-icon-hover-fallback, #0f62fe)));\n --nuraly-color-icon-active: var(--nuraly-color-input-icon-active, var(--nuraly-color-icon-active, var(--nuraly-color-icon-active-fallback, #054ada)));\n --nuraly-color-icon-disabled: var(--nuraly-color-input-icon-disabled, var(--nuraly-color-icon-disabled, var(--nuraly-color-icon-disabled-fallback, #c6c6c6)));\n }\n\n /* \n * Placeholder styling\n * Customizable placeholder text appearance\n */\n ::placeholder {\n color: var(--nuraly-color-input-placeholder, var(--nuraly-color-input-placeholder-fallback, #a8a8a8));\n font-size: var(--nuraly-font-size-input-placeholder, 14px);\n font-family: var(--nuraly-font-family-input, 'IBM Plex Sans', ui-sans-serif, system-ui);\n }\n\n /* \n * Disabled placeholder styling\n * Applied when input is disabled\n */\n :host([disabled]) ::placeholder {\n color: var(--nuraly-color-input-disabled-placeholder, var(--nuraly-color-input-disabled-placeholder-fallback, #c6c6c6));\n }\n\n /* ========================================\n * ICON VARIANTS AND STATES\n * ======================================== */\n\n /* Warning state icon */\n #warning-icon {\n --nuraly-color-icon: var(--nuraly-color-input-warning-icon, #f1c21b);\n }\n\n /* Error state icon */\n #error-icon {\n --nuraly-color-icon: var(--nuraly-color-input-error-icon, #da1e28);\n }\n\n /* Calendar input type icon */\n #calendar-icon {\n --nuraly-color-icon: var(--nuraly-color-input-calendar-icon, #161616);\n }\n\n /* Password toggle icon */\n #password-icon {\n padding-left: var(--nuraly-input-password-icon-padding-left, var(--nuraly-password-icon-padding-left, 8px));\n padding-right: var(--nuraly-input-password-icon-padding-right, var(--nuraly-password-icon-padding-right, 8px));\n cursor: var(--nuraly-cursor-interactive, pointer);\n --nuraly-color-icon: var(--nuraly-color-input-password-icon, #161616);\n }\n\n /* Copy functionality icon */\n #copy-icon {\n padding-right: var(--nuraly-input-copy-icon-padding-right, var(--nuraly-copy-icon-padding-right, 8px));\n --nuraly-color-icon: var(--nuraly-color-input-copy-icon, #161616);\n cursor: var(--nuraly-cursor-interactive, pointer);\n }\n\n /* Clear functionality icon */\n #clear-icon {\n padding-right: var(--nuraly-input-clear-icon-padding-right, var(--nuraly-clear-icon-padding-right, 8px));\n --nuraly-color-icon: var(--nuraly-color-input-clear-icon, #161616);\n cursor: var(--nuraly-cursor-interactive, pointer);\n }\n\n /* \n * Number input increment/decrement icons container\n * Positioned absolutely for overlay on input\n */\n #number-icons {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: var(--nuraly-cursor-interactive, pointer);\n position: absolute;\n right: 0;\n top: 0;\n height: 100%;\n width: var(--nuraly-input-number-icons-container-width, var(--nuraly-number-icons-container-width, 50px));\n padding-right: var(--nuraly-input-number-icons-container-padding-right, var(--nuraly-number-icons-container-padding-right, 8px));\n }\n\n /* Individual number icons styling */\n #number-icons nr-icon {\n --nuraly-color-icon: var(--nuraly-color-input-number-icons, #161616);\n padding-left: var(--nuraly-input-number-icons-padding-left, var(--nuraly-number-icons-padding-left, 4px));\n padding-right: var(--nuraly-input-number-icons-padding-right, var(--nuraly-number-icons-padding-right, 4px));\n width: var(--nuraly-input-number-icons-width, var(--nuraly-number-icons-width, 24px));\n height: var(--nuraly-input-number-icons-height, var(--nuraly-number-icons-height, 24px));\n }\n\n /* Number icons separator styling */\n #icons-separator {\n color: var(--nuraly-input-number-icons-separator-color, var(--nuraly-number-icons-separator-color));\n padding-bottom: var(--nuraly-input-number-icons-separator-padding-bottom, var(--nuraly-number-icons-separator-padding-bottom));\n padding-left: var(--nuraly-input-number-icons-separator-padding-left, var(--nuraly-number-icons-separator-padding-left));\n padding-right: var(--nuraly-input-number-icons-separator-padding-right, var(--nuraly-number-icons-separator-padding-right));\n }\n\n /* \n * Disabled state for all icons\n * Applied when input is disabled - reduces opacity and disables interaction\n */\n :host([disabled]) #password-icon,\n :host([disabled]) #error-icon,\n :host([disabled]) #warning-icon,\n :host([disabled]) #number-icons,\n :host([disabled]) #calendar-icon,\n :host([disabled]) #copy-icon,\n :host([disabled]) #clear-icon {\n opacity: var(--nuraly-input-disabled-icon-opacity, var(--nuraly-disabled-icon-opacity));\n }\n\n /* Disabled icons cursor override */\n :host([disabled]) #password-icon,\n :host([disabled]) #number-icons,\n :host([disabled]) #copy-icon,\n :host([disabled]) #clear-icon {\n cursor: not-allowed;\n }\n\n /* ========================================\n * INPUT CONTAINER STYLES\n * ======================================== */\n\n /* \n * Input wrapper - contains addons and input container\n * Provides horizontal layout for addon before/after elements\n */\n .input-wrapper {\n display: flex;\n align-items: stretch;\n width: 100%;\n }\n\n /* \n * Addon before element - content before input (outside borders)\n * Styled to visually connect with input\n */\n .input-addon-before {\n background-color: var(--nuraly-input-addon-background-color, var(--nuraly-addon-background-color));\n border: var(--nuraly-input-border, var(--nuraly-border));\n border-right: none;\n border-top-left-radius: var(--nuraly-input-border-radius, var(--nuraly-border-radius));\n border-bottom-left-radius: var(--nuraly-input-border-radius, var(--nuraly-border-radius));\n padding: var(--nuraly-input-addon-padding, var(--nuraly-addon-padding));\n display: flex;\n align-items: center;\n color: var(--nuraly-input-addon-color, var(--nuraly-addon-color));\n font-size: var(--nuraly-input-font-size, var(--nuraly-font-size));\n white-space: nowrap;\n min-width: 0; /* Allow shrinking */\n flex-shrink: 0; /* Prevent shrinking */\n }\n\n /* \n * Addon after element - content after input (outside borders)\n * Styled to visually connect with input\n */\n .input-addon-after {\n background-color: var(--nuraly-input-addon-background-color, var(--nuraly-addon-background-color));\n border: var(--nuraly-input-border, var(--nuraly-border));\n border-left: none;\n border-top-right-radius: var(--nuraly-input-border-radius, var(--nuraly-border-radius));\n border-bottom-right-radius: var(--nuraly-input-border-radius, var(--nuraly-border-radius));\n padding: var(--nuraly-input-addon-padding, var(--nuraly-addon-padding));\n display: flex;\n align-items: center;\n color: var(--nuraly-input-addon-color, var(--nuraly-addon-color));\n font-size: var(--nuraly-input-font-size, var(--nuraly-font-size));\n white-space: nowrap;\n min-width: 0; /* Allow shrinking */\n flex-shrink: 0; /* Prevent shrinking */\n }\n\n /* \n * Input container border radius adjustments when addons are present\n * Removes border radius on sides where addons are attached\n */\n .input-wrapper:has(.input-addon-before) #input-container {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-left: none;\n }\n\n .input-wrapper:has(.input-addon-after) #input-container {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n }\n\n /* \n * Main input container element\n * Uses theme CSS custom properties for comprehensive border and layout control\n */\n #input-container {\n /* Default outlined style */\n border: var(--nuraly-border-width-input, 1px) solid var(--nuraly-color-input-border, #d9d9d9);\n border-radius: var(--nuraly-border-radius-input, 6px);\n \n /* Background and text styling */\n background-color: var(--nuraly-color-input-background, #ffffff);\n color: var(--nuraly-color-input-text, rgba(0, 0, 0, 0.88));\n font-family: var(--nuraly-font-family-input, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto);\n font-size: var(--nuraly-font-size-input, 14px);\n \n /* Layout */\n display: flex;\n position: relative;\n flex: 1; /* Take available space in wrapper */\n min-width: 0; /* Allow shrinking below content size */\n \n /* Transitions for smooth theme changes */\n transition: var(--nuraly-transition-input, border-color 0.2s, box-shadow 0.2s);\n }\n\n /* Carbon Design System override - Carbon specific styles */\n html[data-theme^=\"carbon\"] nr-input #input-container,\n body[data-theme^=\"carbon\"] nr-input #input-container,\n [data-theme^=\"carbon\"] nr-input #input-container,\n .input-wrapper[data-theme^=\"carbon\"] #input-container {\n border: var(--nuraly-border-width-input, 1px) solid var(--nuraly-color-input-border, transparent) !important;\n border-bottom: var(--nuraly-border-width-input, 2px) solid var(--nuraly-color-input-border-bottom, #8d8d8d) !important;\n border-radius: var(--nuraly-border-radius-input, 0) !important;\n background-color: var(--nuraly-color-input-background, #f4f4f4) !important;\n color: var(--nuraly-color-input-text, #161616) !important;\n }\n\n /* Default theme override - Default specific styles */\n html[data-theme^=\"default\"] nr-input #input-container,\n body[data-theme^=\"default\"] nr-input #input-container,\n [data-theme^=\"default\"] nr-input #input-container,\n .input-wrapper[data-theme^=\"default\"] #input-container {\n border: var(--nuraly-border-width-input, 1px) solid var(--nuraly-color-input-border, #d9d9d9) !important;\n border-radius: var(--nuraly-border-radius-input, 6px) !important;\n background-color: var(--nuraly-color-input-background, #ffffff) !important;\n color: var(--nuraly-color-input-text, rgba(0, 0, 0, 0.88)) !important;\n }\n\n /* Carbon input element padding override */\n html[data-theme^=\"carbon\"] nr-input #input-container > input,\n body[data-theme^=\"carbon\"] nr-input #input-container > input,\n [data-theme^=\"carbon\"] nr-input #input-container > input,\n .input-wrapper[data-theme^=\"carbon\"] #input-container > input {\n padding: 7px 16px !important;\n }\n\n /* Default input element padding override */\n html[data-theme^=\"default\"] nr-input #input-container > input,\n body[data-theme^=\"default\"] nr-input #input-container > input,\n [data-theme^=\"default\"] nr-input #input-container > input,\n .input-wrapper[data-theme^=\"default\"] #input-container > input {\n padding: var(--nuraly-spacing-input-medium-vertical, 4px) var(--nuraly-spacing-input-medium-horizontal, 11px) !important;\n }\n\n /* Focus state for input container */\n #input-container:focus-within {\n border-color: var(--nuraly-color-input-border-focus, #1890ff);\n box-shadow: var(--nuraly-shadow-input-focus, 0 0 0 2px rgba(24, 144, 255, 0.2));\n outline: none;\n }\n\n /* Carbon focus override */\n html[data-theme^=\"carbon\"] nr-input #input-container:focus-within,\n body[data-theme^=\"carbon\"] nr-input #input-container:focus-within,\n [data-theme^=\"carbon\"] nr-input #input-container:focus-within,\n .input-wrapper[data-theme^=\"carbon\"] #input-container:focus-within {\n border: var(--nuraly-border-width-input, 2px) solid var(--nuraly-color-input-border-focus, #0f62fe) !important;\n border-radius: var(--nuraly-border-radius-input, 0) !important;\n box-shadow: var(--nuraly-shadow-input-focus, none) !important;\n outline: none !important;\n }\n\n /* Default focus override */\n html[data-theme^=\"default\"] nr-input #input-container:focus-within,\n body[data-theme^=\"default\"] nr-input #input-container:focus-within,\n [data-theme^=\"default\"] nr-input #input-container:focus-within,\n .input-wrapper[data-theme^=\"default\"] #input-container:focus-within {\n border-color: var(--nuraly-color-input-border-focus, #1890ff) !important;\n border-radius: var(--nuraly-border-radius-input, 6px) !important;\n box-shadow: var(--nuraly-shadow-input-focus, 0 0 0 2px rgba(24, 144, 255, 0.2)) !important;\n outline: none !important;\n }\n\n /* \n * Disabled container styles\n * Applied when input is disabled\n */\n :host([disabled]) #input-container {\n background-color: var(--nuraly-color-input-disabled-background, #f5f5f5);\n border-color: var(--nuraly-color-input-disabled-border, #d9d9d9);\n color: var(--nuraly-color-input-disabled-text, rgba(0, 0, 0, 0.25));\n cursor: not-allowed;\n }\n\n /* ========================================\n * INPUT VARIANT STYLES\n * ======================================== */\n\n /* \n * Outlined variant - full border around input\n * Default: light border, focus: blue border\n */\n :host([variant='outlined']) #input-container {\n border: var(--nuraly-input-outlined-border, var(--nuraly-outlined-border));\n border-radius: var(--nuraly-input-outlined-border-radius, var(--nuraly-outlined-border-radius));\n background-color: var(--nuraly-input-outlined-background, var(--nuraly-outlined-background));\n }\n\n :host([variant='outlined']) .input-wrapper {\n background-color: transparent;\n }\n\n :host([variant='outlined']:not([state='error'])) #input-container:focus-within {\n border: var(--nuraly-input-outlined-focus-border, var(--nuraly-outlined-focus-border));\n }\n\n /* \n * Filled variant - background with bottom border only\n * Subtle background with bottom border indication\n */\n :host([variant='filled']) #input-container {\n background-color: var(--nuraly-input-filled-background, var(--nuraly-filled-background));\n border-radius: var(--nuraly-input-filled-border-radius, var(--nuraly-filled-border-radius));\n border-bottom: var(--nuraly-input-filled-border-bottom, var(--nuraly-filled-border-bottom));\n border-top: none;\n border-left: none;\n border-right: none;\n }\n\n :host([variant='filled']) .input-wrapper {\n background-color: transparent;\n }\n\n :host([variant='filled']:not([state='error'])) #input-container:focus-within {\n border-bottom: var(--nuraly-input-filled-focus-border-bottom, var(--nuraly-filled-focus-border-bottom));\n border-top: none;\n border-left: none;\n border-right: none;\n }\n\n /* \n * Borderless variant - no borders, focus with outline\n * Clean appearance with focus indication via outline\n */\n :host([variant='borderless']) #input-container {\n background-color: var(--nuraly-input-borderless-background, var(--nuraly-borderless-background));\n border: none;\n border-radius: var(--nuraly-input-borderless-border-radius, var(--nuraly-borderless-border-radius));\n }\n\n :host([variant='borderless']) .input-wrapper {\n background-color: transparent;\n }\n\n :host([variant='borderless']:not([state='error'])) #input-container:focus-within {\n outline: var(--nuraly-input-borderless-focus-outline, var(--nuraly-borderless-focus-outline));\n border: none;\n }\n\n /* \n * Underlined variant - bottom border only (default/current behavior)\n * Maintains existing behavior as default\n */\n :host([variant='underlined']) #input-container {\n border-bottom: var(--nuraly-input-underlined-border-bottom, var(--nuraly-underlined-border-bottom));\n border-top: none;\n border-left: none;\n border-right: none;\n border-radius: 0;\n }\n\n :host([variant='underlined']:not([state='error'])) #input-container:focus-within {\n border-bottom: var(--nuraly-input-underlined-focus-border-bottom, var(--nuraly-underlined-focus-border-bottom));\n border-top: none;\n border-left: none;\n border-right: none;\n }\n\n /* ========================================\n * INPUT ELEMENT STYLES\n * ======================================== */\n\n /* \n * Base input element styling\n * Full width with no default borders, using container for styling\n */\n input {\n width: 100%;\n border: none;\n outline: none;\n color: var(--nuraly-input-text-color, var(--nuraly-text-color));\n font-family: var(--nuraly-input-font-family, var(--nuraly-font-family));\n font-size: var(--nuraly-input-font-size, var(--nuraly-font-size));\n }\n\n /* Remove default number input spinners */\n /* Chrome, Safari, Edge, Opera */\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n \n /* Firefox */\n input[type='number'] {\n -moz-appearance: textfield;\n }\n\n /* ========================================\n * STATE STYLES\n * ======================================== */\n\n /* \n * Error state styling - works with all variants\n * Applied when state='error' and not disabled\n */\n :host(:not([disabled])[state='error']) #input-container {\n border: var(--nuraly-input-error-border, var(--nuraly-error-border)) !important;\n outline: none !important;\n }\n\n /* Override variant-specific error state styling */\n :host([variant='borderless'][state='error']) #input-container {\n border: var(--nuraly-input-error-border, var(--nuraly-error-border)) !important;\n outline: none !important;\n }\n\n :host([variant='underlined'][state='error']) #input-container,\n :host([variant='filled'][state='error']) #input-container {\n border-top: none !important;\n border-left: none !important;\n border-right: none !important;\n border-bottom: var(--nuraly-input-error-border, var(--nuraly-error-border)) !important;\n }\n\n /* \n * Number input icon positioning adjustments for error/warning states\n * When validation states are present, adjust icon positioning\n */\n :host([state='error']) input[type='number'] ~ #number-icons,\n :host([state='warning']) input[type='number'] ~ #number-icons {\n position: static;\n padding-left: var(--nuraly-input-number-icons-container-padding-left, var(--nuraly-number-icons-container-padding-left));\n }\n\n /* ========================================\n * SLOTTED CONTENT STYLES\n * ======================================== */\n\n /* \n * Label slot styling\n * Applied to slotted label elements\n */\n ::slotted([slot='label']) {\n color: var(--nuraly-input-label-color, var(--nuraly-label-color));\n font-size: var(--nuraly-input-label-font-size, var(--nuraly-label-font-size));\n padding-bottom: var(--nuraly-input-label-padding-bottom, var(--nuraly-label-padding-bottom));\n }\n\n /* \n * Helper text slot styling\n * Applied to slotted helper text elements\n */\n ::slotted([slot='helper-text']) {\n color: var(--nuraly-input-helper-text-color, var(--nuraly-helper-text-color));\n font-size: var(--nuraly-input-helper-text-font-size, var(--nuraly-helper-text-font-size));\n padding-top: var(--nuraly-input-helper-text-padding-top, var(--nuraly-helper-text-padding-top));\n \n /* Prevent text overflow and ensure proper wrapping without affecting parent width */\n word-wrap: break-word;\n word-break: break-word;\n overflow-wrap: break-word;\n hyphens: auto;\n white-space: normal;\n max-width: 100%;\n width: 0;\n min-width: 100%;\n box-sizing: border-box;\n line-height: 1.4;\n }\n\n /* \n * State-specific helper text colors\n * Override helper text color based on validation state\n */\n :host([state='error']) ::slotted([slot='helper-text']) {\n color: var(--nuraly-input-error-helper-text-color, var(--nuraly-error-helper-text-color));\n }\n\n :host([state='warning']) ::slotted([slot='helper-text']) {\n color: var(--nuraly-input-warning-helper-text-color, var(--nuraly-warning-helper-text-color));\n }\n\n /* \n * Disabled state for slotted content\n * Applied when input is disabled\n */\n :host([disabled]) ::slotted([slot='helper-text']) {\n color: var(--nuraly-input-disabled-helper-text-color, var(--nuraly-disabled-helper-text-color));\n }\n\n :host([disabled]) ::slotted([slot='label']) {\n color: var(--nuraly-input-disabled-label-color, var(--nuraly-disabled-label-color));\n }\n\n /* \n * Input prefix wrapper styling\n * Centers the prefix content vertically and horizontally\n */\n .input-prefix {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n /* \n * Prefix slot styling\n * Applied to slotted prefix content (icons, text, etc.)\n */\n ::slotted([slot='prefix']) {\n display: flex;\n align-items: center;\n padding-right: var(--nuraly-input-prefix-padding-right, var(--nuraly-prefix-padding-right));\n color: var(--nuraly-input-prefix-color, var(--nuraly-prefix-color));\n font-size: var(--nuraly-input-prefix-font-size, var(--nuraly-prefix-font-size));\n flex-shrink: 0;\n }\n\n /* \n * Input suffix wrapper styling\n * Centers the suffix content vertically and horizontally\n */\n .input-suffix {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n /* \n * Suffix slot styling\n * Applied to slotted suffix content (icons, text, etc.)\n */\n ::slotted([slot='suffix']) {\n display: flex;\n align-items: center;\n padding-left: var(--nuraly-input-suffix-padding-left, var(--nuraly-suffix-padding-left));\n color: var(--nuraly-input-suffix-color, var(--nuraly-suffix-color));\n font-size: var(--nuraly-input-suffix-font-size, var(--nuraly-suffix-font-size));\n flex-shrink: 0;\n }\n\n /* \n * Disabled state for prefix and suffix slots\n * Applied when input is disabled\n */\n :host([disabled]) ::slotted([slot='prefix']),\n :host([disabled]) ::slotted([slot='suffix']) {\n opacity: var(--nuraly-input-disabled-icon-opacity, var(--nuraly-disabled-icon-opacity));\n color: var(--nuraly-input-disabled-prefix-suffix-color, var(--nuraly-disabled-prefix-suffix-color));\n }\n`;\n\n/**\n * Size variation styles for the input component\n * Defines padding and spacing for different input sizes\n */\nconst sizeInputStyle = css`\n /* ========================================\n * SIZE VARIATIONS\n * ======================================== */\n\n /* Large input size variant */\n div[data-size='large'] {\n padding-top: var(--nuraly-input-large-padding-top, var(--nuraly-large-padding-top));\n padding-bottom: var(--nuraly-input-large-padding-bottom, var(--nuraly-large-padding-bottom));\n padding-left: var(--nuraly-input-large-padding-left, var(--nuraly-large-padding-left));\n padding-right: var(--nuraly-input-large-padding-right, var(--nuraly-large-padding-right));\n }\n\n /* Medium input size variant (default) */\n div[data-size='medium'] {\n padding-top: var(--nuraly-input-medium-padding-top, var(--nuraly-medium-padding-top));\n padding-bottom: var(--nuraly-input-medium-padding-bottom, var(--nuraly-medium-padding-bottom));\n padding-left: var(--nuraly-input-medium-padding-left, var(--nuraly-medium-padding-left));\n padding-right: var(--nuraly-input-medium-padding-right, var(--nuraly-medium-padding-right));\n }\n\n /* Small input size variant */\n div[data-size='small'] {\n padding-top: var(--nuraly-input-small-padding-top, var(--nuraly-small-padding-top));\n padding-bottom: var(--nuraly-input-small-padding-bottom, var(--nuraly-small-padding-bottom));\n padding-left: var(--nuraly-input-small-padding-left, var(--nuraly-small-padding-left));\n padding-right: var(--nuraly-input-small-padding-right, var(--nuraly-small-padding-right));\n }\n\n /* Carbon Design System - Size-specific padding overrides */\n html[data-theme^=\"carbon\"] nr-input div[data-size='medium'],\n body[data-theme^=\"carbon\"] nr-input div[data-size='medium'],\n [data-theme^=\"carbon\"] div[data-size='medium'] {\n padding: 4px 8px !important;\n }\n\n /* \n * Character count display\n * Shows character count and limit information\n */\n .character-count {\n font-size: var(--nuraly-input-character-count-font-size, var(--nuraly-character-count-font-size));\n color: var(--nuraly-input-character-count-color, var(--nuraly-character-count-color));\n text-align: right;\n margin-top: var(--nuraly-input-character-count-margin-top, var(--nuraly-character-count-margin-top));\n font-family: var(--nuraly-input-font-family, var(--nuraly-font-family));\n }\n\n /* Character count over limit styling */\n .character-count[data-over-limit] {\n color: var(--nuraly-input-character-count-over-limit-color, var(--nuraly-character-count-over-limit-color));\n }\n\n /* ========================================\n * VALIDATION MESSAGE STYLES\n * ======================================== */\n\n /* \n * Base validation message styling\n * Common styles for error and warning messages\n */\n .validation-message {\n font-size: var(--nuraly-input-validation-message-font-size, var(--nuraly-validation-message-font-size, 0.875rem));\n font-family: var(--nuraly-input-font-family, var(--nuraly-font-family));\n margin-top: var(--nuraly-input-validation-message-margin-top, var(--nuraly-validation-message-margin-top, 0.25rem));\n padding: var(--nuraly-input-validation-message-padding, var(--nuraly-validation-message-padding, 0));\n \n /* Prevent text overflow and ensure proper wrapping without affecting parent width */\n word-wrap: break-word;\n word-break: break-word;\n overflow-wrap: break-word;\n hyphens: auto;\n white-space: normal;\n max-width: 100%;\n width: 0;\n min-width: 100%;\n box-sizing: border-box;\n line-height: var(--nuraly-input-validation-message-line-height, var(--nuraly-validation-message-line-height, 1.4));\n }\n\n /* \n * Error validation message styling\n * Applied when validation message has error class\n */\n .validation-message.error {\n color: var(--nuraly-input-error-message-color, var(--nuraly-error-message-color, var(--nuraly-input-error-color, var(--nuraly-error-color, #dc2626))));\n }\n\n /* \n * Warning validation message styling\n * Applied when validation message has warning class\n */\n .validation-message.warning {\n color: var(--nuraly-input-warning-message-color, var(--nuraly-warning-message-color, var(--nuraly-input-warning-color, var(--nuraly-warning-color, #d97706))));\n }\n\n /* \n * Disabled state for validation messages\n * Applied when input is disabled\n */\n :host([disabled]) .validation-message {\n opacity: var(--nuraly-input-disabled-validation-message-opacity, var(--nuraly-disabled-validation-message-opacity, 0.6));\n color: var(--nuraly-input-disabled-validation-message-color, var(--nuraly-disabled-validation-message-color));\n }\n\n /* \n * Validation icon styles\n * Base styles for validation feedback icons\n */\n .validation-icon {\n width: 16px;\n height: 16px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n /* \n * Loading validation icon with hourglass animation\n * Applied when async validation is in progress\n */\n .validation-icon.validation-loading {\n color: var(--nuraly-input-primary-color, var(--nuraly-primary-color, #3b82f6));\n animation: validation-hourglass 2s ease-in-out infinite;\n transform-origin: center;\n }\n\n /* \n * Error validation icon styling\n * Applied when validation fails\n */\n .validation-icon.validation-error {\n color: var(--nuraly-input-error-color, var(--nuraly-error-color, #dc2626));\n }\n\n /* \n * Warning validation icon styling\n * Applied when validation has warnings\n */\n .validation-icon.validation-warning {\n color: var(--nuraly-input-warning-color, var(--nuraly-warning-color, #d97706));\n }\n\n /* \n * Success validation icon styling\n * Applied when validation passes\n */\n .validation-icon.validation-success {\n color: var(--nuraly-input-success-color, var(--nuraly-success-color, #16a34a));\n }\n\n /* \n * Hourglass animation for validation loading\n * Gentle pulsing effect without rotation for clean appearance\n */\n @keyframes validation-hourglass {\n 0% {\n opacity: 0.7;\n transform: scale(1);\n }\n 25% {\n opacity: 1;\n transform: scale(1.03);\n }\n 50% {\n opacity: 0.8;\n transform: scale(1);\n }\n 75% {\n opacity: 1;\n transform: scale(1.03);\n }\n 100% {\n opacity: 0.7;\n transform: scale(1);\n }\n }\n\n /* \n * Alternative pulse animation option\n * Uncomment this and change animation above to use pulse instead of hourglass\n */\n /*\n @keyframes validation-pulse {\n 0%, 100% {\n opacity: 1;\n transform: scale(1);\n }\n 50% {\n opacity: 0.7;\n transform: scale(1.1);\n }\n }\n */\n`;\n\nexport const styles = [inputStyle, sizeInputStyle];\n"]}
|
|
1
|
+
{"version":3,"file":"input.style.js","sourceRoot":"","sources":["../../../../src/components/input/input.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AAEH,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAujBrB,CAAC;AAEF;;;GAGG;AACH,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2LzB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Input component styles for the Hybrid UI Library\n * \n * This file contains all the styling for the nr-input component, including:\n * - Base input styles with CSS custom properties for theming\n * - Multiple input states (default, warning, error)\n * - Size variations (small, medium, large)\n * - Different input types (text, password, number, calendar)\n * - Icon positioning and styling with comprehensive CSS variable overrides\n * - Focus, disabled, and validation states\n * - Dark theme support\n * \n * Icon Color Customization:\n * The input component provides multiple levels of CSS variable overrides for icon colors:\n * \n * Global Level:\n * - --nuraly-color-input-icon: Controls all icons in input components\n * - --nuraly-size-input-icon: Controls size of all icons in input components\n * - --nuraly-color-input-icon-hover: Hover state for all icons\n * - --nuraly-color-input-icon-active: Active state for all icons\n * - --nuraly-color-input-icon-disabled: Disabled state for all icons\n * \n * Specific Icon Types:\n * - --nuraly-color-input-warning-icon: Warning state icons\n * - --nuraly-color-input-error-icon: Error state icons\n * - --nuraly-color-input-calendar-icon: Calendar input type icons\n * - --nuraly-color-input-password-icon: Password toggle icons\n * - --nuraly-color-input-copy-icon: Copy functionality icons\n * - --nuraly-color-input-clear-icon: Clear functionality icons\n * - --nuraly-color-input-number-icons: Number input increment/decrement icons\n * \n * Usage Examples:\n * ```css\n * :root {\n * --nuraly-color-input-icon: #0066cc;\n * --nuraly-color-input-error-icon: #cc0000;\n * --nuraly-size-input-icon: 20px;\n * }\n * \n * .custom-input {\n * --nuraly-color-input-icon: #purple;\n * }\n * ```\n * \n * The styling system uses CSS custom properties with fallbacks to allow\n * for both global and local customization of input appearance.\n */\n\nconst inputStyle = css`\n /* \n * Host element base styles\n * Container for the input component with flexible layout\n */\n :host {\n display: flex;\n flex-direction: column;\n font-family: var(--nuraly-font-family-input, 'IBM Plex Sans', ui-sans-serif, system-ui);\n }\n\n /* \n * Base input wrapper and input element styles\n * Background applied to wrapper to cover entire container including addons\n * Uses theme CSS custom properties for comprehensive theming support\n */\n .input-wrapper {\n background-color: var(--nuraly-color-input-background, var(--nuraly-color-input-background-fallback, #ffffff));\n }\n\n\n #input-container > input {\n background-color: transparent;\n border: var(--nuraly-input-border, none);\n outline: var(--nuraly-input-outline, none);\n flex: 1;\n min-width: 0;\n width: 100%;\n \n /* Typography from theme */\n font-family: var(--nuraly-font-family-input, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto);\n font-size: var(--nuraly-font-size-input, 14px);\n color: var(--nuraly-color-input-text, var(--nuraly-color-input-text-fallback, rgba(0, 0, 0, 0.88)));\n \n /* Padding from theme */\n padding: var(--nuraly-spacing-input-medium-vertical, 4px) var(--nuraly-spacing-input-medium-horizontal, 11px);\n }\n\n /* \n * Disabled state styles for wrapper and input\n * Applied when input is disabled - removes interactivity and applies muted colors\n */\n :host([disabled]) .input-wrapper {\n background-color: var(--nuraly-color-input-disabled-background, var(--nuraly-color-input-disabled-background-fallback, #f4f4f4));\n }\n\n :host([disabled]) #input-container > input {\n background-color: transparent;\n cursor: var(--nuraly-cursor-disabled, not-allowed);\n color: var(--nuraly-color-input-disabled-text, var(--nuraly-color-input-disabled-text-fallback, rgba(0, 0, 0, 0.25)));\n }\n\n /* \n * Icon base styles\n * Common styling for all icons within the input component\n * Provides comprehensive CSS variable override system\n */\n nr-icon {\n display: flex;\n align-items: center;\n \n /* Global icon color override - applies to all icons in input */\n --nuraly-color-icon: var(--nuraly-color-input-icon, var(--nuraly-color-icon, var(--nuraly-color-icon-fallback, #161616)));\n \n /* Size override for input icons */\n --nuraly-icon-size: var(--nuraly-size-input-icon, var(--nuraly-icon-size, var(--nuraly-icon-size-fallback, 18px)));\n \n /* Interactive state overrides */\n --nuraly-color-icon-hover: var(--nuraly-color-input-icon-hover, var(--nuraly-color-icon-hover, var(--nuraly-color-icon-hover-fallback, #0f62fe)));\n --nuraly-color-icon-active: var(--nuraly-color-input-icon-active, var(--nuraly-color-icon-active, var(--nuraly-color-icon-active-fallback, #054ada)));\n --nuraly-color-icon-disabled: var(--nuraly-color-input-icon-disabled, var(--nuraly-color-icon-disabled, var(--nuraly-color-icon-disabled-fallback, #c6c6c6)));\n }\n\n /* \n * Placeholder styling\n * Customizable placeholder text appearance\n */\n ::placeholder {\n color: var(--nuraly-color-input-placeholder, var(--nuraly-color-input-placeholder-fallback, #a8a8a8));\n font-size: var(--nuraly-font-size-input-placeholder, 14px);\n font-family: var(--nuraly-font-family-input, 'IBM Plex Sans', ui-sans-serif, system-ui);\n }\n\n /* \n * Disabled placeholder styling\n * Applied when input is disabled\n */\n :host([disabled]) ::placeholder {\n color: var(--nuraly-color-input-disabled-placeholder, var(--nuraly-color-input-disabled-placeholder-fallback, #c6c6c6));\n }\n\n /* ========================================\n * ICON VARIANTS AND STATES\n * ======================================== */\n\n /* Warning state icon */\n #warning-icon {\n --nuraly-color-icon: var(--nuraly-color-input-warning-icon, #f1c21b);\n }\n\n /* Error state icon */\n #error-icon {\n --nuraly-color-icon: var(--nuraly-color-input-error-icon, #da1e28);\n }\n\n /* Calendar input type icon */\n #calendar-icon {\n --nuraly-color-icon: var(--nuraly-color-input-calendar-icon, #161616);\n }\n\n /* Password toggle icon */\n #password-icon {\n padding-left: var(--nuraly-input-password-icon-padding-left, var(--nuraly-password-icon-padding-left, 8px));\n padding-right: var(--nuraly-input-password-icon-padding-right, var(--nuraly-password-icon-padding-right, 8px));\n cursor: var(--nuraly-cursor-interactive, pointer);\n --nuraly-color-icon: var(--nuraly-color-input-password-icon, #161616);\n }\n\n /* Copy functionality icon */\n #copy-icon {\n padding-right: var(--nuraly-input-copy-icon-padding-right, var(--nuraly-copy-icon-padding-right, 8px));\n --nuraly-color-icon: var(--nuraly-color-input-copy-icon, #161616);\n cursor: var(--nuraly-cursor-interactive, pointer);\n }\n\n /* Clear functionality icon */\n #clear-icon {\n padding-right: var(--nuraly-input-clear-icon-padding-right, var(--nuraly-clear-icon-padding-right, 8px));\n --nuraly-color-icon: var(--nuraly-color-input-clear-icon, #161616);\n cursor: var(--nuraly-cursor-interactive, pointer);\n }\n\n /* \n * Number input increment/decrement icons container\n * Positioned absolutely for overlay on input\n */\n #number-icons {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: var(--nuraly-cursor-interactive, pointer);\n position: absolute;\n right: 0;\n top: 0;\n height: 100%;\n width: var(--nuraly-input-number-icons-container-width, var(--nuraly-number-icons-container-width, 50px));\n padding-right: var(--nuraly-input-number-icons-container-padding-right, var(--nuraly-number-icons-container-padding-right, 8px));\n }\n\n /* Individual number icons styling */\n #number-icons nr-icon {\n --nuraly-color-icon: var(--nuraly-color-input-number-icons, #161616);\n padding-left: var(--nuraly-input-number-icons-padding-left, var(--nuraly-number-icons-padding-left, 4px));\n padding-right: var(--nuraly-input-number-icons-padding-right, var(--nuraly-number-icons-padding-right, 4px));\n width: var(--nuraly-input-number-icons-width, var(--nuraly-number-icons-width, 24px));\n height: var(--nuraly-input-number-icons-height, var(--nuraly-number-icons-height, 24px));\n }\n\n /* Number icons separator styling */\n #icons-separator {\n color: var(--nuraly-input-number-icons-separator-color, var(--nuraly-number-icons-separator-color));\n padding-bottom: var(--nuraly-input-number-icons-separator-padding-bottom, var(--nuraly-number-icons-separator-padding-bottom));\n padding-left: var(--nuraly-input-number-icons-separator-padding-left, var(--nuraly-number-icons-separator-padding-left));\n padding-right: var(--nuraly-input-number-icons-separator-padding-right, var(--nuraly-number-icons-separator-padding-right));\n }\n\n /* \n * Disabled state for all icons\n * Applied when input is disabled - reduces opacity and disables interaction\n */\n :host([disabled]) #password-icon,\n :host([disabled]) #error-icon,\n :host([disabled]) #warning-icon,\n :host([disabled]) #number-icons,\n :host([disabled]) #calendar-icon,\n :host([disabled]) #copy-icon,\n :host([disabled]) #clear-icon {\n opacity: var(--nuraly-input-disabled-icon-opacity, var(--nuraly-disabled-icon-opacity));\n }\n\n /* Disabled icons cursor override */\n :host([disabled]) #password-icon,\n :host([disabled]) #number-icons,\n :host([disabled]) #copy-icon,\n :host([disabled]) #clear-icon {\n cursor: not-allowed;\n }\n\n /* ========================================\n * INPUT CONTAINER STYLES\n * ======================================== */\n\n /* \n * Input wrapper - contains addons and input container\n * Provides horizontal layout for addon before/after elements\n */\n .input-wrapper {\n display: flex;\n align-items: stretch;\n width: 100%;\n }\n\n /* \n * Addon before element - content before input (outside borders)\n * Styled to visually connect with input\n */\n .input-addon-before {\n background-color: var(--nuraly-input-addon-background-color, var(--nuraly-addon-background-color));\n border: var(--nuraly-input-border, var(--nuraly-border));\n border-right: none;\n border-top-left-radius: var(--nuraly-input-border-radius, var(--nuraly-border-radius));\n border-bottom-left-radius: var(--nuraly-input-border-radius, var(--nuraly-border-radius));\n padding: var(--nuraly-input-addon-padding, var(--nuraly-addon-padding));\n display: flex;\n align-items: center;\n color: var(--nuraly-input-addon-color, var(--nuraly-addon-color));\n font-size: var(--nuraly-input-font-size, var(--nuraly-font-size));\n white-space: nowrap;\n min-width: 0; /* Allow shrinking */\n flex-shrink: 0; /* Prevent shrinking */\n }\n\n /* \n * Addon after element - content after input (outside borders)\n * Styled to visually connect with input\n */\n .input-addon-after {\n background-color: var(--nuraly-input-addon-background-color, var(--nuraly-addon-background-color));\n border: var(--nuraly-input-border, var(--nuraly-border));\n border-left: none;\n border-top-right-radius: var(--nuraly-input-border-radius, var(--nuraly-border-radius));\n border-bottom-right-radius: var(--nuraly-input-border-radius, var(--nuraly-border-radius));\n padding: var(--nuraly-input-addon-padding, var(--nuraly-addon-padding));\n display: flex;\n align-items: center;\n color: var(--nuraly-input-addon-color, var(--nuraly-addon-color));\n font-size: var(--nuraly-input-font-size, var(--nuraly-font-size));\n white-space: nowrap;\n min-width: 0; /* Allow shrinking */\n flex-shrink: 0; /* Prevent shrinking */\n }\n\n /* \n * Input container border radius adjustments when addons are present\n * Removes border radius on sides where addons are attached\n */\n .input-wrapper:has(.input-addon-before) #input-container {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-left: none;\n }\n\n .input-wrapper:has(.input-addon-after) #input-container {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n }\n\n /* \n * Main input container element\n * Uses theme CSS custom properties for comprehensive border and layout control\n */\n #input-container {\n /* Default outlined style */\n border: var(--nuraly-border-width-input, 1px) solid var(--nuraly-color-input-border, #d9d9d9);\n border-radius: var(--nuraly-border-radius-input, 6px);\n \n /* Background and text styling */\n background-color: var(--nuraly-color-input-background, #ffffff);\n color: var(--nuraly-color-input-text, rgba(0, 0, 0, 0.88));\n font-family: var(--nuraly-font-family-input, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto);\n font-size: var(--nuraly-font-size-input, 14px);\n \n /* Layout */\n display: flex;\n position: relative;\n flex: 1; /* Take available space in wrapper */\n min-width: 0; /* Allow shrinking below content size */\n \n /* Transitions for smooth theme changes */\n transition: var(--nuraly-transition-input, border-color 0.2s, box-shadow 0.2s);\n }\n\n /* Focus state for input container */\n #input-container:focus-within {\n border-color: var(--nuraly-color-input-border-focus, #1890ff);\n box-shadow: var(--nuraly-shadow-input-focus, 0 0 0 2px rgba(24, 144, 255, 0.2));\n outline: none;\n }\n\n /* \n * Disabled container styles\n * Applied when input is disabled\n */\n :host([disabled]) #input-container {\n background-color: var(--nuraly-color-input-disabled-background, #f5f5f5);\n border-color: var(--nuraly-color-input-disabled-border, #d9d9d9);\n color: var(--nuraly-color-input-disabled-text, rgba(0, 0, 0, 0.25));\n cursor: not-allowed;\n }\n\n /* ========================================\n * INPUT VARIANT STYLES\n * ======================================== */\n\n /* \n * Outlined variant - full border around input\n * Default: light border, focus: blue border\n */\n :host([variant='outlined']) #input-container {\n border: var(--nuraly-input-outlined-border, var(--nuraly-outlined-border, 1px solid #d1d5db));\n border-radius: var(--nuraly-input-outlined-border-radius, var(--nuraly-outlined-border-radius, var(--nuraly-border-radius-input, 6px)));\n background-color: var(--nuraly-input-outlined-background, var(--nuraly-outlined-background, transparent));\n }\n\n :host([variant='outlined']) .input-wrapper {\n background-color: transparent;\n }\n\n :host([variant='outlined']:not([state='error'])) #input-container:focus-within {\n border-color: var(--nuraly-color-input-border-focus, #3b82f6);\n box-shadow: var(--nuraly-shadow-input-focus, 0 0 0 1px #3b82f6);\n }\n\n /* \n * Filled variant - background with bottom border only\n * Subtle background with bottom border indication\n */\n :host([variant='filled']) #input-container {\n background-color: var(--nuraly-input-filled-background, var(--nuraly-filled-background));\n border-radius: var(--nuraly-input-filled-border-radius, var(--nuraly-filled-border-radius, var(--nuraly-border-radius-input, 6px)));\n border-bottom: var(--nuraly-input-filled-border-bottom, var(--nuraly-filled-border-bottom));\n border-top: none;\n border-left: none;\n border-right: none;\n }\n\n :host([variant='filled']) .input-wrapper {\n background-color: transparent;\n }\n\n :host([variant='filled']:not([state='error'])) #input-container:focus-within {\n border-bottom: var(--nuraly-input-filled-focus-border-bottom, var(--nuraly-filled-focus-border-bottom));\n border-top: none;\n border-left: none;\n border-right: none;\n }\n\n /* \n * Borderless variant - no borders, focus with outline\n * Clean appearance with focus indication via outline\n */\n :host([variant='borderless']) #input-container {\n background-color: var(--nuraly-input-borderless-background, var(--nuraly-borderless-background));\n border: none;\n border-radius: var(--nuraly-input-borderless-border-radius, var(--nuraly-borderless-border-radius));\n }\n\n :host([variant='borderless']) .input-wrapper {\n background-color: transparent;\n }\n\n :host([variant='borderless']:not([state='error'])) #input-container:focus-within {\n outline: var(--nuraly-input-borderless-focus-outline, var(--nuraly-borderless-focus-outline));\n border: none;\n }\n\n /* \n * Underlined variant - bottom border only (default/current behavior)\n * Maintains existing behavior as default\n */\n :host([variant='underlined']) #input-container {\n border-bottom: var(--nuraly-input-underlined-border-bottom, var(--nuraly-underlined-border-bottom));\n border-top: none;\n border-left: none;\n border-right: none;\n border-radius: var(--nuraly-input-underlined-border-radius, 0);\n }\n\n :host([variant='underlined']:not([state='error'])) #input-container:focus-within {\n border-bottom: var(--nuraly-input-underlined-focus-border-bottom, var(--nuraly-underlined-focus-border-bottom));\n border-top: none;\n border-left: none;\n border-right: none;\n }\n\n /* ========================================\n * INPUT ELEMENT STYLES\n * ======================================== */\n\n /* \n * Base input element styling\n * Full width with no default borders, using container for styling\n */\n input {\n width: 100%;\n border: none;\n outline: none;\n color: var(--nuraly-input-text-color, var(--nuraly-text-color));\n font-family: var(--nuraly-input-font-family, var(--nuraly-font-family));\n font-size: var(--nuraly-input-font-size, var(--nuraly-font-size));\n }\n\n /* Remove default number input spinners */\n /* Chrome, Safari, Edge, Opera */\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n \n /* Firefox */\n input[type='number'] {\n -moz-appearance: textfield;\n }\n\n /* ========================================\n * STATE STYLES\n * ======================================== */\n\n /* \n * Error state styling - works with all variants\n * Applied when state='error' and not disabled\n */\n :host(:not([disabled])[state='error']) #input-container {\n border: var(--nuraly-input-error-border, var(--nuraly-error-border)) !important;\n outline: none !important;\n }\n\n /* Override variant-specific error state styling */\n :host([variant='borderless'][state='error']) #input-container {\n border: var(--nuraly-input-error-border, var(--nuraly-error-border)) !important;\n outline: none !important;\n }\n\n :host([variant='underlined'][state='error']) #input-container,\n :host([variant='filled'][state='error']) #input-container {\n border-top: none !important;\n border-left: none !important;\n border-right: none !important;\n border-bottom: var(--nuraly-input-error-border, var(--nuraly-error-border)) !important;\n }\n\n /* \n * Number input icon positioning adjustments for error/warning states\n * When validation states are present, adjust icon positioning\n */\n :host([state='error']) input[type='number'] ~ #number-icons,\n :host([state='warning']) input[type='number'] ~ #number-icons {\n position: static;\n padding-left: var(--nuraly-input-number-icons-container-padding-left, var(--nuraly-number-icons-container-padding-left));\n }\n\n /* ========================================\n * SLOTTED CONTENT STYLES\n * ======================================== */\n\n /* \n * Label slot styling\n * Applied to slotted label elements\n */\n ::slotted([slot='label']) {\n color: var(--nuraly-input-label-color, var(--nuraly-label-color));\n font-size: var(--nuraly-input-label-font-size, var(--nuraly-label-font-size));\n padding-bottom: var(--nuraly-input-label-padding-bottom, var(--nuraly-label-padding-bottom));\n }\n\n /* \n * Helper text slot styling\n * Applied to slotted helper text elements\n */\n ::slotted([slot='helper-text']) {\n color: var(--nuraly-input-helper-text-color, var(--nuraly-helper-text-color));\n font-size: var(--nuraly-input-helper-text-font-size, var(--nuraly-helper-text-font-size));\n padding-top: var(--nuraly-input-helper-text-padding-top, var(--nuraly-helper-text-padding-top));\n \n /* Prevent text overflow and ensure proper wrapping without affecting parent width */\n word-wrap: break-word;\n word-break: break-word;\n overflow-wrap: break-word;\n hyphens: auto;\n white-space: normal;\n max-width: 100%;\n width: 0;\n min-width: 100%;\n box-sizing: border-box;\n line-height: 1.4;\n }\n\n /* \n * State-specific helper text colors\n * Override helper text color based on validation state\n */\n :host([state='error']) ::slotted([slot='helper-text']) {\n color: var(--nuraly-input-error-helper-text-color, var(--nuraly-error-helper-text-color));\n }\n\n :host([state='warning']) ::slotted([slot='helper-text']) {\n color: var(--nuraly-input-warning-helper-text-color, var(--nuraly-warning-helper-text-color));\n }\n\n /* \n * Disabled state for slotted content\n * Applied when input is disabled\n */\n :host([disabled]) ::slotted([slot='helper-text']) {\n color: var(--nuraly-input-disabled-helper-text-color, var(--nuraly-disabled-helper-text-color));\n }\n\n :host([disabled]) ::slotted([slot='label']) {\n color: var(--nuraly-input-disabled-label-color, var(--nuraly-disabled-label-color));\n }\n\n /* \n * Input prefix wrapper styling\n * Centers the prefix content vertically and horizontally\n */\n .input-prefix {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n /* \n * Prefix slot styling\n * Applied to slotted prefix content (icons, text, etc.)\n */\n ::slotted([slot='prefix']) {\n display: flex;\n align-items: center;\n padding-right: var(--nuraly-input-prefix-padding-right, var(--nuraly-prefix-padding-right));\n color: var(--nuraly-input-prefix-color, var(--nuraly-prefix-color));\n font-size: var(--nuraly-input-prefix-font-size, var(--nuraly-prefix-font-size));\n flex-shrink: 0;\n }\n\n /* \n * Input suffix wrapper styling\n * Centers the suffix content vertically and horizontally\n */\n .input-suffix {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n /* \n * Suffix slot styling\n * Applied to slotted suffix content (icons, text, etc.)\n */\n ::slotted([slot='suffix']) {\n display: flex;\n align-items: center;\n padding-left: var(--nuraly-input-suffix-padding-left, var(--nuraly-suffix-padding-left));\n color: var(--nuraly-input-suffix-color, var(--nuraly-suffix-color));\n font-size: var(--nuraly-input-suffix-font-size, var(--nuraly-suffix-font-size));\n flex-shrink: 0;\n }\n\n /* \n * Disabled state for prefix and suffix slots\n * Applied when input is disabled\n */\n :host([disabled]) ::slotted([slot='prefix']),\n :host([disabled]) ::slotted([slot='suffix']) {\n opacity: var(--nuraly-input-disabled-icon-opacity, var(--nuraly-disabled-icon-opacity));\n color: var(--nuraly-input-disabled-prefix-suffix-color, var(--nuraly-disabled-prefix-suffix-color));\n }\n`;\n\n/**\n * Size variation styles for the input component\n * Defines padding and spacing for different input sizes\n */\nconst sizeInputStyle = css`\n /* ========================================\n * SIZE VARIATIONS\n * ======================================== */\n\n /* Large input size variant */\n div[data-size='large'] {\n padding-top: var(--nuraly-input-large-padding-top, var(--nuraly-large-padding-top));\n padding-bottom: var(--nuraly-input-large-padding-bottom, var(--nuraly-large-padding-bottom));\n padding-left: var(--nuraly-input-large-padding-left, var(--nuraly-large-padding-left));\n padding-right: var(--nuraly-input-large-padding-right, var(--nuraly-large-padding-right));\n }\n\n /* Medium input size variant (default) */\n div[data-size='medium'] {\n padding-top: var(--nuraly-input-medium-padding-top, var(--nuraly-medium-padding-top));\n padding-bottom: var(--nuraly-input-medium-padding-bottom, var(--nuraly-medium-padding-bottom));\n padding-left: var(--nuraly-input-medium-padding-left, var(--nuraly-medium-padding-left));\n padding-right: var(--nuraly-input-medium-padding-right, var(--nuraly-medium-padding-right));\n }\n\n /* Small input size variant */\n div[data-size='small'] {\n padding-top: var(--nuraly-input-small-padding-top, var(--nuraly-small-padding-top));\n padding-bottom: var(--nuraly-input-small-padding-bottom, var(--nuraly-small-padding-bottom));\n padding-left: var(--nuraly-input-small-padding-left, var(--nuraly-small-padding-left));\n padding-right: var(--nuraly-input-small-padding-right, var(--nuraly-small-padding-right));\n }\n\n /* \n * Character count display\n * Shows character count and limit information\n */\n .character-count {\n font-size: var(--nuraly-input-character-count-font-size, var(--nuraly-character-count-font-size));\n color: var(--nuraly-input-character-count-color, var(--nuraly-character-count-color));\n text-align: right;\n margin-top: var(--nuraly-input-character-count-margin-top, var(--nuraly-character-count-margin-top));\n font-family: var(--nuraly-input-font-family, var(--nuraly-font-family));\n }\n\n /* Character count over limit styling */\n .character-count[data-over-limit] {\n color: var(--nuraly-input-character-count-over-limit-color, var(--nuraly-character-count-over-limit-color));\n }\n\n /* ========================================\n * VALIDATION MESSAGE STYLES\n * ======================================== */\n\n /* \n * Base validation message styling\n * Common styles for error and warning messages\n */\n .validation-message {\n font-size: var(--nuraly-input-validation-message-font-size, var(--nuraly-validation-message-font-size, 0.875rem));\n font-family: var(--nuraly-input-font-family, var(--nuraly-font-family));\n margin-top: var(--nuraly-input-validation-message-margin-top, var(--nuraly-validation-message-margin-top, 0.25rem));\n padding: var(--nuraly-input-validation-message-padding, var(--nuraly-validation-message-padding, 0));\n \n /* Prevent text overflow and ensure proper wrapping without affecting parent width */\n word-wrap: break-word;\n word-break: break-word;\n overflow-wrap: break-word;\n hyphens: auto;\n white-space: normal;\n max-width: 100%;\n width: 0;\n min-width: 100%;\n box-sizing: border-box;\n line-height: var(--nuraly-input-validation-message-line-height, var(--nuraly-validation-message-line-height, 1.4));\n }\n\n /* \n * Error validation message styling\n * Applied when validation message has error class\n */\n .validation-message.error {\n color: var(--nuraly-input-error-message-color, var(--nuraly-error-message-color, var(--nuraly-input-error-color, var(--nuraly-error-color, #dc2626))));\n }\n\n /* \n * Warning validation message styling\n * Applied when validation message has warning class\n */\n .validation-message.warning {\n color: var(--nuraly-input-warning-message-color, var(--nuraly-warning-message-color, var(--nuraly-input-warning-color, var(--nuraly-warning-color, #d97706))));\n }\n\n /* \n * Disabled state for validation messages\n * Applied when input is disabled\n */\n :host([disabled]) .validation-message {\n opacity: var(--nuraly-input-disabled-validation-message-opacity, var(--nuraly-disabled-validation-message-opacity, 0.6));\n color: var(--nuraly-input-disabled-validation-message-color, var(--nuraly-disabled-validation-message-color));\n }\n\n /* \n * Validation icon styles\n * Base styles for validation feedback icons\n */\n .validation-icon {\n width: 16px;\n height: 16px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n /* \n * Loading validation icon with hourglass animation\n * Applied when async validation is in progress\n */\n .validation-icon.validation-loading {\n color: var(--nuraly-input-primary-color, var(--nuraly-primary-color, #3b82f6));\n animation: validation-hourglass 2s ease-in-out infinite;\n transform-origin: center;\n }\n\n /* \n * Error validation icon styling\n * Applied when validation fails\n */\n .validation-icon.validation-error {\n color: var(--nuraly-input-error-color, var(--nuraly-error-color, #dc2626));\n }\n\n /* \n * Warning validation icon styling\n * Applied when validation has warnings\n */\n .validation-icon.validation-warning {\n color: var(--nuraly-input-warning-color, var(--nuraly-warning-color, #d97706));\n }\n\n /* \n * Success validation icon styling\n * Applied when validation passes\n */\n .validation-icon.validation-success {\n color: var(--nuraly-input-success-color, var(--nuraly-success-color, #16a34a));\n }\n\n /* \n * Hourglass animation for validation loading\n * Gentle pulsing effect without rotation for clean appearance\n */\n @keyframes validation-hourglass {\n 0% {\n opacity: 0.7;\n transform: scale(1);\n }\n 25% {\n opacity: 1;\n transform: scale(1.03);\n }\n 50% {\n opacity: 0.8;\n transform: scale(1);\n }\n 75% {\n opacity: 1;\n transform: scale(1.03);\n }\n 100% {\n opacity: 0.7;\n transform: scale(1);\n }\n }\n\n /* \n * Alternative pulse animation option\n * Uncomment this and change animation above to use pulse instead of hourglass\n */\n /*\n @keyframes validation-pulse {\n 0%, 100% {\n opacity: 1;\n transform: scale(1);\n }\n 50% {\n opacity: 0.7;\n transform: scale(1.1);\n }\n }\n */\n`;\n\nexport const styles = [inputStyle, sizeInputStyle];\n"]}
|
package/input.types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.types.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"input.types.js","sourceRoot":"","sources":["../../../../src/components/input/input.types.ts"],"names":[],"mappings":"AA4GA;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,KAAK,EAAE,kDAAkD;IACzD,GAAG,EAAE,yGAAyG;IAC9G,KAAK,EAAE,wBAAwB;IAC/B,eAAe,EAAE,sEAAsE;IACvF,YAAY,EAAE,gBAAgB;IAC9B,OAAO,EAAE,OAAO;IAChB,KAAK,EAAE,aAAa;IACpB,QAAQ,EAAE,uBAAuB;IACjC,SAAS,EAAE,oCAAoC;IAC/C,IAAI,EAAE,6FAA6F;IACnG,WAAW,EAAE,qGAAqG;CAC1G,CAAC;AAEX;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,QAAQ,EAAE,CAAC,OAAgB,EAAkB,EAAE,CAAC,CAAC;QAC/C,QAAQ,EAAE,IAAI;QACd,OAAO,EAAE,OAAO,IAAI,wBAAwB;KAC7C,CAAC;IAEF,KAAK,EAAE,CAAC,OAAgB,EAAkB,EAAE,CAAC,CAAC;QAC5C,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,mBAAmB,CAAC,KAAK;QAClC,OAAO,EAAE,OAAO,IAAI,oCAAoC;KACzD,CAAC;IAEF,GAAG,EAAE,CAAC,OAAgB,EAAkB,EAAE,CAAC,CAAC;QAC1C,IAAI,EAAE,KAAK;QACX,OAAO,EAAE,mBAAmB,CAAC,GAAG;QAChC,OAAO,EAAE,OAAO,IAAI,0BAA0B;KAC/C,CAAC;IAEF,SAAS,EAAE,CAAC,GAAW,EAAE,OAAgB,EAAkB,EAAE,CAAC,CAAC;QAC7D,SAAS,EAAE,GAAG;QACd,OAAO,EAAE,OAAO,IAAI,qBAAqB,GAAG,aAAa;KAC1D,CAAC;IAEF,SAAS,EAAE,CAAC,GAAW,EAAE,OAAgB,EAAkB,EAAE,CAAC,CAAC;QAC7D,SAAS,EAAE,GAAG;QACd,OAAO,EAAE,OAAO,IAAI,qBAAqB,GAAG,aAAa;KAC1D,CAAC;IAEF,GAAG,EAAE,CAAC,GAAW,EAAE,OAAgB,EAAkB,EAAE,CAAC,CAAC;QACvD,IAAI,EAAE,QAAQ;QACd,GAAG;QACH,OAAO,EAAE,OAAO,IAAI,oBAAoB,GAAG,EAAE;KAC9C,CAAC;IAEF,GAAG,EAAE,CAAC,GAAW,EAAE,OAAgB,EAAkB,EAAE,CAAC,CAAC;QACvD,IAAI,EAAE,QAAQ;QACd,GAAG;QACH,OAAO,EAAE,OAAO,IAAI,oBAAoB,GAAG,EAAE;KAC9C,CAAC;IAEF,OAAO,EAAE,CAAC,OAAe,EAAE,OAAgB,EAAkB,EAAE,CAAC,CAAC;QAC/D,OAAO;QACP,OAAO,EAAE,OAAO,IAAI,gBAAgB;KACrC,CAAC;IAEF,cAAc,EAAE,CAAC,OAAgB,EAAkB,EAAE,CAAC,CAAC;QACrD,OAAO,EAAE,mBAAmB,CAAC,eAAe;QAC5C,OAAO,EAAE,OAAO,IAAI,2GAA2G;KAChI,CAAC;IAEF,KAAK,EAAE,CAAC,OAAgB,EAAkB,EAAE,CAAC,CAAC;QAC5C,OAAO,EAAE,mBAAmB,CAAC,KAAK;QAClC,OAAO,EAAE,OAAO,IAAI,mCAAmC;KACxD,CAAC;IAEF,QAAQ,EAAE,CAAC,OAAgB,EAAkB,EAAE,CAAC,CAAC;QAC/C,OAAO,EAAE,mBAAmB,CAAC,QAAQ;QACrC,OAAO,EAAE,OAAO,IAAI,kGAAkG;KACvH,CAAC;IAEF,UAAU,EAAE,CAAC,OAAgB,EAAkB,EAAE,CAAC,CAAC;QACjD,OAAO,EAAE,mBAAmB,CAAC,WAAW;QACxC,OAAO,EAAE,OAAO,IAAI,yCAAyC;KAC9D,CAAC;CACM,CAAC;AAEX,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC","sourcesContent":["export const enum INPUT_STATE {\n Default = 'default',\n Error = 'error',\n Warning = 'warning',\n Success = 'success',\n}\n\nexport const enum INPUT_SIZE {\n Large = 'large',\n Medium = 'medium',\n Small = 'small',\n}\n\nexport const enum INPUT_VARIANT {\n Outlined = 'outlined',\n Filled = 'filled',\n Borderless = 'borderless',\n Underlined = 'underlined',\n}\n\nexport const enum INPUT_TYPE {\n PASSWORD = 'password',\n TEXT = 'text',\n NUMBER = 'number',\n EMAIL = 'email',\n URL = 'url',\n TEL = 'tel',\n SEARCH = 'search',\n CALENDAR = 'calendar',\n}\n\nexport interface FocusOptions {\n preventScroll?: boolean;\n cursor?: 'start' | 'end' | 'all' | number;\n select?: boolean;\n}\n\nexport interface BlurOptions {\n preventScroll?: boolean;\n restoreCursor?: boolean;\n}\n\nexport interface FocusChangeEvent {\n focused: boolean;\n cursorPosition?: number;\n selectedText?: string;\n}\n\n/**\n * Validation rule interface\n */\nexport interface ValidationRule {\n /** Validation rule type */\n type?: 'string' | 'number' | 'boolean' | 'method' | 'regexp' | 'integer' | 'float' | 'array' | 'object' | 'enum' | 'date' | 'url' | 'hex' | 'email';\n \n /** Required field */\n required?: boolean;\n \n /** Pattern to match */\n pattern?: RegExp;\n \n /** Minimum length for string/array */\n minLength?: number;\n \n /** Maximum length for string/array */\n maxLength?: number;\n \n /** Minimum value for number */\n min?: number;\n \n /** Maximum value for number */\n max?: number;\n \n /** Enumerable values */\n enum?: any[];\n \n /** Custom validation message */\n message?: string;\n \n /** Custom validator function */\n validator?: (rule: ValidationRule, value: any) => Promise<void> | void | { isValid: boolean; message?: string } | Promise<{ isValid: boolean; message?: string }>;\n \n /** Async validator function */\n asyncValidator?: (rule: ValidationRule, value: any) => Promise<void>;\n \n /** Transform value before validation */\n transform?: (value: any) => any;\n \n /** Validation trigger */\n trigger?: 'change' | 'blur' | 'submit';\n \n /** Validation level */\n warningOnly?: boolean;\n}\n\n/**\n * Input validation result\n */\nexport interface InputValidationResult {\n isValid: boolean;\n errors: string[];\n warnings: string[];\n hasError: boolean;\n hasWarning: boolean;\n errorMessage?: string;\n warningMessage?: string;\n}\n\n/**\n * Built-in validation patterns\n */\nexport const VALIDATION_PATTERNS = {\n EMAIL: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/,\n URL: /^https?:\\/\\/(www\\.)?[-a-zA-Z0-9@:%._\\+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b([-a-zA-Z0-9()@:%_\\+.~#?&//=]*)$/,\n PHONE: /^[\\+]?[1-9][\\d]{0,15}$/,\n PASSWORD_STRONG: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[@$!%*?&])[A-Za-z\\d@$!%*?&]{8,}$/,\n ALPHANUMERIC: /^[a-zA-Z0-9]+$/,\n NUMERIC: /^\\d+$/,\n ALPHA: /^[a-zA-Z]+$/,\n USERNAME: /^[a-zA-Z0-9_-]{3,16}$/,\n HEX_COLOR: /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,\n IPV4: /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,\n CREDIT_CARD: /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|3[47][0-9]{13}|3[0-9]{13}|6(?:011|5[0-9]{2})[0-9]{12})$/,\n} as const;\n\n/**\n * Pre-built validation rules\n */\nexport const VALIDATION_RULES = {\n required: (message?: string): ValidationRule => ({\n required: true,\n message: message || 'This field is required'\n }),\n \n email: (message?: string): ValidationRule => ({\n type: 'email',\n pattern: VALIDATION_PATTERNS.EMAIL,\n message: message || 'Please enter a valid email address'\n }),\n \n url: (message?: string): ValidationRule => ({\n type: 'url',\n pattern: VALIDATION_PATTERNS.URL,\n message: message || 'Please enter a valid URL'\n }),\n \n minLength: (min: number, message?: string): ValidationRule => ({\n minLength: min,\n message: message || `Minimum length is ${min} characters`\n }),\n \n maxLength: (max: number, message?: string): ValidationRule => ({\n maxLength: max,\n message: message || `Maximum length is ${max} characters`\n }),\n \n min: (min: number, message?: string): ValidationRule => ({\n type: 'number',\n min,\n message: message || `Minimum value is ${min}`\n }),\n \n max: (max: number, message?: string): ValidationRule => ({\n type: 'number',\n max,\n message: message || `Maximum value is ${max}`\n }),\n \n pattern: (pattern: RegExp, message?: string): ValidationRule => ({\n pattern,\n message: message || 'Invalid format'\n }),\n \n strongPassword: (message?: string): ValidationRule => ({\n pattern: VALIDATION_PATTERNS.PASSWORD_STRONG,\n message: message || 'Password must contain at least 8 characters, including uppercase, lowercase, number and special character'\n }),\n \n phone: (message?: string): ValidationRule => ({\n pattern: VALIDATION_PATTERNS.PHONE,\n message: message || 'Please enter a valid phone number'\n }),\n \n username: (message?: string): ValidationRule => ({\n pattern: VALIDATION_PATTERNS.USERNAME,\n message: message || 'Username must be 3-16 characters long and contain only letters, numbers, hyphens and underscores'\n }),\n \n creditCard: (message?: string): ValidationRule => ({\n pattern: VALIDATION_PATTERNS.CREDIT_CARD,\n message: message || 'Please enter a valid credit card number'\n }),\n} as const;\n\nexport const EMPTY_STRING = '';\n"]}
|
package/package.json
CHANGED
package/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../../src/components/input/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC;IACrC,OAAO,EAAE,UAAU;IACnB,YAAY,EAAE,cAAc;IAC5B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,OAAO,EAAE,UAAU;QACnB,OAAO,EAAE,UAAU;QACnB,OAAO,EAAE,UAAU;QACnB,aAAa,EAAE,iBAAiB;QAChC,WAAW,EAAE,eAAe;KAC7B;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrInputElement } from './input.component.js';\nexport const NrInput = createComponent({\n tagName: 'nr-input',\n elementClass: NrInputElement,\n react: React,\n events: {\n nrInput: 'nr-input',\n nrFocus: 'nr-focus',\n nrEnter: 'nr-enter',\n nrCopySuccess: 'nr-copy-success',\n nrCopyError: 'nr-copy-error'\n },\n});\n"]}
|
package/validation.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"validation.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"validation.js","sourceRoot":"","sources":["../../../../src/components/input/validation.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG,gFAAgF,CAAA;AAEpG,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC","sourcesContent":["export const PORT = /^(?:[1-9]\\d{0,4}|[1-5]\\d{5}|6[0-4]\\d{4}|65[0-4]\\d{3}|655[0-2]\\d{2}|6553[0-5])$/\n\nexport const NOT_EMPTY = /^.+$/;"]}
|