@descope/web-components-ui 1.0.242 → 1.0.244

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/dist/cjs/index.cjs.js +74 -53
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +113 -66
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/umd/descope-button-selection-group-descope-button-selection-group-internal-index-js.js +1 -1
  6. package/dist/umd/descope-button-selection-group-index-js.js +1 -1
  7. package/dist/umd/descope-grid-descope-grid-custom-column-index-js.js +1 -1
  8. package/dist/umd/descope-grid-descope-grid-selection-column-index-js.js +1 -1
  9. package/dist/umd/descope-grid-index-js.js +1 -1
  10. package/dist/umd/descope-loader-radial-index-js.js +1 -1
  11. package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +1 -1
  12. package/dist/umd/descope-passcode-index-js.js +1 -1
  13. package/dist/umd/index.js +1 -1
  14. package/package.json +1 -1
  15. package/src/components/descope-button-selection-group/descope-button-selection-group-internal/index.js +0 -1
  16. package/src/components/descope-button-selection-group/index.js +1 -0
  17. package/src/components/descope-grid/descope-grid-custom-column/GridCustomColumnClass.js +1 -1
  18. package/src/components/descope-grid/descope-grid-selection-column/GridSelectionColumnClass.js +2 -1
  19. package/src/components/descope-passcode/PasscodeClass.js +9 -1
  20. package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js +26 -2
  21. package/src/components/descope-passcode/index.js +1 -0
  22. package/src/index.cjs.js +1 -0
  23. package/src/index.js +1 -1
  24. package/src/theme/components/inputWrapper.js +2 -0
  25. package/src/theme/components/passcode.js +11 -0
