@aquera/nile-elements 0.0.1-beta.6 → 0.0.1-beta.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-auto-complete/nile-auto-complete.d.ts +0 -1
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-auto-complete/nile-auto-complete.js +0 -4
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-auto-complete/nile-auto-complete.js.map +1 -1
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-chip/nile-chip.d.ts +6 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-chip/nile-chip.js +23 -1
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-chip/nile-chip.js.map +1 -1
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-select/nile-select.css.js +15 -9
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-select/nile-select.css.js.map +1 -1
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-select/nile-select.d.ts +3 -1
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-select/nile-select.js +49 -22
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-select/nile-select.js.map +1 -1
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/nile-auto-complete/nile-auto-complete.cjs.js +1 -1
- package/dist/nile-auto-complete/nile-auto-complete.cjs.js.map +1 -1
- package/dist/nile-auto-complete/nile-auto-complete.esm.js +2 -3
- package/dist/nile-chip/nile-chip.cjs.js +1 -1
- package/dist/nile-chip/nile-chip.cjs.js.map +1 -1
- package/dist/nile-chip/nile-chip.esm.js +8 -6
- 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.css.cjs.js +1 -1
- package/dist/nile-select/nile-select.css.cjs.js.map +1 -1
- package/dist/nile-select/nile-select.css.esm.js +15 -9
- package/dist/nile-select/nile-select.esm.js +13 -8
- package/dist/src/nile-auto-complete/nile-auto-complete.d.ts +0 -1
- package/dist/src/nile-auto-complete/nile-auto-complete.js +0 -4
- package/dist/src/nile-auto-complete/nile-auto-complete.js.map +1 -1
- package/dist/src/nile-chip/nile-chip.d.ts +6 -0
- package/dist/src/nile-chip/nile-chip.js +23 -1
- package/dist/src/nile-chip/nile-chip.js.map +1 -1
- package/dist/src/nile-select/nile-select.css.js +15 -9
- package/dist/src/nile-select/nile-select.css.js.map +1 -1
- package/dist/src/nile-select/nile-select.d.ts +3 -1
- package/dist/src/nile-select/nile-select.js +49 -22
- package/dist/src/nile-select/nile-select.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-auto-complete/nile-auto-complete.ts +0 -5
- package/src/nile-chip/nile-chip.ts +18 -1
- package/src/nile-select/nile-select.css.ts +15 -9
- package/src/nile-select/nile-select.ts +48 -25
|
@@ -59,9 +59,6 @@ let NileAutoComplete = class NileAutoComplete extends NileElement {
|
|
|
59
59
|
this.isDropdownOpen = true;
|
|
60
60
|
this.dropdownElement?.show();
|
|
61
61
|
}
|
|
62
|
-
handleBlur() {
|
|
63
|
-
this.menuItems = this.allMenuItems;
|
|
64
|
-
}
|
|
65
62
|
render() {
|
|
66
63
|
return html `
|
|
67
64
|
<nile-dropdown class="nile-dropdown--input" ?open=${this.isDropdownOpen} noOpenOnCLick>
|
|
@@ -70,7 +67,6 @@ let NileAutoComplete = class NileAutoComplete extends NileElement {
|
|
|
70
67
|
.value=${this.value}
|
|
71
68
|
@nile-input=${this.handleSearch}
|
|
72
69
|
@focus=${this.handleFocus}
|
|
73
|
-
@blur=${this.handleBlur}
|
|
74
70
|
@click=${this.handleClick}
|
|
75
71
|
slot="trigger"
|
|
76
72
|
placeholder=${this.placeholder}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-auto-complete.js","sourceRoot":"","sources":["../../../src/nile-auto-complete/nile-auto-complete.ts"],"names":[],"mappings":";AAAA,OAAO,EAEL,IAAI,EACJ,QAAQ,GAGT,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEhE,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,iDAAiD;AAEjD,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,WAAW;IAAjD;;QACE,8BAA8B;QACD,mBAAc,GAAY,KAAK,CAAC;QAEhC,gBAAW,GAAY,KAAK,CAAC;QAE9B,UAAK,GAAW,EAAE,CAAC;QAEnB,gBAAW,GAAW,cAAc,CAAC;QAEpC,aAAQ,GAAY,KAAK,CAAC;QAE9C,cAAS,GAAQ,EAAE,CAAC;QAEF,iBAAY,GAAQ,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"nile-auto-complete.js","sourceRoot":"","sources":["../../../src/nile-auto-complete/nile-auto-complete.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n LitElement,\n html,\n property,\n CSSResultArray,\n TemplateResult,\n} from 'lit-element';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { styles } from './nile-auto-complete.css';\nimport NileElement from '../internal/nile-element';\nimport { watch } from '../watch';\n\n// Define the custom element 'nile-auto-complete'\n@customElement('nile-auto-complete')\nexport class NileAutoComplete extends NileElement {\n // Define component properties\n @property({ type: Boolean }) isDropdownOpen: boolean = false;\n\n @property({ type: Boolean }) openOnFocus: boolean = false;\n\n @property({ type: String }) value: string = '';\n\n @property({ type: String }) placeholder: string = 'Type here ..';\n\n @property({ type: Boolean }) noBorder: boolean = false;\n\n @state() menuItems: any = [];\n\n @property({ type: Array }) allMenuItems: any = [];\n\n @query('nile-dropdown') dropdownElement: any;\n\n connectedCallback() {\n super.connectedCallback();\n this.menuItems = [...this.allMenuItems];\n }\n\n // Watch for changes in 'allMenuItems' property\n @watch('allMenuItems')\n handleAllMenuItemsChange() {\n this.menuItems = [...this.allMenuItems];\n }\n\n // Watch for changes in 'value' and 'isDropdownOpen' properties\n @watch('value', { waitUntilFirstUpdate: true })\n\n @watch('isDropdownOpen', { waitUntilFirstUpdate: true })\n async handleValueChange() {\n await this.updateComplete;\n // Filter menu items based on the search value\n this.menuItems = this.allMenuItems.filter((item: string) =>\n item.toLowerCase().includes(this.value?.toLowerCase())\n );\n }\n\n private handleSelect(event: CustomEvent) {\n this.value = event.detail.value;\n this.emit('nile-complete', { value: event.detail.value });\n this.isDropdownOpen = false;\n this.dropdownElement?.hide();\n }\n\n private handleSearch(event: CustomEvent) {\n const searchValue = event.detail.value.toLowerCase();\n this.value = searchValue;\n\n // Filter menu items based on the search value\n this.menuItems = this.allMenuItems.filter((item: string) =>\n item?.toLowerCase().includes(searchValue)\n );\n\n this.isDropdownOpen = this.menuItems.length > 0;\n if (this.isDropdownOpen) this.dropdownElement?.show();\n }\n\n public handleFocus() {\n if (!this.openOnFocus) {\n return;\n }\n\n // Delay opening the dropdown to allow focus to take effect\n setTimeout(() => {\n this.isDropdownOpen = true;\n this.dropdownElement?.show();\n }, 300);\n }\n\n private handleClick() {\n this.isDropdownOpen = true;\n this.dropdownElement?.show();\n }\n\n public render(): TemplateResult {\n return html`\n <nile-dropdown class=\"nile-dropdown--input\" ?open=${this.isDropdownOpen} noOpenOnCLick>\n <nile-input class=\"nile-auto-complete--input\"\n ?no-border=${this.noBorder}\n .value=${this.value}\n @nile-input=${this.handleSearch}\n @focus=${this.handleFocus}\n @click=${this.handleClick}\n slot=\"trigger\"\n placeholder=${this.placeholder}\n ></nile-input>\n ${this.menuItems.length > 0\n ? html`\n <nile-menu @nile-select=${this.handleSelect}>\n ${this.menuItems.map(\n (item: unknown) => html`\n <nile-menu-item value=${item}>${item}</nile-menu-item>\n `\n )}\n </nile-menu>\n `\n : ''}\n </nile-dropdown>\n `;\n }\n}\n\nexport default NileAutoComplete;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-auto-complete': NileAutoComplete;\n }\n}\n"]}
|
|
@@ -13,6 +13,12 @@ export declare class NileChip extends NileElement {
|
|
|
13
13
|
inputValue: string;
|
|
14
14
|
isDropdownOpen: boolean;
|
|
15
15
|
autoComplete: any;
|
|
16
|
+
/** Sets the input to a warning state, changing its visual appearance. */
|
|
17
|
+
warning: boolean;
|
|
18
|
+
/** Sets the input to an error state, changing its visual appearance. */
|
|
19
|
+
error: boolean;
|
|
20
|
+
/** Sets the input to a success state, changing its visual appearance. */
|
|
21
|
+
success: boolean;
|
|
16
22
|
/** The input's label. If you need to display HTML, use the `label` slot instead. */
|
|
17
23
|
label: string;
|
|
18
24
|
/** Adds a clear button when the input is not empty. */
|
|
@@ -19,6 +19,12 @@ let NileChip = class NileChip extends NileElement {
|
|
|
19
19
|
this.tags = [];
|
|
20
20
|
this.inputValue = '';
|
|
21
21
|
this.isDropdownOpen = false;
|
|
22
|
+
/** Sets the input to a warning state, changing its visual appearance. */
|
|
23
|
+
this.warning = false;
|
|
24
|
+
/** Sets the input to an error state, changing its visual appearance. */
|
|
25
|
+
this.error = false;
|
|
26
|
+
/** Sets the input to a success state, changing its visual appearance. */
|
|
27
|
+
this.success = false;
|
|
22
28
|
/** The input's label. If you need to display HTML, use the `label` slot instead. */
|
|
23
29
|
this.label = '';
|
|
24
30
|
/** Adds a clear button when the input is not empty. */
|
|
@@ -107,7 +113,14 @@ let NileChip = class NileChip extends NileElement {
|
|
|
107
113
|
<slot name="label">${this.label}</slot>
|
|
108
114
|
</label>
|
|
109
115
|
|
|
110
|
-
<div
|
|
116
|
+
<div
|
|
117
|
+
class=${classMap({
|
|
118
|
+
'nile-chip': true,
|
|
119
|
+
'nile-chip--warning': this.warning,
|
|
120
|
+
'nile-chip--error': this.error,
|
|
121
|
+
'nile-chip--success': this.success,
|
|
122
|
+
})}
|
|
123
|
+
>
|
|
111
124
|
${this.tags.map(tag => html `
|
|
112
125
|
<nile-tag class="nile-chip__tags" @nile-remove=${() => this.handleRemove(tag)} removable pill>
|
|
113
126
|
${tag}
|
|
@@ -153,6 +166,15 @@ __decorate([
|
|
|
153
166
|
__decorate([
|
|
154
167
|
query('nile-auto-complete')
|
|
155
168
|
], NileChip.prototype, "autoComplete", void 0);
|
|
169
|
+
__decorate([
|
|
170
|
+
property({ type: Boolean })
|
|
171
|
+
], NileChip.prototype, "warning", void 0);
|
|
172
|
+
__decorate([
|
|
173
|
+
property({ type: Boolean })
|
|
174
|
+
], NileChip.prototype, "error", void 0);
|
|
175
|
+
__decorate([
|
|
176
|
+
property({ type: Boolean })
|
|
177
|
+
], NileChip.prototype, "success", void 0);
|
|
156
178
|
__decorate([
|
|
157
179
|
property()
|
|
158
180
|
], NileChip.prototype, "label", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-chip.js","sourceRoot":"","sources":["../../../src/nile-chip/nile-chip.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,EACJ,QAAQ,EAGT,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,WAAgC,MAAM,0BAA0B,CAAC;AAQxE,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,WAAW;IAAzC;;QAMmB,sBAAiB,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC;QAE9E,SAAI,GAAa,EAAE,CAAC;QAEpB,eAAU,GAAW,EAAE,CAAC;QAExB,mBAAc,GAAY,KAAK,CAAC;QAIzC,oFAAoF;QACxE,UAAK,GAAG,EAAE,CAAC;QAEvB,uDAAuD;QAC1B,oBAAe,GAAG,KAAK,CAAC;QAErD,uDAAuD;QAC1B,cAAS,GAAG,KAAK,CAAC;QAE/C,kEAAkE;QACtD,gBAAW,GAAG,EAAE,CAAC;QAE7B,gCAAgC;QACY,aAAQ,GAAG,KAAK,CAAC;QAE7D,0BAA0B;QACkB,aAAQ,GAAG,KAAK,CAAC;QAE7D,4FAA4F;QACtD,aAAQ,GAAG,EAAE,CAAC;QAEpD,wBAAwB;QACG,wBAAmB,GAAW,EAAE,CAAC;QAEjC,UAAK,GAAW,EAAE,CAAC;IAwHhD,CAAC;IA9JQ,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAuCD,cAAc;QACZ,IAAI,CAAC,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC;IAEO,YAAY,CAAC,KAAqC;QAExD,2CAA2C;QAC3C,IAAI,CAAC,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAE/C,8CAA8C;QAC9C,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAEpD,wBAAwB;QACxB,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAEO,YAAY,CAAC,KAAa;QAChC,qCAAqC;QACrC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,KAAK,CAAC,CAAC;QACnD,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IAEtD,CAAC;IAEO,iBAAiB,CAAC,KAAqC;QAC7D,yBAAyB;QACzB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;IACvC,CAAC;IAEO,kBAAkB,CAAC,KAAoB;QAC7C,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;YACzB,OAAO;SACR;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,IAAI,CAAC,UAAU,EAAE;YAC5C,IAAI,CAAC,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;YAE5C,IAAI,CAAC,UAAU,EAAE,CAAC;YAClB,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;SACrD;IAGH,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC7B,CAAC;IAEO,UAAU;QAChB,qCAAqC;QACrC,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QACrB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAC5B,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,EAAE,CAAC;QAC7B,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC;IAClC,CAAC;IAED,MAAM;QACJ,6BAA6B;QAC7B,MAAM,YAAY,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC1D,MAAM,eAAe,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAEjE,2CAA2C;QAC3C,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC;QACpD,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC;QAE7D,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC;YACf,cAAc,EAAE,IAAI;YACpB,sBAAsB,EAAE,IAAI;YAC5B,yBAAyB,EAAE,QAAQ;YACnC,6BAA6B,EAAE,WAAW;YAC1C,qBAAqB,EAAE,IAAI,CAAC,QAAQ;SACrC,CAAC;;;;;;wBAMc,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;;+BAEpB,IAAI,CAAC,KAAK;;;;YAI7B,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA;6DACwB,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC;gBACzE,GAAG;;WAER,CAAC;;;8BAGkB,IAAI,CAAC,mBAAmB;uBAC/B,IAAI,CAAC,UAAU;gCACN,IAAI,CAAC,cAAc;0BACzB,IAAI;;6BAED,IAAI,CAAC,WAAW;4BACjB,IAAI,CAAC,iBAAiB;yBACzB,IAAI,CAAC,kBAAkB;4BACpB,IAAI,CAAC,WAAW;+BACb,IAAI,CAAC,YAAY;;;;;;;;0BAQtB,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;;cAE1C,IAAI,CAAC,QAAQ;;;;KAItB,CAAC;IACJ,CAAC;CACF,CAAA;AAxJU;IAAR,KAAK,EAAE;sCAAqB;AAEpB;IAAR,KAAK,EAAE;4CAAyB;AAExB;IAAR,KAAK,EAAE;gDAAiC;AAEZ;IAA5B,KAAK,CAAC,oBAAoB,CAAC;8CAAoB;AAGpC;IAAX,QAAQ,EAAE;uCAAY;AAGM;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAAyB;AAGxB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CAAmB;AAGnC;IAAX,QAAQ,EAAE;6CAAkB;AAGe;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAkB;AAGvB;IAArC,QAAQ,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;0CAAe;AAGzB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;qDAAkC;AAEjC;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;uCAAoB;AAG9C;IADC,KAAK,CAAC,OAAO,CAAC;8CAGd;AA7CU,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAgKpB;SAhKY,QAAQ;AAkKrB,eAAe,QAAQ,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 {\n LitElement,\n html,\n property,\n CSSResultArray,\n TemplateResult\n} from 'lit-element';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { styles } from './nile-chip.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../internal/slot';\nimport { watch } from '../internal/watch';\nimport NileElement, { NileFormControl } from '../internal/nile-element';\n\n\ninterface CustomEventDetail {\n value: string;\n}\n\n@customElement('nile-chip')\nexport class NileChip extends NileElement {\n\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');\n\n @state() tags: string[] = [];\n\n @state() inputValue: string = '';\n\n @state() isDropdownOpen: boolean = false;\n\n @query('nile-auto-complete') autoComplete!: any;\n\n /** The input's label. If you need to display HTML, use the `label` slot instead. */\n @property() label = '';\n\n /** Adds a clear button when the input is not empty. */\n @property({ type: Boolean }) acceptUserInput = false;\n\n /** Adds a clear button when the input is not empty. */\n @property({ type: Boolean }) clearable = false;\n\n /** Placeholder text to show as a hint when the input is empty. */\n @property() placeholder = '';\n\n /** Makes the input readonly. */\n @property({ type: Boolean, reflect: true }) readonly = false;\n\n /** Disables the input. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */\n @property({ attribute: 'help-text' }) helpText = '';\n\n // Auto-complete options\n @property({ type: Array }) autoCompleteOptions : any[] = [];\n\n @property({ type: Array }) value : any[] = [];\n\n @watch('value')\n onValueChanged() {\n this.tags = [...this.value];\n }\n\n private handleSelect(event: CustomEvent<CustomEventDetail>) {\n\n // Add the selected value to the tags array\n this.tags = [...this.tags, event.detail.value];\n\n // Emit a custom event with the selected value\n this.emit('nile-chip-change', { value: this.tags });\n\n // Reset the input field\n this.resetInput();\n }\n\n private handleRemove(value: string) {\n // Remove the tag from the tags array\n this.tags = this.tags.filter(tag => tag !== value);\n this.emit('nile-chip-change', { value: this.tags });\n\n }\n\n private handleInputChange(event: CustomEvent<CustomEventDetail>) {\n // Update the input value\n this.inputValue = event.detail.value;\n }\n\n private handleInputKeydown(event: KeyboardEvent) {\n if (!this.acceptUserInput) {\n return;\n }\n\n if (event.key === 'Enter' && this.inputValue) {\n this.tags = [...this.tags, this.inputValue];\n\n this.resetInput();\n this.emit('nile-chip-change', { value: this.tags });\n }\n\n\n }\n\n private handleFocus() {\n this.isDropdownOpen = true;\n }\n\n private resetInput() {\n // Reset the input-related properties\n this.inputValue = '';\n this.isDropdownOpen = false;\n this.autoComplete.value = '';\n this.autoComplete.handleFocus();\n }\n\n render() {\n // Check if slots are present\n const hasLabelSlot = this.hasSlotController.test('label');\n const hasHelpTextSlot = this.hasSlotController.test('help-text');\n\n // Check if label and help text are present\n const hasLabel = this.label ? true : !!hasLabelSlot;\n const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n\n return html`\n <div\n part=\"form-control\"\n class=${classMap({\n 'form-control': true,\n 'form-control--medium': true,\n 'form-control--has-label': hasLabel,\n 'form-control--has-help-text': hasHelpText,\n 'nile-chip--disabled': this.disabled,\n })}\n >\n <label\n part=\"form-control-label\"\n class=\"form-control__label\"\n for=\"input\"\n aria-hidden=${hasLabel ? 'false' : 'true'}\n >\n <slot name=\"label\">${this.label}</slot>\n </label>\n\n <div class=\"nile-chip\">\n ${this.tags.map(tag => html`\n <nile-tag class=\"nile-chip__tags\" @nile-remove=${() => this.handleRemove(tag)} removable pill>\n ${tag}\n </nile-tag>\n `)}\n <div class=\"nile-chip__auto-complete\">\n <nile-auto-complete\n .allMenuItems=${this.autoCompleteOptions}\n .value=${this.inputValue}\n ?isDropdownOpen=${this.isDropdownOpen}\n .noBorder=${true}\n openOnFocus\n .placeholder=${this.placeholder}\n @nile-input=${this.handleInputChange}\n @keydown=${this.handleInputKeydown}\n @nile-focus=${this.handleFocus}\n @nile-complete=${this.handleSelect}\n ></nile-auto-complete>\n </div>\n <slot\n name=\"help-text\"\n part=\"form-control-help-text\"\n id=\"help-text\"\n class=\"form-control__help-text\"\n aria-hidden=${hasHelpText ? 'false' : 'true'}\n >\n ${this.helpText}\n </slot>\n </div>\n </div>\n `;\n }\n}\n\nexport default NileChip;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-chip': NileChip;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"nile-chip.js","sourceRoot":"","sources":["../../../src/nile-chip/nile-chip.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} from 'lit-element';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { styles } from './nile-chip.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../internal/slot';\nimport { watch } from '../internal/watch';\nimport NileElement, { NileFormControl } from '../internal/nile-element';\n\n\ninterface CustomEventDetail {\n value: string;\n}\n\n@customElement('nile-chip')\nexport class NileChip extends NileElement {\n\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');\n\n @state() tags: string[] = [];\n\n @state() inputValue: string = '';\n\n @state() isDropdownOpen: boolean = false;\n\n @query('nile-auto-complete') autoComplete!: any;\n\n /** Sets the input to a warning state, changing its visual appearance. */\n @property({ type: Boolean }) warning = false;\n\n /** Sets the input to an error state, changing its visual appearance. */\n @property({ type: Boolean }) error = false;\n\n /** Sets the input to a success state, changing its visual appearance. */\n @property({ type: Boolean }) success = false;\n\n /** The input's label. If you need to display HTML, use the `label` slot instead. */\n @property() label = '';\n\n /** Adds a clear button when the input is not empty. */\n @property({ type: Boolean }) acceptUserInput = false;\n\n /** Adds a clear button when the input is not empty. */\n @property({ type: Boolean }) clearable = false;\n\n /** Placeholder text to show as a hint when the input is empty. */\n @property() placeholder = '';\n\n /** Makes the input readonly. */\n @property({ type: Boolean, reflect: true }) readonly = false;\n\n /** Disables the input. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */\n @property({ attribute: 'help-text' }) helpText = '';\n\n // Auto-complete options\n @property({ type: Array }) autoCompleteOptions : any[] = [];\n\n @property({ type: Array }) value : any[] = [];\n\n @watch('value')\n onValueChanged() {\n this.tags = [...this.value];\n }\n\n private handleSelect(event: CustomEvent<CustomEventDetail>) {\n\n // Add the selected value to the tags array\n this.tags = [...this.tags, event.detail.value];\n\n // Emit a custom event with the selected value\n this.emit('nile-chip-change', { value: this.tags });\n\n // Reset the input field\n this.resetInput();\n }\n\n private handleRemove(value: string) {\n // Remove the tag from the tags array\n this.tags = this.tags.filter(tag => tag !== value);\n this.emit('nile-chip-change', { value: this.tags });\n\n }\n\n private handleInputChange(event: CustomEvent<CustomEventDetail>) {\n // Update the input value\n this.inputValue = event.detail.value;\n }\n\n private handleInputKeydown(event: KeyboardEvent) {\n if (!this.acceptUserInput) {\n return;\n }\n\n if (event.key === 'Enter' && this.inputValue) {\n this.tags = [...this.tags, this.inputValue];\n\n this.resetInput();\n this.emit('nile-chip-change', { value: this.tags });\n }\n\n\n }\n\n private handleFocus() {\n this.isDropdownOpen = true;\n }\n\n private resetInput() {\n // Reset the input-related properties\n this.inputValue = '';\n this.isDropdownOpen = false;\n this.autoComplete.value = '';\n this.autoComplete.handleFocus();\n }\n\n render() {\n // Check if slots are present\n const hasLabelSlot = this.hasSlotController.test('label');\n const hasHelpTextSlot = this.hasSlotController.test('help-text');\n\n // Check if label and help text are present\n const hasLabel = this.label ? true : !!hasLabelSlot;\n const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n\n return html`\n <div\n part=\"form-control\"\n class=${classMap({\n 'form-control': true,\n 'form-control--medium': true,\n 'form-control--has-label': hasLabel,\n 'form-control--has-help-text': hasHelpText,\n 'nile-chip--disabled': this.disabled,\n })}\n >\n <label\n part=\"form-control-label\"\n class=\"form-control__label\"\n for=\"input\"\n aria-hidden=${hasLabel ? 'false' : 'true'}\n >\n <slot name=\"label\">${this.label}</slot>\n </label>\n\n <div\n class=${classMap({\n 'nile-chip': true,\n 'nile-chip--warning': this.warning,\n 'nile-chip--error': this.error,\n 'nile-chip--success': this.success,\n\n })}\n >\n ${this.tags.map(tag => html`\n <nile-tag class=\"nile-chip__tags\" @nile-remove=${() => this.handleRemove(tag)} removable pill>\n ${tag}\n </nile-tag>\n `)}\n <div class=\"nile-chip__auto-complete\">\n <nile-auto-complete\n .allMenuItems=${this.autoCompleteOptions}\n .value=${this.inputValue}\n ?isDropdownOpen=${this.isDropdownOpen}\n .noBorder=${true}\n openOnFocus\n .placeholder=${this.placeholder}\n @nile-input=${this.handleInputChange}\n @keydown=${this.handleInputKeydown}\n @nile-focus=${this.handleFocus}\n @nile-complete=${this.handleSelect}\n ></nile-auto-complete>\n </div>\n <slot\n name=\"help-text\"\n part=\"form-control-help-text\"\n id=\"help-text\"\n class=\"form-control__help-text\"\n aria-hidden=${hasHelpText ? 'false' : 'true'}\n >\n ${this.helpText}\n </slot>\n </div>\n </div>\n `;\n }\n}\n\nexport default NileChip;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-chip': NileChip;\n }\n}\n"]}
|
|
@@ -94,7 +94,7 @@ export const styles = css `
|
|
|
94
94
|
}
|
|
95
95
|
|
|
96
96
|
.select::part(popup) {
|
|
97
|
-
z-index:
|
|
97
|
+
z-index: 9999;
|
|
98
98
|
}
|
|
99
99
|
|
|
100
100
|
.select[data-current-placement^='top']::part(popup) {
|
|
@@ -353,7 +353,7 @@ export const styles = css `
|
|
|
353
353
|
align-items: center;
|
|
354
354
|
justify-content: center;
|
|
355
355
|
font-size: inherit;
|
|
356
|
-
color: #
|
|
356
|
+
color: #005EA6;
|
|
357
357
|
border: none;
|
|
358
358
|
background: none;
|
|
359
359
|
padding: 0;
|
|
@@ -393,7 +393,7 @@ export const styles = css `
|
|
|
393
393
|
background: #ffffff;
|
|
394
394
|
border: solid 1px #cccccc;
|
|
395
395
|
border-radius: 0.25rem;
|
|
396
|
-
padding-block: 0
|
|
396
|
+
padding-block: 0;
|
|
397
397
|
padding-inline: 0;
|
|
398
398
|
overflow: auto;
|
|
399
399
|
overscroll-behavior: none;
|
|
@@ -402,10 +402,15 @@ export const styles = css `
|
|
|
402
402
|
max-height: var(--auto-size-available-height);
|
|
403
403
|
}
|
|
404
404
|
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
405
|
+
.select__options{
|
|
406
|
+
padding-top: 10px;
|
|
407
|
+
}
|
|
408
408
|
|
|
409
|
+
.select__options{
|
|
410
|
+
padding: 5px;
|
|
411
|
+
margin: 4px;
|
|
412
|
+
font-size: 14px;
|
|
413
|
+
color: rgb(133, 129, 129);
|
|
409
414
|
}
|
|
410
415
|
|
|
411
416
|
.select__listbox::slotted(nile-divider) {
|
|
@@ -421,11 +426,12 @@ export const styles = css `
|
|
|
421
426
|
}
|
|
422
427
|
|
|
423
428
|
.select__search {
|
|
424
|
-
position:
|
|
429
|
+
position: sticky;
|
|
425
430
|
top: 0px;
|
|
426
|
-
|
|
431
|
+
z-index: 1;
|
|
427
432
|
width: calc(100% - 16px);
|
|
428
433
|
padding: 8px;
|
|
434
|
+
background-color: white;
|
|
429
435
|
}
|
|
430
436
|
|
|
431
437
|
.select__footer {
|
|
@@ -439,7 +445,7 @@ export const styles = css `
|
|
|
439
445
|
display: flex;
|
|
440
446
|
flex-direction: row;
|
|
441
447
|
align-items: flex-start;
|
|
442
|
-
padding:
|
|
448
|
+
padding: 8px;
|
|
443
449
|
gap: 12px;
|
|
444
450
|
justify-content: space-between;
|
|
445
451
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-select.css.js","sourceRoot":"","sources":["../../../src/nile-select/nile-select.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmbxB,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 * Select_2 CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: inline-block;\n color: #333333;\n margin-bottom: 0.75rem;\n }\n\n .form-control--has-label.form-control--small .form-control__label {\n font-size: 0.875rem;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: 1rem;\n }\n\n .form-control--has-label.form-control--large .form-control__label {\n font-size: 1.25rem;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: inherit;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: #666666;\n margin-top: 0.75rem;\n }\n\n .form-control--has-help-text.form-control--small .form-control__help-text {\n font-size: 0.75rem;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 0.875rem;\n }\n\n .form-control--has-help-text.form-control--large .form-control__help-text {\n font-size: 1rem;\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: 0.25rem;\n }\n\n :host {\n display: block;\n }\n\n /** The popup */\n .select {\n flex: 1 1 auto;\n display: inline-flex;\n width: 100%;\n position: relative;\n vertical-align: middle;\n }\n\n .select::part(popup) {\n z-index: 900;\n }\n\n .select[data-current-placement^='top']::part(popup) {\n transform-origin: bottom;\n }\n\n .select[data-current-placement^='bottom']::part(popup) {\n transform-origin: top;\n }\n\n /* Combobox */\n .select__combobox {\n flex: 1;\n display: flex;\n width: 100%;\n min-width: 0;\n position: relative;\n align-items: center;\n justify-content: start;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,\n Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',\n 'Segoe UI Symbol';\n font-weight: 400;\n letter-spacing: normal;\n vertical-align: middle;\n overflow: hidden;\n cursor: pointer;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n }\n\n .select__display-input {\n position: relative;\n width: 100%;\n font: inherit;\n border: none;\n background: none;\n color: #333333;\n cursor: inherit;\n overflow: hidden;\n padding: 0;\n margin: 0;\n -webkit-appearance: none;\n }\n\n .select:not(.select--disabled):hover .select__display-input {\n color: #333333;\n }\n\n .select__display-input:focus {\n outline: none;\n }\n\n /* Visually hide the display input when multiple is enabled */\n .select--multiple:not(.select--placeholder-visible) .select__display-input {\n position: absolute;\n z-index: -1;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n }\n\n .select__value-input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n opacity: 0;\n z-index: -1;\n }\n\n .select__tags {\n display: flex;\n flex: 1;\n align-items: center;\n flex-wrap: no-wrap;\n margin-inline-start: 0.5rem;\n width: 100%;\n overflow: hidden;\n }\n\n .select__tags-count {\n position: absolute;\n right: 0;\n border: 1px solid rgb(169, 218, 218);\n border-radius: 0.25rem;\n margin-right: 30px;\n }\n\n .select__tags-count-clearable {\n margin-right: 50px;\n }\n\n .select__tags::slotted(nile-tag) {\n cursor: pointer !important;\n }\n\n .select--disabled .select__tags,\n .select--disabled .select__tags::slotted(nile-tag) {\n cursor: not-allowed !important;\n }\n\n /* Standard selects */\n .select--standard .select__combobox {\n background-color: #ffffff;\n border: solid 1px #cccccc;\n }\n\n .select--standard.select--disabled .select__combobox {\n background-color: #f4f4f4;\n border-color: #cccccc;\n color: #999999;\n opacity: 0.5;\n cursor: not-allowed;\n outline: none;\n }\n\n .select--standard:not(.select--disabled).select--open .select__combobox,\n .select--standard:not(.select--disabled).select--focused .select__combobox {\n background-color: #f4f4f4;\n border-color: #0059ff;\n box-shadow: 0 0 0 3px rgba(0, 89, 255, 0.4);\n }\n\n /* Filled selects */\n .select--filled .select__combobox {\n border: none;\n background-color: #f4f4f4;\n color: #333333;\n }\n\n .select--filled:hover:not(.select--disabled) .select__combobox {\n background-color: #f4f4f4;\n }\n\n .select--filled.select--disabled .select__combobox {\n background-color: #f4f4f4;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .select--filled:not(.select--disabled).select--open .select__combobox,\n .select--filled:not(.select--disabled).select--focused .select__combobox {\n background-color: #f4f4f4;\n outline: 3px solid rgba(0, 89, 255, 0.4);\n }\n\n /* Sizes */\n .select--small .select__combobox {\n border-radius: 0.25rem;\n font-size: 0.875rem;\n min-height: 1.875rem;\n padding-block: 0;\n padding-inline: 0.5rem;\n }\n\n .select--small .select__clear {\n margin-inline-start: 0.5rem;\n }\n\n .select--small .select__prefix::slotted(*) {\n margin-inline-end: 0.5rem;\n }\n\n .select--small.select--multiple:not(.select--placeholder-visible)\n .select__combobox {\n padding-block: 2px;\n padding-inline-start: 0;\n }\n\n .select--small .select__tags {\n gap: 2px;\n }\n\n .select--medium .select__combobox {\n border-radius: 0.25rem;\n font-size: 1rem;\n min-height: 2.5rem;\n padding-block: 0;\n padding-inline: 0.75rem;\n }\n\n .select--medium .select__clear {\n margin-inline-start: 0.75rem;\n }\n\n .select--medium .select__prefix::slotted(*) {\n margin-inline-end: 0.75rem;\n /* margin-inline-start: 0.75rem; */\n }\n\n .select--medium.select--multiple:not(.select--placeholder-visible)\n .select__combobox {\n padding-inline-start: 0;\n }\n\n .select--medium .select__tags {\n gap: 3px;\n }\n\n .select--large .select__combobox {\n border-radius: 0.5rem;\n font-size: 1.25rem;\n min-height: 3.125rem;\n padding-block: 0;\n padding-inline: 1rem;\n }\n\n .select--large .select__clear {\n margin-inline-start: 1rem;\n }\n\n .select--large .select__prefix::slotted(*) {\n margin-inline-end: 1rem;\n }\n\n .select--large.select--multiple:not(.select--placeholder-visible)\n .select__combobox {\n padding-inline-start: 0;\n padding-block: 4px;\n }\n\n .select--large .select__tags {\n gap: 4px;\n }\n\n /* Pills */\n .select--pill.select--small .select__combobox {\n border-radius: 1.875rem;\n }\n\n .select--pill.select--medium .select__combobox {\n border-radius: 2.5rem;\n }\n\n .select--pill.select--large .select__combobox {\n border-radius: 3.125rem;\n }\n\n /* Prefix */\n .select__prefix {\n flex: 0;\n display: inline-flex;\n align-items: center;\n color: #aaaaaa;\n }\n\n /* Clear button */\n .select__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: #aaaaaa;\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .select__clear:hover {\n color: #999999;\n }\n\n .select__clear:focus {\n outline: none;\n }\n\n /* Expand icon */\n .select__expand-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n transition: 250ms rotate ease;\n rotate: 0;\n margin-inline-start: 0.25rem;\n }\n\n .select--open .select__expand-icon {\n rotate: -180deg;\n }\n\n /* Listbox */\n .select__listbox {\n display: block;\n position: relative;\n font-size: 1rem;\n font-weight: 400;\n box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);\n background: #ffffff;\n border: solid 1px #cccccc;\n border-radius: 0.25rem;\n padding-block: 0.25rem 0;\n padding-inline: 0;\n overflow: auto;\n overscroll-behavior: none;\n /* Make sure it adheres to the popup's auto size */\n max-width: var(--auto-size-available-width);\n max-height: var(--auto-size-available-height);\n }\n\n /* Listbox */\n .select__search-enabled {\n padding-top: 50px;\n\n }\n\n .select__listbox::slotted(nile-divider) {\n --spacing: 0.25rem;\n }\n\n .select__listbox::slotted(small) {\n font-size: 0.875rem;\n font-weight: 600;\n color: #888888;\n padding-block: 0.25rem;\n padding-inline: 1rem;\n }\n\n .select__search {\n position: absolute;\n top: 0px;\n height: 15px;\n width: calc(100% - 16px);\n padding: 8px;\n }\n\n .select__footer {\n position: sticky;\n bottom: 0px;\n background: #fafafa;\n border: 1px solid #e5e9eb;\n display: flex;\n height: 15px;\n /* Auto layout */\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding: 12px;\n gap: 12px;\n justify-content: space-between;\n }\n`;\n\nexport default [styles];\n"]}
|
|
1
|
+
{"version":3,"file":"nile-select.css.js","sourceRoot":"","sources":["../../../src/nile-select/nile-select.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAybxB,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 * Select_2 CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: inline-block;\n color: #333333;\n margin-bottom: 0.75rem;\n }\n\n .form-control--has-label.form-control--small .form-control__label {\n font-size: 0.875rem;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: 1rem;\n }\n\n .form-control--has-label.form-control--large .form-control__label {\n font-size: 1.25rem;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: inherit;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: #666666;\n margin-top: 0.75rem;\n }\n\n .form-control--has-help-text.form-control--small .form-control__help-text {\n font-size: 0.75rem;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 0.875rem;\n }\n\n .form-control--has-help-text.form-control--large .form-control__help-text {\n font-size: 1rem;\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: 0.25rem;\n }\n\n :host {\n display: block;\n }\n\n /** The popup */\n .select {\n flex: 1 1 auto;\n display: inline-flex;\n width: 100%;\n position: relative;\n vertical-align: middle;\n }\n\n .select::part(popup) {\n z-index: 9999;\n }\n\n .select[data-current-placement^='top']::part(popup) {\n transform-origin: bottom;\n }\n\n .select[data-current-placement^='bottom']::part(popup) {\n transform-origin: top;\n }\n\n /* Combobox */\n .select__combobox {\n flex: 1;\n display: flex;\n width: 100%;\n min-width: 0;\n position: relative;\n align-items: center;\n justify-content: start;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,\n Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',\n 'Segoe UI Symbol';\n font-weight: 400;\n letter-spacing: normal;\n vertical-align: middle;\n overflow: hidden;\n cursor: pointer;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n }\n\n .select__display-input {\n position: relative;\n width: 100%;\n font: inherit;\n border: none;\n background: none;\n color: #333333;\n cursor: inherit;\n overflow: hidden;\n padding: 0;\n margin: 0;\n -webkit-appearance: none;\n }\n\n .select:not(.select--disabled):hover .select__display-input {\n color: #333333;\n }\n\n .select__display-input:focus {\n outline: none;\n }\n\n /* Visually hide the display input when multiple is enabled */\n .select--multiple:not(.select--placeholder-visible) .select__display-input {\n position: absolute;\n z-index: -1;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n }\n\n .select__value-input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n opacity: 0;\n z-index: -1;\n }\n\n .select__tags {\n display: flex;\n flex: 1;\n align-items: center;\n flex-wrap: no-wrap;\n margin-inline-start: 0.5rem;\n width: 100%;\n overflow: hidden;\n }\n\n .select__tags-count {\n position: absolute;\n right: 0;\n border: 1px solid rgb(169, 218, 218);\n border-radius: 0.25rem;\n margin-right: 30px;\n }\n\n .select__tags-count-clearable {\n margin-right: 50px;\n }\n\n .select__tags::slotted(nile-tag) {\n cursor: pointer !important;\n }\n\n .select--disabled .select__tags,\n .select--disabled .select__tags::slotted(nile-tag) {\n cursor: not-allowed !important;\n }\n\n /* Standard selects */\n .select--standard .select__combobox {\n background-color: #ffffff;\n border: solid 1px #cccccc;\n }\n\n .select--standard.select--disabled .select__combobox {\n background-color: #f4f4f4;\n border-color: #cccccc;\n color: #999999;\n opacity: 0.5;\n cursor: not-allowed;\n outline: none;\n }\n\n .select--standard:not(.select--disabled).select--open .select__combobox,\n .select--standard:not(.select--disabled).select--focused .select__combobox {\n background-color: #f4f4f4;\n border-color: #0059ff;\n box-shadow: 0 0 0 3px rgba(0, 89, 255, 0.4);\n }\n\n /* Filled selects */\n .select--filled .select__combobox {\n border: none;\n background-color: #f4f4f4;\n color: #333333;\n }\n\n .select--filled:hover:not(.select--disabled) .select__combobox {\n background-color: #f4f4f4;\n }\n\n .select--filled.select--disabled .select__combobox {\n background-color: #f4f4f4;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .select--filled:not(.select--disabled).select--open .select__combobox,\n .select--filled:not(.select--disabled).select--focused .select__combobox {\n background-color: #f4f4f4;\n outline: 3px solid rgba(0, 89, 255, 0.4);\n }\n\n /* Sizes */\n .select--small .select__combobox {\n border-radius: 0.25rem;\n font-size: 0.875rem;\n min-height: 1.875rem;\n padding-block: 0;\n padding-inline: 0.5rem;\n }\n\n .select--small .select__clear {\n margin-inline-start: 0.5rem;\n }\n\n .select--small .select__prefix::slotted(*) {\n margin-inline-end: 0.5rem;\n }\n\n .select--small.select--multiple:not(.select--placeholder-visible)\n .select__combobox {\n padding-block: 2px;\n padding-inline-start: 0;\n }\n\n .select--small .select__tags {\n gap: 2px;\n }\n\n .select--medium .select__combobox {\n border-radius: 0.25rem;\n font-size: 1rem;\n min-height: 2.5rem;\n padding-block: 0;\n padding-inline: 0.75rem;\n }\n\n .select--medium .select__clear {\n margin-inline-start: 0.75rem;\n }\n\n .select--medium .select__prefix::slotted(*) {\n margin-inline-end: 0.75rem;\n /* margin-inline-start: 0.75rem; */\n }\n\n .select--medium.select--multiple:not(.select--placeholder-visible)\n .select__combobox {\n padding-inline-start: 0;\n }\n\n .select--medium .select__tags {\n gap: 3px;\n }\n\n .select--large .select__combobox {\n border-radius: 0.5rem;\n font-size: 1.25rem;\n min-height: 3.125rem;\n padding-block: 0;\n padding-inline: 1rem;\n }\n\n .select--large .select__clear {\n margin-inline-start: 1rem;\n }\n\n .select--large .select__prefix::slotted(*) {\n margin-inline-end: 1rem;\n }\n\n .select--large.select--multiple:not(.select--placeholder-visible)\n .select__combobox {\n padding-inline-start: 0;\n padding-block: 4px;\n }\n\n .select--large .select__tags {\n gap: 4px;\n }\n\n /* Pills */\n .select--pill.select--small .select__combobox {\n border-radius: 1.875rem;\n }\n\n .select--pill.select--medium .select__combobox {\n border-radius: 2.5rem;\n }\n\n .select--pill.select--large .select__combobox {\n border-radius: 3.125rem;\n }\n\n /* Prefix */\n .select__prefix {\n flex: 0;\n display: inline-flex;\n align-items: center;\n color: #aaaaaa;\n }\n\n /* Clear button */\n .select__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: #005EA6;\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .select__clear:hover {\n color: #999999;\n }\n\n .select__clear:focus {\n outline: none;\n }\n\n /* Expand icon */\n .select__expand-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n transition: 250ms rotate ease;\n rotate: 0;\n margin-inline-start: 0.25rem;\n }\n\n .select--open .select__expand-icon {\n rotate: -180deg;\n }\n\n /* Listbox */\n .select__listbox {\n display: block;\n position: relative;\n font-size: 1rem;\n font-weight: 400;\n box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);\n background: #ffffff;\n border: solid 1px #cccccc;\n border-radius: 0.25rem;\n padding-block: 0;\n padding-inline: 0;\n overflow: auto;\n overscroll-behavior: none;\n /* Make sure it adheres to the popup's auto size */\n max-width: var(--auto-size-available-width);\n max-height: var(--auto-size-available-height);\n }\n\n .select__options{\n padding-top: 10px;\n }\n\n .select__options{\n padding: 5px;\n margin: 4px;\n font-size: 14px;\n color: rgb(133, 129, 129);\n }\n\n .select__listbox::slotted(nile-divider) {\n --spacing: 0.25rem;\n }\n\n .select__listbox::slotted(small) {\n font-size: 0.875rem;\n font-weight: 600;\n color: #888888;\n padding-block: 0.25rem;\n padding-inline: 1rem;\n }\n\n .select__search {\n position: sticky;\n top: 0px;\n z-index: 1;\n width: calc(100% - 16px);\n padding: 8px;\n background-color: white;\n }\n\n .select__footer {\n position: sticky;\n bottom: 0px;\n background: #fafafa;\n border: 1px solid #e5e9eb;\n display: flex;\n height: 15px;\n /* Auto layout */\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding: 8px;\n gap: 12px;\n justify-content: space-between;\n }\n`;\n\nexport default [styles];\n"]}
|
|
@@ -138,6 +138,8 @@ export declare class NileSelect extends NileElement implements NileFormControl {
|
|
|
138
138
|
/** The select's required attribute. */
|
|
139
139
|
required: boolean;
|
|
140
140
|
showSelected: boolean;
|
|
141
|
+
showNoResults: boolean;
|
|
142
|
+
noResultsMessage: string;
|
|
141
143
|
/** Gets the validity state object */
|
|
142
144
|
get validity(): ValidityState;
|
|
143
145
|
/** Gets the validation message */
|
|
@@ -181,7 +183,7 @@ export declare class NileSelect extends NileElement implements NileFormControl {
|
|
|
181
183
|
handleSearchFocus(): void;
|
|
182
184
|
handleSearchBlur(): void;
|
|
183
185
|
handleSearchChange(e: any): void;
|
|
184
|
-
filterOptions(searchValue: string):
|
|
186
|
+
filterOptions(searchValue: string): NileOption[];
|
|
185
187
|
private handleInvalid;
|
|
186
188
|
handleDisabledChange(): void;
|
|
187
189
|
handleValueChange(): void;
|
|
@@ -143,6 +143,7 @@ let NileSelect = class NileSelect extends NileElement {
|
|
|
143
143
|
/** The select's required attribute. */
|
|
144
144
|
this.required = false;
|
|
145
145
|
this.showSelected = false;
|
|
146
|
+
this.noResultsMessage = "No results found";
|
|
146
147
|
}
|
|
147
148
|
/** Gets the validity state object */
|
|
148
149
|
get validity() {
|
|
@@ -173,11 +174,11 @@ let NileSelect = class NileSelect extends NileElement {
|
|
|
173
174
|
handleFocus() {
|
|
174
175
|
this.hasFocus = true;
|
|
175
176
|
this.displayInput.setSelectionRange(0, 0);
|
|
176
|
-
this.emit('nile-focus');
|
|
177
|
+
this.emit('nile-focus', { value: this.value, name: this.name });
|
|
177
178
|
}
|
|
178
179
|
handleBlur() {
|
|
179
180
|
this.hasFocus = false;
|
|
180
|
-
this.emit('nile-blur');
|
|
181
|
+
this.emit('nile-blur', { value: this.value, name: this.name });
|
|
181
182
|
}
|
|
182
183
|
handleDocumentFocusIn(event) {
|
|
183
184
|
// Close when focusing out of the select
|
|
@@ -228,6 +229,7 @@ let NileSelect = class NileSelect extends NileElement {
|
|
|
228
229
|
});
|
|
229
230
|
this.value = '';
|
|
230
231
|
this.selectionChanged();
|
|
232
|
+
this.emit('nile-change', { value: this.value, name: this.name });
|
|
231
233
|
}
|
|
232
234
|
handleDocumentKeyDown(event) {
|
|
233
235
|
const target = event.target;
|
|
@@ -265,8 +267,8 @@ let NileSelect = class NileSelect extends NileElement {
|
|
|
265
267
|
}
|
|
266
268
|
// Emit after updating
|
|
267
269
|
this.updateComplete.then(() => {
|
|
268
|
-
this.emit('nile-input');
|
|
269
|
-
this.emit('nile-change');
|
|
270
|
+
this.emit('nile-input', { value: this.value, name: this.name });
|
|
271
|
+
this.emit('nile-change', { value: this.value, name: this.name });
|
|
270
272
|
});
|
|
271
273
|
if (!this.multiple) {
|
|
272
274
|
this.hide();
|
|
@@ -374,9 +376,9 @@ let NileSelect = class NileSelect extends NileElement {
|
|
|
374
376
|
this.displayInput.focus({ preventScroll: true });
|
|
375
377
|
// Emit after update
|
|
376
378
|
this.updateComplete.then(() => {
|
|
377
|
-
this.emit('nile-clear');
|
|
378
|
-
this.emit('nile-input');
|
|
379
|
-
this.emit('nile-change');
|
|
379
|
+
this.emit('nile-clear', { value: this.value, name: this.name });
|
|
380
|
+
this.emit('nile-input', { value: this.value, name: this.name });
|
|
381
|
+
this.emit('nile-change', { value: this.value, name: this.name });
|
|
380
382
|
});
|
|
381
383
|
}
|
|
382
384
|
}
|
|
@@ -401,8 +403,8 @@ let NileSelect = class NileSelect extends NileElement {
|
|
|
401
403
|
if (this.value !== oldValue) {
|
|
402
404
|
// Emit after updating
|
|
403
405
|
this.updateComplete.then(() => {
|
|
404
|
-
this.emit('nile-input');
|
|
405
|
-
this.emit('nile-change');
|
|
406
|
+
this.emit('nile-input', { value: this.value, name: this.name });
|
|
407
|
+
this.emit('nile-change', { value: this.value, name: this.name });
|
|
406
408
|
});
|
|
407
409
|
}
|
|
408
410
|
if (!this.multiple) {
|
|
@@ -434,8 +436,8 @@ let NileSelect = class NileSelect extends NileElement {
|
|
|
434
436
|
this.toggleOptionSelection(option, false);
|
|
435
437
|
// Emit after updating
|
|
436
438
|
this.updateComplete.then(() => {
|
|
437
|
-
this.emit('nile-input');
|
|
438
|
-
this.emit('nile-change');
|
|
439
|
+
this.emit('nile-input', { value: this.value, name: this.name });
|
|
440
|
+
this.emit('nile-change', { value: this.value, name: this.name });
|
|
439
441
|
});
|
|
440
442
|
}
|
|
441
443
|
}
|
|
@@ -520,18 +522,31 @@ let NileSelect = class NileSelect extends NileElement {
|
|
|
520
522
|
}
|
|
521
523
|
handleSearchChange(e) {
|
|
522
524
|
this.searchValue = e.detail.value;
|
|
523
|
-
this.filterOptions(this.searchValue);
|
|
525
|
+
let filteredOptions = this.filterOptions(this.searchValue);
|
|
526
|
+
if (filteredOptions.length === 0) {
|
|
527
|
+
// Display 'No results found' message.
|
|
528
|
+
this.showNoResults = true;
|
|
529
|
+
}
|
|
530
|
+
else {
|
|
531
|
+
this.showNoResults = false;
|
|
532
|
+
}
|
|
524
533
|
}
|
|
525
534
|
filterOptions(searchValue) {
|
|
526
535
|
const allOptions = this.getAllOptions();
|
|
527
536
|
const lowerCaseSearchValue = searchValue.toLowerCase();
|
|
537
|
+
let filteredOptions = [];
|
|
528
538
|
allOptions.forEach(el => {
|
|
529
|
-
// Hide the option if its text and value do not include the search value.
|
|
530
539
|
const lowerCaseLabel = el.getTextLabel().toLowerCase();
|
|
531
540
|
const lowerCaseValue = (el.value || '').toLowerCase();
|
|
532
|
-
|
|
533
|
-
|
|
541
|
+
if (lowerCaseLabel.startsWith(lowerCaseSearchValue) || lowerCaseValue.startsWith(lowerCaseSearchValue)) {
|
|
542
|
+
el.hidden = false;
|
|
543
|
+
filteredOptions.push(el);
|
|
544
|
+
}
|
|
545
|
+
else {
|
|
546
|
+
el.hidden = true;
|
|
547
|
+
}
|
|
534
548
|
});
|
|
549
|
+
return filteredOptions;
|
|
535
550
|
}
|
|
536
551
|
handleInvalid(event) {
|
|
537
552
|
this.formControlController.setValidity(false);
|
|
@@ -555,7 +570,7 @@ let NileSelect = class NileSelect extends NileElement {
|
|
|
555
570
|
// Reset the current option
|
|
556
571
|
this.setCurrentOption(this.selectedOptions[0] || this.getFirstOption());
|
|
557
572
|
// Show
|
|
558
|
-
this.emit('nile-show');
|
|
573
|
+
this.emit('nile-show', { value: this.value, name: this.name });
|
|
559
574
|
this.addOpenListeners();
|
|
560
575
|
await stopAnimations(this);
|
|
561
576
|
this.listbox.hidden = false;
|
|
@@ -572,11 +587,11 @@ let NileSelect = class NileSelect extends NileElement {
|
|
|
572
587
|
if (this.currentOption) {
|
|
573
588
|
scrollIntoView(this.currentOption, this.listbox, 'vertical', 'auto');
|
|
574
589
|
}
|
|
575
|
-
this.emit('nile-after-show');
|
|
590
|
+
this.emit('nile-after-show', { value: this.value, name: this.name });
|
|
576
591
|
}
|
|
577
592
|
else {
|
|
578
593
|
// Hide
|
|
579
|
-
this.emit('nile-hide');
|
|
594
|
+
this.emit('nile-hide', { value: this.value, name: this.name });
|
|
580
595
|
this.removeOpenListeners();
|
|
581
596
|
await stopAnimations(this);
|
|
582
597
|
const { keyframes, options } = getAnimation(this, 'select.hide', {
|
|
@@ -585,7 +600,7 @@ let NileSelect = class NileSelect extends NileElement {
|
|
|
585
600
|
await animateTo(this.popup.popup, keyframes, options);
|
|
586
601
|
this.listbox.hidden = true;
|
|
587
602
|
this.popup.active = false;
|
|
588
|
-
this.emit('nile-after-hide');
|
|
603
|
+
this.emit('nile-after-hide', { value: this.value, name: this.name });
|
|
589
604
|
}
|
|
590
605
|
}
|
|
591
606
|
/** Shows the listbox. */
|
|
@@ -818,9 +833,7 @@ let NileSelect = class NileSelect extends NileElement {
|
|
|
818
833
|
@mouseup=${this.handleOptionClick}
|
|
819
834
|
@slotchange=${this.handleDefaultSlotChange}
|
|
820
835
|
>
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
${this.searchEnabled
|
|
836
|
+
${this.searchEnabled
|
|
824
837
|
? html ` <div class="select__search">
|
|
825
838
|
<nile-input
|
|
826
839
|
size="small"
|
|
@@ -835,6 +848,14 @@ let NileSelect = class NileSelect extends NileElement {
|
|
|
835
848
|
</nile-input>
|
|
836
849
|
</div>`
|
|
837
850
|
: ``}
|
|
851
|
+
<div class="select__options">
|
|
852
|
+
${this.showNoResults
|
|
853
|
+
? html ` <div class="select__no-results">${this.noResultsMessage} </div>
|
|
854
|
+
` : ''}
|
|
855
|
+
<slot></slot>
|
|
856
|
+
</div>
|
|
857
|
+
|
|
858
|
+
|
|
838
859
|
${this.multiple
|
|
839
860
|
? html ` <div
|
|
840
861
|
class="select__footer"
|
|
@@ -969,6 +990,12 @@ __decorate([
|
|
|
969
990
|
__decorate([
|
|
970
991
|
property({ type: Boolean })
|
|
971
992
|
], NileSelect.prototype, "showSelected", void 0);
|
|
993
|
+
__decorate([
|
|
994
|
+
state()
|
|
995
|
+
], NileSelect.prototype, "showNoResults", void 0);
|
|
996
|
+
__decorate([
|
|
997
|
+
property({ type: String })
|
|
998
|
+
], NileSelect.prototype, "noResultsMessage", void 0);
|
|
972
999
|
__decorate([
|
|
973
1000
|
watch('disabled', { waitUntilFirstUpdate: true })
|
|
974
1001
|
], NileSelect.prototype, "handleDisabledChange", null);
|