@ni/ok-components 1.10.0 → 1.10.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.
Files changed (11) hide show
  1. package/dist/all-components-bundle.js +1807 -1578
  2. package/dist/all-components-bundle.js.map +1 -1
  3. package/dist/all-components-bundle.min.js +3543 -3494
  4. package/dist/all-components-bundle.min.js.map +1 -1
  5. package/dist/custom-elements.json +200 -200
  6. package/dist/custom-elements.md +34 -34
  7. package/dist/esm/fv/chip-selector/index.js +0 -4
  8. package/dist/esm/fv/chip-selector/index.js.map +1 -1
  9. package/dist/esm/fv/chip-selector/template.js +3 -1
  10. package/dist/esm/fv/chip-selector/template.js.map +1 -1
  11. package/package.json +5 -5
package/dist/custom-elements.json CHANGED
@@ -67,206 +67,6 @@
67
67
  }
68
68
  ]
69
69
  },
70
- {
71
- "kind": "javascript-module",
72
- "path": "src/fv/card/index.ts",
73
- "declarations": [
74
- {
75
- "kind": "class",
76
- "description": "An opinionated card component for FV layouts with optional media,\nbadges, footer metadata, and action content.",
77
- "name": "FvCard",
78
- "members": [
79
- {
80
- "kind": "field",
81
- "name": "title",
82
- "type": {
83
- "text": "string"
84
- },
85
- "privacy": "public",
86
- "default": "''"
87
- },
88
- {
89
- "kind": "field",
90
- "name": "subtitle",
91
- "type": {
92
- "text": "string"
93
- },
94
- "privacy": "public",
95
- "default": "''"
96
- },
97
- {
98
- "kind": "field",
99
- "name": "description",
100
- "type": {
101
- "text": "string"
102
- },
103
- "privacy": "public",
104
- "default": "''"
105
- },
106
- {
107
- "kind": "field",
108
- "name": "appearance",
109
- "type": {
110
- "text": "FvCardAppearanceType"
111
- },
112
- "privacy": "public"
113
- },
114
- {
115
- "kind": "field",
116
- "name": "interactionMode",
117
- "type": {
118
- "text": "FvCardInteractionModeType"
119
- },
120
- "privacy": "public"
121
- },
122
- {
123
- "kind": "field",
124
- "name": "disabled",
125
- "type": {
126
- "text": "boolean"
127
- },
128
- "privacy": "public",
129
- "default": "false"
130
- },
131
- {
132
- "kind": "field",
133
- "name": "initials",
134
- "type": {
135
- "text": "string"
136
- },
137
- "privacy": "public",
138
- "default": "''"
139
- }
140
- ],
141
- "attributes": [
142
- {
143
- "name": "card-title",
144
- "type": {
145
- "text": "string"
146
- },
147
- "default": "''",
148
- "fieldName": "title"
149
- },
150
- {
151
- "name": "subtitle",
152
- "type": {
153
- "text": "string"
154
- },
155
- "default": "''",
156
- "fieldName": "subtitle"
157
- },
158
- {
159
- "name": "description",
160
- "type": {
161
- "text": "string"
162
- },
163
- "default": "''",
164
- "fieldName": "description"
165
- },
166
- {
167
- "name": "appearance",
168
- "type": {
169
- "text": "FvCardAppearanceType"
170
- },
171
- "fieldName": "appearance"
172
- },
173
- {
174
- "name": "interaction-mode",
175
- "type": {
176
- "text": "FvCardInteractionModeType"
177
- },
178
- "fieldName": "interactionMode"
179
- },
180
- {
181
- "name": "disabled",
182
- "type": {
183
- "text": "boolean"
184
- },
185
- "default": "false",
186
- "fieldName": "disabled"
187
- },
188
- {
189
- "name": "initials",
190
- "type": {
191
- "text": "string"
192
- },
193
- "default": "''",
194
- "fieldName": "initials"
195
- }
196
- ],
197
- "superclass": {
198
- "name": "FoundationElement",
199
- "package": "@ni/fast-foundation"
200
- }
201
- },
202
- {
203
- "kind": "variable",
204
- "name": "fvCardTag",
205
- "type": {
206
- "text": "string"
207
- },
208
- "default": "'ok-fv-card'"
209
- }
210
- ],
211
- "exports": [
212
- {
213
- "kind": "js",
214
- "name": "FvCard",
215
- "declaration": {
216
- "name": "FvCard",
217
- "module": "src/fv/card/index.ts"
218
- }
219
- },
220
- {
221
- "kind": "js",
222
- "name": "fvCardTag",
223
- "declaration": {
224
- "name": "fvCardTag",
225
- "module": "src/fv/card/index.ts"
226
- }
227
- }
228
- ]
229
- },
230
- {
231
- "kind": "javascript-module",
232
- "path": "src/fv/card/types.ts",
233
- "declarations": [
234
- {
235
- "kind": "variable",
236
- "name": "FvCardAppearance",
237
- "type": {
238
- "text": "{\n outline: 'outline',\n block: 'block'\n}"
239
- },
240
- "default": "{ outline: 'outline', block: 'block' }"
241
- },
242
- {
243
- "kind": "variable",
244
- "name": "FvCardInteractionMode",
245
- "type": {
246
- "text": "{\n static: 'static',\n card: 'card'\n}"
247
- },
248
- "default": "{ static: 'static', card: 'card' }"
249
- }
250
- ],
251
- "exports": [
252
- {
253
- "kind": "js",
254
- "name": "FvCardAppearance",
255
- "declaration": {
256
- "name": "FvCardAppearance",
257
- "module": "src/fv/card/types.ts"
258
- }
259
- },
260
- {
261
- "kind": "js",
262
- "name": "FvCardInteractionMode",
263
- "declaration": {
264
- "name": "FvCardInteractionMode",
265
- "module": "src/fv/card/types.ts"
266
- }
267
- }
268
- ]
269
- },
270
70
  {
271
71
  "kind": "javascript-module",
272
72
  "path": "src/fv/accordion-item/index.ts",
@@ -683,6 +483,206 @@
683
483
  }
