@aquera/nile-elements 0.0.92 → 0.0.93
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/README.md +6 -0
- package/demo/variables.css +1 -0
- package/demo/variables_v2.css +1 -0
- package/dist/{angular-ts-da0fd838.cjs.js → angular-ts-a95c67aa.cjs.js} +2 -2
- package/dist/{angular-ts-da0fd838.cjs.js.map → angular-ts-a95c67aa.cjs.js.map} +1 -1
- package/dist/{asciidoc-de6540f7.esm.js → asciidoc-b8046ce8.esm.js} +1 -1
- package/dist/{asciidoc-b383cc2e.cjs.js → asciidoc-c0ae04c3.cjs.js} +2 -2
- package/dist/{asciidoc-b383cc2e.cjs.js.map → asciidoc-c0ae04c3.cjs.js.map} +1 -1
- package/dist/{astro-05e2da78.cjs.js → astro-97602850.cjs.js} +2 -2
- package/dist/{astro-05e2da78.cjs.js.map → astro-97602850.cjs.js.map} +1 -1
- package/dist/{astro-1223c814.esm.js → astro-de938e80.esm.js} +1 -1
- package/dist/{crystal-00fdf85b.esm.js → crystal-5e351a7d.esm.js} +1 -1
- package/dist/{crystal-ae510520.cjs.js → crystal-bfe435a1.cjs.js} +2 -2
- package/dist/{crystal-ae510520.cjs.js.map → crystal-bfe435a1.cjs.js.map} +1 -1
- package/dist/dotenv-2978380a.esm.js +1 -0
- package/dist/dotenv-6a845f3d.cjs.js +2 -0
- package/dist/dotenv-6a845f3d.cjs.js.map +1 -0
- package/dist/{edge-9983b50e.cjs.js → edge-f122fee4.cjs.js} +2 -2
- package/dist/{edge-9983b50e.cjs.js.map → edge-f122fee4.cjs.js.map} +1 -1
- package/dist/{erb-6afdf0fc.cjs.js → erb-4ff167eb.cjs.js} +2 -2
- package/dist/{erb-6afdf0fc.cjs.js.map → erb-4ff167eb.cjs.js.map} +1 -1
- package/dist/{erb-e26dd182.esm.js → erb-baff1e72.esm.js} +1 -1
- package/dist/everforest-dark-0ddfeebd.cjs.js +2 -0
- package/dist/everforest-dark-0ddfeebd.cjs.js.map +1 -0
- package/dist/everforest-dark-c8bfaab7.esm.js +1 -0
- package/dist/everforest-light-d4dc4485.esm.js +1 -0
- package/dist/everforest-light-eee329e3.cjs.js +2 -0
- package/dist/everforest-light-eee329e3.cjs.js.map +1 -0
- package/dist/{fortran-fixed-form-dc511aa4.cjs.js → fortran-fixed-form-48ce1631.cjs.js} +2 -2
- package/dist/{fortran-fixed-form-dc511aa4.cjs.js.map → fortran-fixed-form-48ce1631.cjs.js.map} +1 -1
- package/dist/{fsharp-33f71ce3.esm.js → fsharp-941d0410.esm.js} +1 -1
- package/dist/{fsharp-2716dc4e.cjs.js → fsharp-9f65d045.cjs.js} +2 -2
- package/dist/{fsharp-2716dc4e.cjs.js.map → fsharp-9f65d045.cjs.js.map} +1 -1
- package/dist/{gdresource-10e5a92c.cjs.js → gdresource-f69c4269.cjs.js} +2 -2
- package/dist/{gdresource-10e5a92c.cjs.js.map → gdresource-f69c4269.cjs.js.map} +1 -1
- package/dist/{git-rebase-3af101f6.esm.js → git-rebase-a164f4f3.esm.js} +1 -1
- package/dist/{git-rebase-6c8a29e3.cjs.js → git-rebase-d4b1bf1e.cjs.js} +2 -2
- package/dist/{git-rebase-6c8a29e3.cjs.js.map → git-rebase-d4b1bf1e.cjs.js.map} +1 -1
- package/dist/{haml-0a4f1779.esm.js → haml-2548eb67.esm.js} +1 -1
- package/dist/{haml-9562b9cb.cjs.js → haml-a62722ee.cjs.js} +2 -2
- package/dist/{haml-9562b9cb.cjs.js.map → haml-a62722ee.cjs.js.map} +1 -1
- package/dist/{http-fbb08279.cjs.js → http-243ce707.cjs.js} +2 -2
- package/dist/{http-fbb08279.cjs.js.map → http-243ce707.cjs.js.map} +1 -1
- package/dist/{http-93fe835e.esm.js → http-5eea627d.esm.js} +1 -1
- package/dist/{hxml-84e30280.cjs.js → hxml-36e954b2.cjs.js} +2 -2
- package/dist/{hxml-84e30280.cjs.js.map → hxml-36e954b2.cjs.js.map} +1 -1
- package/dist/julia-289248e3.esm.js +1 -0
- package/dist/julia-e6d02a84.cjs.js +2 -0
- package/dist/julia-e6d02a84.cjs.js.map +1 -0
- package/dist/kotlin-0426de90.cjs.js +2 -0
- package/dist/kotlin-0426de90.cjs.js.map +1 -0
- package/dist/kotlin-9232cba2.esm.js +1 -0
- package/dist/latex-1732805a.cjs.js +2 -0
- package/dist/latex-1732805a.cjs.js.map +1 -0
- package/dist/latex-d31ca0af.esm.js +1 -0
- package/dist/less-263f5e43.esm.js +1 -0
- package/dist/less-d05a73ab.cjs.js +2 -0
- package/dist/less-d05a73ab.cjs.js.map +1 -0
- package/dist/{marko-6fdf941d.cjs.js → marko-5bdb0e54.cjs.js} +2 -2
- package/dist/{marko-6fdf941d.cjs.js.map → marko-5bdb0e54.cjs.js.map} +1 -1
- package/dist/{marko-f6122312.esm.js → marko-b0214c2c.esm.js} +1 -1
- package/dist/{mdc-34a9ac72.cjs.js → mdc-a3ab9285.cjs.js} +2 -2
- package/dist/{mdc-34a9ac72.cjs.js.map → mdc-a3ab9285.cjs.js.map} +1 -1
- package/dist/nile-code-editor/extensionSetup.cjs.js +2 -2
- package/dist/nile-code-editor/extensionSetup.esm.js +1 -1
- package/dist/nile-code-editor/nile-code-editor.cjs.js +2 -2
- package/dist/nile-code-editor/nile-code-editor.cjs.js.map +1 -1
- package/dist/nile-code-editor/nile-code-editor.esm.js +3 -3
- package/dist/nile-highlighter/nile-highlighter.cjs.js +1 -1
- package/dist/nile-highlighter/nile-highlighter.cjs.js.map +1 -1
- package/dist/nile-highlighter/nile-highlighter.esm.js +1 -1
- package/dist/nile-menu/index.cjs.js +1 -1
- package/dist/nile-menu/index.esm.js +1 -1
- package/dist/nile-menu/nile-menu.cjs.js +1 -1
- package/dist/nile-menu/nile-menu.cjs.js.map +1 -1
- package/dist/nile-menu/nile-menu.css.cjs.js +1 -1
- package/dist/nile-menu/nile-menu.css.cjs.js.map +1 -1
- package/dist/nile-menu/nile-menu.css.esm.js +24 -2
- package/dist/nile-menu/nile-menu.esm.js +7 -3
- package/dist/nile-select/nile-select.cjs.js +1 -1
- package/dist/nile-select/nile-select.cjs.js.map +1 -1
- package/dist/nile-select/nile-select.esm.js +2 -2
- package/dist/nile-stepper/nile-stepper.cjs.js +1 -1
- package/dist/nile-stepper/nile-stepper.cjs.js.map +1 -1
- package/dist/nile-stepper/nile-stepper.esm.js +3 -3
- package/dist/{nim-808435cb.cjs.js → nim-df5f9efe.cjs.js} +2 -2
- package/dist/{nim-808435cb.cjs.js.map → nim-df5f9efe.cjs.js.map} +1 -1
- package/dist/{rst-98199db8.esm.js → rst-32451dee.esm.js} +1 -1
- package/dist/{rst-a41b2bdd.cjs.js → rst-64e995dc.cjs.js} +2 -2
- package/dist/{rst-a41b2bdd.cjs.js.map → rst-64e995dc.cjs.js.map} +1 -1
- package/dist/{ruby-44a4045d.cjs.js → ruby-82bc8c10.cjs.js} +2 -2
- package/dist/{ruby-44a4045d.cjs.js.map → ruby-82bc8c10.cjs.js.map} +1 -1
- package/dist/{ruby-ed20df8b.esm.js → ruby-b8bcac40.esm.js} +1 -1
- package/dist/{shaderlab-75efb6b5.cjs.js → shaderlab-8f7349ac.cjs.js} +2 -2
- package/dist/{shaderlab-75efb6b5.cjs.js.map → shaderlab-8f7349ac.cjs.js.map} +1 -1
- package/dist/{shellscript-95a6b265.esm.js → shellscript-9a12df8f.esm.js} +1 -1
- package/dist/{shellscript-ada948c5.cjs.js → shellscript-9c815bf4.cjs.js} +2 -2
- package/dist/shellscript-9c815bf4.cjs.js.map +1 -0
- package/dist/{shellsession-c69f0eea.esm.js → shellsession-a931a3f3.esm.js} +1 -1
- package/dist/{shellsession-c26f94d1.cjs.js → shellsession-c07da9ea.cjs.js} +2 -2
- package/dist/{shellsession-c26f94d1.cjs.js.map → shellsession-c07da9ea.cjs.js.map} +1 -1
- package/dist/{sparql-933afbfc.cjs.js → sparql-cd3386f5.cjs.js} +2 -2
- package/dist/{sparql-933afbfc.cjs.js.map → sparql-cd3386f5.cjs.js.map} +1 -1
- package/dist/src/nile-code-editor/nile-code-editor.d.ts +9 -9
- package/dist/src/nile-code-editor/nile-code-editor.js +49 -50
- package/dist/src/nile-code-editor/nile-code-editor.js.map +1 -1
- package/dist/src/nile-menu/nile-menu.css.js +22 -0
- package/dist/src/nile-menu/nile-menu.css.js.map +1 -1
- package/dist/src/nile-menu/nile-menu.d.ts +1 -0
- package/dist/src/nile-menu/nile-menu.js +9 -3
- package/dist/src/nile-menu/nile-menu.js.map +1 -1
- package/dist/src/nile-select/nile-select.d.ts +1 -0
- package/dist/src/nile-select/nile-select.js +14 -0
- package/dist/src/nile-select/nile-select.js.map +1 -1
- package/dist/src/nile-stepper/nile-stepper.js +4 -4
- package/dist/src/nile-stepper/nile-stepper.js.map +1 -1
- package/dist/{svelte-03aa9546.esm.js → svelte-00ac1b62.esm.js} +1 -1
- package/dist/{svelte-4fa7ff17.cjs.js → svelte-eaee6dea.cjs.js} +2 -2
- package/dist/{svelte-4fa7ff17.cjs.js.map → svelte-eaee6dea.cjs.js.map} +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/{twig-78fca8e5.esm.js → twig-25cabcad.esm.js} +1 -1
- package/dist/{twig-585d978b.cjs.js → twig-ef3a2f8e.cjs.js} +2 -2
- package/dist/{twig-585d978b.cjs.js.map → twig-ef3a2f8e.cjs.js.map} +1 -1
- package/dist/{vue-29da39c3.esm.js → vue-711d75a4.esm.js} +1 -1
- package/dist/{vue-0e328a24.cjs.js → vue-d4c63178.cjs.js} +2 -2
- package/dist/{vue-0e328a24.cjs.js.map → vue-d4c63178.cjs.js.map} +1 -1
- package/dist/{vue-html-fa1c51e6.cjs.js → vue-html-13711be2.cjs.js} +2 -2
- package/dist/{vue-html-fa1c51e6.cjs.js.map → vue-html-13711be2.cjs.js.map} +1 -1
- package/dist/{vue-html-c781b090.esm.js → vue-html-b805e078.esm.js} +1 -1
- package/dist/{wikitext-4b6b7007.esm.js → wikitext-724303c6.esm.js} +1 -1
- package/dist/{wikitext-6feef894.cjs.js → wikitext-d4ad7e43.cjs.js} +2 -2
- package/dist/{wikitext-6feef894.cjs.js.map → wikitext-d4ad7e43.cjs.js.map} +1 -1
- package/package.json +1 -2
- package/src/nile-code-editor/nile-code-editor.ts +71 -65
- package/src/nile-menu/nile-menu.css.ts +22 -0
- package/src/nile-menu/nile-menu.ts +14 -3
- package/src/nile-select/nile-select.ts +13 -1
- package/src/nile-stepper/nile-stepper.ts +4 -4
- package/dist/julia-1cad9870.esm.js +0 -1
- package/dist/julia-b0cea839.cjs.js +0 -2
- package/dist/julia-b0cea839.cjs.js.map +0 -1
- package/dist/kotlin-6283300f.esm.js +0 -1
- package/dist/kotlin-a0fd9eaf.cjs.js +0 -2
- package/dist/kotlin-a0fd9eaf.cjs.js.map +0 -1
- package/dist/latex-90a1da91.cjs.js +0 -2
- package/dist/latex-90a1da91.cjs.js.map +0 -1
- package/dist/latex-9439b9a5.esm.js +0 -1
- package/dist/less-cab2de0f.cjs.js +0 -2
- package/dist/less-cab2de0f.cjs.js.map +0 -1
- package/dist/less-fa4eebf7.esm.js +0 -1
- package/dist/shellscript-ada948c5.cjs.js.map +0 -1
@@ -9,7 +9,7 @@ import { html, property, } from 'lit-element';
|
|
9
9
|
import { customElement, query } from 'lit/decorators.js';
|
10
10
|
import { styles } from './nile-code-editor.css';
|
11
11
|
import { EditorView } from 'codemirror';
|
12
|
-
import { EditorState, Compartment } from '@codemirror/state';
|
12
|
+
import { EditorState, Compartment, } from '@codemirror/state';
|
13
13
|
import { lineNumbers } from '@codemirror/view';
|
14
14
|
import { javascript, javascriptLanguage, scopeCompletionSource, } from '@codemirror/lang-javascript';
|
15
15
|
import { sql } from '@codemirror/lang-sql';
|
@@ -61,21 +61,6 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
|
|
61
61
|
this.view.destroy();
|
62
62
|
this.emit('nile-destroy');
|
63
63
|
}
|
64
|
-
convertToSingleLine(code) {
|
65
|
-
if (!code)
|
66
|
-
return '';
|
67
|
-
// Remove line breaks and unnecessary whitespace
|
68
|
-
return code.replace(/\s+/g, ' ').trim();
|
69
|
-
}
|
70
|
-
getLineNumbersExension() {
|
71
|
-
return this.lineNumbers || this.multiline ? lineNumbers() : [];
|
72
|
-
}
|
73
|
-
getReadOnlyExtension() {
|
74
|
-
return EditorState.readOnly.of(this.readonly);
|
75
|
-
}
|
76
|
-
getSingleLineExtension() {
|
77
|
-
return !this.multiline ? EditorState.transactionFilter.of(tr => tr.newDoc.lines > 1 ? [] : tr) : [];
|
78
|
-
}
|
79
64
|
firstUpdated() {
|
80
65
|
const lineNumbersExtension = this.lineNumbersComp.of(this.getLineNumbersExension());
|
81
66
|
const readOnlyExtension = this.readOnlyComp.of(this.getReadOnlyExtension());
|
@@ -85,9 +70,7 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
|
|
85
70
|
});
|
86
71
|
const language = this.language == "sql" ? sql() : javascript();
|
87
72
|
let startState = EditorState.create({
|
88
|
-
doc: !this.multiline
|
89
|
-
? this.convertToSingleLine(this.value)
|
90
|
-
: this.value,
|
73
|
+
doc: !this.multiline ? this.convertToSingleLine(this.value) : this.value,
|
91
74
|
extensions: [
|
92
75
|
basicSetup({
|
93
76
|
lineNumbers: this.lineNumbers || this.multiline,
|
@@ -116,22 +99,11 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
|
|
116
99
|
state: startState,
|
117
100
|
parent: this.codeEditor
|
118
101
|
});
|
119
|
-
this.emit('nile-
|
120
|
-
}
|
121
|
-
singleLineMultiLineToggle() {
|
122
|
-
this.view.dispatch({
|
123
|
-
changes: {
|
124
|
-
from: 0,
|
125
|
-
to: this.view.state.doc.length,
|
126
|
-
insert: !this.multiline
|
127
|
-
? this.convertToSingleLine(this.value)
|
128
|
-
: this.value,
|
129
|
-
},
|
130
|
-
});
|
102
|
+
this.emit('nile-after-init', { codeMirrorInstance: this.view });
|
131
103
|
}
|
132
104
|
updated(changedProperties) {
|
133
105
|
super.updated(changedProperties);
|
134
|
-
if (changedProperties.has('value')) {
|
106
|
+
if (changedProperties.has('value') && this.view.state.doc.toString() != this.value) {
|
135
107
|
// Editor has already been initialized, update its state
|
136
108
|
this.singleLineMultiLineToggle();
|
137
109
|
}
|
@@ -159,12 +131,6 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
|
|
159
131
|
});
|
160
132
|
}
|
161
133
|
}
|
162
|
-
expandCodeEditor() {
|
163
|
-
this.emit('nile-expand', { expand: true });
|
164
|
-
}
|
165
|
-
restrictSingleLine() {
|
166
|
-
return EditorState.transactionFilter.of(tr => tr.newDoc.lines > 1 ? [] : tr);
|
167
|
-
}
|
168
134
|
render() {
|
169
135
|
const hasErrorMessage = !!this.errorMessage;
|
170
136
|
const hasError = !!this.error;
|
@@ -187,7 +153,7 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
|
|
187
153
|
class="code-editor__icon__container"
|
188
154
|
size="16"
|
189
155
|
color="black"
|
190
|
-
@click="${(e) => this.
|
156
|
+
@click="${(e) => this.emitNileExpand()}"
|
191
157
|
></nile-icon>`
|
192
158
|
: ''}
|
193
159
|
</div>
|
@@ -199,42 +165,75 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
|
|
199
165
|
`
|
200
166
|
: ``}`;
|
201
167
|
}
|
168
|
+
singleLineMultiLineToggle() {
|
169
|
+
this.view.dispatch({
|
170
|
+
changes: {
|
171
|
+
from: 0,
|
172
|
+
to: this.view.state.doc.length,
|
173
|
+
insert: !this.multiline
|
174
|
+
? this.convertToSingleLine(this.value)
|
175
|
+
: this.value,
|
176
|
+
},
|
177
|
+
});
|
178
|
+
}
|
179
|
+
convertToSingleLine(code) {
|
180
|
+
if (!code)
|
181
|
+
return '';
|
182
|
+
// Remove line breaks and unnecessary whitespace
|
183
|
+
return code.replace(/\s+/g, ' ').trim();
|
184
|
+
}
|
185
|
+
//EXTENSION CONFIGURATIONS
|
186
|
+
getLineNumbersExension() {
|
187
|
+
return this.lineNumbers || this.multiline ? lineNumbers() : [];
|
188
|
+
}
|
189
|
+
getReadOnlyExtension() {
|
190
|
+
return EditorState.readOnly.of(this.readonly);
|
191
|
+
}
|
192
|
+
getSingleLineExtension() {
|
193
|
+
return !this.multiline ? EditorState.transactionFilter.of(tr => tr.newDoc.lines > 1 ? [] : tr) : [];
|
194
|
+
}
|
195
|
+
restrictSingleLine() {
|
196
|
+
return EditorState.transactionFilter.of(tr => tr.newDoc.lines > 1 ? [] : tr);
|
197
|
+
}
|
198
|
+
emitNileExpand() {
|
199
|
+
this.emit('nile-expand', { expand: true });
|
200
|
+
}
|
202
201
|
};
|
203
202
|
__decorate([
|
204
203
|
query('.code-mirror')
|
205
204
|
], NileCodeEditor.prototype, "codeEditor", void 0);
|
206
205
|
__decorate([
|
207
|
-
property({ type: String, reflect:
|
206
|
+
property({ type: String, reflect: true, attribute: true })
|
208
207
|
], NileCodeEditor.prototype, "value", void 0);
|
209
208
|
__decorate([
|
210
|
-
property({ type: String })
|
209
|
+
property({ type: String, reflect: true, attribute: true })
|
211
210
|
], NileCodeEditor.prototype, "customAutoCompletions", void 0);
|
212
211
|
__decorate([
|
213
|
-
property({ type: String })
|
212
|
+
property({ type: String, reflect: true, attribute: true })
|
214
213
|
], NileCodeEditor.prototype, "language", void 0);
|
215
214
|
__decorate([
|
216
|
-
property({ attribute: 'error-message' })
|
215
|
+
property({ type: String, reflect: true, attribute: 'error-message' })
|
217
216
|
], NileCodeEditor.prototype, "errorMessage", void 0);
|
218
217
|
__decorate([
|
219
|
-
property({ attribute: 'error'
|
218
|
+
property({ type: Boolean, reflect: true, attribute: 'error' })
|
220
219
|
], NileCodeEditor.prototype, "error", void 0);
|
221
220
|
__decorate([
|
222
|
-
property({ attribute: 'noborder'
|
221
|
+
property({ type: Boolean, reflect: true, attribute: 'noborder' })
|
223
222
|
], NileCodeEditor.prototype, "noborder", void 0);
|
224
223
|
__decorate([
|
225
|
-
property({ type: Boolean, reflect: true })
|
224
|
+
property({ type: Boolean, reflect: true, attribute: true })
|
226
225
|
], NileCodeEditor.prototype, "multiline", void 0);
|
227
226
|
__decorate([
|
228
|
-
property({ type: Boolean, reflect: true })
|
227
|
+
property({ type: Boolean, reflect: true, attribute: true })
|
229
228
|
], NileCodeEditor.prototype, "lineNumbers", void 0);
|
230
229
|
__decorate([
|
231
|
-
property({ type: Boolean, reflect: true })
|
230
|
+
property({ type: Boolean, reflect: true, attribute: true })
|
232
231
|
], NileCodeEditor.prototype, "hasScroller", void 0);
|
233
232
|
__decorate([
|
234
|
-
property({ type: Boolean })
|
233
|
+
property({ type: Boolean, reflect: true, attribute: true })
|
235
234
|
], NileCodeEditor.prototype, "expandable", void 0);
|
236
235
|
__decorate([
|
237
|
-
property({ type: Boolean, reflect: true })
|
236
|
+
property({ type: Boolean, reflect: true, attribute: true })
|
238
237
|
], NileCodeEditor.prototype, "readonly", void 0);
|
239
238
|
NileCodeEditor = __decorate([
|
240
239
|
customElement('nile-code-editor')
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"nile-code-editor.js","sourceRoot":"","sources":["../../../src/nile-code-editor/nile-code-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 {\n LitElement,\n html,\n property,\n CSSResultArray,\n TemplateResult,\n PropertyValueMap,\n} from 'lit-element';\nimport { customElement, query } from 'lit/decorators.js';\nimport { styles } from './nile-code-editor.css';\nimport { EditorView } from 'codemirror';\nimport { ViewUpdate } from '@codemirror/view';\nimport { EditorState, Compartment } from '@codemirror/state';\nimport { lineNumbers } from '@codemirror/view';\nimport {\n javascript,\n javascriptLanguage,\n scopeCompletionSource,\n completionPath,\n} from '@codemirror/lang-javascript';\nimport { sql } from '@codemirror/lang-sql';\nimport { autocompletion } from '@codemirror/autocomplete';\nimport { CompletionContext, Completion } from '@codemirror/autocomplete';\nimport NileElement from '../internal/nile-element';\nimport { basicSetup } from './extensionSetup';\nimport { watch } from '../internal/watch';\nimport { PropertyValues } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { Theme } from './theme';\n\n// Choose the appropriate mode for your use case\n\n/**\n * Nile icon component.\n *\n * @tag nile-code-editor\n *\n */\n@customElement('nile-code-editor')\nexport class NileCodeEditor extends NileElement {\n \n @query('.code-mirror') codeEditor: HTMLInputElement;\n\n @property({ type: String, reflect:false }) value = '';\n\n @property({ type: String }) customAutoCompletions: any = {};\n\n @property({ type: String }) language: 'javascript' | 'sql' = 'javascript'\n\n @property({ attribute: 'error-message' }) errorMessage: string = '';\n\n @property({ attribute: 'error', type: Boolean }) error: boolean = false;\n\n @property({ attribute: 'noborder', type: Boolean }) noborder: boolean = false;\n\n @property({ type: Boolean, reflect: true }) multiline: boolean = false;\n\n @property({ type: Boolean, reflect: true }) lineNumbers: boolean = false;\n\n @property({ type: Boolean, reflect: true }) hasScroller: boolean = true;\n\n @property({ type: Boolean }) expandable: boolean = true;\n\n @property({ type: Boolean, reflect: true }) readonly: boolean = false;\n\n /**\n * The styles for CodeEditor\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n */\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.emit('nile-init');\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.view.destroy()\n this.emit('nile-destroy');\n }\n\n public view: EditorView;\n\n convertToSingleLine(code: any) {\n if (!code) return '';\n // Remove line breaks and unnecessary whitespace\n return code.replace(/\\s+/g, ' ').trim();\n }\n\n // Compartments for initialiazing and switching extensions\n private lineNumbersComp = new Compartment();\n private restrictSingleLineComp = new Compartment();\n private readOnlyComp = new Compartment();\n\n getLineNumbersExension() {\n return this.lineNumbers || this.multiline ? lineNumbers() : [];\n }\n\n getReadOnlyExtension() {\n return EditorState.readOnly.of(this.readonly);\n }\n\n getSingleLineExtension() {\n return !this.multiline ? EditorState.transactionFilter.of(tr =>\n tr.newDoc.lines > 1 ? [] : tr\n ) : [];\n }\n\n firstUpdated() {\n const lineNumbersExtension = this.lineNumbersComp.of(this.getLineNumbersExension());\n const readOnlyExtension = this.readOnlyComp.of(this.getReadOnlyExtension());\n const restrictSingleLineExtension = this.restrictSingleLineComp.of(this.getSingleLineExtension())\n const customAutoCompletions = javascriptLanguage.data.of({\n autocomplete: scopeCompletionSource(this.customAutoCompletions),\n });\n const language = this.language == \"sql\" ? sql() : javascript()\n let startState = EditorState.create({\n doc: !this.multiline\n ? this.convertToSingleLine(this.value)\n : this.value,\n extensions: [\n basicSetup({\n lineNumbers: this.lineNumbers || this.multiline,\n highlightActiveLine: false,\n foldGutter: false,\n }),\n lineNumbersExtension,\n readOnlyExtension,\n restrictSingleLineExtension,\n customAutoCompletions,\n autocompletion(),\n language,\n EditorView.theme(Theme),\n EditorView.updateListener.of((v: ViewUpdate) => {\n if (v.docChanged) {\n this.emit('nile-change', { value: this.view.state.doc.toString() })\n }\n }),\n EditorView.domEventHandlers({\n focus: () => this.dispatchEvent(new Event('nile-focus')),\n blur: () => this.dispatchEvent(new Event('nile-blur')),\n }),\n ],\n });\n\n this.view = new EditorView({\n state: startState,\n parent: this.codeEditor\n });\n this.emit('nile-view-initialized',{codeMirrorInstance:this.view})\n }\n\n singleLineMultiLineToggle() {\n this.view.dispatch({\n changes: {\n from: 0,\n to: this.view.state.doc.length,\n insert: !this.multiline\n ? this.convertToSingleLine(this.value)\n : this.value,\n },\n });\n }\n\n protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void{\n super.updated(changedProperties);\n if (changedProperties.has('value')) {\n // Editor has already been initialized, update its state\n this.singleLineMultiLineToggle();\n }\n if (changedProperties.has('multiline')) {\n this.view.dispatch({\n effects: [\n this.lineNumbersComp.reconfigure(this.getLineNumbersExension()),\n this.restrictSingleLineComp.reconfigure(this.getSingleLineExtension())\n ],\n })\n this.singleLineMultiLineToggle();\n }\n if (changedProperties.has('readonly')) {\n this.view.dispatch({ \n effects: [\n this.readOnlyComp.reconfigure(this.getReadOnlyExtension()),\n ]\n })\n }\n if (changedProperties.has('lineNumbers')) {\n this.view.dispatch({ \n effects: [\n this.lineNumbersComp.reconfigure(this.getLineNumbersExension()),\n ]\n })\n }\n }\n\n expandCodeEditor() {\n this.emit('nile-expand', { expand: true });\n }\n\n restrictSingleLine() {\n return EditorState.transactionFilter.of(tr =>\n tr.newDoc.lines > 1 ? [] : tr\n );\n }\n public render(): TemplateResult {\n const hasErrorMessage = !!this.errorMessage;\n const hasError = !!this.error;\n const noborder = !!this.noborder;\n const noScrollbar = !this.hasScroller\n return html`<div\n part=\"code-editor-base\"\n class=${classMap({\n 'code-mirror': true,\n 'noborder': noborder,\n 'error': hasError || hasErrorMessage,\n 'code-mirror__singleline': !this.multiline,\n 'no-scroller': noScrollbar\n })}\n >\n ${this.expandable\n ? html` \n <nile-icon\n name=\"expand-2\"\n class=\"code-editor__icon__container\"\n size=\"16\"\n color=\"black\"\n @click=\"${(e: CustomEvent) => this.expandCodeEditor()}\"\n ></nile-icon>`\n : ''}\n </div>\n ${hasErrorMessage\n ? html`\n <nile-form-error-message\n >${this.errorMessage}</nile-form-error-message\n >\n `\n : ``}`;\n }\n\n /* #endregion */\n}\n\nexport default NileCodeEditor;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-code-editor': NileCodeEditor;\n }\n}\n"]}
|
1
|
+
{"version":3,"file":"nile-code-editor.js","sourceRoot":"","sources":["../../../src/nile-code-editor/nile-code-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 {\n LitElement,\n html,\n property,\n CSSResultArray,\n TemplateResult,\n PropertyValueMap,\n} from 'lit-element';\n\nimport { customElement, query } from 'lit/decorators.js';\nimport { styles } from './nile-code-editor.css';\nimport { EditorView } from 'codemirror';\nimport { ViewUpdate } from '@codemirror/view';\nimport { \n EditorState,\n Compartment,\n} from '@codemirror/state';\n\nimport { lineNumbers } from '@codemirror/view';\nimport {\n javascript,\n javascriptLanguage,\n scopeCompletionSource,\n completionPath,\n} from '@codemirror/lang-javascript';\nimport { sql } from '@codemirror/lang-sql';\nimport { autocompletion } from '@codemirror/autocomplete';\nimport { CompletionContext, Completion } from '@codemirror/autocomplete';\nimport NileElement from '../internal/nile-element';\nimport { basicSetup } from './extensionSetup';\nimport { watch } from '../internal/watch';\nimport { PropertyValues } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { Theme } from './theme';\n\n// Choose the appropriate mode for your use case\n\n/**\n * Nile icon component.\n *\n * @tag nile-code-editor\n *\n */\n@customElement('nile-code-editor')\nexport class NileCodeEditor extends NileElement {\n \n @query('.code-mirror') codeEditor: HTMLInputElement;\n\n @property({ type: String, reflect: true , attribute: true }) value = '';\n\n @property({ type: String, reflect: true , attribute: true }) customAutoCompletions: any = {};\n\n @property({ type: String, reflect: true , attribute: true}) language: 'javascript' | 'sql' = 'javascript'\n\n @property({ type: String, reflect: true , attribute: 'error-message' }) errorMessage: string = '';\n\n @property({ type: Boolean, reflect: true , attribute: 'error' }) error: boolean = false;\n\n @property({ type: Boolean, reflect: true , attribute: 'noborder' }) noborder: boolean = false;\n\n @property({ type: Boolean, reflect: true , attribute: true }) multiline: boolean = false;\n\n @property({ type: Boolean, reflect: true , attribute: true }) lineNumbers: boolean = false;\n\n @property({ type: Boolean, reflect: true , attribute: true }) hasScroller: boolean = true;\n\n @property({ type: Boolean, reflect: true , attribute: true }) expandable: boolean = true;\n\n @property({ type: Boolean, reflect: true , attribute: true}) readonly: boolean = false;\n\n public view: EditorView;\n\n // Compartments for initialiazing and switching extensions\n private lineNumbersComp = new Compartment();\n private restrictSingleLineComp = new Compartment();\n private readOnlyComp = new Compartment();\n\n /**\n * The styles for CodeEditor\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n */\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.emit('nile-init');\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.view.destroy()\n this.emit('nile-destroy');\n }\n\n firstUpdated() {\n const lineNumbersExtension = this.lineNumbersComp.of(this.getLineNumbersExension());\n const readOnlyExtension = this.readOnlyComp.of(this.getReadOnlyExtension());\n const restrictSingleLineExtension = this.restrictSingleLineComp.of(this.getSingleLineExtension())\n const customAutoCompletions = javascriptLanguage.data.of({\n autocomplete: scopeCompletionSource(this.customAutoCompletions),\n });\n const language = this.language == \"sql\" ? sql() : javascript()\n let startState = EditorState.create({\n doc: !this.multiline ? this.convertToSingleLine(this.value) : this.value,\n extensions: [\n basicSetup({\n lineNumbers: this.lineNumbers || this.multiline,\n highlightActiveLine: false,\n foldGutter: false,\n }),\n lineNumbersExtension,\n readOnlyExtension,\n restrictSingleLineExtension,\n customAutoCompletions,\n autocompletion(),\n language,\n EditorView.theme(Theme),\n EditorView.updateListener.of((v: ViewUpdate) => {\n if (v.docChanged) {\n this.emit('nile-change', { value: this.view.state.doc.toString() })\n }\n }),\n EditorView.domEventHandlers({\n focus: () => this.dispatchEvent(new Event('nile-focus')),\n blur: () => this.dispatchEvent(new Event('nile-blur')),\n }),\n ],\n });\n\n this.view = new EditorView({\n state: startState,\n parent: this.codeEditor\n });\n\n this.emit('nile-after-init',{ codeMirrorInstance: this.view } )\n }\n\n protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void{\n super.updated(changedProperties);\n if (changedProperties.has('value') && this.view.state.doc.toString()!=this.value) {\n // Editor has already been initialized, update its state\n this.singleLineMultiLineToggle();\n }\n if (changedProperties.has('multiline')) {\n this.view.dispatch({\n effects: [\n this.lineNumbersComp.reconfigure(this.getLineNumbersExension()),\n this.restrictSingleLineComp.reconfigure(this.getSingleLineExtension())\n ],\n })\n this.singleLineMultiLineToggle();\n }\n if (changedProperties.has('readonly')) {\n this.view.dispatch({ \n effects: [\n this.readOnlyComp.reconfigure(this.getReadOnlyExtension()),\n ]\n })\n }\n if (changedProperties.has('lineNumbers')) {\n this.view.dispatch({ \n effects: [\n this.lineNumbersComp.reconfigure(this.getLineNumbersExension()),\n ]\n })\n }\n }\n\n public render(): TemplateResult {\n const hasErrorMessage = !!this.errorMessage;\n const hasError = !!this.error;\n const noborder = !!this.noborder;\n const noScrollbar = !this.hasScroller\n return html`<div\n part=\"code-editor-base\"\n class=${classMap({\n 'code-mirror': true,\n 'noborder': noborder,\n 'error': hasError || hasErrorMessage,\n 'code-mirror__singleline': !this.multiline,\n 'no-scroller': noScrollbar\n })}\n >\n ${this.expandable\n ? html` \n <nile-icon\n name=\"expand-2\"\n class=\"code-editor__icon__container\"\n size=\"16\"\n color=\"black\"\n @click=\"${(e: CustomEvent) => this.emitNileExpand()}\"\n ></nile-icon>`\n : ''}\n </div>\n ${hasErrorMessage\n ? html`\n <nile-form-error-message\n >${this.errorMessage}</nile-form-error-message\n >\n `\n : ``}`;\n }\n\n singleLineMultiLineToggle() {\n this.view.dispatch({\n changes: {\n from: 0,\n to: this.view.state.doc.length,\n insert: !this.multiline\n ? this.convertToSingleLine(this.value)\n : this.value,\n },\n });\n }\n\n convertToSingleLine(code: any) {\n if (!code) return '';\n // Remove line breaks and unnecessary whitespace\n return code.replace(/\\s+/g, ' ').trim();\n }\n \n //EXTENSION CONFIGURATIONS\n getLineNumbersExension() {\n return this.lineNumbers || this.multiline ? lineNumbers() : [];\n }\n\n getReadOnlyExtension() {\n return EditorState.readOnly.of(this.readonly);\n }\n\n getSingleLineExtension() {\n return !this.multiline ? EditorState.transactionFilter.of(tr =>\n tr.newDoc.lines > 1 ? [] : tr\n ) : [];\n }\n\n restrictSingleLine() {\n return EditorState.transactionFilter.of(tr =>\n tr.newDoc.lines > 1 ? [] : tr\n );\n }\n\n emitNileExpand() {\n this.emit('nile-expand', { expand: true });\n }\n\n /* #endregion */\n}\n\nexport default NileCodeEditor;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-code-editor': NileCodeEditor;\n }\n}\n"]}
|
@@ -42,6 +42,28 @@ export const styles = css `
|
|
42
42
|
::slotted(nile-divider) {
|
43
43
|
--spacing: 0.5rem;
|
44
44
|
}
|
45
|
+
|
46
|
+
.menu__footer {
|
47
|
+
display: flex;
|
48
|
+
border-radius: var(--nile-radius-radius-sm);
|
49
|
+
align-items: stretch;
|
50
|
+
font-size: 1rem;
|
51
|
+
font-weight: var(--nile-font-weight-regular);
|
52
|
+
line-height: 180%;
|
53
|
+
letter-spacing: normal;
|
54
|
+
color: var(--nile-colors-primary-600);
|
55
|
+
min-height: 40px;
|
56
|
+
transition: 150ms fill;
|
57
|
+
user-select: none;
|
58
|
+
white-space: nowrap;
|
59
|
+
cursor: pointer;
|
60
|
+
padding: 0 var(--nile-spacing-spacing-xl);
|
61
|
+
margin: auto 0;
|
62
|
+
}
|
63
|
+
|
64
|
+
.menu__footer:hover {
|
65
|
+
background-color:var(--nile-menu-item-background-color);
|
66
|
+
}
|
45
67
|
`;
|
46
68
|
export default [styles];
|
47
69
|
//# sourceMappingURL=nile-menu.css.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"nile-menu.css.js","sourceRoot":"","sources":["../../../src/nile-menu/nile-menu.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-menu.css.js","sourceRoot":"","sources":["../../../src/nile-menu/nile-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDxB,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 * Menu CSS\n */\nexport const styles = css`\n :host {\n display: block;\n position: relative;\n background: hsl(0, 0%, 100%);\n border: solid 1px hsl(240 5.9% 90%);\n border-radius: 6px;\n overflow: hidden;\n height: 100%;\n box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n 0px 8px 8px -4px rgba(16, 24, 40, 0.03);\n /* overscroll-behavior: none; */\n /* -ms-overflow-style: none; */\n /* scrollbar-width: none; */\n }\n\n .search__wrapper {\n box-sizing: border-box;\n padding: 12px 6px;\n position: sticky;\n z-index: 999;\n top: 0px;\n background: hsl(0, 0%, 100%);\n height: 64px;\n }\n\n .menu__items-wrapper {\n overflow: auto;\n max-height: calc(100vh - 64px);\n }\n\n ::slotted(nile-divider) {\n --spacing: 0.5rem;\n }\n\n .menu__footer {\n display: flex;\n border-radius: var(--nile-radius-radius-sm);\n align-items: stretch;\n font-size: 1rem;\n font-weight: var(--nile-font-weight-regular);\n line-height: 180%;\n letter-spacing: normal;\n color: var(--nile-colors-primary-600);\n min-height: 40px;\n transition: 150ms fill;\n user-select: none;\n white-space: nowrap;\n cursor: pointer;\n padding: 0 var(--nile-spacing-spacing-xl);\n margin: auto 0;\n }\n\n .menu__footer:hover {\n background-color:var(--nile-menu-item-background-color);\n }\n`;\n\nexport default [styles];\n"]}
|
@@ -4,6 +4,7 @@ import { customElement, property, state } from 'lit/decorators.js';
|
|
4
4
|
import { query } from 'lit/decorators.js';
|
5
5
|
import NileElement from '../internal/nile-element';
|
6
6
|
import { styles } from './nile-menu.css';
|
7
|
+
import { HasSlotController } from '../internal/slot';
|
7
8
|
/**
|
8
9
|
* An nile-menu element.
|
9
10
|
* @summary Menus provide a list of options for the user to choose from.
|
@@ -24,6 +25,7 @@ let NileMenu = class NileMenu extends NileElement {
|
|
24
25
|
this.customSearch = false;
|
25
26
|
this.showNoResults = false;
|
26
27
|
this.noResultsMessage = 'No results found';
|
28
|
+
this.hasSlotController = new HasSlotController(this, 'menu__footer', 'menu__header');
|
27
29
|
}
|
28
30
|
connectedCallback() {
|
29
31
|
super.connectedCallback();
|
@@ -157,9 +159,6 @@ let NileMenu = class NileMenu extends NileElement {
|
|
157
159
|
? html `<div class="search__wrapper" part="search__wrapper">
|
158
160
|
<nile-input
|
159
161
|
size="medium"
|
160
|
-
style=${this.searchWidth
|
161
|
-
? `width: ${this.searchWidth}px;`
|
162
|
-
: 'width: 100%;'}
|
163
162
|
.value=${this.searchValue}
|
164
163
|
placeholder="Search..."
|
165
164
|
@nile-input=${this.handleSearchChange}
|
@@ -189,6 +188,13 @@ let NileMenu = class NileMenu extends NileElement {
|
|
189
188
|
@keydown=${this.handleKeyDown}
|
190
189
|
@mousedown=${this.handleMouseDown}
|
191
190
|
></slot>
|
191
|
+
${this.hasSlotController.test('menu__footer')
|
192
|
+
? html ` <slot
|
193
|
+
part="menu__footer"
|
194
|
+
name="menu__footer"
|
195
|
+
class="menu__footer"
|
196
|
+
></slot>`
|
197
|
+
: null}
|
192
198
|
</div>
|
193
199
|
`;
|
194
200
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"nile-menu.js","sourceRoot":"","sources":["../../../src/nile-menu/nile-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\nimport type NileMenuItem from '../nile-menu-item/nile-menu-item';\nimport { styles } from './nile-menu.css';\n\n/**\n * An nile-menu element.\n * @summary Menus provide a list of options for the user to choose from.\n *\n * @slot - The menu's content, including menu items, menu labels, and dividers.\n *\n * @event nile-select - Emitted when a menu item is selected.\n * @fires count-changed - Indicates when the count changes\n * @slot - This element has a slot\n * @csspart button - The button\n */\n\n@customElement('nile-menu')\nexport class NileMenu extends NileElement {\n static styles: CSSResultGroup = styles;\n @state() searchValue: string = '';\n @state() searchWidth: number = 0;\n\n @property({ type: Boolean, reflect: true }) searchEnabled = false;\n @property({ type: Boolean, reflect: true }) customSearch = false;\n\n @property({ type: Boolean }) showNoResults: boolean = false;\n\n @property({ type: String }) noResultsMessage: string = 'No results found';\n\n @query('slot:not([name])') defaultSlot!: HTMLSlotElement;\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'menu');\n }\n\n private handleClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n const item = target.closest('nile-menu-item');\n\n if (item?.hasSubMenu) {\n return;\n }\n\n // if (!item || item.disabled || item.inert) {\n if (!item || item.disabled) {\n return;\n }\n\n if (item.type === 'checkbox') {\n item.checked = !item.checked;\n }\n\n this.emit('nile-select', { value: item.value });\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n // Make a selection when pressing enter\n if (event.key === 'Enter') {\n const item = this.getCurrentItem();\n event.preventDefault();\n\n // Simulate a click to support @click handlers on menu items that also work with the keyboard\n item?.click();\n }\n\n // Prevent scrolling when space is pressed\n if (event.key === ' ') {\n event.preventDefault();\n }\n\n // Move the selection when pressing down or up\n if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n const items = this.getAllItems();\n const activeItem = this.getCurrentItem();\n let index = activeItem ? items.indexOf(activeItem) : 0;\n\n if (items.length > 0) {\n event.preventDefault();\n\n if (event.key === 'ArrowDown') {\n index++;\n } else if (event.key === 'ArrowUp') {\n index--;\n } else if (event.key === 'Home') {\n index = 0;\n } else if (event.key === 'End') {\n index = items.length - 1;\n }\n\n if (index < 0) {\n index = items.length - 1;\n }\n if (index > items.length - 1) {\n index = 0;\n }\n\n this.setCurrentItem(items[index]);\n items[index].focus();\n }\n }\n }\n\n private handleMouseDown(event: MouseEvent) {\n const target = event.target as HTMLElement;\n\n if (this.isMenuItem(target)) {\n this.setCurrentItem(target as NileMenuItem);\n }\n }\n\n private handleSlotChange() {\n const items = this.getAllItems();\n\n // Reset the roving tab index when the slotted items change\n if (items.length > 0) {\n this.setCurrentItem(items[0]);\n }\n }\n\n private isMenuItem(item: HTMLElement) {\n return (\n item.tagName.toLowerCase() === 'nile-menu-item' ||\n ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(\n item.getAttribute('role') ?? ''\n )\n );\n }\n\n /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */\n getAllItems() {\n return [...this.defaultSlot.assignedElements({ flatten: true })].filter(\n (el: HTMLElement) => {\n if (!this.isMenuItem(el)) {\n // if (el.inert || !this.isMenuItem(el)) {\n return false;\n }\n return true;\n }\n ) as NileMenuItem[];\n }\n\n /**\n * @internal Gets the current menu item, which is the menu item that has `tabindex=\"0\"` within the roving tab index.\n * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n */\n getCurrentItem() {\n return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');\n }\n\n /**\n * @internal Sets the current menu item to the specified element. This sets `tabindex=\"0\"` on the target element and\n * `tabindex=\"-1\"` to all other items. This method must be called prior to setting focus on a menu item.\n */\n setCurrentItem(item: NileMenuItem) {\n const items = this.getAllItems();\n\n // Update tab indexes\n items.forEach(i => {\n i.setAttribute('tabindex', i === item ? '0' : '-1');\n });\n }\n\n private handleSearchChange(e: any) {\n let items = this.getAllItems();\n let searchValue = e.target.value;\n if (this.customSearch) {\n this.emit('nile-search-value', { value: searchValue });\n return;\n }\n\n let counter = 0;\n items.map(curr_item => {\n this.searchWidth = Math.max(this.searchWidth, curr_item.offsetWidth);\n if (\n curr_item.innerText.toLowerCase().includes(e.target.value.toLowerCase())\n ) {\n curr_item.style.display = 'block';\n counter++;\n } else {\n curr_item.style.display = 'none';\n }\n });\n this.showNoResults = counter === 0;\n }\n\n render() {\n return html`\n ${this.searchEnabled\n ? html`<div class=\"search__wrapper\" part=\"search__wrapper\">\n <nile-input\n size=\"medium\"\n style=${this.searchWidth\n ? `width: ${this.searchWidth}px;`\n : 'width: 100%;'}\n .value=${this.searchValue}\n placeholder=\"Search...\"\n @nile-input=${this.handleSearchChange}\n part=\"menu__input\"\n clearable\n >\n <nile-icon name=\"search\" slot=\"suffix\"> </nile-icon>\n </nile-input>\n </div>`\n : html``}\n <div part=\"menu__items-wrapper\" class=\"menu__items-wrapper\">\n ${this.showNoResults\n ? html` <nile-menu-item>${this.noResultsMessage}</nile-menu-item> `\n : ''}\n\n <slot\n name=\"menu__header\"\n part=\"menu__header\"\n @click=${(e: Event) => {\n e.stopPropagation();\n }}\n ></slot>\n <slot\n class=\"menu__item-wrapper\"\n @slotchange=${this.handleSlotChange}\n @click=${this.handleClick}\n @keydown=${this.handleKeyDown}\n @mousedown=${this.handleMouseDown}\n ></slot>\n </div>\n `;\n }\n}\nexport default NileMenu;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-menu': NileMenu;\n }\n}\n"]}
|
1
|
+
{"version":3,"file":"nile-menu.js","sourceRoot":"","sources":["../../../src/nile-menu/nile-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\nimport type NileMenuItem from '../nile-menu-item/nile-menu-item';\nimport { styles } from './nile-menu.css';\nimport { HasSlotController } from '../internal/slot';\n\n/**\n * An nile-menu element.\n * @summary Menus provide a list of options for the user to choose from.\n *\n * @slot - The menu's content, including menu items, menu labels, and dividers.\n *\n * @event nile-select - Emitted when a menu item is selected.\n * @fires count-changed - Indicates when the count changes\n * @slot - This element has a slot\n * @csspart button - The button\n */\n\n@customElement('nile-menu')\nexport class NileMenu extends NileElement {\n static styles: CSSResultGroup = styles;\n @state() searchValue: string = '';\n @state() searchWidth: number = 0;\n\n @property({ type: Boolean, reflect: true }) searchEnabled = false;\n @property({ type: Boolean, reflect: true }) customSearch = false;\n\n @property({ type: Boolean }) showNoResults: boolean = false;\n\n @property({ type: String }) noResultsMessage: string = 'No results found';\n\n @query('slot:not([name])') defaultSlot!: HTMLSlotElement;\n\n private readonly hasSlotController = new HasSlotController(\n this,\n 'menu__footer',\n 'menu__header'\n );\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'menu');\n }\n\n private handleClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n const item = target.closest('nile-menu-item');\n\n if (item?.hasSubMenu) {\n return;\n }\n\n // if (!item || item.disabled || item.inert) {\n if (!item || item.disabled) {\n return;\n }\n\n if (item.type === 'checkbox') {\n item.checked = !item.checked;\n }\n\n this.emit('nile-select', { value: item.value });\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n // Make a selection when pressing enter\n if (event.key === 'Enter') {\n const item = this.getCurrentItem();\n event.preventDefault();\n\n // Simulate a click to support @click handlers on menu items that also work with the keyboard\n item?.click();\n }\n\n // Prevent scrolling when space is pressed\n if (event.key === ' ') {\n event.preventDefault();\n }\n\n // Move the selection when pressing down or up\n if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n const items = this.getAllItems();\n const activeItem = this.getCurrentItem();\n let index = activeItem ? items.indexOf(activeItem) : 0;\n\n if (items.length > 0) {\n event.preventDefault();\n\n if (event.key === 'ArrowDown') {\n index++;\n } else if (event.key === 'ArrowUp') {\n index--;\n } else if (event.key === 'Home') {\n index = 0;\n } else if (event.key === 'End') {\n index = items.length - 1;\n }\n\n if (index < 0) {\n index = items.length - 1;\n }\n if (index > items.length - 1) {\n index = 0;\n }\n\n this.setCurrentItem(items[index]);\n items[index].focus();\n }\n }\n }\n\n private handleMouseDown(event: MouseEvent) {\n const target = event.target as HTMLElement;\n\n if (this.isMenuItem(target)) {\n this.setCurrentItem(target as NileMenuItem);\n }\n }\n\n private handleSlotChange() {\n const items = this.getAllItems();\n\n // Reset the roving tab index when the slotted items change\n if (items.length > 0) {\n this.setCurrentItem(items[0]);\n }\n }\n\n private isMenuItem(item: HTMLElement) {\n return (\n item.tagName.toLowerCase() === 'nile-menu-item' ||\n ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(\n item.getAttribute('role') ?? ''\n )\n );\n }\n\n /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */\n getAllItems() {\n return [...this.defaultSlot.assignedElements({ flatten: true })].filter(\n (el: HTMLElement) => {\n if (!this.isMenuItem(el)) {\n // if (el.inert || !this.isMenuItem(el)) {\n return false;\n }\n return true;\n }\n ) as NileMenuItem[];\n }\n\n /**\n * @internal Gets the current menu item, which is the menu item that has `tabindex=\"0\"` within the roving tab index.\n * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n */\n getCurrentItem() {\n return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');\n }\n\n /**\n * @internal Sets the current menu item to the specified element. This sets `tabindex=\"0\"` on the target element and\n * `tabindex=\"-1\"` to all other items. This method must be called prior to setting focus on a menu item.\n */\n setCurrentItem(item: NileMenuItem) {\n const items = this.getAllItems();\n\n // Update tab indexes\n items.forEach(i => {\n i.setAttribute('tabindex', i === item ? '0' : '-1');\n });\n }\n\n private handleSearchChange(e: any) {\n let items = this.getAllItems();\n let searchValue = e.target.value;\n if (this.customSearch) {\n this.emit('nile-search-value', { value: searchValue });\n return;\n }\n\n let counter = 0;\n items.map(curr_item => {\n this.searchWidth = Math.max(this.searchWidth, curr_item.offsetWidth);\n if (\n curr_item.innerText.toLowerCase().includes(e.target.value.toLowerCase())\n ) {\n curr_item.style.display = 'block';\n counter++;\n } else {\n curr_item.style.display = 'none';\n }\n });\n this.showNoResults = counter === 0;\n }\n\n render() {\n return html`\n ${this.searchEnabled\n ? html`<div class=\"search__wrapper\" part=\"search__wrapper\">\n <nile-input\n size=\"medium\"\n .value=${this.searchValue}\n placeholder=\"Search...\"\n @nile-input=${this.handleSearchChange}\n part=\"menu__input\"\n clearable\n >\n <nile-icon name=\"search\" slot=\"suffix\"> </nile-icon>\n </nile-input>\n </div>`\n : html``}\n <div part=\"menu__items-wrapper\" class=\"menu__items-wrapper\">\n ${this.showNoResults\n ? html` <nile-menu-item>${this.noResultsMessage}</nile-menu-item> `\n : ''}\n\n <slot\n name=\"menu__header\"\n part=\"menu__header\"\n @click=${(e: Event) => {\n e.stopPropagation();\n }}\n ></slot>\n <slot\n class=\"menu__item-wrapper\"\n @slotchange=${this.handleSlotChange}\n @click=${this.handleClick}\n @keydown=${this.handleKeyDown}\n @mousedown=${this.handleMouseDown}\n ></slot>\n ${this.hasSlotController.test('menu__footer')\n ? html` <slot\n part=\"menu__footer\"\n name=\"menu__footer\"\n class=\"menu__footer\"\n ></slot>`\n : null}\n </div>\n `;\n }\n}\nexport default NileMenu;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-menu': NileMenu;\n }\n}\n"]}
|
@@ -152,6 +152,7 @@ export declare class NileSelect extends NileElement implements NileFormControl {
|
|
152
152
|
oldMaxOptionsVisible: number;
|
153
153
|
showNoResults: boolean;
|
154
154
|
noResultsMessage: string;
|
155
|
+
hiddenItems: any;
|
155
156
|
/** Gets the validity state object */
|
156
157
|
get validity(): ValidityState;
|
157
158
|
/** Gets the validation message */
|
@@ -159,6 +159,7 @@ let NileSelect = class NileSelect extends NileElement {
|
|
159
159
|
this.oldMaxOptionsVisible = 1;
|
160
160
|
this.showNoResults = false;
|
161
161
|
this.noResultsMessage = 'No results found';
|
162
|
+
this.hiddenItems = [];
|
162
163
|
}
|
163
164
|
/** Gets the validity state object */
|
164
165
|
get validity() {
|
@@ -230,8 +231,10 @@ let NileSelect = class NileSelect extends NileElement {
|
|
230
231
|
this.showSelected = !this.showSelected;
|
231
232
|
// Hide unselected options if showSelected is true
|
232
233
|
const allOptions = this.getAllOptions();
|
234
|
+
this.hiddenItems = [];
|
233
235
|
allOptions.forEach(el => {
|
234
236
|
if (!el.selected) {
|
237
|
+
this.hiddenItems.push(el.value);
|
235
238
|
el.hidden = this.showSelected;
|
236
239
|
}
|
237
240
|
});
|
@@ -411,6 +414,9 @@ let NileSelect = class NileSelect extends NileElement {
|
|
411
414
|
handleOptionClick(event) {
|
412
415
|
const target = event.target;
|
413
416
|
const option = target.closest('nile-option');
|
417
|
+
if (this.hiddenItems.includes(option?.value)) {
|
418
|
+
return;
|
419
|
+
}
|
414
420
|
if (this.blockValueChange && option) {
|
415
421
|
this.emit('nile-block-change', { value: option?.value, name: this.name });
|
416
422
|
this.hide();
|
@@ -590,10 +596,14 @@ let NileSelect = class NileSelect extends NileElement {
|
|
590
596
|
if (this.selectedOptions.length === 0) {
|
591
597
|
this.showSelected = false;
|
592
598
|
const allOptions = this.getAllOptions();
|
599
|
+
this.hiddenItems = [];
|
593
600
|
allOptions.forEach(el => {
|
594
601
|
if (!el.selected) {
|
595
602
|
el.hidden = this.showSelected;
|
596
603
|
}
|
604
|
+
else {
|
605
|
+
this.hiddenItems.push(el.value);
|
606
|
+
}
|
597
607
|
});
|
598
608
|
this.requestUpdate();
|
599
609
|
}
|
@@ -692,6 +702,7 @@ let NileSelect = class NileSelect extends NileElement {
|
|
692
702
|
else {
|
693
703
|
// Hide
|
694
704
|
this.emit('nile-hide', { value: this.value, name: this.name });
|
705
|
+
this.showSelected = false;
|
695
706
|
this.searchValue = '';
|
696
707
|
this.filterOptions(this.searchValue);
|
697
708
|
this.removeOpenListeners();
|
@@ -1250,6 +1261,9 @@ __decorate([
|
|
1250
1261
|
__decorate([
|
1251
1262
|
property({ type: String })
|
1252
1263
|
], NileSelect.prototype, "noResultsMessage", void 0);
|
1264
|
+
__decorate([
|
1265
|
+
state()
|
1266
|
+
], NileSelect.prototype, "hiddenItems", void 0);
|
1253
1267
|
__decorate([
|
1254
1268
|
watch('disabled', { waitUntilFirstUpdate: true })
|
1255
1269
|
], NileSelect.prototype, "handleDisabledChange", null);
|