@progress/kendo-themes-html 4.42.1-dev.3 → 4.42.1-dev.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/package.json +2 -2
  2. package/src/autocomplete/README.md +15 -9
  3. package/src/button/README.md +8 -8
  4. package/src/checkbox/README.md +8 -8
  5. package/src/combobox/README.md +15 -9
  6. package/src/dateinput/README.md +15 -9
  7. package/src/datepicker/README.md +15 -9
  8. package/src/datetimepicker/README.md +15 -9
  9. package/src/dropdownlist/README.md +23 -14
  10. package/src/maskedtextbox/README.md +15 -9
  11. package/src/numerictextbox/README.md +15 -9
  12. package/src/radio/README.md +7 -7
  13. package/src/searchbox/README.md +16 -12
  14. package/src/textarea/README.md +17 -11
  15. package/src/textbox/README.md +15 -9
  16. package/src/timepicker/README.md +15 -9
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@progress/kendo-themes-html",
3
3
  "description": "A collection of HTML helpers used for developing Kendo UI themes",
4
- "version": "4.42.1-dev.3",
4
+ "version": "4.42.1-dev.4",
5
5
  "author": "Progress",
6
6
  "license": "Apache-2.0",
7
7
  "keywords": [
@@ -42,5 +42,5 @@
42
42
  "@rollup/plugin-node-resolve": "^13.0.6",
43
43
  "rollup": "^2.59.0"
44
44
  },
45
- "gitHead": "39ad5cd911f1a5d7a041e0929f0dcd04339e4f64"
45
+ "gitHead": "e858f6d0ffd07117aa86b4c83d28e9999b2884f9"
46
46
  }
package/src/autocomplete/README.md CHANGED
@@ -8,17 +8,23 @@
8
8
  <span class="
9
9
  k-autocomplete
10
10
  k-input
11
- k-input-${size}
12
- k-rounded-${rounded}
13
- k-input-${fillMode}
11
+ k-input-{size}
12
+ k-rounded-{rounded}
13
+ k-input-{fillMode}
14
14
 
15
- ${valid && 'k-valid'}
16
- ${invalid && 'k-invalid'}
17
- ${required && 'k-required'}
18
- ${disabled && 'k-disabled'}
15
+ {valid && 'k-valid'}
16
+ {invalid && 'k-invalid'}
17
+ {loading && 'k-loading'}
18
+ {required && 'k-required'}
19
+ {disabled && 'k-disabled'}
19
20
  ">
21
+ {showInputIcon && inputIconName !== '' && <span class="k-input-icon k-i-icon k-i-{inputIconName}"></span>}
22
+ {inputPrefix && <span class="k-input-prefix">...</span>}
20
23
  <input type={type} class="k-input-inner" value={value} placeholder={placeholder} disabled={disabled} />
21
- {valid && <span class="k-input-icon k-icon k-i-check"></span>}
22
- {invalid && <span class="k-input-icon k-icon k-i-check"></span>}
24
+ {inputPrefix && <span class="k-input-suffix">...</span>}
25
+ {showValidationIcon && valid && <span class="k-validation-icon k-icon k-i-check"></span>}
26
+ {showValidationIcon && invalid && <span class="k-validation-icon k-icon k-i-warning"></span>}
27
+ {showLoadingIcon && loading && <span class="k-icon k-i-loading"></span>}
28
+ {showClearValue && text !== '' && <span class="k-clear-value"><span class="k-icon k-i-x"></span></span>}
23
29
  </span>
24
30
  ```
package/src/button/README.md CHANGED
@@ -7,16 +7,16 @@
7
7
  <!-- canonical rendering -->
8
8
  <button class="
9
9
  k-button
10
- ${text === '' && icon !== '' && 'k-icon-button'}
11
- k-button-${size}
12
- k-button-${shape}
13
- k-rounded-${rounded}
14
- k-button-${fillMode}
15
- k-button-${fillMode}-${themeColor}
10
+ {text === '' && iconName !== '' && 'k-icon-button'}
11
+ k-button-{size}
12
+ k-button-{shape}
13
+ k-rounded-{rounded}
14
+ k-button-{fillMode}
15
+ k-button-{fillMode}-{themeColor}
16
16
 
17
- ${disabled && 'k-disabled'}
17
+ {disabled && 'k-disabled'}
18
18
  " type={type} disabled={disabled}>
19
- {icon !== '' && <span class="k-button-icon k-icon k-i-${icon}"></span>}
19
+ {iconName !== '' && <span class="k-button-icon k-icon k-i-{iconName}"></span>}
20
20
  {text !== '' && <span class="k-button-text">Button</span>}
21
21
  </button>
22
22
  ```
