@aquera/nile-elements 0.1.67-beta-2.8 → 0.1.68
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 +12 -0
- package/demo/index.html +0 -18
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.js +69 -11
- 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 +2 -2
- package/dist/nile-code-editor/theme.cjs.js +1 -1
- package/dist/nile-code-editor/theme.cjs.js.map +1 -1
- package/dist/nile-code-editor/theme.esm.js +1 -1
- package/dist/nile-option/nile-option.cjs.js +1 -1
- package/dist/nile-option/nile-option.cjs.js.map +1 -1
- package/dist/nile-option/nile-option.esm.js +2 -2
- package/dist/nile-option-group/index.cjs.js +2 -0
- package/dist/nile-option-group/index.cjs.js.map +1 -0
- package/dist/nile-option-group/index.esm.js +1 -0
- package/dist/nile-option-group/nile-option-group.cjs.js +2 -0
- package/dist/nile-option-group/nile-option-group.cjs.js.map +1 -0
- package/dist/nile-option-group/nile-option-group.css.cjs.js +2 -0
- package/dist/nile-option-group/nile-option-group.css.cjs.js.map +1 -0
- package/dist/nile-option-group/nile-option-group.css.esm.js +46 -0
- package/dist/nile-option-group/nile-option-group.esm.js +14 -0
- package/dist/nile-option-group/nile-option-group.interface.cjs.js +2 -0
- package/dist/nile-option-group/nile-option-group.interface.cjs.js.map +1 -0
- package/dist/nile-option-group/nile-option-group.interface.esm.js +1 -0
- 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 +9 -9
- package/dist/nile-select/nile-select.interface.cjs.js +2 -0
- package/dist/nile-select/nile-select.interface.cjs.js.map +1 -0
- package/dist/nile-select/nile-select.interface.esm.js +1 -0
- package/dist/src/index.d.ts +1 -0
- package/dist/src/index.js +1 -0
- package/dist/src/index.js.map +1 -1
- package/dist/src/nile-code-editor/nile-code-editor.d.ts +1 -0
- package/dist/src/nile-code-editor/nile-code-editor.js +13 -5
- package/dist/src/nile-code-editor/nile-code-editor.js.map +1 -1
- package/dist/src/nile-code-editor/theme.d.ts +9 -0
- package/dist/src/nile-code-editor/theme.js +9 -0
- package/dist/src/nile-code-editor/theme.js.map +1 -1
- package/dist/src/nile-option/nile-option.d.ts +1 -0
- package/dist/src/nile-option/nile-option.js +5 -0
- package/dist/src/nile-option/nile-option.js.map +1 -1
- package/dist/src/nile-option-group/index.d.ts +1 -0
- package/dist/src/nile-option-group/index.js +2 -0
- package/dist/src/nile-option-group/index.js.map +1 -0
- package/dist/src/{nile-table-row-content/nile-table-row-content.css.d.ts → nile-option-group/nile-option-group.css.d.ts} +2 -2
- package/dist/src/nile-option-group/nile-option-group.css.js +58 -0
- package/dist/src/nile-option-group/nile-option-group.css.js.map +1 -0
- package/dist/src/nile-option-group/nile-option-group.d.ts +23 -0
- package/dist/src/nile-option-group/nile-option-group.interface.d.ts +22 -0
- package/dist/src/nile-option-group/nile-option-group.interface.js +2 -0
- package/dist/src/nile-option-group/nile-option-group.interface.js.map +1 -0
- package/dist/src/nile-option-group/nile-option-group.js +76 -0
- package/dist/src/nile-option-group/nile-option-group.js.map +1 -0
- package/dist/src/nile-select/nile-select.d.ts +6 -0
- package/dist/src/nile-select/nile-select.interface.d.ts +5 -0
- package/dist/src/nile-select/nile-select.interface.js +2 -0
- package/dist/src/nile-select/nile-select.interface.js.map +1 -0
- package/dist/src/nile-select/nile-select.js +59 -1
- package/dist/src/nile-select/nile-select.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +4 -3
- package/src/index.ts +2 -1
- package/src/nile-code-editor/nile-code-editor.ts +13 -9
- package/src/nile-code-editor/theme.ts +11 -1
- package/src/nile-option/nile-option.ts +3 -0
- package/src/nile-option-group/index.ts +1 -0
- package/src/nile-option-group/nile-option-group.css.ts +60 -0
- package/src/nile-option-group/nile-option-group.interface.ts +25 -0
- package/src/nile-option-group/nile-option-group.ts +84 -0
- package/src/nile-select/nile-select.interface.ts +5 -0
- package/src/nile-select/nile-select.ts +74 -2
- package/vscode-html-custom-data.json +32 -3
- package/dist/src/nile-table-row-content/index.d.ts +0 -1
- package/dist/src/nile-table-row-content/index.js +0 -2
- package/dist/src/nile-table-row-content/index.js.map +0 -1
- package/dist/src/nile-table-row-content/nile-table-row-content.css.js +0 -30
- package/dist/src/nile-table-row-content/nile-table-row-content.css.js.map +0 -1
- package/dist/src/nile-table-row-content/nile-table-row-content.d.ts +0 -32
- package/dist/src/nile-table-row-content/nile-table-row-content.js +0 -46
- package/dist/src/nile-table-row-content/nile-table-row-content.js.map +0 -1
package/package.json
CHANGED
@@ -3,7 +3,7 @@
|
|
3
3
|
"description": "Webcomponent nile-elements following open-wc recommendations",
|
4
4
|
"license": "MIT",
|
5
5
|
"author": "nile-elements",
|
6
|
-
"version": "0.1.
|
6
|
+
"version": "0.1.68",
|
7
7
|
"main": "dist/src/index.js",
|
8
8
|
"type": "module",
|
9
9
|
"module": "dist/src/index.js",
|
@@ -87,7 +87,8 @@
|
|
87
87
|
"./nile-tour": "./dist/src/nile-tour/index.js",
|
88
88
|
"./nile-table": "./dist/src/nile-table/index.js",
|
89
89
|
"./nile-pagination": "./dist/src/nile-pagination/index.js",
|
90
|
-
"./nile-slider": "./dist/src/nile-slider/index.js"
|
90
|
+
"./nile-slider": "./dist/src/nile-slider/index.js",
|
91
|
+
"./nile-option-group": "./dist/src/nile-option-group/index.js"
|
91
92
|
},
|
92
93
|
"scripts": {
|
93
94
|
"analyze": "cem analyze --litelement",
|
@@ -191,4 +192,4 @@
|
|
191
192
|
"prettier --write"
|
192
193
|
]
|
193
194
|
}
|
194
|
-
}
|
195
|
+
}
|
package/src/index.ts
CHANGED
@@ -81,4 +81,5 @@ export { NileFilterChip } from './nile-filter-chip';
|
|
81
81
|
export {NilePagination } from './nile-pagination';
|
82
82
|
export { NileSlider } from './nile-slider';
|
83
83
|
export { NileFileUpload } from './nile-file-upload';
|
84
|
-
export { NileFilePreview } from './nile-file-preview'
|
84
|
+
export { NileFilePreview } from './nile-file-preview';
|
85
|
+
export { NileOptionGroup } from './nile-option-group';
|
@@ -35,13 +35,12 @@ import {
|
|
35
35
|
import { sql } from '@codemirror/lang-sql';
|
36
36
|
import { json } from '@codemirror/lang-json';
|
37
37
|
import { html as htmlLang } from '@codemirror/lang-html';
|
38
|
-
import { autocompletion,closeCompletion,CompletionContext,CompletionResult, completionStatus } from '@codemirror/autocomplete';
|
38
|
+
import { autocompletion,acceptCompletion, closeCompletion,CompletionContext,CompletionResult, completionStatus } from '@codemirror/autocomplete';
|
39
39
|
import NileElement from '../internal/nile-element';
|
40
40
|
import { basicSetup } from './extensionSetup';
|
41
41
|
import { classMap } from 'lit/directives/class-map.js';
|
42
|
-
import { Theme as DefaultTheme, customisedThemeCss } from './theme';
|
42
|
+
import { Theme as DefaultTheme, customisedThemeCss, fontFamily } from './theme';
|
43
43
|
import { keymap } from '@codemirror/view';
|
44
|
-
import { acceptCompletion } from '@codemirror/autocomplete';
|
45
44
|
|
46
45
|
// Choose the appropriate mode for your use case
|
47
46
|
|
@@ -104,6 +103,8 @@ export class NileCodeEditor extends NileElement {
|
|
104
103
|
|
105
104
|
@property({ type: Boolean, reflect: true, attribute: true }) tabCompletion: boolean = true;
|
106
105
|
|
106
|
+
@property({ type: Boolean, reflect: true, attribute: true }) defaultFont: boolean = false;
|
107
|
+
|
107
108
|
public view: EditorView;
|
108
109
|
public viewState:EditorState;
|
109
110
|
private timeOut: any = null;
|
@@ -118,7 +119,6 @@ export class NileCodeEditor extends NileElement {
|
|
118
119
|
private themeComp = new Compartment();
|
119
120
|
private autoCompletionComp = new Compartment();
|
120
121
|
|
121
|
-
|
122
122
|
private isSpacePressed:boolean = false;
|
123
123
|
/**
|
124
124
|
* The styles for CodeEditor
|
@@ -159,7 +159,6 @@ export class NileCodeEditor extends NileElement {
|
|
159
159
|
: [];
|
160
160
|
}
|
161
161
|
|
162
|
-
|
163
162
|
protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void{
|
164
163
|
super.updated(changedProperties);
|
165
164
|
if (changedProperties.has('value') && this.view.state.doc.toString()!=this.value) {
|
@@ -183,7 +182,6 @@ export class NileCodeEditor extends NileElement {
|
|
183
182
|
})
|
184
183
|
}
|
185
184
|
if (changedProperties.has('aboveCursor')) {
|
186
|
-
console.log('aboveCursor changed:', this.aboveCursor);
|
187
185
|
this.view.dispatch({
|
188
186
|
effects: [
|
189
187
|
this.autoCompletionComp.reconfigure(
|
@@ -325,7 +323,7 @@ export class NileCodeEditor extends NileElement {
|
|
325
323
|
defaultSyntaxHighlightingExtension,
|
326
324
|
this.autoCompletionComp.of(
|
327
325
|
autocompletion({ aboveCursor: this.aboveCursor })
|
328
|
-
),
|
326
|
+
),
|
329
327
|
language,
|
330
328
|
customThemeExtension,
|
331
329
|
this.getTabCompletionKeymap(),
|
@@ -548,10 +546,16 @@ export class NileCodeEditor extends NileElement {
|
|
548
546
|
}
|
549
547
|
|
550
548
|
getCustomThemeExtension(): Extension {
|
551
|
-
if
|
549
|
+
if(this.customThemeCSS) {
|
550
|
+
if(this.defaultFont){
|
551
|
+
return [EditorView.theme(this.customThemeCSS as { [selector: string]: StyleSpec }), EditorView.theme(customisedThemeCss),EditorView.theme(fontFamily)];
|
552
|
+
}
|
552
553
|
return [EditorView.theme(this.customThemeCSS as { [selector: string]: StyleSpec }), EditorView.theme(customisedThemeCss)];
|
553
554
|
}
|
554
|
-
|
555
|
+
if(this.defaultFont){
|
556
|
+
return [EditorView.theme(customisedThemeCss), EditorView.theme(fontFamily)];
|
557
|
+
}
|
558
|
+
return [EditorView.theme(customisedThemeCss)];
|
555
559
|
}
|
556
560
|
|
557
561
|
restrictSingleLine() {
|
@@ -38,6 +38,16 @@ export const CustomTheme = {
|
|
38
38
|
},
|
39
39
|
};
|
40
40
|
|
41
|
+
export const fontFamily = {
|
42
|
+
'.cm-tooltip.cm-tooltip-autocomplete > ul' : {
|
43
|
+
fontFamily: 'monospace !important',
|
44
|
+
fontWeight: '400',
|
45
|
+
},
|
46
|
+
'.cm-content' : {
|
47
|
+
fontFamily: 'monospace !important',
|
48
|
+
}
|
49
|
+
}
|
50
|
+
|
41
51
|
export const customisedThemeCss = {
|
42
52
|
'.cm-content' : {
|
43
53
|
fontFamily: 'inherit',
|
@@ -153,4 +163,4 @@ export const customisedThemeCss = {
|
|
153
163
|
'.cm-completionLabel': {
|
154
164
|
marginLeft: '18px',
|
155
165
|
}
|
156
|
-
};
|
166
|
+
};
|
@@ -68,6 +68,9 @@ export class NileOption extends NileElement {
|
|
68
68
|
/** Indicates whether the option is selected. */
|
69
69
|
@property({ type: Boolean, reflect: true }) selected = false;
|
70
70
|
|
71
|
+
/* used to pass group name to the option, so that grouped options can be shown */
|
72
|
+
@property({ type: String, reflect: true }) groupName: string = '';
|
73
|
+
|
71
74
|
connectedCallback() {
|
72
75
|
super.connectedCallback();
|
73
76
|
this.setAttribute('role', 'option');
|
@@ -0,0 +1 @@
|
|
1
|
+
export { NileOptionGroup } from './nile-option-group';
|
@@ -0,0 +1,60 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright Aquera Inc 2025
|
3
|
+
*
|
4
|
+
* This source code is licensed under the BSD-3-Clause license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
|
8
|
+
import { css } from 'lit';
|
9
|
+
|
10
|
+
/**
|
11
|
+
* OptionHeader CSS
|
12
|
+
*/
|
13
|
+
export const styles = css`
|
14
|
+
.option-group-header {
|
15
|
+
height: 40px;
|
16
|
+
display: flex;
|
17
|
+
align-items: center;
|
18
|
+
padding: 0px 12px;
|
19
|
+
background-color: var(--nile-colors-dark-200);
|
20
|
+
color: var(--nile-colors-dark-900);
|
21
|
+
font-feature-settings: 'liga' off, 'clig' off;
|
22
|
+
font-family: 'colfax-medium';
|
23
|
+
font-size: 12px;
|
24
|
+
font-weight: 500;
|
25
|
+
width: 100%;
|
26
|
+
box-sizing: border-box;
|
27
|
+
justify-content: space-between;
|
28
|
+
}
|
29
|
+
|
30
|
+
.content-container {
|
31
|
+
display: flex;
|
32
|
+
justify-content: flex-start;
|
33
|
+
align-items: center;
|
34
|
+
}
|
35
|
+
|
36
|
+
.gap-18px {
|
37
|
+
gap: 14px;
|
38
|
+
}
|
39
|
+
|
40
|
+
.option-group-prefix,
|
41
|
+
.option-group-suffix {
|
42
|
+
flex: 0 0 auto;
|
43
|
+
display: flex;
|
44
|
+
align-items: center;
|
45
|
+
}
|
46
|
+
|
47
|
+
.option-group-prefix::slotted(*) {
|
48
|
+
margin-inline-end: 0.5rem;
|
49
|
+
}
|
50
|
+
|
51
|
+
.option-group-suffix::slotted(*) {
|
52
|
+
margin-inline-start: 0.5rem;
|
53
|
+
}
|
54
|
+
|
55
|
+
:host(.nile-group-hidden)::part(option-group-header) {
|
56
|
+
display: none !important;
|
57
|
+
}
|
58
|
+
`;
|
59
|
+
|
60
|
+
export default [styles];
|
@@ -0,0 +1,25 @@
|
|
1
|
+
export interface IconData {
|
2
|
+
name: string;
|
3
|
+
size?: string;
|
4
|
+
color?: string;
|
5
|
+
method?: string;
|
6
|
+
}
|
7
|
+
|
8
|
+
export interface ImageData {
|
9
|
+
src?: string;
|
10
|
+
height?: string;
|
11
|
+
width?: string;
|
12
|
+
}
|
13
|
+
|
14
|
+
export interface PrefixSuffixData {
|
15
|
+
icon?: IconData;
|
16
|
+
prefixText?: string;
|
17
|
+
suffixText?: string;
|
18
|
+
image?: ImageData;
|
19
|
+
}
|
20
|
+
|
21
|
+
export interface OptionGroupData {
|
22
|
+
prefix?: PrefixSuffixData;
|
23
|
+
suffix?: PrefixSuffixData;
|
24
|
+
textContent?: string;
|
25
|
+
}
|
@@ -0,0 +1,84 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright Aquera Inc 2025
|
3
|
+
*
|
4
|
+
* This source code is licensed under the BSD-3-Clause license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
|
8
|
+
import {LitElement, html, CSSResultArray, TemplateResult} from 'lit';
|
9
|
+
import { customElement, property} from 'lit/decorators.js';
|
10
|
+
import {styles} from './nile-option-group.css';
|
11
|
+
import NileElement from '../internal/nile-element';
|
12
|
+
import { OptionGroupData } from './nile-option-group.interface';
|
13
|
+
|
14
|
+
@customElement('nile-option-group')
|
15
|
+
export class NileOptionGroup extends NileElement {
|
16
|
+
|
17
|
+
public static get styles(): CSSResultArray {
|
18
|
+
return [styles];
|
19
|
+
}
|
20
|
+
|
21
|
+
@property({type: String, reflect: true, attribute: true}) name: string = "";
|
22
|
+
@property({type: Object, attribute: true}) data: OptionGroupData | null = null;
|
23
|
+
|
24
|
+
private checkForImageOrIcon() {
|
25
|
+
return this.data?.prefix?.icon?.name || this.data?.prefix?.image?.src || this.data?.prefix?.prefixText;
|
26
|
+
}
|
27
|
+
|
28
|
+
private normalizeImageDimension(value?: string | number): string {
|
29
|
+
if (value === undefined || value === null || value === "") {
|
30
|
+
return "20";
|
31
|
+
}
|
32
|
+
|
33
|
+
const dimension = Number(value);
|
34
|
+
if (isNaN(dimension) || dimension <= 0) {
|
35
|
+
return "20";
|
36
|
+
}
|
37
|
+
return dimension > 40 ? "25" : dimension.toString();
|
38
|
+
}
|
39
|
+
|
40
|
+
public render(): TemplateResult {
|
41
|
+
return html`
|
42
|
+
<div part="option-group-header" class="option-group-header">
|
43
|
+
<div part="content-container" class="content-container ${this.checkForImageOrIcon() ? 'gap-18px' : ''}">
|
44
|
+
<!-- prefix content -->
|
45
|
+
${
|
46
|
+
this.data?.prefix?.icon?.name
|
47
|
+
? html`<nile-icon part="prefix-icon" name="${this.data?.prefix?.icon?.name}" size="${this.data?.prefix?.icon?.size || "16"}" color="${this.data?.prefix?.icon?.color || "var(--nile-colors-dark-500)"}" method="${this.data?.prefix?.icon?.method || "fill"}"></nile-icon>`
|
48
|
+
: this.data?.prefix?.prefixText
|
49
|
+
? html`<span part="prefix-text">${this.data?.prefix?.prefixText}</span>`
|
50
|
+
: this.data?.prefix?.image?.src
|
51
|
+
? html`<img part="prefix-image" src="${this.data?.prefix?.image?.src}" width="${this.normalizeImageDimension(this.data?.prefix?.image?.width)}" height="${this.normalizeImageDimension(this.data?.prefix?.image?.height)}">`
|
52
|
+
: html`<slot part="prefix" name="prefix" class="option-group-prefix"></slot>`
|
53
|
+
}
|
54
|
+
|
55
|
+
<!-- main content -->
|
56
|
+
${
|
57
|
+
this.data?.textContent
|
58
|
+
? html`<span part="content-text">${this.data?.textContent}</span>`
|
59
|
+
: html`<slot part="content"></slot>`
|
60
|
+
}
|
61
|
+
</div>
|
62
|
+
|
63
|
+
<!-- suffix content -->
|
64
|
+
${
|
65
|
+
this.data?.suffix?.icon?.name
|
66
|
+
? html`<nile-icon part="suffix-icon" name="${this.data?.suffix?.icon?.name}" size="${this.data?.suffix?.icon?.size || "16"}" color="${this.data?.suffix?.icon?.color || "var(--nile-colors-dark-500)"}" method="${this.data?.suffix?.icon?.method || "fill"}"></nile-icon>`
|
67
|
+
: this.data?.suffix?.suffixText
|
68
|
+
? html`<span part="suffix-text">${this.data?.suffix?.suffixText}</span>`
|
69
|
+
: this.data?.suffix?.image?.src
|
70
|
+
? html`<img part="suffix-image" src="${this.data?.prefix?.image?.src}" width="${this.normalizeImageDimension(this.data?.suffix?.image?.width)}" height="${this.normalizeImageDimension(this.data?.suffix?.image?.height)}">`
|
71
|
+
: html`<slot part="suffix" name="suffix" class="option-group-suffix"></slot>`
|
72
|
+
}
|
73
|
+
</div>
|
74
|
+
`;
|
75
|
+
}
|
76
|
+
}
|
77
|
+
|
78
|
+
export default NileOptionGroup;
|
79
|
+
|
80
|
+
declare global {
|
81
|
+
interface HTMLElementTagNameMap {
|
82
|
+
'nile-option-group': NileOptionGroup;
|
83
|
+
}
|
84
|
+
}
|
@@ -38,6 +38,8 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
|
38
38
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
39
39
|
import '../nile-virtual-select/nile-virtual-select';
|
40
40
|
import { VirtualScrollHelper } from './virtual-scroll-helper';
|
41
|
+
import NileOptionGroup from '../nile-option-group/nile-option-group';
|
42
|
+
import { GroupAttributes } from './nile-select.interface';
|
41
43
|
|
42
44
|
type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
|
43
45
|
|
@@ -258,6 +260,9 @@ export class NileSelect extends NileElement implements NileFormControl{
|
|
258
260
|
|
259
261
|
@property({ type: Boolean }) enableVirtualScroll = false;
|
260
262
|
|
263
|
+
/** To enable the group header in the select */
|
264
|
+
@property({ type: Boolean, reflect: true, attribute: true }) enableGroupHeader = false;
|
265
|
+
|
261
266
|
/** Gets the validity state object */
|
262
267
|
get validity() {
|
263
268
|
return this.valueInput?.validity;
|
@@ -303,6 +308,10 @@ export class NileSelect extends NileElement implements NileFormControl{
|
|
303
308
|
}
|
304
309
|
|
305
310
|
protected firstUpdated(_changedProperties: PropertyValues): void {
|
311
|
+
if(this.enableGroupHeader) {
|
312
|
+
this.handleGroupSearchChange();
|
313
|
+
}
|
314
|
+
|
306
315
|
if(_changedProperties.has('multiple')) {
|
307
316
|
this.setCheckBoxInOption(this.multiple as boolean);
|
308
317
|
}
|
@@ -379,6 +388,9 @@ export class NileSelect extends NileElement implements NileFormControl{
|
|
379
388
|
}
|
380
389
|
});
|
381
390
|
|
391
|
+
if(this.enableGroupHeader) {
|
392
|
+
this.handleGroupShowSelected();
|
393
|
+
}
|
382
394
|
// this.requestUpdate();
|
383
395
|
}
|
384
396
|
|
@@ -392,6 +404,9 @@ export class NileSelect extends NileElement implements NileFormControl{
|
|
392
404
|
el.selected = false;
|
393
405
|
el.hidden = false;
|
394
406
|
});
|
407
|
+
if(this.enableGroupHeader) {
|
408
|
+
this.handleGroupShowSelected();
|
409
|
+
}
|
395
410
|
this.value = '';
|
396
411
|
this.selectionChanged();
|
397
412
|
this.emit('nile-change', { value: this.value, name: this.name });
|
@@ -541,6 +556,9 @@ export class NileSelect extends NileElement implements NileFormControl{
|
|
541
556
|
this.showSelected = false;
|
542
557
|
this.value = '';
|
543
558
|
this.displayInput.focus({ preventScroll: true });
|
559
|
+
if(this.enableGroupHeader) {
|
560
|
+
this.handleGroupShowSelected();
|
561
|
+
}
|
544
562
|
|
545
563
|
// Emit after update
|
546
564
|
this.updateComplete.then(() => {
|
@@ -604,7 +622,9 @@ export class NileSelect extends NileElement implements NileFormControl{
|
|
604
622
|
el.hidden = this.showSelected;
|
605
623
|
}
|
606
624
|
});
|
607
|
-
|
625
|
+
if(this.enableGroupHeader) {
|
626
|
+
this.handleGroupShowSelected();
|
627
|
+
}
|
608
628
|
this.requestUpdate();
|
609
629
|
}
|
610
630
|
}
|
@@ -642,6 +662,9 @@ export class NileSelect extends NileElement implements NileFormControl{
|
|
642
662
|
el.hidden = this.showSelected;
|
643
663
|
}
|
644
664
|
});
|
665
|
+
if(this.enableGroupHeader) {
|
666
|
+
this.handleGroupShowSelected();
|
667
|
+
}
|
645
668
|
|
646
669
|
// Emit after updating
|
647
670
|
this.updateComplete.then(() => {
|
@@ -811,6 +834,9 @@ export class NileSelect extends NileElement implements NileFormControl{
|
|
811
834
|
|
812
835
|
handleSearchChange(e: any) {
|
813
836
|
this.searchValue = e.detail.value;
|
837
|
+
if(this.enableGroupHeader) {
|
838
|
+
this.handleGroupSearchChange();
|
839
|
+
}
|
814
840
|
if (!this.disableLocalSearch) {
|
815
841
|
let filteredOptions = this.filterOptions(this.searchValue);
|
816
842
|
if (filteredOptions.length === 0) {
|
@@ -874,8 +900,14 @@ export class NileSelect extends NileElement implements NileFormControl{
|
|
874
900
|
// Reset the current option
|
875
901
|
this.setCurrentOption(this.selectedOptions[0] || this.getFirstOption());
|
876
902
|
|
877
|
-
// Show
|
878
903
|
this.emit('nile-show', { value: this.value, name: this.name });
|
904
|
+
|
905
|
+
if(this.enableGroupHeader) {
|
906
|
+
this.getAllGroupAttributes().forEach((el: GroupAttributes) => {
|
907
|
+
el.element.classList.remove('nile-group-hidden');
|
908
|
+
});
|
909
|
+
}
|
910
|
+
|
879
911
|
this.addOpenListeners();
|
880
912
|
|
881
913
|
this.showNoResults = !this.getAllOptions()?.length;
|
@@ -921,6 +953,46 @@ export class NileSelect extends NileElement implements NileFormControl{
|
|
921
953
|
}
|
922
954
|
}
|
923
955
|
|
956
|
+
private getAllGroupAttributes() {
|
957
|
+
return Array.from(
|
958
|
+
this.querySelectorAll<NileOptionGroup>('nile-option-group[name]')
|
959
|
+
).map((el: HTMLElement) => ({
|
960
|
+
name: el?.getAttribute('name') || '',
|
961
|
+
data: el?.getAttribute('data'),
|
962
|
+
element: el
|
963
|
+
}));
|
964
|
+
}
|
965
|
+
|
966
|
+
getUniqueGroupNames(arr: NileOption[]) {
|
967
|
+
return Array.from(new Set(arr.map(obj => obj?.groupName)));
|
968
|
+
}
|
969
|
+
|
970
|
+
handleGroupSearchChange() {
|
971
|
+
const filtered = new Set(
|
972
|
+
this.getUniqueGroupNames(this.filterOptions(this.searchValue))
|
973
|
+
);
|
974
|
+
this.getAllGroupAttributes().forEach(({ name, element }) => {
|
975
|
+
element?.classList.toggle('nile-group-hidden', !filtered.has(name));
|
976
|
+
});
|
977
|
+
}
|
978
|
+
|
979
|
+
handleGroupShowSelected() {
|
980
|
+
const visibleGroups = new Set<string>();
|
981
|
+
|
982
|
+
if (this.showSelected) {
|
983
|
+
this.getAllOptions().forEach((option: NileOption) => {
|
984
|
+
if (!option.hidden) visibleGroups.add(option.groupName);
|
985
|
+
});
|
986
|
+
}
|
987
|
+
|
988
|
+
this.getAllGroupAttributes().forEach(({ name, element }) => {
|
989
|
+
element?.classList.toggle(
|
990
|
+
'nile-group-hidden',
|
991
|
+
this.showSelected && !visibleGroups.has(name)
|
992
|
+
);
|
993
|
+
});
|
994
|
+
}
|
995
|
+
|
924
996
|
/** Shows the listbox. */
|
925
997
|
async show() {
|
926
998
|
if (this.open || this.disabled) {
|
@@ -818,7 +818,7 @@
|
|
818
818
|
},
|
819
819
|
{
|
820
820
|
"name": "nile-code-editor",
|
821
|
-
"description": "Nile icon component.\n\nEvents:\n\n * `nile-focus` {`Event`} - \n\n * `nile-blur` {`Event`} - \n\nAttributes:\n\n * `value` {`string`} - \n\n * `expandIcon` {`string`} - \n\n * `placeholder` {`string`} - \n\n * `customAutoCompletions` - \n\n * `customCompletionsPaths` {`string[]`} - \n\n * `language` {`\"html\" | \"javascript\" | \"sql\" | \"json\"`} - \n\n * `error-message` {`string`} - \n\n * `error` {`boolean`} - \n\n * `enableSearch` {`boolean`} - \n\n * `noborder` {`boolean`} - \n\n * `multiline` {`boolean`} - \n\n * `enableFoldGutters` {`boolean`} - \n\n * `allowVariableInCustomSuggestion` {`boolean`} - \n\n * `lineNumbers` {`boolean`} - \n\n * `lineNumbersMultiline` {`boolean`} - \n\n * `hasScroller` {`boolean`} - \n\n * `expandable` {`boolean`} - \n\n * `readonly` {`boolean`} - \n\n * `debounce` {`boolean`} - \n\n * `debounceTimeout` {`number`} - \n\n * `aboveCursor` {`boolean`} - \n\n * `tabCompletion` {`boolean`} - \n\nProperties:\n\n * `codeEditor` {`HTMLInputElement`} - \n\n * `value` {`string`} - \n\n * `expandIcon` {`string`} - \n\n * `placeholder` {`string`} - \n\n * `customAutoCompletions` - \n\n * `customCompletionsPaths` {`string[]`} - \n\n * `language` {`\"html\" | \"javascript\" | \"sql\" | \"json\"`} - \n\n * `errorMessage` {`string`} - \n\n * `error` {`boolean`} - \n\n * `enableSearch` {`boolean`} - \n\n * `noborder` {`boolean`} - \n\n * `multiline` {`boolean`} - \n\n * `enableFoldGutters` {`boolean`} - \n\n * `allowVariableInCustomSuggestion` {`boolean`} - \n\n * `lineNumbers` {`boolean`} - \n\n * `disableSyntaxHighlighting` {`boolean`} - \n\n * `customThemeCSS` {`object | null`} - \n\n * `lineNumbersMultiline` {`boolean`} - \n\n * `hasScroller` {`boolean`} - \n\n * `expandable` {`boolean`} - \n\n * `readonly` {`boolean`} - \n\n * `debounce` {`boolean`} - \n\n * `debounceTimeout` {`number`} - \n\n * `aboveCursor` {`boolean`} - \n\n * `tabCompletion` {`boolean`} - \n\n * `view` - \n\n * `viewState` - \n\n * `timeOut` - \n\n * `lineNumbersComp` - \n\n * `restrictSingleLineComp` - \n\n * `readOnlyComp` - \n\n * `customCompletionComp` - \n\n * `placeholderComp` - \n\n * `defaultSyntaxHighlightingComp` - \n\n * `themeComp` - \n\n * `autoCompletionComp` - \n\n * `isSpacePressed` {`boolean`} - \n\n * `customAutocomplete` - Custom autocomplete handler for code editor suggestions\n\n * `insertBetweenCode` - \n\n * `BUBBLES` {`boolean`} - \n\n * `COMPOSED` {`boolean`} - \n\n * `CANCELABLE` {`boolean`} - ",
|
821
|
+
"description": "Nile icon component.\n\nEvents:\n\n * `nile-focus` {`Event`} - \n\n * `nile-blur` {`Event`} - \n\nAttributes:\n\n * `value` {`string`} - \n\n * `expandIcon` {`string`} - \n\n * `placeholder` {`string`} - \n\n * `customAutoCompletions` - \n\n * `customCompletionsPaths` {`string[]`} - \n\n * `language` {`\"html\" | \"javascript\" | \"sql\" | \"json\"`} - \n\n * `error-message` {`string`} - \n\n * `error` {`boolean`} - \n\n * `enableSearch` {`boolean`} - \n\n * `noborder` {`boolean`} - \n\n * `multiline` {`boolean`} - \n\n * `enableFoldGutters` {`boolean`} - \n\n * `allowVariableInCustomSuggestion` {`boolean`} - \n\n * `lineNumbers` {`boolean`} - \n\n * `lineNumbersMultiline` {`boolean`} - \n\n * `hasScroller` {`boolean`} - \n\n * `expandable` {`boolean`} - \n\n * `readonly` {`boolean`} - \n\n * `debounce` {`boolean`} - \n\n * `debounceTimeout` {`number`} - \n\n * `aboveCursor` {`boolean`} - \n\n * `tabCompletion` {`boolean`} - \n\n * `defaultFont` {`boolean`} - \n\nProperties:\n\n * `codeEditor` {`HTMLInputElement`} - \n\n * `value` {`string`} - \n\n * `expandIcon` {`string`} - \n\n * `placeholder` {`string`} - \n\n * `customAutoCompletions` - \n\n * `customCompletionsPaths` {`string[]`} - \n\n * `language` {`\"html\" | \"javascript\" | \"sql\" | \"json\"`} - \n\n * `errorMessage` {`string`} - \n\n * `error` {`boolean`} - \n\n * `enableSearch` {`boolean`} - \n\n * `noborder` {`boolean`} - \n\n * `multiline` {`boolean`} - \n\n * `enableFoldGutters` {`boolean`} - \n\n * `allowVariableInCustomSuggestion` {`boolean`} - \n\n * `lineNumbers` {`boolean`} - \n\n * `disableSyntaxHighlighting` {`boolean`} - \n\n * `customThemeCSS` {`object | null`} - \n\n * `lineNumbersMultiline` {`boolean`} - \n\n * `hasScroller` {`boolean`} - \n\n * `expandable` {`boolean`} - \n\n * `readonly` {`boolean`} - \n\n * `debounce` {`boolean`} - \n\n * `debounceTimeout` {`number`} - \n\n * `aboveCursor` {`boolean`} - \n\n * `tabCompletion` {`boolean`} - \n\n * `defaultFont` {`boolean`} - \n\n * `view` - \n\n * `viewState` - \n\n * `timeOut` - \n\n * `lineNumbersComp` - \n\n * `restrictSingleLineComp` - \n\n * `readOnlyComp` - \n\n * `customCompletionComp` - \n\n * `placeholderComp` - \n\n * `defaultSyntaxHighlightingComp` - \n\n * `themeComp` - \n\n * `autoCompletionComp` - \n\n * `isSpacePressed` {`boolean`} - \n\n * `customAutocomplete` - Custom autocomplete handler for code editor suggestions\n\n * `insertBetweenCode` - \n\n * `BUBBLES` {`boolean`} - \n\n * `COMPOSED` {`boolean`} - \n\n * `CANCELABLE` {`boolean`} - ",
|
822
822
|
"attributes": [
|
823
823
|
{
|
824
824
|
"name": "value",
|
@@ -936,6 +936,11 @@
|
|
936
936
|
"description": "`tabCompletion` {`boolean`} - \n\nProperty: tabCompletion\n\nDefault: true",
|
937
937
|
"valueSet": "v"
|
938
938
|
},
|
939
|
+
{
|
940
|
+
"name": "defaultFont",
|
941
|
+
"description": "`defaultFont` {`boolean`} - \n\nProperty: defaultFont\n\nDefault: false",
|
942
|
+
"valueSet": "v"
|
943
|
+
},
|
939
944
|
{
|
940
945
|
"name": "onnile-focus",
|
941
946
|
"description": "`nile-focus` {`Event`} - "
|
@@ -2461,9 +2466,24 @@
|
|
2461
2466
|
}
|
2462
2467
|
]
|
2463
2468
|
},
|
2469
|
+
{
|
2470
|
+
"name": "nile-option-group",
|
2471
|
+
"description": "Attributes:\n\n * `name` {`string`} - \n\n * `data` {`OptionGroupData | null`} - \n\nProperties:\n\n * `name` {`string`} - \n\n * `data` {`OptionGroupData | null`} - \n\n * `BUBBLES` {`boolean`} - \n\n * `COMPOSED` {`boolean`} - \n\n * `CANCELABLE` {`boolean`} - ",
|
2472
|
+
"attributes": [
|
2473
|
+
{
|
2474
|
+
"name": "name",
|
2475
|
+
"description": "`name` {`string`} - \n\nProperty: name\n\nDefault: "
|
2476
|
+
},
|
2477
|
+
{
|
2478
|
+
"name": "data",
|
2479
|
+
"description": "`data` {`OptionGroupData | null`} - \n\nProperty: data\n\nDefault: null",
|
2480
|
+
"values": []
|
2481
|
+
}
|
2482
|
+
]
|
2483
|
+
},
|
2464
2484
|
{
|
2465
2485
|
"name": "nile-option",
|
2466
|
-
"description": "Slots:\n\n * ` ` {} - The option's label.\n\n * `prefix` {} - Used to prepend an icon or similar element to the menu item.\n\n * `suffix` {} - Used to append an icon or similar element to the menu item.\n\nAttributes:\n\n * `value` {`string`} - The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.\n\n * `showCheckbox` {`boolean`} - \n\n * `disabled` {`boolean`} - Draws the option in a disabled state, preventing selection.\n\n * `selected` {`boolean`} - Indicates whether the option is selected.\n\nProperties:\n\n * `styles` - \n\n * `cachedTextLabel` {`string`} - \n\n * `defaultSlot` {`HTMLSlotElement`} - \n\n * `current` {`boolean`} - \n\n * `hasHover` {`boolean`} - \n\n * `hidden` {`boolean`} - \n\n * `isMultipleSelect` {`boolean`} - \n\n * `value` {`string`} - The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.\n\n * `showCheckbox` {`boolean`} - \n\n * `disabled` {`boolean`} - Draws the option in a disabled state, preventing selection.\n\n * `selected` {`boolean`} - Indicates whether the option is selected.\n\n * `BUBBLES` {`boolean`} - \n\n * `COMPOSED` {`boolean`} - \n\n * `CANCELABLE` {`boolean`} - ",
|
2486
|
+
"description": "Slots:\n\n * ` ` {} - The option's label.\n\n * `prefix` {} - Used to prepend an icon or similar element to the menu item.\n\n * `suffix` {} - Used to append an icon or similar element to the menu item.\n\nAttributes:\n\n * `value` {`string`} - The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.\n\n * `showCheckbox` {`boolean`} - \n\n * `disabled` {`boolean`} - Draws the option in a disabled state, preventing selection.\n\n * `selected` {`boolean`} - Indicates whether the option is selected.\n\n * `groupName` {`string`} - \n\nProperties:\n\n * `styles` - \n\n * `cachedTextLabel` {`string`} - \n\n * `defaultSlot` {`HTMLSlotElement`} - \n\n * `current` {`boolean`} - \n\n * `hasHover` {`boolean`} - \n\n * `hidden` {`boolean`} - \n\n * `isMultipleSelect` {`boolean`} - \n\n * `value` {`string`} - The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.\n\n * `showCheckbox` {`boolean`} - \n\n * `disabled` {`boolean`} - Draws the option in a disabled state, preventing selection.\n\n * `selected` {`boolean`} - Indicates whether the option is selected.\n\n * `groupName` {`string`} - \n\n * `BUBBLES` {`boolean`} - \n\n * `COMPOSED` {`boolean`} - \n\n * `CANCELABLE` {`boolean`} - ",
|
2467
2487
|
"attributes": [
|
2468
2488
|
{
|
2469
2489
|
"name": "value",
|
@@ -2483,6 +2503,10 @@
|
|
2483
2503
|
"name": "selected",
|
2484
2504
|
"description": "`selected` {`boolean`} - Indicates whether the option is selected.\n\nProperty: selected\n\nDefault: false",
|
2485
2505
|
"valueSet": "v"
|
2506
|
+
},
|
2507
|
+
{
|
2508
|
+
"name": "groupName",
|
2509
|
+
"description": "`groupName` {`string`} - \n\nProperty: groupName\n\nDefault: "
|
2486
2510
|
}
|
2487
2511
|
]
|
2488
2512
|
},
|
@@ -2989,7 +3013,7 @@
|
|
2989
3013
|
},
|
2990
3014
|
{
|
2991
3015
|
"name": "nile-select",
|
2992
|
-
"description": "Events:\n\n * `nile-change` {} - Emitted when the control's value changes.\n\n * `nile-clear` {} - Emitted when the control's value is cleared.\n\n * `nile-input` {} - Emitted when the control receives input.\n\n * `nile-focus` {} - Emitted when the control gains focus.\n\n * `nile-blur` {} - Emitted when the control loses focus.\n\n * `nile-show` {} - Emitted when the select's menu opens.\n\n * `nile-after-show` {} - Emitted after the select's menu opens and all animations are complete.\n\n * `nile-hide` {} - Emitted when the select's menu closes.\n\n * `nile-after-hide` {} - Emitted after the select's menu closes and all animations are complete.\n\n * `nile-invalid` {} - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\nSlots:\n\n * ` ` {} - The listbox options. Must be `<nile-option>` elements. You can use `<nile-divider>` to group items visually.\n\n * `label` {} - The input's label. Alternatively, you can use the `label` attribute.\n\n * `prefix` {} - Used to prepend a presentational icon or similar element to the combobox.\n\n * `clear-icon` {} - An icon to use in lieu of the default clear icon.\n\n * `expand-icon` {} - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n\n * `help-text` {} - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\nAttributes:\n\n * `size` {`\"medium\" | \"small\" | \"large\"`} - The select's size.\n\n * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n * `searchEnabled` {`boolean`} - \n\n * `internal-search-placeholder` {`string`} - \n\n * `blockValueChange` {`boolean`} - \n\n * `disableLocalSearch` {`boolean`} - \n\n * `optionsLoading` {`boolean`} - \n\n * `noWidthSync` {`boolean`} - \n\n * `multiple` {`string | boolean`} - Allows more than one option to be selected.\n\n * `help-text` {`string`} - \n\n * `error-message` {`string`} - \n\n * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n * `max-options-visible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n * `open` {`boolean`} - Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.\n\n * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n * `filled` {`boolean`} - Draws a filled select.\n\n * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n * `showSelected` {`boolean`} - \n\n * `showNoResults` {`boolean`} - \n\n * `noResultsMessage` {`string`} - \n\n * `data` - \n\n * `enableVirtualScroll` {`boolean`} - \n\n * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n * `value` {`string | string[]`} - The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue will be a space-delimited list of values based on the options selected.\n\n * `disabled` {`boolean`} - Disables the select control.\n\n * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n * `required` {`boolean`} - The select's required attribute.\n\nProperties:\n\n * `styles` - \n\n * `formControlController` - \n\n * `virtualScrollHelper` - \n\n * `hasSlotController` - \n\n * `typeToSelectString` {`string`} - \n\n * `typeToSelectTimeout` {`number`} - \n\n * `popup` - \n\n * `combobox` {`HTMLSlotElement`} - \n\n * `displayInput` {`HTMLInputElement`} - \n\n * `valueInput` {`HTMLInputElement`} - \n\n * `listbox` {`HTMLSlotElement`} - \n\n * `hasFocus` {`boolean`} - \n\n * `displayLabel` {`string`} - \n\n * `currentOption` - \n\n * `selectedOptions` {`NileOption[]`} - \n\n * `oldValue` {`string | string[]`} - \n\n * `size` {`\"medium\" | \"small\" | \"large\"`} - The select's size.\n\n * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n * `searchValue` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n * `searchEnabled` {`boolean`} - \n\n * `internalSearchPlaceHolder` {`string`} - \n\n * `blockValueChange` {`boolean`} - \n\n * `disableLocalSearch` {`boolean`} - \n\n * `optionsLoading` {`boolean`} - \n\n * `noWidthSync` {`boolean`} - \n\n * `multiple` {`string | boolean`} - Allows more than one option to be selected.\n\n * `helpText` {`string`} - \n\n * `errorMessage` {`string`} - \n\n * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n * `maxOptionsVisible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n * `open` {`boolean`} - Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.\n\n * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n * `filled` {`boolean`} - Draws a filled select.\n\n * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n * `showSelected` {`boolean`} - \n\n * `oldMaxOptionsVisible` {`number`} - \n\n * `showNoResults` {`boolean`} - \n\n * `noResultsMessage` {`string`} - \n\n * `renderItemConfig` {`RenderItemConfig | undefined`} - Enhanced configuration for rendering items with support for display text, value, and search text\n\n * `data` - \n\n * `enableVirtualScroll` {`boolean`} - \n\n * `options` {`NileOption[]`} - \n\n * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n * `value` {`string | string[]`} - The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue will be a space-delimited list of values based on the options selected.\n\n * `disabled` {`boolean`} - Disables the select control.\n\n * `defaultValue` {`string | string[]`} - The default value of the form control. Primarily used for resetting the form control.\n\n * `defaultChecked` {`boolean | undefined`} - \n\n * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n * `pattern` {`string | undefined`} - \n\n * `min` {`string | number | Date | undefined`} - \n\n * `max` {`string | number | Date | undefined`} - \n\n * `step` {`number | \"any\" | undefined`} - \n\n * `required` {`boolean`} - The select's required attribute.\n\n * `minlength` {`number | undefined`} - \n\n * `maxlength` {`number | undefined`} - \n\n * `validity` {`ValidityState`} - Gets the validity state object\n\n * `validationMessage` {`string`} - Gets the validation message\n\n * `checkValidity` - \n\n * `getForm` - \n\n * `reportValidity` - \n\n * `setCustomValidity` - \n\n * `BUBBLES` {`boolean`} - \n\n * `COMPOSED` {`boolean`} - \n\n * `CANCELABLE` {`boolean`} - ",
|
3016
|
+
"description": "Events:\n\n * `nile-change` {} - Emitted when the control's value changes.\n\n * `nile-clear` {} - Emitted when the control's value is cleared.\n\n * `nile-input` {} - Emitted when the control receives input.\n\n * `nile-focus` {} - Emitted when the control gains focus.\n\n * `nile-blur` {} - Emitted when the control loses focus.\n\n * `nile-show` {} - Emitted when the select's menu opens.\n\n * `nile-after-show` {} - Emitted after the select's menu opens and all animations are complete.\n\n * `nile-hide` {} - Emitted when the select's menu closes.\n\n * `nile-after-hide` {} - Emitted after the select's menu closes and all animations are complete.\n\n * `nile-invalid` {} - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\nSlots:\n\n * ` ` {} - The listbox options. Must be `<nile-option>` elements. You can use `<nile-divider>` to group items visually.\n\n * `label` {} - The input's label. Alternatively, you can use the `label` attribute.\n\n * `prefix` {} - Used to prepend a presentational icon or similar element to the combobox.\n\n * `clear-icon` {} - An icon to use in lieu of the default clear icon.\n\n * `expand-icon` {} - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n\n * `help-text` {} - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\nAttributes:\n\n * `size` {`\"medium\" | \"small\" | \"large\"`} - The select's size.\n\n * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n * `searchEnabled` {`boolean`} - \n\n * `internal-search-placeholder` {`string`} - \n\n * `blockValueChange` {`boolean`} - \n\n * `disableLocalSearch` {`boolean`} - \n\n * `optionsLoading` {`boolean`} - \n\n * `noWidthSync` {`boolean`} - \n\n * `multiple` {`string | boolean`} - Allows more than one option to be selected.\n\n * `help-text` {`string`} - \n\n * `error-message` {`string`} - \n\n * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n * `max-options-visible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n * `open` {`boolean`} - Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.\n\n * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n * `filled` {`boolean`} - Draws a filled select.\n\n * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n * `showSelected` {`boolean`} - \n\n * `showNoResults` {`boolean`} - \n\n * `noResultsMessage` {`string`} - \n\n * `data` - \n\n * `enableVirtualScroll` {`boolean`} - \n\n * `enableGroupHeader` {`boolean`} - To enable the group header in the select\n\n * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n * `value` {`string | string[]`} - The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue will be a space-delimited list of values based on the options selected.\n\n * `disabled` {`boolean`} - Disables the select control.\n\n * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n * `required` {`boolean`} - The select's required attribute.\n\nProperties:\n\n * `styles` - \n\n * `formControlController` - \n\n * `virtualScrollHelper` - \n\n * `hasSlotController` - \n\n * `typeToSelectString` {`string`} - \n\n * `typeToSelectTimeout` {`number`} - \n\n * `popup` - \n\n * `combobox` {`HTMLSlotElement`} - \n\n * `displayInput` {`HTMLInputElement`} - \n\n * `valueInput` {`HTMLInputElement`} - \n\n * `listbox` {`HTMLSlotElement`} - \n\n * `hasFocus` {`boolean`} - \n\n * `displayLabel` {`string`} - \n\n * `currentOption` - \n\n * `selectedOptions` {`NileOption[]`} - \n\n * `oldValue` {`string | string[]`} - \n\n * `size` {`\"medium\" | \"small\" | \"large\"`} - The select's size.\n\n * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n * `searchValue` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n * `searchEnabled` {`boolean`} - \n\n * `internalSearchPlaceHolder` {`string`} - \n\n * `blockValueChange` {`boolean`} - \n\n * `disableLocalSearch` {`boolean`} - \n\n * `optionsLoading` {`boolean`} - \n\n * `noWidthSync` {`boolean`} - \n\n * `multiple` {`string | boolean`} - Allows more than one option to be selected.\n\n * `helpText` {`string`} - \n\n * `errorMessage` {`string`} - \n\n * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n * `maxOptionsVisible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n * `open` {`boolean`} - Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.\n\n * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n * `filled` {`boolean`} - Draws a filled select.\n\n * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n * `showSelected` {`boolean`} - \n\n * `oldMaxOptionsVisible` {`number`} - \n\n * `showNoResults` {`boolean`} - \n\n * `noResultsMessage` {`string`} - \n\n * `renderItemConfig` {`RenderItemConfig | undefined`} - Enhanced configuration for rendering items with support for display text, value, and search text\n\n * `data` - \n\n * `enableVirtualScroll` {`boolean`} - \n\n * `enableGroupHeader` {`boolean`} - To enable the group header in the select\n\n * `options` {`NileOption[]`} - \n\n * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n * `value` {`string | string[]`} - The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue will be a space-delimited list of values based on the options selected.\n\n * `disabled` {`boolean`} - Disables the select control.\n\n * `defaultValue` {`string | string[]`} - The default value of the form control. Primarily used for resetting the form control.\n\n * `defaultChecked` {`boolean | undefined`} - \n\n * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n * `pattern` {`string | undefined`} - \n\n * `min` {`string | number | Date | undefined`} - \n\n * `max` {`string | number | Date | undefined`} - \n\n * `step` {`number | \"any\" | undefined`} - \n\n * `required` {`boolean`} - The select's required attribute.\n\n * `minlength` {`number | undefined`} - \n\n * `maxlength` {`number | undefined`} - \n\n * `validity` {`ValidityState`} - Gets the validity state object\n\n * `validationMessage` {`string`} - Gets the validation message\n\n * `checkValidity` - \n\n * `getForm` - \n\n * `reportValidity` - \n\n * `setCustomValidity` - \n\n * `BUBBLES` {`boolean`} - \n\n * `COMPOSED` {`boolean`} - \n\n * `CANCELABLE` {`boolean`} - ",
|
2993
3017
|
"attributes": [
|
2994
3018
|
{
|
2995
3019
|
"name": "size",
|
@@ -3135,6 +3159,11 @@
|
|
3135
3159
|
"description": "`enableVirtualScroll` {`boolean`} - \n\nProperty: enableVirtualScroll\n\nDefault: false",
|
3136
3160
|
"valueSet": "v"
|
3137
3161
|
},
|
3162
|
+
{
|
3163
|
+
"name": "enableGroupHeader",
|
3164
|
+
"description": "`enableGroupHeader` {`boolean`} - To enable the group header in the select\n\nProperty: enableGroupHeader\n\nDefault: false",
|
3165
|
+
"valueSet": "v"
|
3166
|
+
},
|
3138
3167
|
{
|
3139
3168
|
"name": "name",
|
3140
3169
|
"description": "`name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\nProperty: name\n\nDefault: "
|
@@ -1 +0,0 @@
|
|
1
|
-
export { NileTableRowContent } from './nile-table-row-content';
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-table-row-content/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC","sourcesContent":["export { NileTableRowContent } from './nile-table-row-content';"]}
|
@@ -1,30 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* Copyright Aquera Inc 2023
|
3
|
-
*
|
4
|
-
* This source code is licensed under the BSD-3-Clause license found in the
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
6
|
-
*/
|
7
|
-
import { css } from 'lit';
|
8
|
-
/**
|
9
|
-
* TableRowContent CSS
|
10
|
-
*/
|
11
|
-
export const styles = css `
|
12
|
-
:host {
|
13
|
-
display: table-row;
|
14
|
-
width: 100%;
|
15
|
-
height: 100%;
|
16
|
-
height: max-content;
|
17
|
-
--nile-header-background: var(--nile-table-header-background-color);
|
18
|
-
border-bottom: 1px solid var(--nile-table-row-border-color);
|
19
|
-
}
|
20
|
-
|
21
|
-
slot::slotted(nile-table-header-item) {
|
22
|
-
background-color: var(--nile-header-background);
|
23
|
-
}
|
24
|
-
|
25
|
-
nile-table-row > slot::slotted(nile-table-cell-item:first-child) {
|
26
|
-
color: red;
|
27
|
-
}
|
28
|
-
`;
|
29
|
-
export default [styles];
|
30
|
-
//# sourceMappingURL=nile-table-row-content.css.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"nile-table-row-content.css.js","sourceRoot":"","sources":["../../../src/nile-table-row-content/nile-table-row-content.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiBxB,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';\n\n/**\n * TableRowContent CSS\n */\nexport const styles = css`\n\t :host {\n display: table-row;\n width: 100%;\n height: 100%;\n height: max-content;\n --nile-header-background: var(--nile-table-header-background-color);\n border-bottom: 1px solid var(--nile-table-row-border-color);\n }\n\n slot::slotted(nile-table-header-item) {\n background-color: var(--nile-header-background);\n }\n\n nile-table-row > slot::slotted(nile-table-cell-item:first-child) {\n color: red;\n }\n`;\n\nexport default [styles];"]}
|