@descope/web-components-ui 1.0.218 → 1.0.220
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 +120 -117
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +112 -108
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/4803.js +1 -1
- package/dist/umd/boolean-fields-descope-checkbox-index-js.js +1 -1
- package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +1 -1
- package/dist/umd/descope-button-selection-group-index-js.js +1 -1
- package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/boolean-fields/commonStyles.js +8 -25
- package/src/components/boolean-fields/descope-checkbox/CheckboxClass.js +35 -32
- package/src/components/boolean-fields/descope-switch-toggle/SwitchToggleClass.js +49 -33
- package/src/components/descope-button-selection-group/ButtonSelectionGroupClass.js +1 -1
- package/src/components/descope-passcode/PasscodeClass.js +7 -7
- package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js +1 -0
- package/src/theme/components/checkbox.js +4 -2
- package/src/theme/components/switchToggle.js +3 -4
- package/src/theme/components/text.js +1 -1
package/dist/index.esm.js
CHANGED
@@ -1252,7 +1252,7 @@ const iconStyles = `
|
|
1252
1252
|
|
1253
1253
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
1254
1254
|
|
1255
|
-
const { host: host$f, label: label$
|
1255
|
+
const { host: host$f, label: label$9 } = {
|
1256
1256
|
host: { selector: () => ':host' },
|
1257
1257
|
label: { selector: '::part(label)' },
|
1258
1258
|
};
|
@@ -1283,8 +1283,8 @@ const ButtonClass = compose(
|
|
1283
1283
|
verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
|
1284
1284
|
|
1285
1285
|
labelTextColor: { property: 'color' },
|
1286
|
-
labelTextDecoration: { ...label$
|
1287
|
-
labelSpacing: { ...label$
|
1286
|
+
labelTextDecoration: { ...label$9, property: 'text-decoration' },
|
1287
|
+
labelSpacing: { ...label$9, property: 'gap' },
|
1288
1288
|
},
|
1289
1289
|
}),
|
1290
1290
|
clickableMixin,
|
@@ -1553,7 +1553,6 @@ ${resetInputFieldDefaultWidth()}
|
|
1553
1553
|
display: flex;
|
1554
1554
|
box-sizing: border-box;
|
1555
1555
|
}
|
1556
|
-
|
1557
1556
|
vaadin-text-field {
|
1558
1557
|
position: relative;
|
1559
1558
|
padding: 0;
|
@@ -1565,8 +1564,8 @@ vaadin-text-field::before {
|
|
1565
1564
|
margin: 0;
|
1566
1565
|
}
|
1567
1566
|
vaadin-text-field::part(label) {
|
1568
|
-
|
1569
|
-
|
1567
|
+
position: absolute;
|
1568
|
+
top: 0;
|
1570
1569
|
}
|
1571
1570
|
vaadin-text-field::part(input-field) {
|
1572
1571
|
padding: 0;
|
@@ -1574,38 +1573,22 @@ vaadin-text-field::part(input-field) {
|
|
1574
1573
|
min-height: 0;
|
1575
1574
|
}
|
1576
1575
|
vaadin-text-field::part(input-field)::after {
|
1577
|
-
|
1576
|
+
background: none;
|
1578
1577
|
}
|
1579
1578
|
vaadin-text-field[focus-ring]::part(input-field) {
|
1580
1579
|
box-shadow: none;
|
1581
1580
|
}
|
1582
1581
|
|
1583
1582
|
vaadin-checkbox [slot="label"] {
|
1584
|
-
|
1585
|
-
|
1586
|
-
padding: 0;
|
1583
|
+
align-self: flex-start;
|
1584
|
+
padding: 0;
|
1587
1585
|
}
|
1588
|
-
[required] vaadin-checkbox [slot="label"] {
|
1586
|
+
[required] vaadin-checkbox [slot="label"]:not(:empty) {
|
1589
1587
|
padding-right: 1em;
|
1590
1588
|
}
|
1591
|
-
vaadin-checkbox::part(checkbox) {
|
1592
|
-
margin: 0;
|
1593
|
-
}
|
1594
|
-
vaadin-checkbox[focus-ring]::part(checkbox) {
|
1595
|
-
box-shadow: none;
|
1596
|
-
}
|
1597
|
-
|
1598
1589
|
descope-boolean-field-internal {
|
1599
|
-
|
1600
|
-
|
1601
|
-
padding: 0;
|
1602
|
-
}
|
1603
|
-
|
1604
|
-
[slot="label"],
|
1605
|
-
vaadin-checkbox,
|
1606
|
-
vaadin-checkbox::part(checkbox) {
|
1607
|
-
height: 100%;
|
1608
|
-
cursor: pointer;
|
1590
|
+
-webkit-mask-image: none;
|
1591
|
+
min-height: initial;
|
1609
1592
|
}
|
1610
1593
|
`;
|
1611
1594
|
|
@@ -1616,19 +1599,17 @@ const {
|
|
1616
1599
|
component: component$1,
|
1617
1600
|
checkboxElement,
|
1618
1601
|
checkboxSurface,
|
1619
|
-
|
1620
|
-
label: label$a,
|
1602
|
+
checkboxLabel: checkboxLabel$1,
|
1621
1603
|
requiredIndicator: requiredIndicator$a,
|
1622
1604
|
helperText: helperText$8,
|
1623
1605
|
errorMessage: errorMessage$a,
|
1624
1606
|
} = {
|
1625
1607
|
host: { selector: () => ':host' },
|
1626
|
-
|
1627
|
-
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
1608
|
+
requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
|
1628
1609
|
component: { selector: 'vaadin-checkbox' },
|
1629
1610
|
checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
|
1630
1611
|
checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
|
1631
|
-
|
1612
|
+
checkboxLabel: { selector: 'vaadin-checkbox [slot="label"]:not(:empty)' },
|
1632
1613
|
helperText: { selector: '::part(helper-text)' },
|
1633
1614
|
errorMessage: { selector: '::part(error-message)' },
|
1634
1615
|
};
|
@@ -1638,25 +1619,17 @@ const CheckboxClass = compose(
|
|
1638
1619
|
mappings: {
|
1639
1620
|
hostWidth: { ...host$e, property: 'width' },
|
1640
1621
|
|
1641
|
-
fontSize: [host$e, checkboxElement,
|
1642
|
-
fontFamily: [
|
1622
|
+
fontSize: [host$e, checkboxElement, checkboxLabel$1],
|
1623
|
+
fontFamily: [checkboxLabel$1, helperText$8, errorMessage$a],
|
1643
1624
|
|
1644
|
-
labelTextColor:
|
1645
|
-
|
1646
|
-
|
1647
|
-
|
1648
|
-
],
|
1625
|
+
labelTextColor: { ...checkboxLabel$1, property: 'color' },
|
1626
|
+
labelSpacing: { ...checkboxLabel$1, property: 'padding-left' },
|
1627
|
+
labelLineHeight: { ...checkboxLabel$1, property: 'line-height' },
|
1628
|
+
labelFontWeight: { ...checkboxLabel$1, property: 'font-weight' },
|
1649
1629
|
labelRequiredIndicator: { ...requiredIndicator$a, property: 'content' },
|
1630
|
+
|
1650
1631
|
errorMessageTextColor: { ...errorMessage$a, property: 'color' },
|
1651
1632
|
|
1652
|
-
labelFontWeight: [
|
1653
|
-
{ ...label$a, property: 'font-weight' },
|
1654
|
-
{ ...checkboxHiddenLabel$1, property: 'font-weight' },
|
1655
|
-
],
|
1656
|
-
labelSpacing: [
|
1657
|
-
{ ...label$a, property: 'left' },
|
1658
|
-
{ ...checkboxHiddenLabel$1, property: 'padding-left' },
|
1659
|
-
],
|
1660
1633
|
inputValueTextColor: { ...checkboxSurface, property: 'color' },
|
1661
1634
|
inputBackgroundColor: { ...checkboxElement, property: 'background-color' },
|
1662
1635
|
|
@@ -1676,9 +1649,6 @@ const CheckboxClass = compose(
|
|
1676
1649
|
{ ...checkboxElement, property: 'height' },
|
1677
1650
|
{ ...checkboxSurface, property: 'font-size' },
|
1678
1651
|
{ ...component$1, property: 'font-size' },
|
1679
|
-
{ ...checkboxHiddenLabel$1, property: 'line-height' },
|
1680
|
-
{ ...label$a, property: 'margin-left' },
|
1681
|
-
{ ...label$a, property: 'line-height' },
|
1682
1652
|
],
|
1683
1653
|
},
|
1684
1654
|
}),
|
@@ -1692,17 +1662,33 @@ const CheckboxClass = compose(
|
|
1692
1662
|
wrappedEleName: 'vaadin-text-field',
|
1693
1663
|
style: () => `
|
1694
1664
|
${commonStyles}
|
1695
|
-
|
1696
|
-
|
1697
|
-
|
1698
|
-
|
1665
|
+
${useHostExternalPadding(CheckboxClass.cssVarList)}
|
1666
|
+
|
1667
|
+
:host {
|
1668
|
+
display: inline-flex;
|
1669
|
+
max-width: 100%;
|
1670
|
+
}
|
1699
1671
|
|
1700
|
-
vaadin-text-field
|
1701
|
-
width:
|
1672
|
+
vaadin-text-field {
|
1673
|
+
width: 100%;
|
1702
1674
|
}
|
1703
|
-
|
1704
|
-
|
1705
|
-
|
1675
|
+
|
1676
|
+
descope-boolean-field-internal {
|
1677
|
+
padding: 0;
|
1678
|
+
width: 100%;
|
1679
|
+
height: 100%;
|
1680
|
+
}
|
1681
|
+
|
1682
|
+
vaadin-checkbox::part(checkbox) {
|
1683
|
+
margin: 0;
|
1684
|
+
}
|
1685
|
+
|
1686
|
+
vaadin-checkbox::part(checkbox)::after {
|
1687
|
+
top: 0;
|
1688
|
+
left: 0;
|
1689
|
+
}
|
1690
|
+
`,
|
1691
|
+
excludeAttrsSync: ['label', 'tabindex'],
|
1706
1692
|
componentName: componentName$u,
|
1707
1693
|
})
|
1708
1694
|
);
|
@@ -1718,19 +1704,17 @@ const {
|
|
1718
1704
|
component,
|
1719
1705
|
checkboxElement: track,
|
1720
1706
|
checkboxSurface: knob,
|
1721
|
-
|
1722
|
-
label: label$9,
|
1707
|
+
checkboxLabel,
|
1723
1708
|
requiredIndicator: requiredIndicator$9,
|
1724
1709
|
helperText: helperText$7,
|
1725
1710
|
errorMessage: errorMessage$9,
|
1726
1711
|
} = {
|
1727
1712
|
host: { selector: () => ':host' },
|
1728
|
-
|
1729
|
-
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
1713
|
+
requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
|
1730
1714
|
component: { selector: 'vaadin-checkbox' },
|
1731
1715
|
checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
|
1732
1716
|
checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
|
1733
|
-
|
1717
|
+
checkboxLabel: { selector: 'vaadin-checkbox [slot="label"]:not(:empty)' },
|
1734
1718
|
helperText: { selector: '::part(helper-text)' },
|
1735
1719
|
errorMessage: { selector: '::part(error-message)' },
|
1736
1720
|
};
|
@@ -1739,8 +1723,18 @@ const SwitchToggleClass = compose(
|
|
1739
1723
|
createStyleMixin({
|
1740
1724
|
mappings: {
|
1741
1725
|
hostWidth: { ...host$d, property: 'width' },
|
1742
|
-
|
1743
|
-
|
1726
|
+
|
1727
|
+
fontSize: [component, checkboxLabel, checkboxLabel],
|
1728
|
+
fontFamily: [checkboxLabel, helperText$7, errorMessage$9],
|
1729
|
+
|
1730
|
+
labelTextColor: { ...checkboxLabel, property: 'color' },
|
1731
|
+
labelSpacing: { ...checkboxLabel, property: 'padding-left' },
|
1732
|
+
labelLineHeight: { ...checkboxLabel, property: 'line-height' },
|
1733
|
+
labelFontWeight: { ...checkboxLabel, property: 'font-weight' },
|
1734
|
+
labelRequiredIndicator: { ...requiredIndicator$9, property: 'content' },
|
1735
|
+
|
1736
|
+
errorMessageTextColor: { ...errorMessage$9, property: 'color' },
|
1737
|
+
|
1744
1738
|
trackBorderWidth: { ...track, property: 'border-width' },
|
1745
1739
|
trackBorderStyle: { ...track, property: 'border-style' },
|
1746
1740
|
trackBorderColor: { ...track, property: 'border-color' },
|
@@ -1763,25 +1757,6 @@ const SwitchToggleClass = compose(
|
|
1763
1757
|
knobTopOffset: { ...knob, property: 'top' },
|
1764
1758
|
knobLeftOffset: { ...knob, property: 'left' },
|
1765
1759
|
|
1766
|
-
labelSpacing: [
|
1767
|
-
{ ...label$9, property: 'padding-left' },
|
1768
|
-
{ ...checkboxHiddenLabel, property: 'padding-left' },
|
1769
|
-
],
|
1770
|
-
labelLineHeight: [
|
1771
|
-
{ ...label$9, property: 'line-height' },
|
1772
|
-
{ ...checkboxHiddenLabel, property: 'line-height' },
|
1773
|
-
],
|
1774
|
-
labelFontWeight: [
|
1775
|
-
{ ...label$9, property: 'font-weight' },
|
1776
|
-
{ ...checkboxHiddenLabel, property: 'font-weight' },
|
1777
|
-
],
|
1778
|
-
labelTextColor: [
|
1779
|
-
{ ...label$9, property: 'color' },
|
1780
|
-
{ ...requiredIndicator$9, property: 'color' },
|
1781
|
-
{ ...label$9, property: '-webkit-text-fill-color' },
|
1782
|
-
],
|
1783
|
-
labelRequiredIndicator: { ...requiredIndicator$9, property: 'content' },
|
1784
|
-
errorMessageTextColor: { ...errorMessage$9, property: 'color' },
|
1785
1760
|
inputOutlineWidth: { ...track, property: 'outline-width' },
|
1786
1761
|
inputOutlineOffset: { ...track, property: 'outline-offset' },
|
1787
1762
|
inputOutlineColor: { ...track, property: 'outline-color' },
|
@@ -1799,21 +1774,48 @@ const SwitchToggleClass = compose(
|
|
1799
1774
|
style: () => `
|
1800
1775
|
${commonStyles}
|
1801
1776
|
${useHostExternalPadding(SwitchToggleClass.cssVarList)}
|
1802
|
-
|
1803
|
-
|
1804
|
-
|
1805
|
-
|
1777
|
+
|
1778
|
+
:host {
|
1779
|
+
display: inline-flex;
|
1780
|
+
max-width: 100%;
|
1781
|
+
}
|
1782
|
+
|
1783
|
+
descope-boolean-field-internal {
|
1784
|
+
padding: 0;
|
1785
|
+
width: 100%;
|
1786
|
+
}
|
1787
|
+
|
1788
|
+
vaadin-text-field::part(input-field) {
|
1789
|
+
cursor: pointer;
|
1790
|
+
}
|
1791
|
+
|
1792
|
+
vaadin-checkbox {
|
1793
|
+
cursor: pointer;
|
1794
|
+
}
|
1795
|
+
|
1796
|
+
vaadin-checkbox [slot="label"]:not(:empty) {
|
1797
|
+
cursor: pointer;
|
1806
1798
|
}
|
1807
|
-
|
1799
|
+
|
1800
|
+
vaadin-checkbox::part(checkbox) {
|
1801
|
+
margin: 0;
|
1802
|
+
}
|
1803
|
+
|
1804
|
+
vaadin-checkbox::part(checkbox)::before {
|
1805
|
+
content: '';
|
1806
|
+
}
|
1807
|
+
|
1808
|
+
vaadin-checkbox[active]::part(checkbox) {
|
1808
1809
|
transform: none;
|
1809
1810
|
}
|
1810
|
-
|
1811
|
+
|
1812
|
+
vaadin-checkbox::part(checkbox)::after {
|
1811
1813
|
position: absolute;
|
1812
1814
|
opacity: 1;
|
1813
1815
|
content: '';
|
1814
1816
|
}
|
1815
1817
|
`,
|
1816
|
-
excludeAttrsSync: ['tabindex'],
|
1818
|
+
excludeAttrsSync: ['label', 'tabindex'],
|
1817
1819
|
componentName: componentName$t,
|
1818
1820
|
})
|
1819
1821
|
);
|
@@ -2570,6 +2572,7 @@ class PasscodeInternal extends BaseInputClass$4 {
|
|
2570
2572
|
input.addEventListener('change', (e) => {
|
2571
2573
|
if (currentInput !== e.target) {
|
2572
2574
|
this.parseInputValue(input);
|
2575
|
+
this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
|
2573
2576
|
}
|
2574
2577
|
});
|
2575
2578
|
|
@@ -2708,13 +2711,13 @@ const customMixin$4 = (superclass) =>
|
|
2708
2711
|
const template = document.createElement('template');
|
2709
2712
|
|
2710
2713
|
template.innerHTML = `
|
2711
|
-
|
2712
|
-
|
2713
|
-
|
2714
|
-
|
2715
|
-
|
2716
|
-
|
2717
|
-
|
2714
|
+
<${componentName$i}
|
2715
|
+
bordered="true"
|
2716
|
+
name="code"
|
2717
|
+
tabindex="-1"
|
2718
|
+
slot="input"
|
2719
|
+
><slot></slot></${componentName$i}>
|
2720
|
+
`;
|
2718
2721
|
|
2719
2722
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
2720
2723
|
|
@@ -6489,7 +6492,7 @@ const ButtonSelectionGroupClass = compose(
|
|
6489
6492
|
padding: 0;
|
6490
6493
|
width: 100%;
|
6491
6494
|
height: 100%;
|
6492
|
-
display:inline-block;
|
6495
|
+
display: inline-block;
|
6493
6496
|
min-height: initial;
|
6494
6497
|
}
|
6495
6498
|
|
@@ -7315,6 +7318,7 @@ var textArea$1 = /*#__PURE__*/Object.freeze({
|
|
7315
7318
|
});
|
7316
7319
|
|
7317
7320
|
const vars$j = CheckboxClass.cssVarList;
|
7321
|
+
const checkboxSize = '1.35em';
|
7318
7322
|
|
7319
7323
|
const checkbox = {
|
7320
7324
|
[vars$j.hostWidth]: refs.width,
|
@@ -7323,7 +7327,8 @@ const checkbox = {
|
|
7323
7327
|
[vars$j.labelTextColor]: refs.labelTextColor,
|
7324
7328
|
[vars$j.labelRequiredIndicator]: refs.requiredIndicator,
|
7325
7329
|
[vars$j.labelFontWeight]: '400',
|
7326
|
-
[vars$j.
|
7330
|
+
[vars$j.labelLineHeight]: checkboxSize,
|
7331
|
+
[vars$j.labelSpacing]: '1em',
|
7327
7332
|
[vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
|
7328
7333
|
[vars$j.inputOutlineWidth]: refs.outlineWidth,
|
7329
7334
|
[vars$j.inputOutlineOffset]: refs.outlineOffset,
|
@@ -7334,7 +7339,7 @@ const checkbox = {
|
|
7334
7339
|
[vars$j.inputBorderWidth]: refs.borderWidth,
|
7335
7340
|
[vars$j.inputBorderStyle]: refs.borderStyle,
|
7336
7341
|
[vars$j.inputBackgroundColor]: refs.backgroundColor,
|
7337
|
-
[vars$j.inputSize]:
|
7342
|
+
[vars$j.inputSize]: checkboxSize,
|
7338
7343
|
|
7339
7344
|
_checked: {
|
7340
7345
|
[vars$j.inputValueTextColor]: refs.valueTextColor,
|
@@ -7358,6 +7363,7 @@ const globalRefs$9 = getThemeRefs(globals);
|
|
7358
7363
|
const vars$i = SwitchToggleClass.cssVarList;
|
7359
7364
|
|
7360
7365
|
const switchToggle = {
|
7366
|
+
[vars$i.hostWidth]: refs.width,
|
7361
7367
|
[vars$i.fontSize]: refs.fontSize,
|
7362
7368
|
[vars$i.fontFamily]: refs.fontFamily,
|
7363
7369
|
|
@@ -7383,13 +7389,11 @@ const switchToggle = {
|
|
7383
7389
|
|
7384
7390
|
[vars$i.labelTextColor]: refs.labelTextColor,
|
7385
7391
|
[vars$i.labelFontWeight]: '400',
|
7386
|
-
[vars$i.labelLineHeight]:
|
7387
|
-
[vars$i.labelSpacing]: '
|
7392
|
+
[vars$i.labelLineHeight]: '1.35em',
|
7393
|
+
[vars$i.labelSpacing]: '1em',
|
7388
7394
|
[vars$i.labelRequiredIndicator]: refs.requiredIndicator,
|
7389
7395
|
[vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
|
7390
7396
|
|
7391
|
-
[vars$i.hostWidth]: refs.width,
|
7392
|
-
|
7393
7397
|
_checked: {
|
7394
7398
|
[vars$i.trackBorderColor]: refs.borderColor,
|
7395
7399
|
[vars$i.trackBackgroundColor]: refs.backgroundColor,
|
@@ -7567,7 +7571,7 @@ const globalRefs$7 = getThemeRefs(globals);
|
|
7567
7571
|
const vars$e = TextClass.cssVarList;
|
7568
7572
|
|
7569
7573
|
const text = {
|
7570
|
-
[vars$e.textLineHeight]: '
|
7574
|
+
[vars$e.textLineHeight]: '1.35em',
|
7571
7575
|
[vars$e.textAlign]: 'left',
|
7572
7576
|
[vars$e.textColor]: globalRefs$7.colors.surface.dark,
|
7573
7577
|
variant: {
|