package/src/checkbox/README.md CHANGED
@@ -6,16 +6,16 @@
6
6
  <input type="checkbox"
7
7
  class="
8
8
  k-checkbox
9
- k-checkbox-${size}
10
- k-rounded-${rounded}
9
+ k-checkbox-{size}
10
+ k-rounded-{rounded}
11
11
 
12
- ${checked && 'k-checked'}
13
- ${indeterminate && 'k-indeterminate'}
12
+ {checked && 'k-checked'}
13
+ {indeterminate && 'k-indeterminate'}
14
14
 
15
- ${valid && 'k-valid'}
16
- ${invalid && 'k-invalid'}
17
- ${required && 'k-required'}
18
- ${disabled && 'k-disabled'}
15
+ {valid && 'k-valid'}
16
+ {invalid && 'k-invalid'}
17
+ {required && 'k-required'}
18
+ {disabled && 'k-disabled'}
19
19
  "
20
20
  disabled={disabled}
21
21
  />
package/src/combobox/README.md CHANGED
@@ -11,18 +11,24 @@
11
11
  <span class="
12
12
  k-combobox
13
13
  k-input
14
- k-input-${size}
15
- k-rounded-${rounded}
16
- k-input-${fillMode}
14
+ k-input-{size}
15
+ k-rounded-{rounded}
16
+ k-input-{fillMode}
17
17
 
18
- ${valid && 'k-valid'}
19
- ${invalid && 'k-invalid'}
20
- ${required && 'k-required'}
21
- ${disabled && 'k-disabled'}
18
+ {valid && 'k-valid'}
19
+ {invalid && 'k-invalid'}
20
+ {loading && 'k-loading'}
21
+ {required && 'k-required'}
22
+ {disabled && 'k-disabled'}
22
23
  ">
24
+ {showInputIcon && inputIconName !== '' && <span class="k-input-icon k-i-icon k-i-{inputIconName}"></span>}
25
+ {inputPrefix && <span class="k-input-prefix">...</span>}
23
26
  <input type={type} class="k-input-inner" value={value} placeholder={placeholder} disabled={disabled} />
24
- {valid && <span class="k-input-icon k-icon k-i-check"></span>}
25
- {invalid && <span class="k-input-icon k-icon k-i-check"></span>}
27
+ {inputPrefix && <span class="k-input-suffix">...</span>}
28
+ {showValidationIcon && valid && <span class="k-validation-icon k-icon k-i-check"></span>}
29
+ {showValidationIcon && invalid && <span class="k-validation-icon k-icon k-i-warning"></span>}
30
+ {showLoadingIcon && loading && <span class="k-icon k-i-loading"></span>}
31
+ {showClearValue && text !== '' && <span class="k-clear-value"><span class="k-icon k-i-x"></span></span>}
26
32
  <button type="button" class="k-input-button k-button k-icon-button k-button-{size} k-button-{fillMode} k-button-{fillMode}-base">
27
33
  <span class="k-button-icon k-icon k-i-arrow-s"></span>
28
34
  </button>
package/src/dateinput/README.md CHANGED
@@ -16,18 +16,24 @@
16
16
  <span class="
17
17
  k-dateinput
18
18
  k-input
19
- k-input-${size}
20
- k-rounded-${rounded}
21
- k-input-${fillMode}
19
+ k-input-{size}
20
+ k-rounded-{rounded}
21
+ k-input-{fillMode}
22
22
 
23
- ${valid && 'k-valid'}
24
- ${invalid && 'k-invalid'}
25
- ${required && 'k-required'}
26
- ${disabled && 'k-disabled'}
23
+ {valid && 'k-valid'}
24
+ {invalid && 'k-invalid'}
25
+ {loading && 'k-loading'}
26
+ {required && 'k-required'}
27
+ {disabled && 'k-disabled'}
27
28
  ">
