@descope/web-components-ui 1.0.348 → 1.0.350

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.
Files changed (31) hide show
  1. package/dist/cjs/index.cjs.js +183 -3
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +831 -610
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/umd/1612.js +116 -4
  6. package/dist/umd/3227.js +17 -0
  7. package/dist/umd/4024.js +116 -4
  8. package/dist/umd/4028.js +121 -9
  9. package/dist/umd/4052.js +116 -4
  10. package/dist/umd/4978.js +1 -1
  11. package/dist/umd/5135.js +2 -2
  12. package/dist/umd/602.js +114 -2
  13. package/dist/umd/9562.js +116 -4
  14. package/dist/umd/DescopeDev.js +1 -1
  15. package/dist/umd/descope-button-index-js.js +116 -4
  16. package/dist/umd/descope-grid-descope-grid-custom-column-index-js.js +3 -3
  17. package/dist/umd/descope-grid-descope-grid-item-details-column-index-js.js +90 -0
  18. package/dist/umd/descope-grid-descope-grid-item-details-column-index-js.js.LICENSE.txt +17 -0
  19. package/dist/umd/descope-grid-descope-grid-text-column-index-js.js +1 -1
  20. package/dist/umd/descope-grid-index-js.js +1 -1
  21. package/dist/umd/index.js +1 -1
  22. package/package.json +1 -1
  23. package/src/components/descope-grid/GridClass.js +115 -6
  24. package/src/components/descope-grid/descope-grid-item-details-column/GridItemDetailsColumnClass.js +37 -0
  25. package/src/components/descope-grid/descope-grid-item-details-column/index.js +8 -0
  26. package/src/components/descope-grid/helpers.js +54 -0
  27. package/src/components/descope-grid/index.js +2 -0
  28. package/src/helpers/index.js +8 -0
  29. package/src/theme/components/grid.js +11 -0
  30. package/dist/umd/2362.js +0 -129
  31. /package/dist/umd/{2362.js.LICENSE.txt → 3227.js.LICENSE.txt} +0 -0
package/dist/index.esm.js CHANGED
@@ -13,12 +13,12 @@ import '@vaadin/combo-box';
13
13
  import '@vaadin/grid';
14
14
  import { GridSortColumn } from '@vaadin/grid/vaadin-grid-sort-column';
15
15
  import { GridSelectionColumn } from '@vaadin/grid/vaadin-grid-selection-column';
16
+ import hljs from 'highlight.js';
16
17
  import '@vaadin/multi-select-combo-box';
17
18
  import '@vaadin/dialog';
18
19
  import '@vaadin/notification';
19
20
  import '@vaadin/avatar';
20
21
  import '@vaadin/custom-field';
21
- import hljs from 'highlight.js';
22
22
  import '@vaadin/radio-group';
23
23
  import merge from 'lodash.merge';
24
24
  import Color from 'color';
@@ -76,6 +76,14 @@ const compareArraysUnordered = (arr1, arr2) => {
76
76
  return true;
77
77
  };
78
78
 
79
+ const toTitle = (str) =>
80
+ str
81
+ .replace(/([A-Z])/g, ' $1')
82
+ .trim()
83
+ .split(' ')
84
+ .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
85
+ .join(' ');
86
+
79
87
  const DESCOPE_PREFIX = 'descope';
80
88
  const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3;
81
89
  const BASE_THEME_SECTION = 'host';
@@ -1376,9 +1384,9 @@ const inputEventsDispatchingMixin = (superclass) =>
1376
1384
 
1377
1385
  /* eslint-disable no-use-before-define */
1378
1386
 
1379
- const componentName$W = getComponentName('icon');
1387
+ const componentName$X = getComponentName('icon');
1380
1388
 
1381
- class RawIcon extends createBaseClass({ componentName: componentName$W, baseSelector: 'slot' }) {
1389
+ class RawIcon extends createBaseClass({ componentName: componentName$X, baseSelector: 'slot' }) {
1382
1390
  constructor() {
1383
1391
  super();
1384
1392
 
@@ -1447,7 +1455,7 @@ const clickableMixin = (superclass) =>
1447
1455
  }
1448
1456
  };
1449
1457
 
1450
- const componentName$V = getComponentName('button');
1458
+ const componentName$W = getComponentName('button');
1451
1459
 
1452
1460
  const resetStyles = `
1453
1461
  :host {
@@ -1557,7 +1565,7 @@ const ButtonClass = compose(
1557
1565
  }
1558
1566
  `,
1559
1567
  excludeAttrsSync: ['tabindex'],
1560
- componentName: componentName$V,
1568
+ componentName: componentName$W,
1561
1569
  })
1562
1570
  );
1563
1571
 
@@ -1594,7 +1602,7 @@ loadingIndicatorStyles = `
1594
1602
  }
1595
1603
  `;
1596
1604
 
1597
- customElements.define(componentName$V, ButtonClass);
1605
+ customElements.define(componentName$W, ButtonClass);
1598
1606
 
1599
1607
  const createBaseInputClass = (...args) =>
1600
1608
  compose(
@@ -1604,11 +1612,11 @@ const createBaseInputClass = (...args) =>
1604
1612
  inputEventsDispatchingMixin
1605
1613
  )(createBaseClass(...args));
1606
1614
 
1607
- const componentName$U = getComponentName('boolean-field-internal');
1615
+ const componentName$V = getComponentName('boolean-field-internal');
1608
1616
 
1609
1617
  const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
1610
1618
 
1611
- const BaseInputClass$8 = createBaseInputClass({ componentName: componentName$U, baseSelector: 'div' });
1619
+ const BaseInputClass$8 = createBaseInputClass({ componentName: componentName$V, baseSelector: 'div' });
1612
1620
 
1613
1621
  class BooleanInputInternal extends BaseInputClass$8 {
1614
1622
  static get observedAttributes() {
@@ -1684,14 +1692,14 @@ const booleanFieldMixin = (superclass) =>
1684
1692
 
1685
1693
  const template = document.createElement('template');
1686
1694
  template.innerHTML = `
1687
- <${componentName$U}
1695
+ <${componentName$V}
1688
1696
  tabindex="-1"
1689
1697
  slot="input"
1690
- ></${componentName$U}>
1698
+ ></${componentName$V}>
1691
1699
  `;
1692
1700
 
1693
1701
  this.baseElement.appendChild(template.content.cloneNode(true));
1694
- this.inputElement = this.shadowRoot.querySelector(componentName$U);
1702
+ this.inputElement = this.shadowRoot.querySelector(componentName$V);
1695
1703
  this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
1696
1704
 
1697
1705
  forwardAttrs(this, this.inputElement, {
@@ -1906,7 +1914,7 @@ descope-boolean-field-internal {
1906
1914
  }
1907
1915
  `;
1908
1916
 
1909
- const componentName$T = getComponentName('checkbox');
1917
+ const componentName$U = getComponentName('checkbox');
1910
1918
 
1911
1919
  const {
1912
1920
  host: host$m,
@@ -2012,15 +2020,15 @@ const CheckboxClass = compose(
2012
2020
  }
2013
2021
  `,
2014
2022
  excludeAttrsSync: ['label', 'tabindex'],
2015
- componentName: componentName$T,
2023
+ componentName: componentName$U,
2016
2024
  })
2017
2025
  );
2018
2026
 
2019
- customElements.define(componentName$U, BooleanInputInternal);
2027
+ customElements.define(componentName$V, BooleanInputInternal);
2020
2028
 
2021
- customElements.define(componentName$T, CheckboxClass);
2029
+ customElements.define(componentName$U, CheckboxClass);
2022
2030
 
2023
- const componentName$S = getComponentName('switch-toggle');
2031
+ const componentName$T = getComponentName('switch-toggle');
2024
2032
 
2025
2033
  const {
2026
2034
  host: host$l,
@@ -2152,17 +2160,17 @@ const SwitchToggleClass = compose(
2152
2160
  }
2153
2161
  `,
2154
2162
  excludeAttrsSync: ['label', 'tabindex'],
2155
- componentName: componentName$S,
2163
+ componentName: componentName$T,
2156
2164
  })
2157
2165
  );
2158
2166
 
2159
- customElements.define(componentName$S, SwitchToggleClass);
2167
+ customElements.define(componentName$T, SwitchToggleClass);
2160
2168
 
2161
- const componentName$R = getComponentName('loader-linear');
2169
+ const componentName$S = getComponentName('loader-linear');
2162
2170
 
2163
- class RawLoaderLinear extends createBaseClass({ componentName: componentName$R, baseSelector: ':host > div' }) {
2171
+ class RawLoaderLinear extends createBaseClass({ componentName: componentName$S, baseSelector: ':host > div' }) {
2164
2172
  static get componentName() {
2165
- return componentName$R;
2173
+ return componentName$S;
2166
2174
  }
2167
2175
 
2168
2176
  constructor() {
@@ -2223,11 +2231,11 @@ const LoaderLinearClass = compose(
2223
2231
  componentNameValidationMixin
2224
2232
  )(RawLoaderLinear);
2225
2233
 
2226
- customElements.define(componentName$R, LoaderLinearClass);
2234
+ customElements.define(componentName$S, LoaderLinearClass);
2227
2235
 
2228
- const componentName$Q = getComponentName('loader-radial');
2236
+ const componentName$R = getComponentName('loader-radial');
2229
2237
 
2230
- class RawLoaderRadial extends createBaseClass({ componentName: componentName$Q, baseSelector: ':host > div' }) {
2238
+ class RawLoaderRadial extends createBaseClass({ componentName: componentName$R, baseSelector: ':host > div' }) {
2231
2239
  constructor() {
2232
2240
  super();
2233
2241
 
@@ -2271,11 +2279,11 @@ const LoaderRadialClass = compose(
2271
2279
  componentNameValidationMixin
2272
2280
  )(RawLoaderRadial);
2273
2281
 
2274
- customElements.define(componentName$Q, LoaderRadialClass);
2282
+ customElements.define(componentName$R, LoaderRadialClass);
2275
2283
 
2276
- const componentName$P = getComponentName('container');
2284
+ const componentName$Q = getComponentName('container');
2277
2285
 
2278
- class RawContainer extends createBaseClass({ componentName: componentName$P, baseSelector: 'slot' }) {
2286
+ class RawContainer extends createBaseClass({ componentName: componentName$Q, baseSelector: 'slot' }) {
2279
2287
  constructor() {
2280
2288
  super();
2281
2289
 
@@ -2328,11 +2336,11 @@ const ContainerClass = compose(
2328
2336
  componentNameValidationMixin
2329
2337
  )(RawContainer);
2330
2338
 
2331
- customElements.define(componentName$P, ContainerClass);
2339
+ customElements.define(componentName$Q, ContainerClass);
2332
2340
 
2333
- const componentName$O = getComponentName('text');
2341
+ const componentName$P = getComponentName('text');
2334
2342
 
2335
- class RawText extends createBaseClass({ componentName: componentName$O, baseSelector: ':host > slot' }) {
2343
+ class RawText extends createBaseClass({ componentName: componentName$P, baseSelector: ':host > slot' }) {
2336
2344
  constructor() {
2337
2345
  super();
2338
2346
 
@@ -2389,8 +2397,8 @@ const TextClass = compose(
2389
2397
  componentNameValidationMixin
2390
2398
  )(RawText);
2391
2399
 
2392
- const componentName$N = getComponentName('divider');
2393
- class RawDivider extends createBaseClass({ componentName: componentName$N, baseSelector: ':host > div' }) {
2400
+ const componentName$O = getComponentName('divider');
2401
+ class RawDivider extends createBaseClass({ componentName: componentName$O, baseSelector: ':host > div' }) {
2394
2402
  constructor() {
2395
2403
  super();
2396
2404
 
@@ -2489,9 +2497,9 @@ const DividerClass = compose(
2489
2497
  componentNameValidationMixin
2490
2498
  )(RawDivider);
2491
2499
 
2492
- customElements.define(componentName$O, TextClass);
2500
+ customElements.define(componentName$P, TextClass);
2493
2501
 
2494
- customElements.define(componentName$N, DividerClass);
2502
+ customElements.define(componentName$O, DividerClass);
2495
2503
 
2496
2504
  const {
2497
2505
  host: host$i,
@@ -2600,7 +2608,7 @@ var textFieldMappings = {
2600
2608
  inputIconColor: { ...inputIcon, property: 'color' },
2601
2609
  };
2602
2610
 
2603
- const componentName$M = getComponentName('email-field');
2611
+ const componentName$N = getComponentName('email-field');
2604
2612
 
2605
2613
  const customMixin$a = (superclass) =>
2606
2614
  class EmailFieldMixinClass extends superclass {
@@ -2655,15 +2663,15 @@ const EmailFieldClass = compose(
2655
2663
  }
2656
2664
  `,
2657
2665
  excludeAttrsSync: ['tabindex'],
2658
- componentName: componentName$M,
2666
+ componentName: componentName$N,
2659
2667
  })
2660
2668
  );
2661
2669
 
2662
- customElements.define(componentName$M, EmailFieldClass);
2670
+ customElements.define(componentName$N, EmailFieldClass);
2663
2671
 
2664
- const componentName$L = getComponentName('link');
2672
+ const componentName$M = getComponentName('link');
2665
2673
 
