@cas-smartdesign/lit-input 7.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +8 -0
- package/dist/docs/doc.css +1 -0
- package/dist/docs/doc.mjs +502 -0
- package/dist/docs/index.html +28 -0
- package/dist/docs/misc-examples.js +1 -0
- package/dist/docs/monkey.svg +55 -0
- package/dist/docs/validation.js +1 -0
- package/dist/input-with-externals.js +123 -0
- package/dist/input-with-externals.js.map +7 -0
- package/dist/input.d.ts +81 -0
- package/dist/input.mjs +261 -0
- package/dist/input.mjs.map +1 -0
- package/npm-third-party-licenses.json +192 -0
- package/package.json +37 -0
- package/readme.md +55 -0
package/readme.md
ADDED
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
# @cas-smartdesign/lit-input
|
|
2
|
+
|
|
3
|
+
An input element based on LitElement & material components.
|
|
4
|
+
|
|
5
|
+
## Requirements
|
|
6
|
+
|
|
7
|
+
The main entry point requires ES6 & support for Custom Elements v1
|
|
8
|
+
|
|
9
|
+
## Properties and attributes
|
|
10
|
+
|
|
11
|
+
- `label`: string;
|
|
12
|
+
- The label of the input
|
|
13
|
+
- `sdAriaLabel`: string;
|
|
14
|
+
- The aria-label of the input that is used by the screen readers
|
|
15
|
+
- `currentText`: string;
|
|
16
|
+
- The current text of the input element
|
|
17
|
+
- `alwaysFloatLabel`: boolean;
|
|
18
|
+
- A flag which indicates whether the label should always be "floated" above the input
|
|
19
|
+
- `autocompleted`: boolean;
|
|
20
|
+
- A flag which indicates whether the browser's autocompletion was executed
|
|
21
|
+
- `rows`: number;
|
|
22
|
+
- If greater than 1, a textarea element is used instead of an input element
|
|
23
|
+
- `type`: string (default="text")
|
|
24
|
+
- The type of the input element
|
|
25
|
+
- `placeholder`: string;
|
|
26
|
+
- The placeholder text to be used
|
|
27
|
+
- `maxlength`: number;
|
|
28
|
+
- The maximum length of the text which is allowed to be entered
|
|
29
|
+
- `disabled`: boolean;
|
|
30
|
+
- Defines whether the input is disabled. Note that it uses aria-disabled and readonly attributes, thus allowing pointer/mouse events.
|
|
31
|
+
- `readonly`: boolean;
|
|
32
|
+
- Defines whether the input should be read only.
|
|
33
|
+
- `required`: boolean;
|
|
34
|
+
- Defines whether the input should be required.
|
|
35
|
+
- `name`: string;
|
|
36
|
+
- Defines the name attribute on the element.
|
|
37
|
+
- `inactive`: boolean;
|
|
38
|
+
- Renders the input element disabled, without the top level `sd-lit-input` being set to disabled
|
|
39
|
+
- `extendedPrefix`: boolean;
|
|
40
|
+
- If set, the positioning of the prefixed (& also the suffix) content is changed in a way that the internal input field occupies space only in a focused state. With this the prefixed content can have an extended layouting, for example if tokens need to be shown in that position.
|
|
41
|
+
|
|
42
|
+
## Custom events
|
|
43
|
+
|
|
44
|
+
- `value-change`
|
|
45
|
+
- This event is dispatched when the value is changed because of a user interaction
|
|
46
|
+
|
|
47
|
+
## Validation
|
|
48
|
+
|
|
49
|
+
The element could show validation messages via an `sd-field-validation-message` element which can be configured with the following attributes & properties which are all delegated to that:
|
|
50
|
+
|
|
51
|
+
- `validationMessage`
|
|
52
|
+
- `validationIconSrc`
|
|
53
|
+
- `validationLevel`
|
|
54
|
+
|
|
55
|
+
## Examples
|