@descope/web-components-ui 1.0.286 → 1.0.288
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +92 -19
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +104 -22
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/mapping-fields-descope-mappings-field-descope-mappings-field-internal-index-js.js +1 -1
- package/dist/umd/mapping-fields-descope-mappings-field-index-js.js +3 -3
- package/package.json +1 -1
- package/src/components/mapping-fields/descope-mappings-field/MappingsFieldClass.js +18 -8
- package/src/components/mapping-fields/descope-mappings-field/descope-mappings-field-internal/MappingsFieldInternal.js +17 -4
- package/src/helpers/themeHelpers/colorsHelpers.js +71 -11
- package/src/theme/components/mappingsField.js +3 -0
package/dist/cjs/index.cjs.js
CHANGED
@@ -358,27 +358,87 @@ const createHelperVars = (theme, prefix) => {
|
|
358
358
|
return [res.theme, res.useVars, res.vars];
|
359
359
|
};
|
360
360
|
|
361
|
-
|
362
|
-
|
363
|
-
|
364
|
-
|
361
|
+
const colorGaps = {
|
362
|
+
darkLight: 0.4,
|
363
|
+
highlight: 0.8,
|
364
|
+
contrast: 1,
|
365
|
+
edgeColor: {
|
366
|
+
darkLight: 0.25,
|
367
|
+
highlight: 0.1,
|
368
|
+
},
|
369
|
+
};
|
370
|
+
|
371
|
+
const darken = (c, percentage) => c.darken(percentage).hex();
|
372
|
+
|
373
|
+
const contrast = (c) => {
|
365
374
|
const isDark = c.isDark();
|
366
375
|
return c
|
367
|
-
.mix(Color(isDark ? 'white' : 'black'),
|
376
|
+
.mix(Color(isDark ? 'white' : 'black'), colorGaps.contrast)
|
368
377
|
.saturate(1)
|
369
378
|
.hex();
|
370
379
|
};
|
371
380
|
|
372
|
-
const
|
381
|
+
const lighten = (c, percentage) => {
|
382
|
+
const isDark = c.lightness() < 0.5;
|
383
|
+
|
384
|
+
if (isDark) {
|
385
|
+
return c.lightness(percentage * 100).hex();
|
386
|
+
}
|
387
|
+
|
388
|
+
return c.lighten(percentage).hex();
|
389
|
+
};
|
390
|
+
|
391
|
+
const isNearBlack = (color) => color.luminosity() < 0.01;
|
392
|
+
const isNearWhite = (color) => color.luminosity() > 0.99;
|
393
|
+
|
394
|
+
const generateDarkColor = (color, theme) => {
|
395
|
+
if (theme === 'dark') {
|
396
|
+
return isNearWhite(color)
|
397
|
+
? darken(color, colorGaps.edgeColor.darkLight)
|
398
|
+
: lighten(color, colorGaps.darkLight);
|
399
|
+
}
|
400
|
+
|
401
|
+
return isNearBlack(color)
|
402
|
+
? lighten(color, colorGaps.edgeColor.darkLight)
|
403
|
+
: darken(color, colorGaps.darkLight);
|
404
|
+
};
|
405
|
+
|
406
|
+
const generateLightColor = (color, theme) => {
|
407
|
+
if (theme === 'dark') {
|
408
|
+
return isNearBlack(color)
|
409
|
+
? lighten(color, colorGaps.edgeColor.darkLight)
|
410
|
+
: darken(color, colorGaps.darkLight);
|
411
|
+
}
|
412
|
+
|
413
|
+
return isNearWhite(color)
|
414
|
+
? darken(color, colorGaps.edgeColor.darkLight)
|
415
|
+
: lighten(color, colorGaps.darkLight);
|
416
|
+
};
|
417
|
+
|
418
|
+
const generateHighlightColor = (color, theme) => {
|
419
|
+
if (theme === 'dark') {
|
420
|
+
return isNearBlack(color)
|
421
|
+
? lighten(color, colorGaps.edgeColor.highlight)
|
422
|
+
: darken(color, colorGaps.highlight);
|
423
|
+
}
|
424
|
+
|
425
|
+
return isNearWhite(color)
|
426
|
+
? darken(color, colorGaps.edgeColor.highlight)
|
427
|
+
: lighten(color, colorGaps.highlight);
|
428
|
+
};
|
429
|
+
|
430
|
+
const genColor = (color, theme) => {
|
373
431
|
const mainColor = new Color(color.main || color);
|
374
432
|
|
375
|
-
|
433
|
+
const res = {
|
376
434
|
main: mainColor.hex(),
|
377
|
-
dark: color.dark ||
|
378
|
-
light: color.light ||
|
379
|
-
highlight: color.highlight ||
|
380
|
-
contrast: color.contrast ||
|
435
|
+
dark: color.dark || generateDarkColor(mainColor, theme),
|
436
|
+
light: color.light || generateLightColor(mainColor, theme),
|
437
|
+
highlight: color.highlight || generateHighlightColor(mainColor, theme),
|
438
|
+
contrast: color.contrast || contrast(mainColor),
|
381
439
|
};
|
440
|
+
|
441
|
+
return res;
|
382
442
|
};
|
383
443
|
|
384
444
|
const genColors = (colors) => {
|
@@ -10059,9 +10119,6 @@ createBaseInputClass({ componentName: componentName$3, baseSelector: 'div' });
|
|
10059
10119
|
|
10060
10120
|
const componentName$2 = getComponentName('mappings-field');
|
10061
10121
|
|
10062
|
-
const SEPARATOR_WIDTH = '80px';
|
10063
|
-
const REMOVE_BUTTON_WIDTH = '60px';
|
10064
|
-
|
10065
10122
|
const customMixin = (superclass) =>
|
10066
10123
|
class MappingsFieldMixinClass extends superclass {
|
10067
10124
|
get defaultValues() {
|
@@ -10118,7 +10175,17 @@ const customMixin = (superclass) =>
|
|
10118
10175
|
}
|
10119
10176
|
};
|
10120
10177
|
|
10121
|
-
const {
|
10178
|
+
const {
|
10179
|
+
host,
|
10180
|
+
helperText,
|
10181
|
+
errorMessage,
|
10182
|
+
mappingItem,
|
10183
|
+
labels,
|
10184
|
+
valueLabel,
|
10185
|
+
attrLabel,
|
10186
|
+
separator,
|
10187
|
+
labelsContainer,
|
10188
|
+
} = {
|
10122
10189
|
host: { selector: () => ':host' },
|
10123
10190
|
helperText: { selector: '::part(helper-text)' },
|
10124
10191
|
errorMessage: { selector: '::part(error-message)' },
|
@@ -10127,6 +10194,7 @@ const { host, helperText, errorMessage, mappingItem, labels, valueLabel, attrLab
|
|
10127
10194
|
valueLabel: { selector: 'descope-mappings-field-internal [part="labels"] [part="value-label"]' },
|
10128
10195
|
attrLabel: { selector: 'descope-mappings-field-internal [part="labels"] [part="attr-label"]' },
|
10129
10196
|
separator: { selector: 'descope-mapping-item::part(separator)' },
|
10197
|
+
labelsContainer: { selector: 'descope-mappings-field-internal [part="labels"]' },
|
10130
10198
|
};
|
10131
10199
|
|
10132
10200
|
const MappingsFieldClass = compose(
|
@@ -10142,6 +10210,9 @@ const MappingsFieldClass = compose(
|
|
10142
10210
|
itemMarginBottom: { ...mappingItem, property: 'margin-bottom' },
|
10143
10211
|
valueLabelMinWidth: { ...valueLabel, property: 'min-width' },
|
10144
10212
|
attrLabelMinWidth: { ...attrLabel, property: 'min-width' },
|
10213
|
+
labelsMarginBottom: { ...labelsContainer, property: 'margin-bottom' },
|
10214
|
+
separatorWidth: {},
|
10215
|
+
removeButtonWidth: {},
|
10145
10216
|
},
|
10146
10217
|
}),
|
10147
10218
|
draggableMixin,
|
@@ -10168,9 +10239,8 @@ const MappingsFieldClass = compose(
|
|
10168
10239
|
}
|
10169
10240
|
|
10170
10241
|
descope-mappings-field-internal [part="labels"] {
|
10171
|
-
|
10172
|
-
|
10173
|
-
grid-template-columns: 1fr ${SEPARATOR_WIDTH} 1fr ${REMOVE_BUTTON_WIDTH};
|
10242
|
+
display: none;
|
10243
|
+
grid-template-columns: 1fr var(${MappingsFieldClass.cssVarList.separatorWidth}) 1fr var(${MappingsFieldClass.cssVarList.removeButtonWidth});
|
10174
10244
|
}
|
10175
10245
|
|
10176
10246
|
descope-mappings-field-internal [part="labels"] [part="value-label"],
|
@@ -10188,7 +10258,7 @@ const MappingsFieldClass = compose(
|
|
10188
10258
|
|
10189
10259
|
descope-mapping-item::part(wrapper) {
|
10190
10260
|
display: grid;
|
10191
|
-
grid-template-columns: 1fr ${
|
10261
|
+
grid-template-columns: 1fr var(${MappingsFieldClass.cssVarList.separatorWidth}) 1fr var(${MappingsFieldClass.cssVarList.removeButtonWidth});
|
10192
10262
|
}
|
10193
10263
|
`,
|
10194
10264
|
excludeAttrsSync: [
|
@@ -10219,6 +10289,9 @@ const mappingsField = {
|
|
10219
10289
|
[vars$1.valueLabelMinWidth]: refs.minWidth,
|
10220
10290
|
// To be positioned correctly, the min width has to match the combo box field min width
|
10221
10291
|
[vars$1.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs.border.xs})`,
|
10292
|
+
[vars$1.labelsMarginBottom]: `calc(${globalRefs.typography.body2.size} / 2)`,
|
10293
|
+
[vars$1.separatorWidth]: '70px',
|
10294
|
+
[vars$1.removeButtonWidth]: '60px',
|
10222
10295
|
};
|
10223
10296
|
|
10224
10297
|
var mappingsField$1 = /*#__PURE__*/Object.freeze({
|