2666
- class RawLink extends createBaseClass({ componentName: componentName$L, baseSelector: ':host a' }) {
2674
+ class RawLink extends createBaseClass({ componentName: componentName$M, baseSelector: ':host a' }) {
2667
2675
  constructor() {
2668
2676
  super();
2669
2677
 
@@ -2727,7 +2735,7 @@ const LinkClass = compose(
2727
2735
  componentNameValidationMixin
2728
2736
  )(RawLink);
2729
2737
 
2730
- customElements.define(componentName$L, LinkClass);
2738
+ customElements.define(componentName$M, LinkClass);
2731
2739
 
2732
2740
  const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
2733
2741
  let style;
@@ -2779,37 +2787,37 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
2779
2787
  return CssVarImageClass;
2780
2788
  };
2781
2789
 
2782
- const componentName$K = getComponentName('logo');
2790
+ const componentName$L = getComponentName('logo');
2783
2791
 
2784
2792
  const LogoClass = createCssVarImageClass({
2785
- componentName: componentName$K,
2793
+ componentName: componentName$L,
2786
2794
  varName: 'url',
2787
2795
  fallbackVarName: 'fallbackUrl',
2788
2796
  });
2789
2797
 
2790
- customElements.define(componentName$K, LogoClass);
2798
+ customElements.define(componentName$L, LogoClass);
2791
2799
 
2792
- const componentName$J = getComponentName('totp-image');
2800
+ const componentName$K = getComponentName('totp-image');
2793
2801
 
2794
2802
  const TotpImageClass = createCssVarImageClass({
2795
- componentName: componentName$J,
2803
+ componentName: componentName$K,
2796
2804
  varName: 'url',
2797
2805
  fallbackVarName: 'fallbackUrl',
2798
2806
  });
2799
2807
 
2800
- customElements.define(componentName$J, TotpImageClass);
2808
+ customElements.define(componentName$K, TotpImageClass);
2801
2809
 
2802
- const componentName$I = getComponentName('notp-image');
2810
+ const componentName$J = getComponentName('notp-image');
2803
2811
 
2804
2812
  const NotpImageClass = createCssVarImageClass({
2805
- componentName: componentName$I,
2813
+ componentName: componentName$J,
2806
2814
  varName: 'url',
2807
2815
  fallbackVarName: 'fallbackUrl',
2808
2816
  });
2809
2817
 
2810
- customElements.define(componentName$I, NotpImageClass);
2818
+ customElements.define(componentName$J, NotpImageClass);
2811
2819
 
2812
- const componentName$H = getComponentName('number-field');
2820
+ const componentName$I = getComponentName('number-field');
2813
2821
 
2814
2822
  const NumberFieldClass = compose(
2815
2823
  createStyleMixin({
@@ -2843,11 +2851,11 @@ const NumberFieldClass = compose(
2843
2851
  }
2844
2852
  `,
2845
2853
  excludeAttrsSync: ['tabindex'],
2846
- componentName: componentName$H,
2854
+ componentName: componentName$I,
2847
2855
  })
2848
2856
  );
2849
2857
 
2850
- customElements.define(componentName$H, NumberFieldClass);
2858
+ customElements.define(componentName$I, NumberFieldClass);
2851
2859
 
2852
2860
  const focusElement = (ele) => {
2853
2861
  ele?.focus();
@@ -2865,13 +2873,13 @@ const getSanitizedCharacters = (str) => {
2865
2873
 
2866
2874
  /* eslint-disable no-param-reassign */
2867
2875
 
2868
- const componentName$G = getComponentName('passcode-internal');
2876
+ const componentName$H = getComponentName('passcode-internal');
2869
2877
 
2870
2878
  const observedAttributes$5 = ['digits', 'loading'];
2871
2879
 
2872
2880
  const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
2873
2881
 
2874
- const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$G, baseSelector: 'div' });
2882
+ const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$H, baseSelector: 'div' });
2875
2883
 
2876
2884
  class PasscodeInternal extends BaseInputClass$7 {
2877
2885
  static get observedAttributes() {
@@ -3097,7 +3105,7 @@ class PasscodeInternal extends BaseInputClass$7 {
3097
3105
  }
3098
3106
  }
3099
3107
 
3100
- const componentName$F = getComponentName('text-field');
3108
+ const componentName$G = getComponentName('text-field');
3101
3109
 
3102
3110
  const observedAttrs = ['type', 'label-type', 'copy-to-clipboard'];
3103
3111
 
@@ -3219,11 +3227,11 @@ const TextFieldClass = compose(
3219
3227
  }
3220
3228
  `,
3221
3229
  excludeAttrsSync: ['tabindex'],
3222
- componentName: componentName$F,
3230
+ componentName: componentName$G,
3223
3231
  })
3224
3232
  );
3225
3233
 
3226
- const componentName$E = getComponentName('passcode');
3234
+ const componentName$F = getComponentName('passcode');
3227
3235
 
3228
3236
  const observedAttributes$4 = ['digits'];
3229
3237
 
@@ -3242,17 +3250,17 @@ const customMixin$8 = (superclass) =>
3242
3250
  const template = document.createElement('template');
3243
3251
 
3244
3252
  template.innerHTML = `
3245
- <${componentName$G}
3253
+ <${componentName$H}
3246
3254
  bordered="true"
3247
3255
  name="code"
3248
3256
  tabindex="-1"
3249
3257
  slot="input"
3250
- ><slot></slot></${componentName$G}>
3258
+ ><slot></slot></${componentName$H}>
3251
3259
  `;
3252
3260
 
3253
3261
  this.baseElement.appendChild(template.content.cloneNode(true));
3254
3262
 
3255
- this.inputElement = this.shadowRoot.querySelector(componentName$G);
3263
+ this.inputElement = this.shadowRoot.querySelector(componentName$H);
3256
3264
 
3257
3265
  forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
3258
3266
  }
@@ -3399,15 +3407,15 @@ const PasscodeClass = compose(
3399
3407
  ${resetInputCursor('vaadin-text-field')}
3400
3408
  `,
3401
3409
  excludeAttrsSync: ['tabindex'],
3402
- componentName: componentName$E,
3410
+ componentName: componentName$F,
3403
3411
  })
3404
3412
  );
3405
3413
 
3406
- customElements.define(componentName$F, TextFieldClass);
3414
+ customElements.define(componentName$G, TextFieldClass);
3407
3415
 
3408
- customElements.define(componentName$G, PasscodeInternal);
3416
+ customElements.define(componentName$H, PasscodeInternal);
3409
3417
 
3410
- customElements.define(componentName$E, PasscodeClass);
3418
+ customElements.define(componentName$F, PasscodeClass);
3411
3419
 
3412
3420
  const passwordDraggableMixin = (superclass) =>
3413
3421
  class PasswordDraggableMixinClass extends superclass {
@@ -3448,7 +3456,7 @@ const passwordDraggableMixin = (superclass) =>
3448
3456
  }
3449
3457
  };
3450
3458
 
3451
- const componentName$D = getComponentName('password');
3459
+ const componentName$E = getComponentName('password');
3452
3460
 
3453
3461
  const customMixin$7 = (superclass) =>
3454
3462
  class PasswordFieldMixinClass extends superclass {
@@ -3637,11 +3645,11 @@ const PasswordClass = compose(
3637
3645
  }
3638
3646
  `,
3639
3647
  excludeAttrsSync: ['tabindex'],
3640
- componentName: componentName$D,
3648
+ componentName: componentName$E,
3641
3649
  })
3642
3650
  );
3643
3651
 
3644
- customElements.define(componentName$D, PasswordClass);
3652
+ customElements.define(componentName$E, PasswordClass);
3645
3653
 
3646
3654
  const disableRules = [
3647
3655
  'blockquote',
@@ -3666,9 +3674,9 @@ const decodeHTML = (html) => {
3666
3674
 
3667
3675
  /* eslint-disable no-param-reassign */
3668
3676
 
3669
- const componentName$C = getComponentName('enriched-text');
3677
+ const componentName$D = getComponentName('enriched-text');
3670
3678
 
3671
- let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName: componentName$C, baseSelector: ':host > div' }) {
3679
+ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName: componentName$D, baseSelector: ':host > div' }) {
3672
3680
  #origLinkRenderer;
3673
3681
 
3674
3682
  #origEmRenderer;
@@ -3857,9 +3865,9 @@ const EnrichedTextClass = compose(
3857
3865
  componentNameValidationMixin
3858
3866
  )(EnrichedText$2);
3859
3867
 
3860
- customElements.define(componentName$C, EnrichedTextClass);
3868
+ customElements.define(componentName$D, EnrichedTextClass);
3861
3869
 
3862
- const componentName$B = getComponentName('text-area');
3870
+ const componentName$C = getComponentName('text-area');
3863
3871
 
3864
3872
  const {
3865
3873
  host: host$e,
@@ -3935,17 +3943,17 @@ const TextAreaClass = compose(
3935
3943
  ${resetInputCursor('vaadin-text-area')}
3936
3944
  `,
3937
3945
  excludeAttrsSync: ['tabindex'],
3938
- componentName: componentName$B,
3946
+ componentName: componentName$C,
3939
3947
  })
3940
3948
  );
3941
3949
 
3942
- customElements.define(componentName$B, TextAreaClass);
3950
+ customElements.define(componentName$C, TextAreaClass);
3943
3951
 
3944
3952
  const observedAttributes$3 = ['src', 'alt'];
3945
3953
 
3946
- const componentName$A = getComponentName('image');
3954
+ const componentName$B = getComponentName('image');
3947
3955
 
3948
- const BaseClass$1 = createBaseClass({ componentName: componentName$A, baseSelector: ':host > img' });
3956
+ const BaseClass$1 = createBaseClass({ componentName: componentName$B, baseSelector: ':host > img' });
3949
3957
  class RawImage extends BaseClass$1 {
3950
3958
  static get observedAttributes() {
3951
3959
  return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
@@ -3985,9 +3993,9 @@ const ImageClass = compose(
3985
3993
  draggableMixin
3986
3994
  )(RawImage);
3987
3995
 
3988
- customElements.define(componentName$A, ImageClass);
3996
+ customElements.define(componentName$B, ImageClass);
3989
3997
 
3990
- const componentName$z = getComponentName('combo-box');
3998
+ const componentName$A = getComponentName('combo-box');
3991
3999
 
3992
4000
  const ComboBoxMixin = (superclass) =>
3993
4001
  class ComboBoxMixinClass extends superclass {
@@ -4426,12 +4434,12 @@ const ComboBoxClass = compose(
4426
4434
  // and reset items to an empty array, and opening the list box with no items
4427
4435
  // to display.
4428
4436
  excludeAttrsSync: ['tabindex', 'size', 'data'],
4429
- componentName: componentName$z,
4437
+ componentName: componentName$A,
4430
4438
  includeForwardProps: ['items', 'renderer', 'selectedItem'],
4431
4439
  })
4432
4440
  );
4433
4441
 
4434
- customElements.define(componentName$z, ComboBoxClass);
4442
+ customElements.define(componentName$A, ComboBoxClass);
4435
4443
 
4436
4444
  var CountryCodes = [
4437
4445
  // United States should be the first option
@@ -5674,7 +5682,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
5674
5682
  </div>
5675
5683
  `;
5676
5684
 
5677
- const componentName$y = getComponentName('phone-field-internal');
5685
+ const componentName$z = getComponentName('phone-field-internal');
5678
5686
 
5679
5687
  const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
5680
5688
  const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
@@ -5688,7 +5696,7 @@ const mapAttrs$1 = {
5688
5696
 
5689
5697
  const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs, labelTypeAttrs);
5690
5698
 
5691
- const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$y, baseSelector: 'div' });
5699
+ const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$z, baseSelector: 'div' });
5692
5700
 
5693
5701
  let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
5694
5702
  static get observedAttributes() {
@@ -5905,12 +5913,12 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
5905
5913
  }
5906
5914
  };
5907
5915
 
5908
- customElements.define(componentName$y, PhoneFieldInternal$1);
5916
+ customElements.define(componentName$z, PhoneFieldInternal$1);
5909
5917
 
5910
5918
  const textVars$1 = TextFieldClass.cssVarList;
5911
5919
  const comboVars = ComboBoxClass.cssVarList;
5912
5920
 
5913
- const componentName$x = getComponentName('phone-field');
5921
+ const componentName$y = getComponentName('phone-field');
5914
5922
 
5915
5923
  const customMixin$6 = (superclass) =>
