@vonage/vivid 4.14.0 → 4.14.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/custom-elements.json +152 -197
- package/lib/divider/divider.d.ts +1 -1
- package/lib/divider/divider.template.d.ts +1 -1
- package/lib/elevation/elevation.d.ts +1 -0
- package/lib/radio/radio.form-associated.d.ts +2 -0
- package/lib/tabs/tabs.d.ts +0 -5
- package/lib/text-anchor/text-anchor.d.ts +2 -2
- package/lib/tree-item/tree-item.d.ts +2 -2
- package/lib/tree-view/tree-view.d.ts +2 -2
- package/package.json +1 -1
- package/shared/affix.cjs +8 -8
- package/shared/affix.js +2 -2
- package/shared/anchor.cjs +10 -10
- package/shared/anchor.js +1 -1
- package/shared/anchored.cjs +6 -6
- package/shared/anchored.js +1 -1
- package/shared/apply-mixins.cjs +3 -3
- package/shared/apply-mixins.js +1 -1
- package/shared/apply-mixins2.cjs +3 -3
- package/shared/apply-mixins2.js +1 -1
- package/shared/applyMixinsWithObservables.cjs +3 -3
- package/shared/applyMixinsWithObservables.js +1 -1
- package/shared/aria-global.cjs +20 -20
- package/shared/aria-global.js +1 -1
- package/shared/base-progress.cjs +7 -8
- package/shared/base-progress.js +2 -3
- package/shared/breadcrumb-item.cjs +2 -3
- package/shared/breadcrumb-item.js +1 -2
- package/shared/button.cjs +10 -11
- package/shared/button.js +1 -2
- package/shared/calendar-event.cjs +7 -8
- package/shared/calendar-event.js +1 -2
- package/shared/children.cjs +2 -2
- package/shared/children.js +1 -1
- package/shared/definition.cjs +14 -15
- package/shared/definition.js +2 -3
- package/shared/definition10.cjs +5 -6
- package/shared/definition10.js +1 -2
- package/shared/definition11.cjs +29 -29
- package/shared/definition11.js +2 -2
- package/shared/definition12.cjs +6 -6
- package/shared/definition12.js +1 -1
- package/shared/definition13.cjs +13 -14
- package/shared/definition13.js +1 -2
- package/shared/definition14.cjs +23 -24
- package/shared/definition14.js +1 -2
- package/shared/definition15.cjs +15 -16
- package/shared/definition15.js +1 -2
- package/shared/definition16.cjs +21 -21
- package/shared/definition16.js +5 -5
- package/shared/definition17.cjs +62 -61
- package/shared/definition17.js +10 -9
- package/shared/definition18.cjs +4 -4
- package/shared/definition18.js +1 -1
- package/shared/definition19.cjs +12 -12
- package/shared/definition19.js +1 -1
- package/shared/definition2.cjs +6 -7
- package/shared/definition2.js +1 -2
- package/shared/definition20.cjs +20 -21
- package/shared/definition20.js +1 -2
- package/shared/definition21.cjs +27 -28
- package/shared/definition21.js +3 -4
- package/shared/definition22.cjs +7 -7
- package/shared/definition22.js +3 -3
- package/shared/definition23.cjs +10 -11
- package/shared/definition23.js +1 -2
- package/shared/definition24.cjs +8 -8
- package/shared/definition24.js +3 -3
- package/shared/definition25.cjs +13 -14
- package/shared/definition25.js +1 -2
- package/shared/definition26.cjs +5 -6
- package/shared/definition26.js +1 -2
- package/shared/definition27.cjs +12 -13
- package/shared/definition27.js +2 -3
- package/shared/definition28.cjs +9 -10
- package/shared/definition28.js +2 -3
- package/shared/definition29.cjs +44 -45
- package/shared/definition29.js +3 -4
- package/shared/definition3.cjs +8 -9
- package/shared/definition3.js +1 -2
- package/shared/definition30.cjs +9 -10
- package/shared/definition30.js +2 -3
- package/shared/definition31.cjs +5 -5
- package/shared/definition31.js +2 -2
- package/shared/definition32.cjs +3 -4
- package/shared/definition32.js +1 -2
- package/shared/definition33.cjs +6 -7
- package/shared/definition33.js +2 -3
- package/shared/definition34.cjs +112 -45
- package/shared/definition34.js +73 -6
- package/shared/definition35.cjs +9 -209
- package/shared/definition35.js +4 -202
- package/shared/definition36.cjs +15 -16
- package/shared/definition36.js +1 -2
- package/shared/definition37.cjs +9 -9
- package/shared/definition37.js +1 -1
- package/shared/definition38.cjs +10 -10
- package/shared/definition38.js +1 -1
- package/shared/definition39.cjs +12 -13
- package/shared/definition39.js +1 -2
- package/shared/definition4.cjs +19 -20
- package/shared/definition4.js +2 -3
- package/shared/definition40.cjs +61 -13
- package/shared/definition40.js +52 -4
- package/shared/definition41.cjs +29 -30
- package/shared/definition41.js +1 -2
- package/shared/definition42.cjs +52 -53
- package/shared/definition42.js +3 -4
- package/shared/definition43.cjs +40 -40
- package/shared/definition43.js +6 -6
- package/shared/definition44.cjs +14 -15
- package/shared/definition44.js +1 -2
- package/shared/definition45.cjs +9 -10
- package/shared/definition45.js +1 -2
- package/shared/definition46.cjs +26 -27
- package/shared/definition46.js +1 -2
- package/shared/definition47.cjs +17 -18
- package/shared/definition47.js +2 -3
- package/shared/definition48.cjs +9 -10
- package/shared/definition48.js +1 -2
- package/shared/definition49.cjs +3 -4
- package/shared/definition49.js +1 -2
- package/shared/definition5.cjs +30 -31
- package/shared/definition5.js +1 -2
- package/shared/definition50.cjs +12 -13
- package/shared/definition50.js +2 -3
- package/shared/definition51.cjs +109 -72
- package/shared/definition51.js +78 -41
- package/shared/definition52.cjs +4 -5
- package/shared/definition52.js +1 -2
- package/shared/definition53.cjs +15 -16
- package/shared/definition53.js +2 -3
- package/shared/definition54.cjs +20 -21
- package/shared/definition54.js +1 -2
- package/shared/definition55.cjs +5 -5
- package/shared/definition55.js +1 -1
- package/shared/definition56.cjs +18 -19
- package/shared/definition56.js +1 -2
- package/shared/definition57.cjs +10 -11
- package/shared/definition57.js +1 -2
- package/shared/definition58.cjs +7 -8
- package/shared/definition58.js +1 -2
- package/shared/definition59.cjs +16 -17
- package/shared/definition59.js +3 -4
- package/shared/definition6.cjs +11 -12
- package/shared/definition6.js +1 -2
- package/shared/definition60.cjs +9 -10
- package/shared/definition60.js +2 -3
- package/shared/definition61.cjs +27 -30
- package/shared/definition61.js +17 -20
- package/shared/definition62.cjs +12 -9
- package/shared/definition62.js +8 -5
- package/shared/definition63.cjs +13 -14
- package/shared/definition63.js +1 -2
- package/shared/definition7.cjs +9 -10
- package/shared/definition7.js +2 -3
- package/shared/definition8.cjs +14 -15
- package/shared/definition8.js +2 -3
- package/shared/definition9.cjs +7 -7
- package/shared/definition9.js +1 -1
- package/shared/form-associated.cjs +14 -14
- package/shared/form-associated.js +1 -1
- package/shared/form-associated2.cjs +10 -10
- package/shared/form-associated2.js +1 -1
- package/shared/form-elements.cjs +13 -13
- package/shared/form-elements.js +1 -1
- package/shared/foundation/progress/base-progress.d.ts +2 -2
- package/shared/foundation-element.cjs +11 -11
- package/shared/foundation-element.js +1 -1
- package/shared/key-codes2.cjs +0 -56
- package/shared/key-codes2.js +1 -53
- package/shared/listbox.cjs +15 -16
- package/shared/listbox.js +2 -3
- package/shared/localized.cjs +2 -2
- package/shared/localized.js +1 -1
- package/shared/option.cjs +205 -0
- package/shared/option.js +202 -0
- package/shared/presentationDate.cjs +42 -43
- package/shared/presentationDate.js +1 -2
- package/shared/ref.cjs +2 -2
- package/shared/ref.js +1 -1
- package/shared/repeat.cjs +15 -15
- package/shared/repeat.js +1 -1
- package/shared/slider.template.cjs +4 -4
- package/shared/slider.template.js +1 -1
- package/shared/slotted.cjs +4 -4
- package/shared/slotted.js +1 -1
- package/shared/start-end.cjs +52 -0
- package/shared/start-end.js +50 -0
- package/shared/text-anchor.cjs +5 -6
- package/shared/text-anchor.js +3 -4
- package/shared/text-anchor.template.cjs +2 -2
- package/shared/text-anchor.template.js +1 -1
- package/shared/text-field2.cjs +23 -24
- package/shared/text-field2.js +2 -3
- package/shared/vivid-element.cjs +2610 -2
- package/shared/vivid-element.js +2591 -2
- package/styles/core/all.css +40 -1
- package/styles/core/theme.css +40 -1
- package/styles/core/typography.css +1 -1
- package/styles/tokens/theme-dark.css +25 -4
- package/styles/tokens/theme-light.css +25 -4
- package/styles/tokens/vivid-2-compat.css +1 -1
- package/text-anchor/index.cjs +3 -3
- package/text-anchor/index.js +1 -1
- package/lib/listbox/definition.d.ts +0 -2
- package/lib/listbox/listbox.d.ts +0 -14
- package/lib/listbox/listbox.template.d.ts +0 -2
- package/listbox/index.cjs +0 -54
- package/listbox/index.js +0 -52
- package/shared/aria-global2.cjs +0 -75
- package/shared/aria-global2.js +0 -73
- package/shared/defineVividComponent.cjs +0 -2612
- package/shared/defineVividComponent.js +0 -2592
- package/shared/listbox2.cjs +0 -1268
- package/shared/listbox2.js +0 -1265
- package/shared/strings2.cjs +0 -37
- package/shared/strings2.js +0 -33
package/shared/definition16.cjs
CHANGED
|
@@ -4,7 +4,7 @@ const definition$1 = require('./definition27.cjs');
|
|
|
4
4
|
const definition = require('./definition63.cjs');
|
|
5
5
|
const definition$2 = require('./definition35.cjs');
|
|
6
6
|
const textField = require('./text-field.cjs');
|
|
7
|
-
const
|
|
7
|
+
const vividElement = require('./vivid-element.cjs');
|
|
8
8
|
const listbox = require('./listbox.cjs');
|
|
9
9
|
const formAssociated = require('./form-associated.cjs');
|
|
10
10
|
const affix = require('./affix.cjs');
|
|
@@ -12,7 +12,6 @@ const strings = require('./strings.cjs');
|
|
|
12
12
|
const numbers = require('./numbers.cjs');
|
|
13
13
|
const applyMixins = require('./apply-mixins2.cjs');
|
|
14
14
|
const formElements = require('./form-elements.cjs');
|
|
15
|
-
const listbox$1 = require('./listbox2.cjs');
|
|
16
15
|
const index = require('./index.cjs');
|
|
17
16
|
const ref = require('./ref.cjs');
|
|
18
17
|
const slotted = require('./slotted.cjs');
|
|
@@ -114,7 +113,7 @@ let Combobox = class extends FormAssociatedCombobox {
|
|
|
114
113
|
this.ariaControls = this.listboxId;
|
|
115
114
|
this.ariaExpanded = "true";
|
|
116
115
|
this.focusAndScrollOptionIntoView();
|
|
117
|
-
|
|
116
|
+
vividElement.DOM.queueUpdate(() => this.focus());
|
|
118
117
|
return;
|
|
119
118
|
}
|
|
120
119
|
this.ariaControls = "";
|
|
@@ -128,12 +127,12 @@ let Combobox = class extends FormAssociatedCombobox {
|
|
|
128
127
|
* Overrides `Listbox.options`.
|
|
129
128
|
*/
|
|
130
129
|
get options() {
|
|
131
|
-
|
|
130
|
+
vividElement.Observable.track(this, "options");
|
|
132
131
|
return this.filteredOptions.length ? this.filteredOptions : this._options;
|
|
133
132
|
}
|
|
134
133
|
set options(value) {
|
|
135
134
|
this._options = value;
|
|
136
|
-
|
|
135
|
+
vividElement.Observable.notify(this, "options");
|
|
137
136
|
}
|
|
138
137
|
/**
|
|
139
138
|
* Updates the placeholder on the proxy element.
|
|
@@ -150,7 +149,7 @@ let Combobox = class extends FormAssociatedCombobox {
|
|
|
150
149
|
* @public
|
|
151
150
|
*/
|
|
152
151
|
get value() {
|
|
153
|
-
|
|
152
|
+
vividElement.Observable.track(this, "value");
|
|
154
153
|
return this._value;
|
|
155
154
|
}
|
|
156
155
|
set value(next) {
|
|
@@ -167,7 +166,7 @@ let Combobox = class extends FormAssociatedCombobox {
|
|
|
167
166
|
if (prev !== next) {
|
|
168
167
|
this._value = next;
|
|
169
168
|
super.valueChanged(prev, next);
|
|
170
|
-
|
|
169
|
+
vividElement.Observable.notify(this, "value");
|
|
171
170
|
}
|
|
172
171
|
}
|
|
173
172
|
/**
|
|
@@ -504,26 +503,26 @@ let Combobox = class extends FormAssociatedCombobox {
|
|
|
504
503
|
}
|
|
505
504
|
};
|
|
506
505
|
__decorateClass([
|
|
507
|
-
|
|
506
|
+
vividElement.attr({ attribute: "autocomplete", mode: "fromView" })
|
|
508
507
|
], Combobox.prototype, "autocomplete", 2);
|
|
509
508
|
__decorateClass([
|
|
510
|
-
|
|
509
|
+
vividElement.attr
|
|
511
510
|
], Combobox.prototype, "appearance", 2);
|
|
512
511
|
__decorateClass([
|
|
513
|
-
|
|
512
|
+
vividElement.attr
|
|
514
513
|
], Combobox.prototype, "placement", 2);
|
|
515
514
|
__decorateClass([
|
|
516
|
-
|
|
515
|
+
vividElement.attr({ mode: "boolean", attribute: "fixed-dropdown" })
|
|
517
516
|
], Combobox.prototype, "fixedDropdown", 2);
|
|
518
517
|
__decorateClass([
|
|
519
|
-
|
|
518
|
+
vividElement.observable
|
|
520
519
|
], Combobox.prototype, "maxHeight", 2);
|
|
521
520
|
__decorateClass([
|
|
522
|
-
|
|
521
|
+
vividElement.attr({ attribute: "open", mode: "boolean" })
|
|
523
522
|
], Combobox.prototype, "open", 2);
|
|
524
523
|
// @ts-expect-error Type is incorrectly non-optional
|
|
525
524
|
__decorateClass([
|
|
526
|
-
|
|
525
|
+
vividElement.attr
|
|
527
526
|
], Combobox.prototype, "placeholder", 2);
|
|
528
527
|
Combobox = __decorateClass([
|
|
529
528
|
formElements.formElements
|
|
@@ -531,7 +530,7 @@ Combobox = __decorateClass([
|
|
|
531
530
|
applyMixins.applyMixins(Combobox, affix.AffixIcon);
|
|
532
531
|
|
|
533
532
|
function renderLabel() {
|
|
534
|
-
return
|
|
533
|
+
return vividElement.html` <label for="control" class="label">
|
|
535
534
|
${(x) => x.label}
|
|
536
535
|
</label>`;
|
|
537
536
|
}
|
|
@@ -554,14 +553,15 @@ function setFixedDropdownVarWidth(x) {
|
|
|
554
553
|
}
|
|
555
554
|
function renderInput(context) {
|
|
556
555
|
const affixIconTemplate = affix.affixIconTemplateFactory(context);
|
|
557
|
-
return
|
|
556
|
+
return vividElement.html` <div class="${getStateClasses}" ${ref.ref("_anchor")}>
|
|
558
557
|
${when.when((x) => x.label, renderLabel())}
|
|
559
558
|
<div class="fieldset">
|
|
560
559
|
<input
|
|
561
560
|
id="control"
|
|
561
|
+
autocomplete="off"
|
|
562
562
|
class="control"
|
|
563
563
|
aria-activedescendant="${(x) => x.open ? x.ariaActiveDescendant : null}"
|
|
564
|
-
aria-autocomplete="${(x) => x.
|
|
564
|
+
aria-autocomplete="${(x) => x.autocomplete}"
|
|
565
565
|
aria-controls="${(x) => x.listboxId}"
|
|
566
566
|
aria-disabled="${(x) => x.ariaDisabled}"
|
|
567
567
|
aria-expanded="${(x) => x.open}"
|
|
@@ -580,7 +580,7 @@ function renderInput(context) {
|
|
|
580
580
|
}
|
|
581
581
|
const comboboxTemplate = (context) => {
|
|
582
582
|
const popupTag = context.tagFor(definition.Popup);
|
|
583
|
-
return
|
|
583
|
+
return vividElement.html`
|
|
584
584
|
<template
|
|
585
585
|
aria-disabled="${(x) => x.ariaDisabled}"
|
|
586
586
|
autocomplete="${(x) => x.autocomplete}"
|
|
@@ -605,7 +605,7 @@ const comboboxTemplate = (context) => {
|
|
|
605
605
|
?disabled="${(x) => x.disabled}"
|
|
606
606
|
${ref.ref("listbox")}>
|
|
607
607
|
<slot ${slotted.slotted({
|
|
608
|
-
filter: listbox
|
|
608
|
+
filter: listbox.Listbox.slottedOptionFilter,
|
|
609
609
|
flatten: true,
|
|
610
610
|
property: "slottedOptions"
|
|
611
611
|
})}>
|
|
@@ -616,7 +616,7 @@ const comboboxTemplate = (context) => {
|
|
|
616
616
|
`;
|
|
617
617
|
};
|
|
618
618
|
|
|
619
|
-
const comboboxDefinition =
|
|
619
|
+
const comboboxDefinition = vividElement.defineVividComponent(
|
|
620
620
|
"combobox",
|
|
621
621
|
Combobox,
|
|
622
622
|
comboboxTemplate,
|
|
@@ -628,7 +628,7 @@ const comboboxDefinition = defineVividComponent.defineVividComponent(
|
|
|
628
628
|
}
|
|
629
629
|
}
|
|
630
630
|
);
|
|
631
|
-
const registerCombobox =
|
|
631
|
+
const registerCombobox = vividElement.createRegisterFunction(comboboxDefinition);
|
|
632
632
|
|
|
633
633
|
exports.comboboxDefinition = comboboxDefinition;
|
|
634
634
|
exports.registerCombobox = registerCombobox;
|
package/shared/definition16.js
CHANGED
|
@@ -2,15 +2,14 @@ import { i as iconDefinition } from './definition27.js';
|
|
|
2
2
|
import { P as Popup, p as popupDefinition } from './definition63.js';
|
|
3
3
|
import { l as listboxOptionDefinition } from './definition35.js';
|
|
4
4
|
import { s as styles$1 } from './text-field.js';
|
|
5
|
-
import { D as DOM, O as Observable, a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './
|
|
5
|
+
import { D as DOM, O as Observable, a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
|
|
6
6
|
import { L as Listbox } from './listbox.js';
|
|
7
7
|
import { F as FormAssociated } from './form-associated.js';
|
|
8
|
-
import {
|
|
8
|
+
import { b as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
|
|
9
9
|
import { u as uniqueId } from './strings.js';
|
|
10
10
|
import { l as limit } from './numbers.js';
|
|
11
11
|
import { a as applyMixins } from './apply-mixins2.js';
|
|
12
12
|
import { f as formElements } from './form-elements.js';
|
|
13
|
-
import { a as Listbox$1 } from './listbox2.js';
|
|
14
13
|
import { h as handleEscapeKeyAndStopPropogation } from './index.js';
|
|
15
14
|
import { r as ref } from './ref.js';
|
|
16
15
|
import { s as slotted } from './slotted.js';
|
|
@@ -557,9 +556,10 @@ function renderInput(context) {
|
|
|
557
556
|
<div class="fieldset">
|
|
558
557
|
<input
|
|
559
558
|
id="control"
|
|
559
|
+
autocomplete="off"
|
|
560
560
|
class="control"
|
|
561
561
|
aria-activedescendant="${(x) => x.open ? x.ariaActiveDescendant : null}"
|
|
562
|
-
aria-autocomplete="${(x) => x.
|
|
562
|
+
aria-autocomplete="${(x) => x.autocomplete}"
|
|
563
563
|
aria-controls="${(x) => x.listboxId}"
|
|
564
564
|
aria-disabled="${(x) => x.ariaDisabled}"
|
|
565
565
|
aria-expanded="${(x) => x.open}"
|
|
@@ -603,7 +603,7 @@ const comboboxTemplate = (context) => {
|
|
|
603
603
|
?disabled="${(x) => x.disabled}"
|
|
604
604
|
${ref("listbox")}>
|
|
605
605
|
<slot ${slotted({
|
|
606
|
-
filter: Listbox
|
|
606
|
+
filter: Listbox.slottedOptionFilter,
|
|
607
607
|
flatten: true,
|
|
608
608
|
property: "slottedOptions"
|
|
609
609
|
})}>
|
package/shared/definition17.cjs
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
const definition = require('./definition27.cjs');
|
|
4
|
-
const defineVividComponent = require('./defineVividComponent.cjs');
|
|
5
4
|
const vividElement = require('./vivid-element.cjs');
|
|
6
5
|
const keyCodes = require('./key-codes.cjs');
|
|
7
6
|
const repeat = require('./repeat.cjs');
|
|
@@ -124,7 +123,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
|
|
|
124
123
|
this.queueRowIndexUpdate = () => {
|
|
125
124
|
if (!this.rowindexUpdateQueued) {
|
|
126
125
|
this.rowindexUpdateQueued = true;
|
|
127
|
-
|
|
126
|
+
vividElement.DOM.queueUpdate(this.updateRowIndexes);
|
|
128
127
|
}
|
|
129
128
|
};
|
|
130
129
|
this.updateRowIndexes = () => {
|
|
@@ -275,15 +274,16 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
|
|
|
275
274
|
* @internal
|
|
276
275
|
*/
|
|
277
276
|
noTabbingChanged() {
|
|
278
|
-
if (this.
|
|
279
|
-
this
|
|
280
|
-
} else {
|
|
281
|
-
this.setAttribute(
|
|
282
|
-
"tabIndex",
|
|
283
|
-
this.contains(document.activeElement) ? "-1" : "0"
|
|
284
|
-
);
|
|
277
|
+
if (this.$fastController.isConnected) {
|
|
278
|
+
this.#setTabIndex();
|
|
285
279
|
}
|
|
286
280
|
}
|
|
281
|
+
#setTabIndex() {
|
|
282
|
+
this.setAttribute(
|
|
283
|
+
"tabIndex",
|
|
284
|
+
this.noTabbing || this.contains(document.activeElement) ? "-1" : "0"
|
|
285
|
+
);
|
|
286
|
+
}
|
|
287
287
|
/**
|
|
288
288
|
* @internal
|
|
289
289
|
*/
|
|
@@ -376,8 +376,9 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
|
|
|
376
376
|
this.addEventListener(eventFocusOut, this.handleFocusOut);
|
|
377
377
|
this.observer = new MutationObserver(this.onChildListChange);
|
|
378
378
|
this.observer.observe(this, { childList: true });
|
|
379
|
-
|
|
380
|
-
|
|
379
|
+
vividElement.DOM.queueUpdate(this.queueRowIndexUpdate);
|
|
380
|
+
this.#setTabIndex();
|
|
381
|
+
vividElement.Observable.getNotifier(this).subscribe(
|
|
381
382
|
this.#changeHandler,
|
|
382
383
|
"columnDefinitions"
|
|
383
384
|
);
|
|
@@ -397,7 +398,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
|
|
|
397
398
|
this.observer.disconnect();
|
|
398
399
|
this.rowsPlaceholder = null;
|
|
399
400
|
this.generatedHeader = null;
|
|
400
|
-
|
|
401
|
+
vividElement.Observable.getNotifier(this).unsubscribe(
|
|
401
402
|
this.#changeHandler,
|
|
402
403
|
"columnDefinitions"
|
|
403
404
|
);
|
|
@@ -515,7 +516,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
|
|
|
515
516
|
}
|
|
516
517
|
if (this.pendingFocusUpdate === false) {
|
|
517
518
|
this.pendingFocusUpdate = true;
|
|
518
|
-
|
|
519
|
+
vividElement.DOM.queueUpdate(() => this.updateFocus());
|
|
519
520
|
}
|
|
520
521
|
}
|
|
521
522
|
updateFocus() {
|
|
@@ -568,7 +569,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
|
|
|
568
569
|
}
|
|
569
570
|
selectionModeChanged(oldValue) {
|
|
570
571
|
if (oldValue === void 0) {
|
|
571
|
-
|
|
572
|
+
vividElement.DOM.queueUpdate(this.#initSelections);
|
|
572
573
|
return;
|
|
573
574
|
}
|
|
574
575
|
this.#resetSelection();
|
|
@@ -591,50 +592,50 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
|
|
|
591
592
|
}
|
|
592
593
|
};
|
|
593
594
|
__decorateClass$2([
|
|
594
|
-
|
|
595
|
+
vividElement.attr({ attribute: "no-tabbing", mode: "boolean" })
|
|
595
596
|
], _DataGrid.prototype, "noTabbing");
|
|
596
597
|
__decorateClass$2([
|
|
597
|
-
|
|
598
|
+
vividElement.attr({ attribute: "generate-header" })
|
|
598
599
|
], _DataGrid.prototype, "generateHeader");
|
|
599
600
|
// @ts-expect-error Type is incorrectly non-optional
|
|
600
601
|
__decorateClass$2([
|
|
601
|
-
|
|
602
|
+
vividElement.attr({ attribute: "grid-template-columns" })
|
|
602
603
|
], _DataGrid.prototype, "gridTemplateColumns");
|
|
603
604
|
__decorateClass$2([
|
|
604
|
-
|
|
605
|
+
vividElement.observable
|
|
605
606
|
], _DataGrid.prototype, "rowsData");
|
|
606
607
|
__decorateClass$2([
|
|
607
|
-
|
|
608
|
+
vividElement.observable
|
|
608
609
|
], _DataGrid.prototype, "columnDefinitions");
|
|
609
610
|
__decorateClass$2([
|
|
610
|
-
|
|
611
|
+
vividElement.observable
|
|
611
612
|
], _DataGrid.prototype, "rowItemTemplate");
|
|
612
613
|
__decorateClass$2([
|
|
613
|
-
|
|
614
|
+
vividElement.observable
|
|
614
615
|
], _DataGrid.prototype, "cellItemTemplate");
|
|
615
616
|
__decorateClass$2([
|
|
616
|
-
|
|
617
|
+
vividElement.observable
|
|
617
618
|
], _DataGrid.prototype, "headerCellItemTemplate");
|
|
618
619
|
__decorateClass$2([
|
|
619
|
-
|
|
620
|
+
vividElement.observable
|
|
620
621
|
], _DataGrid.prototype, "focusRowIndex");
|
|
621
622
|
__decorateClass$2([
|
|
622
|
-
|
|
623
|
+
vividElement.observable
|
|
623
624
|
], _DataGrid.prototype, "focusColumnIndex");
|
|
624
625
|
__decorateClass$2([
|
|
625
|
-
|
|
626
|
+
vividElement.observable
|
|
626
627
|
], _DataGrid.prototype, "defaultRowItemTemplate");
|
|
627
628
|
__decorateClass$2([
|
|
628
|
-
|
|
629
|
+
vividElement.observable
|
|
629
630
|
], _DataGrid.prototype, "rowElementTag");
|
|
630
631
|
__decorateClass$2([
|
|
631
|
-
|
|
632
|
+
vividElement.observable
|
|
632
633
|
], _DataGrid.prototype, "rowElements");
|
|
633
634
|
__decorateClass$2([
|
|
634
|
-
|
|
635
|
+
vividElement.observable
|
|
635
636
|
], _DataGrid.prototype, "slottedRowElements");
|
|
636
637
|
__decorateClass$2([
|
|
637
|
-
|
|
638
|
+
vividElement.attr({ attribute: "selection-mode" })
|
|
638
639
|
], _DataGrid.prototype, "selectionMode");
|
|
639
640
|
let DataGrid = _DataGrid;
|
|
640
641
|
|
|
@@ -774,45 +775,45 @@ class DataGridRow extends vividElement.VividElement {
|
|
|
774
775
|
}
|
|
775
776
|
// @ts-expect-error Type is incorrectly non-optional
|
|
776
777
|
__decorateClass$1([
|
|
777
|
-
|
|
778
|
+
vividElement.attr({ attribute: "grid-template-columns" })
|
|
778
779
|
], DataGridRow.prototype, "gridTemplateColumns");
|
|
779
780
|
__decorateClass$1([
|
|
780
|
-
|
|
781
|
+
vividElement.attr({ attribute: "row-type" })
|
|
781
782
|
], DataGridRow.prototype, "rowType");
|
|
782
783
|
__decorateClass$1([
|
|
783
|
-
|
|
784
|
+
vividElement.observable
|
|
784
785
|
], DataGridRow.prototype, "rowData");
|
|
785
786
|
__decorateClass$1([
|
|
786
|
-
|
|
787
|
+
vividElement.observable
|
|
787
788
|
], DataGridRow.prototype, "columnDefinitions");
|
|
788
789
|
__decorateClass$1([
|
|
789
|
-
|
|
790
|
+
vividElement.observable
|
|
790
791
|
], DataGridRow.prototype, "cellItemTemplate");
|
|
791
792
|
__decorateClass$1([
|
|
792
|
-
|
|
793
|
+
vividElement.observable
|
|
793
794
|
], DataGridRow.prototype, "headerCellItemTemplate");
|
|
794
795
|
__decorateClass$1([
|
|
795
|
-
|
|
796
|
+
vividElement.observable
|
|
796
797
|
], DataGridRow.prototype, "rowIndex");
|
|
797
798
|
__decorateClass$1([
|
|
798
|
-
|
|
799
|
+
vividElement.observable
|
|
799
800
|
], DataGridRow.prototype, "activeCellItemTemplate");
|
|
800
801
|
__decorateClass$1([
|
|
801
|
-
|
|
802
|
+
vividElement.observable
|
|
802
803
|
], DataGridRow.prototype, "defaultCellItemTemplate");
|
|
803
804
|
__decorateClass$1([
|
|
804
|
-
|
|
805
|
+
vividElement.observable
|
|
805
806
|
], DataGridRow.prototype, "defaultHeaderCellItemTemplate");
|
|
806
807
|
__decorateClass$1([
|
|
807
|
-
|
|
808
|
+
vividElement.observable
|
|
808
809
|
], DataGridRow.prototype, "cellElements");
|
|
809
810
|
__decorateClass$1([
|
|
810
|
-
|
|
811
|
+
vividElement.attr({ attribute: "aria-selected" })
|
|
811
812
|
], DataGridRow.prototype, "ariaSelected");
|
|
812
813
|
|
|
813
814
|
function createRowItemTemplate(context) {
|
|
814
815
|
const rowTag = context.tagFor(DataGridRow);
|
|
815
|
-
return
|
|
816
|
+
return vividElement.html`
|
|
816
817
|
<${rowTag}
|
|
817
818
|
:rowData="${(x) => x}"
|
|
818
819
|
:cellItemTemplate="${(_, c) => c.parent.cellItemTemplate}"
|
|
@@ -840,7 +841,7 @@ function handleColumnSort(_, { event }) {
|
|
|
840
841
|
const DataGridTemplate = (context) => {
|
|
841
842
|
const rowItemTemplate = createRowItemTemplate(context);
|
|
842
843
|
const rowTag = context.tagFor(DataGridRow);
|
|
843
|
-
return
|
|
844
|
+
return vividElement.html`
|
|
844
845
|
<template
|
|
845
846
|
aria-multiselectable="${getMultiSelectAriaState}"
|
|
846
847
|
role="grid"
|
|
@@ -870,12 +871,12 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
870
871
|
if (result) __defProp(target, key, result);
|
|
871
872
|
return result;
|
|
872
873
|
};
|
|
873
|
-
const defaultCellContentsTemplate =
|
|
874
|
+
const defaultCellContentsTemplate = vividElement.html`
|
|
874
875
|
<template>
|
|
875
876
|
${(x) => x.rowData === null || x.columnDefinition === null || x.columnDefinition.columnDataKey === null ? null : x.rowData[x.columnDefinition.columnDataKey]}
|
|
876
877
|
</template>
|
|
877
878
|
`;
|
|
878
|
-
const defaultHeaderCellContentsTemplate =
|
|
879
|
+
const defaultHeaderCellContentsTemplate = vividElement.html`
|
|
879
880
|
<template>
|
|
880
881
|
${(x) => x.columnDefinition.title === void 0 ? x.columnDefinition.columnDataKey : x.columnDefinition.title}
|
|
881
882
|
</template>
|
|
@@ -1092,27 +1093,27 @@ class DataGridCell extends vividElement.VividElement {
|
|
|
1092
1093
|
}
|
|
1093
1094
|
}
|
|
1094
1095
|
__decorateClass([
|
|
1095
|
-
|
|
1096
|
+
vividElement.attr({ attribute: "cell-type" })
|
|
1096
1097
|
], DataGridCell.prototype, "cellType");
|
|
1097
1098
|
__decorateClass([
|
|
1098
|
-
|
|
1099
|
+
vividElement.attr({ attribute: "grid-column" })
|
|
1099
1100
|
], DataGridCell.prototype, "gridColumn");
|
|
1100
1101
|
__decorateClass([
|
|
1101
|
-
|
|
1102
|
+
vividElement.observable
|
|
1102
1103
|
], DataGridCell.prototype, "rowData");
|
|
1103
1104
|
__decorateClass([
|
|
1104
|
-
|
|
1105
|
+
vividElement.observable
|
|
1105
1106
|
], DataGridCell.prototype, "columnDefinition");
|
|
1106
1107
|
__decorateClass([
|
|
1107
|
-
|
|
1108
|
+
vividElement.attr({ attribute: "aria-selected", mode: "fromView" })
|
|
1108
1109
|
], DataGridCell.prototype, "ariaSelected");
|
|
1109
1110
|
__decorateClass([
|
|
1110
|
-
|
|
1111
|
+
vividElement.attr({ attribute: "aria-sort" })
|
|
1111
1112
|
], DataGridCell.prototype, "ariaSort");
|
|
1112
1113
|
|
|
1113
1114
|
function createCellItemTemplate(context) {
|
|
1114
1115
|
const cellTag = context.tagFor(DataGridCell);
|
|
1115
|
-
return
|
|
1116
|
+
return vividElement.html`
|
|
1116
1117
|
<${cellTag}
|
|
1117
1118
|
cell-type="${(x) => x.isRowHeader ? "rowheader" : void 0}"
|
|
1118
1119
|
grid-column="${(_, c) => c.index + 1}"
|
|
@@ -1124,7 +1125,7 @@ function createCellItemTemplate(context) {
|
|
|
1124
1125
|
}
|
|
1125
1126
|
function createHeaderCellItemTemplate(context) {
|
|
1126
1127
|
const cellTag = context.tagFor(DataGridCell);
|
|
1127
|
-
return
|
|
1128
|
+
return vividElement.html`
|
|
1128
1129
|
<${cellTag}
|
|
1129
1130
|
cell-type="columnheader"
|
|
1130
1131
|
grid-column="${(_, c) => c.index + 1}"
|
|
@@ -1135,7 +1136,7 @@ function createHeaderCellItemTemplate(context) {
|
|
|
1135
1136
|
const DataGridRowTemplate = (context) => {
|
|
1136
1137
|
const cellItemTemplate = createCellItemTemplate(context);
|
|
1137
1138
|
const headerCellItemTemplate = createHeaderCellItemTemplate(context);
|
|
1138
|
-
return
|
|
1139
|
+
return vividElement.html`
|
|
1139
1140
|
<template
|
|
1140
1141
|
role="row"
|
|
1141
1142
|
class="${(x) => x.rowType !== "default" ? x.rowType : ""}"
|
|
@@ -1169,10 +1170,10 @@ function getSortIcon(x) {
|
|
|
1169
1170
|
}
|
|
1170
1171
|
function renderSortIcons(c) {
|
|
1171
1172
|
const iconTag = c.tagFor(definition.Icon);
|
|
1172
|
-
return
|
|
1173
|
+
return vividElement.html`
|
|
1173
1174
|
${when.when(
|
|
1174
1175
|
shouldShowSortIcons,
|
|
1175
|
-
|
|
1176
|
+
vividElement.html`
|
|
1176
1177
|
<${iconTag} class="header-icon" name="${getSortIcon}"></${iconTag}>
|
|
1177
1178
|
`
|
|
1178
1179
|
)}
|
|
@@ -1185,7 +1186,7 @@ function handleKeyDown(x, e) {
|
|
|
1185
1186
|
return true;
|
|
1186
1187
|
}
|
|
1187
1188
|
const DataGridCellTemplate = (context) => {
|
|
1188
|
-
return
|
|
1189
|
+
return vividElement.html`
|
|
1189
1190
|
<template
|
|
1190
1191
|
tabindex="-1"
|
|
1191
1192
|
role="${(x) => DataGridCellRole[x.cellType] ?? DataGridCellRole.default}"
|
|
@@ -1200,7 +1201,7 @@ const DataGridCellTemplate = (context) => {
|
|
|
1200
1201
|
`;
|
|
1201
1202
|
};
|
|
1202
1203
|
|
|
1203
|
-
const dataGridCellDefinition =
|
|
1204
|
+
const dataGridCellDefinition = vividElement.defineVividComponent(
|
|
1204
1205
|
"data-grid-cell",
|
|
1205
1206
|
DataGridCell,
|
|
1206
1207
|
DataGridCellTemplate,
|
|
@@ -1209,7 +1210,7 @@ const dataGridCellDefinition = defineVividComponent.defineVividComponent(
|
|
|
1209
1210
|
styles: dataGridCellStyles
|
|
1210
1211
|
}
|
|
1211
1212
|
);
|
|
1212
|
-
const dataGridRowDefinition =
|
|
1213
|
+
const dataGridRowDefinition = vividElement.defineVividComponent(
|
|
1213
1214
|
"data-grid-row",
|
|
1214
1215
|
DataGridRow,
|
|
1215
1216
|
DataGridRowTemplate,
|
|
@@ -1218,7 +1219,7 @@ const dataGridRowDefinition = defineVividComponent.defineVividComponent(
|
|
|
1218
1219
|
styles: dataGridRowStyles
|
|
1219
1220
|
}
|
|
1220
1221
|
);
|
|
1221
|
-
const dataGridDefinition =
|
|
1222
|
+
const dataGridDefinition = vividElement.defineVividComponent(
|
|
1222
1223
|
"data-grid",
|
|
1223
1224
|
DataGrid,
|
|
1224
1225
|
DataGridTemplate,
|
|
@@ -1227,7 +1228,7 @@ const dataGridDefinition = defineVividComponent.defineVividComponent(
|
|
|
1227
1228
|
styles: dataGridStyles
|
|
1228
1229
|
}
|
|
1229
1230
|
);
|
|
1230
|
-
const registerDataGrid =
|
|
1231
|
+
const registerDataGrid = vividElement.createRegisterFunction(dataGridDefinition);
|
|
1231
1232
|
|
|
1232
1233
|
exports.dataGridCellDefinition = dataGridCellDefinition;
|
|
1233
1234
|
exports.dataGridDefinition = dataGridDefinition;
|
package/shared/definition17.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { I as Icon, i as iconDefinition } from './definition27.js';
|
|
2
|
-
import { a as attr, o as observable, D as DOM, O as Observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './
|
|
3
|
-
import { V as VividElement } from './vivid-element.js';
|
|
2
|
+
import { a as attr, o as observable, V as VividElement, D as DOM, O as Observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
|
|
4
3
|
import { d as keyEnd, g as keyHome, j as keyPageDown, l as keyPageUp, f as keyArrowDown, e as keyArrowUp, i as keyArrowRight, h as keyArrowLeft, b as keyEscape, m as keyFunction2, k as keyEnter, a as keySpace } from './key-codes.js';
|
|
5
4
|
import { R as RepeatDirective } from './repeat.js';
|
|
6
5
|
import { s as slotted, e as elements } from './slotted.js';
|
|
@@ -273,15 +272,16 @@ const _DataGrid = class _DataGrid extends VividElement {
|
|
|
273
272
|
* @internal
|
|
274
273
|
*/
|
|
275
274
|
noTabbingChanged() {
|
|
276
|
-
if (this.
|
|
277
|
-
this
|
|
278
|
-
} else {
|
|
279
|
-
this.setAttribute(
|
|
280
|
-
"tabIndex",
|
|
281
|
-
this.contains(document.activeElement) ? "-1" : "0"
|
|
282
|
-
);
|
|
275
|
+
if (this.$fastController.isConnected) {
|
|
276
|
+
this.#setTabIndex();
|
|
283
277
|
}
|
|
284
278
|
}
|
|
279
|
+
#setTabIndex() {
|
|
280
|
+
this.setAttribute(
|
|
281
|
+
"tabIndex",
|
|
282
|
+
this.noTabbing || this.contains(document.activeElement) ? "-1" : "0"
|
|
283
|
+
);
|
|
284
|
+
}
|
|
285
285
|
/**
|
|
286
286
|
* @internal
|
|
287
287
|
*/
|
|
@@ -375,6 +375,7 @@ const _DataGrid = class _DataGrid extends VividElement {
|
|
|
375
375
|
this.observer = new MutationObserver(this.onChildListChange);
|
|
376
376
|
this.observer.observe(this, { childList: true });
|
|
377
377
|
DOM.queueUpdate(this.queueRowIndexUpdate);
|
|
378
|
+
this.#setTabIndex();
|
|
378
379
|
Observable.getNotifier(this).subscribe(
|
|
379
380
|
this.#changeHandler,
|
|
380
381
|
"columnDefinitions"
|
package/shared/definition18.cjs
CHANGED
|
@@ -5,7 +5,7 @@ const definition = require('./definition11.cjs');
|
|
|
5
5
|
const definition$2 = require('./definition55.cjs');
|
|
6
6
|
const definition$3 = require('./definition22.cjs');
|
|
7
7
|
const presentationDate = require('./presentationDate.cjs');
|
|
8
|
-
const
|
|
8
|
+
const vividElement = require('./vivid-element.cjs');
|
|
9
9
|
const formElements = require('./form-elements.cjs');
|
|
10
10
|
|
|
11
11
|
var __defProp = Object.defineProperty;
|
|
@@ -156,14 +156,14 @@ updateValueDueToUserInteraction_fn = function(newValue) {
|
|
|
156
156
|
this.$emit("input");
|
|
157
157
|
};
|
|
158
158
|
__decorateClass([
|
|
159
|
-
|
|
159
|
+
vividElement.volatile
|
|
160
160
|
], DatePicker.prototype, "_calendarButtonLabel", 1);
|
|
161
161
|
DatePicker = __decorateClass([
|
|
162
162
|
formElements.errorText,
|
|
163
163
|
formElements.formElements
|
|
164
164
|
], DatePicker);
|
|
165
165
|
|
|
166
|
-
const datePickerDefinition =
|
|
166
|
+
const datePickerDefinition = vividElement.defineVividComponent(
|
|
167
167
|
"date-picker",
|
|
168
168
|
DatePicker,
|
|
169
169
|
presentationDate.DatePickerBaseTemplate,
|
|
@@ -175,7 +175,7 @@ const datePickerDefinition = defineVividComponent.defineVividComponent(
|
|
|
175
175
|
}
|
|
176
176
|
}
|
|
177
177
|
);
|
|
178
|
-
const registerDatePicker =
|
|
178
|
+
const registerDatePicker = vividElement.createRegisterFunction(datePickerDefinition);
|
|
179
179
|
|
|
180
180
|
exports.datePickerDefinition = datePickerDefinition;
|
|
181
181
|
exports.registerDatePicker = registerDatePicker;
|
package/shared/definition18.js
CHANGED
|
@@ -3,7 +3,7 @@ import { b as buttonDefinition } from './definition11.js';
|
|
|
3
3
|
import { t as textFieldDefinition } from './definition55.js';
|
|
4
4
|
import { d as dividerDefinition } from './definition22.js';
|
|
5
5
|
import { D as DatePickerBase, i as isValidDateStr, f as formatPresentationDate, p as parsePresentationDate, s as styles, a as DatePickerBaseTemplate } from './presentationDate.js';
|
|
6
|
-
import { v as volatile, d as defineVividComponent, f as createRegisterFunction } from './
|
|
6
|
+
import { v as volatile, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
|
|
7
7
|
import { e as errorText, f as formElements } from './form-elements.js';
|
|
8
8
|
|
|
9
9
|
var __defProp = Object.defineProperty;
|