@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.
- package/dist/cjs/index.cjs.js +183 -3
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +831 -610
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1612.js +116 -4
- package/dist/umd/3227.js +17 -0
- package/dist/umd/4024.js +116 -4
- package/dist/umd/4028.js +121 -9
- package/dist/umd/4052.js +116 -4
- package/dist/umd/4978.js +1 -1
- package/dist/umd/5135.js +2 -2
- package/dist/umd/602.js +114 -2
- package/dist/umd/9562.js +116 -4
- package/dist/umd/DescopeDev.js +1 -1
- package/dist/umd/descope-button-index-js.js +116 -4
- package/dist/umd/descope-grid-descope-grid-custom-column-index-js.js +3 -3
- package/dist/umd/descope-grid-descope-grid-item-details-column-index-js.js +90 -0
- package/dist/umd/descope-grid-descope-grid-item-details-column-index-js.js.LICENSE.txt +17 -0
- package/dist/umd/descope-grid-descope-grid-text-column-index-js.js +1 -1
- package/dist/umd/descope-grid-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-grid/GridClass.js +115 -6
- package/src/components/descope-grid/descope-grid-item-details-column/GridItemDetailsColumnClass.js +37 -0
- package/src/components/descope-grid/descope-grid-item-details-column/index.js +8 -0
- package/src/components/descope-grid/helpers.js +54 -0
- package/src/components/descope-grid/index.js +2 -0
- package/src/helpers/index.js +8 -0
- package/src/theme/components/grid.js +11 -0
- package/dist/umd/2362.js +0 -129
- /package/dist/umd/{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$
|
1387
|
+
const componentName$X = getComponentName('icon');
|
1380
1388
|
|
1381
|
-
class RawIcon extends createBaseClass({ componentName: componentName$
|
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$
|
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$
|
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$
|
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$
|
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$
|
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$
|
1695
|
+
<${componentName$V}
|
1688
1696
|
tabindex="-1"
|
1689
1697
|
slot="input"
|
1690
|
-
></${componentName$
|
1698
|
+
></${componentName$V}>
|
1691
1699
|
`;
|
1692
1700
|
|
1693
1701
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
1694
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
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$
|
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$
|
2023
|
+
componentName: componentName$U,
|
2016
2024
|
})
|
2017
2025
|
);
|
2018
2026
|
|
2019
|
-
customElements.define(componentName$
|
2027
|
+
customElements.define(componentName$V, BooleanInputInternal);
|
2020
2028
|
|
2021
|
-
customElements.define(componentName$
|
2029
|
+
customElements.define(componentName$U, CheckboxClass);
|
2022
2030
|
|
2023
|
-
const componentName$
|
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$
|
2163
|
+
componentName: componentName$T,
|
2156
2164
|
})
|
2157
2165
|
);
|
2158
2166
|
|
2159
|
-
customElements.define(componentName$
|
2167
|
+
customElements.define(componentName$T, SwitchToggleClass);
|
2160
2168
|
|
2161
|
-
const componentName$
|
2169
|
+
const componentName$S = getComponentName('loader-linear');
|
2162
2170
|
|
2163
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
2171
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$S, baseSelector: ':host > div' }) {
|
2164
2172
|
static get componentName() {
|
2165
|
-
return componentName$
|
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$
|
2234
|
+
customElements.define(componentName$S, LoaderLinearClass);
|
2227
2235
|
|
2228
|
-
const componentName$
|
2236
|
+
const componentName$R = getComponentName('loader-radial');
|
2229
2237
|
|
2230
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
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$
|
2282
|
+
customElements.define(componentName$R, LoaderRadialClass);
|
2275
2283
|
|
2276
|
-
const componentName$
|
2284
|
+
const componentName$Q = getComponentName('container');
|
2277
2285
|
|
2278
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
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$
|
2339
|
+
customElements.define(componentName$Q, ContainerClass);
|
2332
2340
|
|
2333
|
-
const componentName$
|
2341
|
+
const componentName$P = getComponentName('text');
|
2334
2342
|
|
2335
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
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$
|
2393
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
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$
|
2500
|
+
customElements.define(componentName$P, TextClass);
|
2493
2501
|
|
2494
|
-
customElements.define(componentName$
|
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$
|
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$
|
2666
|
+
componentName: componentName$N,
|
2659
2667
|
})
|
2660
2668
|
);
|
2661
2669
|
|
2662
|
-
customElements.define(componentName$
|
2670
|
+
customElements.define(componentName$N, EmailFieldClass);
|
2663
2671
|
|
2664
|
-
const componentName$
|
2672
|
+
const componentName$M = getComponentName('link');
|
2665
2673
|
|
2666
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
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$
|
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$
|
2790
|
+
const componentName$L = getComponentName('logo');
|
2783
2791
|
|
2784
2792
|
const LogoClass = createCssVarImageClass({
|
2785
|
-
componentName: componentName$
|
2793
|
+
componentName: componentName$L,
|
2786
2794
|
varName: 'url',
|
2787
2795
|
fallbackVarName: 'fallbackUrl',
|
2788
2796
|
});
|
2789
2797
|
|
2790
|
-
customElements.define(componentName$
|
2798
|
+
customElements.define(componentName$L, LogoClass);
|
2791
2799
|
|
2792
|
-
const componentName$
|
2800
|
+
const componentName$K = getComponentName('totp-image');
|
2793
2801
|
|
2794
2802
|
const TotpImageClass = createCssVarImageClass({
|
2795
|
-
componentName: componentName$
|
2803
|
+
componentName: componentName$K,
|
2796
2804
|
varName: 'url',
|
2797
2805
|
fallbackVarName: 'fallbackUrl',
|
2798
2806
|
});
|
2799
2807
|
|
2800
|
-
customElements.define(componentName$
|
2808
|
+
customElements.define(componentName$K, TotpImageClass);
|
2801
2809
|
|
2802
|
-
const componentName$
|
2810
|
+
const componentName$J = getComponentName('notp-image');
|
2803
2811
|
|
2804
2812
|
const NotpImageClass = createCssVarImageClass({
|
2805
|
-
componentName: componentName$
|
2813
|
+
componentName: componentName$J,
|
2806
2814
|
varName: 'url',
|
2807
2815
|
fallbackVarName: 'fallbackUrl',
|
2808
2816
|
});
|
2809
2817
|
|
2810
|
-
customElements.define(componentName$
|
2818
|
+
customElements.define(componentName$J, NotpImageClass);
|
2811
2819
|
|
2812
|
-
const componentName$
|
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$
|
2854
|
+
componentName: componentName$I,
|
2847
2855
|
})
|
2848
2856
|
);
|
2849
2857
|
|
2850
|
-
customElements.define(componentName$
|
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$
|
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$
|
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$
|
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$
|
3230
|
+
componentName: componentName$G,
|
3223
3231
|
})
|
3224
3232
|
);
|
3225
3233
|
|
3226
|
-
const componentName$
|
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$
|
3253
|
+
<${componentName$H}
|
3246
3254
|
bordered="true"
|
3247
3255
|
name="code"
|
3248
3256
|
tabindex="-1"
|
3249
3257
|
slot="input"
|
3250
|
-
><slot></slot></${componentName$
|
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$
|
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$
|
3410
|
+
componentName: componentName$F,
|
3403
3411
|
})
|
3404
3412
|
);
|
3405
3413
|
|
3406
|
-
customElements.define(componentName$
|
3414
|
+
customElements.define(componentName$G, TextFieldClass);
|
3407
3415
|
|
3408
|
-
customElements.define(componentName$
|
3416
|
+
customElements.define(componentName$H, PasscodeInternal);
|
3409
3417
|
|
3410
|
-
customElements.define(componentName$
|
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$
|
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$
|
3648
|
+
componentName: componentName$E,
|
3641
3649
|
})
|
3642
3650
|
);
|
3643
3651
|
|
3644
|
-
customElements.define(componentName$
|
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$
|
3677
|
+
const componentName$D = getComponentName('enriched-text');
|
3670
3678
|
|
3671
|
-
let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName: componentName$
|
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$
|
3868
|
+
customElements.define(componentName$D, EnrichedTextClass);
|
3861
3869
|
|
3862
|
-
const componentName$
|
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$
|
3946
|
+
componentName: componentName$C,
|
3939
3947
|
})
|
3940
3948
|
);
|
3941
3949
|
|
3942
|
-
customElements.define(componentName$
|
3950
|
+
customElements.define(componentName$C, TextAreaClass);
|
3943
3951
|
|
3944
3952
|
const observedAttributes$3 = ['src', 'alt'];
|
3945
3953
|
|
3946
|
-
const componentName$
|
3954
|
+
const componentName$B = getComponentName('image');
|
3947
3955
|
|
3948
|
-
const BaseClass$1 = createBaseClass({ componentName: componentName$
|
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$
|
3996
|
+
customElements.define(componentName$B, ImageClass);
|
3989
3997
|
|
3990
|
-
const componentName$
|
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$
|
4437
|
+
componentName: componentName$A,
|
4430
4438
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
4431
4439
|
})
|
4432
4440
|
);
|
4433
4441
|
|
4434
|
-
customElements.define(componentName$
|
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$
|
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$
|
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$
|
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$
|
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$
|
5935
|
+
<${componentName$z}
|
5928
5936
|
tabindex="-1"
|
5929
5937
|
slot="input"
|
5930
|
-
></${componentName$
|
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$
|
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$
|
6165
|
+
componentName: componentName$y,
|
6158
6166
|
})
|
6159
6167
|
);
|
6160
6168
|
|
6161
|
-
customElements.define(componentName$
|
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$
|
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$
|
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$
|
6331
|
+
customElements.define(componentName$x, PhoneFieldInternal);
|
6324
6332
|
|
6325
6333
|
const textVars = TextFieldClass.cssVarList;
|
6326
6334
|
|
6327
|
-
const componentName$
|
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$
|
6349
|
+
<${componentName$x}
|
6342
6350
|
tabindex="-1"
|
6343
6351
|
slot="input"
|
6344
|
-
></${componentName$
|
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$
|
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$
|
6534
|
+
componentName: componentName$w,
|
6527
6535
|
})
|
6528
6536
|
);
|
6529
6537
|
|
6530
|
-
customElements.define(componentName$
|
6538
|
+
customElements.define(componentName$w, PhoneFieldInputBoxClass);
|
6531
6539
|
|
6532
|
-
const componentName$
|
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$
|
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$
|
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$
|
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$
|
6773
|
+
<${componentName$v}
|
6766
6774
|
name="new-password"
|
6767
6775
|
tabindex="-1"
|
6768
6776
|
slot="input"
|
6769
6777
|
>
|
6770
|
-
</${componentName$
|
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$
|
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$
|
6926
|
+
componentName: componentName$t,
|
6919
6927
|
})
|
6920
6928
|
);
|
6921
6929
|
|
6922
|
-
customElements.define(componentName$
|
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$
|
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$
|
7159
|
+
customElements.define(componentName$v, NewPasswordInternal);
|
7152
7160
|
|
7153
|
-
customElements.define(componentName$
|
7161
|
+
customElements.define(componentName$t, NewPasswordClass);
|
7154
7162
|
|
7155
|
-
const componentName$
|
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$
|
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$
|
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$
|
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$
|
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$
|
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$
|
7697
|
+
const componentName$q = getComponentName('button-selection-group-internal');
|
7690
7698
|
|
7691
7699
|
class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
|
7692
|
-
componentName$
|
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$
|
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$
|
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$
|
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$
|
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$
|
7978
|
+
componentName: componentName$p,
|
7971
7979
|
})
|
7972
7980
|
);
|
7973
7981
|
|
7974
|
-
customElements.define(componentName$
|
7982
|
+
customElements.define(componentName$q, ButtonSelectionGroupInternalClass);
|
7975
7983
|
|
7976
|
-
const componentName$
|
7984
|
+
const componentName$o = getComponentName('button-selection-group-item');
|
7977
7985
|
|
7978
7986
|
class RawSelectItem extends createBaseClass({
|
7979
|
-
componentName: componentName$
|
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$
|
8094
|
+
customElements.define(componentName$o, ButtonSelectionGroupItemClass);
|
8087
8095
|
|
8088
|
-
customElements.define(componentName$
|
8096
|
+
customElements.define(componentName$p, ButtonSelectionGroupClass);
|
8089
8097
|
|
8090
|
-
const componentName$
|
8098
|
+
const componentName$n = getComponentName('button-multi-selection-group-internal');
|
8091
8099
|
|
8092
8100
|
class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
|
8093
|
-
componentName$
|
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$
|
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$
|
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$
|
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$
|
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$
|
8250
|
+
componentName: componentName$m,
|
8243
8251
|
})
|
8244
8252
|
);
|
8245
8253
|
|
8246
|
-
customElements.define(componentName$
|
8254
|
+
customElements.define(componentName$n, ButtonMultiSelectionGroupInternalClass);
|
8247
8255
|
|
8248
|
-
customElements.define(componentName$
|
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$
|
8284
|
+
const componentName$l = getComponentName('grid-text-column');
|
8277
8285
|
|
8278
|
-
customElements.define(componentName$
|
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$
|
8321
|
+
const componentName$k = getComponentName('grid-custom-column');
|
8314
8322
|
|
8315
|
-
customElements.define(componentName$
|
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$
|
8382
|
+
const componentName$j = getComponentName('grid-selection-column');
|
8375
8383
|
|
8376
|
-
customElements.define(componentName$
|
8384
|
+
customElements.define(componentName$j, GridSelectionColumnClass);
|
8377
8385
|
|
8378
|
-
|
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
|
-
|
8386
|
-
|
8388
|
+
class GridItemDetailsColumnClass extends GridSortColumn {
|
8389
|
+
get sortable() {
|
8390
|
+
return this.getAttribute('sortable') === 'true';
|
8391
|
+
}
|
8387
8392
|
|
8388
|
-
|
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
|
8391
|
-
|
8392
|
-
|
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
|
-
|
8395
|
-
|
8396
|
-
|
8397
|
-
|
8405
|
+
toggleIcon.onclick = () => {
|
8406
|
+
grid.detailsOpenedItems = isOpened
|
8407
|
+
? grid.detailsOpenedItems.toSpliced(itemIdx, 1)
|
8408
|
+
: [...grid.detailsOpenedItems, model.item];
|
8409
|
+
};
|
8410
|
+
}
|
8398
8411
|
|
8399
|
-
|
8400
|
-
|
8401
|
-
|
8412
|
+
_defaultHeaderRenderer(root, _column) {
|
8413
|
+
if (this.sortable) {
|
8414
|
+
super._defaultHeaderRenderer(root, _column);
|
8402
8415
|
|
8403
|
-
|
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
|
-
|
8416
|
-
|
8419
|
+
this.__setTextContent(root, this.__getHeader(this.header, this.path));
|
8420
|
+
}
|
8421
|
+
}
|
8417
8422
|
|
8418
|
-
|
8419
|
-
this.setColumnsDataFromAttr();
|
8420
|
-
}
|
8421
|
-
}
|
8423
|
+
const componentName$i = getComponentName('grid-item-details-column');
|
8422
8424
|
|
8423
|
-
|
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
|
-
|
8432
|
-
|
8433
|
-
|
8434
|
-
|
8435
|
-
|
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
|
-
|
8439
|
-
|
8433
|
+
const tpl = (input, inline) => {
|
8434
|
+
return inline ? input : `<pre>${input}</pre>`;
|
8435
|
+
};
|
8440
8436
|
|
8441
|
-
|
8442
|
-
acc[attrName] = attrVal;
|
8443
|
-
}
|
8437
|
+
const componentName$h = getComponentName('code-snippet');
|
8444
8438
|
|
8445
|
-
|
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
|
-
|
8452
|
-
|
8453
|
-
}
|
8444
|
+
constructor() {
|
8445
|
+
super();
|
8454
8446
|
|
8455
|
-
|
8456
|
-
|
8457
|
-
|
8458
|
-
|
8459
|
-
|
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
|
-
|
8468
|
-
|
8469
|
-
|
8470
|
-
|
8471
|
-
|
8472
|
-
|
8473
|
-
|
8474
|
-
|
8475
|
-
|
8476
|
-
|
8477
|
-
|
8478
|
-
|
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
|
-
|
8495
|
-
|
8496
|
-
if (template) this.innerHTML = template;
|
8497
|
-
}
|
8468
|
+
init() {
|
8469
|
+
super.init?.();
|
8498
8470
|
|
8499
|
-
|
8500
|
-
|
8501
|
-
}
|
8471
|
+
this.lang = this.getAttribute('lang');
|
8472
|
+
this.isInline = this.getAttribute('inline') === 'true';
|
8502
8473
|
|
8503
|
-
|
8504
|
-
|
8505
|
-
}
|
8474
|
+
observeChildren(this, this.#renderSnippet.bind(this));
|
8475
|
+
}
|
8506
8476
|
|
8507
|
-
|
8508
|
-
|
8509
|
-
|
8477
|
+
get contentNode() {
|
8478
|
+
return this.shadowRoot.querySelector(this.baseSelector);
|
8479
|
+
}
|
8510
8480
|
|
8511
|
-
|
8512
|
-
|
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
|
-
|
8517
|
-
|
8518
|
-
|
8484
|
+
if (oldValue !== newValue) {
|
8485
|
+
if (attrName === 'inline') {
|
8486
|
+
this.isInline = newValue;
|
8487
|
+
}
|
8519
8488
|
|
8520
|
-
|
8521
|
-
|
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
|
-
|
8530
|
-
return this.#columns;
|
8493
|
+
this.#renderSnippet();
|
8531
8494
|
}
|
8495
|
+
}
|
8532
8496
|
|
8533
|
-
|
8534
|
-
|
8535
|
-
|
8536
|
-
}
|
8497
|
+
#renderSnippet() {
|
8498
|
+
const sanitized = decode(this.textContent);
|
8499
|
+
const language = this.lang;
|
8537
8500
|
|
8538
|
-
|
8539
|
-
|
8501
|
+
if (!language) {
|
8502
|
+
this.contentNode.textContent = sanitized;
|
8503
|
+
return;
|
8540
8504
|
}
|
8541
8505
|
|
8542
|
-
|
8543
|
-
return this.getAttribute('unique-column-id');
|
8544
|
-
}
|
8545
|
-
};
|
8506
|
+
const { value: highlighted } = hljs.highlight(sanitized, { language });
|
8546
8507
|
|
8547
|
-
|
8548
|
-
|
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
|
8572
|
-
|
8573
|
-
|
8574
|
-
|
8575
|
-
|
8576
|
-
|
8577
|
-
|
8578
|
-
|
8579
|
-
|
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:
|
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$
|
9079
|
+
componentName: componentName$g,
|
8626
9080
|
})
|
8627
9081
|
);
|
8628
9082
|
|
8629
|
-
customElements.define(componentName$
|
9083
|
+
customElements.define(componentName$g, GridClass);
|
8630
9084
|
|
8631
|
-
const componentName$
|
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$
|
9719
|
+
componentName: componentName$f,
|
9266
9720
|
includeForwardProps: ['items', 'renderer', 'selectedItems'],
|
9267
9721
|
})
|
9268
9722
|
);
|
9269
9723
|
|
9270
|
-
customElements.define(componentName$
|
9724
|
+
customElements.define(componentName$f, MultiSelectComboBoxClass);
|
9271
9725
|
|
9272
|
-
const componentName$
|
9726
|
+
const componentName$e = getComponentName('badge');
|
9273
9727
|
|
9274
|
-
class RawBadge extends createBaseClass({ componentName: componentName$
|
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$
|
9779
|
+
customElements.define(componentName$e, BadgeClass);
|
9326
9780
|
|
9327
|
-
const componentName$
|
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$
|
9880
|
+
componentName: componentName$d,
|
9427
9881
|
})
|
9428
9882
|
);
|
9429
9883
|
|
9430
|
-
customElements.define(componentName$
|
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$
|
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$
|
10003
|
+
componentName: componentName$c,
|
9550
10004
|
})
|
9551
10005
|
);
|
9552
10006
|
|
9553
|
-
customElements.define(componentName$
|
10007
|
+
customElements.define(componentName$c, NotificationCardClass);
|
9554
10008
|
|
9555
|
-
const componentName$
|
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$
|
10104
|
+
componentName: componentName$b,
|
9651
10105
|
})
|
9652
10106
|
);
|
9653
10107
|
|
9654
|
-
customElements.define(componentName$
|
10108
|
+
customElements.define(componentName$b, NotificationClass);
|
9655
10109
|
|
9656
|
-
const componentName$
|
9657
|
-
class RawAvatar extends createBaseClass({ componentName: componentName$
|
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$
|
10212
|
+
customElements.define(componentName$a, AvatarClass);
|
9759
10213
|
|
9760
|
-
customElements.define(componentName$
|
10214
|
+
customElements.define(componentName$X, IconClass);
|
9761
10215
|
|
9762
|
-
const componentName$
|
10216
|
+
const componentName$9 = getComponentName('mappings-field-internal');
|
9763
10217
|
|
9764
|
-
const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$
|
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$
|
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$
|
10482
|
+
<${componentName$9}
|
10029
10483
|
tabindex="-1"
|
10030
|
-
></${componentName$
|
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$
|
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$
|
10618
|
+
componentName: componentName$8,
|
10165
10619
|
})
|
10166
10620
|
);
|
10167
10621
|
|
10168
|
-
customElements.define(componentName$
|
10622
|
+
customElements.define(componentName$9, MappingsFieldInternal);
|
10169
10623
|
|
10170
|
-
const componentName$
|
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$
|
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$
|
10778
|
+
customElements.define(componentName$7, MappingItem);
|
10325
10779
|
|
10326
|
-
customElements.define(componentName$
|
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$
|
10786
|
+
const componentName$6 = getComponentName('user-attribute');
|
10333
10787
|
class RawUserAttribute extends createBaseClass({
|
10334
|
-
componentName: componentName$
|
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$
|
11018
|
+
customElements.define(componentName$6, UserAttributeClass);
|
10565
11019
|
|
10566
11020
|
var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
|
10567
11021
|
|
10568
|
-
const componentName$
|
11022
|
+
const componentName$5 = getComponentName('user-auth-method');
|
10569
11023
|
class RawUserAuthMethod extends createBaseClass({
|
10570
|
-
componentName: componentName$
|
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$
|
11216
|
+
customElements.define(componentName$5, UserAuthMethodClass);
|
10763
11217
|
|
10764
|
-
const componentName$
|
11218
|
+
const componentName$4 = getComponentName('saml-group-mappings-internal');
|
10765
11219
|
|
10766
|
-
const BaseInputClass = createBaseInputClass({ componentName: componentName$
|
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$
|
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$
|
11356
|
+
<${componentName$4}
|
10903
11357
|
tabindex="-1"
|
10904
|
-
></${componentName$
|
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$
|
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$
|
11440
|
+
componentName: componentName$3,
|
10987
11441
|
})
|
10988
11442
|
);
|
10989
11443
|
|
10990
|
-
customElements.define(componentName$
|
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,
|
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$
|
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$
|
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$
|
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$
|
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
|
},
|