5916
5924
  class PhoneFieldMixinClass extends superclass {
@@ -5924,15 +5932,15 @@ const customMixin$6 = (superclass) =>
5924
5932
  const template = document.createElement('template');
5925
5933
 
5926
5934
  template.innerHTML = `
5927
- <${componentName$y}
5935
+ <${componentName$z}
5928
5936
  tabindex="-1"
5929
5937
  slot="input"
5930
- ></${componentName$y}>
5938
+ ></${componentName$z}>
5931
5939
  `;
5932
5940
 
5933
5941
  this.baseElement.appendChild(template.content.cloneNode(true));
5934
5942
 
5935
- this.inputElement = this.shadowRoot.querySelector(componentName$y);
5943
+ this.inputElement = this.shadowRoot.querySelector(componentName$z);
5936
5944
 
5937
5945
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
5938
5946
  includeAttrs: [
@@ -6154,17 +6162,17 @@ const PhoneFieldClass = compose(
6154
6162
  ${resetInputLabelPosition('vaadin-text-field')}
6155
6163
  `,
6156
6164
  excludeAttrsSync: ['tabindex'],
6157
- componentName: componentName$x,
6165
+ componentName: componentName$y,
6158
6166
  })
6159
6167
  );
6160
6168
 
6161
- customElements.define(componentName$x, PhoneFieldClass);
6169
+ customElements.define(componentName$y, PhoneFieldClass);
6162
6170
 
6163
6171
  const getCountryByCodeId = (countryCode) => {
6164
6172
  return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
6165
6173
  };
6166
6174
 
6167
- const componentName$w = getComponentName('phone-field-internal-input-box');
6175
+ const componentName$x = getComponentName('phone-field-internal-input-box');
6168
6176
 
6169
6177
  const observedAttributes$2 = [
6170
6178
  'disabled',
@@ -6181,7 +6189,7 @@ const mapAttrs = {
6181
6189
  'phone-input-placeholder': 'placeholder',
6182
6190
  };
6183
6191
 
6184
- const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$w, baseSelector: 'div' });
6192
+ const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$x, baseSelector: 'div' });
6185
6193
 
6186
6194
  class PhoneFieldInternal extends BaseInputClass$5 {
6187
6195
  static get observedAttributes() {
@@ -6320,11 +6328,11 @@ class PhoneFieldInternal extends BaseInputClass$5 {
6320
6328
  }
6321
6329
  }
6322
6330
 
6323
- customElements.define(componentName$w, PhoneFieldInternal);
6331
+ customElements.define(componentName$x, PhoneFieldInternal);
6324
6332
 
6325
6333
  const textVars = TextFieldClass.cssVarList;
6326
6334
 
6327
- const componentName$v = getComponentName('phone-input-box-field');
6335
+ const componentName$w = getComponentName('phone-input-box-field');
6328
6336
 
6329
6337
  const customMixin$5 = (superclass) =>
6330
6338
  class PhoneInputBoxFieldMixinClass extends superclass {
@@ -6338,15 +6346,15 @@ const customMixin$5 = (superclass) =>
6338
6346
  const template = document.createElement('template');
6339
6347
 
6340
6348
  template.innerHTML = `
6341
- <${componentName$w}
6349
+ <${componentName$x}
6342
6350
  tabindex="-1"
6343
6351
  slot="input"
6344
- ></${componentName$w}>
6352
+ ></${componentName$x}>
6345
6353
  `;
6346
6354
 
6347
6355
  this.baseElement.appendChild(template.content.cloneNode(true));
6348
6356
 
6349
- this.inputElement = this.shadowRoot.querySelector(componentName$w);
6357
+ this.inputElement = this.shadowRoot.querySelector(componentName$x);
6350
6358
 
6351
6359
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
6352
6360
  includeAttrs: [
@@ -6523,26 +6531,26 @@ const PhoneFieldInputBoxClass = compose(
6523
6531
  ${inputFloatingLabelStyle()}
6524
6532
  `,
6525
6533
  excludeAttrsSync: ['tabindex'],
6526
- componentName: componentName$v,
6534
+ componentName: componentName$w,
6527
6535
  })
6528
6536
  );
6529
6537
 
6530
- customElements.define(componentName$v, PhoneFieldInputBoxClass);
6538
+ customElements.define(componentName$w, PhoneFieldInputBoxClass);
6531
6539
 
6532
- const componentName$u = getComponentName('new-password-internal');
6540
+ const componentName$v = getComponentName('new-password-internal');
6533
6541
 
6534
6542
  const interpolateString = (template, values) =>
6535
6543
  template.replace(/{{(\w+)+}}/g, (match, key) => values?.[key] || match);
6536
6544
 
6537
6545
  // eslint-disable-next-line max-classes-per-file
6538
6546
 
6539
- const componentName$t = getComponentName('policy-validation');
6547
+ const componentName$u = getComponentName('policy-validation');
6540
6548
 
6541
6549
  const overrideAttrs = ['data-password-policy-value-minlength'];
6542
6550
  const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
6543
6551
  const policyAttrs = ['label', 'value', ...dataAttrs];
6544
6552
 
