@vonage/vivid 3.24.0 → 3.26.0
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/accordion/index.js +0 -1
- package/accordion-item/index.js +0 -1
- package/alert/index.js +0 -1
- package/avatar/index.js +0 -1
- package/badge/index.js +0 -1
- package/banner/index.js +0 -1
- package/breadcrumb-item/index.js +0 -1
- package/button/index.js +0 -1
- package/card/index.js +0 -1
- package/checkbox/index.js +0 -1
- package/combobox/index.js +0 -1
- package/custom-elements.json +82 -10
- package/data-grid/index.js +7 -2
- package/dialog/index.js +0 -1
- package/empty-state/index.js +0 -1
- package/fab/index.js +0 -1
- package/icon/index.js +0 -1
- package/index.js +27 -29
- package/lib/action-group/action-group.d.ts +1 -1
- package/lib/avatar/avatar.d.ts +1 -1
- package/lib/checkbox/checkbox.d.ts +0 -1
- package/lib/components.d.ts +0 -2
- package/lib/data-grid/data-grid-cell.d.ts +14 -1
- package/lib/data-grid/data-grid.d.ts +4 -0
- package/lib/data-grid/data-grid.options.d.ts +7 -0
- package/lib/dialog/dialog.d.ts +1 -0
- package/lib/listbox/listbox.d.ts +1 -1
- package/lib/menu/menu.d.ts +0 -1
- package/lib/menu-item/menu-item.d.ts +6 -0
- package/lib/menu-item/menu-item.template.d.ts +2 -3
- package/lib/number-field/number-field.d.ts +1 -1
- package/lib/select/select.d.ts +1 -1
- package/lib/text-field/text-field.d.ts +1 -1
- package/listbox/index.js +56 -11
- package/menu/index.js +2 -3
- package/menu-item/index.js +2 -2
- package/nav/index.js +1 -1
- package/nav-disclosure/index.js +1 -2
- package/nav-item/index.js +1 -2
- package/note/index.js +1 -2
- package/number-field/index.js +1 -2
- package/option/index.js +0 -1
- package/package.json +1 -1
- package/pagination/index.js +1 -2
- package/popup/index.js +0 -1
- package/progress/index.js +1 -1
- package/radio/index.js +1 -1
- package/radio-group/index.js +1 -1
- package/select/index.js +1 -2
- package/shared/definition.js +1 -1
- package/shared/definition10.js +1 -1
- package/shared/definition11.js +1 -1
- package/shared/definition12.js +1 -1
- package/shared/definition14.js +1 -1
- package/shared/definition15.js +1 -1
- package/shared/definition16.js +2 -2
- package/shared/definition17.js +1 -1
- package/shared/definition18.js +1 -1
- package/shared/definition19.js +1 -1
- package/shared/definition2.js +1 -1
- package/shared/definition21.js +1 -1
- package/shared/definition22.js +76 -21
- package/shared/definition23.js +5 -4
- package/shared/definition24.js +1 -1
- package/shared/definition25.js +1 -1
- package/shared/definition26.js +1 -1
- package/shared/definition27.js +1 -1
- package/shared/definition29.js +368 -48
- package/shared/definition30.js +301 -298
- package/shared/definition31.js +14 -366
- package/shared/definition32.js +70 -13
- package/shared/definition33.js +25 -64
- package/shared/definition34.js +39 -27
- package/shared/definition35.js +431 -31
- package/shared/definition36.js +214 -430
- package/shared/definition37.js +70 -209
- package/shared/definition38.js +33 -81
- package/shared/definition39.js +423 -32
- package/shared/definition4.js +1 -1
- package/shared/definition40.js +586 -358
- package/shared/definition41.js +73 -648
- package/shared/definition42.js +584 -70
- package/shared/definition43.js +81 -538
- package/shared/definition44.js +52 -127
- package/shared/definition45.js +16 -56
- package/shared/definition46.js +485 -17
- package/shared/definition47.js +99 -477
- package/shared/definition48.js +19 -114
- package/shared/definition49.js +276 -19
- package/shared/definition5.js +1 -1
- package/shared/definition50.js +89 -245
- package/shared/definition51.js +629 -109
- package/shared/definition52.js +86 -601
- package/shared/definition53.js +68 -112
- package/shared/definition54.js +294 -69
- package/shared/definition6.js +1 -1
- package/shared/definition7.js +1 -1
- package/shared/definition8.js +2 -2
- package/shared/definition9.js +1 -1
- package/shared/es.object.assign.js +1 -1
- package/shared/es.regexp.to-string.js +1 -1
- package/shared/es.string.includes.js +1 -1
- package/shared/form-elements.js +1 -1
- package/shared/icon.js +17 -13
- package/shared/index.js +1 -1
- package/shared/patterns/form-elements/form-elements.d.ts +4 -4
- package/shared/string-trim.js +1 -1
- package/shared/text-field.js +1 -1
- package/shared/to-string.js +1 -1
- package/side-drawer/index.js +1 -1
- package/slider/index.js +1 -1
- package/styles/core/all.css +1 -1
- package/styles/core/theme.css +1 -1
- package/styles/core/typography.css +1 -1
- package/styles/tokens/theme-dark.css +4 -4
- package/styles/tokens/theme-light.css +4 -4
- package/switch/index.js +1 -2
- package/tab/index.js +1 -2
- package/tab-panel/index.js +1 -1
- package/tabs/index.js +3 -4
- package/tag/index.js +1 -2
- package/tag-group/index.js +1 -1
- package/text-anchor/index.js +0 -1
- package/text-area/index.js +1 -2
- package/text-field/index.js +3 -2
- package/toggletip/index.js +1 -2
- package/tooltip/index.js +1 -2
- package/tree-item/index.js +1 -2
- package/tree-view/index.js +1 -1
- package/vivid.api.json +19 -210
- package/shared/definition55.js +0 -305
- package/shared/engine-is-node.js +0 -8
package/shared/definition22.js
CHANGED
|
@@ -1,13 +1,15 @@
|
|
|
1
|
-
import { F as FoundationElement, _ as __decorate, a as attr, o as observable, Y as DOM, h as html,
|
|
1
|
+
import { F as FoundationElement, _ as __decorate, a as attr, o as observable, Y as DOM, h as html, v as aCallable$1, a2 as toObject$1, a3 as indexedObject, Q as lengthOfArrayLike$1, l as fails$1, G as _export, E as engineV8Version, V as __classPrivateFieldGet, b as __metadata, r as registerFactory } from './index.js';
|
|
2
|
+
import { i as iconRegistries } from './definition3.js';
|
|
2
3
|
import './es.string.includes.js';
|
|
3
4
|
import './es.regexp.to-string.js';
|
|
4
|
-
import { e as engineIsNode } from './
|
|
5
|
+
import { e as engineIsNode, I as Icon } from './icon.js';
|
|
5
6
|
import { k as keyEnd, a as keyHome, h as keyArrowRight, i as keyArrowLeft, j as keyPageDown, l as keyPageUp, b as keyArrowDown, c as keyArrowUp, f as keyEscape, m as keyFunction2, d as keyEnter } from './key-codes.js';
|
|
6
7
|
import { R as RepeatDirective } from './repeat.js';
|
|
7
8
|
import { e as elements } from './node-observation.js';
|
|
8
9
|
import { c as children } from './children.js';
|
|
9
10
|
import { s as slotted } from './slotted.js';
|
|
10
11
|
import { f as focusTemplateFactory } from './focus2.js';
|
|
12
|
+
import { w as when } from './when.js';
|
|
11
13
|
|
|
12
14
|
/**
|
|
13
15
|
* This set of exported strings reference https://developer.mozilla.org/en-US/docs/Web/Events
|
|
@@ -910,9 +912,9 @@ __decorate([
|
|
|
910
912
|
|
|
911
913
|
var css_248z$2 = ":host {\n display: block;\n}\n\n:host([generate-header=sticky]) {\n max-block-size: 400px;\n}\n\n.base {\n position: relative;\n overflow: auto;\n block-size: inherit;\n inline-size: 100%;\n max-block-size: inherit;\n}\n.base::-webkit-scrollbar {\n display: none;\n}";
|
|
912
914
|
|
|
913
|
-
var css_248z$1 = "/**\n * Do not edit directly\n * Generated on
|
|
915
|
+
var css_248z$1 = "/**\n * Do not edit directly\n * Generated on Tue, 25 Jul 2023 07:38:24 GMT\n */\n.base {\n display: grid;\n width: 100%;\n box-sizing: border-box;\n color: var(--vvd-color-canvas-text);\n}\n.base.connotation-cta {\n /* @cssprop [--vvd-data-grid-row-cta-primary=var(--vvd-color-cta-500)] */\n --_connotation-color-primary: var(--vvd-data-grid-row-cta-primary, var(--vvd-color-cta-500));\n /* @cssprop [--vvd-data-grid-row-cta-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-data-grid-row-cta-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-data-grid-row-cta-primary-increment=var(--vvd-color-cta-600)] */\n --_connotation-color-primary-increment: var(--vvd-data-grid-row-cta-primary-increment, var(--vvd-color-cta-600));\n /* @cssprop [--vvd-data-grid-row-cta-faint=var(--vvd-color-cta-50)] */\n --_connotation-color-faint: var(--vvd-data-grid-row-cta-faint, var(--vvd-color-cta-50));\n /* @cssprop [--vvd-data-grid-row-cta-pale=var(--vvd-color-cta-300)] */\n --_connotation-color-pale: var(--vvd-data-grid-row-cta-pale, var(--vvd-color-cta-300));\n /* @cssprop [--vvd-data-grid-row-cta-dim=var(--vvd-color-cta-200)] */\n --_connotation-color-dim: var(--vvd-data-grid-row-cta-dim, var(--vvd-color-cta-200));\n}\n.base:not(.connotation-cta) {\n /* @cssprop [--vvd-data-grid-row-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-data-grid-row-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-data-grid-row-accent-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-data-grid-row-accent-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-data-grid-row-accent-primary-increment=var(--vvd-color-neutral-800)] */\n --_connotation-color-primary-increment: var(--vvd-data-grid-row-accent-primary-increment, var(--vvd-color-neutral-800));\n /* @cssprop [--vvd-data-grid-row-accent-faint=var(--vvd-color-neutral-50)] */\n --_connotation-color-faint: var(--vvd-data-grid-row-accent-faint, var(--vvd-color-neutral-50));\n /* @cssprop [--vvd-data-grid-row-accent-pale=var(--vvd-color-neutral-300)] */\n --_connotation-color-pale: var(--vvd-data-grid-row-accent-pale, var(--vvd-color-neutral-300));\n /* @cssprop [--vvd-data-grid-row-accent-dim=var(--vvd-color-neutral-200)] */\n --_connotation-color-dim: var(--vvd-data-grid-row-accent-dim, var(--vvd-color-neutral-200));\n}\n.base {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-dim);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-pale);\n --_appearance-color-outline: transparent;\n}\n:host([row-type=sticky-header]) .base {\n position: sticky;\n z-index: 9;\n top: 0;\n background: var(--data-grid-row-background, var(--vvd-color-canvas));\n}\n:host([row-type=hidden-header]) .base {\n display: none;\n}\n:host(:is([aria-selected]):not([row-type=header])) .base {\n background-color: var(--_appearance-color-fill);\n}";
|
|
914
916
|
|
|
915
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
917
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 25 Jul 2023 07:38:24 GMT\n */\n:host {\n min-inline-size: 80px;\n}\n\n.base {\n position: relative;\n display: flex;\n box-sizing: border-box;\n align-items: center;\n padding: 8px 12px;\n border-bottom: 1px solid var(--vvd-color-neutral-400);\n block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n color: var(--_appearance-color-text);\n font: var(--vvd-typography-base);\n}\n.base.connotation-cta {\n /* @cssprop [--vvd-data-grid-cell-cta-primary=var(--vvd-color-cta-500)] */\n --_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));\n /* @cssprop [--vvd-data-grid-cell-cta-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-data-grid-cell-cta-primary-increment=var(--vvd-color-cta-600)] */\n --_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));\n /* @cssprop [--vvd-data-grid-cell-cta-faint=var(--vvd-color-cta-50)] */\n --_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));\n /* @cssprop [--vvd-data-grid-cell-cta-pale=var(--vvd-color-cta-300)] */\n --_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));\n /* @cssprop [--vvd-data-grid-cell-cta-dim=var(--vvd-color-cta-200)] */\n --_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200));\n}\n.base:not(.connotation-cta) {\n /* @cssprop [--vvd-data-grid-cell-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-data-grid-cell-accent-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-data-grid-cell-accent-primary-increment=var(--vvd-color-neutral-800)] */\n --_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));\n /* @cssprop [--vvd-data-grid-cell-accent-faint=var(--vvd-color-neutral-50)] */\n --_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));\n /* @cssprop [--vvd-data-grid-cell-accent-pale=var(--vvd-color-neutral-300)] */\n --_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));\n /* @cssprop [--vvd-data-grid-cell-accent-dim=var(--vvd-color-neutral-200)] */\n --_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200));\n}\n.base {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-dim);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-pale);\n --_appearance-color-outline: transparent;\n}\n:host([cell-type=columnheader]) .base {\n border-color: var(--vvd-color-canvas-text);\n font: var(--vvd-typography-base-bold);\n}\n:host(:is([aria-selected]):not([cell-type=columnheader])) .base {\n background-color: var(--_appearance-color-fill);\n}\n\n.focus-indicator {\n --focus-stroke-gap-color: transparent;\n pointer-events: none;\n}\n.base:not(.active) > .focus-indicator {\n display: none;\n}\n\nslot {\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.header-icon {\n margin-inline-start: auto;\n}";
|
|
916
918
|
|
|
917
919
|
var aCallable = aCallable$1;
|
|
918
920
|
var toObject = toObject$1;
|
|
@@ -1100,6 +1102,14 @@ class DataGrid extends DataGrid$1 {
|
|
|
1100
1102
|
}
|
|
1101
1103
|
__classPrivateFieldGet(this, _DataGrid_resetSelection, "f").call(this);
|
|
1102
1104
|
}
|
|
1105
|
+
static generateColumns(rowData) {
|
|
1106
|
+
return Object.keys(rowData).map((property, index) => {
|
|
1107
|
+
return {
|
|
1108
|
+
columnDataKey: property,
|
|
1109
|
+
gridColumn: `${index}`
|
|
1110
|
+
};
|
|
1111
|
+
});
|
|
1112
|
+
}
|
|
1103
1113
|
}
|
|
1104
1114
|
_DataGrid_handleKeypress = new WeakMap(), _DataGrid_handleClick = new WeakMap(), _DataGrid_handleCellSelection = new WeakMap(), _DataGrid_handleRowSelection = new WeakMap(), _DataGrid_setSelectedState = new WeakMap(), _DataGrid_resetSelection = new WeakMap(), _DataGrid_initSelections = new WeakMap(), _DataGrid_instances = new WeakSet(), _DataGrid_selectedRows_get = function _DataGrid_selectedRows_get() {
|
|
1105
1115
|
return this.rowElements.filter(row => row.getAttribute('aria-selected') === 'true');
|
|
@@ -1124,6 +1134,12 @@ __decorate([attr({
|
|
|
1124
1134
|
attribute: 'aria-selected'
|
|
1125
1135
|
}), __metadata("design:type", Object)], DataGridRow.prototype, "ariaSelected", void 0);
|
|
1126
1136
|
|
|
1137
|
+
const DataGridCellSortStates = {
|
|
1138
|
+
none: 'none',
|
|
1139
|
+
ascending: 'ascending',
|
|
1140
|
+
descending: 'descending',
|
|
1141
|
+
other: 'other'
|
|
1142
|
+
};
|
|
1127
1143
|
const GenerateHeaderOptions = {
|
|
1128
1144
|
none: 'none',
|
|
1129
1145
|
default: 'default',
|
|
@@ -1140,12 +1156,12 @@ const DataGridCellRole = {
|
|
|
1140
1156
|
default: 'gridcell'
|
|
1141
1157
|
};
|
|
1142
1158
|
|
|
1143
|
-
let _2$
|
|
1159
|
+
let _2$2 = t => t,
|
|
1144
1160
|
_t$2,
|
|
1145
|
-
_t2$
|
|
1161
|
+
_t2$2;
|
|
1146
1162
|
function createRowItemTemplate(context) {
|
|
1147
1163
|
const rowTag = context.tagFor(DataGridRow);
|
|
1148
|
-
return html(_t$2 || (_t$2 = _2$
|
|
1164
|
+
return html(_t$2 || (_t$2 = _2$2`
|
|
1149
1165
|
<${0}
|
|
1150
1166
|
:rowData="${0}"
|
|
1151
1167
|
:cellItemTemplate="${0}"
|
|
@@ -1166,14 +1182,20 @@ function setHeaderRow(x) {
|
|
|
1166
1182
|
}
|
|
1167
1183
|
}
|
|
1168
1184
|
}
|
|
1185
|
+
function handleColumnSort(_, {
|
|
1186
|
+
event
|
|
1187
|
+
}) {
|
|
1188
|
+
event.stopPropagation();
|
|
1189
|
+
}
|
|
1169
1190
|
const DataGridTemplate = context => {
|
|
1170
1191
|
const rowItemTemplate = createRowItemTemplate(context);
|
|
1171
1192
|
const rowTag = context.tagFor(DataGridRow);
|
|
1172
|
-
return html(_t2$
|
|
1193
|
+
return html(_t2$2 || (_t2$2 = _2$2`
|
|
1173
1194
|
<template
|
|
1174
1195
|
aria-multiselectable="${0}"
|
|
1175
1196
|
role="grid"
|
|
1176
1197
|
tabindex="0"
|
|
1198
|
+
@sort="${0}"
|
|
1177
1199
|
:rowElementTag="${0}"
|
|
1178
1200
|
:defaultRowItemTemplate="${0}"
|
|
1179
1201
|
${0}
|
|
@@ -1183,7 +1205,7 @@ const DataGridTemplate = context => {
|
|
|
1183
1205
|
<slot></slot>
|
|
1184
1206
|
</div>
|
|
1185
1207
|
</template>
|
|
1186
|
-
`), getMultiSelectAriaState, () => rowTag, rowItemTemplate, children({
|
|
1208
|
+
`), getMultiSelectAriaState, handleColumnSort, () => rowTag, rowItemTemplate, children({
|
|
1187
1209
|
property: 'rowElements',
|
|
1188
1210
|
filter: elements('[role=row]')
|
|
1189
1211
|
}), setHeaderRow);
|
|
@@ -1193,6 +1215,7 @@ class DataGridCell extends DataGridCell$1 {
|
|
|
1193
1215
|
constructor() {
|
|
1194
1216
|
super();
|
|
1195
1217
|
this.ariaSelected = null;
|
|
1218
|
+
this.ariaSort = null;
|
|
1196
1219
|
this.updateCellStyle = () => {
|
|
1197
1220
|
if (this.gridColumn && !this.gridColumn.includes('undefined')) {
|
|
1198
1221
|
this.style.gridColumn = this.gridColumn;
|
|
@@ -1222,14 +1245,17 @@ __decorate([attr({
|
|
|
1222
1245
|
attribute: 'aria-selected',
|
|
1223
1246
|
mode: 'fromView'
|
|
1224
1247
|
}), __metadata("design:type", Object)], DataGridCell.prototype, "ariaSelected", void 0);
|
|
1248
|
+
__decorate([attr({
|
|
1249
|
+
attribute: 'aria-sort'
|
|
1250
|
+
}), __metadata("design:type", Object)], DataGridCell.prototype, "ariaSort", void 0);
|
|
1225
1251
|
|
|
1226
|
-
let _2 = t => t,
|
|
1252
|
+
let _2$1 = t => t,
|
|
1227
1253
|
_t$1,
|
|
1228
|
-
_t2,
|
|
1229
|
-
_t3;
|
|
1254
|
+
_t2$1,
|
|
1255
|
+
_t3$1;
|
|
1230
1256
|
function createCellItemTemplate(context) {
|
|
1231
1257
|
const cellTag = context.tagFor(DataGridCell);
|
|
1232
|
-
return html(_t$1 || (_t$1 = _2`
|
|
1258
|
+
return html(_t$1 || (_t$1 = _2$1`
|
|
1233
1259
|
<${0}
|
|
1234
1260
|
cell-type="${0}"
|
|
1235
1261
|
grid-column="${0}"
|
|
@@ -1241,7 +1267,7 @@ function createCellItemTemplate(context) {
|
|
|
1241
1267
|
}
|
|
1242
1268
|
function createHeaderCellItemTemplate(context) {
|
|
1243
1269
|
const cellTag = context.tagFor(DataGridCell);
|
|
1244
|
-
return html(_t2 || (_t2 = _2`
|
|
1270
|
+
return html(_t2$1 || (_t2$1 = _2$1`
|
|
1245
1271
|
<${0}
|
|
1246
1272
|
cell-type="columnheader"
|
|
1247
1273
|
grid-column="${0}"
|
|
@@ -1252,7 +1278,7 @@ function createHeaderCellItemTemplate(context) {
|
|
|
1252
1278
|
const DataGridRowTemplate = context => {
|
|
1253
1279
|
const cellItemTemplate = createCellItemTemplate(context);
|
|
1254
1280
|
const headerCellItemTemplate = createHeaderCellItemTemplate(context);
|
|
1255
|
-
return html(_t3 || (_t3 = _2`
|
|
1281
|
+
return html(_t3$1 || (_t3$1 = _2$1`
|
|
1256
1282
|
<template
|
|
1257
1283
|
role="row"
|
|
1258
1284
|
class="${0}"
|
|
@@ -1272,25 +1298,54 @@ const DataGridRowTemplate = context => {
|
|
|
1272
1298
|
}), x => x.ariaSelected === 'true' ? 'selected' : '', x => x.gridTemplateColumns, slotted('slottedCellElements'));
|
|
1273
1299
|
};
|
|
1274
1300
|
|
|
1275
|
-
let
|
|
1276
|
-
_t
|
|
1301
|
+
let _2 = t => t,
|
|
1302
|
+
_t,
|
|
1303
|
+
_t2,
|
|
1304
|
+
_t3;
|
|
1305
|
+
function shouldShowSortIcons(x) {
|
|
1306
|
+
if (x.columnDefinition) {
|
|
1307
|
+
x.ariaSort = !x.columnDefinition.sortable ? null : x.columnDefinition.sortDirection ? x.columnDefinition.sortDirection : DataGridCellSortStates.none;
|
|
1308
|
+
}
|
|
1309
|
+
return x.cellType === 'columnheader' && x.ariaSort !== null && x.ariaSort !== DataGridCellSortStates.other;
|
|
1310
|
+
}
|
|
1311
|
+
function getSortIcon(x) {
|
|
1312
|
+
return x.ariaSort === DataGridCellSortStates.ascending ? 'sort-asc-solid' : x.ariaSort === DataGridCellSortStates.descending ? 'sort-desc-solid' : 'sort-solid';
|
|
1313
|
+
}
|
|
1314
|
+
function renderSortIcons(c) {
|
|
1315
|
+
const iconTag = c.tagFor(Icon);
|
|
1316
|
+
return html(_t || (_t = _2`
|
|
1317
|
+
${0}
|
|
1318
|
+
`), when(shouldShowSortIcons, html(_t2 || (_t2 = _2`
|
|
1319
|
+
<${0} class="header-icon" name="${0}"></${0}>
|
|
1320
|
+
`), iconTag, getSortIcon, iconTag)));
|
|
1321
|
+
}
|
|
1322
|
+
function handleClick(x) {
|
|
1323
|
+
if (x.cellType === 'columnheader' && x.ariaSort !== null) {
|
|
1324
|
+
x.$emit('sort', {
|
|
1325
|
+
columnDataKey: x.columnDefinition && x.columnDefinition.columnDataKey ? x.columnDefinition.columnDataKey : x.textContent.trim(),
|
|
1326
|
+
sortDirection: x.ariaSort
|
|
1327
|
+
});
|
|
1328
|
+
}
|
|
1329
|
+
}
|
|
1277
1330
|
function DataGridCellTemplate(context) {
|
|
1278
1331
|
const focusTemplate = focusTemplateFactory(context);
|
|
1279
|
-
return html(
|
|
1332
|
+
return html(_t3 || (_t3 = _2`
|
|
1280
1333
|
<template
|
|
1281
1334
|
tabindex="-1"
|
|
1282
1335
|
role="${0}"
|
|
1336
|
+
@click="${0}"
|
|
1283
1337
|
>
|
|
1284
1338
|
<div class="base">
|
|
1285
1339
|
<slot></slot>
|
|
1286
|
-
|
|
1340
|
+
${0}
|
|
1341
|
+
${0}
|
|
1287
1342
|
</div>
|
|
1288
1343
|
|
|
1289
1344
|
</template>
|
|
1290
1345
|
`), x => {
|
|
1291
1346
|
var _a;
|
|
1292
1347
|
return (_a = DataGridCellRole[x.cellType]) !== null && _a !== void 0 ? _a : DataGridCellRole.default;
|
|
1293
|
-
}, () => focusTemplate);
|
|
1348
|
+
}, handleClick, () => focusTemplate, _ => renderSortIcons(context));
|
|
1294
1349
|
}
|
|
1295
1350
|
|
|
1296
1351
|
const dataGrid = DataGrid.compose({
|
|
@@ -1308,7 +1363,7 @@ const dataGridCell = DataGridCell.compose({
|
|
|
1308
1363
|
template: DataGridCellTemplate,
|
|
1309
1364
|
styles: css_248z
|
|
1310
1365
|
})();
|
|
1311
|
-
const dataGridElements = [dataGridCell, dataGridRow, dataGrid];
|
|
1366
|
+
const dataGridElements = [dataGridCell, dataGridRow, dataGrid, ...iconRegistries];
|
|
1312
1367
|
const registerDataGrid = registerFactory(dataGridElements);
|
|
1313
1368
|
|
|
1314
1369
|
export { dataGridRow as a, dataGridCell as b, dataGridElements as c, dataGrid as d, registerDataGrid as r };
|
package/shared/definition23.js
CHANGED
|
@@ -9,12 +9,13 @@ import { c as classNames } from './class-names.js';
|
|
|
9
9
|
|
|
10
10
|
var css_248z$1 = "dialog {\n position: absolute;\n left: 0; right: 0;\n width: -moz-fit-content;\n width: -webkit-fit-content;\n width: fit-content;\n height: -moz-fit-content;\n height: -webkit-fit-content;\n height: fit-content;\n margin: auto;\n border: solid;\n padding: 1em;\n background: white;\n color: black;\n display: block;\n}\n\ndialog:not([open]) {\n display: none;\n}\n\ndialog + .backdrop {\n position: fixed;\n top: 0; right: 0; bottom: 0; left: 0;\n background: rgba(0,0,0,0.1);\n}\n\n._dialog_overlay {\n position: fixed;\n top: 0; right: 0; bottom: 0; left: 0;\n}\n\ndialog.fixed {\n position: fixed;\n top: 50%;\n transform: translate(0, -50%);\n}";
|
|
11
11
|
|
|
12
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
12
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 25 Jul 2023 07:38:24 GMT\n */\n.base {\n box-sizing: border-box;\n padding: 0;\n border: none;\n background-color: transparent;\n border-radius: 6px;\n color: var(--vvd-color-canvas-text);\n max-block-size: var(--dialog-max-block-size, calc(100vh - 64px));\n max-inline-size: var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));\n min-inline-size: var(--dialog-min-inline-size, 280px);\n}\n@media not all and (min-width: 600px) {\n .base {\n --_dialog-default-max-inline-size: 90vw;\n }\n}\n@media (min-width: 600px) {\n .base {\n --_dialog-default-max-inline-size: 560px;\n }\n}\n.base:not(.modal) {\n z-index: var(--dialog-z-index, 1);\n}\n.base.modal {\n position: fixed;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);\n}\n.base.modal::backdrop {\n background-color: var(--vvd-color-canvas-text, currentColor);\n opacity: 0.5;\n}\n\n.main-wrapper {\n display: flex;\n box-sizing: border-box;\n flex-direction: column;\n gap: 24px;\n padding-block: 24px;\n}\n.main-wrapper > * {\n box-sizing: border-box;\n}\n\n.header {\n display: grid;\n align-items: flex-start;\n justify-content: space-between;\n inline-size: 100%;\n padding-inline: 24px;\n}\n.base:not(.icon-placement-side) .header {\n grid-template-columns: 1fr auto;\n grid-template-rows: auto auto auto;\n}\n.base:not(.icon-placement-side) .header .icon {\n font-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n grid-column: 1/2;\n grid-row: 1/2;\n line-height: 1;\n margin-block-end: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.base.icon-placement-side .header {\n grid-template-columns: auto 1fr auto;\n grid-template-rows: auto auto;\n}\n.base.icon-placement-side .header .icon {\n font-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 12));\n}\n.base.icon-placement-side .header ::slotted(*),\n.base.icon-placement-side .header .icon {\n grid-column: 1/2;\n grid-row: 1/-1;\n margin-inline-end: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) / 2);\n}\n.header.border {\n position: relative;\n}\n.header.border::after {\n position: absolute;\n bottom: -24px;\n left: 0;\n background-color: var(--vvd-color-neutral-200);\n block-size: 1px;\n content: \"\";\n inline-size: 100%;\n}\n.base.hide-body .header.border::after {\n content: none;\n}\n\n.body:not(.full-width) {\n padding-inline: 24px;\n}\n.hide-body .body {\n display: none;\n}\n\n.footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 24px;\n padding-inline: 24px;\n}\n.hide-footer .footer {\n display: none;\n}\n.footer .actions {\n display: flex;\n align-self: flex-end;\n gap: 8px;\n}\n\n.dismiss-button {\n flex-shrink: 0;\n grid-column: -2/-1;\n grid-row: 1/-1;\n margin-block-start: -8px;\n margin-inline-end: -8px;\n margin-inline-start: 4px;\n}\n\n.headline {\n font: var(--vvd-typography-heading-4);\n}\n\n.subtitle {\n font: var(--vvd-typography-base);\n}\n\nslot[name=main] {\n display: block;\n overflow: hidden auto;\n max-width: inherit;\n max-height: inherit;\n border-radius: inherit;\n}";
|
|
13
13
|
|
|
14
14
|
var _Dialog_instances, _Dialog_modal, _Dialog_dialogElement, _Dialog_dialog_get, _Dialog_handleScrimClick, _Dialog_handleInternalFormSubmit, _Dialog_handleModal;
|
|
15
|
+
const isDialogSupported = Boolean(HTMLDialogElement && HTMLDialogElement.prototype.showModal);
|
|
15
16
|
let dialogPolyfill;
|
|
16
17
|
(async () => {
|
|
17
|
-
if (!
|
|
18
|
+
if (!isDialogSupported) {
|
|
18
19
|
delete window.HTMLDialogElement;
|
|
19
20
|
dialogPolyfill = await import('./dialog-polyfill.esm.js');
|
|
20
21
|
}
|
|
@@ -82,9 +83,9 @@ class Dialog extends FoundationElement {
|
|
|
82
83
|
this.open = true;
|
|
83
84
|
}
|
|
84
85
|
showModal() {
|
|
86
|
+
__classPrivateFieldGet(this, _Dialog_instances, "m", _Dialog_handleModal).call(this, true);
|
|
85
87
|
__classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).showModal();
|
|
86
88
|
this.open = true;
|
|
87
|
-
__classPrivateFieldGet(this, _Dialog_instances, "m", _Dialog_handleModal).call(this, true);
|
|
88
89
|
}
|
|
89
90
|
connectedCallback() {
|
|
90
91
|
super.connectedCallback();
|
|
@@ -230,7 +231,7 @@ const DialogTemplate = context => {
|
|
|
230
231
|
const dialogDefinition = Dialog.compose({
|
|
231
232
|
baseName: 'dialog',
|
|
232
233
|
template: DialogTemplate,
|
|
233
|
-
styles: [css_248z, css_248z$1]
|
|
234
|
+
styles: isDialogSupported ? [css_248z] : [css_248z, css_248z$1]
|
|
234
235
|
});
|
|
235
236
|
const dialogRegistries = [dialogDefinition(), ...iconRegistries, ...buttonRegistries, ...elevationRegistries];
|
|
236
237
|
const registerDialog = registerFactory(dialogRegistries);
|
package/shared/definition24.js
CHANGED
|
@@ -51,7 +51,7 @@ __decorate([
|
|
|
51
51
|
attr
|
|
52
52
|
], Divider$1.prototype, "orientation", void 0);
|
|
53
53
|
|
|
54
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
54
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 25 Jul 2023 07:38:24 GMT\n */\n:host {\n display: block;\n}\n\n.base {\n display: block;\n background-color: var(--vvd-color-neutral-200);\n}\n.base:not(.vertical) {\n block-size: 1px;\n inline-size: 100%;\n}\n.base.vertical {\n block-size: 100%;\n inline-size: 1px;\n}";
|
|
55
55
|
|
|
56
56
|
class Divider extends Divider$1 {}
|
|
57
57
|
|
package/shared/definition25.js
CHANGED
|
@@ -5,7 +5,7 @@ import { s as slotted } from './slotted.js';
|
|
|
5
5
|
import { w as when } from './when.js';
|
|
6
6
|
import { c as classNames } from './class-names.js';
|
|
7
7
|
|
|
8
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
8
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 25 Jul 2023 07:38:24 GMT\n */\n:host {\n display: block;\n}\n\n.base {\n display: flex;\n box-sizing: border-box;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n block-size: 100%;\n gap: 24px;\n}\n\n.icon-container {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--vvd-color-neutral-100);\n block-size: 120px;\n border-radius: 50%;\n inline-size: 120px;\n}\n\n.content {\n display: flex;\n flex-direction: column;\n font: var(--vvd-typography-base);\n gap: 8px;\n text-align: center;\n}\n\nheader {\n font: var(--vvd-typography-base-bold);\n}\n\n.actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n gap: 8px;\n}\n.base.no-actions .actions {\n display: none;\n}";
|
|
9
9
|
|
|
10
10
|
class EmptyState extends FoundationElement {}
|
|
11
11
|
__decorate([attr, __metadata("design:type", String)], EmptyState.prototype, "headline", void 0);
|
package/shared/definition26.js
CHANGED
|
@@ -8,7 +8,7 @@ import { f as focusTemplateFactory } from './focus2.js';
|
|
|
8
8
|
import { r as ref } from './ref.js';
|
|
9
9
|
import { c as classNames } from './class-names.js';
|
|
10
10
|
|
|
11
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
11
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 25 Jul 2023 07:38:24 GMT\n */\n.control {\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n border: 0 none;\n background: var(--_appearance-color-fill, var(--_elevation-fill));\n block-size: var(--_fab-block-size);\n border-radius: var(--_fab-border-radius);\n color: var(--_appearance-color-text, var(--vvd-color-canvas-text));\n column-gap: var(--fab-icon-gap);\n filter: var(--_elevation-shadow);\n font: var(--vvd-typography-base-bold);\n transition: background-color 0.15s linear, filter 0.15s linear;\n vertical-align: middle;\n /* Size */\n}\n.control.connotation-accent {\n /* @cssprop [--vvd-fab-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-fab-accent-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-fab-accent-primary-increment=var(--vvd-color-neutral-800)] */\n --_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));\n /* @cssprop [--vvd-fab-accent-contrast=var(--vvd-color-neutral-800)] */\n --_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));\n /* @cssprop [--vvd-fab-accent-fierce=var(--vvd-color-neutral-700)] */\n --_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));\n /* @cssprop [--vvd-fab-accent-firm=var(--vvd-color-canvas-text)] */\n --_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text));\n}\n.control.connotation-cta {\n /* @cssprop [--vvd-fab-cta-primary=var(--vvd-color-cta-500)] */\n --_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));\n /* @cssprop [--vvd-fab-cta-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-fab-cta-primary-increment=var(--vvd-color-cta-600)] */\n --_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));\n /* @cssprop [--vvd-fab-cta-contrast=var(--vvd-color-cta-800)] */\n --_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));\n /* @cssprop [--vvd-fab-cta-fierce=var(--vvd-color-cta-700)] */\n --_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));\n /* @cssprop [--vvd-fab-cta-firm=var(--vvd-color-cta-600)] */\n --_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600));\n}\n.control {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary-increment);\n --_appearance-color-outline: transparent;\n}\n.control:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-fierce);\n --_appearance-color-outline: transparent;\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n@supports (user-select: none) {\n .control {\n user-select: none;\n }\n}\n.control.size-expanded {\n --_fab-border-radius: 30px;\n --_fab-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 16));\n}\n.control:not(.size-expanded) {\n --_fab-border-radius: 24px;\n --_fab-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.control.icon-only {\n border-radius: 50%;\n padding-inline: 0;\n place-content: center;\n}\n@supports (aspect-ratio: 1) {\n .control.icon-only {\n aspect-ratio: 1;\n }\n}\n@supports not (aspect-ratio: 1) {\n .control.icon-only {\n inline-size: var(--_fab-block-size);\n }\n}\n.control:not(.icon-only) {\n --fab-icon-gap: 10px;\n padding-inline: 20px;\n}\n.control:disabled {\n --_elevation-fill: var(--vvd-color-surface-0dp);\n --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n cursor: not-allowed;\n}\n.control:not(:disabled) {\n --_elevation-fill: var(--vvd-color-surface-4dp);\n --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n cursor: pointer;\n}\n.control:not(:disabled):hover {\n --_elevation-fill: var(--vvd-color-surface-12dp);\n --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control:not(:disabled):active {\n --_elevation-fill: var(--vvd-color-surface-24dp);\n --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n\n/* Icon */\n.icon {\n line-height: 1;\n}\n.icon-trailing .icon {\n order: 1;\n}\n.control.size-extended .icon {\n font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 16)) / 2.3333);\n}\n.control:not(.size-extended) .icon {\n font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n}\n\n:not(:focus-visible) .focus-indicator {\n display: none;\n}";
|
|
12
12
|
|
|
13
13
|
class Fab extends Button {}
|
|
14
14
|
__decorate([attr, __metadata("design:type", String)], Fab.prototype, "connotation", void 0);
|
package/shared/definition27.js
CHANGED
|
@@ -2,7 +2,7 @@ import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h
|
|
|
2
2
|
import { E as Elevation, e as elevationRegistries } from './definition8.js';
|
|
3
3
|
import { c as classNames } from './class-names.js';
|
|
4
4
|
|
|
5
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
5
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 25 Jul 2023 07:38:24 GMT\n */\n.base {\n z-index: 1;\n block-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n font: var(--vvd-typography-heading-4);\n inline-size: 100%;\n}\n.base .header-content {\n display: inline-flex;\n align-items: center;\n column-gap: 4px;\n}\n\n.container {\n display: flex;\n box-sizing: border-box;\n justify-content: space-between;\n background-color: var(--header-bg-color, var(--vvd-color-canvas));\n block-size: inherit;\n color: var(--vvd-color-canvas-text);\n column-gap: 12px;\n padding-block: 8px;\n padding-inline: 16px;\n}\n.container[part~=vvd-theme-alternate] {\n color-scheme: var(--vvd-color-scheme);\n}\n\n.app-content {\n --vvd-header-block-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}";
|
|
6
6
|
|
|
7
7
|
class Header extends FoundationElement {
|
|
8
8
|
constructor() {
|