@aquera/nile-elements 0.0.3-3 → 0.0.3-5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-option/nile-option.css.js +11 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-option/nile-option.css.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-option/nile-option.d.ts +2 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-option/nile-option.js +23 -9
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-option/nile-option.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-select/nile-select.css.js +36 -8
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-select/nile-select.css.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-select/nile-select.d.ts +7 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-select/nile-select.js +74 -34
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-select/nile-select.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.iife.js +193 -157
- package/dist/nile-option/index.cjs.js +1 -1
- package/dist/nile-option/index.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.css.cjs.js +1 -1
- package/dist/nile-option/nile-option.css.cjs.js.map +1 -1
- package/dist/nile-option/nile-option.css.esm.js +11 -1
- package/dist/nile-option/nile-option.esm.js +6 -10
- package/dist/nile-select/index.cjs.js +1 -1
- package/dist/nile-select/index.esm.js +1 -1
- 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 +36 -8
- package/dist/nile-select/nile-select.esm.js +34 -31
- package/dist/src/nile-option/nile-option.css.js +11 -1
- package/dist/src/nile-option/nile-option.css.js.map +1 -1
- package/dist/src/nile-option/nile-option.d.ts +2 -0
- package/dist/src/nile-option/nile-option.js +23 -9
- package/dist/src/nile-option/nile-option.js.map +1 -1
- package/dist/src/nile-select/nile-select.css.js +36 -8
- package/dist/src/nile-select/nile-select.css.js.map +1 -1
- package/dist/src/nile-select/nile-select.d.ts +7 -0
- package/dist/src/nile-select/nile-select.js +74 -34
- 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-option/nile-option.css.ts +11 -1
- package/src/nile-option/nile-option.ts +22 -9
- package/src/nile-select/nile-select.css.ts +36 -8
- package/src/nile-select/nile-select.ts +77 -44
|
@@ -27,11 +27,15 @@ export const styles = css `
|
|
|
27
27
|
line-height: 1.8;
|
|
28
28
|
letter-spacing: normal;
|
|
29
29
|
color: hsl(240 5.3% 26.1%);
|
|
30
|
-
padding:
|
|
30
|
+
padding: 6px 0;
|
|
31
31
|
transition: 150ms fill;
|
|
32
32
|
cursor: pointer;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
+
.option--single-select {
|
|
36
|
+
padding: 9px 12px;
|
|
37
|
+
}
|
|
38
|
+
|
|
35
39
|
.option--hover:not(.option--current):not(.option--disabled) {
|
|
36
40
|
background-color: rgba(0, 94, 166, 0.1);
|
|
37
41
|
color: hsl(0, 0%, 0%);
|
|
@@ -84,6 +88,12 @@ export const styles = css `
|
|
|
84
88
|
margin-inline-start: 0.5rem;
|
|
85
89
|
}
|
|
86
90
|
|
|
91
|
+
.option--checkbox{
|
|
92
|
+
pointer-events: none;
|
|
93
|
+
margin-left: 12px;
|
|
94
|
+
margin-right: 12px;
|
|
95
|
+
}
|
|
96
|
+
|
|
87
97
|
@media (forced-colors: active) {
|
|
88
98
|
:host(:hover:not([aria-disabled='true'])) .option {
|
|
89
99
|
outline: dashed 1px SelectedItem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-option.css.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"nile-option.css.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4FxB,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 * Option_2 CSS\n */\nexport const styles = css`\n :host {\n display: block;\n user-select: none;\n }\n\n :host(:focus) {\n outline: none;\n }\n\n .option {\n position: relative;\n display: flex;\n align-items: center;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.8;\n letter-spacing: normal;\n color: hsl(240 5.3% 26.1%);\n padding: 6px 0;\n transition: 150ms fill;\n cursor: pointer;\n }\n\n .option--single-select {\n padding: 9px 12px;\n }\n\n .option--hover:not(.option--current):not(.option--disabled) {\n background-color: rgba(0, 94, 166, 0.1);\n color: hsl(0, 0%, 0%);\n }\n\n .option--current,\n .option--current.option--disabled {\n background-color: rgba(0, 94, 166, 0.1);\n color: #005ea6;\n opacity: 1;\n }\n\n .option--disabled {\n outline: none;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .option__label {\n flex: 1 1 auto;\n display: inline-block;\n line-height: 1.4;\n }\n\n .option .option__check {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n visibility: hidden;\n padding-inline-end: 0.25rem;\n }\n\n .option--selected .option__check {\n visibility: visible;\n }\n\n .option__prefix,\n .option__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .option__prefix::slotted(*) {\n margin-inline-end: 0.5rem;\n }\n\n .option__suffix::slotted(*) {\n margin-inline-start: 0.5rem;\n }\n\n .option--checkbox{\n pointer-events: none;\n margin-left: 12px;\n margin-right: 12px;\n }\n\n @media (forced-colors: active) {\n :host(:hover:not([aria-disabled='true'])) .option {\n outline: dashed 1px SelectedItem;\n outline-offset: -1px;\n }\n }\n`;\n\nexport default [styles];\n"]}
|
|
@@ -8,6 +8,7 @@ import { TemplateResult } from 'lit-element';
|
|
|
8
8
|
import '../nile-icon';
|
|
9
9
|
import type { CSSResultGroup } from 'lit';
|
|
10
10
|
import NileElement from '../internal/nile-element';
|
|
11
|
+
import '../nile-checkbox';
|
|
11
12
|
/**
|
|
12
13
|
* Nile icon component.
|
|
13
14
|
*
|
|
@@ -38,6 +39,7 @@ export declare class NileOption extends NileElement {
|
|
|
38
39
|
selected: boolean;
|
|
39
40
|
hasHover: boolean;
|
|
40
41
|
hidden: boolean;
|
|
42
|
+
isMultipleSelect: boolean;
|
|
41
43
|
/**
|
|
42
44
|
* The option's value. When selected, the containing form control will receive this value. The value must be unique
|
|
43
45
|
* from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing
|
|
@@ -12,6 +12,7 @@ import { customElement, property, query, state } from 'lit/decorators.js';
|
|
|
12
12
|
import { html } from 'lit';
|
|
13
13
|
import { watch } from '../internal/watch';
|
|
14
14
|
import NileElement from '../internal/nile-element';
|
|
15
|
+
import '../nile-checkbox';
|
|
15
16
|
/**
|
|
16
17
|
* Nile icon component.
|
|
17
18
|
*
|
|
@@ -41,6 +42,7 @@ let NileOption = class NileOption extends NileElement {
|
|
|
41
42
|
this.selected = false; // the option is selected and has aria-selected="true"
|
|
42
43
|
this.hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging
|
|
43
44
|
this.hidden = false; // the option is hidden
|
|
45
|
+
this.isMultipleSelect = false;
|
|
44
46
|
/**
|
|
45
47
|
* The option's value. When selected, the containing form control will receive this value. The value must be unique
|
|
46
48
|
* from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing
|
|
@@ -54,6 +56,18 @@ let NileOption = class NileOption extends NileElement {
|
|
|
54
56
|
super.connectedCallback();
|
|
55
57
|
this.setAttribute('role', 'option');
|
|
56
58
|
this.setAttribute('aria-selected', 'false');
|
|
59
|
+
// Find the closest parent 'nile-select' element
|
|
60
|
+
const parentSelect = this.closest('nile-select');
|
|
61
|
+
// Check if the parent has the 'multiple' attribute
|
|
62
|
+
if (parentSelect && parentSelect.hasAttribute('multiple')) {
|
|
63
|
+
let multipleValue = parentSelect.getAttribute('multiple');
|
|
64
|
+
if (multipleValue !== 'false') {
|
|
65
|
+
if (multipleValue === '') {
|
|
66
|
+
multipleValue = 'true';
|
|
67
|
+
}
|
|
68
|
+
this.isMultipleSelect = Boolean(multipleValue);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
57
71
|
}
|
|
58
72
|
handleDefaultSlotChange() {
|
|
59
73
|
const textLabel = this.getTextLabel();
|
|
@@ -109,21 +123,18 @@ let NileOption = class NileOption extends NileElement {
|
|
|
109
123
|
part="base"
|
|
110
124
|
class=${classMap({
|
|
111
125
|
option: true,
|
|
112
|
-
'option--
|
|
126
|
+
'option--single-select': !this.isMultipleSelect,
|
|
127
|
+
'option--current': this.selected && !this.isMultipleSelect,
|
|
113
128
|
'option--disabled': this.disabled,
|
|
114
|
-
'option--selected': this.selected,
|
|
129
|
+
'option--selected': this.selected && !this.isMultipleSelect,
|
|
115
130
|
'option--hover': this.hasHover,
|
|
116
131
|
})}
|
|
117
132
|
@mouseenter=${this.handleMouseEnter}
|
|
118
133
|
@mouseleave=${this.handleMouseLeave}
|
|
119
134
|
>
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
name="tick"
|
|
124
|
-
color=${this.current ? '#005EA6' : ''}
|
|
125
|
-
aria-hidden="true"
|
|
126
|
-
></nile-icon>
|
|
135
|
+
|
|
136
|
+
${this.isMultipleSelect ? html `<nile-checkbox class="option--checkbox" .checked=${this.selected}></nile-checkbox>` : ''}
|
|
137
|
+
|
|
127
138
|
<slot part="prefix" name="prefix" class="option__prefix"></slot>
|
|
128
139
|
<slot
|
|
129
140
|
part="label"
|
|
@@ -152,6 +163,9 @@ __decorate([
|
|
|
152
163
|
__decorate([
|
|
153
164
|
state()
|
|
154
165
|
], NileOption.prototype, "hidden", void 0);
|
|
166
|
+
__decorate([
|
|
167
|
+
state()
|
|
168
|
+
], NileOption.prototype, "isMultipleSelect", void 0);
|
|
155
169
|
__decorate([
|
|
156
170
|
property({ reflect: true })
|
|
157
171
|
], NileOption.prototype, "value", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-option.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAGH,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,OAAO,WAAW,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"nile-option.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.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 { LitElement, CSSResultArray, TemplateResult } from 'lit-element';\nimport { styles } from './nile-option.css';\nimport '../nile-icon';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { html } from 'lit';\nimport { watch } from '../internal/watch';\nimport type { CSSResultGroup } from 'lit';\nimport NileElement from '../internal/nile-element';\nimport '../nile-checkbox';\n\n/**\n * Nile icon component.\n *\n * @tag nile-option\n *\n */\n\n/**\n * @summary Options define the selectable items within various form controls such as [select](/components/select).\n * @status stable\n *\n * @dependency nile-icon\n *\n * @slot - The option's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @csspart checked-icon - The checked icon, an `<nile-icon>` element.\n * @csspart base - The component's base wrapper.\n * @csspart label - The option's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n */\n\n@customElement('nile-option')\nexport class NileOption extends NileElement {\n static styles: CSSResultGroup = styles;\n\n private cachedTextLabel: string;\n\n @query('.option__label') defaultSlot: HTMLSlotElement;\n\n @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)\n @state() selected = false; // the option is selected and has aria-selected=\"true\"\n @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging\n @state() hidden = false; // the option is hidden\n @state() isMultipleSelect = false;\n\n /**\n * The option's value. When selected, the containing form control will receive this value. The value must be unique\n * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\n * multiple values.\n */\n @property({ reflect: true }) value = '';\n\n /** Draws the option in a disabled state, preventing selection. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'option');\n this.setAttribute('aria-selected', 'false');\n\n // Find the closest parent 'nile-select' element\n const parentSelect = this.closest('nile-select');\n\n // Check if the parent has the 'multiple' attribute\n if (parentSelect && parentSelect.hasAttribute('multiple')) {\n let multipleValue = parentSelect.getAttribute('multiple');\n if (multipleValue !== 'false') {\n if(multipleValue === ''){\n multipleValue = 'true';\n }\n this.isMultipleSelect = Boolean(multipleValue);\n }\n }\n }\n\n private handleDefaultSlotChange() {\n const textLabel = this.getTextLabel();\n\n // Ignore the first time the label is set\n if (typeof this.cachedTextLabel === 'undefined') {\n this.cachedTextLabel = textLabel;\n return;\n }\n\n // When the label changes, emit a slotchange event so parent controls see it\n if (textLabel !== this.cachedTextLabel) {\n this.cachedTextLabel = textLabel;\n this.emit('slotchange', {\n bubbles: true,\n composed: false,\n cancelable: false,\n });\n }\n }\n\n private handleMouseEnter() {\n this.hasHover = true;\n }\n\n private handleMouseLeave() {\n this.hasHover = false;\n }\n\n @watch('disabled')\n handleDisabledChange() {\n this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n }\n\n @watch('selected')\n handleSelectedChange() {\n this.setAttribute('aria-selected', this.selected ? 'true' : 'false');\n }\n\n @watch('value')\n handleValueChange() {\n // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers\n // instead of requiring them to cast the value to a string.\n if (typeof this.value !== 'string') {\n this.value = String(this.value);\n }\n\n // if (this.value.includes(' ')) {\n // console.error(\n // `Option values cannot include a space. All spaces have been replaced with underscores.`,\n // this\n // );\n // this.value = this.value.replace(/ /g, '_');\n // }\n }\n\n /** Returns a plain text label based on the option's content. */\n getTextLabel() {\n return (this.textContent ?? '').trim();\n }\n\n render() {\n return html`\n ${!this.hidden\n ? html` <div\n part=\"base\"\n class=${classMap({\n option: true,\n 'option--single-select': !this.isMultipleSelect,\n 'option--current': this.selected && !this.isMultipleSelect,\n 'option--disabled': this.disabled,\n 'option--selected': this.selected && !this.isMultipleSelect,\n 'option--hover': this.hasHover,\n })}\n @mouseenter=${this.handleMouseEnter}\n @mouseleave=${this.handleMouseLeave}\n >\n\n ${this.isMultipleSelect ? html`<nile-checkbox class=\"option--checkbox\" .checked=${this.selected}></nile-checkbox>` : ''}\n\n <slot part=\"prefix\" name=\"prefix\" class=\"option__prefix\"></slot>\n <slot\n part=\"label\"\n class=\"option__label\"\n @slotchange=${this.handleDefaultSlotChange}\n ></slot>\n <slot part=\"suffix\" name=\"suffix\" class=\"option__suffix\"></slot>\n </div>`\n : ''}\n `;\n }\n}\n\nexport default NileOption;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-option': NileOption;\n }\n}\n"]}
|
|
@@ -177,11 +177,14 @@ export const styles = css `
|
|
|
177
177
|
}
|
|
178
178
|
|
|
179
179
|
.select__tags-count {
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
180
|
+
color: #005ea6;
|
|
181
|
+
font-family: Colfax-regular;
|
|
182
|
+
font-size: 14px;
|
|
183
|
+
font-style: normal;
|
|
184
|
+
font-weight: 400;
|
|
185
|
+
line-height: 14px;
|
|
186
|
+
letter-spacing: 0.2px;
|
|
187
|
+
margin: 6px;
|
|
185
188
|
}
|
|
186
189
|
|
|
187
190
|
.select__tags-count-clearable {
|
|
@@ -203,6 +206,11 @@ export const styles = css `
|
|
|
203
206
|
border: solid 1px #cccccc;
|
|
204
207
|
}
|
|
205
208
|
|
|
209
|
+
.select--standard .select__combobox:hover {
|
|
210
|
+
border: 1px solid #000;
|
|
211
|
+
background: #fff;
|
|
212
|
+
}
|
|
213
|
+
|
|
206
214
|
.select--standard.select--disabled .select__combobox {
|
|
207
215
|
background-color: #f4f4f4;
|
|
208
216
|
border-color: #cccccc;
|
|
@@ -216,7 +224,18 @@ export const styles = css `
|
|
|
216
224
|
.select--standard:not(.select--disabled).select--focused .select__combobox {
|
|
217
225
|
background-color: #f4f4f4;
|
|
218
226
|
border-color: #0059ff;
|
|
219
|
-
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.select--warning .select__combobox {
|
|
230
|
+
border-color: var(--nile-colors-yellow-500);
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.select--error .select__combobox {
|
|
234
|
+
border-color: #e5434d;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.select--success {
|
|
238
|
+
border-color: #43e5c0;
|
|
220
239
|
}
|
|
221
240
|
|
|
222
241
|
/* Filled selects */
|
|
@@ -326,7 +345,6 @@ export const styles = css `
|
|
|
326
345
|
position: relative;
|
|
327
346
|
font-size: 1rem;
|
|
328
347
|
font-weight: 400;
|
|
329
|
-
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
|
|
330
348
|
background: #ffffff;
|
|
331
349
|
border: solid 1px #cccccc;
|
|
332
350
|
border-radius: 0.25rem;
|
|
@@ -381,10 +399,20 @@ export const styles = css `
|
|
|
381
399
|
display: flex;
|
|
382
400
|
flex-direction: row;
|
|
383
401
|
align-items: flex-start;
|
|
384
|
-
padding: 8px
|
|
402
|
+
padding: 8px 12px 16px;
|
|
385
403
|
gap: 12px;
|
|
386
404
|
justify-content: space-between;
|
|
387
405
|
}
|
|
406
|
+
|
|
407
|
+
.tag__prefix[slot='prefix'] {
|
|
408
|
+
height: 14px;
|
|
409
|
+
display: inline-block;
|
|
410
|
+
overflow: hidden;
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
.tag__prefix[slot='prefix'] img {
|
|
414
|
+
max-height: 100%;
|
|
415
|
+
}
|
|
388
416
|
`;
|
|
389
417
|
export default [styles];
|
|
390
418
|
//# sourceMappingURL=nile-select.css.js.map
|
|
@@ -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
|
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqZxB,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 margin-bottom: 12px;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: 14px;\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--medium .form-control__help-text {\n font-size: 0.875rem;\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 font-family: var(--nile-font-family-serif);\n }\n\n .select__display-input::placeholder {\n font-family: var(--nile-font-family-serif);\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 color: #005ea6;\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n margin: 6px;\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__combobox:hover {\n border: 1px solid #000;\n background: #fff;\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 }\n\n .select--warning .select__combobox {\n border-color: var(--nile-colors-yellow-500);\n }\n\n .select--error .select__combobox {\n border-color: #e5434d;\n }\n\n .select--success {\n border-color: #43e5c0;\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 .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 }\n\n .select--medium .select__prefix.multiple::slotted(*) {\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 /* Pills */\n .select--pill.select--medium .select__combobox {\n border-radius: 2.5rem;\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 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 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 margin-bottom: -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: 8px 12px 16px;\n gap: 12px;\n justify-content: space-between;\n }\n\n .tag__prefix[slot='prefix'] {\n height: 14px;\n display: inline-block;\n overflow: hidden;\n }\n\n .tag__prefix[slot='prefix'] img {\n max-height: 100%;\n }\n`;\n\nexport default [styles];\n"]}
|
|
@@ -99,6 +99,12 @@ export declare class NileSelect extends NileElement implements NileFormControl {
|
|
|
99
99
|
multiple: boolean;
|
|
100
100
|
helpText: string;
|
|
101
101
|
errorMessage: string;
|
|
102
|
+
/** Sets the input to a warning state, changing its visual appearance. */
|
|
103
|
+
warning: boolean;
|
|
104
|
+
/** Sets the input to an error state, changing its visual appearance. */
|
|
105
|
+
error: boolean;
|
|
106
|
+
/** Sets the input to a success state, changing its visual appearance. */
|
|
107
|
+
success: boolean;
|
|
102
108
|
/**
|
|
103
109
|
* The maximum number of selected options to show when `multiple` is true. After the maximum, "+n" will be shown to
|
|
104
110
|
* indicate the number of additional items that are selected. Set to 0 to remove the limit.
|
|
@@ -175,6 +181,7 @@ export declare class NileSelect extends NileElement implements NileFormControl {
|
|
|
175
181
|
private handleDefaultSlotChange;
|
|
176
182
|
private handleTagRemove;
|
|
177
183
|
private getAllOptions;
|
|
184
|
+
private getOptionPrefix;
|
|
178
185
|
private getFirstOption;
|
|
179
186
|
private setCurrentOption;
|
|
180
187
|
private setSelectedOptions;
|
|
@@ -22,6 +22,7 @@ import { scrollIntoView } from '../internal/scroll';
|
|
|
22
22
|
import { waitForEvent } from '../internal/event';
|
|
23
23
|
import { watch } from '../internal/watch';
|
|
24
24
|
import NileElement from '../internal/nile-element';
|
|
25
|
+
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
|
25
26
|
/**
|
|
26
27
|
* Nile icon component.
|
|
27
28
|
*
|
|
@@ -95,7 +96,7 @@ let NileSelect = class NileSelect extends NileElement {
|
|
|
95
96
|
/** The select's size. */
|
|
96
97
|
this.size = 'medium';
|
|
97
98
|
/** Placeholder text to show as a hint when the select is empty. */
|
|
98
|
-
this.placeholder = '';
|
|
99
|
+
this.placeholder = 'Select...';
|
|
99
100
|
/** Placeholder text to show as a hint when the select is empty. */
|
|
100
101
|
this.searchValue = '';
|
|
101
102
|
/** Allows more than one option to be selected. */
|
|
@@ -104,6 +105,12 @@ let NileSelect = class NileSelect extends NileElement {
|
|
|
104
105
|
this.multiple = false;
|
|
105
106
|
this.helpText = '';
|
|
106
107
|
this.errorMessage = '';
|
|
108
|
+
/** Sets the input to a warning state, changing its visual appearance. */
|
|
109
|
+
this.warning = false;
|
|
110
|
+
/** Sets the input to an error state, changing its visual appearance. */
|
|
111
|
+
this.error = false;
|
|
112
|
+
/** Sets the input to a success state, changing its visual appearance. */
|
|
113
|
+
this.success = false;
|
|
107
114
|
/**
|
|
108
115
|
* The maximum number of selected options to show when `multiple` is true. After the maximum, "+n" will be shown to
|
|
109
116
|
* indicate the number of additional items that are selected. Set to 0 to remove the limit.
|
|
@@ -445,6 +452,23 @@ let NileSelect = class NileSelect extends NileElement {
|
|
|
445
452
|
getAllOptions() {
|
|
446
453
|
return [...this.querySelectorAll('nile-option')];
|
|
447
454
|
}
|
|
455
|
+
getOptionPrefix(option) {
|
|
456
|
+
const prefixSlot = option.shadowRoot?.querySelector('slot[name="prefix"]');
|
|
457
|
+
if (!prefixSlot)
|
|
458
|
+
return '';
|
|
459
|
+
const assignedNodes = prefixSlot.assignedNodes();
|
|
460
|
+
const htmlStrings = [];
|
|
461
|
+
assignedNodes.forEach(node => {
|
|
462
|
+
if (node instanceof HTMLElement) {
|
|
463
|
+
htmlStrings.push(node.outerHTML);
|
|
464
|
+
}
|
|
465
|
+
else if (node.nodeType === Node.TEXT_NODE) {
|
|
466
|
+
// Text node
|
|
467
|
+
htmlStrings.push(node.textContent || '');
|
|
468
|
+
}
|
|
469
|
+
});
|
|
470
|
+
return htmlStrings.join('');
|
|
471
|
+
}
|
|
448
472
|
// Gets the first <nile-option> element
|
|
449
473
|
getFirstOption() {
|
|
450
474
|
return this.querySelector('nile-option');
|
|
@@ -681,6 +705,9 @@ let NileSelect = class NileSelect extends NileElement {
|
|
|
681
705
|
<nile-popup
|
|
682
706
|
class=${classMap({
|
|
683
707
|
select: true,
|
|
708
|
+
'select--warning': this.warning,
|
|
709
|
+
'select--error': this.error,
|
|
710
|
+
'select--success': this.success,
|
|
684
711
|
'select--standard': true,
|
|
685
712
|
'select--filled': this.filled,
|
|
686
713
|
'select--pill': this.pill,
|
|
@@ -710,10 +737,14 @@ let NileSelect = class NileSelect extends NileElement {
|
|
|
710
737
|
@keydown=${this.handleComboboxKeyDown}
|
|
711
738
|
@mousedown=${this.handleComboboxMouseDown}
|
|
712
739
|
>
|
|
713
|
-
<slot
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
740
|
+
<slot
|
|
741
|
+
part="prefix"
|
|
742
|
+
name="prefix"
|
|
743
|
+
class=${classMap({
|
|
744
|
+
select__prefix: true,
|
|
745
|
+
multiple: this.multiple,
|
|
746
|
+
})}
|
|
747
|
+
></slot>
|
|
717
748
|
|
|
718
749
|
<input
|
|
719
750
|
part="display-input"
|
|
@@ -748,30 +779,31 @@ let NileSelect = class NileSelect extends NileElement {
|
|
|
748
779
|
<nile-tag
|
|
749
780
|
part="tag"
|
|
750
781
|
exportparts="
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
782
|
+
base:tag__base,
|
|
783
|
+
content:tag__content,
|
|
784
|
+
remove-button:tag__remove-button,
|
|
785
|
+
remove-button__base:tag__remove-button__base
|
|
786
|
+
"
|
|
756
787
|
?pill=${this.pill}
|
|
757
788
|
size=${this.size}
|
|
758
789
|
removable
|
|
759
790
|
@nile-remove=${(event) => this.handleTagRemove(event, option)}
|
|
760
791
|
>
|
|
792
|
+
${this.getOptionPrefix(option)
|
|
793
|
+
? html `<span class="tag__prefix" slot="prefix"
|
|
794
|
+
>${unsafeHTML(this.getOptionPrefix(option))}</span
|
|
795
|
+
>`
|
|
796
|
+
: ''}
|
|
761
797
|
${option.getTextLabel()}
|
|
762
798
|
</nile-tag>
|
|
763
799
|
`;
|
|
764
800
|
}
|
|
765
801
|
else if (index === this.maxOptionsVisible) {
|
|
766
802
|
return html `
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
size=${this.size}
|
|
772
|
-
>
|
|
773
|
-
+${this.selectedOptions.length - index}
|
|
774
|
-
</nile-tag>
|
|
803
|
+
|
|
804
|
+
|
|
805
|
+
<span class="select__tags-count">+${this.selectedOptions.length - index} More </span>
|
|
806
|
+
|
|
775
807
|
`;
|
|
776
808
|
}
|
|
777
809
|
else {
|
|
@@ -837,7 +869,7 @@ let NileSelect = class NileSelect extends NileElement {
|
|
|
837
869
|
@mouseup=${this.handleOptionClick}
|
|
838
870
|
@slotchange=${this.handleDefaultSlotChange}
|
|
839
871
|
>
|
|
840
|
-
|
|
872
|
+
${this.searchEnabled
|
|
841
873
|
? html ` <div class="select__search">
|
|
842
874
|
<nile-input
|
|
843
875
|
size="small"
|
|
@@ -852,13 +884,16 @@ let NileSelect = class NileSelect extends NileElement {
|
|
|
852
884
|
</nile-input>
|
|
853
885
|
</div>`
|
|
854
886
|
: ``}
|
|
855
|
-
|
|
887
|
+
<div class="select__options">
|
|
856
888
|
${this.showNoResults
|
|
857
|
-
? html `
|
|
858
|
-
|
|
889
|
+
? html `
|
|
890
|
+
<div class="select__no-results">
|
|
891
|
+
${this.noResultsMessage}
|
|
892
|
+
</div>
|
|
893
|
+
`
|
|
894
|
+
: ''}
|
|
859
895
|
<slot></slot>
|
|
860
|
-
|
|
861
|
-
|
|
896
|
+
</div>
|
|
862
897
|
|
|
863
898
|
${this.multiple
|
|
864
899
|
? html ` <div
|
|
@@ -873,7 +908,7 @@ let NileSelect = class NileSelect extends NileElement {
|
|
|
873
908
|
?disabled="${this.selectedOptions.length === 0}"
|
|
874
909
|
?checked="${this.showSelected}"
|
|
875
910
|
>
|
|
876
|
-
|
|
911
|
+
Show Selected</nile-checkbox
|
|
877
912
|
>
|
|
878
913
|
</span>
|
|
879
914
|
<span class="select__clear" @click="${this.unSlectAll}"
|
|
@@ -886,19 +921,15 @@ let NileSelect = class NileSelect extends NileElement {
|
|
|
886
921
|
</div>
|
|
887
922
|
|
|
888
923
|
${hasHelpText
|
|
889
|
-
? html `
|
|
890
|
-
<nile-form-help-text>${this.helpText}</nile-form-help-text>
|
|
891
|
-
`
|
|
924
|
+
? html ` <nile-form-help-text>${this.helpText}</nile-form-help-text> `
|
|
892
925
|
: ``}
|
|
893
|
-
|
|
894
926
|
${hasErrorMessage
|
|
895
927
|
? html `
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
928
|
+
<nile-form-error-message
|
|
929
|
+
>${this.errorMessage}</nile-form-error-message
|
|
930
|
+
>
|
|
931
|
+
`
|
|
900
932
|
: ``}
|
|
901
|
-
|
|
902
933
|
</div>
|
|
903
934
|
`;
|
|
904
935
|
}
|
|
@@ -966,6 +997,15 @@ __decorate([
|
|
|
966
997
|
__decorate([
|
|
967
998
|
property({ attribute: 'error-message' })
|
|
968
999
|
], NileSelect.prototype, "errorMessage", void 0);
|
|
1000
|
+
__decorate([
|
|
1001
|
+
property({ type: Boolean })
|
|
1002
|
+
], NileSelect.prototype, "warning", void 0);
|
|
1003
|
+
__decorate([
|
|
1004
|
+
property({ type: Boolean })
|
|
1005
|
+
], NileSelect.prototype, "error", void 0);
|
|
1006
|
+
__decorate([
|
|
1007
|
+
property({ type: Boolean })
|
|
1008
|
+
], NileSelect.prototype, "success", void 0);
|
|
969
1009
|
__decorate([
|
|
970
1010
|
property({ attribute: 'max-options-visible', type: Number })
|
|
971
1011
|
], NileSelect.prototype, "maxOptionsVisible", void 0);
|