6545
- class RawPolicyValidation extends createBaseClass({ componentName: componentName$t, baseSelector: ':host > div' }) {
6553
+ class RawPolicyValidation extends createBaseClass({ componentName: componentName$u, baseSelector: ':host > div' }) {
6546
6554
  #availablePolicies;
6547
6555
 
6548
6556
  #activePolicies = [];
@@ -6750,7 +6758,7 @@ const PolicyValidationClass = compose(
6750
6758
  componentNameValidationMixin
6751
6759
  )(RawPolicyValidation);
6752
6760
 
6753
- const componentName$s = getComponentName('new-password');
6761
+ const componentName$t = getComponentName('new-password');
6754
6762
 
6755
6763
  const policyPreviewVars = PolicyValidationClass.cssVarList;
6756
6764
 
@@ -6762,17 +6770,17 @@ const customMixin$4 = (superclass) =>
6762
6770
  const template = document.createElement('template');
6763
6771
 
6764
6772
  template.innerHTML = `
6765
- <${componentName$u}
6773
+ <${componentName$v}
6766
6774
  name="new-password"
6767
6775
  tabindex="-1"
6768
6776
  slot="input"
6769
6777
  >
6770
- </${componentName$u}>
6778
+ </${componentName$v}>
6771
6779
  `;
6772
6780
 
6773
6781
  this.baseElement.appendChild(template.content.cloneNode(true));
6774
6782
 
6775
- this.inputElement = this.shadowRoot.querySelector(componentName$u);
6783
+ this.inputElement = this.shadowRoot.querySelector(componentName$v);
6776
6784
 
6777
6785
  forwardAttrs(this, this.inputElement, {
6778
6786
  includeAttrs: [
@@ -6915,11 +6923,11 @@ const NewPasswordClass = compose(
6915
6923
  }
6916
6924
  `,
6917
6925
  excludeAttrsSync: ['tabindex'],
6918
- componentName: componentName$s,
6926
+ componentName: componentName$t,
6919
6927
  })
6920
6928
  );
6921
6929
 
6922
- customElements.define(componentName$t, PolicyValidationClass);
6930
+ customElements.define(componentName$u, PolicyValidationClass);
6923
6931
 
6924
6932
  const passwordAttrPrefixRegex = /^password-/;
6925
6933
  const confirmAttrPrefixRegex = /^confirm-/;
@@ -6950,7 +6958,7 @@ const inputRelatedAttrs = [].concat(
6950
6958
  policyPanelAttrs
6951
6959
  );
6952
6960
 
6953
- const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$u, baseSelector: 'div' });
6961
+ const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$v, baseSelector: 'div' });
6954
6962
 
6955
6963
  class NewPasswordInternal extends BaseInputClass$4 {
6956
6964
  static get observedAttributes() {
@@ -7148,16 +7156,16 @@ class NewPasswordInternal extends BaseInputClass$4 {
7148
7156
  }
7149
7157
  }
7150
7158
 
7151
- customElements.define(componentName$u, NewPasswordInternal);
7159
+ customElements.define(componentName$v, NewPasswordInternal);
7152
7160
 
7153
- customElements.define(componentName$s, NewPasswordClass);
7161
+ customElements.define(componentName$t, NewPasswordClass);
7154
7162
 
7155
- const componentName$r = getComponentName('recaptcha');
7163
+ const componentName$s = getComponentName('recaptcha');
7156
7164
 
7157
7165
  const observedAttributes$1 = ['enabled', 'site-key', 'action', 'enterprise'];
7158
7166
 
7159
7167
  const BaseClass = createBaseClass({
7160
- componentName: componentName$r,
7168
+ componentName: componentName$s,
7161
7169
  baseSelector: ':host > div',
7162
7170
  });
7163
7171
  class RawRecaptcha extends BaseClass {
@@ -7344,7 +7352,7 @@ class RawRecaptcha extends BaseClass {
7344
7352
 
7345
7353
  const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
7346
7354
 
7347
- customElements.define(componentName$r, RecaptchaClass);
7355
+ customElements.define(componentName$s, RecaptchaClass);
7348
7356
 
7349
7357
  const getFileBase64 = (fileObj) => {
7350
7358
  return new Promise((resolve) => {
@@ -7358,7 +7366,7 @@ const getFilename = (fileObj) => {
7358
7366
  return fileObj.name.replace(/^.*\\/, '');
7359
7367
  };
7360
7368
 
7361
- const componentName$q = getComponentName('upload-file');
7369
+ const componentName$r = getComponentName('upload-file');
7362
7370
 
7363
7371
  const observedAttributes = [
7364
7372
  'title',
@@ -7373,7 +7381,7 @@ const observedAttributes = [
7373
7381
  'icon',
7374
7382
  ];
7375
7383
 
7376
- const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$q, baseSelector: ':host > div' });
7384
+ const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$r, baseSelector: ':host > div' });
7377
7385
 
7378
7386
  class RawUploadFile extends BaseInputClass$3 {
7379
7387
  static get observedAttributes() {
@@ -7588,7 +7596,7 @@ const UploadFileClass = compose(
7588
7596
  componentNameValidationMixin
7589
7597
  )(RawUploadFile);
7590
7598
 
7591
- customElements.define(componentName$q, UploadFileClass);
7599
+ customElements.define(componentName$r, UploadFileClass);
7592
7600
 
7593
7601
  const createBaseButtonSelectionGroupInternalClass = (componentName) => {
7594
7602
  class BaseButtonSelectionGroupInternalClass extends createBaseInputClass({
@@ -7686,10 +7694,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
7686
7694
  return BaseButtonSelectionGroupInternalClass;
7687
7695
  };
7688
7696
 
7689
- const componentName$p = getComponentName('button-selection-group-internal');
7697
+ const componentName$q = getComponentName('button-selection-group-internal');
7690
7698
 
7691
7699
  class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
7692
- componentName$p
7700
+ componentName$q
7693
7701
  ) {
7694
7702
  getSelectedNode() {
7695
7703
  return this.items.find((item) => item.hasAttribute('selected'));
@@ -7921,7 +7929,7 @@ const buttonSelectionGroupStyles = `
7921
7929
  ${resetInputCursor('vaadin-text-field')}
7922
7930
  `;
7923
7931
 
7924
- const componentName$o = getComponentName('button-selection-group');
7932
+ const componentName$p = getComponentName('button-selection-group');
7925
7933
 
7926
7934
  const buttonSelectionGroupMixin = (superclass) =>
7927
7935
  class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -7930,19 +7938,19 @@ const buttonSelectionGroupMixin = (superclass) =>
7930
7938
  const template = document.createElement('template');
7931
7939
 
7932
7940
  template.innerHTML = `
7933
- <${componentName$p}
7941
+ <${componentName$q}
7934
7942
  name="button-selection-group"
7935
7943
  slot="input"
7936
7944
  tabindex="-1"
7937
7945
  part="internal-component"
7938
7946
  >
7939
7947
  <slot></slot>
7940
- </${componentName$p}>
7948
+ </${componentName$q}>
7941
7949
  `;
7942
7950
 
7943
7951
  this.baseElement.appendChild(template.content.cloneNode(true));
7944
7952
 
7945
- this.inputElement = this.shadowRoot.querySelector(componentName$p);
7953
+ this.inputElement = this.shadowRoot.querySelector(componentName$q);
7946
7954
 
7947
7955
  forwardAttrs(this, this.inputElement, {
7948
7956
  includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -7967,16 +7975,16 @@ const ButtonSelectionGroupClass = compose(
7967
7975
  wrappedEleName: 'vaadin-text-field',
7968
7976
  style: () => buttonSelectionGroupStyles,
7969
7977
  excludeAttrsSync: ['tabindex'],
7970
- componentName: componentName$o,
7978
+ componentName: componentName$p,
7971
7979
  })
7972
7980
  );
7973
7981
 
7974
- customElements.define(componentName$p, ButtonSelectionGroupInternalClass);
7982
+ customElements.define(componentName$q, ButtonSelectionGroupInternalClass);
7975
7983
 
7976
- const componentName$n = getComponentName('button-selection-group-item');
7984
+ const componentName$o = getComponentName('button-selection-group-item');
7977
7985
 
7978
7986
  class RawSelectItem extends createBaseClass({
7979
- componentName: componentName$n,
7987
+ componentName: componentName$o,
7980
7988
  baseSelector: ':host > descope-button',
7981
7989
  }) {
7982
7990
  get size() {
@@ -8083,14 +8091,14 @@ const ButtonSelectionGroupItemClass = compose(
8083
8091
  componentNameValidationMixin
8084
8092
  )(RawSelectItem);
8085
8093
 
8086
- customElements.define(componentName$n, ButtonSelectionGroupItemClass);
8094
+ customElements.define(componentName$o, ButtonSelectionGroupItemClass);
8087
8095
 
8088
- customElements.define(componentName$o, ButtonSelectionGroupClass);
8096
+ customElements.define(componentName$p, ButtonSelectionGroupClass);
8089
8097
 
8090
- const componentName$m = getComponentName('button-multi-selection-group-internal');
8098
+ const componentName$n = getComponentName('button-multi-selection-group-internal');
8091
8099
 
8092
8100
  class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
8093
- componentName$m
8101
+ componentName$n
8094
8102
  ) {
8095
8103
  #getSelectedNodes() {
8096
8104
  return this.items.filter((item) => item.hasAttribute('selected'));
@@ -8193,7 +8201,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
8193
8201
  }
8194
8202
  }
8195
8203
 
8196
- const componentName$l = getComponentName('button-multi-selection-group');
8204
+ const componentName$m = getComponentName('button-multi-selection-group');
8197
8205
 
8198
8206
  const buttonMultiSelectionGroupMixin = (superclass) =>
8199
8207
  class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -8202,19 +8210,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
8202
8210
  const template = document.createElement('template');
8203
8211
 
8204
8212
  template.innerHTML = `
8205
- <${componentName$m}
8213
+ <${componentName$n}
8206
8214
  name="button-selection-group"
8207
8215
  slot="input"
8208
8216
  tabindex="-1"
8209
8217
  part="internal-component"
8210
8218
  >
8211
8219
  <slot></slot>
8212
- </${componentName$m}>
8220
+ </${componentName$n}>
8213
8221
  `;
8214
8222
 
8215
8223
  this.baseElement.appendChild(template.content.cloneNode(true));
8216
8224
 
8217
- this.inputElement = this.shadowRoot.querySelector(componentName$m);
8225
+ this.inputElement = this.shadowRoot.querySelector(componentName$n);
8218
8226
 
8219
8227
  forwardAttrs(this, this.inputElement, {
8220
8228
  includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
@@ -8239,13 +8247,13 @@ const ButtonMultiSelectionGroupClass = compose(
8239
8247
  wrappedEleName: 'vaadin-text-field',
8240
8248
  style: () => buttonSelectionGroupStyles,
8241
8249
  excludeAttrsSync: ['tabindex'],
8242
- componentName: componentName$l,
8250
+ componentName: componentName$m,
8243
8251
  })
8244
8252
  );
8245
8253
 
8246
- customElements.define(componentName$m, ButtonMultiSelectionGroupInternalClass);
8254
+ customElements.define(componentName$n, ButtonMultiSelectionGroupInternalClass);
8247
8255
 
8248
- customElements.define(componentName$l, ButtonMultiSelectionGroupClass);
8256
+ customElements.define(componentName$m, ButtonMultiSelectionGroupClass);
8249
8257
 
8250
8258
  /* eslint-disable no-param-reassign */
8251
8259
 
@@ -8273,9 +8281,9 @@ class GridTextColumnClass extends GridSortColumn {
8273
8281
  }
8274
8282
  }
8275
8283
 
8276
- const componentName$k = getComponentName('grid-text-column');
8284
+ const componentName$l = getComponentName('grid-text-column');
8277
8285
 
8278
- customElements.define(componentName$k, GridTextColumnClass);
8286
+ customElements.define(componentName$l, GridTextColumnClass);
8279
8287
 
8280
8288
  /* eslint-disable no-param-reassign */
8281
8289
 
@@ -8310,9 +8318,9 @@ class GridCustomColumnClass extends GridTextColumnClass {
8310
8318
 
8311
8319
  /* eslint-disable no-param-reassign */
8312
8320
 
8313
- const componentName$j = getComponentName('grid-custom-column');
8321
+ const componentName$k = getComponentName('grid-custom-column');
8314
8322
 
8315
- customElements.define(componentName$j, GridCustomColumnClass);
8323
+ customElements.define(componentName$k, GridCustomColumnClass);
8316
8324
 
8317
8325
  const createCheckboxEle = () => {
8318
8326
  const checkbox = document.createElement('descope-checkbox');
@@ -8371,212 +8379,612 @@ class GridSelectionColumnClass extends GridSelectionColumn {
8371
8379
  }
8372
8380
  }
8373
8381
 
8374
- const componentName$i = getComponentName('grid-selection-column');
8382
+ const componentName$j = getComponentName('grid-selection-column');
8375
8383
 
8376
- customElements.define(componentName$i, GridSelectionColumnClass);
8384
+ customElements.define(componentName$j, GridSelectionColumnClass);
8377
8385
 
8378
- const isValidDataType = (data) => {
8379
- const isValid = Array.isArray(data);
8380
- if (!isValid) {
8381
- // eslint-disable-next-line no-console
8382
- console.error('data must be an array, received:', data);
8383
- }
8386
+ /* eslint-disable no-param-reassign */
8384
8387
 
8385
- return isValid;
8386
- };
8388
+ class GridItemDetailsColumnClass extends GridSortColumn {
8389
+ get sortable() {
8390
+ return this.getAttribute('sortable') === 'true';
8391
+ }
8387
8392
 
8388
- const componentName$h = getComponentName('grid');
8393
+ // eslint-disable-next-line class-methods-use-this
8394
+ _defaultRenderer(cell, _col, model) {
8395
+ const grid = _col._gridValue;
8396
+ const itemIdx = grid.detailsOpenedItems?.indexOf(model.item) ?? -1;
8397
+ const isOpened = itemIdx !== -1;
8389
8398
 
8390
- const GridMixin = (superclass) =>
8391
- class GridMixinClass extends superclass {
8392
- #columns;
8399
+ const toggleIcon = document.createElement('vaadin-icon');
8400
+ toggleIcon.icon = isOpened ? 'vaadin:angle-up' : 'vaadin:angle-down';
8401
+ toggleIcon.classList.add('toggle-details-button', isOpened ? 'opened' : 'closed');
8402
+ cell.innerHTML = '';
8403
+ cell.append(toggleIcon);
8393
8404
 
8394
- init() {
8395
- super.init?.();
8396
- this.handleColumns();
8397
- this.forwardSelectedItemsChange();
8405
+ toggleIcon.onclick = () => {
8406
+ grid.detailsOpenedItems = isOpened
8407
+ ? grid.detailsOpenedItems.toSpliced(itemIdx, 1)
8408
+ : [...grid.detailsOpenedItems, model.item];
8409
+ };
8410
+ }
8398
8411
 
8399
- // disable the grid sort
8400
- this.baseElement._mapSorters = () => {};
8401
- }
8412
+ _defaultHeaderRenderer(root, _column) {
8413
+ if (this.sortable) {
8414
+ super._defaultHeaderRenderer(root, _column);
8402
8415
 
8403
- forwardSelectedItemsChange() {
8404
- this.baseElement.addEventListener('selected-items-changed', (e) => {
8405
- this.dispatchEvent(
8406
- new CustomEvent('selected-items-changed', {
8407
- bubbles: true,
8408
- composed: true,
8409
- detail: e.detail,
8410
- })
8411
- );
8412
- });
8416
+ return;
8413
8417
  }
8414
8418
 
8415
- attributeChangedCallback(attrName, oldValue, newValue) {
8416
- super.attributeChangedCallback?.(attrName, oldValue, newValue);
8419
+ this.__setTextContent(root, this.__getHeader(this.header, this.path));
8420
+ }
8421
+ }
8417
8422
 
8418
- if (attrName === 'columns') {
8419
- this.setColumnsDataFromAttr();
8420
- }
8421
- }
8423
+ const componentName$i = getComponentName('grid-item-details-column');
8422
8424
 
8423
- handleColumns() {
8424
- if (this.columnsAttr) {
8425
- this.setColumnsDataFromAttr();
8426
- } else if (this.children.length) {
8427
- this.setColumnsFromChildren();
8428
- }
8429
- }
8425
+ customElements.define(componentName$i, GridItemDetailsColumnClass);
8430
8426
 
8431
- setColumnsFromChildren() {
8432
- this.#columns = Array.from(this.children).map((child) => {
8433
- return {
8434
- path: child.getAttribute('path'),
8435
- header: child.getAttribute('header'),
8436
- type: child.localName.match('^descope-grid-(\\w+)-column$')?.[1] || 'text',
8427
+ const decode = (input) => {
8428
+ const txt = document.createElement('textarea');
8429
+ txt.innerHTML = input;
8430
+ return txt.value;
8431
+ };
8437
8432
 
8438
- attrs: ['frozen', 'resizable', 'auto-width', 'status'].reduce((acc, attrName) => {
8439
- const attrVal = child.getAttribute(attrName);
8433
+ const tpl = (input, inline) => {
8434
+ return inline ? input : `<pre>${input}</pre>`;
8435
+ };
8440
8436
 
8441
- if (attrVal) {
8442
- acc[attrName] = attrVal;
8443
- }
8437
+ const componentName$h = getComponentName('code-snippet');
8444
8438
 
8445
- return acc;
8446
- }, {}),
8447
- };
8448
- });
8449
- }
8439
+ let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > code' }) {
8440
+ static get observedAttributes() {
8441
+ return ['lang', 'inline'];
8442
+ }
8450
8443
 
8451
- get columnsAttr() {
8452
- return this.getAttribute('columns');
8453
- }
8444
+ constructor() {
8445
+ super();
8454
8446
 
8455
- setColumnsDataFromAttr() {
8456
- try {
8457
- const data = JSON.parse(this.columnsAttr);
8458
- if (isValidDataType(data)) {
8459
- this.columns = data;
8460
- }
8461
- } catch (e) {
8462
- // eslint-disable-next-line no-console
8463
- console.error('could not parse data string from attribute "columns" -', e.message);
8447
+ this.attachShadow({ mode: 'open' }).innerHTML = `
8448
+ <style>
8449
+ :host {
8450
+ display: inline-block;
8451
+ width: 100%;
8464
8452
  }
8465
- }
8466
-
8467
- // eslint-disable-next-line class-methods-use-this
8468
- #renderColumn = ({ path, header, type, attrs }) => {
8469
- const colAttrs = Object.entries(attrs)
8470
- .map(([key, value]) => `${key}="${value}"`)
8471
- .join(' ');
8472
-
8473
- const tagName = `descope-grid-${type}-column`;
8474
-
8475
- return `<${tagName} header="${header}" path="${path}" ${colAttrs}></${tagName}>`;
8476
- };
8477
-
8478
- get renderColumn() {
8479
- return this.#renderColumn;
8480
- }
8481
-
8482
- set renderColumn(renderFn) {
8483
- this.#renderColumn = renderFn;
8484
- this.renderColumns();
8485
- }
8486
-
8487
- getColumnsTemplate() {
8488
- return this.#columns?.reduce?.(
8489
- (acc, item) => acc + (this.renderColumn?.(item || {}) || ''),
8490
- ''
8491
- );
8492
- }
8453
+ code {
8454
+ display: block;
8455
+ width: 100%;
8456
+ min-height: 1em;
8457
+ overflow-x: scroll;
8458
+ overflow-y: scroll;
8459
+ }
8460
+ pre {
8461
+ margin: 0;
8462
+ }
8463
+ </style>
8464
+ <code class="hljs"></code>
8465
+ `;
8466
+ }
8493
8467
 
8494
- renderColumns() {
8495
- const template = this.getColumnsTemplate();
8496
- if (template) this.innerHTML = template;
8497
- }
8468
+ init() {
8469
+ super.init?.();
8498
8470
 
8499
- get grid() {
8500
- return this.shadowRoot.querySelector('vaadin-grid');
8501
- }
8471
+ this.lang = this.getAttribute('lang');
8472
+ this.isInline = this.getAttribute('inline') === 'true';
8502
8473
 
8503
- get data() {
8504
- return this.grid.items;
8505
- }
8474
+ observeChildren(this, this.#renderSnippet.bind(this));
8475
+ }
8506
8476
 
8507
- set data(data) {
8508
- if (isValidDataType(data) && this.grid.items !== data) {
8509
- this.grid.items = data;
8477
+ get contentNode() {
8478
+ return this.shadowRoot.querySelector(this.baseSelector);
8479
+ }
8510
8480
 
8511
- if (this.grid.selectedItems) {
8512
- const itemsIds = new Set(
8513
- this.grid.items.map((item) => item[this.uniqueColumnId] ?? item)
8514
- );
8481
+ attributeChangedCallback(attrName, oldValue, newValue) {
8482
+ super.attributeChangedCallback?.(attrName, oldValue, newValue);
8515
8483
 
8516
- const newSelectedItems = this.grid.selectedItems.filter((selectedItem) =>
8517
- itemsIds.has(selectedItem[this.uniqueColumnId] ?? selectedItem)
8518
- );
8484
+ if (oldValue !== newValue) {
8485
+ if (attrName === 'inline') {
8486
+ this.isInline = newValue;
8487
+ }
8519
8488
 
8520
- // we want to update the selected items only if there is a reason,
8521
- // to prevent redundant notifications
8522
- if (this.grid.selectedItems.length !== newSelectedItems.length) {
8523
- this.grid.selectedItems = newSelectedItems;
8524
- }
8525
- }
8489
+ if (attrName === 'lang') {
8490
+ this.lang = newValue;
8526
8491
  }
8527
- }
8528
8492
 
8529
- get columns() {
8530
- return this.#columns;
8493
+ this.#renderSnippet();
8531
8494
  }
8495
+ }
8532
8496
 
8533
- set columns(data) {
8534
- this.#columns = data;
8535
- this.renderColumns();
8536
- }
8497
+ #renderSnippet() {
8498
+ const sanitized = decode(this.textContent);
8499
+ const language = this.lang;
8537
8500
 
8538
- get paths() {
8539
- return this.columns.map((col) => col.path);
8501
+ if (!language) {
8502
+ this.contentNode.textContent = sanitized;
8503
+ return;
8540
8504
  }
8541
8505
 
8542
- get uniqueColumnId() {
8543
- return this.getAttribute('unique-column-id');
8544
- }
8545
- };
8506
+ const { value: highlighted } = hljs.highlight(sanitized, { language });
8546
8507
 
8547
- const {
8548
- host: host$6,
8549
- headerRow,
8550
- headerRowCell,
8551
- contentRow,
8552
- firstRow,
8553
- sortIndicators,
8554
- activeSortIndicator,
8555
- selectedRow,
8556
- rowSeparator,
8557
- resizeHandle,
8558
- } = {
8559
- host: { selector: () => 'vaadin-grid' },
8560
- headerRow: { selector: () => '::part(header-cell)' },
8561
- headerRowCell: { selector: () => 'vaadin-grid::part(header-cell)' },
8562
- contentRow: { selector: () => '::part(cell)' },
8563
- firstRow: { selector: () => '::part(first-header-row-cell)' },
8564
- selectedRow: { selector: () => '::part(selected-row-cell)' },
8565
- sortIndicators: { selector: () => 'vaadin-grid-sorter::part(indicators)' },
8566
- activeSortIndicator: { selector: () => 'vaadin-grid-sorter[direction]' },
8567
- rowSeparator: { selector: () => 'vaadin-grid::part(body-cell)' },
8568
- resizeHandle: { selector: () => '::part(resize-handle)' },
8508
+ this.contentNode.innerHTML = tpl(highlighted, this.isInline);
8509
+ }
8569
8510
  };
8570
8511
 
8571
- const GridClass = compose(
8572
- createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),
8573
- createStyleMixin({
8574
- mappings: {
8575
- hostWidth: { selector: () => ':host', property: 'width' },
8576
- hostHeight: { selector: () => ':host', property: 'height' },
8577
- hostMinHeight: { selector: () => ':host', property: 'min-height' },
8578
- fontFamily: [{ ...headerRow }, { ...contentRow }],
8579
- fontSize: [{ ...headerRow }, { ...contentRow }],
8512
+ const {
8513
+ root,
8514
+ docTag,
8515
+ keyword,
8516
+ metaKeyword,
8517
+ templateTag,
8518
+ templateVariable,
8519
+ type,
8520
+ variableLanguage,
8521
+ title,
8522
+ titleClass,
8523
+ titleClassInherited,
8524
+ titleFunction,
8525
+ attr,
8526
+ attribute,
8527
+ literal,
8528
+ meta,
8529
+ number,
8530
+ operator,
8531
+ variable,
8532
+ selectorAttr,
8533
+ selectorClass,
8534
+ selectorId,
8535
+ regexp,
8536
+ string,
8537
+ metaString,
8538
+ builtIn,
8539
+ symbol,
8540
+ comment,
8541
+ code,
8542
+ formula,
8543
+ name,
8544
+ quote,
8545
+ selectorTag,
8546
+ selectorPseudo,
8547
+ subst,
8548
+ section,
8549
+ bullet,
8550
+ emphasis,
8551
+ strong,
8552
+ addition,
8553
+ deletion,
8554
+ charEscape,
8555
+ link: link$2,
8556
+ params,
8557
+ property,
8558
+ punctuation,
8559
+ tag,
8560
+ } = {
8561
+ root: { selector: () => '.hljs' },
8562
+ docTag: { selector: () => '.hljs-doctag' },
8563
+ keyword: { selector: () => '.hljs-keyword' },
8564
+ metaKeyword: { selector: () => '.hljs-meta .hljs-keyword' },
8565
+ templateTag: { selector: () => '.hljs-template-tag' },
8566
+ templateVariable: { selector: () => '.hljs-template-variable' },
8567
+ type: { selector: () => '.hljs-type' },
8568
+ variableLanguage: { selector: () => '.hljs-variable.language' },
8569
+ title: { selector: () => '.hljs-title' },
8570
+ titleClass: { selector: () => '.hljs-title.class_' },
8571
+ titleClassInherited: { selector: () => '.hljs-title.class_.inherited__' },
8572
+ titleFunction: { selector: () => '.hljs-title.function_' },
8573
+ attr: { selector: () => '.hljs-attr' },
8574
+ attribute: { selector: () => '.hljs-attribute' },
8575
+ literal: { selector: () => '.hljs-literal' },
8576
+ meta: { selector: () => '.hljs-meta' },
8577
+ number: { selector: () => '.hljs-number' },
8578
+ operator: { selector: () => '.hljs-operator' },
8579
+ variable: { selector: () => '.hljs-variable' },
8580
+ selectorAttr: { selector: () => '.hljs-selector-attr' },
8581
+ selectorClass: { selector: () => '.hljs-selector-class' },
8582
+ selectorId: { selector: () => '.hljs-selector-id' },
8583
+ regexp: { selector: () => '.hljs-regexp' },
8584
+ string: { selector: () => '.hljs-string' },
8585
+ metaString: { selector: () => '.hljs-meta .hljs-string' },
8586
+ builtIn: { selector: () => '.hljs-built_in' },
8587
+ symbol: { selector: () => '.hljs-symbol' },
8588
+ comment: { selector: () => '.hljs-comment' },
8589
+ code: { selector: () => '.hljs-code' },
8590
+ formula: { selector: () => '.hljs-formula' },
8591
+ name: { selector: () => '.hljs-name' },
8592
+ quote: { selector: () => '.hljs-quote' },
8593
+ selectorTag: { selector: () => '.hljs-selector-tag' },
8594
+ selectorPseudo: { selector: () => '.hljs-selector-pseudo' },
8595
+ subst: { selector: () => '.hljs-subst' },
8596
+ section: { selector: () => '.hljs-section' },
8597
+ bullet: { selector: () => '.hljs-bullet' },
8598
+ emphasis: { selector: () => '.hljs-emphasis' },
8599
+ strong: { selector: () => '.hljs-strong' },
8600
+ addition: { selector: () => '.hljs-addition' },
8601
+ deletion: { selector: () => '.hljs-deletion' },
8602
+ charEscape: { selector: () => '.hljs-char.escape' },
8603
+ link: { selector: () => '.hljs-link' },
8604
+ params: { selector: () => '.hljs-params' },
8605
+ property: { selector: () => '.hljs-property' },
8606
+ punctuation: { selector: () => '.hljs-punctuation' },
8607
+ tag: { selector: () => '.hljs-tag' },
8608
+ };
8609
+
8610
+ const CodeSnippetClass = compose(
8611
+ createStyleMixin({
8612
+ mappings: {
8613
+ rootBgColor: { ...root, property: 'background-color' },
8614
+ rootTextColor: { ...root, property: 'color' },
8615
+ docTagTextColor: { ...docTag, property: 'color' },
8616
+ keywordTextColor: { ...keyword, property: 'color' },
8617
+ metaKeywordTextColor: { ...metaKeyword, property: 'color' },
8618
+ templateTagTextColor: { ...templateTag, property: 'color' },
8619
+ templateVariableTextColor: { ...templateVariable, property: 'color' },
8620
+ typeTextColor: { ...type, property: 'color' },
8621
+ variableLanguageTextColor: { ...variableLanguage, property: 'color' },
8622
+ titleTextColor: { ...title, property: 'color' },
8623
+ titleClassTextColor: { ...titleClass, property: 'color' },
8624
+ titleClassInheritedTextColor: { ...titleClassInherited, property: 'color' },
8625
+ titleFunctionTextColor: { ...titleFunction, property: 'color' },
8626
+ attrTextColor: { ...attr, property: 'color' },
8627
+ attributeTextColor: { ...attribute, property: 'color' },
8628
+ literalTextColor: { ...literal, property: 'color' },
8629
+ metaTextColor: { ...meta, property: 'color' },
8630
+ numberTextColor: { ...number, property: 'color' },
8631
+ operatorTextColor: { ...operator, property: 'color' },
8632
+ variableTextColor: { ...variable, property: 'color' },
8633
+ selectorAttrTextColor: { ...selectorAttr, property: 'color' },
8634
+ selectorClassTextColor: { ...selectorClass, property: 'color' },
8635
+ selectorIdTextColor: { ...selectorId, property: 'color' },
8636
+ regexpTextColor: { ...regexp, property: 'color' },
8637
+ stringTextColor: { ...string, property: 'color' },
8638
+ metaStringTextColor: { ...metaString, property: 'color' },
8639
+ builtInTextColor: { ...builtIn, property: 'color' },
8640
+ symbolTextColor: { ...symbol, property: 'color' },
8641
+ commentTextColor: { ...comment, property: 'color' },
8642
+ codeTextColor: { ...code, property: 'color' },
8643
+ formulaTextColor: { ...formula, property: 'color' },
8644
+ nameTextColor: { ...name, property: 'color' },
8645
+ quoteTextColor: { ...quote, property: 'color' },
8646
+ selectorTagTextColor: { ...selectorTag, property: 'color' },
8647
+ selectorPseudoTextColor: { ...selectorPseudo, property: 'color' },
8648
+ substTextColor: { ...subst, property: 'color' },
8649
+ sectionTextColor: { ...section, property: 'color' },
8650
+ bulletTextColor: { ...bullet, property: 'color' },
8651
+ emphasisTextColor: { ...emphasis, property: 'color' },
8652
+ strongTextColor: { ...strong, property: 'color' },
8653
+ additionTextColor: { ...addition, property: 'color' },
8654
+ additionBgColor: { ...addition, property: 'background-color' },
8655
+ deletionTextColor: { ...deletion, property: 'color' },
8656
+ deletionBgColor: { ...deletion, property: 'background-color' },
8657
+ charEscapeTextColor: { ...charEscape, property: 'color' },
8658
+ linkTextColor: { ...link$2, property: 'color' },
8659
+ paramsTextColor: { ...params, property: 'color' },
8660
+ propertyTextColor: { ...property, property: 'color' },
8661
+ punctuationTextColor: { ...punctuation, property: 'color' },
8662
+ tagTextColor: { ...tag, property: 'color' },
8663
+ },
8664
+ }),
8665
+ draggableMixin,
8666
+ componentNameValidationMixin
8667
+ )(CodeSnippet$1);
8668
+
8669
+ customElements.define(componentName$h, CodeSnippetClass);
8670
+
8671
+ const isValidDataType = (data) => {
8672
+ const isValid = Array.isArray(data);
8673
+ if (!isValid) {
8674
+ // eslint-disable-next-line no-console
8675
+ console.error('data must be an array, received:', data);
8676
+ }
8677
+
8678
+ return isValid;
8679
+ };
8680
+
8681
+ const isPlainObject = (value) => value?.constructor === Object;
8682
+
8683
+ const getValueType = (value) => {
8684
+ if (isPlainObject(value)) return 'object';
8685
+ if (Array.isArray(value)) return 'array';
8686
+
8687
+ return 'text';
8688
+ };
8689
+
8690
+ const renderCodeSnippet = (value) =>
8691
+ `<descope-code-snippet lang="json" class="row-details__value json">${JSON.stringify(
8692
+ value,
8693
+ null,
8694
+ 2
8695
+ )}</descope-code-snippet>`;
8696
+
8697
+ const renderText = (text) =>
8698
+ `<div class="row-details__value text" title="${text}">${text}</div>`;
8699
+
8700
+ const defaultRowDetailsValueRenderer = (value) => {
8701
+ const valueType = getValueType(value);
8702
+
8703
+ if (valueType === 'object') {
8704
+ return renderCodeSnippet(value);
8705
+ }
8706
+
8707
+ if (valueType === 'array') {
8708
+ if (value.some((v) => getValueType(v) === 'object')) {
8709
+ return renderCodeSnippet(value);
8710
+ }
8711
+ return renderText(value.join(',\n'));
8712
+ }
8713
+
8714
+ return renderText(value);
8715
+ };
8716
+
8717
+ const defaultRowDetailsRenderer = (item, itemLabelsMapping) => {
8718
+ return `
8719
+ <div class="row-details">
8720
+ ${Object.entries(item)
8721
+ .map(
8722
+ ([key, value]) =>
8723
+ `<div class="row-details__item" >
8724
+ <div class="row-details__label">${itemLabelsMapping[key] || toTitle(key)}</div>
8725
+ ${defaultRowDetailsValueRenderer(value)}
8726
+ </div>`
8727
+ )
8728
+ .join('\n')}
8729
+ </div>
8730
+ `;
8731
+ };
8732
+
8733
+ const componentName$g = getComponentName('grid');
8734
+
8735
+ const GridMixin = (superclass) =>
8736
+ class GridMixinClass extends superclass {
8737
+ #columns;
8738
+
8739
+ init() {
8740
+ super.init?.();
8741
+ this.handleColumns();
8742
+ this.forwardSelectedItemsChange();
8743
+
8744
+ // disable the grid sort
8745
+ this.baseElement._mapSorters = () => {};
8746
+
8747
+ this.baseElement.rowDetailsRenderer = this.#rowDetailsRenderer.bind(this);
8748
+ }
8749
+
8750
+ // this renders the details panel content
8751
+ // in order to open it, the descope-grid-item-details-column should be used
8752
+ #rowDetailsRenderer = async (cell, _col, model) => {
8753
+ // prevent details panel from being scrolled into view when clicked
8754
+ cell.addEventListener('mousedown', (e) => e.stopImmediatePropagation(), true);
8755
+
8756
+ const template = this.getRowDetailsTemplate(model.item);
8757
+
8758
+ // eslint-disable-next-line no-param-reassign
8759
+ cell.innerHTML = '';
8760
+ cell.append(template.content.cloneNode(true));
8761
+ };
8762
+
8763
+ getRowDetailsTemplate(item) {
8764
+ const itemLabelsMapping = this.#columns.reduce(
8765
+ (acc, { path, header }) => (!path || !header ? acc : { ...acc, [path]: header }),
8766
+ {}
8767
+ );
8768
+ const template =
8769
+ this.rowDetailsRenderer?.(item, itemLabelsMapping) ??
8770
+ defaultRowDetailsRenderer(item, itemLabelsMapping);
8771
+
8772
+ switch (true) {
8773
+ case template instanceof HTMLTemplateElement:
8774
+ return template;
8775
+ case typeof template === 'string':
8776
+ return Object.assign(document.createElement('template'), { innerHTML: template });
8777
+ default:
8778
+ throw new Error('rowDetailsRenderer should return a string or a template');
8779
+ }
8780
+ }
8781
+
8782
+ forwardSelectedItemsChange() {
8783
+ this.baseElement.addEventListener('selected-items-changed', (e) => {
8784
+ this.dispatchEvent(
8785
+ new CustomEvent('selected-items-changed', {
8786
+ bubbles: true,
8787
+ composed: true,
8788
+ detail: e.detail,
8789
+ })
8790
+ );
8791
+ });
8792
+ }
8793
+
8794
+ attributeChangedCallback(attrName, oldValue, newValue) {
8795
+ super.attributeChangedCallback?.(attrName, oldValue, newValue);
8796
+
8797
+ if (attrName === 'columns') {
8798
+ this.setColumnsDataFromAttr();
8799
+ }
8800
+ }
8801
+
8802
+ handleColumns() {
8803
+ if (this.columnsAttr) {
8804
+ this.setColumnsDataFromAttr();
8805
+ } else if (this.children.length) {
8806
+ this.setColumnsFromChildren();
8807
+ }
8808
+ }
8809
+
8810
+ setColumnsFromChildren() {
8811
+ this.#columns = Array.from(this.children).map((child) => {
8812
+ return {
8813
+ path: child.getAttribute('path'),
8814
+ header: child.getAttribute('header'),
8815
+ type: child.localName.match('^descope-grid-(\\w+)-column$')?.[1] || 'text',
8816
+
8817
+ attrs: ['frozen', 'resizable', 'auto-width', 'status'].reduce((acc, attrName) => {
8818
+ const attrVal = child.getAttribute(attrName);
8819
+
8820
+ if (attrVal) {
8821
+ acc[attrName] = attrVal;
8822
+ }
8823
+
8824
+ return acc;
8825
+ }, {}),
8826
+ };
8827
+ });
8828
+ }
8829
+
8830
+ get columnsAttr() {
8831
+ return this.getAttribute('columns');
8832
+ }
8833
+
8834
+ setColumnsDataFromAttr() {
8835
+ try {
8836
+ const data = JSON.parse(this.columnsAttr);
8837
+ if (isValidDataType(data)) {
8838
+ this.columns = data;
8839
+ }
8840
+ } catch (e) {
8841
+ // eslint-disable-next-line no-console
8842
+ console.error('could not parse data string from attribute "columns" -', e.message);
8843
+ }
8844
+ }
8845
+
8846
+ // eslint-disable-next-line class-methods-use-this
8847
+ #renderColumn = ({ path, header, type, attrs }) => {
8848
+ const colAttrs = Object.entries(attrs)
8849
+ .map(([key, value]) => `${key}="${value}"`)
8850
+ .join(' ');
8851
+
8852
+ const tagName = `descope-grid-${type}-column`;
8853
+
8854
+ return `<${tagName} header="${header}" path="${path}" ${colAttrs}></${tagName}>`;
8855
+ };
8856
+
8857
+ get renderColumn() {
8858
+ return this.#renderColumn;
8859
+ }
8860
+
8861
+ set renderColumn(renderFn) {
8862
+ this.#renderColumn = renderFn;
8863
+ this.renderColumns();
8864
+ }
8865
+
8866
+ getColumnsTemplate() {
8867
+ return this.#columns?.reduce?.(
8868
+ (acc, item) => acc + (this.renderColumn?.(item || {}) || ''),
8869
+ ''
8870
+ );
8871
+ }
8872
+
8873
+ // there is an issue in vaadin-grid, when rowDetailsRenderer is set, it renders an empty details panel
8874
+ reassignRowDetailsRenderer() {
8875
+ this.baseElement.rowDetailsRenderer = null;
8876
+ setTimeout(() => {
8877
+ this.baseElement.rowDetailsRenderer = this.#rowDetailsRenderer.bind(this);
8878
+ }, 0);
8879
+ }
8880
+
8881
+ renderColumns() {
8882
+ const template = this.getColumnsTemplate();
8883
+ if (template) {
8884
+ this.reassignRowDetailsRenderer();
8885
+ this.innerHTML = template;
8886
+ }
8887
+ }
8888
+
8889
+ get grid() {
8890
+ return this.shadowRoot.querySelector('vaadin-grid');
8891
+ }
8892
+
8893
+ get data() {
8894
+ return this.grid.items;
8895
+ }
8896
+
8897
+ set data(data) {
8898
+ if (isValidDataType(data) && this.grid.items !== data) {
8899
+ this.grid.items = data;
8900
+
8901
+ if (this.grid.selectedItems) {
8902
+ const itemsIds = new Set(
8903
+ this.grid.items.map((item) => item[this.uniqueColumnId] ?? item)
8904
+ );
8905
+
8906
+ const newSelectedItems = this.grid.selectedItems.filter((selectedItem) =>
8907
+ itemsIds.has(selectedItem[this.uniqueColumnId] ?? selectedItem)
8908
+ );
8909
+
8910
+ // we want to update the selected items only if there is a reason,
8911
+ // to prevent redundant notifications
8912
+ if (this.grid.selectedItems.length !== newSelectedItems.length) {
8913
+ this.grid.selectedItems = newSelectedItems;
8914
+ }
8915
+ }
8916
+ }
8917
+ }
8918
+
8919
+ get columns() {
8920
+ return this.#columns;
8921
+ }
8922
+
8923
+ set columns(data) {
8924
+ this.#columns = data;
8925
+ this.renderColumns();
8926
+ }
8927
+
8928
+ get paths() {
8929
+ return this.columns.map((col) => col.path);
8930
+ }
8931
+
8932
+ get uniqueColumnId() {
8933
+ return this.getAttribute('unique-column-id');
8934
+ }
8935
+ };
8936
+
8937
+ const {
8938
+ host: host$6,
8939
+ headerRow,
8940
+ headerRowCell,
8941
+ contentRow,
8942
+ firstRow,
8943
+ sortIndicators,
8944
+ activeSortIndicator,
8945
+ selectedRow,
8946
+ rowSeparator,
8947
+ resizeHandle,
8948
+ toggleDetailsPanelButton,
8949
+ toggleDetailsPanelButtonOpened,
8950
+ toggleDetailsPanelButtonClosed,
8951
+ detailsPanel,
8952
+ detailsPanelLabels,
8953
+ selectedRowCell,
8954
+ detailsPanelContent,
8955
+ } = {
8956
+ host: { selector: () => 'vaadin-grid' },
8957
+ headerRow: { selector: () => '::part(header-cell)' },
8958
+ headerRowCell: { selector: () => 'vaadin-grid::part(header-cell)' },
8959
+ contentRow: { selector: () => '::part(cell)' },
8960
+ firstRow: { selector: () => '::part(first-header-row-cell)' },
8961
+ selectedRow: { selector: () => '::part(selected-row)' },
8962
+ selectedRowCell: { selector: () => '::part(selected-row-cell)' },
8963
+ sortIndicators: { selector: () => 'vaadin-grid-sorter::part(indicators)' },
8964
+ activeSortIndicator: { selector: () => 'vaadin-grid-sorter[direction]' },
8965
+ rowSeparator: { selector: () => 'vaadin-grid::part(body-cell)' },
8966
+ resizeHandle: { selector: () => '::part(resize-handle)' },
8967
+ toggleDetailsPanelButton: { selector: () => 'vaadin-grid vaadin-icon.toggle-details-button' },
8968
+ toggleDetailsPanelButtonOpened: {
8969
+ selector: () => 'vaadin-grid vaadin-icon.toggle-details-button.opened',
8970
+ },
8971
+ toggleDetailsPanelButtonClosed: {
8972
+ selector: () => 'vaadin-grid vaadin-icon.toggle-details-button.closed',
8973
+ },
8974
+ detailsPanel: { selector: () => 'vaadin-grid::part(details-cell)' },
8975
+ detailsPanelLabels: { selector: () => 'vaadin-grid .row-details__label' },
8976
+ detailsPanelContent: { selector: () => 'vaadin-grid .row-details' },
8977
+ };
8978
+
8979
+ const GridClass = compose(
8980
+ createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),
8981
+ createStyleMixin({
8982
+ mappings: {
8983
+ hostWidth: { selector: () => ':host', property: 'width' },
8984
+ hostHeight: { selector: () => ':host', property: 'height' },
8985
+ hostMinHeight: { selector: () => ':host', property: 'min-height' },
8986
+ fontFamily: [{ ...headerRow }, { ...contentRow }],
8987
+ fontSize: [{ ...headerRow }, { ...contentRow }],
8580
8988
  fontWeight: { ...contentRow },
8581
8989
  valueTextColor: { ...contentRow, property: 'color' },
8582
8990
  backgroundColor: [
@@ -8589,7 +8997,10 @@ const GridClass = compose(
8589
8997
  borderWidth: { ...host$6, property: 'border-width' },
8590
8998
  borderStyle: { ...host$6, property: 'border-style' },
8591
8999
  borderRadius: { ...host$6, property: 'border-radius' },
8592
- selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
9000
+ selectedBackgroundColor: [
9001
+ { ...selectedRow, property: 'background-color' },
9002
+ { ...selectedRowCell, property: 'background-color' },
9003
+ ],
8593
9004
  headerRowTextColor: { ...headerRowCell, property: 'color' },
8594
9005
  separatorColor: [
8595
9006
  { ...firstRow, property: 'border-bottom-color' },
@@ -8597,6 +9008,19 @@ const GridClass = compose(
8597
9008
  ],
8598
9009
  resizeHandleColor: { ...resizeHandle, property: 'background-color' },
8599
9010
  hostDirection: { ...host$6, property: 'direction', fallback: 'ltr' },
9011
+ toggleDetailsPanelButtonSize: [
9012
+ { ...toggleDetailsPanelButton, property: 'width' },
9013
+ { ...toggleDetailsPanelButton, property: 'height' },
9014
+ ],
9015
+ toggleDetailsPanelButtonOpenedColor: { ...toggleDetailsPanelButtonOpened, property: 'color' },
9016
+ toggleDetailsPanelButtonClosedColor: { ...toggleDetailsPanelButtonClosed, property: 'color' },
9017
+ toggleDetailsPanelButtonCursor: { ...toggleDetailsPanelButton, property: 'cursor' },
9018
+ detailsPanelBackgroundColor: { ...detailsPanel, property: 'background-color' },
9019
+ detailsPanelBorderTopColor: { ...detailsPanel, property: 'border-top-color' },
9020
+ detailsPanelLabelsColor: { ...detailsPanelLabels, property: 'color' },
9021
+ detailsPanelLabelsFontSize: { ...detailsPanelLabels, property: 'font-size' },
9022
+ detailsPanelItemsGap: { ...detailsPanelContent, property: 'grid-gap' },
9023
+ detailsPanelPadding: { ...detailsPanelContent, property: 'padding' },
8600
9024
  },
8601
9025
  }),
8602
9026
  draggableMixin,
@@ -8608,6 +9032,7 @@ const GridClass = compose(
8608
9032
  slots: [''],
8609
9033
  wrappedEleName: 'vaadin-grid',
8610
9034
  style: () => `
9035
+ /*css*/
8611
9036
  vaadin-grid {
8612
9037
  overflow: hidden;
8613
9038
  height: 100%;
@@ -8616,19 +9041,48 @@ const GridClass = compose(
8616
9041
  vaadin-grid-cell-content {
8617
9042
  display: flex;
8618
9043
  }
8619
- vaadin-grid::part(selected-row-cell) {
8620
- background-image: none;
8621
- box-shadow: none;
9044
+ vaadin-grid::part(selected-row-cell) {
9045
+ background-image: none;
9046
+ box-shadow: none;
9047
+ background-color: inherit;
9048
+ }
9049
+ vaadin-grid::part(details-cell) {
9050
+ border-top-style: dashed;
9051
+ border-top-width: 1px;
9052
+ }
9053
+ vaadin-grid .row-details {
9054
+ display: grid;
9055
+ grid-template-columns: repeat(auto-fit, minmax(max(200px, calc(100%/4 - var(${GridClass.cssVarList.detailsPanelItemsGap}))), 1fr));
9056
+ width: 100%;
9057
+ }
9058
+ vaadin-grid .row-details__item:has(.row-details__value.json) {
9059
+ grid-column: 1 / -1;
9060
+ order: 2;
9061
+ }
9062
+ vaadin-grid .row-details__value.text {
9063
+ overflow: hidden;
9064
+ text-overflow: ellipsis;
9065
+ white-space: pre;
9066
+ }
9067
+ vaadin-grid .row-details__value.json {
9068
+ margin-top: 5px;
9069
+ max-height: 120px;
9070
+ overflow: scroll;
9071
+ font-size: 0.85em;
9072
+ }
9073
+ vaadin-grid vaadin-icon.toggle-details-button {
9074
+ margin: auto;
8622
9075
  }
9076
+ /*!css*/
8623
9077
  `,
8624
9078
  excludeAttrsSync: ['columns', 'tabindex'],
8625
- componentName: componentName$h,
9079
+ componentName: componentName$g,
8626
9080
  })
8627
9081
  );
8628
9082
 
8629
- customElements.define(componentName$h, GridClass);
9083
+ customElements.define(componentName$g, GridClass);
8630
9084
 
8631
- const componentName$g = getComponentName('multi-select-combo-box');
9085
+ const componentName$f = getComponentName('multi-select-combo-box');
8632
9086
 
8633
9087
  const multiSelectComboBoxMixin = (superclass) =>
8634
9088
  class MultiSelectComboBoxMixinClass extends superclass {
@@ -9262,16 +9716,16 @@ const MultiSelectComboBoxClass = compose(
9262
9716
  // Note: we exclude `placeholder` because the vaadin component observes it and
9263
9717
  // tries to override it, causing us to lose the user set placeholder.
9264
9718
  excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
9265
- componentName: componentName$g,
9719
+ componentName: componentName$f,
9266
9720
  includeForwardProps: ['items', 'renderer', 'selectedItems'],
9267
9721
  })
9268
9722
  );
9269
9723
 
9270
- customElements.define(componentName$g, MultiSelectComboBoxClass);
9724
+ customElements.define(componentName$f, MultiSelectComboBoxClass);
9271
9725
 
9272
- const componentName$f = getComponentName('badge');
9726
+ const componentName$e = getComponentName('badge');
9273
9727
 
9274
- class RawBadge extends createBaseClass({ componentName: componentName$f, baseSelector: ':host > div' }) {
9728
+ class RawBadge extends createBaseClass({ componentName: componentName$e, baseSelector: ':host > div' }) {
9275
9729
  constructor() {
9276
9730
  super();
9277
9731
 
@@ -9322,9 +9776,9 @@ const BadgeClass = compose(
9322
9776
  componentNameValidationMixin
9323
9777
  )(RawBadge);
9324
9778
 
9325
- customElements.define(componentName$f, BadgeClass);
9779
+ customElements.define(componentName$e, BadgeClass);
9326
9780
 
9327
- const componentName$e = getComponentName('modal');
9781
+ const componentName$d = getComponentName('modal');
9328
9782
 
9329
9783
  const customMixin$3 = (superclass) =>
9330
9784
  class ModalMixinClass extends superclass {
@@ -9423,11 +9877,11 @@ const ModalClass = compose(
9423
9877
  wrappedEleName: 'vaadin-dialog',
9424
9878
  style: () => ``,
9425
9879
  excludeAttrsSync: ['tabindex', 'opened'],
9426
- componentName: componentName$e,
9880
+ componentName: componentName$d,
9427
9881
  })
9428
9882
  );
9429
9883
 
9430
- customElements.define(componentName$e, ModalClass);
9884
+ customElements.define(componentName$d, ModalClass);
9431
9885
 
9432
9886
  const vaadinContainerClass = window.customElements.get('vaadin-notification-container');
9433
9887
 
@@ -9438,7 +9892,7 @@ if (!vaadinContainerClass) {
9438
9892
  class NotificationContainerClass extends vaadinContainerClass {}
9439
9893
  customElements.define(getComponentName('notification-container'), NotificationContainerClass);
9440
9894
 
9441
- const componentName$d = getComponentName('notification-card');
9895
+ const componentName$c = getComponentName('notification-card');
9442
9896
 
9443
9897
  const notificationCardMixin = (superclass) =>
9444
9898
  class NotificationCardMixinClass extends superclass {
@@ -9546,13 +10000,13 @@ const NotificationCardClass = compose(
9546
10000
  }
9547
10001
  `,
9548
10002
  excludeAttrsSync: ['tabindex'],
9549
- componentName: componentName$d,
10003
+ componentName: componentName$c,
9550
10004
  })
9551
10005
  );
9552
10006
 
9553
- customElements.define(componentName$d, NotificationCardClass);
10007
+ customElements.define(componentName$c, NotificationCardClass);
9554
10008
 
9555
- const componentName$c = getComponentName('notification');
10009
+ const componentName$b = getComponentName('notification');
9556
10010
 
9557
10011
  const NotificationMixin = (superclass) =>
9558
10012
  class NotificationMixinClass extends superclass {
@@ -9647,14 +10101,14 @@ const NotificationClass = compose(
9647
10101
  createProxy({
9648
10102
  wrappedEleName: 'vaadin-notification',
9649
10103
  excludeAttrsSync: ['tabindex'],
9650
- componentName: componentName$c,
10104
+ componentName: componentName$b,
9651
10105
  })
9652
10106
  );
9653
10107
 
9654
- customElements.define(componentName$c, NotificationClass);
10108
+ customElements.define(componentName$b, NotificationClass);
9655
10109
 
9656
- const componentName$b = getComponentName('avatar');
9657
- class RawAvatar extends createBaseClass({ componentName: componentName$b, baseSelector: ':host > .wrapper' }) {
10110
+ const componentName$a = getComponentName('avatar');
10111
+ class RawAvatar extends createBaseClass({ componentName: componentName$a, baseSelector: ':host > .wrapper' }) {
9658
10112
  constructor() {
9659
10113
  super();
9660
10114
 
@@ -9755,13 +10209,13 @@ const AvatarClass = compose(
9755
10209
  componentNameValidationMixin
9756
10210
  )(RawAvatar);
9757
10211
 
9758
- customElements.define(componentName$b, AvatarClass);
10212
+ customElements.define(componentName$a, AvatarClass);
9759
10213
 
9760
- customElements.define(componentName$W, IconClass);
10214
+ customElements.define(componentName$X, IconClass);
9761
10215
 
9762
- const componentName$a = getComponentName('mappings-field-internal');
10216
+ const componentName$9 = getComponentName('mappings-field-internal');
9763
10217
 
9764
- const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$a, baseSelector: 'div' });
10218
+ const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$9, baseSelector: 'div' });
9765
10219
 
9766
10220
  class MappingsFieldInternal extends BaseInputClass$2 {
9767
10221
  #errorItem;
@@ -9996,7 +10450,7 @@ class MappingsFieldInternal extends BaseInputClass$2 {
9996
10450
  }
9997
10451
  }
9998
10452
 
9999
- const componentName$9 = getComponentName('mappings-field');
10453
+ const componentName$8 = getComponentName('mappings-field');
10000
10454
 
10001
10455
  const customMixin$2 = (superclass) =>
10002
10456
  class MappingsFieldMixinClass extends superclass {
@@ -10025,14 +10479,14 @@ const customMixin$2 = (superclass) =>
10025
10479
  const template = document.createElement('template');
10026
10480
 
10027
10481
  template.innerHTML = `
10028
- <${componentName$a}
10482
+ <${componentName$9}
10029
10483
  tabindex="-1"
10030
- ></${componentName$a}>
10484
+ ></${componentName$9}>
10031
10485
  `;
10032
10486
 
10033
10487
  this.baseElement.appendChild(template.content.cloneNode(true));
10034
10488
 
10035
- this.inputElement = this.shadowRoot.querySelector(componentName$a);
10489
+ this.inputElement = this.shadowRoot.querySelector(componentName$9);
10036
10490
 
10037
10491
  forwardAttrs(this, this.inputElement, {
10038
10492
  includeAttrs: [
@@ -10161,17 +10615,17 @@ const MappingsFieldClass = compose(
10161
10615
  'options',
10162
10616
  'error-message',
10163
10617
  ],
10164
- componentName: componentName$9,
10618
+ componentName: componentName$8,
10165
10619
  })
10166
10620
  );
10167
10621
 
10168
- customElements.define(componentName$a, MappingsFieldInternal);
10622
+ customElements.define(componentName$9, MappingsFieldInternal);
10169
10623
 
10170
- const componentName$8 = getComponentName('mapping-item');
10624
+ const componentName$7 = getComponentName('mapping-item');
10171
10625
 
10172
10626
  const inputAttrs = ['size', 'bordered', 'readonly', 'full-width', 'disabled'];
10173
10627
 
10174
- const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$8, baseSelector: 'div' });
10628
+ const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$7, baseSelector: 'div' });
10175
10629
 