29
+ {showInputIcon && inputIconName !== '' && <span class="k-input-icon k-i-icon k-i-{inputIconName}"></span>}
30
+ {inputPrefix && <span class="k-input-prefix">...</span>}
28
31
  <input type={type} class="k-input-inner" value={value} placeholder={placeholder} disabled={disabled} />
29
- {valid && <span class="k-input-icon k-icon k-i-check"></span>}
30
- {invalid && <span class="k-input-icon k-icon k-i-check"></span>}
32
+ {inputPrefix && <span class="k-input-suffix">...</span>}
33
+ {showValidationIcon && valid && <span class="k-validation-icon k-icon k-i-check"></span>}
34
+ {showValidationIcon && invalid && <span class="k-validation-icon k-icon k-i-warning"></span>}
35
+ {showLoadingIcon && loading && <span class="k-icon k-i-loading"></span>}
36
+ {showClearValue && text !== '' && <span class="k-clear-value"><span class="k-icon k-i-x"></span></span>}
31
37
  {showSpinButton &&
32
38
  <span class="k-input-spinner k-spin-button">
33
39
  <button class="k-spinner-increase k-button k-icon-button k-button-solid k-button-solid-base">
package/src/datepicker/README.md CHANGED
@@ -11,18 +11,24 @@
11
11
  <span class="
12
12
  k-datepicker
13
13
  k-input
14
- k-input-${size}
15
- k-rounded-${rounded}
16
- k-input-${fillMode}
14
+ k-input-{size}
15
+ k-rounded-{rounded}
16
+ k-input-{fillMode}
17
17
 
18
- ${valid && 'k-valid'}
19
- ${invalid && 'k-invalid'}
20
- ${required && 'k-required'}
21
- ${disabled && 'k-disabled'}
18
+ {valid && 'k-valid'}
19
+ {invalid && 'k-invalid'}
20
+ {loading && 'k-loading'}
21
+ {required && 'k-required'}
22
+ {disabled && 'k-disabled'}
22
23
  ">
24
+ {showInputIcon && inputIconName !== '' && <span class="k-input-icon k-i-icon k-i-{inputIconName}"></span>}
25
+ {inputPrefix && <span class="k-input-prefix">...</span>}
23
26
  <input type={type} class="k-input-inner" value={value} placeholder={placeholder} disabled={disabled} />
24
- {valid && <span class="k-input-icon k-icon k-i-check"></span>}
25
- {invalid && <span class="k-input-icon k-icon k-i-check"></span>}
27
+ {inputPrefix && <span class="k-input-suffix">...</span>}
28
+ {showValidationIcon && valid && <span class="k-validation-icon k-icon k-i-check"></span>}
29
+ {showValidationIcon && invalid && <span class="k-validation-icon k-icon k-i-warning"></span>}
30
+ {showLoadingIcon && loading && <span class="k-icon k-i-loading"></span>}
31
+ {showClearValue && text !== '' && <span class="k-clear-value"><span class="k-icon k-i-x"></span></span>}
26
32
  <button type="button" class="k-input-button k-button k-icon-button k-button-{size} k-button-{fillMode} k-button-{fillMode}-base">
27
33
  <span class="k-button-icon k-icon k-i-calendar"></span>
28
34
  </button>
package/src/datetimepicker/README.md CHANGED
@@ -11,18 +11,24 @@
11
11
  <span class="
12
12
  k-datetimepicker
13
13
  k-input
14
- k-input-${size}
15
- k-rounded-${rounded}
16
- k-input-${fillMode}
14
+ k-input-{size}
15
+ k-rounded-{rounded}
16
+ k-input-{fillMode}
17
17
 
18
- ${valid && 'k-valid'}
19
- ${invalid && 'k-invalid'}
20
- ${required && 'k-required'}
21
- ${disabled && 'k-disabled'}
18
+ {valid && 'k-valid'}
19
+ {invalid && 'k-invalid'}
20
+ {loading && 'k-loading'}
21
+ {required && 'k-required'}
22
+ {disabled && 'k-disabled'}
22
23
  ">
24
+ {showInputIcon && inputIconName !== '' && <span class="k-input-icon k-i-icon k-i-{inputIconName}"></span>}
25
+ {inputPrefix && <span class="k-input-prefix">...</span>}
23
26
  <input type={type} class="k-input-inner" value={value} placeholder={placeholder} disabled={disabled} />
24
- {valid && <span class="k-input-icon k-icon k-i-check"></span>}
25
- {invalid && <span class="k-input-icon k-icon k-i-check"></span>}
27
+ {inputPrefix && <span class="k-input-suffix">...</span>}
28
+ {showValidationIcon && valid && <span class="k-validation-icon k-icon k-i-check"></span>}
29
+ {showValidationIcon && invalid && <span class="k-validation-icon k-icon k-i-warning"></span>}
30
+ {showLoadingIcon && loading && <span class="k-icon k-i-loading"></span>}
31
+ {showClearValue && text !== '' && <span class="k-clear-value"><span class="k-icon k-i-x"></span></span>}
26
32
  <button type="button" class="k-input-button k-button k-icon-button k-button-{size} k-button-{fillMode} k-button-{fillMode}-base">
27
33
  <span class="k-button-icon k-icon k-i-calendar"></span>
28
34
  </button>
package/src/dropdownlist/README.md CHANGED
@@ -1,7 +1,7 @@
1
1
  ```html
2
2
  <!-- default rendering -->
3
- <span class="k-combobox k-input k-input-md k-rounded-md k-input-solid">
4
- <input type="text" class="k-input-inner" value="..." placeholder="..." />
3
+ <span class="k-dropdownlist k-picker k-picker-md k-rounded-md k-picker-solid">
4
+ <span class="k-input-inner"><span class="k-input-value-text"><span></span>
5
5
  <button type="button" class="k-input-button k-button k-icon-button k-button-md k-button-solid k-button-solid-base">
6
6
  <span class="k-button-icon k-icon k-i-arrow-s"></span>
7
7
  </button>
@@ -9,20 +9,29 @@
9
9
 
10
10
  <!-- canonical rendering -->
11
11
  <span class="
12
- k-combobox
13
- k-input
14
- k-input-${size}
15
- k-rounded-${rounded}
16
- k-input-${fillMode}
12
+ k-dropdownlist
13
+ k-picker
14
+ k-picker-{size}
15
+ k-rounded-{rounded}
16
+ k-picker-{fillMode}
17
17
 
18
- ${valid && 'k-valid'}
19
- ${invalid && 'k-invalid'}
20
- ${required && 'k-required'}
21
- ${disabled && 'k-disabled'}
18
+ {valid && 'k-valid'}
19
+ {invalid && 'k-invalid'}
20
+ {loading && 'k-loading'}
21
+ {required && 'k-required'}
22
+ {disabled && 'k-disabled'}
22
23
  ">
23
- <input type={type} class="k-input-inner" value={value} placeholder={placeholder} disabled={disabled} />
24
- {valid && <span class="k-input-icon k-icon k-i-check"></span>}
25
- {invalid && <span class="k-input-icon k-icon k-i-check"></span>}
24
+ {showInputIcon && inputIconName !== '' && <span class="k-input-icon k-i-icon k-i-{inputIconName}"></span>}
25
+ {inputPrefix && <span class="k-input-prefix">...</span>}
26
+ <span class="k-input-inner">
27
+ <span class="k-input-value-icon k-icon k-i-{valueIcon}"><span>
28
+ <span class="k-input-value-text">{valueText}<span>
29
+ </span>
30
+ {inputPrefix && <span class="k-input-suffix">...</span>}
31
+ {showValidationIcon && valid && <span class="k-validation-icon k-icon k-i-check"></span>}
32
+ {showValidationIcon && invalid && <span class="k-validation-icon k-icon k-i-warning"></span>}
33
+ {showLoadingIcon && loading && <span class="k-icon k-i-loading"></span>}
34
+ {showClearValue && text !== '' && <span class="k-clear-value"><span class="k-icon k-i-x"></span></span>}
26
35
  <button type="button" class="k-input-button k-button k-icon-button k-button-{size} k-button-{fillMode} k-button-{fillMode}-base">
27
36
  <span class="k-button-icon k-icon k-i-arrow-s"></span>
28
37
  </button>
package/src/maskedtextbox/README.md CHANGED
@@ -8,17 +8,23 @@
8
8
  <span class="
9
9
  k-maskedtextbox
10
10
  k-input
11
- k-input-${size}
12
- k-rounded-${rounded}
13
- k-input-${fillMode}
11
+ k-input-{size}
12
+ k-rounded-{rounded}
13
+ k-input-{fillMode}
14
14
 
15
- ${valid && 'k-valid'}
16
- ${invalid && 'k-invalid'}
17
- ${required && 'k-required'}
18
- ${disabled && 'k-disabled'}
15
+ {valid && 'k-valid'}
16
+ {invalid && 'k-invalid'}
17
+ {loading && 'k-loading'}
18
+ {required && 'k-required'}
19
+ {disabled && 'k-disabled'}
19
20
  ">
21
+ {showInputIcon && inputIconName !== '' && <span class="k-input-icon k-i-icon k-i-{inputIconName}"></span>}
22
+ {inputPrefix && <span class="k-input-prefix">...</span>}
20
23
  <input type={type} class="k-input-inner" value={value} placeholder={placeholder} disabled={disabled} />
21
- {valid && <span class="k-input-icon k-icon k-i-check"></span>}
22
- {invalid && <span class="k-input-icon k-icon k-i-check"></span>}
24
+ {inputPrefix && <span class="k-input-suffix">...</span>}
25
+ {showValidationIcon && valid && <span class="k-validation-icon k-icon k-i-check"></span>}
26
+ {showValidationIcon && invalid && <span class="k-validation-icon k-icon k-i-warning"></span>}
27
+ {showLoadingIcon && loading && <span class="k-icon k-i-loading"></span>}
28
+ {showClearValue && text !== '' && <span class="k-clear-value"><span class="k-icon k-i-x"></span></span>}
23
29
  </span>
24
30
  ```
package/src/numerictextbox/README.md CHANGED
@@ -16,18 +16,24 @@
16
16
  <span class="
17
17
  k-numerictextbox
18
18
  k-input
19
- k-input-${size}
20
- k-rounded-${rounded}
21
- k-input-${fillMode}
19
+ k-input-{size}
20
+ k-rounded-{rounded}
21
+ k-input-{fillMode}
22
22
 
23
- ${valid && 'k-valid'}
24
- ${invalid && 'k-invalid'}
25
- ${required && 'k-required'}
26
- ${disabled && 'k-disabled'}
23
+ {valid && 'k-valid'}
24
+ {invalid && 'k-invalid'}
25
+ {loading && 'k-loading'}
26
+ {required && 'k-required'}
27
+ {disabled && 'k-disabled'}
27
28
  ">
29
+ {showInputIcon && inputIconName !== '' && <span class="k-input-icon k-i-icon k-i-{inputIconName}"></span>}
30
+ {inputPrefix && <span class="k-input-prefix">...</span>}
28
31
  <input type={type} class="k-input-inner" value={value} placeholder={placeholder} disabled={disabled} />
29
- {valid && <span class="k-input-icon k-icon k-i-check"></span>}
30
- {invalid && <span class="k-input-icon k-icon k-i-check"></span>}
32
+ {inputPrefix && <span class="k-input-suffix">...</span>}
33
+ {showValidationIcon && valid && <span class="k-validation-icon k-icon k-i-check"></span>}
34
+ {showValidationIcon && invalid && <span class="k-validation-icon k-icon k-i-warning"></span>}
35
+ {showLoadingIcon && loading && <span class="k-icon k-i-loading"></span>}
36
+ {showClearValue && text !== '' && <span class="k-clear-value"><span class="k-icon k-i-x"></span></span>}
31
37
  {showSpinButton &&
32
38
  <span class="k-input-spinner k-spin-button">
33
39
  <button class="k-spinner-increase k-button k-icon-button k-button-solid k-button-solid-base">
package/src/radio/README.md CHANGED
@@ -6,15 +6,15 @@
6
6
  <input type="radio"
7
7
  class="
8
8
  k-radio
9
- k-radio-${size}
10
- k-rounded-${rounded}
9
+ k-radio-{size}
10
+ k-rounded-{rounded}
11
11
 
12
- ${checked && 'k-checked'}
12
+ {checked && 'k-checked'}
13
13
 
14
- ${valid && 'k-valid'}
15
- ${invalid && 'k-invalid'}
16
- ${required && 'k-required'}
17
- ${disabled && 'k-disabled'}
14
+ {valid && 'k-valid'}
15
+ {invalid && 'k-invalid'}
16
+ {required && 'k-required'}
17
+ {disabled && 'k-disabled'}
18
18
  "
19
19
  disabled={disabled}
20
20
  />
package/src/searchbox/README.md CHANGED
@@ -2,25 +2,29 @@
2
2
  <!-- default rendering -->
3
3
  <span class="k-searchbox k-input k-input-md k-rounded-md k-input-solid">
4
4
  <input type="text" class="k-input-inner" value="..." placeholder="..." />
5
- <span class="k-input-icon k-icon k-i-search"></span>
6
5
  </span>
7
6
 
8
7
  <!-- canonical rendering -->
9
8
  <span class="
10
9
  k-searchbox
11
10
  k-input
12
- k-input-${size}
13
- k-rounded-${rounded}
14
- k-input-${fillMode}
11
+ k-input-{size}
12
+ k-rounded-{rounded}
13
+ k-input-{fillMode}
15
14
 
16
- ${valid && 'k-valid'}
17
- ${invalid && 'k-invalid'}
18
- ${required && 'k-required'}
19
- ${disabled && 'k-disabled'}
15
+ {valid && 'k-valid'}
16
+ {invalid && 'k-invalid'}
17
+ {loading && 'k-loading'}
18
+ {required && 'k-required'}
19
+ {disabled && 'k-disabled'}
20
20
  ">
21
- {showIcon && iconPosition === 'leading' && <span class="k-input-icon k-icon k-i-{iconName}"></span>}
22
- <input type={type} class="k-input-inner" value={value} placeholder={placeholder} disabled={disabled} />}
23
- {text !== '' <span class="k-clear-value"></span>}
24
- {showIcon && iconPosition === 'trailing' && <span class="k-input-icon k-icon k-i-{iconName}"></span>}
21
+ {showInputIcon && inputIconName !== '' && <span class="k-input-icon k-i-icon k-i-{inputIconName}"></span>}
22
+ {inputPrefix && <span class="k-input-prefix">...</span>}
23
+ <input type={type} class="k-input-inner" value={value} placeholder={placeholder} disabled={disabled} />
24
+ {inputPrefix && <span class="k-input-suffix">...</span>}
25
+ {showValidationIcon && valid && <span class="k-validation-icon k-icon k-i-check"></span>}
26
+ {showValidationIcon && invalid && <span class="k-validation-icon k-icon k-i-warning"></span>}
27
+ {showLoadingIcon && loading && <span class="k-icon k-i-loading"></span>}
28
+ {showClearValue && text !== '' && <span class="k-clear-value"><span class="k-icon k-i-x"></span></span>}
25
29
  </span>
26
30
  ```
package/src/textarea/README.md CHANGED
@@ -1,24 +1,30 @@
1
1
  ```html
2
2
  <!-- default rendering -->
3
3
  <span class="k-textarea k-input k-input-md k-rounded-md k-input-solid">
4
- <textarea type="text" class="k-input-inner" placeholder="...">...</textarea>
4
+ <textarea class="k-input-inner" placeholder="...">...</textarea>
5
5
  </span>
6
6
 
7
7
  <!-- canonical rendering -->
8
8
  <span class="
9
9
  k-textarea
10
10
  k-input
11
- k-input-${size}
12
- k-rounded-${rounded}
13
- k-input-${fillMode}
11
+ k-input-{size}
12
+ k-rounded-{rounded}
13
+ k-input-{fillMode}
14
14
 
15
- ${valid && 'k-valid'}
16
- ${invalid && 'k-invalid'}
17
- ${required && 'k-required'}
18
- ${disabled && 'k-disabled'}
15
+ {valid && 'k-valid'}
16
+ {invalid && 'k-invalid'}
17
+ {loading && 'k-loading'}
18
+ {required && 'k-required'}
19
+ {disabled && 'k-disabled'}
19
20
  ">
20
- <textarea type={type} class="k-input-inner" placeholder={placeholder} disabled={disabled}>{value}</textarea>
21
- {valid && <span class="k-input-icon k-icon k-i-check"></span>}
22
- {invalid && <span class="k-input-icon k-icon k-i-check"></span>}
21
+ {showInputIcon && inputIconName !== '' && <span class="k-input-icon k-i-icon k-i-{inputIconName}"></span>}
22
+ {inputPrefix && <span class="k-input-prefix">...</span>}
23
+ <textarea class="k-input-inner" placeholder="{placeholder}" disabled={disabled}>{value}</textarea>
24
+ {inputPrefix && <span class="k-input-suffix">...</span>}
25
+ {showValidationIcon && valid && <span class="k-validation-icon k-icon k-i-check"></span>}
26
+ {showValidationIcon && invalid && <span class="k-validation-icon k-icon k-i-warning"></span>}
27
+ {showLoadingIcon && loading && <span class="k-icon k-i-loading"></span>}
28
+ {showClearValue && text !== '' && <span class="k-clear-value"><span class="k-icon k-i-x"></span></span>}
23
29
  </span>
24
30
  ```
package/src/textbox/README.md CHANGED
@@ -8,17 +8,23 @@
8
8
  <span class="
9
9
  k-textbox
10
10
  k-input
11
- k-input-${size}
12
- k-rounded-${rounded}
13
- k-input-${fillMode}
11
+ k-input-{size}
12
+ k-rounded-{rounded}
13
+ k-input-{fillMode}
14
14
 
15
- ${valid && 'k-valid'}
16
- ${invalid && 'k-invalid'}
17
- ${required && 'k-required'}
18
- ${disabled && 'k-disabled'}
15
+ {valid && 'k-valid'}
16
+ {invalid && 'k-invalid'}
17
+ {loading && 'k-loading'}
18
+ {required && 'k-required'}
19
+ {disabled && 'k-disabled'}
19
20
  ">
21
+ {showInputIcon && inputIconName !== '' && <span class="k-input-icon k-i-icon k-i-{inputIconName}"></span>}
22
+ {inputPrefix && <span class="k-input-prefix">...</span>}
20
23
  <input type={type} class="k-input-inner" value={value} placeholder={placeholder} disabled={disabled} />
21
- {valid && <span class="k-input-icon k-icon k-i-check"></span>}
22
- {invalid && <span class="k-input-icon k-icon k-i-check"></span>}
24
+ {inputPrefix && <span class="k-input-suffix">...</span>}
25
+ {showValidationIcon && valid && <span class="k-validation-icon k-icon k-i-check"></span>}
26
+ {showValidationIcon && invalid && <span class="k-validation-icon k-icon k-i-warning"></span>}
27
+ {showLoadingIcon && loading && <span class="k-icon k-i-loading"></span>}
28
+ {showClearValue && text !== '' && <span class="k-clear-value"><span class="k-icon k-i-x"></span></span>}
23
29
  </span>
24
30
  ```
package/src/timepicker/README.md CHANGED
@@ -11,18 +11,24 @@
11
11
  <span class="
12
12
  k-timepicker
13
13
  k-input
14
- k-input-${size}
15
- k-rounded-${rounded}
16
- k-input-${fillMode}
14
+ k-input-{size}
15
+ k-rounded-{rounded}
16
+ k-input-{fillMode}
17
17
 
18
- ${valid && 'k-valid'}
19
- ${invalid && 'k-invalid'}
20
- ${required && 'k-required'}
21
- ${disabled && 'k-disabled'}
18
+ {valid && 'k-valid'}
19
+ {invalid && 'k-invalid'}
20
+ {loading && 'k-loading'}
21
+ {required && 'k-required'}
22
+ {disabled && 'k-disabled'}
22
23
  ">
24
+ {showInputIcon && inputIconName !== '' && <span class="k-input-icon k-i-icon k-i-{inputIconName}"></span>}
25
+ {inputPrefix && <span class="k-input-prefix">...</span>}
23
26
  <input type={type} class="k-input-inner" value={value} placeholder={placeholder} disabled={disabled} />
24
- {valid && <span class="k-input-icon k-icon k-i-check"></span>}
25
- {invalid && <span class="k-input-icon k-icon k-i-check"></span>}
27
+ {inputPrefix && <span class="k-input-suffix">...</span>}
28
+ {showValidationIcon && valid && <span class="k-validation-icon k-icon k-i-check"></span>}
29
+ {showValidationIcon && invalid && <span class="k-validation-icon k-icon k-i-warning"></span>}
30
+ {showLoadingIcon && loading && <span class="k-icon k-i-loading"></span>}
31
+ {showClearValue && text !== '' && <span class="k-clear-value"><span class="k-icon k-i-x"></span></span>}
26
32
  <button type="button" class="k-input-button k-button k-icon-button k-button-{size} k-button-{fillMode} k-button-{fillMode}-base">
27
33
  <span class="k-button-icon k-icon k-i-clock"></span>
28
34
  </button>