@aquera/nile-elements 0.0.9 → 0.0.10
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/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/internal/enum.d.ts +17 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/internal/enum.js +18 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/internal/enum.js.map +1 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-content-editor/nile-content-editor.css.js +14 -3
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-content-editor/nile-content-editor.css.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-content-editor/nile-content-editor.d.ts +15 -4
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-content-editor/nile-content-editor.js +111 -51
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-content-editor/nile-content-editor.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/nile-switcher.d.ts +3 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/nile-switcher.js +9 -6
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/nile-switcher.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.iife.js +31 -18
- package/dist/internal/enum.cjs.js +2 -0
- package/dist/internal/enum.cjs.js.map +1 -0
- package/dist/internal/enum.esm.js +1 -0
- package/dist/nile-content-editor/index.cjs.js +1 -1
- package/dist/nile-content-editor/index.esm.js +1 -1
- package/dist/nile-content-editor/nile-content-editor.cjs.js +1 -1
- package/dist/nile-content-editor/nile-content-editor.cjs.js.map +1 -1
- package/dist/nile-content-editor/nile-content-editor.css.cjs.js +1 -1
- package/dist/nile-content-editor/nile-content-editor.css.cjs.js.map +1 -1
- package/dist/nile-content-editor/nile-content-editor.css.esm.js +14 -3
- package/dist/nile-content-editor/nile-content-editor.esm.js +13 -12
- package/dist/nile-switcher/nile-switcher.cjs.js +1 -1
- package/dist/nile-switcher/nile-switcher.cjs.js.map +1 -1
- package/dist/nile-switcher/nile-switcher.esm.js +9 -8
- package/dist/src/internal/enum.d.ts +17 -0
- package/dist/src/internal/enum.js +18 -0
- package/dist/src/internal/enum.js.map +1 -0
- package/dist/src/nile-content-editor/nile-content-editor.css.js +14 -3
- package/dist/src/nile-content-editor/nile-content-editor.css.js.map +1 -1
- package/dist/src/nile-content-editor/nile-content-editor.d.ts +15 -4
- package/dist/src/nile-content-editor/nile-content-editor.js +111 -51
- package/dist/src/nile-content-editor/nile-content-editor.js.map +1 -1
- package/dist/src/nile-switcher/nile-switcher.d.ts +3 -1
- package/dist/src/nile-switcher/nile-switcher.js +9 -6
- package/dist/src/nile-switcher/nile-switcher.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/internal/enum.ts +17 -0
- package/src/nile-content-editor/nile-content-editor.css.ts +14 -3
- package/src/nile-content-editor/nile-content-editor.ts +123 -59
- package/src/nile-switcher/nile-switcher.ts +12 -6
@@ -0,0 +1,17 @@
|
|
1
|
+
export declare const KeyCode: {
|
2
|
+
BACKSPACE: string;
|
3
|
+
TAB: string;
|
4
|
+
ENTER: string;
|
5
|
+
SHIFT: string;
|
6
|
+
CTRL: string;
|
7
|
+
ESCAPE: string;
|
8
|
+
SPACE: string;
|
9
|
+
PAGE_UP: string;
|
10
|
+
PAGE_DOWN: string;
|
11
|
+
END: string;
|
12
|
+
HOME: string;
|
13
|
+
ARROW_LEFT: string;
|
14
|
+
ARROW_UP: string;
|
15
|
+
ARROW_RIGHT: string;
|
16
|
+
ARROW_DOWN: string;
|
17
|
+
};
|
@@ -0,0 +1,18 @@
|
|
1
|
+
export const KeyCode = {
|
2
|
+
BACKSPACE: 'Backspace',
|
3
|
+
TAB: 'Tab',
|
4
|
+
ENTER: 'Enter',
|
5
|
+
SHIFT: 'ShiftLeft',
|
6
|
+
CTRL: 'ControlLeft',
|
7
|
+
ESCAPE: 'Escape',
|
8
|
+
SPACE: 'Space',
|
9
|
+
PAGE_UP: 'PageUp',
|
10
|
+
PAGE_DOWN: 'PageDown',
|
11
|
+
END: 'End',
|
12
|
+
HOME: 'Home',
|
13
|
+
ARROW_LEFT: 'ArrowLeft',
|
14
|
+
ARROW_UP: 'ArrowUp',
|
15
|
+
ARROW_RIGHT: 'ArrowRight',
|
16
|
+
ARROW_DOWN: 'ArrowDown',
|
17
|
+
};
|
18
|
+
//# sourceMappingURL=enum.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"enum.js","sourceRoot":"","sources":["../../../src/internal/enum.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,SAAS,EAAE,WAAW;IACtB,GAAG,EAAE,KAAK;IACV,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,WAAW;IAClB,IAAI,EAAE,aAAa;IACnB,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,QAAQ;IACjB,SAAS,EAAE,UAAU;IACrB,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,MAAM;IACZ,UAAU,EAAE,WAAW;IACvB,QAAQ,EAAE,SAAS;IACnB,WAAW,EAAE,YAAY;IACzB,UAAU,EAAE,WAAW;CACxB,CAAC","sourcesContent":["export const KeyCode = {\n BACKSPACE: 'Backspace',\n TAB: 'Tab',\n ENTER: 'Enter',\n SHIFT: 'ShiftLeft', // or 'ShiftRight'\n CTRL: 'ControlLeft', // or 'ControlRight'\n ESCAPE: 'Escape',\n SPACE: 'Space',\n PAGE_UP: 'PageUp',\n PAGE_DOWN: 'PageDown',\n END: 'End',\n HOME: 'Home',\n ARROW_LEFT: 'ArrowLeft',\n ARROW_UP: 'ArrowUp',\n ARROW_RIGHT: 'ArrowRight',\n ARROW_DOWN: 'ArrowDown',\n};\n"]}
|
@@ -12,6 +12,7 @@ export const styles = css `
|
|
12
12
|
:host {
|
13
13
|
width: 100%;
|
14
14
|
box-sizing: border-box;
|
15
|
+
font-size: 14px;
|
15
16
|
}
|
16
17
|
|
17
18
|
.content-editable-wrapper {
|
@@ -47,21 +48,30 @@ export const styles = css `
|
|
47
48
|
border-color: #e5434d;
|
48
49
|
}
|
49
50
|
|
51
|
+
.read-only {
|
52
|
+
cursor: not-allowed;
|
53
|
+
}
|
54
|
+
|
50
55
|
.chips {
|
56
|
+
display: inline;
|
51
57
|
background: #e5e9eb;
|
52
58
|
color: #000;
|
53
59
|
border-radius: 4px;
|
54
60
|
padding: 6px;
|
61
|
+
height: 24px;
|
62
|
+
line-height: 10px;
|
55
63
|
margin-left: 3px;
|
56
|
-
display: inline;
|
57
64
|
letter-spacing: 0.2px;
|
58
65
|
}
|
59
66
|
|
60
67
|
.text-area {
|
61
68
|
height: 120px;
|
62
|
-
white-space: pre-wrap;
|
63
69
|
overflow: scroll;
|
64
|
-
line-height:
|
70
|
+
line-height: 26px;
|
71
|
+
}
|
72
|
+
|
73
|
+
.text-area .chips {
|
74
|
+
padding: 4px 8px;
|
65
75
|
}
|
66
76
|
|
67
77
|
.chip-error {
|
@@ -72,6 +82,7 @@ export const styles = css `
|
|
72
82
|
background-color: #ffffff;
|
73
83
|
border: 1px solid #c7ced4;
|
74
84
|
overflow: auto;
|
85
|
+
max-height: 150px;
|
75
86
|
}
|
76
87
|
|
77
88
|
label {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"nile-content-editor.css.js","sourceRoot":"","sources":["../../../src/nile-content-editor/nile-content-editor.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
1
|
+
{"version":3,"file":"nile-content-editor.css.js","sourceRoot":"","sources":["../../../src/nile-content-editor/nile-content-editor.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsFxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * AttributeExpression CSS\n */\nexport const styles = css`\n :host {\n width: 100%;\n box-sizing: border-box;\n font-size: 14px;\n }\n\n .content-editable-wrapper {\n position: relative;\n width: 100%;\n box-sizing: border-box;\n }\n\n .dropdown-position {\n position: relative;\n bottom: 60px;\n }\n .content-editable-input {\n box-sizing: border-box;\n width: 100%;\n padding: 9px;\n border: 1px solid #c7ced4;\n border-radius: 4px;\n overflow-x: auto;\n overflow-anchor: none;\n scrollbar-width: none;\n -ms-overflow-style: none;\n cursor: text;\n white-space: nowrap;\n background-color: #ffffff;\n height: 38px;\n }\n .content-editable-input:focus {\n outline: none;\n }\n\n .error {\n border-color: #e5434d;\n }\n\n .read-only {\n cursor: not-allowed;\n }\n\n .chips {\n display: inline;\n background: #e5e9eb;\n color: #000;\n border-radius: 4px;\n padding: 6px;\n height: 24px;\n line-height: 10px;\n margin-left: 3px;\n letter-spacing: 0.2px;\n }\n\n .text-area {\n height: 120px;\n overflow: scroll;\n line-height: 26px;\n }\n\n .text-area .chips {\n padding: 4px 8px;\n }\n\n .chip-error {\n background: #f3a5aa;\n }\n .nile-options-container {\n box-sizing: border-box;\n background-color: #ffffff;\n border: 1px solid #c7ced4;\n overflow: auto;\n max-height: 150px;\n }\n\n label {\n display: inline-block;\n margin-bottom: 6px;\n font-family: 'colfax-medium';\n }\n\n .asterik {\n color: #e5434d;\n }\n`;\n\nexport default [styles];\n"]}
|
@@ -23,25 +23,36 @@ export declare class NileContentEditor extends NileElement {
|
|
23
23
|
*/
|
24
24
|
value: string;
|
25
25
|
options: Array<any>;
|
26
|
+
filteredOptions: Array<any>;
|
26
27
|
showLabel: boolean;
|
27
28
|
labelText: string;
|
28
29
|
type: string;
|
29
30
|
required: boolean;
|
30
|
-
|
31
|
+
contentEditor: HTMLInputElement;
|
31
32
|
autoOptions: HTMLInputElement;
|
32
|
-
|
33
|
+
openDropdown: boolean;
|
34
|
+
tagIdentifier: string;
|
35
|
+
filteredValue: string;
|
33
36
|
helpText: string;
|
37
|
+
readonly: boolean;
|
34
38
|
errorMessage: string;
|
39
|
+
error: boolean;
|
35
40
|
static styles: CSSResultGroup;
|
36
41
|
connectedCallback(): void;
|
42
|
+
setInitialValues(): void;
|
43
|
+
addOpenListeners(): void;
|
44
|
+
removeOpenListeners(): void;
|
45
|
+
toggleDropdown(value: boolean): void;
|
46
|
+
handleOutsideClick(event: Event): void;
|
37
47
|
handleTypeChange(): void;
|
38
48
|
disconnectedCallback(): void;
|
39
|
-
|
49
|
+
handlePaste(event: ClipboardEvent): void;
|
40
50
|
private handlekeyDown;
|
51
|
+
filterOptions(): void;
|
41
52
|
generateValuesFromHTMLTags(string: any): string;
|
42
53
|
generateHTMLTagsWithValues(string: any): string;
|
43
54
|
emitInputChange(): void;
|
44
|
-
|
55
|
+
insertNodes(parentNode: Node, childNodes: NodeList, autoOptionsTag: Node): void;
|
45
56
|
handleOptions(option: any): void;
|
46
57
|
renderAutoOptions(): TemplateResult;
|
47
58
|
render(): TemplateResult;
|
@@ -11,6 +11,8 @@ import { styles } from './nile-content-editor.css';
|
|
11
11
|
import { classMap } from 'lit/directives/class-map.js';
|
12
12
|
import NileElement from '../internal/nile-element';
|
13
13
|
import { watch } from '../internal/watch';
|
14
|
+
import { KeyCode } from '../internal/enum';
|
15
|
+
import { live } from 'lit/directives/live.js';
|
14
16
|
/**
|
15
17
|
* Nile icon component.
|
16
18
|
*
|
@@ -33,48 +35,87 @@ let NileContentEditor = class NileContentEditor extends NileElement {
|
|
33
35
|
this.type = 'text|text-area';
|
34
36
|
this.required = true;
|
35
37
|
this.openDropdown = false;
|
38
|
+
this.tagIdentifier = '$';
|
39
|
+
this.filteredValue = '';
|
36
40
|
this.helpText = '';
|
41
|
+
this.readonly = false;
|
37
42
|
this.errorMessage = '';
|
38
|
-
this.
|
39
|
-
const range = document.createRange();
|
40
|
-
const selection = window.getSelection();
|
41
|
-
range.setStart(this.input, this.input.childNodes.length);
|
42
|
-
range.collapse(true);
|
43
|
-
selection?.removeAllRanges();
|
44
|
-
selection?.addRange(range);
|
45
|
-
this.input.focus();
|
46
|
-
};
|
43
|
+
this.error = false;
|
47
44
|
}
|
48
45
|
connectedCallback() {
|
46
|
+
this.handleOutsideClick = this.handleOutsideClick.bind(this);
|
49
47
|
super.connectedCallback();
|
50
48
|
this.emit('nile-init');
|
51
|
-
this.
|
52
|
-
|
53
|
-
|
49
|
+
this.addOpenListeners();
|
50
|
+
this.setInitialValues();
|
51
|
+
}
|
52
|
+
setInitialValues() {
|
53
|
+
this.updateComplete.then(res => {
|
54
|
+
if (res && !!this.value)
|
55
|
+
this.contentEditor.innerHTML = this.generateHTMLTagsWithValues(this.value);
|
54
56
|
});
|
55
57
|
}
|
58
|
+
addOpenListeners() {
|
59
|
+
window.addEventListener('click', this.handleOutsideClick);
|
60
|
+
}
|
61
|
+
removeOpenListeners() {
|
62
|
+
window.removeEventListener('click', this.handleOutsideClick);
|
63
|
+
}
|
64
|
+
toggleDropdown(value) {
|
65
|
+
this.openDropdown = value;
|
66
|
+
}
|
67
|
+
handleOutsideClick(event) {
|
68
|
+
if (event && event.target) {
|
69
|
+
this.toggleDropdown(false);
|
70
|
+
}
|
71
|
+
}
|
56
72
|
handleTypeChange() {
|
57
|
-
this.
|
73
|
+
this.contentEditor.innerHTML = this.generateHTMLTagsWithValues(this.value);
|
58
74
|
}
|
59
75
|
disconnectedCallback() {
|
60
76
|
super.disconnectedCallback();
|
77
|
+
this.removeOpenListeners();
|
61
78
|
this.emit('nile-destroy');
|
62
79
|
}
|
63
|
-
|
64
|
-
|
80
|
+
handlePaste(event) {
|
81
|
+
event.preventDefault();
|
82
|
+
if (event.clipboardData) {
|
83
|
+
let text = event.clipboardData.getData('text/plain');
|
84
|
+
document.execCommand('insertText', false, text);
|
85
|
+
}
|
86
|
+
this.emitInputChange();
|
65
87
|
}
|
66
88
|
handlekeyDown(event) {
|
67
|
-
if (event.code ===
|
89
|
+
if (event.code === KeyCode.ENTER && this.type === 'text') {
|
90
|
+
event.preventDefault();
|
91
|
+
return;
|
92
|
+
}
|
93
|
+
if (event.code === KeyCode.ESCAPE) {
|
68
94
|
event.preventDefault();
|
95
|
+
this.toggleDropdown(false);
|
96
|
+
return;
|
69
97
|
}
|
70
98
|
setTimeout(() => {
|
71
|
-
const value = this.
|
99
|
+
const value = this.contentEditor.innerText;
|
72
100
|
this.emitInputChange();
|
73
|
-
if (value.includes(
|
74
|
-
this.
|
101
|
+
if (value.includes(this.tagIdentifier)) {
|
102
|
+
this.toggleDropdown(true);
|
103
|
+
this.filterOptions();
|
104
|
+
}
|
105
|
+
else {
|
106
|
+
this.toggleDropdown(false);
|
75
107
|
}
|
76
108
|
});
|
77
109
|
}
|
110
|
+
filterOptions() {
|
111
|
+
this.filteredOptions = this.options;
|
112
|
+
if (!!this.options.length && !!this.filteredValue) {
|
113
|
+
this.filteredOptions = this.options.filter(item => item.startsWith(this.filteredValue));
|
114
|
+
}
|
115
|
+
else {
|
116
|
+
this.filteredOptions = this.options;
|
117
|
+
}
|
118
|
+
}
|
78
119
|
generateValuesFromHTMLTags(string) {
|
79
120
|
var pattern = /<span class="chips(?: chip-error)?" contenteditable="false">(.*?)<\/span>/g;
|
80
121
|
var result = string.replace(pattern, (match, option) => {
|
@@ -94,34 +135,40 @@ let NileContentEditor = class NileContentEditor extends NileElement {
|
|
94
135
|
return result;
|
95
136
|
}
|
96
137
|
emitInputChange() {
|
97
|
-
|
98
|
-
|
99
|
-
|
138
|
+
if (this.contentEditor) {
|
139
|
+
let fieldValue = this.contentEditor.innerHTML;
|
140
|
+
if (this.contentEditor.innerText !== '') {
|
141
|
+
fieldValue = this.generateValuesFromHTMLTags(fieldValue);
|
142
|
+
}
|
143
|
+
fieldValue = fieldValue.replace(/ /g, ' ');
|
144
|
+
fieldValue = fieldValue === '<br>' ? '' : fieldValue?.trim();
|
145
|
+
this.emit('nile-change', {
|
146
|
+
value: this.generateValuesFromHTMLTags(fieldValue),
|
147
|
+
});
|
100
148
|
}
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
149
|
+
}
|
150
|
+
insertNodes(parentNode, childNodes, autoOptionsTag) {
|
151
|
+
Array.from(childNodes).map((node, index) => {
|
152
|
+
if (node.hasChildNodes()) {
|
153
|
+
this.insertNodes(node, node.childNodes, autoOptionsTag);
|
154
|
+
}
|
155
|
+
else {
|
156
|
+
if (node.nodeValue?.includes(this.tagIdentifier)) {
|
157
|
+
parentNode.childNodes[index].nodeValue = node.nodeValue?.replace(this.tagIdentifier + this.filteredValue, '');
|
158
|
+
parentNode.childNodes[index].after(autoOptionsTag);
|
159
|
+
}
|
160
|
+
}
|
105
161
|
});
|
106
162
|
}
|
107
163
|
handleOptions(option) {
|
108
|
-
this.
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
this.input.lastElementChild.lastChild.previousSibling.nodeValue.replace('$', '');
|
117
|
-
}
|
118
|
-
else {
|
119
|
-
this.input.insertAdjacentHTML('beforeend', autoOptionsTag);
|
120
|
-
if (this.input.lastChild?.previousSibling) {
|
121
|
-
this.input.lastChild.previousSibling.nodeValue =
|
122
|
-
this.input.lastChild.previousSibling.nodeValue.replace('$', '');
|
123
|
-
}
|
124
|
-
}
|
164
|
+
this.toggleDropdown(false);
|
165
|
+
let autoOptionsTag = document.createElement('span');
|
166
|
+
autoOptionsTag.setAttribute('class', 'chips');
|
167
|
+
autoOptionsTag.setAttribute('contentEditable', 'false');
|
168
|
+
autoOptionsTag.innerText = option;
|
169
|
+
this.insertNodes(this.contentEditor, this.contentEditor.childNodes, autoOptionsTag);
|
170
|
+
this.filteredOptions = this.options;
|
171
|
+
this.filteredValue = '';
|
125
172
|
this.emitInputChange();
|
126
173
|
}
|
127
174
|
renderAutoOptions() {
|
@@ -129,10 +176,10 @@ let NileContentEditor = class NileContentEditor extends NileElement {
|
|
129
176
|
class="${classMap({
|
130
177
|
'nile-options-container': true,
|
131
178
|
'dropdown-position': this.type === 'text-area',
|
132
|
-
})}
|
179
|
+
})}"
|
133
180
|
>
|
134
|
-
${this.
|
135
|
-
this.
|
181
|
+
${this.filteredOptions &&
|
182
|
+
this.filteredOptions.map((option) => {
|
136
183
|
return html ` <nile-option
|
137
184
|
.value="${option}"
|
138
185
|
@click="${(event) => {
|
@@ -145,11 +192,13 @@ let NileContentEditor = class NileContentEditor extends NileElement {
|
|
145
192
|
}
|
146
193
|
render() {
|
147
194
|
const hasHelpText = this.helpText ? true : false;
|
195
|
+
const hasError = !!this.error;
|
148
196
|
const hasErrorMessage = !!this.errorMessage;
|
197
|
+
const readonly = !!this.readonly;
|
149
198
|
const type = this.type;
|
150
199
|
return html `
|
151
200
|
<nile-popup
|
152
|
-
.active="${this.openDropdown}"
|
201
|
+
.active="${live(this.openDropdown)}"
|
153
202
|
sync="width"
|
154
203
|
placement="bottom"
|
155
204
|
class=${classMap({
|
@@ -162,17 +211,19 @@ let NileContentEditor = class NileContentEditor extends NileElement {
|
|
162
211
|
${this.showLabel && this.labelText
|
163
212
|
? html `<label class="ods-label">${this.labelText} </label> ${this
|
164
213
|
.required
|
165
|
-
? html `<
|
214
|
+
? html `<sapn class="asterik">*</span>`
|
166
215
|
: ''}`
|
167
216
|
: ''}
|
168
217
|
<div
|
169
|
-
contenteditable="
|
218
|
+
contenteditable="${!readonly}"
|
170
219
|
class=${classMap({
|
171
220
|
'content-editable-input': true,
|
172
|
-
error: hasErrorMessage,
|
221
|
+
error: hasError || hasErrorMessage,
|
222
|
+
'read-only': readonly,
|
173
223
|
'text-area': type === 'text-area' ? true : false,
|
174
224
|
})}
|
175
225
|
@keydown=${this.handlekeyDown}
|
226
|
+
@paste=${this.handlePaste}
|
176
227
|
></div>
|
177
228
|
${hasHelpText
|
178
229
|
? html `
|
@@ -200,6 +251,9 @@ __decorate([
|
|
200
251
|
__decorate([
|
201
252
|
property()
|
202
253
|
], NileContentEditor.prototype, "options", void 0);
|
254
|
+
__decorate([
|
255
|
+
property()
|
256
|
+
], NileContentEditor.prototype, "filteredOptions", void 0);
|
203
257
|
__decorate([
|
204
258
|
property()
|
205
259
|
], NileContentEditor.prototype, "showLabel", void 0);
|
@@ -214,7 +268,7 @@ __decorate([
|
|
214
268
|
], NileContentEditor.prototype, "required", void 0);
|
215
269
|
__decorate([
|
216
270
|
query('.content-editable-input')
|
217
|
-
], NileContentEditor.prototype, "
|
271
|
+
], NileContentEditor.prototype, "contentEditor", void 0);
|
218
272
|
__decorate([
|
219
273
|
query('.nile-options-container')
|
220
274
|
], NileContentEditor.prototype, "autoOptions", void 0);
|
@@ -224,9 +278,15 @@ __decorate([
|
|
224
278
|
__decorate([
|
225
279
|
property({ attribute: 'help-text' })
|
226
280
|
], NileContentEditor.prototype, "helpText", void 0);
|
281
|
+
__decorate([
|
282
|
+
property({ attribute: 'readonly' })
|
283
|
+
], NileContentEditor.prototype, "readonly", void 0);
|
227
284
|
__decorate([
|
228
285
|
property({ attribute: 'error-message' })
|
229
286
|
], NileContentEditor.prototype, "errorMessage", void 0);
|
287
|
+
__decorate([
|
288
|
+
property({ attribute: 'error' })
|
289
|
+
], NileContentEditor.prototype, "error", void 0);
|
230
290
|
__decorate([
|
231
291
|
watch('type', { waitUntilFirstUpdate: true })
|
232
292
|
], NileContentEditor.prototype, "handleTypeChange", null);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"nile-content-editor.js","sourceRoot":"","sources":["../../../src/nile-content-editor/nile-content-editor.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, property, TemplateResult } from 'lit-element';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { styles } from './nile-content-editor.css';\nimport { CSSResultGroup } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport NileElement from '../internal/nile-element';\nimport { watch } from '../internal/watch';\n\n/**\n * Nile icon component.\n *\n * @tag nile-attribute-expression\n *\n */\n@customElement('nile-content-editor')\nexport class NileContentEditor extends NileElement {\n /**\n * @summary Allows you to handle both input and dropdown selection\n\n * @dependency nile-option\n \n * @event nile-change - Emitted when the control's value changes. \n */\n\n @property() value: string = '';\n\n @property() options: Array<any>;\n\n @property() showLabel: boolean = true;\n\n @property() labelText = '';\n\n @property() type = 'text|text-area';\n\n @property() required: boolean = true;\n\n @query('.content-editable-input') input: HTMLInputElement;\n @query('.nile-options-container') autoOptions: HTMLInputElement;\n\n @state() private openDropdown: boolean = false;\n\n @property({ attribute: 'help-text' }) helpText = '';\n\n @property({ attribute: 'error-message' }) errorMessage = '';\n\n static styles: CSSResultGroup = styles;\n\n connectedCallback() {\n super.connectedCallback();\n this.emit('nile-init');\n this.afterFirstRender().then(res => {\n if (res && this.value !== '')\n this.input.innerHTML = this.generateHTMLTagsWithValues(this.value);\n });\n }\n\n @watch('type', { waitUntilFirstUpdate: true })\n handleTypeChange() {\n this.input.innerHTML = this.generateHTMLTagsWithValues(this.value);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.emit('nile-destroy');\n }\n\n async afterFirstRender(): Promise<boolean> {\n return await this.updateComplete;\n }\n\n private handlekeyDown(event: any) {\n if (event.code === 'Enter' && this.type === 'text') {\n event.preventDefault();\n }\n setTimeout(() => {\n const value = this.input.innerText;\n this.emitInputChange();\n if (value.includes('$')) {\n this.openDropdown = true;\n }\n });\n }\n\n generateValuesFromHTMLTags(string: any): string {\n var pattern =\n /<span class=\"chips(?: chip-error)?\" contenteditable=\"false\">(.*?)<\\/span>/g;\n var result = string.replace(pattern, (match: any, option: any) => {\n return '{{' + option + '}}';\n });\n return result;\n }\n\n generateHTMLTagsWithValues(string: any): string {\n var pattern = /{{(.*?)}}/g;\n var result = string.replace(pattern, (match: any, option: any) => {\n return this.options.includes(option)\n ? '<span class=\"chips\" contenteditable=\"false\">' + option + '</span>'\n : '<span class=\"chips chip-error\" contenteditable=\"false\">' +\n option +\n '</span>';\n });\n return result;\n }\n\n emitInputChange(): void {\n let fieldValue = this.input.innerHTML;\n\n if (this.input.innerText !== '') {\n fieldValue = this.generateValuesFromHTMLTags(fieldValue);\n }\n fieldValue = fieldValue.replace(/ /g, ' ');\n fieldValue = fieldValue === '<br>' ? '' : fieldValue?.trim();\n this.emit('nile-change', {\n value: this.generateValuesFromHTMLTags(fieldValue),\n });\n }\n\n moveCursorToEnd = () => {\n const range = document.createRange();\n const selection = window.getSelection();\n range.setStart(this.input, this.input.childNodes.length);\n range.collapse(true);\n selection?.removeAllRanges();\n selection?.addRange(range);\n this.input.focus();\n };\n\n handleOptions(option: any): void {\n this.openDropdown = !this.openDropdown;\n\n // not appending Native element as it replaces all existing child nodes with new node\n const autoOptionsTag =\n '<span class=\"chips\" contenteditable=\"false\">' + option + '</span>';\n // text editor adds div when pressing enter , so before appending have to check if its parent node is div else append it to content editable parent\n if (this.input?.lastElementChild?.tagName === 'DIV') {\n this.input.lastElementChild.insertAdjacentHTML(\n 'beforeend',\n autoOptionsTag\n );\n if (this.input.lastElementChild.lastChild?.previousSibling)\n this.input.lastElementChild.lastChild.previousSibling.nodeValue =\n this.input.lastElementChild.lastChild.previousSibling.nodeValue!.replace(\n '$',\n ''\n );\n } else {\n this.input.insertAdjacentHTML('beforeend', autoOptionsTag);\n if (this.input.lastChild?.previousSibling) {\n this.input.lastChild.previousSibling.nodeValue =\n this.input.lastChild.previousSibling.nodeValue!.replace('$', '');\n }\n }\n this.emitInputChange();\n }\n\n public renderAutoOptions(): TemplateResult {\n return html`<div\n class=\"${classMap({\n 'nile-options-container': true,\n 'dropdown-position': this.type === 'text-area',\n })}class\"\n >\n ${this.options &&\n this.options.map((option: any) => {\n return html` <nile-option\n .value=\"${option}\"\n @click=\"${(event: Event) => {\n this.handleOptions(option);\n }}\"\n >${option}\n </nile-option>`;\n })}\n </div>`;\n }\n\n public render(): TemplateResult {\n const hasHelpText = this.helpText ? true : false;\n const hasErrorMessage = !!this.errorMessage;\n const type = this.type;\n return html`\n <nile-popup\n .active=\"${this.openDropdown}\"\n sync=\"width\"\n placement=\"bottom\"\n class=${classMap({\n dropdown: true,\n 'dropdown--open': true,\n popup: true,\n })}\n >\n <div class=\"content-editable-wrapper\" slot=\"anchor\">\n ${this.showLabel && this.labelText\n ? html`<label class=\"ods-label\">${this.labelText} </label> ${this\n .required\n ? html`<span class=\"asterik\">*</span>`\n : ''}`\n : ''}\n <div\n contenteditable=\"true\"\n class=${classMap({\n 'content-editable-input': true,\n error: hasErrorMessage,\n 'text-area': type === 'text-area' ? true : false,\n })}\n @keydown=${this.handlekeyDown}\n ></div>\n ${hasHelpText\n ? html`\n <nile-form-help-text>${this.helpText}</nile-form-help-text>\n `\n : ``}\n ${hasErrorMessage\n ? html`\n <nile-form-error-message\n >${this.errorMessage}</nile-form-error-message\n >\n `\n : ``}\n </div>\n\n ${this.renderAutoOptions()}\n </nile-popup>\n `;\n }\n}\n\nexport default NileContentEditor;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-content-editor': NileContentEditor;\n }\n}\n"]}
|
1
|
+
{"version":3,"file":"nile-content-editor.js","sourceRoot":"","sources":["../../../src/nile-content-editor/nile-content-editor.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, property, TemplateResult } from 'lit-element';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { styles } from './nile-content-editor.css';\nimport { CSSResultGroup } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport NileElement from '../internal/nile-element';\nimport { watch } from '../internal/watch';\nimport { KeyCode } from '../internal/enum';\nimport { live } from 'lit/directives/live.js';\n\n/**\n * Nile icon component.\n *\n * @tag nile-attribute-expression\n *\n */\n@customElement('nile-content-editor')\nexport class NileContentEditor extends NileElement {\n /**\n * @summary Allows you to handle both input and dropdown selection\n\n * @dependency nile-option\n \n * @event nile-change - Emitted when the control's value changes. \n */\n\n @property() value: string = '';\n\n @property() options: Array<any>;\n\n @property() filteredOptions: Array<any>;\n\n @property() showLabel: boolean = true;\n\n @property() labelText = '';\n\n @property() type = 'text|text-area';\n\n @property() required: boolean = true;\n\n @query('.content-editable-input') contentEditor: HTMLInputElement;\n @query('.nile-options-container') autoOptions: HTMLInputElement;\n\n @state() openDropdown = false;\n\n tagIdentifier = '$';\n\n filteredValue = '';\n\n @property({ attribute: 'help-text' }) helpText = '';\n\n @property({ attribute: 'readonly' }) readonly = false;\n\n @property({ attribute: 'error-message' }) errorMessage = '';\n\n @property({ attribute: 'error' }) error = false;\n\n static styles: CSSResultGroup = styles;\n\n connectedCallback() {\n this.handleOutsideClick = this.handleOutsideClick.bind(this);\n super.connectedCallback();\n this.emit('nile-init');\n this.addOpenListeners();\n this.setInitialValues();\n }\n\n setInitialValues() {\n this.updateComplete.then(res => {\n if (res && !!this.value)\n this.contentEditor.innerHTML = this.generateHTMLTagsWithValues(\n this.value\n );\n });\n }\n\n addOpenListeners() {\n window.addEventListener('click', this.handleOutsideClick);\n }\n\n removeOpenListeners() {\n window.removeEventListener('click', this.handleOutsideClick);\n }\n\n toggleDropdown(value: boolean) {\n this.openDropdown = value;\n }\n\n handleOutsideClick(event: Event) {\n if (event && event.target) {\n this.toggleDropdown(false);\n }\n }\n\n @watch('type', { waitUntilFirstUpdate: true })\n handleTypeChange() {\n this.contentEditor.innerHTML = this.generateHTMLTagsWithValues(this.value);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeOpenListeners();\n this.emit('nile-destroy');\n }\n\n handlePaste(event: ClipboardEvent) {\n event.preventDefault();\n if (event.clipboardData) {\n let text = event.clipboardData.getData('text/plain');\n document.execCommand('insertText', false, text);\n }\n this.emitInputChange();\n }\n\n private handlekeyDown(event: any) {\n if (event.code === KeyCode.ENTER && this.type === 'text') {\n event.preventDefault();\n return;\n }\n if (event.code === KeyCode.ESCAPE) {\n event.preventDefault();\n this.toggleDropdown(false);\n return;\n }\n setTimeout(() => {\n const value = this.contentEditor.innerText;\n this.emitInputChange();\n if (value.includes(this.tagIdentifier)) {\n this.toggleDropdown(true);\n this.filterOptions();\n } else {\n this.toggleDropdown(false);\n }\n });\n }\n\n filterOptions() {\n this.filteredOptions = this.options;\n if (!!this.options.length && !!this.filteredValue) {\n this.filteredOptions = this.options.filter(item =>\n item.startsWith(this.filteredValue)\n );\n } else {\n this.filteredOptions = this.options;\n }\n }\n\n generateValuesFromHTMLTags(string: any): string {\n var pattern =\n /<span class=\"chips(?: chip-error)?\" contenteditable=\"false\">(.*?)<\\/span>/g;\n var result = string.replace(pattern, (match: any, option: any) => {\n return '{{' + option + '}}';\n });\n return result;\n }\n\n generateHTMLTagsWithValues(string: any): string {\n var pattern = /{{(.*?)}}/g;\n var result = string.replace(pattern, (match: any, option: any) => {\n return this.options.includes(option)\n ? '<span class=\"chips\" contenteditable=\"false\">' + option + '</span>'\n : '<span class=\"chips chip-error\" contenteditable=\"false\">' +\n option +\n '</span>';\n });\n return result;\n }\n\n emitInputChange(): void {\n if (this.contentEditor) {\n let fieldValue = this.contentEditor.innerHTML;\n\n if (this.contentEditor.innerText !== '') {\n fieldValue = this.generateValuesFromHTMLTags(fieldValue);\n }\n fieldValue = fieldValue.replace(/ /g, ' ');\n fieldValue = fieldValue === '<br>' ? '' : fieldValue?.trim();\n this.emit('nile-change', {\n value: this.generateValuesFromHTMLTags(fieldValue),\n });\n }\n }\n\n insertNodes(parentNode: Node, childNodes: NodeList, autoOptionsTag: Node) {\n Array.from(childNodes).map((node: Node, index: number) => {\n if (node.hasChildNodes()) {\n this.insertNodes(node, node.childNodes, autoOptionsTag);\n } else {\n if (node.nodeValue?.includes(this.tagIdentifier)) {\n parentNode.childNodes[index].nodeValue = node.nodeValue?.replace(\n this.tagIdentifier + this.filteredValue,\n ''\n );\n parentNode.childNodes[index].after(autoOptionsTag);\n }\n }\n });\n }\n\n handleOptions(option: any): void {\n this.toggleDropdown(false);\n let autoOptionsTag = document.createElement('span');\n autoOptionsTag.setAttribute('class', 'chips');\n autoOptionsTag.setAttribute('contentEditable', 'false');\n autoOptionsTag.innerText = option;\n this.insertNodes(\n this.contentEditor,\n this.contentEditor.childNodes,\n autoOptionsTag\n );\n this.filteredOptions = this.options;\n this.filteredValue = '';\n this.emitInputChange();\n }\n\n public renderAutoOptions(): TemplateResult {\n return html`<div\n class=\"${classMap({\n 'nile-options-container': true,\n 'dropdown-position': this.type === 'text-area',\n })}\"\n >\n ${this.filteredOptions &&\n this.filteredOptions.map((option: any) => {\n return html` <nile-option\n .value=\"${option}\"\n @click=\"${(event: Event) => {\n this.handleOptions(option);\n }}\"\n >${option}\n </nile-option>`;\n })}\n </div>`;\n }\n\n public render(): TemplateResult {\n const hasHelpText = this.helpText ? true : false;\n const hasError = !!this.error;\n const hasErrorMessage = !!this.errorMessage;\n const readonly = !!this.readonly;\n const type = this.type;\n return html`\n <nile-popup\n .active=\"${live(this.openDropdown)}\"\n sync=\"width\"\n placement=\"bottom\"\n class=${classMap({\n dropdown: true,\n 'dropdown--open': true,\n popup: true,\n })}\n >\n <div class=\"content-editable-wrapper\" slot=\"anchor\">\n ${this.showLabel && this.labelText\n ? html`<label class=\"ods-label\">${this.labelText} </label> ${this\n .required\n ? html`<sapn class=\"asterik\">*</span>`\n : ''}`\n : ''}\n <div\n contenteditable=\"${!readonly}\"\n class=${classMap({\n 'content-editable-input': true,\n error: hasError || hasErrorMessage,\n 'read-only': readonly,\n 'text-area': type === 'text-area' ? true : false,\n })}\n @keydown=${this.handlekeyDown}\n @paste=${this.handlePaste}\n ></div>\n ${hasHelpText\n ? html`\n <nile-form-help-text>${this.helpText}</nile-form-help-text>\n `\n : ``}\n ${hasErrorMessage\n ? html`\n <nile-form-error-message\n >${this.errorMessage}</nile-form-error-message\n >\n `\n : ``}\n </div>\n\n ${this.renderAutoOptions()}\n </nile-popup>\n `;\n }\n}\n\nexport default NileContentEditor;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-content-editor': NileContentEditor;\n }\n}\n"]}
|
@@ -25,6 +25,7 @@ export interface switchconfig {
|
|
25
25
|
[key: string]: any;
|
26
26
|
toggleSwitch: boolean;
|
27
27
|
disable?: boolean;
|
28
|
+
confirmation?: boolean;
|
28
29
|
defaultInput: switchInputType;
|
29
30
|
switchInput: switchInputType;
|
30
31
|
}
|
@@ -32,7 +33,8 @@ export interface switchInputType {
|
|
32
33
|
inputType: INPUT_TYPE_NAMES.DROPDOWN | INPUT_TYPE_NAMES.TEXT | INPUT_TYPE_NAMES.CHECKBOX | INPUT_TYPE_NAMES.TEXTAREA | INPUT_TYPE_NAMES.RADIO | INPUT_TYPE_NAMES.CONTENTEDITOR;
|
33
34
|
value?: String | boolean;
|
34
35
|
label?: String;
|
35
|
-
|
36
|
+
readonly?: boolean;
|
37
|
+
type?: string;
|
36
38
|
placeholder?: string;
|
37
39
|
disabled?: boolean;
|
38
40
|
required?: boolean;
|
@@ -101,11 +101,12 @@ let NileSwitcher = class NileSwitcher extends NileElement {
|
|
101
101
|
</nile-radio-group>`;
|
102
102
|
}
|
103
103
|
renderContentEditor(Input, inputType) {
|
104
|
-
const { value, options, inputType: inputTypeName, errorMessage, type, } = Input;
|
104
|
+
const { value, options, inputType: inputTypeName, errorMessage, type, readonly, } = Input;
|
105
105
|
return html `<nile-content-editor
|
106
106
|
.value=${value}
|
107
107
|
.options=${options}
|
108
108
|
.type =${type}
|
109
|
+
.readonly=${readonly}
|
109
110
|
.errorMessage=${errorMessage}
|
110
111
|
@nile-change=${(e) => {
|
111
112
|
this.handleChange(e, inputType, inputTypeName);
|
@@ -133,7 +134,7 @@ let NileSwitcher = class NileSwitcher extends NileElement {
|
|
133
134
|
size="14"
|
134
135
|
class=${classMap({
|
135
136
|
'pointer-cursor': true,
|
136
|
-
'flex-start':
|
137
|
+
'flex-start': true,
|
137
138
|
})}
|
138
139
|
.name=${icon}
|
139
140
|
color="#005EA6"
|
@@ -141,10 +142,12 @@ let NileSwitcher = class NileSwitcher extends NileElement {
|
|
141
142
|
></nile-icon>`;
|
142
143
|
}
|
143
144
|
toggleField() {
|
144
|
-
this.nileSwitchConfig
|
145
|
-
|
146
|
-
|
147
|
-
|
145
|
+
if (!this.nileSwitchConfig.confirmation) {
|
146
|
+
this.nileSwitchConfig = {
|
147
|
+
...this.nileSwitchConfig,
|
148
|
+
toggleSwitch: !this.nileSwitchConfig.toggleSwitch,
|
149
|
+
};
|
150
|
+
}
|
148
151
|
this.emit('nile-switch', { config: this.nileSwitchConfig });
|
149
152
|
}
|
150
153
|
singleFieldSwitcher(defaultInput, switchInput, toggleField, disable) {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"nile-switcher.js","sourceRoot":"","sources":["../../../src/nile-switcher/nile-switcher.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, property, TemplateResult } from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport { styles } from './nile-switcher.css';\nimport NileElement from '../internal/nile-element';\nimport { CSSResultGroup } from 'lit';\nimport { choose } from 'lit/directives/choose.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\n/**\n * @summary Allows you to switch between nile elements\n\n * @dependency nile-icon\n * @dependency nile-input\n * @dependency nile-checkbox\n * @dependency nile-dropdown\n * @dependency nile-textarea\n *\n \n * @event nile-change - Emitted when the control's value changes.\n * @event nile-switch - Emitted when the nile component is being switched.\n \n */\n\nexport interface switchconfig {\n [key: string]: any;\n toggleSwitch: boolean;\n disable?: boolean;\n defaultInput: switchInputType;\n switchInput: switchInputType;\n}\n\nexport interface switchInputType {\n inputType:\n | INPUT_TYPE_NAMES.DROPDOWN\n | INPUT_TYPE_NAMES.TEXT\n | INPUT_TYPE_NAMES.CHECKBOX\n | INPUT_TYPE_NAMES.TEXTAREA\n | INPUT_TYPE_NAMES.RADIO\n | INPUT_TYPE_NAMES.CONTENTEDITOR;\n value?: String | boolean;\n label?: String;\n type: string;\n placeholder?: string;\n disabled?: boolean;\n required?: boolean;\n error?: boolean;\n errorMessage?: string;\n options?: Array<any>;\n multiple?: boolean;\n}\n\nexport enum INPUT_TYPE {\n DEFAULT = 'defaultInput',\n SWITCH = 'switchInput',\n}\n\nexport enum INPUT_TYPE_NAMES {\n DROPDOWN = 'dropdown',\n TEXT = 'text',\n CHECKBOX = 'checkbox',\n TEXTAREA = 'text-area',\n RADIO = 'radio',\n CONTENTEDITOR = 'content-editor',\n}\n\n@customElement('nile-switcher')\nexport class NileSwitcher extends NileElement {\n /**\n * The styles for nile switcher\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n */\n static styles: CSSResultGroup = styles;\n @property({ type: Object }) nileSwitchConfig: switchconfig;\n\n connectedCallback() {\n super.connectedCallback();\n this.emit('nile-init');\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.emit('nile-destroy');\n }\n\n renderNileText(Input: switchInputType, inputType: string) {\n const {\n value,\n label,\n placeholder,\n disabled,\n required,\n errorMessage,\n inputType: inputTypeName,\n } = Input;\n return html`<nile-input\n .value=${value}\n .label=${label}\n .disabled=${disabled}\n .required=${required}\n .errorMessage=${errorMessage}\n .placeholder=${placeholder}\n .error=${true}\n @nile-input=${(e: CustomEvent) => {\n this.handleChange(e, inputType, inputTypeName);\n }}\n ></nile-input>`;\n }\n\n renderDropdown(Input: switchInputType, inputType: string) {\n const {\n options,\n multiple,\n placeholder,\n disabled,\n inputType: inputTypeName,\n } = Input;\n return html`<nile-select\n .placeholder=${placeholder}\n .disabled=\"${disabled}\"\n .multiple=\"${multiple}\"\n @nile-change=${(e: CustomEvent) => {\n this.handleChange(e, inputType, inputTypeName);\n }}\n >\n ${options?.map((option: any) => {\n return html`<nile-option .value=\"${option}\">${option} </nile-option>`;\n })}\n </nile-select>`;\n }\n\n renderNileTextArea(Input: switchInputType, inputType: string) {\n const { value, disabled, inputType: inputTypeName } = Input;\n return html`<nile-textarea\n .value=${value}\n .disabled=${disabled}\n @nile-input=${(e: CustomEvent) => {\n this.handleChange(e, inputType, inputTypeName);\n }}\n ></nile-textarea>`;\n }\n\n renderNileCheckBox(Input: switchInputType, inputType: string) {\n const { value, label, disabled, inputType: inputTypeName } = Input;\n\n return html`<nile-checkbox\n .checked=${value}\n .label=${label}\n .disabled=${disabled}\n @valueChange=${(e: CustomEvent) => {\n this.handleChange(e, inputType, inputTypeName);\n }}\n ></nile-checkbox>`;\n }\n\n renderNileRadio(Input: switchInputType, inputType: string) {\n const { options, value, disabled, inputType: inputTypeName } = Input;\n\n return html`<nile-radio-group\n .value=${value}\n .disabled=${disabled}\n @change=${(e: CustomEvent) => {\n this.handleChange(e, inputType, inputTypeName);\n }}\n >\n ${options &&\n options.map((option: any) => {\n return html`<nile-radio .value=\"${option}\">${option} </nile-radio>`;\n })}\n </nile-radio-group>`;\n }\n\n renderContentEditor(Input: switchInputType, inputType: string) {\n const {\n value,\n options,\n inputType: inputTypeName,\n errorMessage,\n type,\n } = Input;\n return html`<nile-content-editor\n .value=${value}\n .options=${options}\n .type =${type}\n .errorMessage=${errorMessage}\n @nile-change=${(e: CustomEvent) => {\n this.handleChange(e, inputType, inputTypeName);\n }}\n >\n </nile-radio-group>`;\n }\n\n handleChange(event: CustomEvent, inputType: string, inputTypeName: string) {\n if (inputTypeName === INPUT_TYPE_NAMES.CHECKBOX) {\n this.nileSwitchConfig[inputType as keyof switchconfig].value =\n event.detail.checked;\n } else {\n this.nileSwitchConfig[inputType as keyof switchconfig].value =\n event.detail.value;\n }\n event.stopPropagation();\n this.emit('nile-change', { config: this.nileSwitchConfig });\n }\n\n renderIcon() {\n const icon = !this.nileSwitchConfig.toggleSwitch\n ? 'header-functions'\n : 'stringinput';\n return html`<nile-icon\n size=\"14\"\n class=${classMap({\n 'pointer-cursor': true,\n 'flex-start': icon === 'stringinput',\n })}\n .name=${icon}\n color=\"#005EA6\"\n @click=${this.toggleField}\n ></nile-icon>`;\n }\n\n toggleField() {\n this.nileSwitchConfig = {\n ...this.nileSwitchConfig,\n toggleSwitch: !this.nileSwitchConfig.toggleSwitch,\n };\n this.emit('nile-switch', { config: this.nileSwitchConfig });\n }\n\n singleFieldSwitcher(\n defaultInput: switchInputType,\n switchInput: switchInputType,\n toggleField: boolean,\n disable: boolean\n ) {\n const defaultInputType = defaultInput.inputType;\n const switchInputType = switchInput.inputType;\n return html`\n ${!toggleField\n ? choose(\n defaultInputType,\n [\n [\n INPUT_TYPE_NAMES.TEXT,\n () => this.renderNileText(defaultInput, INPUT_TYPE.DEFAULT),\n ],\n [\n INPUT_TYPE_NAMES.CHECKBOX,\n () => this.renderNileCheckBox(defaultInput, INPUT_TYPE.DEFAULT),\n ],\n [\n INPUT_TYPE_NAMES.TEXTAREA,\n () => this.renderNileTextArea(defaultInput, INPUT_TYPE.DEFAULT),\n ],\n [\n INPUT_TYPE_NAMES.RADIO,\n () => this.renderNileRadio(defaultInput, INPUT_TYPE.DEFAULT),\n ],\n [\n INPUT_TYPE_NAMES.DROPDOWN,\n () =>\n this.renderDropdown(\n this.nileSwitchConfig.defaultInput,\n INPUT_TYPE.DEFAULT\n ),\n ],\n [\n INPUT_TYPE_NAMES.CONTENTEDITOR,\n () =>\n this.renderContentEditor(\n this.nileSwitchConfig.defaultInput,\n INPUT_TYPE.DEFAULT\n ),\n ],\n ],\n () => this.renderNileText(defaultInput, INPUT_TYPE.DEFAULT)\n )\n : choose(\n switchInputType,\n [\n [\n INPUT_TYPE_NAMES.TEXTAREA,\n () => this.renderNileTextArea(switchInput, INPUT_TYPE.SWITCH),\n ],\n [\n INPUT_TYPE_NAMES.TEXT,\n () => this.renderNileText(switchInput, INPUT_TYPE.SWITCH),\n ],\n [\n INPUT_TYPE_NAMES.CONTENTEDITOR,\n () => this.renderContentEditor(switchInput, INPUT_TYPE.SWITCH),\n ],\n ],\n\n () => this.renderNileTextArea(switchInput, INPUT_TYPE.SWITCH)\n )}\n ${!disable ? this.renderIcon() : ''}\n `;\n }\n public render(): TemplateResult {\n const {\n toggleSwitch: toggleField,\n defaultInput,\n switchInput,\n disable,\n } = this.nileSwitchConfig;\n\n return html`<div class=\"input-container\">\n ${this.singleFieldSwitcher(\n defaultInput,\n switchInput,\n toggleField,\n !!disable\n )}\n </div>`;\n }\n}\n\nexport default NileSwitcher;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-switcher': NileSwitcher;\n }\n}\n"]}
|
1
|
+
{"version":3,"file":"nile-switcher.js","sourceRoot":"","sources":["../../../src/nile-switcher/nile-switcher.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, property, TemplateResult } from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport { styles } from './nile-switcher.css';\nimport NileElement from '../internal/nile-element';\nimport { CSSResultGroup } from 'lit';\nimport { choose } from 'lit/directives/choose.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\n/**\n * @summary Allows you to switch between nile elements\n\n * @dependency nile-icon\n * @dependency nile-input\n * @dependency nile-checkbox\n * @dependency nile-dropdown\n * @dependency nile-textarea\n *\n \n * @event nile-change - Emitted when the control's value changes.\n * @event nile-switch - Emitted when the nile component is being switched.\n \n */\n\nexport interface switchconfig {\n [key: string]: any;\n toggleSwitch: boolean;\n disable?: boolean;\n confirmation?: boolean;\n defaultInput: switchInputType;\n switchInput: switchInputType;\n}\n\nexport interface switchInputType {\n inputType:\n | INPUT_TYPE_NAMES.DROPDOWN\n | INPUT_TYPE_NAMES.TEXT\n | INPUT_TYPE_NAMES.CHECKBOX\n | INPUT_TYPE_NAMES.TEXTAREA\n | INPUT_TYPE_NAMES.RADIO\n | INPUT_TYPE_NAMES.CONTENTEDITOR;\n value?: String | boolean;\n label?: String;\n readonly?: boolean;\n type?: string;\n placeholder?: string;\n disabled?: boolean;\n required?: boolean;\n error?: boolean;\n errorMessage?: string;\n options?: Array<any>;\n multiple?: boolean;\n}\n\nexport enum INPUT_TYPE {\n DEFAULT = 'defaultInput',\n SWITCH = 'switchInput',\n}\n\nexport enum INPUT_TYPE_NAMES {\n DROPDOWN = 'dropdown',\n TEXT = 'text',\n CHECKBOX = 'checkbox',\n TEXTAREA = 'text-area',\n RADIO = 'radio',\n CONTENTEDITOR = 'content-editor',\n}\n\n@customElement('nile-switcher')\nexport class NileSwitcher extends NileElement {\n /**\n * The styles for nile switcher\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n */\n static styles: CSSResultGroup = styles;\n @property({ type: Object }) nileSwitchConfig: switchconfig;\n\n connectedCallback() {\n super.connectedCallback();\n this.emit('nile-init');\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.emit('nile-destroy');\n }\n\n renderNileText(Input: switchInputType, inputType: string) {\n const {\n value,\n label,\n placeholder,\n disabled,\n required,\n errorMessage,\n inputType: inputTypeName,\n } = Input;\n return html`<nile-input\n .value=${value}\n .label=${label}\n .disabled=${disabled}\n .required=${required}\n .errorMessage=${errorMessage}\n .placeholder=${placeholder}\n .error=${true}\n @nile-input=${(e: CustomEvent) => {\n this.handleChange(e, inputType, inputTypeName);\n }}\n ></nile-input>`;\n }\n\n renderDropdown(Input: switchInputType, inputType: string) {\n const {\n options,\n multiple,\n placeholder,\n disabled,\n inputType: inputTypeName,\n } = Input;\n return html`<nile-select\n .placeholder=${placeholder}\n .disabled=\"${disabled}\"\n .multiple=\"${multiple}\"\n @nile-change=${(e: CustomEvent) => {\n this.handleChange(e, inputType, inputTypeName);\n }}\n >\n ${options?.map((option: any) => {\n return html`<nile-option .value=\"${option}\">${option} </nile-option>`;\n })}\n </nile-select>`;\n }\n\n renderNileTextArea(Input: switchInputType, inputType: string) {\n const { value, disabled, inputType: inputTypeName } = Input;\n return html`<nile-textarea\n .value=${value}\n .disabled=${disabled}\n @nile-input=${(e: CustomEvent) => {\n this.handleChange(e, inputType, inputTypeName);\n }}\n ></nile-textarea>`;\n }\n\n renderNileCheckBox(Input: switchInputType, inputType: string) {\n const { value, label, disabled, inputType: inputTypeName } = Input;\n\n return html`<nile-checkbox\n .checked=${value}\n .label=${label}\n .disabled=${disabled}\n @valueChange=${(e: CustomEvent) => {\n this.handleChange(e, inputType, inputTypeName);\n }}\n ></nile-checkbox>`;\n }\n\n renderNileRadio(Input: switchInputType, inputType: string) {\n const { options, value, disabled, inputType: inputTypeName } = Input;\n\n return html`<nile-radio-group\n .value=${value}\n .disabled=${disabled}\n @change=${(e: CustomEvent) => {\n this.handleChange(e, inputType, inputTypeName);\n }}\n >\n ${options &&\n options.map((option: any) => {\n return html`<nile-radio .value=\"${option}\">${option} </nile-radio>`;\n })}\n </nile-radio-group>`;\n }\n\n renderContentEditor(Input: switchInputType, inputType: string) {\n const {\n value,\n options,\n inputType: inputTypeName,\n errorMessage,\n type,\n readonly,\n } = Input;\n return html`<nile-content-editor\n .value=${value}\n .options=${options}\n .type =${type}\n .readonly=${readonly}\n .errorMessage=${errorMessage}\n @nile-change=${(e: CustomEvent) => {\n this.handleChange(e, inputType, inputTypeName);\n }}\n >\n </nile-radio-group>`;\n }\n\n handleChange(event: CustomEvent, inputType: string, inputTypeName: string) {\n if (inputTypeName === INPUT_TYPE_NAMES.CHECKBOX) {\n this.nileSwitchConfig[inputType as keyof switchconfig].value =\n event.detail.checked;\n } else {\n this.nileSwitchConfig[inputType as keyof switchconfig].value =\n event.detail.value;\n }\n event.stopPropagation();\n this.emit('nile-change', { config: this.nileSwitchConfig });\n }\n\n renderIcon() {\n const icon = !this.nileSwitchConfig.toggleSwitch\n ? 'header-functions'\n : 'stringinput';\n return html`<nile-icon\n size=\"14\"\n class=${classMap({\n 'pointer-cursor': true,\n 'flex-start': true,\n })}\n .name=${icon}\n color=\"#005EA6\"\n @click=${this.toggleField}\n ></nile-icon>`;\n }\n\n toggleField() {\n if (!this.nileSwitchConfig.confirmation) {\n this.nileSwitchConfig = {\n ...this.nileSwitchConfig,\n toggleSwitch: !this.nileSwitchConfig.toggleSwitch,\n };\n }\n this.emit('nile-switch', { config: this.nileSwitchConfig });\n }\n\n singleFieldSwitcher(\n defaultInput: switchInputType,\n switchInput: switchInputType,\n toggleField: boolean,\n disable: boolean\n ) {\n const defaultInputType = defaultInput.inputType;\n const switchInputType = switchInput.inputType;\n return html`\n ${!toggleField\n ? choose(\n defaultInputType,\n [\n [\n INPUT_TYPE_NAMES.TEXT,\n () => this.renderNileText(defaultInput, INPUT_TYPE.DEFAULT),\n ],\n [\n INPUT_TYPE_NAMES.CHECKBOX,\n () => this.renderNileCheckBox(defaultInput, INPUT_TYPE.DEFAULT),\n ],\n [\n INPUT_TYPE_NAMES.TEXTAREA,\n () => this.renderNileTextArea(defaultInput, INPUT_TYPE.DEFAULT),\n ],\n [\n INPUT_TYPE_NAMES.RADIO,\n () => this.renderNileRadio(defaultInput, INPUT_TYPE.DEFAULT),\n ],\n [\n INPUT_TYPE_NAMES.DROPDOWN,\n () =>\n this.renderDropdown(\n this.nileSwitchConfig.defaultInput,\n INPUT_TYPE.DEFAULT\n ),\n ],\n [\n INPUT_TYPE_NAMES.CONTENTEDITOR,\n () =>\n this.renderContentEditor(\n this.nileSwitchConfig.defaultInput,\n INPUT_TYPE.DEFAULT\n ),\n ],\n ],\n () => this.renderNileText(defaultInput, INPUT_TYPE.DEFAULT)\n )\n : choose(\n switchInputType,\n [\n [\n INPUT_TYPE_NAMES.TEXTAREA,\n () => this.renderNileTextArea(switchInput, INPUT_TYPE.SWITCH),\n ],\n [\n INPUT_TYPE_NAMES.TEXT,\n () => this.renderNileText(switchInput, INPUT_TYPE.SWITCH),\n ],\n [\n INPUT_TYPE_NAMES.CONTENTEDITOR,\n () => this.renderContentEditor(switchInput, INPUT_TYPE.SWITCH),\n ],\n ],\n\n () => this.renderNileTextArea(switchInput, INPUT_TYPE.SWITCH)\n )}\n ${!disable ? this.renderIcon() : ''}\n `;\n }\n public render(): TemplateResult {\n const {\n toggleSwitch: toggleField,\n defaultInput,\n switchInput,\n disable,\n } = this.nileSwitchConfig;\n\n return html`<div class=\"input-container\">\n ${this.singleFieldSwitcher(\n defaultInput,\n switchInput,\n toggleField,\n !!disable\n )}\n </div>`;\n }\n}\n\nexport default NileSwitcher;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-switcher': NileSwitcher;\n }\n}\n"]}
|