@descope/web-components-ui 1.0.348 → 1.0.349
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +191 -3
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +376 -149
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1000.js +1 -0
- package/dist/umd/1612.js +116 -4
- package/dist/umd/1765.js +1 -0
- package/dist/umd/3227.js +17 -0
- package/dist/umd/4024.js +116 -4
- package/dist/umd/4028.js +121 -9
- package/dist/umd/4052.js +116 -4
- package/dist/umd/4392.js +1 -1
- package/dist/umd/5135.js +2 -2
- package/dist/umd/602.js +114 -2
- package/dist/umd/9562.js +116 -4
- package/dist/umd/DescopeDev.js +1 -1
- package/dist/umd/boolean-fields-descope-boolean-field-internal-index-js.js +1 -1
- package/dist/umd/boolean-fields-descope-checkbox-index-js.js +1 -1
- package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +1 -1
- package/dist/umd/button-selection-group-fields-descope-button-multi-selection-group-index-js.js +1 -1
- package/dist/umd/button-selection-group-fields-descope-button-multi-selection-group-internal-index-js.js +1 -1
- package/dist/umd/button-selection-group-fields-descope-button-selection-group-index-js.js +1 -1
- package/dist/umd/button-selection-group-fields-descope-button-selection-group-internal-index-js.js +1 -1
- package/dist/umd/button-selection-group-fields-descope-button-selection-group-item-index-js.js +1 -1
- package/dist/umd/descope-avatar-index-js.js +1 -1
- package/dist/umd/descope-badge-index-js.js +1 -1
- package/dist/umd/descope-button-index-js.js +116 -4
- package/dist/umd/descope-code-snippet-index-js.js +1 -1
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- package/dist/umd/descope-container-index-js.js +1 -1
- package/dist/umd/descope-date-picker-index-js.js +1 -1
- package/dist/umd/descope-divider-index-js.js +1 -1
- package/dist/umd/descope-email-field-index-js.js +1 -1
- package/dist/umd/descope-enriched-text-index-js.js +1 -1
- package/dist/umd/descope-grid-descope-grid-custom-column-index-js.js +3 -3
- package/dist/umd/descope-grid-descope-grid-item-details-column-index-js.js +90 -0
- package/dist/umd/descope-grid-descope-grid-item-details-column-index-js.js.LICENSE.txt +17 -0
- package/dist/umd/descope-grid-descope-grid-selection-column-index-js.js +1 -1
- package/dist/umd/descope-grid-descope-grid-text-column-index-js.js +1 -1
- package/dist/umd/descope-grid-index-js.js +1 -1
- package/dist/umd/descope-icon-index-js.js +1 -1
- package/dist/umd/descope-image-index-js.js +1 -1
- package/dist/umd/descope-link-index-js.js +1 -1
- package/dist/umd/descope-loader-linear-index-js.js +1 -1
- package/dist/umd/descope-loader-radial-index-js.js +1 -1
- package/dist/umd/descope-logo-index-js.js +1 -1
- package/dist/umd/descope-modal-index-js.js +1 -1
- package/dist/umd/descope-multi-select-combo-box-index-js.js +1 -1
- package/dist/umd/descope-new-password-descope-new-password-internal-index-js.js +1 -1
- package/dist/umd/descope-new-password-index-js.js +1 -1
- package/dist/umd/descope-notification-descope-notification-card-index-js.js +1 -1
- package/dist/umd/descope-notification-index-js.js +1 -1
- package/dist/umd/descope-notp-image-index-js.js +1 -1
- package/dist/umd/descope-number-field-index-js.js +1 -1
- package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -1
- package/dist/umd/descope-password-index-js.js +1 -1
- package/dist/umd/descope-policy-validation-index-js.js +1 -1
- package/dist/umd/descope-radio-group-index-js.js +1 -1
- package/dist/umd/descope-recaptcha-index-js.js +1 -1
- package/dist/umd/descope-text-area-index-js.js +1 -1
- package/dist/umd/descope-text-field-index-js.js +1 -1
- package/dist/umd/descope-text-index-js.js +1 -1
- package/dist/umd/descope-totp-image-index-js.js +1 -1
- package/dist/umd/descope-upload-file-index-js.js +1 -1
- package/dist/umd/descope-user-attribute-index-js.js +1 -1
- package/dist/umd/descope-user-auth-method-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/dist/umd/mapping-fields-descope-mappings-field-descope-mapping-item-index-js.js +1 -1
- package/dist/umd/mapping-fields-descope-mappings-field-descope-mappings-field-internal-index-js.js +1 -1
- package/dist/umd/mapping-fields-descope-mappings-field-index-js.js +1 -1
- package/dist/umd/mapping-fields-descope-saml-group-mappings-descope-saml-group-mappings-internal-index-js.js +1 -1
- package/dist/umd/mapping-fields-descope-saml-group-mappings-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-field-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-grid/GridClass.js +116 -6
- package/src/components/descope-grid/descope-grid-item-details-column/GridItemDetailsColumnClass.js +37 -0
- package/src/components/descope-grid/descope-grid-item-details-column/index.js +8 -0
- package/src/components/descope-grid/helpers.js +54 -0
- package/src/components/descope-grid/index.js +1 -0
- package/src/helpers/index.js +8 -0
- package/src/theme/components/grid.js +11 -0
- package/dist/umd/2362.js +0 -129
- package/dist/umd/4978.js +0 -1
- /package/dist/umd/{2362.js.LICENSE.txt → 3227.js.LICENSE.txt} +0 -0
package/dist/cjs/index.cjs.js
CHANGED
@@ -63,6 +63,14 @@ const compareArraysUnordered = (arr1, arr2) => {
|
|
63
63
|
return true;
|
64
64
|
};
|
65
65
|
|
66
|
+
const toTitle = (str) =>
|
67
|
+
str
|
68
|
+
.replace(/([A-Z])/g, ' $1')
|
69
|
+
.trim()
|
70
|
+
.split(' ')
|
71
|
+
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
72
|
+
.join(' ');
|
73
|
+
|
66
74
|
const observeAttributes = (ele, callback, { excludeAttrs = [], includeAttrs = [] }) => {
|
67
75
|
// sync all attrs on init
|
68
76
|
const filteredAttrs = Array.from(ele.attributes)
|
@@ -9880,6 +9888,58 @@ const isValidDataType = (data) => {
|
|
9880
9888
|
return isValid;
|
9881
9889
|
};
|
9882
9890
|
|
9891
|
+
const isPlainObject = (value) => value?.constructor === Object;
|
9892
|
+
|
9893
|
+
const getValueType = (value) => {
|
9894
|
+
if (isPlainObject(value)) return 'object';
|
9895
|
+
if (Array.isArray(value)) return 'array';
|
9896
|
+
|
9897
|
+
return 'text';
|
9898
|
+
};
|
9899
|
+
|
9900
|
+
const renderCodeSnippet = (value) =>
|
9901
|
+
`<descope-code-snippet lang="json" class="row-details__value json">${JSON.stringify(
|
9902
|
+
value,
|
9903
|
+
null,
|
9904
|
+
2
|
9905
|
+
)}</descope-code-snippet>`;
|
9906
|
+
|
9907
|
+
const renderText = (text) =>
|
9908
|
+
`<div class="row-details__value text" title="${text}">${text}</div>`;
|
9909
|
+
|
9910
|
+
const defaultRowDetailsValueRenderer = (value) => {
|
9911
|
+
const valueType = getValueType(value);
|
9912
|
+
|
9913
|
+
if (valueType === 'object') {
|
9914
|
+
return renderCodeSnippet(value);
|
9915
|
+
}
|
9916
|
+
|
9917
|
+
if (valueType === 'array') {
|
9918
|
+
if (value.some((v) => getValueType(v) === 'object')) {
|
9919
|
+
return renderCodeSnippet(value);
|
9920
|
+
}
|
9921
|
+
return renderText(value.join(',\n'));
|
9922
|
+
}
|
9923
|
+
|
9924
|
+
return renderText(value);
|
9925
|
+
};
|
9926
|
+
|
9927
|
+
const defaultRowDetailsRenderer = (item, itemLabelsMapping) => {
|
9928
|
+
return `
|
9929
|
+
<div class="row-details">
|
9930
|
+
${Object.entries(item)
|
9931
|
+
.map(
|
9932
|
+
([key, value]) =>
|
9933
|
+
`<div class="row-details__item" >
|
9934
|
+
<div class="row-details__label">${itemLabelsMapping[key] || toTitle(key)}</div>
|
9935
|
+
${defaultRowDetailsValueRenderer(value)}
|
9936
|
+
</div>`
|
9937
|
+
)
|
9938
|
+
.join('\n')}
|
9939
|
+
</div>
|
9940
|
+
`;
|
9941
|
+
};
|
9942
|
+
|
9883
9943
|
const componentName$f = getComponentName('grid');
|
9884
9944
|
|
9885
9945
|
const GridMixin = (superclass) =>
|
@@ -9893,6 +9953,41 @@ const GridMixin = (superclass) =>
|
|
9893
9953
|
|
9894
9954
|
// disable the grid sort
|
9895
9955
|
this.baseElement._mapSorters = () => {};
|
9956
|
+
|
9957
|
+
this.baseElement.rowDetailsRenderer = this.#rowDetailsRenderer.bind(this);
|
9958
|
+
}
|
9959
|
+
|
9960
|
+
// this renders the details panel content
|
9961
|
+
// in order to open it, the descope-grid-item-details-column should be used
|
9962
|
+
#rowDetailsRenderer = async (cell, _col, model) => {
|
9963
|
+
await Promise.resolve().then(function () { return index; });
|
9964
|
+
// prevent details panel from being scrolled into view when clicked
|
9965
|
+
cell.addEventListener('mousedown', (e) => e.stopImmediatePropagation(), true);
|
9966
|
+
|
9967
|
+
const template = this.getRowDetailsTemplate(model.item);
|
9968
|
+
|
9969
|
+
// eslint-disable-next-line no-param-reassign
|
9970
|
+
cell.innerHTML = '';
|
9971
|
+
cell.append(template.content.cloneNode(true));
|
9972
|
+
};
|
9973
|
+
|
9974
|
+
getRowDetailsTemplate(item) {
|
9975
|
+
const itemLabelsMapping = this.#columns.reduce(
|
9976
|
+
(acc, { path, header }) => (!path || !header ? acc : { ...acc, [path]: header }),
|
9977
|
+
{}
|
9978
|
+
);
|
9979
|
+
const template =
|
9980
|
+
this.rowDetailsRenderer?.(item, itemLabelsMapping) ??
|
9981
|
+
defaultRowDetailsRenderer(item, itemLabelsMapping);
|
9982
|
+
|
9983
|
+
switch (true) {
|
9984
|
+
case template instanceof HTMLTemplateElement:
|
9985
|
+
return template;
|
9986
|
+
case typeof template === 'string':
|
9987
|
+
return Object.assign(document.createElement('template'), { innerHTML: template });
|
9988
|
+
default:
|
9989
|
+
throw new Error('rowDetailsRenderer should return a string or a template');
|
9990
|
+
}
|
9896
9991
|
}
|
9897
9992
|
|
9898
9993
|
forwardSelectedItemsChange() {
|
@@ -9986,9 +10081,20 @@ const GridMixin = (superclass) =>
|
|
9986
10081
|
);
|
9987
10082
|
}
|
9988
10083
|
|
10084
|
+
// there is an issue in vaadin-grid, when rowDetailsRenderer is set, it renders an empty details panel
|
10085
|
+
reassignRowDetailsRenderer() {
|
10086
|
+
this.baseElement.rowDetailsRenderer = null;
|
10087
|
+
setTimeout(() => {
|
10088
|
+
this.baseElement.rowDetailsRenderer = this.#rowDetailsRenderer.bind(this);
|
10089
|
+
}, 0);
|
10090
|
+
}
|
10091
|
+
|
9989
10092
|
renderColumns() {
|
9990
10093
|
const template = this.getColumnsTemplate();
|
9991
|
-
if (template)
|
10094
|
+
if (template) {
|
10095
|
+
this.reassignRowDetailsRenderer();
|
10096
|
+
this.innerHTML = template;
|
10097
|
+
}
|
9992
10098
|
}
|
9993
10099
|
|
9994
10100
|
get grid() {
|
@@ -10050,17 +10156,35 @@ const {
|
|
10050
10156
|
selectedRow,
|
10051
10157
|
rowSeparator,
|
10052
10158
|
resizeHandle,
|
10159
|
+
toggleDetailsPanelButton,
|
10160
|
+
toggleDetailsPanelButtonOpened,
|
10161
|
+
toggleDetailsPanelButtonClosed,
|
10162
|
+
detailsPanel,
|
10163
|
+
detailsPanelLabels,
|
10164
|
+
selectedRowCell,
|
10165
|
+
detailsPanelContent,
|
10053
10166
|
} = {
|
10054
10167
|
host: { selector: () => 'vaadin-grid' },
|
10055
10168
|
headerRow: { selector: () => '::part(header-cell)' },
|
10056
10169
|
headerRowCell: { selector: () => 'vaadin-grid::part(header-cell)' },
|
10057
10170
|
contentRow: { selector: () => '::part(cell)' },
|
10058
10171
|
firstRow: { selector: () => '::part(first-header-row-cell)' },
|
10059
|
-
selectedRow: { selector: () => '::part(selected-row
|
10172
|
+
selectedRow: { selector: () => '::part(selected-row)' },
|
10173
|
+
selectedRowCell: { selector: () => '::part(selected-row-cell)' },
|
10060
10174
|
sortIndicators: { selector: () => 'vaadin-grid-sorter::part(indicators)' },
|
10061
10175
|
activeSortIndicator: { selector: () => 'vaadin-grid-sorter[direction]' },
|
10062
10176
|
rowSeparator: { selector: () => 'vaadin-grid::part(body-cell)' },
|
10063
10177
|
resizeHandle: { selector: () => '::part(resize-handle)' },
|
10178
|
+
toggleDetailsPanelButton: { selector: () => 'vaadin-grid vaadin-icon.toggle-details-button' },
|
10179
|
+
toggleDetailsPanelButtonOpened: {
|
10180
|
+
selector: () => 'vaadin-grid vaadin-icon.toggle-details-button.opened',
|
10181
|
+
},
|
10182
|
+
toggleDetailsPanelButtonClosed: {
|
10183
|
+
selector: () => 'vaadin-grid vaadin-icon.toggle-details-button.closed',
|
10184
|
+
},
|
10185
|
+
detailsPanel: { selector: () => 'vaadin-grid::part(details-cell)' },
|
10186
|
+
detailsPanelLabels: { selector: () => 'vaadin-grid .row-details__label' },
|
10187
|
+
detailsPanelContent: { selector: () => 'vaadin-grid .row-details' },
|
10064
10188
|
};
|
10065
10189
|
|
10066
10190
|
const GridClass = compose(
|
@@ -10084,7 +10208,10 @@ const GridClass = compose(
|
|
10084
10208
|
borderWidth: { ...host$6, property: 'border-width' },
|
10085
10209
|
borderStyle: { ...host$6, property: 'border-style' },
|
10086
10210
|
borderRadius: { ...host$6, property: 'border-radius' },
|
10087
|
-
selectedBackgroundColor:
|
10211
|
+
selectedBackgroundColor: [
|
10212
|
+
{ ...selectedRow, property: 'background-color' },
|
10213
|
+
{ ...selectedRowCell, property: 'background-color' },
|
10214
|
+
],
|
10088
10215
|
headerRowTextColor: { ...headerRowCell, property: 'color' },
|
10089
10216
|
separatorColor: [
|
10090
10217
|
{ ...firstRow, property: 'border-bottom-color' },
|
@@ -10092,6 +10219,19 @@ const GridClass = compose(
|
|
10092
10219
|
],
|
10093
10220
|
resizeHandleColor: { ...resizeHandle, property: 'background-color' },
|
10094
10221
|
hostDirection: { ...host$6, property: 'direction', fallback: 'ltr' },
|
10222
|
+
toggleDetailsPanelButtonSize: [
|
10223
|
+
{ ...toggleDetailsPanelButton, property: 'width' },
|
10224
|
+
{ ...toggleDetailsPanelButton, property: 'height' },
|
10225
|
+
],
|
10226
|
+
toggleDetailsPanelButtonOpenedColor: { ...toggleDetailsPanelButtonOpened, property: 'color' },
|
10227
|
+
toggleDetailsPanelButtonClosedColor: { ...toggleDetailsPanelButtonClosed, property: 'color' },
|
10228
|
+
toggleDetailsPanelButtonCursor: { ...toggleDetailsPanelButton, property: 'cursor' },
|
10229
|
+
detailsPanelBackgroundColor: { ...detailsPanel, property: 'background-color' },
|
10230
|
+
detailsPanelBorderTopColor: { ...detailsPanel, property: 'border-top-color' },
|
10231
|
+
detailsPanelLabelsColor: { ...detailsPanelLabels, property: 'color' },
|
10232
|
+
detailsPanelLabelsFontSize: { ...detailsPanelLabels, property: 'font-size' },
|
10233
|
+
detailsPanelItemsGap: { ...detailsPanelContent, property: 'grid-gap' },
|
10234
|
+
detailsPanelPadding: { ...detailsPanelContent, property: 'padding' },
|
10095
10235
|
},
|
10096
10236
|
}),
|
10097
10237
|
draggableMixin,
|
@@ -10103,6 +10243,7 @@ const GridClass = compose(
|
|
10103
10243
|
slots: [''],
|
10104
10244
|
wrappedEleName: 'vaadin-grid',
|
10105
10245
|
style: () => `
|
10246
|
+
/*css*/
|
10106
10247
|
vaadin-grid {
|
10107
10248
|
overflow: hidden;
|
10108
10249
|
height: 100%;
|
@@ -10114,7 +10255,36 @@ const GridClass = compose(
|
|
10114
10255
|
vaadin-grid::part(selected-row-cell) {
|
10115
10256
|
background-image: none;
|
10116
10257
|
box-shadow: none;
|
10258
|
+
background-color: inherit;
|
10259
|
+
}
|
10260
|
+
vaadin-grid::part(details-cell) {
|
10261
|
+
border-top-style: dashed;
|
10262
|
+
border-top-width: 1px;
|
10117
10263
|
}
|
10264
|
+
vaadin-grid .row-details {
|
10265
|
+
display: grid;
|
10266
|
+
grid-template-columns: repeat(auto-fit, minmax(max(200px, calc(100%/4 - var(${GridClass.cssVarList.detailsPanelItemsGap}))), 1fr));
|
10267
|
+
width: 100%;
|
10268
|
+
}
|
10269
|
+
vaadin-grid .row-details__item:has(.row-details__value.json) {
|
10270
|
+
grid-column: 1 / -1;
|
10271
|
+
order: 2;
|
10272
|
+
}
|
10273
|
+
vaadin-grid .row-details__value.text {
|
10274
|
+
overflow: hidden;
|
10275
|
+
text-overflow: ellipsis;
|
10276
|
+
white-space: pre;
|
10277
|
+
}
|
10278
|
+
vaadin-grid .row-details__value.json {
|
10279
|
+
margin-top: 5px;
|
10280
|
+
max-height: 120px;
|
10281
|
+
overflow: scroll;
|
10282
|
+
font-size: 0.85em;
|
10283
|
+
}
|
10284
|
+
vaadin-grid vaadin-icon.toggle-details-button {
|
10285
|
+
margin: auto;
|
10286
|
+
}
|
10287
|
+
/*!css*/
|
10118
10288
|
`,
|
10119
10289
|
excludeAttrsSync: ['columns', 'tabindex'],
|
10120
10290
|
componentName: componentName$f,
|
@@ -10150,6 +10320,17 @@ const grid = {
|
|
10150
10320
|
[vars$e.selectedBackgroundColor]: globalRefs$b.colors.surface.highlight,
|
10151
10321
|
[vars$e.hostDirection]: globalRefs$b.direction,
|
10152
10322
|
|
10323
|
+
[vars$e.toggleDetailsPanelButtonSize]: '1em',
|
10324
|
+
[vars$e.toggleDetailsPanelButtonOpenedColor]: globalRefs$b.colors.surface.contrast,
|
10325
|
+
[vars$e.toggleDetailsPanelButtonClosedColor]: globalRefs$b.colors.surface.light,
|
10326
|
+
[vars$e.toggleDetailsPanelButtonCursor]: 'pointer',
|
10327
|
+
[vars$e.detailsPanelBackgroundColor]: globalRefs$b.colors.surface.highlight,
|
10328
|
+
[vars$e.detailsPanelBorderTopColor]: globalRefs$b.colors.surface.light,
|
10329
|
+
[vars$e.detailsPanelLabelsColor]: globalRefs$b.colors.surface.dark,
|
10330
|
+
[vars$e.detailsPanelLabelsFontSize]: '0.8em',
|
10331
|
+
[vars$e.detailsPanelItemsGap]: '2em',
|
10332
|
+
[vars$e.detailsPanelPadding]: '12px 0',
|
10333
|
+
|
10153
10334
|
_bordered: {
|
10154
10335
|
[vars$e.borderColor]: refs.borderColor,
|
10155
10336
|
},
|
@@ -13258,6 +13439,13 @@ const NotificationClass = compose(
|
|
13258
13439
|
})
|
13259
13440
|
);
|
13260
13441
|
|
13442
|
+
customElements.define(componentName$4, CodeSnippetClass);
|
13443
|
+
|
13444
|
+
var index = /*#__PURE__*/Object.freeze({
|
13445
|
+
__proto__: null,
|
13446
|
+
CodeSnippetClass: CodeSnippetClass
|
13447
|
+
});
|
13448
|
+
|
13261
13449
|
exports.AvatarClass = AvatarClass;
|
13262
13450
|
exports.BadgeClass = BadgeClass;
|
13263
13451
|
exports.ButtonClass = ButtonClass;
|