@ni/nimble-components 19.1.1 → 19.1.2
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/dist/all-components-bundle.js +229 -186
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +900 -892
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/combobox/index.d.ts +13 -0
- package/dist/esm/combobox/index.js +26 -1
- package/dist/esm/combobox/index.js.map +1 -1
- package/dist/esm/combobox/template.d.ts +4 -0
- package/dist/esm/combobox/template.js +76 -0
- package/dist/esm/combobox/template.js.map +1 -0
- package/dist/esm/patterns/dropdown/styles.js +9 -23
- package/dist/esm/patterns/dropdown/styles.js.map +1 -1
- package/dist/esm/select/index.d.ts +7 -1
- package/dist/esm/select/index.js +16 -2
- package/dist/esm/select/index.js.map +1 -1
- package/dist/esm/select/template.d.ts +4 -0
- package/dist/esm/select/template.js +82 -0
- package/dist/esm/select/template.js.map +1 -0
- package/package.json +1 -1
|
@@ -3,6 +3,7 @@ import { ToggleButton } from '../toggle-button';
|
|
|
3
3
|
import type { ErrorPattern } from '../patterns/error/types';
|
|
4
4
|
import type { DropdownPattern } from '../patterns/dropdown/types';
|
|
5
5
|
import { DropdownAppearance } from '../patterns/dropdown/types';
|
|
6
|
+
import type { AnchoredRegion } from '../anchored-region';
|
|
6
7
|
declare global {
|
|
7
8
|
interface HTMLElementTagNameMap {
|
|
8
9
|
'nimble-combobox': Combobox;
|
|
@@ -28,6 +29,14 @@ export declare class Combobox extends FoundationCombobox implements DropdownPatt
|
|
|
28
29
|
*/
|
|
29
30
|
errorText?: string;
|
|
30
31
|
errorVisible: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* @internal
|
|
34
|
+
*/
|
|
35
|
+
region?: AnchoredRegion;
|
|
36
|
+
/**
|
|
37
|
+
* @internal
|
|
38
|
+
*/
|
|
39
|
+
controlWrapper?: HTMLElement;
|
|
31
40
|
private valueUpdatedByInput;
|
|
32
41
|
private valueBeforeTextUpdate?;
|
|
33
42
|
setPositioning(): void;
|
|
@@ -47,7 +56,11 @@ export declare class Combobox extends FoundationCombobox implements DropdownPatt
|
|
|
47
56
|
keydownHandler(e: KeyboardEvent): boolean | void;
|
|
48
57
|
focusoutHandler(e: FocusEvent): boolean | void;
|
|
49
58
|
protected openChanged(): void;
|
|
59
|
+
private regionChanged;
|
|
60
|
+
private controlWrapperChanged;
|
|
50
61
|
private ariaLabelChanged;
|
|
62
|
+
private maxHeightChanged;
|
|
63
|
+
private updateListboxMaxHeightCssVariable;
|
|
51
64
|
private updateInputAriaLabel;
|
|
52
65
|
/**
|
|
53
66
|
* This will only emit a `change` event after text entry where the text in the input prior to
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { attr, html, observable, ref } from '@microsoft/fast-element';
|
|
3
|
-
import { DesignSystem, Combobox as FoundationCombobox
|
|
3
|
+
import { DesignSystem, Combobox as FoundationCombobox } from '@microsoft/fast-foundation';
|
|
4
4
|
import { keyArrowDown, keyArrowUp, keyEnter, keySpace } from '@microsoft/fast-web-utilities';
|
|
5
5
|
import { toggleButtonTag } from '../toggle-button';
|
|
6
6
|
import { errorTextTemplate } from '../patterns/error/template';
|
|
@@ -8,6 +8,7 @@ import { iconArrowExpanderDownTag } from '../icons/arrow-expander-down';
|
|
|
8
8
|
import { iconExclamationMarkTag } from '../icons/exclamation-mark';
|
|
9
9
|
import { styles } from './styles';
|
|
10
10
|
import { DropdownAppearance } from '../patterns/dropdown/types';
|
|
11
|
+
import { template } from './template';
|
|
11
12
|
/**
|
|
12
13
|
* A nimble-styed HTML combobox
|
|
13
14
|
*/
|
|
@@ -116,10 +117,28 @@ export class Combobox extends FoundationCombobox {
|
|
|
116
117
|
this.dropdownButton.checked = this.open;
|
|
117
118
|
}
|
|
118
119
|
}
|
|
120
|
+
regionChanged(_prev, _next) {
|
|
121
|
+
if (this.region && this.controlWrapper) {
|
|
122
|
+
this.region.anchorElement = this.controlWrapper;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
controlWrapperChanged(_prev, _next) {
|
|
126
|
+
if (this.region && this.controlWrapper) {
|
|
127
|
+
this.region.anchorElement = this.controlWrapper;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
119
130
|
// Workaround for https://github.com/microsoft/fast/issues/6041.
|
|
120
131
|
ariaLabelChanged(_oldValue, _newValue) {
|
|
121
132
|
this.updateInputAriaLabel();
|
|
122
133
|
}
|
|
134
|
+
maxHeightChanged() {
|
|
135
|
+
this.updateListboxMaxHeightCssVariable();
|
|
136
|
+
}
|
|
137
|
+
updateListboxMaxHeightCssVariable() {
|
|
138
|
+
if (this.listbox) {
|
|
139
|
+
this.listbox.style.setProperty('--ni-private-select-max-height', `${this.maxHeight}px`);
|
|
140
|
+
}
|
|
141
|
+
}
|
|
123
142
|
updateInputAriaLabel() {
|
|
124
143
|
const inputElement = this.shadowRoot?.querySelector('.selected-value');
|
|
125
144
|
if (this.ariaLabel) {
|
|
@@ -160,6 +179,12 @@ __decorate([
|
|
|
160
179
|
__decorate([
|
|
161
180
|
attr({ attribute: 'error-visible', mode: 'boolean' })
|
|
162
181
|
], Combobox.prototype, "errorVisible", void 0);
|
|
182
|
+
__decorate([
|
|
183
|
+
observable
|
|
184
|
+
], Combobox.prototype, "region", void 0);
|
|
185
|
+
__decorate([
|
|
186
|
+
observable
|
|
187
|
+
], Combobox.prototype, "controlWrapper", void 0);
|
|
163
188
|
const nimbleCombobox = Combobox.compose({
|
|
164
189
|
baseName: 'combobox',
|
|
165
190
|
baseClass: FoundationCombobox,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/combobox/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,EACH,YAAY,EACZ,QAAQ,IAAI,kBAAkB,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/combobox/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { type ViewTemplate } from '@microsoft/fast-element';
|
|
2
|
+
import { type FoundationElementTemplate, type ComboboxOptions } from '@microsoft/fast-foundation';
|
|
3
|
+
import type { Combobox } from '.';
|
|
4
|
+
export declare const template: FoundationElementTemplate<ViewTemplate<Combobox>, ComboboxOptions>;
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import { html, ref, slotted } from '@microsoft/fast-element';
|
|
2
|
+
import { startSlotTemplate, endSlotTemplate, Listbox } from '@microsoft/fast-foundation';
|
|
3
|
+
import { anchoredRegionTag } from '../anchored-region';
|
|
4
|
+
import { DropdownPosition } from '../patterns/dropdown/types';
|
|
5
|
+
// prettier-ignore
|
|
6
|
+
export const template = (context, definition) => html `
|
|
7
|
+
<template
|
|
8
|
+
aria-disabled="${x => x.ariaDisabled}"
|
|
9
|
+
autocomplete="${x => x.autocomplete}"
|
|
10
|
+
class="${x => (x.open ? 'open' : '')} ${x => (x.disabled ? 'disabled' : '')} ${x => x.position}"
|
|
11
|
+
?open="${x => x.open}"
|
|
12
|
+
tabindex="${x => (!x.disabled ? '0' : null)}"
|
|
13
|
+
@click="${(x, c) => x.clickHandler(c.event)}"
|
|
14
|
+
@focusout="${(x, c) => x.focusoutHandler(c.event)}"
|
|
15
|
+
@keydown="${(x, c) => x.keydownHandler(c.event)}"
|
|
16
|
+
>
|
|
17
|
+
<div class="control" part="control" ${ref('controlWrapper')}>
|
|
18
|
+
${startSlotTemplate(context, definition)}
|
|
19
|
+
<slot name="control">
|
|
20
|
+
<input
|
|
21
|
+
aria-activedescendant="${x => (x.open ? x.ariaActiveDescendant : null)}"
|
|
22
|
+
aria-autocomplete="${x => x.ariaAutoComplete}"
|
|
23
|
+
aria-controls="${x => x.ariaControls}"
|
|
24
|
+
aria-disabled="${x => x.ariaDisabled}"
|
|
25
|
+
aria-expanded="${x => x.ariaExpanded}"
|
|
26
|
+
aria-haspopup="listbox"
|
|
27
|
+
class="selected-value"
|
|
28
|
+
part="selected-value"
|
|
29
|
+
placeholder="${x => x.placeholder}"
|
|
30
|
+
role="combobox"
|
|
31
|
+
type="text"
|
|
32
|
+
?disabled="${x => x.disabled}"
|
|
33
|
+
:value="${x => x.value}"
|
|
34
|
+
@input="${(x, c) => x.inputHandler(c.event)}"
|
|
35
|
+
@keyup="${(x, c) => x.keyupHandler(c.event)}"
|
|
36
|
+
${ref('control')}
|
|
37
|
+
/>
|
|
38
|
+
<div class="indicator" part="indicator" aria-hidden="true">
|
|
39
|
+
<slot name="indicator">
|
|
40
|
+
${definition.indicator || ''}
|
|
41
|
+
</slot>
|
|
42
|
+
</div>
|
|
43
|
+
</slot>
|
|
44
|
+
${endSlotTemplate(context, definition)}
|
|
45
|
+
</div>
|
|
46
|
+
<${anchoredRegionTag}
|
|
47
|
+
${ref('region')}
|
|
48
|
+
class="anchored-region"
|
|
49
|
+
fixed-placement
|
|
50
|
+
auto-update-mode="auto"
|
|
51
|
+
vertical-default-position="${x => (x.positionAttribute === DropdownPosition.above ? 'top' : 'bottom')}"
|
|
52
|
+
vertical-positioning-mode="${x => (!x.positionAttribute ? 'dynamic' : 'locktodefault')}"
|
|
53
|
+
horizontal-default-position="center"
|
|
54
|
+
horizontal-positioning-mode="locktodefault"
|
|
55
|
+
horizontal-scaling="anchor"
|
|
56
|
+
?hidden="${x => !x.open}">
|
|
57
|
+
<div
|
|
58
|
+
class="listbox"
|
|
59
|
+
id="${x => x.listboxId}"
|
|
60
|
+
part="listbox"
|
|
61
|
+
role="listbox"
|
|
62
|
+
?disabled="${x => x.disabled}"
|
|
63
|
+
${ref('listbox')}
|
|
64
|
+
>
|
|
65
|
+
<slot
|
|
66
|
+
${slotted({
|
|
67
|
+
filter: (n) => n instanceof HTMLElement && Listbox.slottedOptionFilter(n),
|
|
68
|
+
flatten: true,
|
|
69
|
+
property: 'slottedOptions',
|
|
70
|
+
})}
|
|
71
|
+
></slot>
|
|
72
|
+
</div>
|
|
73
|
+
</${anchoredRegionTag}>
|
|
74
|
+
</template>
|
|
75
|
+
`;
|
|
76
|
+
//# sourceMappingURL=template.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/combobox/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAChF,OAAO,EAGH,iBAAiB,EACjB,eAAe,EACf,OAAO,EACV,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAE9D,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAGjB,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,IAAI,CAAA;;yBAER,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;wBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;iBAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;iBACrF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;oBACR,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;kBACjC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;qBAC5C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAmB,CAAC;oBACnD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;;8CAE1B,GAAG,CAAC,gBAAgB,CAAC;cACrD,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC;;;6CAGP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAC;yCACjD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;qCAC3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;qCACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;qCACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;;;;mCAIrB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;;;iCAGpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;8BAClB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;8BACZ,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;8BAC/C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAsB,CAAC;sBAC1D,GAAG,CAAC,SAAS,CAAC;;;;0BAIV,UAAU,CAAC,SAAS,IAAI,EAAE;;;;cAItC,eAAe,CAAC,OAAO,EAAE,UAAU,CAAC;;WAEvC,iBAAiB;cACd,GAAG,CAAC,QAAQ,CAAC;;;;yCAIc,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,iBAAiB,KAAK,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;yCACxE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC;;;;uBAI3E,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI;;;sBAGb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;;;6BAGT,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;kBAC1B,GAAG,CAAC,SAAS,CAAC;;;sBAGV,OAAO,CAAC;IACtB,MAAM,EAAE,CAAC,CAAO,EAAE,EAAE,CAAC,CAAC,YAAY,WAAW,IAAI,OAAO,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAC/E,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,gBAAgB;CAC7B,CAAC;;;YAGM,iBAAiB;;CAE5B,CAAC"}
|
|
@@ -113,19 +113,19 @@ export const styles = css `
|
|
|
113
113
|
border-bottom-color: ${failColor};
|
|
114
114
|
}
|
|
115
115
|
|
|
116
|
+
.anchored-region[hidden] {
|
|
117
|
+
visibility: hidden;
|
|
118
|
+
}
|
|
119
|
+
|
|
116
120
|
.listbox {
|
|
117
121
|
box-sizing: border-box;
|
|
118
122
|
display: inline-flex;
|
|
119
123
|
flex-direction: column;
|
|
120
124
|
left: 0;
|
|
121
125
|
overflow-y: auto;
|
|
122
|
-
position: absolute;
|
|
123
126
|
width: 100%;
|
|
124
127
|
--ni-private-listbox-padding: ${smallPadding};
|
|
125
|
-
max-height: calc(
|
|
126
|
-
var(--ni-private-select-max-height) - 2 *
|
|
127
|
-
var(--ni-private-listbox-padding)
|
|
128
|
-
);
|
|
128
|
+
max-height: calc(var(--ni-private-select-max-height) - ${smallPadding});
|
|
129
129
|
z-index: 1;
|
|
130
130
|
box-shadow: ${elevation2BoxShadow};
|
|
131
131
|
border: 1px solid ${popupBorderColor};
|
|
@@ -138,10 +138,6 @@ export const styles = css `
|
|
|
138
138
|
padding: var(--ni-private-listbox-padding);
|
|
139
139
|
}
|
|
140
140
|
|
|
141
|
-
.listbox[hidden] {
|
|
142
|
-
display: none;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
141
|
:host([open][position='above']) .listbox {
|
|
146
142
|
border-bottom-left-radius: 0;
|
|
147
143
|
border-bottom-right-radius: 0;
|
|
@@ -152,12 +148,12 @@ export const styles = css `
|
|
|
152
148
|
border-top-right-radius: 0;
|
|
153
149
|
}
|
|
154
150
|
|
|
155
|
-
:host([open][position='above']) .
|
|
156
|
-
bottom: ${
|
|
151
|
+
:host([open][position='above']) .anchored-region {
|
|
152
|
+
padding-bottom: ${smallPadding};
|
|
157
153
|
}
|
|
158
154
|
|
|
159
|
-
:host([open][position='below']) .
|
|
160
|
-
top:
|
|
155
|
+
:host([open][position='below']) .anchored-region {
|
|
156
|
+
padding-top: ${smallPadding};
|
|
161
157
|
}
|
|
162
158
|
|
|
163
159
|
.selected-value {
|
|
@@ -194,16 +190,6 @@ export const styles = css `
|
|
|
194
190
|
fill: ${bodyDisabledFontColor};
|
|
195
191
|
}
|
|
196
192
|
|
|
197
|
-
slot[name='listbox'] {
|
|
198
|
-
display: none;
|
|
199
|
-
width: 100%;
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
:host([open]) slot[name='listbox'] {
|
|
203
|
-
display: flex;
|
|
204
|
-
position: absolute;
|
|
205
|
-
}
|
|
206
|
-
|
|
207
193
|
.end {
|
|
208
194
|
margin-inline-start: auto;
|
|
209
195
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/dropdown/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,qBAAqB,EACrB,eAAe,EACf,SAAS,EACT,mBAAmB,EACtB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAEnE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;iBAIX,aAAa;gBACd,QAAQ;kBACN,aAAa;;;UAGrB,cAAc;;;;mDAI2B,WAAW;;;;;;;;uBAQvC,WAAW;;;;yBAIT,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;+BAKO,SAAS;;;;;;4BAMZ,WAAW;;;;yBAId,gBAAgB;;4BAEb,UAAU;;;;;;;;;;YAU1B,YAAY;;;;;+BAKO,SAAS;;;;;;;;;;;;;;iCAcP,qBAAqB;;mBAEnC,WAAW;;;;+BAIC,gBAAgB;;;;;iBAK9B,qBAAqB;6BACT,qBAAqB;;;;;;+BAMnB,SAAS
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/dropdown/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,qBAAqB,EACrB,eAAe,EACf,SAAS,EACT,mBAAmB,EACtB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAEnE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;iBAIX,aAAa;gBACd,QAAQ;kBACN,aAAa;;;UAGrB,cAAc;;;;mDAI2B,WAAW;;;;;;;;uBAQvC,WAAW;;;;yBAIT,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;+BAKO,SAAS;;;;;;4BAMZ,WAAW;;;;yBAId,gBAAgB;;4BAEb,UAAU;;;;;;;;;;YAU1B,YAAY;;;;;+BAKO,SAAS;;;;;;;;;;;;;;iCAcP,qBAAqB;;mBAEnC,WAAW;;;;+BAIC,gBAAgB;;;;;iBAK9B,qBAAqB;6BACT,qBAAqB;;;;;;+BAMnB,SAAS;;;;;;;;;;;;;;wCAcA,YAAY;iEACa,YAAY;;sBAEvD,mBAAmB;4BACb,gBAAgB;4BAChB,0BAA0B;;;;;;;;;;;;;;;;;;;;0BAoB5B,YAAY;;;;uBAIf,YAAY;;;;;;;;;;;6BAWN,eAAe;;;;iBAI3B,qBAAqB;;;;;;;;;;;;;iBAarB,QAAQ;kBACP,QAAQ;gBACV,aAAa;;;;gBAIb,qBAAqB;;;;;;;;;;;CAWpC,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,SAAS,EAC5B,GAAG,CAAA;;uCAE4B,WAAW;;;;;qCAKb,qBAAqB;;SAEjD,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,OAAO,EAC1B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;uCAIvB,WAAW;;;;;yCAKT,qBAAqB;;SAErD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEnD,CACJ,CACJ,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Select as FoundationSelect } from '@microsoft/fast-foundation';
|
|
1
|
+
import { AnchoredRegion, Select as FoundationSelect } from '@microsoft/fast-foundation';
|
|
2
2
|
import { DropdownAppearance } from '../patterns/dropdown/types';
|
|
3
3
|
import type { ErrorPattern } from '../patterns/error/types';
|
|
4
4
|
declare global {
|
|
@@ -20,8 +20,14 @@ export declare class Select extends FoundationSelect implements ErrorPattern {
|
|
|
20
20
|
*/
|
|
21
21
|
errorText: string | undefined;
|
|
22
22
|
errorVisible: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* @internal
|
|
25
|
+
*/
|
|
26
|
+
region?: AnchoredRegion;
|
|
23
27
|
setPositioning(): void;
|
|
24
28
|
slottedOptionsChanged(prev: Element[], next: Element[]): void;
|
|
29
|
+
private regionChanged;
|
|
30
|
+
private controlChanged;
|
|
25
31
|
private maxHeightChanged;
|
|
26
32
|
private updateListboxMaxHeightCssVariable;
|
|
27
33
|
}
|
package/dist/esm/select/index.js
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { attr, html } from '@microsoft/fast-element';
|
|
3
|
-
import { DesignSystem, Select as FoundationSelect
|
|
2
|
+
import { attr, html, observable } from '@microsoft/fast-element';
|
|
3
|
+
import { DesignSystem, Select as FoundationSelect } from '@microsoft/fast-foundation';
|
|
4
4
|
import { arrowExpanderDown16X16 } from '@ni/nimble-tokens/dist/icons/js';
|
|
5
5
|
import { styles } from './styles';
|
|
6
6
|
import { DropdownAppearance } from '../patterns/dropdown/types';
|
|
7
7
|
import { errorTextTemplate } from '../patterns/error/template';
|
|
8
8
|
import { iconExclamationMarkTag } from '../icons/exclamation-mark';
|
|
9
|
+
import { template } from './template';
|
|
9
10
|
/**
|
|
10
11
|
* A nimble-styled HTML select
|
|
11
12
|
*/
|
|
@@ -33,6 +34,16 @@ export class Select extends FoundationSelect {
|
|
|
33
34
|
this.value = value;
|
|
34
35
|
}
|
|
35
36
|
}
|
|
37
|
+
regionChanged(_prev, _next) {
|
|
38
|
+
if (this.region && this.control) {
|
|
39
|
+
this.region.anchorElement = this.control;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
controlChanged(_prev, _next) {
|
|
43
|
+
if (this.region && this.control) {
|
|
44
|
+
this.region.anchorElement = this.control;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
36
47
|
maxHeightChanged() {
|
|
37
48
|
this.updateListboxMaxHeightCssVariable();
|
|
38
49
|
}
|
|
@@ -51,6 +62,9 @@ __decorate([
|
|
|
51
62
|
__decorate([
|
|
52
63
|
attr({ attribute: 'error-visible', mode: 'boolean' })
|
|
53
64
|
], Select.prototype, "errorVisible", void 0);
|
|
65
|
+
__decorate([
|
|
66
|
+
observable
|
|
67
|
+
], Select.prototype, "region", void 0);
|
|
54
68
|
const nimbleSelect = Select.compose({
|
|
55
69
|
baseName: 'select',
|
|
56
70
|
baseClass: FoundationSelect,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/select/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/select/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { ViewTemplate } from '@microsoft/fast-element';
|
|
2
|
+
import { FoundationElementTemplate, SelectOptions } from '@microsoft/fast-foundation';
|
|
3
|
+
import type { Select } from '.';
|
|
4
|
+
export declare const template: FoundationElementTemplate<ViewTemplate<Select>, SelectOptions>;
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import { html, ref, slotted, when } from '@microsoft/fast-element';
|
|
2
|
+
import { endSlotTemplate, Listbox, startSlotTemplate } from '@microsoft/fast-foundation';
|
|
3
|
+
import { anchoredRegionTag } from '../anchored-region';
|
|
4
|
+
import { DropdownPosition } from '../patterns/dropdown/types';
|
|
5
|
+
// prettier-ignore
|
|
6
|
+
export const template = (context, definition) => html `
|
|
7
|
+
<template
|
|
8
|
+
class="${x => [
|
|
9
|
+
x.collapsible && 'collapsible',
|
|
10
|
+
x.collapsible && x.open && 'open',
|
|
11
|
+
x.disabled && 'disabled',
|
|
12
|
+
x.collapsible && x.position,
|
|
13
|
+
]
|
|
14
|
+
.filter(Boolean)
|
|
15
|
+
.join(' ')}"
|
|
16
|
+
aria-activedescendant="${x => x.ariaActiveDescendant}"
|
|
17
|
+
aria-controls="${x => x.ariaControls}"
|
|
18
|
+
aria-disabled="${x => x.ariaDisabled}"
|
|
19
|
+
aria-expanded="${x => x.ariaExpanded}"
|
|
20
|
+
aria-haspopup="${x => (x.collapsible ? 'listbox' : null)}"
|
|
21
|
+
aria-multiselectable="${x => x.ariaMultiSelectable}"
|
|
22
|
+
?open="${x => x.open}"
|
|
23
|
+
role="combobox"
|
|
24
|
+
tabindex="${x => (!x.disabled ? '0' : null)}"
|
|
25
|
+
@click="${(x, c) => x.clickHandler(c.event)}"
|
|
26
|
+
@focusin="${(x, c) => x.focusinHandler(c.event)}"
|
|
27
|
+
@focusout="${(x, c) => x.focusoutHandler(c.event)}"
|
|
28
|
+
@keydown="${(x, c) => x.keydownHandler(c.event)}"
|
|
29
|
+
@mousedown="${(x, c) => x.mousedownHandler(c.event)}"
|
|
30
|
+
>
|
|
31
|
+
${when(x => x.collapsible, html `
|
|
32
|
+
<div
|
|
33
|
+
class="control"
|
|
34
|
+
part="control"
|
|
35
|
+
?disabled="${x => x.disabled}"
|
|
36
|
+
${ref('control')}
|
|
37
|
+
>
|
|
38
|
+
${startSlotTemplate(context, definition)}
|
|
39
|
+
<slot name="button-container">
|
|
40
|
+
<div class="selected-value" part="selected-value">
|
|
41
|
+
<slot name="selected-value">${x => x.displayValue}</slot>
|
|
42
|
+
</div>
|
|
43
|
+
<div aria-hidden="true" class="indicator" part="indicator">
|
|
44
|
+
<slot name="indicator">
|
|
45
|
+
${definition.indicator || ''}
|
|
46
|
+
</slot>
|
|
47
|
+
</div>
|
|
48
|
+
</slot>
|
|
49
|
+
${endSlotTemplate(context, definition)}
|
|
50
|
+
</div>
|
|
51
|
+
`)}
|
|
52
|
+
<${anchoredRegionTag}
|
|
53
|
+
${ref('region')}
|
|
54
|
+
class="anchored-region"
|
|
55
|
+
fixed-placement
|
|
56
|
+
auto-update-mode="auto"
|
|
57
|
+
vertical-default-position="${x => (x.positionAttribute === DropdownPosition.above ? 'top' : 'bottom')}"
|
|
58
|
+
vertical-positioning-mode="${x => (!x.positionAttribute ? 'dynamic' : 'locktodefault')}"
|
|
59
|
+
horizontal-default-position="center"
|
|
60
|
+
horizontal-positioning-mode="locktodefault"
|
|
61
|
+
horizontal-scaling="anchor"
|
|
62
|
+
?hidden="${x => (x.collapsible ? !x.open : false)}">
|
|
63
|
+
<div
|
|
64
|
+
class="listbox"
|
|
65
|
+
id="${x => x.listboxId}"
|
|
66
|
+
part="listbox"
|
|
67
|
+
role="listbox"
|
|
68
|
+
?disabled="${x => x.disabled}"
|
|
69
|
+
${ref('listbox')}
|
|
70
|
+
>
|
|
71
|
+
<slot
|
|
72
|
+
${slotted({
|
|
73
|
+
filter: (n) => n instanceof HTMLElement && Listbox.slottedOptionFilter(n),
|
|
74
|
+
flatten: true,
|
|
75
|
+
property: 'slottedOptions',
|
|
76
|
+
})}
|
|
77
|
+
></slot>
|
|
78
|
+
</div>
|
|
79
|
+
</${anchoredRegionTag}>
|
|
80
|
+
</template>
|
|
81
|
+
`;
|
|
82
|
+
//# sourceMappingURL=template.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/select/template.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-components",
|
|
3
|
-
"version": "19.1.
|
|
3
|
+
"version": "19.1.2",
|
|
4
4
|
"description": "Styled web components for the NI Nimble Design System",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",
|