10176
10630
  class MappingItem extends BaseInputClass$1 {
10177
10631
  static get observedAttributes() {
@@ -10321,17 +10775,17 @@ class MappingItem extends BaseInputClass$1 {
10321
10775
  }
10322
10776
  }
10323
10777
 
10324
- customElements.define(componentName$8, MappingItem);
10778
+ customElements.define(componentName$7, MappingItem);
10325
10779
 
10326
- customElements.define(componentName$9, MappingsFieldClass);
10780
+ customElements.define(componentName$8, MappingsFieldClass);
10327
10781
 
10328
10782
  var deleteIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEgMTZDMSAxNy4xIDEuOSAxOCAzIDE4SDExQzEyLjEgMTggMTMgMTcuMSAxMyAxNlY0SDFWMTZaTTMgNkgxMVYxNkgzVjZaTTEwLjUgMUw5LjUgMEg0LjVMMy41IDFIMFYzSDE0VjFIMTAuNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
10329
10783
 
10330
10784
  var editIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjAwMDIgMC45OTIxNDlDMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNSAxMC4wMDAyIDEuMDE2MTVMOC4yMjQxOSAzLjAwODE1SDIuOTkyMTlDMi40NjQxOSAzLjAwODE1IDIuMDA4MTkgMy40NDAxNSAyLjAwODE5IDMuOTkyMTVWMTIuMDA4MkMyLjAwODE5IDEyLjUzNjIgMi40NDAxOSAxMi45OTIyIDIuOTkyMTkgMTIuOTkyMkg1LjUzNjE5QzUuODQ4MTkgMTMuMDQwMiA2LjE2MDE5IDEzLjA0MDIgNi40NzIxOSAxMi45OTIySDExLjAwODJDMTEuNTM2MiAxMi45OTIyIDExLjk5MjIgMTIuNTYwMiAxMS45OTIyIDEyLjAwODJWNy43ODQxNkwxMy45MzYyIDUuNjI0MTVMMTQuMDA4MiA1LjY3MjE1VjExLjk4NDJDMTQuMDA4MiAxMy42NjQyIDEyLjY2NDIgMTUuMDA4MiAxMS4wMDgyIDE1LjAwODJIMy4wMTYxOUMxLjMzNjE5IDE1LjAwODIgLTAuMDA3ODEyNSAxMy42NjQyIC0wLjAwNzgxMjUgMTEuOTg0MlYzLjk5MjE1Qy0wLjAwNzgxMjUgMi4zMzYxNSAxLjMzNjE5IDAuOTkyMTQ5IDMuMDE2MTkgMC45OTIxNDlIMTAuMDAwMlpNMTEuMjcyMiAyLjYyNDE1TDEyLjYxNjIgNC4xMTIxNUw3LjcyMDE5IDkuNjgwMTZDNy41MDQxOSA5LjkyMDE2IDYuODMyMTkgMTAuMjMyMiA1LjY4MDE5IDEwLjYxNjJDNS42NTYxOSAxMC42NDAyIDUuNjA4MTkgMTAuNjQwMiA1LjU2MDE5IDEwLjYxNjJDNS40NjQxOSAxMC41OTIyIDUuMzkyMTkgMTAuNDcyMiA1LjQ0MDE5IDEwLjM3NjJDNS43NTIxOSA5LjI0ODE2IDYuMDQwMTkgOC41NTIxNiA2LjI1NjE5IDguMzEyMTZMMTEuMjcyMiAyLjYyNDE1Wk0xMS45MjAyIDEuODU2MTVMMTMuMjg4MiAwLjMyMDE0OUMxMy42NDgyIC0wLjA4Nzg1MTYgMTQuMjcyMiAtMC4xMTE4NTIgMTQuNjgwMiAwLjI3MjE0OUMxNS4wODgyIDAuNjMyMTQ5IDE1LjExMjIgMS4yODAxNSAxNC43NTIyIDEuNjg4MTVMMTMuMjY0MiAzLjM2ODE1TDExLjkyMDIgMS44NTYxNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
10331
10785
 
10332
- const componentName$7 = getComponentName('user-attribute');
10786
+ const componentName$6 = getComponentName('user-attribute');
10333
10787
  class RawUserAttribute extends createBaseClass({
10334
- componentName: componentName$7,
10788
+ componentName: componentName$6,
10335
10789
  baseSelector: ':host > .root',
10336
10790
  }) {
10337
10791
  constructor() {
@@ -10561,13 +11015,13 @@ const UserAttributeClass = compose(
10561
11015
  componentNameValidationMixin
10562
11016
  )(RawUserAttribute);
10563
11017
 
10564
- customElements.define(componentName$7, UserAttributeClass);
11018
+ customElements.define(componentName$6, UserAttributeClass);
10565
11019
 
10566
11020
  var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
10567
11021
 
10568
- const componentName$6 = getComponentName('user-auth-method');
11022
+ const componentName$5 = getComponentName('user-auth-method');
10569
11023
  class RawUserAuthMethod extends createBaseClass({
10570
- componentName: componentName$6,
11024
+ componentName: componentName$5,
10571
11025
  baseSelector: ':host > .root',
10572
11026
  }) {
10573
11027
  constructor() {
@@ -10759,11 +11213,11 @@ const UserAuthMethodClass = compose(
10759
11213
  componentNameValidationMixin
10760
11214
  )(RawUserAuthMethod);
10761
11215
 
10762
- customElements.define(componentName$6, UserAuthMethodClass);
11216
+ customElements.define(componentName$5, UserAuthMethodClass);
10763
11217
 
10764
- const componentName$5 = getComponentName('saml-group-mappings-internal');
11218
+ const componentName$4 = getComponentName('saml-group-mappings-internal');
10765
11219
 
10766
- const BaseInputClass = createBaseInputClass({ componentName: componentName$5, baseSelector: '' });
11220
+ const BaseInputClass = createBaseInputClass({ componentName: componentName$4, baseSelector: '' });
10767
11221
 
10768
11222
  class SamlGroupMappingsInternal extends BaseInputClass {
10769
11223
  static get observedAttributes() {
@@ -10889,7 +11343,7 @@ class SamlGroupMappingsInternal extends BaseInputClass {
10889
11343
  }
10890
11344
  }
10891
11345
 
10892
- const componentName$4 = getComponentName('saml-group-mappings');
11346
+ const componentName$3 = getComponentName('saml-group-mappings');
10893
11347
 
10894
11348
  const customMixin$1 = (superclass) =>
10895
11349
  class SamlGroupMappingsMixinClass extends superclass {
@@ -10899,14 +11353,14 @@ const customMixin$1 = (superclass) =>
10899
11353
  const template = document.createElement('template');
10900
11354
 
10901
11355
  template.innerHTML = `
10902
- <${componentName$5}
11356
+ <${componentName$4}
10903
11357
  tabindex="-1"
10904
- ></${componentName$5}>
11358
+ ></${componentName$4}>
10905
11359
  `;
10906
11360
 
10907
11361
  this.baseElement.appendChild(template.content.cloneNode(true));
10908
11362
 
10909
- this.inputElement = this.shadowRoot.querySelector(componentName$5);
11363
+ this.inputElement = this.shadowRoot.querySelector(componentName$4);
10910
11364
 
10911
11365
  forwardAttrs(this, this.inputElement, {
10912
11366
  includeAttrs: [
@@ -10983,257 +11437,13 @@ const SamlGroupMappingsClass = compose(
10983
11437
  'options',
10984
11438
  'error-message',
10985
11439
  ],
10986
- componentName: componentName$4,
11440
+ componentName: componentName$3,
10987
11441
  })
10988
11442
  );
10989
11443
 
10990
- customElements.define(componentName$5, SamlGroupMappingsInternal);
10991
-
10992
- customElements.define(componentName$4, SamlGroupMappingsClass);
10993
-
10994
- const decode = (input) => {
10995
- const txt = document.createElement('textarea');
10996
- txt.innerHTML = input;
10997
- return txt.value;
10998
- };
10999
-
11000
- const tpl = (input, inline) => {
11001
- return inline ? input : `<pre>${input}</pre>`;
11002
- };
11003
-
11004
- const componentName$3 = getComponentName('code-snippet');
11005
-
11006
- let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$3, baseSelector: ':host > code' }) {
11007
- static get observedAttributes() {
11008
- return ['lang', 'inline'];
11009
- }
11010
-
11011
- constructor() {
11012
- super();
11013
-
11014
- this.attachShadow({ mode: 'open' }).innerHTML = `
11015
- <style>
11016
- :host {
11017
- display: inline-block;
11018
- width: 100%;
11019
- }
11020
- code {
11021
- display: block;
11022
- width: 100%;
11023
- min-height: 1em;
11024
- overflow-x: scroll;
11025
- overflow-y: scroll;
11026
- }
11027
- pre {
11028
- margin: 0;
11029
- }
11030
- </style>
11031
- <code class="hljs"></code>
11032
- `;
11033
- }
11034
-
11035
- init() {
11036
- super.init?.();
11037
-
11038
- this.lang = this.getAttribute('lang');
11039
- this.isInline = this.getAttribute('inline') === 'true';
11040
-
11041
- observeChildren(this, this.#renderSnippet.bind(this));
11042
- }
11043
-
11044
- get contentNode() {
11045
- return this.shadowRoot.querySelector(this.baseSelector);
11046
- }
11047
-
11048
- attributeChangedCallback(attrName, oldValue, newValue) {
11049
- super.attributeChangedCallback?.(attrName, oldValue, newValue);
11050
-
11051
- if (oldValue !== newValue) {
11052
- if (attrName === 'inline') {
11053
- this.isInline = newValue;
11054
- }
11055
-
11056
- if (attrName === 'lang') {
11057
- this.lang = newValue;
11058
- }
11059
-
11060
- this.#renderSnippet();
11061
- }
11062
- }
11063
-
11064
- #renderSnippet() {
11065
- const sanitized = decode(this.textContent);
11066
- const language = this.lang;
11067
-
11068
- if (!language) {
11069
- this.contentNode.textContent = sanitized;
11070
- return;
11071
- }
11072
-
11073
- const { value: highlighted } = hljs.highlight(sanitized, { language });
11074
-
11075
- this.contentNode.innerHTML = tpl(highlighted, this.isInline);
11076
- }
11077
- };
11078
-
11079
- const {
11080
- root,
11081
- docTag,
11082
- keyword,
11083
- metaKeyword,
11084
- templateTag,
11085
- templateVariable,
11086
- type,
11087
- variableLanguage,
11088
- title,
11089
- titleClass,
11090
- titleClassInherited,
11091
- titleFunction,
11092
- attr,
11093
- attribute,
11094
- literal,
11095
- meta,
11096
- number,
11097
- operator,
11098
- variable,
11099
- selectorAttr,
11100
- selectorClass,
11101
- selectorId,
11102
- regexp,
11103
- string,
11104
- metaString,
11105
- builtIn,
11106
- symbol,
11107
- comment,
11108
- code,
11109
- formula,
11110
- name,
11111
- quote,
11112
- selectorTag,
11113
- selectorPseudo,
11114
- subst,
11115
- section,
11116
- bullet,
11117
- emphasis,
11118
- strong,
11119
- addition,
11120
- deletion,
11121
- charEscape,
11122
- link: link$2,
11123
- params,
11124
- property,
11125
- punctuation,
11126
- tag,
11127
- } = {
11128
- root: { selector: () => '.hljs' },
11129
- docTag: { selector: () => '.hljs-doctag' },
11130
- keyword: { selector: () => '.hljs-keyword' },
11131
- metaKeyword: { selector: () => '.hljs-meta .hljs-keyword' },
11132
- templateTag: { selector: () => '.hljs-template-tag' },
11133
- templateVariable: { selector: () => '.hljs-template-variable' },
11134
- type: { selector: () => '.hljs-type' },
11135
- variableLanguage: { selector: () => '.hljs-variable.language' },
11136
- title: { selector: () => '.hljs-title' },
11137
- titleClass: { selector: () => '.hljs-title.class_' },
11138
- titleClassInherited: { selector: () => '.hljs-title.class_.inherited__' },
11139
- titleFunction: { selector: () => '.hljs-title.function_' },
11140
- attr: { selector: () => '.hljs-attr' },
11141
- attribute: { selector: () => '.hljs-attribute' },
11142
- literal: { selector: () => '.hljs-literal' },
11143
- meta: { selector: () => '.hljs-meta' },
11144
- number: { selector: () => '.hljs-number' },
11145
- operator: { selector: () => '.hljs-operator' },
11146
- variable: { selector: () => '.hljs-variable' },
11147
- selectorAttr: { selector: () => '.hljs-selector-attr' },
11148
- selectorClass: { selector: () => '.hljs-selector-class' },
11149
- selectorId: { selector: () => '.hljs-selector-id' },
11150
- regexp: { selector: () => '.hljs-regexp' },
11151
- string: { selector: () => '.hljs-string' },
11152
- metaString: { selector: () => '.hljs-meta .hljs-string' },
11153
- builtIn: { selector: () => '.hljs-built_in' },
11154
- symbol: { selector: () => '.hljs-symbol' },
11155
- comment: { selector: () => '.hljs-comment' },
11156
- code: { selector: () => '.hljs-code' },
11157
- formula: { selector: () => '.hljs-formula' },
11158
- name: { selector: () => '.hljs-name' },
11159
- quote: { selector: () => '.hljs-quote' },
11160
- selectorTag: { selector: () => '.hljs-selector-tag' },
11161
- selectorPseudo: { selector: () => '.hljs-selector-pseudo' },
11162
- subst: { selector: () => '.hljs-subst' },
11163
- section: { selector: () => '.hljs-section' },
11164
- bullet: { selector: () => '.hljs-bullet' },
11165
- emphasis: { selector: () => '.hljs-emphasis' },
11166
- strong: { selector: () => '.hljs-strong' },
11167
- addition: { selector: () => '.hljs-addition' },
11168
- deletion: { selector: () => '.hljs-deletion' },
11169
- charEscape: { selector: () => '.hljs-char.escape' },
11170
- link: { selector: () => '.hljs-link' },
11171
- params: { selector: () => '.hljs-params' },
11172
- property: { selector: () => '.hljs-property' },
11173
- punctuation: { selector: () => '.hljs-punctuation' },
11174
- tag: { selector: () => '.hljs-tag' },
11175
- };
11176
-
11177
- const CodeSnippetClass = compose(
11178
- createStyleMixin({
11179
- mappings: {
11180
- rootBgColor: { ...root, property: 'background-color' },
11181
- rootTextColor: { ...root, property: 'color' },
11182
- docTagTextColor: { ...docTag, property: 'color' },
11183
- keywordTextColor: { ...keyword, property: 'color' },
11184
- metaKeywordTextColor: { ...metaKeyword, property: 'color' },
11185
- templateTagTextColor: { ...templateTag, property: 'color' },
11186
- templateVariableTextColor: { ...templateVariable, property: 'color' },
11187
- typeTextColor: { ...type, property: 'color' },
11188
- variableLanguageTextColor: { ...variableLanguage, property: 'color' },
11189
- titleTextColor: { ...title, property: 'color' },
11190
- titleClassTextColor: { ...titleClass, property: 'color' },
11191
- titleClassInheritedTextColor: { ...titleClassInherited, property: 'color' },
11192
- titleFunctionTextColor: { ...titleFunction, property: 'color' },
11193
- attrTextColor: { ...attr, property: 'color' },
11194
- attributeTextColor: { ...attribute, property: 'color' },
11195
- literalTextColor: { ...literal, property: 'color' },
11196
- metaTextColor: { ...meta, property: 'color' },
11197
- numberTextColor: { ...number, property: 'color' },
11198
- operatorTextColor: { ...operator, property: 'color' },
11199
- variableTextColor: { ...variable, property: 'color' },
11200
- selectorAttrTextColor: { ...selectorAttr, property: 'color' },
11201
- selectorClassTextColor: { ...selectorClass, property: 'color' },
11202
- selectorIdTextColor: { ...selectorId, property: 'color' },
11203
- regexpTextColor: { ...regexp, property: 'color' },
11204
- stringTextColor: { ...string, property: 'color' },
11205
- metaStringTextColor: { ...metaString, property: 'color' },
11206
- builtInTextColor: { ...builtIn, property: 'color' },
11207
- symbolTextColor: { ...symbol, property: 'color' },
11208
- commentTextColor: { ...comment, property: 'color' },
11209
- codeTextColor: { ...code, property: 'color' },
11210
- formulaTextColor: { ...formula, property: 'color' },
11211
- nameTextColor: { ...name, property: 'color' },
11212
- quoteTextColor: { ...quote, property: 'color' },
11213
- selectorTagTextColor: { ...selectorTag, property: 'color' },
11214
- selectorPseudoTextColor: { ...selectorPseudo, property: 'color' },
11215
- substTextColor: { ...subst, property: 'color' },
11216
- sectionTextColor: { ...section, property: 'color' },
11217
- bulletTextColor: { ...bullet, property: 'color' },
11218
- emphasisTextColor: { ...emphasis, property: 'color' },
11219
- strongTextColor: { ...strong, property: 'color' },
11220
- additionTextColor: { ...addition, property: 'color' },
11221
- additionBgColor: { ...addition, property: 'background-color' },
11222
- deletionTextColor: { ...deletion, property: 'color' },
11223
- deletionBgColor: { ...deletion, property: 'background-color' },
11224
- charEscapeTextColor: { ...charEscape, property: 'color' },
11225
- linkTextColor: { ...link$2, property: 'color' },
11226
- paramsTextColor: { ...params, property: 'color' },
11227
- propertyTextColor: { ...property, property: 'color' },
11228
- punctuationTextColor: { ...punctuation, property: 'color' },
11229
- tagTextColor: { ...tag, property: 'color' },
11230
- },
11231
- }),
11232
- draggableMixin,
11233
- componentNameValidationMixin
11234
- )(CodeSnippet$1);
11444
+ customElements.define(componentName$4, SamlGroupMappingsInternal);
11235
11445
 
11236
- customElements.define(componentName$3, CodeSnippetClass);
11446
+ customElements.define(componentName$3, SamlGroupMappingsClass);
11237
11447
 
11238
11448
  const componentName$2 = getComponentName('radio-button');
11239
11449
 
@@ -11925,7 +12135,7 @@ const mode = {
11925
12135
  surface: globalRefs$s.colors.surface,
11926
12136
  };
11927
12137
 
11928
- const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$V);
12138
+ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$W);
11929
12139
 
11930
12140
  const button = {
11931
12141
  ...helperTheme$3,
@@ -12527,7 +12737,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
12527
12737
  horizontalAlignment,
12528
12738
  shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
12529
12739
  },
12530
- componentName$P
12740
+ componentName$Q
12531
12741
  );
12532
12742
 
12533
12743
  const { shadowColor: shadowColor$1 } = helperRefs$2;
@@ -12893,7 +13103,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
12893
13103
  thickness: '2px',
12894
13104
  spacing: '10px',
12895
13105
  },
12896
- componentName$N
13106
+ componentName$O
12897
13107
  );
