@ni/ok-components 1.9.6 → 1.10.1
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 +1851 -1525
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +5087 -5046
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/fv/chip-selector/index.js +0 -4
- package/dist/esm/fv/chip-selector/index.js.map +1 -1
- package/dist/esm/fv/chip-selector/template.js +3 -1
- package/dist/esm/fv/chip-selector/template.js.map +1 -1
- package/package.json +5 -5
|
@@ -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
|
}
|
|
@@ -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';"]}
|
|
@@ -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}>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/fv/chip-selector/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AACnF,OAAO,EAAE,OAAO,EAAE,MAAM,qCAAqC,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,wBAAwB,EAAE,MAAM,0DAA0D,CAAC;AACpG,OAAO,EAAE,OAAO,EAAE,MAAM,qCAAqC,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAG/E,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAgB;;UAElC,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EACvB,IAAI,CAAgB;6BACH,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,wBAAwB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;sBAC3D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;;aAErB,CACJ;;;;6BAIoB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;6BACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;;6BAEb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;+BACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;cAC7D,GAAG,CAAC,OAAO,CAAC;sBACJ,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;IACf,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAC5B,OAAO,IAAI,CAAC;AAChB,CAAC;;;kBAGK,MAAM,CACJ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,EACxB,IAAI,CAAwB;2BACrB,OAAO;;0CAEQ,cAAc,CAAC,KAAK;+CACf,CAAC,CAAC,EAAE,CAAC,CAAC;yCACZ,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ;uCAC7B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;IAChB,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IACnC,OAAO,IAAI,CAAC;AAChB,CAAC;;8BAEC,CAAC,CAAC,EAAE,CAAC,CAAC;4BACR,OAAO;qBACd,CACJ;;0BAES,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;;;;;mCAKL,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;8BACjE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;qCACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;6CACL,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC;;qCAE/C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;kCACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC;uCAChE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;;;iCAGlD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;sBAC1B,GAAG,CAAC,iBAAiB,CAAC;8BACd,CAAC,CAAC,EAAE;IACV,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACrB,OAAO,IAAI,CAAC;AAChB,CAAC;8BACS,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;IACf,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IACvB,OAAO,IAAI,CAAC;AAChB,CAAC;gCACW,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAsB,CAAC;;;eAGzE,eAAe;;;4BAGF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;6BACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;kBAC1B,GAAG,CAAC,sBAAsB,CAAC;0BACnB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;IACf,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IACjC,OAAO,IAAI,CAAC;AAChB,CAAC;2BACU,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;IAChB,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAClC,OAAO,IAAI,CAAC;AAChB,CAAC;;;;;mBAKE,wBAAwB,mDAAmD,wBAAwB;gBACtG,eAAe;;UAErB,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EACX,IAAI,CAAgB;mBACb,iBAAiB;;sBAEd,GAAG,CAAC,QAAQ,CAAC;;;;;;;;;mCASA,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;IAChB,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAC3B,OAAO,IAAI,CAAC;AAChB,CAAC;;2BAEE,OAAO;kCACA,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;;uCAER,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;IAChB,CAAC,CAAC,KAAK,CAAC,eAAe,EAAE,CAAC;IAC1B,OAAO,IAAI,CAAC;AAChB,CAAC;;8BAEC,MAAM,CACJ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,EACxB,IAAI,CAAwB;uCACrB,WAAW;8CACJ,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM,WAAW,CAAC,CAAC,KAAK,EAAE;;6DAEjC,CAAC,CAAC,EAAE,CAAC,CAAC;;0CAEzB,CAAC,CAAC,EAAE,CAAC,CAAC;wCACR,WAAW;iCAClB,CACJ;8BACC,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,oBAAoB,CAAC,MAAM,GAAG,CAAC,EACtC,IAAI,CAAgB;uCACb,WAAW;8CACJ,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM,gBAAgB;;6DAEjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,oBAAoB;;0CAE9C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB;wCAC1B,WAAW;iCAClB,CACJ;8BACC,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EACrB,IAAI,CAAgB;;iCAEnB,CACJ;4BACD,OAAO;;oBAEf,iBAAiB;aACxB,CACJ;;CAER,CAAC","sourcesContent":["import { html, ref, repeat, when } from '@ni/fast-element';\nimport { anchoredRegionTag } from '@ni/nimble-components/dist/esm/anchored-region';\nimport { chipTag } from '@ni/nimble-components/dist/esm/chip';\nimport { ChipAppearance } from '@ni/nimble-components/dist/esm/chip/types';\nimport { iconArrowExpanderDownTag } from '@ni/nimble-components/dist/esm/icons/arrow-expander-down';\nimport { menuTag } from '@ni/nimble-components/dist/esm/menu';\nimport { menuItemTag } from '@ni/nimble-components/dist/esm/menu-item';\nimport { toggleButtonTag } from '@ni/nimble-components/dist/esm/toggle-button';\nimport type { FvChipSelector } from '.';\n\nexport const template = html<FvChipSelector>`\n <div class=\"chip-selector\">\n ${when(\n x => x.label.length > 0,\n html<FvChipSelector>`\n <label id=\"${x => x.labelId}\" class=\"label\" for=\"${x => x.inputId}\">\n ${x => x.label}\n </label>\n `\n )}\n <div\n class=\"chip-selector-field\"\n role=\"combobox\"\n aria-expanded=\"${x => x.open}\"\n aria-controls=\"${x => x.menuId}\"\n aria-haspopup=\"listbox\"\n aria-disabled=\"${x => x.disabled}\"\n aria-labelledby=\"${x => (x.label.length > 0 ? x.labelId : null)}\"\n ${ref('field')}\n @click=\"${(x, c) => {\n x.handleFieldClick(c.event);\n return true;\n }}\"\n >\n <div class=\"chip-selector-selection-area\">\n ${repeat(\n x => x.selectedValueList,\n html<string, FvChipSelector>`\n <${chipTag}\n removable\n appearance=\"${ChipAppearance.block}\"\n data-chip-value=\"${x => x}\"\n ?disabled=\"${(_, c) => c.parent.disabled}\"\n @remove=\"${(_, c) => {\n c.parent.handleChipRemove(c.event);\n return true;\n }}\"\n >\n ${x => x}\n </${chipTag}>\n `\n )}\n <input\n id=\"${x => x.inputId}\"\n class=\"chip-selector-input\"\n type=\"text\"\n autocomplete=\"off\"\n spellcheck=\"false\"\n placeholder=\"${x => (x.selectedValueList.length === 0 ? x.placeholder : '')}\"\n :value=\"${x => x.filterText}\"\n aria-controls=\"${x => x.menuId}\"\n aria-activedescendant=\"${x => (x.open ? x.activeOptionId : null)}\"\n aria-autocomplete=\"list\"\n aria-expanded=\"${x => x.open}\"\n aria-label=\"${x => (x.label.length === 0 ? x.placeholder || 'Chip selector' : null)}\"\n aria-labelledby=\"${x => (x.label.length > 0 ? x.labelId : null)}\"\n aria-haspopup=\"listbox\"\n role=\"combobox\"\n ?disabled=\"${x => x.disabled}\"\n ${ref('captureInputRef')}\n @focus=\"${x => {\n x.handleInputFocus();\n return true;\n }}\"\n @input=\"${(x, c) => {\n x.handleInput(c.event);\n return true;\n }}\"\n @keydown=\"${(x, c) => x.handleInputKeydown(c.event as KeyboardEvent)}\"\n />\n </div>\n <${toggleButtonTag}\n class=\"chip-selector-menu-button\"\n appearance=\"ghost\"\n :checked=\"${x => x.open}\"\n ?disabled=\"${x => x.disabled}\"\n ${ref('captureMenuButtonRef')}\n @click=\"${(x, c) => {\n x.handleMenuButtonClick(c.event);\n return true;\n }}\"\n @change=\"${(x, c) => {\n x.handleMenuButtonChange(c.event);\n return true;\n }}\"\n content-hidden=\"true\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n >\n <${iconArrowExpanderDownTag} slot=\"start\" class=\"chip-selector-menu-icon\"></${iconArrowExpanderDownTag}>\n </${toggleButtonTag}>\n </div>\n ${when(\n x => x.open,\n html<FvChipSelector>`\n <${anchoredRegionTag}\n class=\"chip-selector-anchored-region\"\n ${ref('region')}\n fixed-placement\n auto-update-mode=\"auto\"\n vertical-default-position=\"bottom\"\n vertical-positioning-mode=\"locktodefault\"\n horizontal-default-position=\"center\"\n horizontal-positioning-mode=\"locktodefault\"\n horizontal-scaling=\"anchor\"\n >\n <div @click=\"${(x, c) => {\n x.handleMenuClick(c.event);\n return true;\n }}\"\n >\n <${menuTag}\n id=\"${x => x.menuId}\"\n class=\"chip-selector-menu\"\n @change=\"${(_, c) => {\n c.event.stopPropagation();\n return true;\n }}\"\n >\n ${repeat(\n x => x.visibleOptionList,\n html<string, FvChipSelector>`\n <${menuItemTag}\n id=\"${(_, c) => `${c.parent.menuId}-option-${c.index}`}\"\n class=\"chip-selector-option\"\n data-option-value=\"${x => x}\"\n >\n ${x => x}\n </${menuItemTag}>\n `\n )}\n ${when(\n x => x.customValueCandidate.length > 0,\n html<FvChipSelector>`\n <${menuItemTag}\n id=\"${x => `${x.menuId}-option-create`}\"\n class=\"chip-selector-option chip-selector-create-option\"\n data-option-value=\"${x => x.customValueCandidate}\"\n >\n ${x => x.createOptionLabel}\n </${menuItemTag}>\n `\n )}\n ${when(\n x => x.showEmptyState,\n html<FvChipSelector>`\n <div class=\"chip-selector-empty\">No matches</div>\n `\n )}\n </${menuTag}>\n </div>\n </${anchoredRegionTag}>\n `\n )}\n </div>\n`;"]}
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/fv/chip-selector/template.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, ref, repeat, when } from '@ni/fast-element';\nimport { anchoredRegionTag } from '@ni/nimble-components/dist/esm/anchored-region';\nimport { chipTag } from '@ni/nimble-components/dist/esm/chip';\nimport { ChipAppearance } from '@ni/nimble-components/dist/esm/chip/types';\nimport { iconArrowExpanderDownTag } from '@ni/nimble-components/dist/esm/icons/arrow-expander-down';\nimport { menuTag } from '@ni/nimble-components/dist/esm/menu';\nimport { menuItemTag } from '@ni/nimble-components/dist/esm/menu-item';\nimport { toggleButtonTag } from '@ni/nimble-components/dist/esm/toggle-button';\nimport type { FvChipSelector } from '.';\n\nexport const template = html<FvChipSelector>`\n <div class=\"chip-selector\">\n ${when(\n x => x.label.length > 0,\n html<FvChipSelector>`\n <label id=\"${x => x.labelId}\" class=\"label\" for=\"${x => x.inputId}\">\n ${x => x.label}\n </label>\n `\n )}\n <div\n class=\"chip-selector-field\"\n role=\"combobox\"\n aria-expanded=\"${x => x.open}\"\n aria-controls=\"${x => x.menuId}\"\n aria-haspopup=\"listbox\"\n aria-disabled=\"${x => x.disabled}\"\n aria-labelledby=\"${x => (x.label.length > 0 ? x.labelId : null)}\"\n ${ref('field')}\n @click=\"${(x, c) => {\n x.handleFieldClick(c.event);\n return true;\n }}\"\n >\n <div class=\"chip-selector-selection-area\">\n ${repeat(\n x => x.selectedValueList,\n html<string, FvChipSelector>`\n <${chipTag}\n removable\n appearance=\"${ChipAppearance.block}\"\n data-chip-value=\"${x => x}\"\n ?disabled=\"${(_, c) => c.parent.disabled}\"\n @remove=\"${(_, c) => {\n c.parent.handleChipRemove(c.event);\n return true;\n }}\"\n >\n ${x => x}\n </${chipTag}>\n `\n )}\n <input\n id=\"${x => x.inputId}\"\n class=\"chip-selector-input\"\n type=\"text\"\n autocomplete=\"off\"\n spellcheck=\"false\"\n placeholder=\"${x => (x.selectedValueList.length === 0 ? x.placeholder : '')}\"\n :value=\"${x => x.filterText}\"\n aria-controls=\"${x => x.menuId}\"\n aria-activedescendant=\"${x => (x.open ? x.activeOptionId : null)}\"\n aria-autocomplete=\"list\"\n aria-expanded=\"${x => x.open}\"\n aria-label=\"${x => (x.label.length === 0 ? x.placeholder || 'Chip selector' : null)}\"\n aria-labelledby=\"${x => (x.label.length > 0 ? x.labelId : null)}\"\n aria-haspopup=\"listbox\"\n role=\"combobox\"\n ?disabled=\"${x => x.disabled}\"\n ${ref('captureInputRef')}\n @focus=\"${x => {\n x.handleInputFocus();\n return true;\n }}\"\n @input=\"${(x, c) => {\n x.handleInput(c.event);\n return true;\n }}\"\n @keydown=\"${(x, c) => x.handleInputKeydown(c.event as KeyboardEvent)}\"\n />\n </div>\n <${toggleButtonTag}\n class=\"chip-selector-menu-button\"\n appearance=\"ghost\"\n :checked=\"${x => x.open}\"\n ?disabled=\"${x => x.disabled}\"\n ${ref('captureMenuButtonRef')}\n @click=\"${(x, c) => {\n x.handleMenuButtonClick(c.event);\n return true;\n }}\"\n @change=\"${(x, c) => {\n x.handleMenuButtonChange(c.event);\n return true;\n }}\"\n content-hidden=\"true\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n >\n <${iconArrowExpanderDownTag} slot=\"start\" class=\"chip-selector-menu-icon\"></${iconArrowExpanderDownTag}>\n </${toggleButtonTag}>\n </div>\n ${when(\n x => x.open,\n html<FvChipSelector>`\n <${anchoredRegionTag}\n class=\"chip-selector-anchored-region\"\n ${ref('region')}\n fixed-placement\n auto-update-mode=\"auto\"\n vertical-default-position=\"bottom\"\n vertical-positioning-mode=\"locktodefault\"\n horizontal-default-position=\"center\"\n horizontal-positioning-mode=\"locktodefault\"\n horizontal-scaling=\"anchor\"\n >\n <div @click=\"${(x, c) => {\n x.handleMenuClick(c.event);\n return true;\n }}\"\n >\n <${menuTag}\n id=\"${x => x.menuId}\"\n class=\"chip-selector-menu\"\n @change=\"${(_, c) => {\n c.event.stopPropagation();\n return true;\n }}\"\n >\n ${repeat(\n x => x.visibleOptionList,\n html<string, FvChipSelector>`\n <${menuItemTag}\n id=\"${(_, c) => `${c.parent.menuId}-option-${c.index}`}\"\n class=\"chip-selector-option\"\n data-option-value=\"${x => x}\"\n aria-selected=\"${(_, c) => String(c.index === c.parent.activeOptionIndex)}\"\n >\n ${x => x}\n </${menuItemTag}>\n `,\n { positioning: true }\n )}\n ${when(\n x => x.customValueCandidate.length > 0,\n html<FvChipSelector>`\n <${menuItemTag}\n id=\"${x => `${x.menuId}-option-create`}\"\n class=\"chip-selector-option chip-selector-create-option\"\n data-option-value=\"${x => x.customValueCandidate}\"\n aria-selected=\"${x => String(x.activeOptionIndex === x.visibleOptionList.length)}\"\n >\n ${x => x.createOptionLabel}\n </${menuItemTag}>\n `\n )}\n ${when(\n x => x.showEmptyState,\n html<FvChipSelector>`\n <div class=\"chip-selector-empty\">No matches</div>\n `\n )}\n </${menuTag}>\n </div>\n </${anchoredRegionTag}>\n `\n )}\n </div>\n`;"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/ok-components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.10.1",
|
|
4
4
|
"description": "NI Ok Components",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "npm run build:components && npm run build:cem",
|
|
@@ -43,8 +43,8 @@
|
|
|
43
43
|
"@ni/fast-element": "^10.2.0",
|
|
44
44
|
"@ni/fast-foundation": "^10.3.0",
|
|
45
45
|
"@ni/fast-web-utilities": "^10.1.0",
|
|
46
|
-
"@ni/nimble-components": "^35.
|
|
47
|
-
"@ni/spright-components": "^6.
|
|
46
|
+
"@ni/nimble-components": "^35.15.1",
|
|
47
|
+
"@ni/spright-components": "^6.23.1",
|
|
48
48
|
"tslib": "^2.2.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"@custom-elements-manifest/to-markdown": "^0.1.0",
|
|
53
53
|
"@ni-private/eslint-config-nimble": "*",
|
|
54
54
|
"@ni-private/jasmine-extensions": "^0.0.1",
|
|
55
|
-
"@ni/jasmine-parameterized": "^1.0.
|
|
55
|
+
"@ni/jasmine-parameterized": "^1.0.14",
|
|
56
56
|
"@rollup/plugin-commonjs": "^29.0.0",
|
|
57
57
|
"@rollup/plugin-node-resolve": "^16.0.0",
|
|
58
58
|
"@rollup/plugin-replace": "^6.0.0",
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
"karma-jasmine": "^5.1.0",
|
|
66
66
|
"karma-jasmine-html-reporter": "^2.0.0",
|
|
67
67
|
"karma-jasmine-spec-tags": "^2.0.0",
|
|
68
|
-
"karma-spec-reporter": "^0.0.
|
|
68
|
+
"karma-spec-reporter": "^0.0.37",
|
|
69
69
|
"karma-vite": "^1.0.5",
|
|
70
70
|
"karma-webkit-launcher": "^2.6.0",
|
|
71
71
|
"playwright": "1.62.0",
|