684
484
  ]
685
485
  },
486
+ {
487
+ "kind": "javascript-module",
488
+ "path": "src/fv/card/index.ts",
489
+ "declarations": [
490
+ {
491
+ "kind": "class",
492
+ "description": "An opinionated card component for FV layouts with optional media,\nbadges, footer metadata, and action content.",
493
+ "name": "FvCard",
494
+ "members": [
495
+ {
496
+ "kind": "field",
497
+ "name": "title",
498
+ "type": {
499
+ "text": "string"
500
+ },
501
+ "privacy": "public",
502
+ "default": "''"
503
+ },
504
+ {
505
+ "kind": "field",
506
+ "name": "subtitle",
507
+ "type": {
508
+ "text": "string"
509
+ },
510
+ "privacy": "public",
511
+ "default": "''"
512
+ },
513
+ {
514
+ "kind": "field",
515
+ "name": "description",
516
+ "type": {
517
+ "text": "string"
518
+ },
519
+ "privacy": "public",
520
+ "default": "''"
521
+ },
522
+ {
523
+ "kind": "field",
524
+ "name": "appearance",
525
+ "type": {
526
+ "text": "FvCardAppearanceType"
527
+ },
528
+ "privacy": "public"
529
+ },
530
+ {
531
+ "kind": "field",
532
+ "name": "interactionMode",
533
+ "type": {
534
+ "text": "FvCardInteractionModeType"
535
+ },
536
+ "privacy": "public"
537
+ },
538
+ {
539
+ "kind": "field",
540
+ "name": "disabled",
541
+ "type": {
542
+ "text": "boolean"
543
+ },
544
+ "privacy": "public",
545
+ "default": "false"
546
+ },
547
+ {
548
+ "kind": "field",
549
+ "name": "initials",
550
+ "type": {
551
+ "text": "string"
552
+ },
553
+ "privacy": "public",
554
+ "default": "''"
555
+ }
556
+ ],
557
+ "attributes": [
558
+ {
559
+ "name": "card-title",
560
+ "type": {
561
+ "text": "string"
562
+ },
563
+ "default": "''",
564
+ "fieldName": "title"
565
+ },
566
+ {
567
+ "name": "subtitle",
568
+ "type": {
569
+ "text": "string"
570
+ },
571
+ "default": "''",
572
+ "fieldName": "subtitle"
573
+ },
574
+ {
575
+ "name": "description",
576
+ "type": {
577
+ "text": "string"
578
+ },
579
+ "default": "''",
580
+ "fieldName": "description"
581
+ },
582
+ {
583
+ "name": "appearance",
584
+ "type": {
585
+ "text": "FvCardAppearanceType"
586
+ },
587
+ "fieldName": "appearance"
588
+ },
589
+ {
590
+ "name": "interaction-mode",
591
+ "type": {
592
+ "text": "FvCardInteractionModeType"
593
+ },
594
+ "fieldName": "interactionMode"
595
+ },
596
+ {
597
+ "name": "disabled",
598
+ "type": {
599
+ "text": "boolean"
600
+ },
601
+ "default": "false",
602
+ "fieldName": "disabled"
603
+ },
604
+ {
605
+ "name": "initials",
606
+ "type": {
607
+ "text": "string"
608
+ },
609
+ "default": "''",
610
+ "fieldName": "initials"
611
+ }
612
+ ],
613
+ "superclass": {
614
+ "name": "FoundationElement",
615
+ "package": "@ni/fast-foundation"
616
+ }
617
+ },
618
+ {
619
+ "kind": "variable",
620
+ "name": "fvCardTag",
621
+ "type": {
622
+ "text": "string"
623
+ },
624
+ "default": "'ok-fv-card'"
625
+ }
626
+ ],
627
+ "exports": [
628
+ {
629
+ "kind": "js",
630
+ "name": "FvCard",
631
+ "declaration": {
632
+ "name": "FvCard",
633
+ "module": "src/fv/card/index.ts"
634
+ }
635
+ },
636
+ {
637
+ "kind": "js",
638
+ "name": "fvCardTag",
639
+ "declaration": {
640
+ "name": "fvCardTag",
641
+ "module": "src/fv/card/index.ts"
642
+ }
643
+ }
644
+ ]
645
+ },
646
+ {
647
+ "kind": "javascript-module",
648
+ "path": "src/fv/card/types.ts",
649
+ "declarations": [
650
+ {
651
+ "kind": "variable",
652
+ "name": "FvCardAppearance",
653
+ "type": {
654
+ "text": "{\n outline: 'outline',\n block: 'block'\n}"
655
+ },
656
+ "default": "{ outline: 'outline', block: 'block' }"
657
+ },
658
+ {
659
+ "kind": "variable",
660
+ "name": "FvCardInteractionMode",
661
+ "type": {
662
+ "text": "{\n static: 'static',\n card: 'card'\n}"
663
+ },
664
+ "default": "{ static: 'static', card: 'card' }"
665
+ }
666
+ ],
667
+ "exports": [
668
+ {
669
+ "kind": "js",
670
+ "name": "FvCardAppearance",
671
+ "declaration": {
672
+ "name": "FvCardAppearance",
673
+ "module": "src/fv/card/types.ts"
674
+ }
675
+ },
676
+ {
677
+ "kind": "js",
678
+ "name": "FvCardInteractionMode",
679
+ "declaration": {
680
+ "name": "FvCardInteractionMode",
681
+ "module": "src/fv/card/types.ts"
682
+ }
683
+ }
684
+ ]
685
+ },
686
686
  {
687
687
  "kind": "javascript-module",
688
688
  "path": "src/fv/context-help/index.ts",
package/dist/custom-elements.md CHANGED
@@ -8,40 +8,6 @@
8
8
 
9
9
  <hr/>
10
10
 
11
- ## class: `FvCard`
12
-
13
- ### Superclass
14
-
15
- | Name | Module | Package |
16
- | ------------------- | ------ | ------------------- |
17
- | `FoundationElement` | | @ni/fast-foundation |
18
-
19
- ### Fields
20
-
21
- | Name | Privacy | Type | Default | Description | Inherited From |
22
- | ----------------- | ------- | --------------------------- | ------- | ----------- | -------------- |
23
- | `title` | public | `string` | `''` | | |
24
- | `subtitle` | public | `string` | `''` | | |
25
- | `description` | public | `string` | `''` | | |
26
- | `appearance` | public | `FvCardAppearanceType` | | | |
27
- | `interactionMode` | public | `FvCardInteractionModeType` | | | |
28
- | `disabled` | public | `boolean` | `false` | | |
29
- | `initials` | public | `string` | `''` | | |
30
-
31
- ### Attributes
32
-
33
- | Name | Field | Inherited From |
34
- | ------------------ | --------------- | -------------- |
35
- | `card-title` | title | |
36
- | `subtitle` | subtitle | |
37
- | `description` | description | |
38
- | `appearance` | appearance | |
39
- | `interaction-mode` | interactionMode | |
40
- | `disabled` | disabled | |
41
- | `initials` | initials | |
42
-
43
- <hr/>
44
-
45
11
  ## class: `FvAccordionItem`
46
12
 
47
13
  ### Superclass
@@ -108,6 +74,40 @@
108
74
 
109
75
  <hr/>
110
76
 
77
+ ## class: `FvCard`
78
+
79
+ ### Superclass
80
+
81
+ | Name | Module | Package |
82
+ | ------------------- | ------ | ------------------- |
83
+ | `FoundationElement` | | @ni/fast-foundation |
84
+
85
+ ### Fields
86
+
87
+ | Name | Privacy | Type | Default | Description | Inherited From |
88
+ | ----------------- | ------- | --------------------------- | ------- | ----------- | -------------- |
89
+ | `title` | public | `string` | `''` | | |
90
+ | `subtitle` | public | `string` | `''` | | |
91
+ | `description` | public | `string` | `''` | | |
92
+ | `appearance` | public | `FvCardAppearanceType` | | | |
93
+ | `interactionMode` | public | `FvCardInteractionModeType` | | | |
94
+ | `disabled` | public | `boolean` | `false` | | |
95
+ | `initials` | public | `string` | `''` | | |
96
+
97
+ ### Attributes
98
+
99
+ | Name | Field | Inherited From |
100
+ | ------------------ | --------------- | -------------- |
101
+ | `card-title` | title | |
102
+ | `subtitle` | subtitle | |
103
+ | `description` | description | |
104
+ | `appearance` | appearance | |
105
+ | `interaction-mode` | interactionMode | |
106
+ | `disabled` | disabled | |
107
+ | `initials` | initials | |
108
+
109
+ <hr/>
110
+
111
111
  ## class: `FvContextHelp`
112
112
 
113
113
  ### Superclass
package/dist/esm/fv/chip-selector/index.js CHANGED
@@ -256,10 +256,6 @@ export class FvChipSelector extends FoundationElement {
256
256
  }
257
257
  }