12898
13108
 
12899
13109
  const divider = {
@@ -13036,7 +13246,7 @@ const [helperTheme, helperRefs, helperVars] = createHelperVars(
13036
13246
  },
13037
13247
  },
13038
13248
  },
13039
- componentName$Q
13249
+ componentName$R
13040
13250
  );
13041
13251
 
13042
13252
  const loaderRadial = {
@@ -13454,6 +13664,17 @@ const grid = {
13454
13664
  [vars$e.selectedBackgroundColor]: globalRefs$b.colors.surface.highlight,
13455
13665
  [vars$e.hostDirection]: globalRefs$b.direction,
13456
13666
 
13667
+ [vars$e.toggleDetailsPanelButtonSize]: '1em',
13668
+ [vars$e.toggleDetailsPanelButtonOpenedColor]: globalRefs$b.colors.surface.contrast,
13669
+ [vars$e.toggleDetailsPanelButtonClosedColor]: globalRefs$b.colors.surface.light,
13670
+ [vars$e.toggleDetailsPanelButtonCursor]: 'pointer',
13671
+ [vars$e.detailsPanelBackgroundColor]: globalRefs$b.colors.surface.highlight,
13672
+ [vars$e.detailsPanelBorderTopColor]: globalRefs$b.colors.surface.light,
13673
+ [vars$e.detailsPanelLabelsColor]: globalRefs$b.colors.surface.dark,
13674
+ [vars$e.detailsPanelLabelsFontSize]: '0.8em',
13675
+ [vars$e.detailsPanelItemsGap]: '2em',
13676
+ [vars$e.detailsPanelPadding]: '12px 0',
13677
+
13457
13678
  _bordered: {
13458
13679
  [vars$e.borderColor]: refs.borderColor,
13459
13680
  },