@descope/web-components-ui 1.0.347 → 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 +208 -13
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +393 -159
- 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-enriched-text/EnrichedTextClass.js +2 -4
- 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/components/descope-link/LinkClass.js +3 -5
- package/src/components/descope-radio-group/RadioButtonClass.js +3 -0
- package/src/helpers/index.js +8 -0
- package/src/mixins/createProxy.js +1 -1
- package/src/theme/components/enrichedText.js +2 -0
- package/src/theme/components/grid.js +11 -0
- package/src/theme/components/link.js +4 -0
- package/src/theme/components/radioGroup/radioButton.js +2 -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)
|
@@ -1133,7 +1141,7 @@ const createProxy = ({
|
|
1133
1141
|
|
1134
1142
|
constructor() {
|
1135
1143
|
super().attachShadow({ mode: 'open', delegatesFocus }).innerHTML = `
|
1136
|
-
<style id="create-proxy">${isFunction(style) ? style() : style}</style>
|
1144
|
+
<style id="create-proxy">${(isFunction(style) ? style() : style) || ''}</style>
|
1137
1145
|
<${wrappedEleName}>
|
1138
1146
|
${slots
|
1139
1147
|
.map(
|
@@ -5026,12 +5034,8 @@ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName:
|
|
5026
5034
|
margin-bottom: 1em;
|
5027
5035
|
}
|
5028
5036
|
a {
|
5029
|
-
text-decoration: none;
|
5030
5037
|
cursor: pointer;
|
5031
5038
|
}
|
5032
|
-
a:hover {
|
5033
|
-
text-decoration: underline;
|
5034
|
-
}
|
5035
5039
|
blockquote {
|
5036
5040
|
padding: 0 2em;
|
5037
5041
|
}
|
@@ -5176,6 +5180,8 @@ const EnrichedTextClass = compose(
|
|
5176
5180
|
textLineHeight: { property: 'line-height' },
|
5177
5181
|
textAlign: {},
|
5178
5182
|
linkColor: { selector: 'a', property: 'color' },
|
5183
|
+
linkTextDecoration: { selector: 'a', property: 'text-decoration' },
|
5184
|
+
linkHoverTextDecoration: { selector: 'a:hover', property: 'text-decoration' },
|
5179
5185
|
minHeight: {},
|
5180
5186
|
minWidth: {},
|
5181
5187
|
},
|
@@ -5199,10 +5205,6 @@ class RawLink extends createBaseClass({ componentName: componentName$B, baseSele
|
|
5199
5205
|
}
|
5200
5206
|
:host a {
|
5201
5207
|
display: inline;
|
5202
|
-
text-decoration: none;
|
5203
|
-
}
|
5204
|
-
:host a:hover {
|
5205
|
-
text-decoration: underline;
|
5206
5208
|
}
|
5207
5209
|
</style>
|
5208
5210
|
<div>
|
@@ -5229,12 +5231,13 @@ class RawLink extends createBaseClass({ componentName: componentName$B, baseSele
|
|
5229
5231
|
|
5230
5232
|
const selectors$2 = {
|
5231
5233
|
host: { selector: () => ':host' },
|
5234
|
+
link: { selector: () => ':host a' },
|
5232
5235
|
anchor: {},
|
5233
5236
|
wrapper: { selector: () => ':host > div' },
|
5234
5237
|
text: { selector: () => TextClass.componentName },
|
5235
5238
|
};
|
5236
5239
|
|
5237
|
-
const { anchor, text: text$1, host: host$h, wrapper: wrapper$1 } = selectors$2;
|
5240
|
+
const { anchor, text: text$1, host: host$h, wrapper: wrapper$1, link: link$3 } = selectors$2;
|
5238
5241
|
|
5239
5242
|
const LinkClass = compose(
|
5240
5243
|
createStyleMixin({
|
@@ -5242,6 +5245,7 @@ const LinkClass = compose(
|
|
5242
5245
|
hostWidth: { ...host$h, property: 'width' },
|
5243
5246
|
hostDirection: { ...text$1, property: 'direction' },
|
5244
5247
|
textAlign: wrapper$1,
|
5248
|
+
textDecoration: { ...link$3, property: 'text-decoration', fallback: 'none' },
|
5245
5249
|
textColor: [
|
5246
5250
|
{ ...anchor, property: 'color' },
|
5247
5251
|
{ ...text$1, property: TextClass.cssVarList.textColor },
|
@@ -5269,6 +5273,8 @@ const EnrichedText = {
|
|
5269
5273
|
[vars$u.textColor]: globalRefs$l.colors.surface.dark,
|
5270
5274
|
|
5271
5275
|
[vars$u.linkColor]: `var(${LinkClass.cssVarList.textColor})`,
|
5276
|
+
[vars$u.linkTextDecoration]: 'none',
|
5277
|
+
[vars$u.linkHoverTextDecoration]: 'underline',
|
5272
5278
|
|
5273
5279
|
[vars$u.minWidth]: '0.25em',
|
5274
5280
|
[vars$u.minHeight]: '1.35em',
|
@@ -5362,6 +5368,10 @@ const link$1 = {
|
|
5362
5368
|
[vars$t.hostWidth]: '100%',
|
5363
5369
|
},
|
5364
5370
|
|
5371
|
+
_hover: {
|
5372
|
+
[vars$t.textDecoration]: 'underline',
|
5373
|
+
},
|
5374
|
+
|
5365
5375
|
mode: {
|
5366
5376
|
secondary: {
|
5367
5377
|
[vars$t.textColor]: globalRefs$k.colors.secondary.main,
|
@@ -9878,6 +9888,58 @@ const isValidDataType = (data) => {
|
|
9878
9888
|
return isValid;
|
9879
9889
|
};
|
9880
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
|
+
|
9881
9943
|
const componentName$f = getComponentName('grid');
|
9882
9944
|
|
9883
9945
|
const GridMixin = (superclass) =>
|
@@ -9891,6 +9953,41 @@ const GridMixin = (superclass) =>
|
|
9891
9953
|
|
9892
9954
|
// disable the grid sort
|
9893
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
|
+
}
|
9894
9991
|
}
|
9895
9992
|
|
9896
9993
|
forwardSelectedItemsChange() {
|
@@ -9984,9 +10081,20 @@ const GridMixin = (superclass) =>
|
|
9984
10081
|
);
|
9985
10082
|
}
|
9986
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
|
+
|
9987
10092
|
renderColumns() {
|
9988
10093
|
const template = this.getColumnsTemplate();
|
9989
|
-
if (template)
|
10094
|
+
if (template) {
|
10095
|
+
this.reassignRowDetailsRenderer();
|
10096
|
+
this.innerHTML = template;
|
10097
|
+
}
|
9990
10098
|
}
|
9991
10099
|
|
9992
10100
|
get grid() {
|
@@ -10048,17 +10156,35 @@ const {
|
|
10048
10156
|
selectedRow,
|
10049
10157
|
rowSeparator,
|
10050
10158
|
resizeHandle,
|
10159
|
+
toggleDetailsPanelButton,
|
10160
|
+
toggleDetailsPanelButtonOpened,
|
10161
|
+
toggleDetailsPanelButtonClosed,
|
10162
|
+
detailsPanel,
|
10163
|
+
detailsPanelLabels,
|
10164
|
+
selectedRowCell,
|
10165
|
+
detailsPanelContent,
|
10051
10166
|
} = {
|
10052
10167
|
host: { selector: () => 'vaadin-grid' },
|
10053
10168
|
headerRow: { selector: () => '::part(header-cell)' },
|
10054
10169
|
headerRowCell: { selector: () => 'vaadin-grid::part(header-cell)' },
|
10055
10170
|
contentRow: { selector: () => '::part(cell)' },
|
10056
10171
|
firstRow: { selector: () => '::part(first-header-row-cell)' },
|
10057
|
-
selectedRow: { selector: () => '::part(selected-row
|
10172
|
+
selectedRow: { selector: () => '::part(selected-row)' },
|
10173
|
+
selectedRowCell: { selector: () => '::part(selected-row-cell)' },
|
10058
10174
|
sortIndicators: { selector: () => 'vaadin-grid-sorter::part(indicators)' },
|
10059
10175
|
activeSortIndicator: { selector: () => 'vaadin-grid-sorter[direction]' },
|
10060
10176
|
rowSeparator: { selector: () => 'vaadin-grid::part(body-cell)' },
|
10061
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' },
|
10062
10188
|
};
|
10063
10189
|
|
10064
10190
|
const GridClass = compose(
|
@@ -10082,7 +10208,10 @@ const GridClass = compose(
|
|
10082
10208
|
borderWidth: { ...host$6, property: 'border-width' },
|
10083
10209
|
borderStyle: { ...host$6, property: 'border-style' },
|
10084
10210
|
borderRadius: { ...host$6, property: 'border-radius' },
|
10085
|
-
selectedBackgroundColor:
|
10211
|
+
selectedBackgroundColor: [
|
10212
|
+
{ ...selectedRow, property: 'background-color' },
|
10213
|
+
{ ...selectedRowCell, property: 'background-color' },
|
10214
|
+
],
|
10086
10215
|
headerRowTextColor: { ...headerRowCell, property: 'color' },
|
10087
10216
|
separatorColor: [
|
10088
10217
|
{ ...firstRow, property: 'border-bottom-color' },
|
@@ -10090,6 +10219,19 @@ const GridClass = compose(
|
|
10090
10219
|
],
|
10091
10220
|
resizeHandleColor: { ...resizeHandle, property: 'background-color' },
|
10092
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' },
|
10093
10235
|
},
|
10094
10236
|
}),
|
10095
10237
|
draggableMixin,
|
@@ -10101,6 +10243,7 @@ const GridClass = compose(
|
|
10101
10243
|
slots: [''],
|
10102
10244
|
wrappedEleName: 'vaadin-grid',
|
10103
10245
|
style: () => `
|
10246
|
+
/*css*/
|
10104
10247
|
vaadin-grid {
|
10105
10248
|
overflow: hidden;
|
10106
10249
|
height: 100%;
|
@@ -10112,7 +10255,36 @@ const GridClass = compose(
|
|
10112
10255
|
vaadin-grid::part(selected-row-cell) {
|
10113
10256
|
background-image: none;
|
10114
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;
|
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;
|
10115
10283
|
}
|
10284
|
+
vaadin-grid vaadin-icon.toggle-details-button {
|
10285
|
+
margin: auto;
|
10286
|
+
}
|
10287
|
+
/*!css*/
|
10116
10288
|
`,
|
10117
10289
|
excludeAttrsSync: ['columns', 'tabindex'],
|
10118
10290
|
componentName: componentName$f,
|
@@ -10148,6 +10320,17 @@ const grid = {
|
|
10148
10320
|
[vars$e.selectedBackgroundColor]: globalRefs$b.colors.surface.highlight,
|
10149
10321
|
[vars$e.hostDirection]: globalRefs$b.direction,
|
10150
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
|
+
|
10151
10334
|
_bordered: {
|
10152
10335
|
[vars$e.borderColor]: refs.borderColor,
|
10153
10336
|
},
|
@@ -12585,6 +12768,9 @@ const RadioButtonClass = compose(
|
|
12585
12768
|
radioMargin: { selector: '::part(radio)', property: 'margin' },
|
12586
12769
|
radioCheckedSize: { selector: '::part(radio)::after', property: 'border-width' },
|
12587
12770
|
radioCheckedColor: { selector: '::part(radio)::after', property: 'border-color' },
|
12771
|
+
radioBorderColor: { selector: '::part(radio)', property: 'border-color', fallback: 'none' },
|
12772
|
+
radioBorderWidth: { selector: '::part(radio)', property: 'border-width', fallback: 0 },
|
12773
|
+
radioBorderStyle: { selector: '::part(radio)', property: 'border-style', fallback: 'solid' },
|
12588
12774
|
},
|
12589
12775
|
}),
|
12590
12776
|
composedProxyInputMixin({ proxyProps: ['setSelectionRange'] }),
|
@@ -12822,6 +13008,8 @@ const radioButton = {
|
|
12822
13008
|
[vars$1.radioCheckedSize]: `calc(var(${vars$1.radioSize})/5)`,
|
12823
13009
|
[vars$1.radioCheckedColor]: globalRefs.colors.surface.light,
|
12824
13010
|
[vars$1.radioBackgroundColor]: globalRefs.colors.surface.light,
|
13011
|
+
[vars$1.radioBorderColor]: 'none',
|
13012
|
+
[vars$1.radioBorderWidth]: 0,
|
12825
13013
|
|
12826
13014
|
_checked: {
|
12827
13015
|
[vars$1.radioBackgroundColor]: globalRefs.colors.surface.contrast,
|
@@ -13251,6 +13439,13 @@ const NotificationClass = compose(
|
|
13251
13439
|
})
|
13252
13440
|
);
|
13253
13441
|
|
13442
|
+
customElements.define(componentName$4, CodeSnippetClass);
|
13443
|
+
|
13444
|
+
var index = /*#__PURE__*/Object.freeze({
|
13445
|
+
__proto__: null,
|
13446
|
+
CodeSnippetClass: CodeSnippetClass
|
13447
|
+
});
|
13448
|
+
|
13254
13449
|
exports.AvatarClass = AvatarClass;
|
13255
13450
|
exports.BadgeClass = BadgeClass;
|
13256
13451
|
exports.ButtonClass = ButtonClass;
|