258
258
  syncActiveOption() {
259
- const options = Array.from(this.shadowRoot?.querySelectorAll('.chip-selector-option') ?? []);
260
- options.forEach((option, index) => {
261
- option.setAttribute('aria-selected', String(index === this.activeOptionIndex));
262
- });
263
259
  if (this.activeOptionIndex < 0) {
264
260
  this.activeOptionId = null;
265
261
  }
package/dist/esm/fv/chip-selector/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/chip-selector/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { attr, observable } from '@ni/fast-element';\nimport { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { uniqueId } from '@ni/fast-web-utilities';\nimport type { AnchoredRegion } from '@ni/nimble-components/dist/esm/anchored-region';\nimport { chipTag } from '@ni/nimble-components/dist/esm/chip';\nimport { diacriticInsensitiveStringNormalizer } from '@ni/nimble-components/dist/esm/utilities/models/string-normalizers';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ok-fv-chip-selector': FvChipSelector;\n }\n}\n\n/**\n * A chip picker with inline text entry, removable chips, and a dropdown option list.\n */\nexport class FvChipSelector extends FoundationElement {\n @attr({ mode: 'boolean' })\n public disabled = false;\n\n @attr({ mode: 'boolean' })\n public open = false;\n\n @attr\n public label = '';\n\n @attr({ attribute: 'selected-values' })\n public selectedValues = '';\n\n @attr\n public options = '';\n\n @attr\n public placeholder = 'Select values';\n\n @attr({ attribute: 'allow-custom-values', mode: 'boolean' })\n public allowCustomValues = false;\n\n /** @internal */\n @observable\n public filterText = '';\n\n /** @internal */\n @observable\n public activeOptionIndex = -1;\n\n /** @internal */\n @observable\n public activeOptionId: string | null = null;\n\n /** @internal */\n public readonly inputId = uniqueId('ok-fv-chip-selector-input');\n\n /** @internal */\n public readonly labelId = uniqueId('ok-fv-chip-selector-label');\n\n /** @internal */\n public readonly menuId = uniqueId('ok-fv-chip-selector-menu');\n\n /** @internal */\n @observable\n public readonly region?: AnchoredRegion;\n\n /** @internal */\n @observable\n public readonly field?: HTMLElement;\n\n private inputElement: HTMLInputElement | null = null;\n\n private menuButtonElement: (HTMLElement & { checked?: boolean }) | null = null;\n\n /** @internal */\n public disabledChanged(): void {\n if (this.disabled) {\n this.filterText = '';\n this.open = false;\n }\n }\n\n /** @internal */\n public openChanged(): void {\n this.syncMenuButtonState();\n if (!this.open) {\n this.activeOptionIndex = -1;\n }\n }\n\n /** @internal */\n public activeOptionIndexChanged(): void {\n this.syncActiveOption();\n }\n\n /** @internal */\n public filterTextChanged(): void {\n this.activeOptionIndex = -1;\n }\n\n /** @internal */\n public optionsChanged(): void {}\n\n /** @internal */\n public allowCustomValuesChanged(): void {}\n\n /** @internal */\n public selectedValuesChanged(): void {}\n\n /** @internal */\n public override connectedCallback(): void {\n super.connectedCallback();\n document.addEventListener('click', this.documentClickHandler);\n }\n\n /** @internal */\n public override disconnectedCallback(): void {\n document.removeEventListener('click', this.documentClickHandler);\n super.disconnectedCallback();\n }\n\n /** @internal */\n public captureInputRef(input: HTMLInputElement | null): void {\n this.inputElement = input;\n }\n\n /** @internal */\n public captureMenuButtonRef(menuButton: (HTMLElement & { checked?: boolean }) | null): void {\n this.menuButtonElement = menuButton;\n this.syncMenuButtonState();\n }\n\n /** @internal */\n public regionChanged(\n _prev: AnchoredRegion | undefined,\n _next: AnchoredRegion | undefined\n ): void {\n if (this.region && this.field) {\n this.region.anchorElement = this.field;\n }\n }\n\n /** @internal */\n public fieldChanged(\n _prev: HTMLElement | undefined,\n _next: HTMLElement | undefined\n ): void {\n if (this.region) {\n this.region.anchorElement = this.field ?? null;\n }\n }\n\n /** @internal */\n public get selectedValueList(): string[] {\n return Array.from(new Set(\n this.selectedValues\n .split(',')\n .map(value => value.trim())\n .filter(value => value.length > 0)\n ));\n }\n\n /** @internal */\n public get optionList(): string[] {\n return Array.from(new Set(\n this.options\n .split(',')\n .map(option => option.trim())\n .filter(option => option.length > 0)\n ));\n }\n\n /** @internal */\n public get visibleOptionList(): string[] {\n const selectedValues = new Set(this.selectedValueList);\n const normalizedFilter = diacriticInsensitiveStringNormalizer(this.filterText.trim());\n\n return this.optionList.filter(option => {\n if (selectedValues.has(option)) {\n return false;\n }\n\n return normalizedFilter.length === 0\n || diacriticInsensitiveStringNormalizer(option).includes(normalizedFilter);\n });\n }\n\n /** @internal */\n public get customValueCandidate(): string {\n const trimmedFilterText = this.filterText.trim();\n\n if (!this.allowCustomValues || trimmedFilterText.length === 0 || trimmedFilterText.includes(',')) {\n return '';\n }\n\n if (this.optionList.includes(trimmedFilterText) || this.selectedValueList.includes(trimmedFilterText)) {\n return '';\n }\n\n return trimmedFilterText;\n }\n\n /** @internal */\n public get createOptionLabel(): string {\n return `Add '${this.customValueCandidate}'`;\n }\n\n /** @internal */\n public get showEmptyState(): boolean {\n return this.visibleOptionList.length === 0 && this.customValueCandidate.length === 0;\n }\n\n /** @internal */\n public handleFieldClick(event: Event): void {\n if (this.disabled) {\n return;\n }\n\n const target = event.target as HTMLElement | null;\n if (target?.closest(chipTag) || target?.closest('.chip-selector-menu-button')) {\n return;\n }\n\n this.setOpen(true);\n this.inputElement?.focus();\n }\n\n /** @internal */\n public handleMenuButtonClick(event: Event): void {\n event.stopPropagation();\n event.preventDefault();\n\n if (this.disabled) {\n return;\n }\n\n this.setOpen(!this.open);\n this.inputElement?.focus();\n }\n\n /** @internal */\n public handleMenuButtonChange(event: Event): void {\n // Prevent internal toggle-button change events from surfacing as chip-selector selection changes.\n event.stopPropagation();\n this.syncMenuButtonState();\n }\n\n /** @internal */\n public handleInput(event: Event): void {\n const input = event.target as HTMLInputElement;\n this.filterText = input.value;\n this.setOpen(true);\n }\n\n /** @internal */\n public handleInputFocus(): void {\n if (!this.disabled) {\n this.setOpen(true);\n }\n }\n\n /** @internal */\n public handleInputKeydown(event: KeyboardEvent): boolean {\n if (this.disabled) {\n return true;\n }\n\n if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n event.preventDefault();\n if (!this.open) {\n this.setOpen(true);\n }\n const maxIndex = this.visibleOptionList.length + (this.customValueCandidate ? 1 : 0) - 1;\n if (maxIndex < 0) {\n return false;\n }\n if (event.key === 'ArrowDown') {\n this.activeOptionIndex = Math.min(this.activeOptionIndex + 1, maxIndex);\n } else {\n this.activeOptionIndex = Math.max(this.activeOptionIndex - 1, 0);\n }\n return false;\n }\n\n if (event.key === 'Enter') {\n if (this.open && this.activeOptionIndex >= 0) {\n event.preventDefault();\n this.commitActiveOption();\n return false;\n }\n return true;\n }\n\n if (event.key === 'Escape') {\n event.preventDefault();\n this.filterText = '';\n this.setOpen(false);\n return false;\n }\n\n if (event.key === 'Backspace' && this.filterText.length === 0) {\n const selectedValues = this.selectedValueList;\n const lastValue = selectedValues[selectedValues.length - 1];\n if (lastValue) {\n event.preventDefault();\n this.removeValue(lastValue);\n }\n return false;\n }\n\n return true;\n }\n\n /** @internal */\n public handleChipRemove(event: Event): void {\n const chip = event.composedPath().find(\n element => element instanceof HTMLElement && element.tagName.toLowerCase() === chipTag\n ) as HTMLElement | undefined;\n\n const value = chip?.getAttribute('data-chip-value')?.trim();\n if (value) {\n this.removeValue(value);\n }\n }\n\n /** @internal */\n public handleMenuClick(event: Event): void {\n const optionEl = event.composedPath().find(\n el => el instanceof HTMLElement && el.hasAttribute('data-option-value')\n ) as HTMLElement | undefined;\n const value = optionEl?.getAttribute('data-option-value')?.trim();\n if (value) {\n this.addValue(value);\n }\n }\n\n /** @internal */\n public handleMenuItemChange(event: Event): void {\n event.stopPropagation();\n const menuItem = event.composedPath().find(\n pathItem => pathItem instanceof HTMLElement && pathItem.hasAttribute('data-option-value')\n ) as HTMLElement | undefined;\n const value = menuItem?.getAttribute('data-option-value')?.trim();\n if (value) {\n this.addValue(value);\n }\n }\n\n private readonly documentClickHandler = (event: Event): void => {\n if (this.open && !event.composedPath().includes(this)) {\n this.setOpen(false);\n }\n };\n\n private syncActiveOption(): void {\n const options = Array.from(\n this.shadowRoot?.querySelectorAll<HTMLElement>('.chip-selector-option') ?? []\n );\n options.forEach((option, index) => {\n option.setAttribute('aria-selected', String(index === this.activeOptionIndex));\n });\n\n if (this.activeOptionIndex < 0) {\n this.activeOptionId = null;\n } else if (\n this.customValueCandidate.length > 0\n && this.activeOptionIndex === this.visibleOptionList.length\n ) {\n this.activeOptionId = `${this.menuId}-option-create`;\n } else {\n this.activeOptionId = `${this.menuId}-option-${this.activeOptionIndex}`;\n }\n }\n\n private commitActiveOption(): void {\n const allOptions = [\n ...this.visibleOptionList,\n ...(this.customValueCandidate ? [this.customValueCandidate] : [])\n ];\n const value = allOptions[this.activeOptionIndex];\n if (value !== undefined) {\n this.addValue(value);\n }\n }\n\n private addValue(value: string): void {\n if (this.disabled) {\n return;\n }\n\n const nextValues = this.selectedValueList;\n if (nextValues.includes(value)) {\n return;\n }\n\n nextValues.push(value);\n this.commitSelection(nextValues);\n this.filterText = '';\n this.setOpen(true);\n this.inputElement?.focus();\n }\n\n private removeValue(value: string): void {\n if (this.disabled) {\n return;\n }\n\n const nextValues = this.selectedValueList.filter(selectedValue => selectedValue !== value);\n this.commitSelection(nextValues);\n this.inputElement?.focus();\n }\n\n private commitSelection(nextValues: string[]): void {\n this.selectedValues = nextValues.join(',');\n this.dispatchEvent(new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { selectedValues: nextValues }\n }));\n }\n\n private setOpen(nextOpen: boolean): void {\n this.open = this.disabled ? false : nextOpen;\n this.syncMenuButtonState();\n }\n\n private syncMenuButtonState(): void {\n if (this.menuButtonElement) {\n this.menuButtonElement.checked = this.open;\n }\n }\n}\n\nconst okFvChipSelector = FvChipSelector.compose({\n baseName: 'fv-chip-selector',\n template,\n styles\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okFvChipSelector());\nexport const fvChipSelectorTag = 'ok-fv-chip-selector';"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/chip-selector/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { attr, observable } from '@ni/fast-element';\nimport { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { uniqueId } from '@ni/fast-web-utilities';\nimport type { AnchoredRegion } from '@ni/nimble-components/dist/esm/anchored-region';\nimport { chipTag } from '@ni/nimble-components/dist/esm/chip';\nimport { diacriticInsensitiveStringNormalizer } from '@ni/nimble-components/dist/esm/utilities/models/string-normalizers';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ok-fv-chip-selector': FvChipSelector;\n }\n}\n\n/**\n * A chip picker with inline text entry, removable chips, and a dropdown option list.\n */\nexport class FvChipSelector extends FoundationElement {\n @attr({ mode: 'boolean' })\n public disabled = false;\n\n @attr({ mode: 'boolean' })\n public open = false;\n\n @attr\n public label = '';\n\n @attr({ attribute: 'selected-values' })\n public selectedValues = '';\n\n @attr\n public options = '';\n\n @attr\n public placeholder = 'Select values';\n\n @attr({ attribute: 'allow-custom-values', mode: 'boolean' })\n public allowCustomValues = false;\n\n /** @internal */\n @observable\n public filterText = '';\n\n /** @internal */\n @observable\n public activeOptionIndex = -1;\n\n /** @internal */\n @observable\n public activeOptionId: string | null = null;\n\n /** @internal */\n public readonly inputId = uniqueId('ok-fv-chip-selector-input');\n\n /** @internal */\n public readonly labelId = uniqueId('ok-fv-chip-selector-label');\n\n /** @internal */\n public readonly menuId = uniqueId('ok-fv-chip-selector-menu');\n\n /** @internal */\n @observable\n public readonly region?: AnchoredRegion;\n\n /** @internal */\n @observable\n public readonly field?: HTMLElement;\n\n private inputElement: HTMLInputElement | null = null;\n\n private menuButtonElement: (HTMLElement & { checked?: boolean }) | null = null;\n\n /** @internal */\n public disabledChanged(): void {\n if (this.disabled) {\n this.filterText = '';\n this.open = false;\n }\n }\n\n /** @internal */\n public openChanged(): void {\n this.syncMenuButtonState();\n if (!this.open) {\n this.activeOptionIndex = -1;\n }\n }\n\n /** @internal */\n public activeOptionIndexChanged(): void {\n this.syncActiveOption();\n }\n\n /** @internal */\n public filterTextChanged(): void {\n this.activeOptionIndex = -1;\n }\n\n /** @internal */\n public optionsChanged(): void {}\n\n /** @internal */\n public allowCustomValuesChanged(): void {}\n\n /** @internal */\n public selectedValuesChanged(): void {}\n\n /** @internal */\n public override connectedCallback(): void {\n super.connectedCallback();\n document.addEventListener('click', this.documentClickHandler);\n }\n\n /** @internal */\n public override disconnectedCallback(): void {\n document.removeEventListener('click', this.documentClickHandler);\n super.disconnectedCallback();\n }\n\n /** @internal */\n public captureInputRef(input: HTMLInputElement | null): void {\n this.inputElement = input;\n }\n\n /** @internal */\n public captureMenuButtonRef(menuButton: (HTMLElement & { checked?: boolean }) | null): void {\n this.menuButtonElement = menuButton;\n this.syncMenuButtonState();\n }\n\n /** @internal */\n public regionChanged(\n _prev: AnchoredRegion | undefined,\n _next: AnchoredRegion | undefined\n ): void {\n if (this.region && this.field) {\n this.region.anchorElement = this.field;\n }\n }\n\n /** @internal */\n public fieldChanged(\n _prev: HTMLElement | undefined,\n _next: HTMLElement | undefined\n ): void {\n if (this.region) {\n this.region.anchorElement = this.field ?? null;\n }\n }\n\n /** @internal */\n public get selectedValueList(): string[] {\n return Array.from(new Set(\n this.selectedValues\n .split(',')\n .map(value => value.trim())\n .filter(value => value.length > 0)\n ));\n }\n\n /** @internal */\n public get optionList(): string[] {\n return Array.from(new Set(\n this.options\n .split(',')\n .map(option => option.trim())\n .filter(option => option.length > 0)\n ));\n }\n\n /** @internal */\n public get visibleOptionList(): string[] {\n const selectedValues = new Set(this.selectedValueList);\n const normalizedFilter = diacriticInsensitiveStringNormalizer(this.filterText.trim());\n\n return this.optionList.filter(option => {\n if (selectedValues.has(option)) {\n return false;\n }\n\n return normalizedFilter.length === 0\n || diacriticInsensitiveStringNormalizer(option).includes(normalizedFilter);\n });\n }\n\n /** @internal */\n public get customValueCandidate(): string {\n const trimmedFilterText = this.filterText.trim();\n\n if (!this.allowCustomValues || trimmedFilterText.length === 0 || trimmedFilterText.includes(',')) {\n return '';\n }\n\n if (this.optionList.includes(trimmedFilterText) || this.selectedValueList.includes(trimmedFilterText)) {\n return '';\n }\n\n return trimmedFilterText;\n }\n\n /** @internal */\n public get createOptionLabel(): string {\n return `Add '${this.customValueCandidate}'`;\n }\n\n /** @internal */\n public get showEmptyState(): boolean {\n return this.visibleOptionList.length === 0 && this.customValueCandidate.length === 0;\n }\n\n /** @internal */\n public handleFieldClick(event: Event): void {\n if (this.disabled) {\n return;\n }\n\n const target = event.target as HTMLElement | null;\n if (target?.closest(chipTag) || target?.closest('.chip-selector-menu-button')) {\n return;\n }\n\n this.setOpen(true);\n this.inputElement?.focus();\n }\n\n /** @internal */\n public handleMenuButtonClick(event: Event): void {\n event.stopPropagation();\n event.preventDefault();\n\n if (this.disabled) {\n return;\n }\n\n this.setOpen(!this.open);\n this.inputElement?.focus();\n }\n\n /** @internal */\n public handleMenuButtonChange(event: Event): void {\n // Prevent internal toggle-button change events from surfacing as chip-selector selection changes.\n event.stopPropagation();\n this.syncMenuButtonState();\n }\n\n /** @internal */\n public handleInput(event: Event): void {\n const input = event.target as HTMLInputElement;\n this.filterText = input.value;\n this.setOpen(true);\n }\n\n /** @internal */\n public handleInputFocus(): void {\n if (!this.disabled) {\n this.setOpen(true);\n }\n }\n\n /** @internal */\n public handleInputKeydown(event: KeyboardEvent): boolean {\n if (this.disabled) {\n return true;\n }\n\n if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n event.preventDefault();\n if (!this.open) {\n this.setOpen(true);\n }\n const maxIndex = this.visibleOptionList.length + (this.customValueCandidate ? 1 : 0) - 1;\n if (maxIndex < 0) {\n return false;\n }\n if (event.key === 'ArrowDown') {\n this.activeOptionIndex = Math.min(this.activeOptionIndex + 1, maxIndex);\n } else {\n this.activeOptionIndex = Math.max(this.activeOptionIndex - 1, 0);\n }\n return false;\n }\n\n if (event.key === 'Enter') {\n if (this.open && this.activeOptionIndex >= 0) {\n event.preventDefault();\n this.commitActiveOption();\n return false;\n }\n return true;\n }\n\n if (event.key === 'Escape') {\n event.preventDefault();\n this.filterText = '';\n this.setOpen(false);\n return false;\n }\n\n if (event.key === 'Backspace' && this.filterText.length === 0) {\n const selectedValues = this.selectedValueList;\n const lastValue = selectedValues[selectedValues.length - 1];\n if (lastValue) {\n event.preventDefault();\n this.removeValue(lastValue);\n }\n return false;\n }\n\n return true;\n }\n\n /** @internal */\n public handleChipRemove(event: Event): void {\n const chip = event.composedPath().find(\n element => element instanceof HTMLElement && element.tagName.toLowerCase() === chipTag\n ) as HTMLElement | undefined;\n\n const value = chip?.getAttribute('data-chip-value')?.trim();\n if (value) {\n this.removeValue(value);\n }\n }\n\n /** @internal */\n public handleMenuClick(event: Event): void {\n const optionEl = event.composedPath().find(\n el => el instanceof HTMLElement && el.hasAttribute('data-option-value')\n ) as HTMLElement | undefined;\n const value = optionEl?.getAttribute('data-option-value')?.trim();\n if (value) {\n this.addValue(value);\n }\n }\n\n /** @internal */\n public handleMenuItemChange(event: Event): void {\n event.stopPropagation();\n const menuItem = event.composedPath().find(\n pathItem => pathItem instanceof HTMLElement && pathItem.hasAttribute('data-option-value')\n ) as HTMLElement | undefined;\n const value = menuItem?.getAttribute('data-option-value')?.trim();\n if (value) {\n this.addValue(value);\n }\n }\n\n private readonly documentClickHandler = (event: Event): void => {\n if (this.open && !event.composedPath().includes(this)) {\n this.setOpen(false);\n }\n };\n\n private syncActiveOption(): void {\n if (this.activeOptionIndex < 0) {\n this.activeOptionId = null;\n } else if (\n this.customValueCandidate.length > 0\n && this.activeOptionIndex === this.visibleOptionList.length\n ) {\n this.activeOptionId = `${this.menuId}-option-create`;\n } else {\n this.activeOptionId = `${this.menuId}-option-${this.activeOptionIndex}`;\n }\n }\n\n private commitActiveOption(): void {\n const allOptions = [\n ...this.visibleOptionList,\n ...(this.customValueCandidate ? [this.customValueCandidate] : [])\n ];\n const value = allOptions[this.activeOptionIndex];\n if (value !== undefined) {\n this.addValue(value);\n }\n }\n\n private addValue(value: string): void {\n if (this.disabled) {\n return;\n }\n\n const nextValues = this.selectedValueList;\n if (nextValues.includes(value)) {\n return;\n }\n\n nextValues.push(value);\n this.commitSelection(nextValues);\n this.filterText = '';\n this.setOpen(true);\n this.inputElement?.focus();\n }\n\n private removeValue(value: string): void {\n if (this.disabled) {\n return;\n }\n\n const nextValues = this.selectedValueList.filter(selectedValue => selectedValue !== value);\n this.commitSelection(nextValues);\n this.inputElement?.focus();\n }\n\n private commitSelection(nextValues: string[]): void {\n this.selectedValues = nextValues.join(',');\n this.dispatchEvent(new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { selectedValues: nextValues }\n }));\n }\n\n private setOpen(nextOpen: boolean): void {\n this.open = this.disabled ? false : nextOpen;\n this.syncMenuButtonState();\n }\n\n private syncMenuButtonState(): void {\n if (this.menuButtonElement) {\n this.menuButtonElement.checked = this.open;\n }\n }\n}\n\nconst okFvChipSelector = FvChipSelector.compose({\n baseName: 'fv-chip-selector',\n template,\n styles\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okFvChipSelector());\nexport const fvChipSelectorTag = 'ok-fv-chip-selector';"]}
package/dist/esm/fv/chip-selector/template.js CHANGED
@@ -122,15 +122,17 @@ export const template = html `
122
122
  id="${(_, c) => `${c.parent.menuId}-option-${c.index}`}"
123
123
  class="chip-selector-option"
124
124
  data-option-value="${x => x}"
125
+ aria-selected="${(_, c) => String(c.index === c.parent.activeOptionIndex)}"
125
126
  >
126
127
  ${x => x}
127
128
  </${menuItemTag}>
128
- `)}
129
+ `, { positioning: true })}
129
130
  ${when(x => x.customValueCandidate.length > 0, html `
130
131
  <${menuItemTag}
131
132
  id="${x => `${x.menuId}-option-create`}"
132
133
  class="chip-selector-option chip-selector-create-option"
133
134
  data-option-value="${x => x.customValueCandidate}"
135
+ aria-selected="${x => String(x.activeOptionIndex === x.visibleOptionList.length)}"
134
136
  >
135
137
  ${x => x.createOptionLabel}
136
138
  </${menuItemTag}>