@@ -2902,6 +2902,8 @@ const [theme$1, refs, vars$u] = createHelperVars(
2902
2902
 
2903
2903
  direction: globalRefs$h.direction,
2904
2904
 
2905
+ overlayOpacity: '0.3',
2906
+
2905
2907
  size: {
2906
2908
  xs: { fontSize: '12px', chipFontSize: '10px' },
2907
2909
  sm: { fontSize: '14px', chipFontSize: '12px' },
@@ -4568,7 +4570,53 @@ const componentName$m = getComponentName('passcode-internal');
4568
4570
 
4569
4571
  createBaseInputClass({ componentName: componentName$m, baseSelector: 'div' });
4570
4572
 
4571
- const componentName$l = getComponentName('passcode');
4573
+ const componentName$l = getComponentName('loader-radial');
4574
+
4575
+ class RawLoaderRadial extends createBaseClass({ componentName: componentName$l, baseSelector: ':host > div' }) {
4576
+ constructor() {
4577
+ super();
4578
+
4579
+ this.attachShadow({ mode: 'open' }).innerHTML = `
4580
+ <style>
4581
+ @keyframes spin {
4582
+ 0% { transform: rotate(0deg); }
4583
+ 100% { transform: rotate(360deg); }
4584
+ }
4585
+ :host {
4586
+ position: relative;
4587
+ display: inline-flex;
4588
+ }
4589
+ :host > div {
4590
+ animation-name: spin;
4591
+ }
4592
+ </style>
4593
+ <div></div>
4594
+ `;
4595
+ }
4596
+ }
4597
+
4598
+ const LoaderRadialClass = compose(
4599
+ createStyleMixin({
4600
+ mappings: {
4601
+ hostDisplay: { property: 'display' },
4602
+ spinnerSize: [{ property: 'width' }, { property: 'height' }],
4603
+ spinnerBorderWidth: { property: 'border-width' },
4604
+ spinnerBorderStyle: { property: 'border-style' },
4605
+ spinnerBorderRadius: { property: 'border-radius' },
4606
+ spinnerQuadrant1Color: { property: 'border-top-color' },
4607
+ spinnerQuadrant2Color: { property: 'border-bottom-color' },
4608
+ spinnerQuadrant3Color: { property: 'border-right-color' },
4609
+ spinnerQuadrant4Color: { property: 'border-left-color' },
4610
+ animationDuration: {},
4611
+ animationTimingFunction: {},
4612
+ animationIterationCount: {},
4613
+ },
4614
+ }),
4615
+ draggableMixin,
4616
+ componentNameValidationMixin
4617
+ )(RawLoaderRadial);
4618
+
4619
+ const componentName$k = getComponentName('passcode');
4572
4620
 
4573
4621
  const observedAttributes$3 = ['digits'];
4574
4622
 
@@ -4599,7 +4647,7 @@ const customMixin$5 = (superclass) =>
4599
4647
 
4600
4648
  this.inputElement = this.shadowRoot.querySelector(componentName$m);
4601
4649
 
4602
- forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
4650
+ forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
4603
4651
  }
4604
4652
 
4605
4653
  attributeChangedCallback(attrName, oldValue, newValue) {
@@ -4630,6 +4678,7 @@ const {
4630
4678
  };
4631
4679
 
4632
4680
  const textVars$2 = TextFieldClass.cssVarList;
4681
+ const loaderVars = LoaderRadialClass.cssVarList;
4633
4682
 
4634
4683
  const PasscodeClass = compose(
4635
4684
  createStyleMixin({
@@ -4660,6 +4709,8 @@ const PasscodeClass = compose(
4660
4709
  digitOutlineWidth: { ...digitField, property: textVars$2.inputOutlineWidth },
4661
4710
 
4662
4711
  focusedDigitFieldOutlineColor: { ...focusedDigitField, property: textVars$2.inputOutlineColor },
4712
+ overlayOpacity: { ...internalWrapper$1, property: 'opacity' },
4713
+ spinnerSize: { selector: LoaderRadialClass.componentName, property: loaderVars.spinnerSize },
4663
4714
  },
4664
4715
  }),
4665
4716
  draggableMixin,
@@ -4684,6 +4735,10 @@ const PasscodeClass = compose(
4684
4735
  background-color: transparent;
4685
4736
  }
4686
4737
 
4738
+ :host([loading="true"]) descope-passcode-internal .loader-container {
4739
+ display: block;
4740
+ }
4741
+
4687
4742
  descope-passcode-internal {
4688
4743
  -webkit-mask-image: none;
4689
4744
  padding: 0;
@@ -4737,7 +4792,7 @@ const PasscodeClass = compose(
4737
4792
  ${resetInputCursor('vaadin-text-field')}
4738
4793
  `,
4739
4794
  excludeAttrsSync: ['tabindex'],
4740
- componentName: componentName$l,
4795
+ componentName: componentName$k,
4741
4796
  })
4742
4797
  );
4743
4798
 
@@ -4760,9 +4815,20 @@ const passcode = {
4760
4815
  [vars$g.focusedDigitFieldOutlineColor]: refs.outlineColor,
4761
4816
  [vars$g.digitSize]: refs.inputHeight,
4762
4817
 
4818
+ size: {
4819
+ xs: { [vars$g.spinnerSize]: '15px' },
4820
+ sm: { [vars$g.spinnerSize]: '20px' },
4821
+ md: { [vars$g.spinnerSize]: '20px' },
4822
+ lg: { [vars$g.spinnerSize]: '20px' },
4823
+ },
4824
+
4763
4825
  _hideCursor: {
4764
4826
  [vars$g.digitCaretTextColor]: 'transparent',
4765
4827
  },
4828
+
4829
+ _loading: {
4830
+ [vars$g.overlayOpacity]: refs.overlayOpacity,
4831
+ },
4766
4832
  };
4767
4833
 
4768
4834
  var passcode$1 = /*#__PURE__*/Object.freeze({
@@ -4771,11 +4837,11 @@ var passcode$1 = /*#__PURE__*/Object.freeze({
4771
4837
  vars: vars$g
4772
4838
  });
4773
4839
 
4774
- const componentName$k = getComponentName('loader-linear');
4840
+ const componentName$j = getComponentName('loader-linear');
4775
4841
 
4776
- class RawLoaderLinear extends createBaseClass({ componentName: componentName$k, baseSelector: ':host > div' }) {
4842
+ class RawLoaderLinear extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > div' }) {
4777
4843
  static get componentName() {
4778
- return componentName$k;
4844
+ return componentName$j;
4779
4845
  }
4780
4846
 
4781
4847
  constructor() {
@@ -4881,52 +4947,6 @@ var loaderLinear$1 = /*#__PURE__*/Object.freeze({
4881
4947
  vars: vars$f
4882
4948
  });
4883
4949
 
4884
- const componentName$j = getComponentName('loader-radial');
4885
-
4886
- class RawLoaderRadial extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > div' }) {
4887
- constructor() {
4888
- super();
4889
-
4890
- this.attachShadow({ mode: 'open' }).innerHTML = `
4891
- <style>
4892
- @keyframes spin {
4893
- 0% { transform: rotate(0deg); }
4894
- 100% { transform: rotate(360deg); }
4895
- }
4896
- :host {
4897
- position: relative;
4898
- display: inline-flex;
4899
- }
4900
- :host > div {
4901
- animation-name: spin;
4902
- }
4903
- </style>
4904
- <div></div>
4905
- `;
4906
- }
4907
- }
4908
-
4909
- const LoaderRadialClass = compose(
4910
- createStyleMixin({
4911
- mappings: {
4912
- hostDisplay: { property: 'display' },
4913
- spinnerSize: [{ property: 'width' }, { property: 'height' }],
4914
- spinnerBorderWidth: { property: 'border-width' },
4915
- spinnerBorderStyle: { property: 'border-style' },
4916
- spinnerBorderRadius: { property: 'border-radius' },
4917
- spinnerQuadrant1Color: { property: 'border-top-color' },
4918
- spinnerQuadrant2Color: { property: 'border-bottom-color' },
4919
- spinnerQuadrant3Color: { property: 'border-right-color' },
4920
- spinnerQuadrant4Color: { property: 'border-left-color' },
4921
- animationDuration: {},
4922
- animationTimingFunction: {},
4923
- animationIterationCount: {},
4924
- },
4925
- }),
4926
- draggableMixin,
4927
- componentNameValidationMixin
4928
- )(RawLoaderRadial);
4929
-
4930
4950
  const globalRefs$8 = getThemeRefs(globals);
4931
4951
  const compVars$1 = LoaderRadialClass.cssVarList;
4932
4952
 
@@ -4942,7 +4962,7 @@ const [helperTheme, helperRefs, helperVars] = createHelperVars(
4942
4962
  },
4943
4963
  },
4944
4964
  },
4945
- componentName$j
4965
+ componentName$l
4946
4966
  );
4947
4967
 
4948
4968
  const loaderRadial = {
@@ -9634,6 +9654,7 @@ exports.CheckboxClass = CheckboxClass;
9634
9654
  exports.ContainerClass = ContainerClass;
9635
9655
  exports.DividerClass = DividerClass;
9636
9656
  exports.EmailFieldClass = EmailFieldClass;
9657
+ exports.GridClass = GridClass;
9637
9658
  exports.ImageClass = ImageClass;
9638
9659
  exports.LinkClass = LinkClass;
9639
9660
  exports.LoaderLinearClass = LoaderLinearClass;