@descope/web-components-ui 1.0.71 → 1.0.73

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 (51) hide show
  1. package/dist/index.esm.js +233 -186
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/umd/744.js +1 -0
  4. package/dist/umd/descope-button-index-js.js +1 -1
  5. package/dist/umd/descope-checkbox-index-js.js +1 -1
  6. package/dist/umd/descope-combo-box-index-js.js +1 -1
  7. package/dist/umd/descope-container-index-js.js +1 -1
  8. package/dist/umd/descope-date-picker-index-js.js +1 -1
  9. package/dist/umd/descope-divider-index-js.js +1 -1
  10. package/dist/umd/descope-email-field-index-js.js +1 -1
  11. package/dist/umd/descope-image-index-js.js +1 -0
  12. package/dist/umd/descope-link-index-js.js +1 -1
  13. package/dist/umd/descope-loader-linear-index-js.js +1 -1
  14. package/dist/umd/descope-loader-radial-index-js.js +1 -1
  15. package/dist/umd/descope-logo-index-js.js +1 -1
  16. package/dist/umd/descope-number-field-index-js.js +1 -1
  17. package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +1 -1
  18. package/dist/umd/descope-passcode-index-js.js +1 -1
  19. package/dist/umd/descope-password-field-index-js.js +1 -1
  20. package/dist/umd/descope-switch-toggle-index-js.js +1 -1
  21. package/dist/umd/descope-text-area-index-js.js +1 -1
  22. package/dist/umd/descope-text-field-index-js.js +1 -1
  23. package/dist/umd/descope-text-index-js.js +1 -1
  24. package/dist/umd/index.js +1 -1
  25. package/package.json +1 -1
  26. package/src/baseClasses/createBaseClass.js +11 -11
  27. package/src/baseClasses/createBaseInputClass.js +2 -1
  28. package/src/components/descope-combo-box/ComboBox.js +2 -2
  29. package/src/components/descope-image/Image.js +53 -0
  30. package/src/components/descope-image/index.js +5 -0
  31. package/src/components/descope-logo/Logo.js +3 -0
  32. package/src/components/descope-passcode/Passcode.js +2 -6
  33. package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js +13 -12
  34. package/src/helpers/mixinsHelpers.js +1 -1
  35. package/src/index.js +1 -0
  36. package/src/mixins/changeMixin.js +5 -5
  37. package/src/mixins/componentNameValidationMixin.js +2 -2
  38. package/src/mixins/createProxy.js +8 -8
  39. package/src/mixins/createStyleMixin/index.js +2 -2
  40. package/src/mixins/focusMixin.js +6 -8
  41. package/src/mixins/hoverableMixin.js +14 -17
  42. package/src/mixins/index.js +2 -0
  43. package/src/mixins/inputValidationMixin.js +5 -7
  44. package/src/mixins/lifecycleEventsMixin.js +21 -0
  45. package/src/mixins/portalMixin.js +2 -2
  46. package/src/mixins/proxyInputMixin.js +11 -11
  47. package/src/mixins/readOnlyMixin.js +18 -0
  48. package/src/theme/components/container.js +1 -1
  49. package/src/theme/components/image.js +7 -0
  50. package/src/theme/components/index.js +3 -1
  51. package/dist/umd/809.js +0 -1
package/dist/index.esm.js CHANGED
@@ -364,8 +364,8 @@ const createStyleMixin =
364
364
  (this.#rootElement.classList || this.#rootElement.host.classList).add(className);
365
365
  }
366
366
 
367
- connectedCallback() {
368
- super.connectedCallback?.();
367
+ init() {
368
+ super.init?.();
369
369
  if (this.shadowRoot.isConnected) {
370
370
 
371
371
  this.#addClassName(superclass.componentName);
@@ -420,41 +420,6 @@ const draggableMixin = (superclass) =>
420
420
  }
421
421
  };
422
422
 
423
- // create a dispatch event function that also calls to the onevent function in case it's set
424
- // usage example:
425
- // #dispatchSomething = createDispatchEvent.bind(this, 'something' { ...options })
426
- // this will dispatch a new event when called, but also call to "onsomething"
427
- function createDispatchEvent(eventName, options = {}) {
428
- const event = new Event(eventName, options);
429
-
430
- this[`on${eventName}`]?.(event); // in case we got an event callback as property
431
- this.dispatchEvent(event);
432
- }
433
-
434
- // add an event listener that is automatically removed on disconnect
435
- // usage example:
436
- // createEventListener.call(this,'change', this.onChange, { element? , ...options })
437
- function createEventListener(event, callback, { element, ...options } = {}) {
438
- const timerId = setTimeout(() => console.warn(this.localName, 'is not using "createBaseClass", events will not be removed automatically on disconnect'), 2000);
439
-
440
- this.addEventListener('connected', () => {
441
- clearTimeout(timerId);
442
- }, { once: true });
443
-
444
- const targetEle = element || this;
445
- const boundCallback = callback.bind(this);
446
-
447
- const onDisconnect = () => {
448
- targetEle.removeEventListener(event, boundCallback);
449
- };
450
-
451
- this.addEventListener('disconnected', onDisconnect, { once: true });
452
-
453
- targetEle.addEventListener(event, boundCallback, options);
454
-
455
- return onDisconnect
456
- }
457
-
458
423
  const createBaseClass = ({ componentName, baseSelector = '' }) => {
459
424
  class DescopeBaseClass extends HTMLElement {
460
425
  static get componentName() {
@@ -463,8 +428,7 @@ const createBaseClass = ({ componentName, baseSelector = '' }) => {
463
428
 
464
429
  #baseElement;
465
430
 
466
- #dispatchConnected = createDispatchEvent.bind(this, 'connected')
467
- #dispatchDisconnected = createDispatchEvent.bind(this, 'disconnected')
431
+ #isInit = true;
468
432
 
469
433
  // base selector is the selector for the component wrapper,
470
434
  // it's the highest element that is relevant for the layout
@@ -478,6 +442,9 @@ const createBaseClass = ({ componentName, baseSelector = '' }) => {
478
442
  this.rootElement.querySelector(this.baseSelector) :
479
443
  this;
480
444
 
445
+ if(!this.#baseElement) {
446
+ console.warn('missing base element for component', this.localName);
447
+ }
481
448
  return this.#baseElement
482
449
  }
483
450
 
@@ -490,14 +457,13 @@ const createBaseClass = ({ componentName, baseSelector = '' }) => {
490
457
  connectedCallback() {
491
458
  super.connectedCallback?.();
492
459
 
493
- // we are waiting for all components to listen before dispatching
494
- setTimeout(this.#dispatchConnected);
495
- }
496
-
497
- disconnectedCallback() {
498
- super.disconnectedCallback?.();
499
-
500
- this.#dispatchDisconnected();
460
+ if (this.rootElement.isConnected) {
461
+ // the init function is running once, on the first time the component is connected
462
+ if (this.#isInit) {
463
+ this.#isInit = false;
464
+ this.init?.();
465
+ }
466
+ }
501
467
  }
502
468
  }
503
469
 
@@ -508,6 +474,17 @@ const createBaseClass = ({ componentName, baseSelector = '' }) => {
508
474
  )(DescopeBaseClass)
509
475
  };
510
476
 
477
+ // create a dispatch event function that also calls to the onevent function in case it's set
478
+ // usage example:
479
+ // #dispatchSomething = createDispatchEvent.bind(this, 'something' { ...options })
480
+ // this will dispatch a new event when called, but also call to "onsomething"
481
+ function createDispatchEvent(eventName, options = {}) {
482
+ const event = new Event(eventName, options);
483
+
484
+ this[`on${eventName}`]?.(event); // in case we got an event callback as property
485
+ this.dispatchEvent(event);
486
+ }
487
+
511
488
  const createProxy = ({
512
489
  componentName,
513
490
  wrappedEleName,
@@ -534,18 +511,18 @@ const createProxy = ({
534
511
 
535
512
  focus = () => this.baseElement.focus()
536
513
 
537
- connectedCallback() {
538
- super.connectedCallback?.();
514
+ init() {
515
+ super.init?.();
539
516
 
540
- createEventListener.call(this, 'blur', (e) => {
517
+ this.baseElement.addEventListener('blur', (e) => {
541
518
  this.#dispatchBlur();
542
- }, { element: this.baseElement });
519
+ });
543
520
 
544
- createEventListener.call(this, 'focus', (e) => {
521
+ this.baseElement.addEventListener('focus', (e) => {
545
522
  this.#dispatchFocus();
546
- }, { element: this.baseElement });
523
+ });
547
524
 
548
- createEventListener.call(this, 'focus', (e) => {
525
+ this.addEventListener('focus', (e) => {
549
526
  // if we got a focus event we want to focus the proxy element
550
527
  if (e.isTrusted) {
551
528
  this.focus();
@@ -579,7 +556,7 @@ const createProxy = ({
579
556
  return ProxyClass;
580
557
  };
581
558
 
582
- const observedAttributes$1 = [
559
+ const observedAttributes$2 = [
583
560
  'required',
584
561
  'pattern',
585
562
  ];
@@ -592,7 +569,7 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
592
569
  static get observedAttributes() {
593
570
  return [
594
571
  ...superclass.observedAttributes || [],
595
- ...observedAttributes$1
572
+ ...observedAttributes$2
596
573
  ];
597
574
  }
598
575
 
@@ -680,16 +657,16 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
680
657
  attributeChangedCallback(attrName, oldValue, newValue) {
681
658
  super.attributeChangedCallback?.(attrName, oldValue, newValue);
682
659
 
683
- if (observedAttributes$1.includes(attrName)) {
660
+ if (observedAttributes$2.includes(attrName)) {
684
661
  this.#setValidity();
685
662
  }
686
663
  }
687
664
 
688
- connectedCallback() {
689
- super.connectedCallback?.();
690
- createEventListener.call(this, 'change', this.#setValidity);
691
- createEventListener.call(this, 'invalid', (e) => e.stopPropagation());
692
- createEventListener.call(this, 'input', this.#setValidity);
665
+ init() {
666
+ super.init?.();
667
+ this.addEventListener('change', this.#setValidity);
668
+ this.addEventListener('invalid', (e) => e.stopPropagation());
669
+ this.addEventListener('input', this.#setValidity);
693
670
 
694
671
  this.#setValidity();
695
672
  }
@@ -724,7 +701,7 @@ const getNestedInput = (ele) => {
724
701
  };
725
702
 
726
703
  const proxyInputMixin = (superclass) =>
727
- class proxyInputMixinClass extends inputValidationMixin(superclass) {
704
+ class ProxyInputMixinClass extends inputValidationMixin(superclass) {
728
705
  static get observedAttributes() {
729
706
  return [...superclass.observedAttributes || [], ...errorAttrs];
730
707
  }
@@ -783,10 +760,10 @@ const proxyInputMixin = (superclass) =>
783
760
  this.setAttribute('error-message', this.validationMessage);
784
761
  }
785
762
 
786
- connectedCallback() {
787
- super.connectedCallback?.();
763
+ init() {
764
+ super.init?.();
788
765
 
789
- createEventListener.call(this, 'input', (e) => {
766
+ this.inputElement.addEventListener('input', (e) => {
790
767
  if (!this.inputElement.checkValidity()) {
791
768
  this.inputElement.setCustomValidity('');
792
769
  // after updating the input validity we want to trigger set validity on the wrapping element
@@ -800,20 +777,20 @@ const proxyInputMixin = (superclass) =>
800
777
 
801
778
  this.#handleErrorMessage();
802
779
  }
803
- }, { element: this.inputElement });
780
+ });
804
781
 
805
- createEventListener.call(this, 'change', () => {
782
+ this.baseElement.addEventListener('change', () => {
806
783
  this.#dispatchChange();
807
- }, { element: this.baseElement });
784
+ });
808
785
 
809
- createEventListener.call(this, 'blur', () => {
786
+ this.addEventListener('blur', () => {
810
787
  if (!this.checkValidity()) {
811
788
  this.setAttribute('invalid', 'true');
812
789
  this.#handleErrorMessage();
813
790
  }
814
791
  });
815
792
 
816
- createEventListener.call(this, 'focus', (e) => {
793
+ this.addEventListener('focus', (e) => {
817
794
  // when clicking on the form submit button and the input is invalid
818
795
  // we want it to appear as invalid
819
796
  if (e.relatedTarget?.form === this.form) {
@@ -827,7 +804,7 @@ const proxyInputMixin = (superclass) =>
827
804
  }
828
805
  });
829
806
 
830
- createEventListener.call(this, 'invalid', this.#handleErrorMessage);
807
+ this.addEventListener('invalid', this.#handleErrorMessage);
831
808
 
832
809
  this.handleInternalInputErrorMessage();
833
810
 
@@ -862,48 +839,47 @@ const componentNameValidationMixin = (superclass) =>
862
839
  }
863
840
  }
864
841
 
865
- connectedCallback() {
866
- super.connectedCallback?.();
842
+ init() {
843
+ super.init?.();
867
844
  this.#checkComponentName();
868
845
  }
869
846
  };
870
847
 
871
- const hoverableMixin =
872
- (superclass) =>
873
- class HoverableMixinClass extends superclass {
874
- connectedCallback() {
875
- super.connectedCallback?.();
876
-
877
- createEventListener.call(this, 'mouseover', (e) => {
878
- this.setAttribute('hover', 'true');
879
- e.target.addEventListener(
880
- 'mouseleave',
881
- () => this.removeAttribute('hover'),
882
- { once: true }
883
- );
884
- }, { element: this.baseElement });
885
- }
886
- };
848
+ const hoverableMixin = (superclass) =>
849
+ class HoverableMixinClass extends superclass {
850
+ init() {
851
+ super.init?.();
852
+
853
+ this.baseElement.addEventListener('mouseover', (e) => {
854
+ this.setAttribute('hover', 'true');
855
+ e.target.addEventListener(
856
+ 'mouseleave',
857
+ () => this.removeAttribute('hover'),
858
+ { once: true }
859
+ );
860
+ });
861
+ }
862
+ };
887
863
 
888
864
  const focusMixin = (superclass) => class FocusMixinClass extends superclass {
889
865
  // we want to block all native events,
890
866
  // so the input can control when to dispatch it based on its internal behavior
891
- connectedCallback() {
892
- super.connectedCallback?.();
867
+ init() {
868
+ super.init?.();
893
869
 
894
- createEventListener.call(this, 'blur', (e) => {
870
+ this.addEventListener('blur', (e) => {
895
871
  e.isTrusted && e.stopImmediatePropagation();
896
872
  });
897
873
 
898
- createEventListener.call(this, 'focus', (e) => {
874
+ this.addEventListener('focus', (e) => {
899
875
  e.isTrusted && e.stopImmediatePropagation();
900
876
  });
901
877
 
902
- createEventListener.call(this, 'focusout', (e) => {
878
+ this.addEventListener('focusout', (e) => {
903
879
  e.isTrusted && e.stopImmediatePropagation();
904
880
  });
905
881
 
906
- createEventListener.call(this, 'focusin', (e) => {
882
+ this.addEventListener('focusin', (e) => {
907
883
  e.isTrusted && e.stopImmediatePropagation();
908
884
  });
909
885
  }
@@ -961,8 +937,8 @@ const portalMixin = ({ name, selector, mappings = {} }) => (superclass) => {
961
937
  this.#portalEle.onmouseleave = (e) => { e.target.removeAttribute('hover'); };
962
938
  }
963
939
 
964
- connectedCallback() {
965
- super.connectedCallback?.();
940
+ init() {
941
+ super.init?.();
966
942
  forwardAttrs(this, this.#portalEle, { excludeAttrs: ['hover'] });
967
943
 
968
944
  this.#handleHoverAttribute();
@@ -973,15 +949,15 @@ const portalMixin = ({ name, selector, mappings = {} }) => (superclass) => {
973
949
  const changeMixin = (superclass) => class ChangeMixinClass extends superclass {
974
950
  #dispatchChange = createDispatchEvent.bind(this, 'change')
975
951
 
976
- connectedCallback() {
977
- super.connectedCallback?.();
952
+ init() {
953
+ super.init?.();
978
954
  this.prevValue = this.value;
979
955
 
980
- createEventListener.call(this, 'change', (e) => {
956
+ this.addEventListener('change', (e) => {
981
957
  e.stopPropagation();
982
958
  });
983
959
 
984
- createEventListener.call(this, 'blur', () => {
960
+ this.addEventListener('blur', () => {
985
961
  if (this.value !== this.prevValue) {
986
962
  this.#dispatchChange();
987
963
  this.prevValue = this.value;
@@ -1002,7 +978,26 @@ const normalizeBooleanAttributesMixin = (superclass) => class NormalizeBooleanAt
1002
978
  }
1003
979
  };
1004
980
 
1005
- const componentName$i = getComponentName('button');
981
+ const readOnlyMixin = (superclass) => class ReadOnlyMixinClass extends superclass {
982
+ get isReadOnly() {
983
+ return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false'
984
+ }
985
+
986
+ init() {
987
+ ['focus', 'blur'].forEach(event => {
988
+ this.addEventListener(event, (e) => {
989
+ if (this.isReadOnly) {
990
+ e.stopImmediatePropagation();
991
+ e.preventDefault();
992
+ }
993
+ }, true);
994
+ });
995
+
996
+ super.init?.();
997
+ }
998
+ };
999
+
1000
+ const componentName$j = getComponentName('button');
1006
1001
 
1007
1002
  const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
1008
1003
  const resetStyles = `
@@ -1056,7 +1051,7 @@ const Button = compose(
1056
1051
  style: () =>
1057
1052
  `${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
1058
1053
  excludeAttrsSync: ['tabindex'],
1059
- componentName: componentName$i
1054
+ componentName: componentName$j
1060
1055
  })
1061
1056
  );
1062
1057
 
@@ -1093,9 +1088,9 @@ const loadingIndicatorStyles = `
1093
1088
  }
1094
1089
  `;
1095
1090
 
1096
- customElements.define(componentName$i, Button);
1091
+ customElements.define(componentName$j, Button);
1097
1092
 
1098
- const componentName$h = getComponentName('checkbox');
1093
+ const componentName$i = getComponentName('checkbox');
1099
1094
 
1100
1095
  const Checkbox = compose(
1101
1096
  createStyleMixin({
@@ -1121,17 +1116,17 @@ const Checkbox = compose(
1121
1116
  }
1122
1117
  `,
1123
1118
  excludeAttrsSync: ['tabindex'],
1124
- componentName: componentName$h
1119
+ componentName: componentName$i
1125
1120
  })
1126
1121
  );
1127
1122
 
1128
- customElements.define(componentName$h, Checkbox);
1123
+ customElements.define(componentName$i, Checkbox);
1129
1124
 
1130
- const componentName$g = getComponentName('loader-linear');
1125
+ const componentName$h = getComponentName('loader-linear');
1131
1126
 
1132
- class RawLoaderLinear extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > div' }) {
1127
+ class RawLoaderLinear extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > div' }) {
1133
1128
  static get componentName() {
1134
- return componentName$g;
1129
+ return componentName$h;
1135
1130
  }
1136
1131
  constructor() {
1137
1132
  super();
@@ -1189,11 +1184,11 @@ const LoaderLinear = compose(
1189
1184
  componentNameValidationMixin
1190
1185
  )(RawLoaderLinear);
1191
1186
 
1192
- customElements.define(componentName$g, LoaderLinear);
1187
+ customElements.define(componentName$h, LoaderLinear);
1193
1188
 
1194
- const componentName$f = getComponentName('loader-radial');
1189
+ const componentName$g = getComponentName('loader-radial');
1195
1190
 
1196
- class RawLoaderRadial extends createBaseClass({ componentName: componentName$f, baseSelector: ':host > div' }) {
1191
+ class RawLoaderRadial extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > div' }) {
1197
1192
  constructor() {
1198
1193
  super();
1199
1194
 
@@ -1239,11 +1234,11 @@ const LoaderRadial = compose(
1239
1234
  componentNameValidationMixin
1240
1235
  )(RawLoaderRadial);
1241
1236
 
1242
- customElements.define(componentName$f, LoaderRadial);
1237
+ customElements.define(componentName$g, LoaderRadial);
1243
1238
 
1244
- const componentName$e = getComponentName('container');
1239
+ const componentName$f = getComponentName('container');
1245
1240
 
1246
- class RawContainer extends createBaseClass({componentName: componentName$e, baseSelector: ':host > slot'}) {
1241
+ class RawContainer extends createBaseClass({componentName: componentName$f, baseSelector: ':host > slot'}) {
1247
1242
  constructor() {
1248
1243
  super();
1249
1244
 
@@ -1299,26 +1294,26 @@ const Container = compose(
1299
1294
  componentNameValidationMixin
1300
1295
  )(RawContainer);
1301
1296
 
1302
- customElements.define(componentName$e, Container);
1297
+ customElements.define(componentName$f, Container);
1303
1298
 
1304
- const componentName$d = getComponentName('date-picker');
1299
+ const componentName$e = getComponentName('date-picker');
1305
1300
 
1306
1301
  const DatePicker = compose(
1307
1302
  draggableMixin,
1308
1303
  componentNameValidationMixin
1309
1304
  )(
1310
1305
  createProxy({
1311
- componentName: componentName$d,
1306
+ componentName: componentName$e,
1312
1307
  slots: ['prefix', 'suffix'],
1313
1308
  wrappedEleName: 'vaadin-date-picker',
1314
1309
  style: ``
1315
1310
  })
1316
1311
  );
1317
1312
 
1318
- customElements.define(componentName$d, DatePicker);
1313
+ customElements.define(componentName$e, DatePicker);
1319
1314
 
1320
- const componentName$c = getComponentName('divider');
1321
- class RawDivider extends createBaseClass({ componentName: componentName$c, baseSelector: ':host > div' }) {
1315
+ const componentName$d = getComponentName('divider');
1316
+ class RawDivider extends createBaseClass({ componentName: componentName$d, baseSelector: ':host > div' }) {
1322
1317
  constructor() {
1323
1318
  super();
1324
1319
 
@@ -1396,9 +1391,9 @@ const Divider = compose(
1396
1391
  componentNameValidationMixin
1397
1392
  )(RawDivider);
1398
1393
 
1399
- const componentName$b = getComponentName('text');
1394
+ const componentName$c = getComponentName('text');
1400
1395
 
1401
- class RawText extends createBaseClass({ componentName: componentName$b, baseSelector: ':host > slot' }) {
1396
+ class RawText extends createBaseClass({ componentName: componentName$c, baseSelector: ':host > slot' }) {
1402
1397
  constructor() {
1403
1398
  super();
1404
1399
 
@@ -1440,9 +1435,9 @@ const Text = compose(
1440
1435
  componentNameValidationMixin
1441
1436
  )(RawText);
1442
1437
 
1443
- customElements.define(componentName$b, Text);
1438
+ customElements.define(componentName$c, Text);
1444
1439
 
1445
- customElements.define(componentName$c, Divider);
1440
+ customElements.define(componentName$d, Divider);
1446
1441
 
1447
1442
  const selectors$3 = {
1448
1443
  label: '::part(label)',
@@ -1479,7 +1474,7 @@ var textFieldMappings = {
1479
1474
  placeholderColor: { selector: selectors$3.placeholder, property: 'color' }
1480
1475
  };
1481
1476
 
1482
- const componentName$a = getComponentName('email-field');
1477
+ const componentName$b = getComponentName('email-field');
1483
1478
 
1484
1479
  let overrides$5 = ``;
1485
1480
 
@@ -1498,7 +1493,7 @@ const EmailField = compose(
1498
1493
  wrappedEleName: 'vaadin-email-field',
1499
1494
  style: () => overrides$5,
1500
1495
  excludeAttrsSync: ['tabindex'],
1501
- componentName: componentName$a
1496
+ componentName: componentName$b
1502
1497
  })
1503
1498
  );
1504
1499
 
@@ -1542,10 +1537,10 @@ overrides$5 = `
1542
1537
  }
1543
1538
  `;
1544
1539
 
1545
- customElements.define(componentName$a, EmailField);
1540
+ customElements.define(componentName$b, EmailField);
1546
1541
 
1547
- const componentName$9 = getComponentName('link');
1548
- class RawLink extends createBaseClass({ componentName: componentName$9, baseSelector: ':host a' }) {
1542
+ const componentName$a = getComponentName('link');
1543
+ class RawLink extends createBaseClass({ componentName: componentName$a, baseSelector: ':host a' }) {
1549
1544
  constructor() {
1550
1545
  super();
1551
1546
  document.createElement('template');
@@ -1606,14 +1601,14 @@ const Link = compose(
1606
1601
  componentNameValidationMixin
1607
1602
  )(RawLink);
1608
1603
 
1609
- customElements.define(componentName$9, Link);
1604
+ customElements.define(componentName$a, Link);
1610
1605
 
1611
- const componentName$8 = getComponentName('logo');
1606
+ const componentName$9 = getComponentName('logo');
1612
1607
 
1613
1608
  let style;
1614
1609
  const getStyle = () => style;
1615
1610
 
1616
- class RawLogo extends createBaseClass({ componentName: componentName$8, baseSelector: ':host > div' }) {
1611
+ class RawLogo extends createBaseClass({ componentName: componentName$9, baseSelector: ':host > div' }) {
1617
1612
  constructor() {
1618
1613
  super();
1619
1614
 
@@ -1646,11 +1641,14 @@ style = `
1646
1641
  display: inline-block;
1647
1642
  content: var(${Logo.cssVarList.url}, var(${Logo.cssVarList.fallbackUrl}));
1648
1643
  }
1644
+ :host[draggable="true"] > div {
1645
+ pointer-events: none
1646
+ }
1649
1647
  `;
1650
1648
 
1651
- customElements.define(componentName$8, Logo);
1649
+ customElements.define(componentName$9, Logo);
1652
1650
 
1653
- const componentName$7 = getComponentName('number-field');
1651
+ const componentName$8 = getComponentName('number-field');
1654
1652
 
1655
1653
  let overrides$4 = ``;
1656
1654
 
@@ -1669,7 +1667,7 @@ const NumberField = compose(
1669
1667
  wrappedEleName: 'vaadin-number-field',
1670
1668
  style: () => overrides$4,
1671
1669
  excludeAttrsSync: ['tabindex'],
1672
- componentName: componentName$7
1670
+ componentName: componentName$8
1673
1671
  })
1674
1672
  );
1675
1673
 
@@ -1713,12 +1711,13 @@ overrides$4 = `
1713
1711
  }
1714
1712
  `;
1715
1713
 
1716
- customElements.define(componentName$7, NumberField);
1714
+ customElements.define(componentName$8, NumberField);
1717
1715
 
1718
1716
  const createBaseInputClass = (...args) => compose(
1719
1717
  focusMixin,
1720
1718
  inputValidationMixin,
1721
1719
  changeMixin,
1720
+ readOnlyMixin
1722
1721
  )(createBaseClass(...args));
1723
1722
 
1724
1723
  const focusElement = (ele) => {
@@ -1735,24 +1734,25 @@ const getSanitizedCharacters = (str) => {
1735
1734
  return [...pin]; // creating array of chars
1736
1735
  };
1737
1736
 
1738
- const componentName$6 = getComponentName('passcode-internal');
1737
+ const componentName$7 = getComponentName('passcode-internal');
1739
1738
 
1740
- const observedAttributes = [
1739
+ const observedAttributes$1 = [
1741
1740
  'disabled',
1742
1741
  'bordered',
1743
1742
  'size',
1744
- 'invalid'
1743
+ 'invalid',
1744
+ 'readonly'
1745
1745
  ];
1746
1746
 
1747
- const BaseInputClass = createBaseInputClass({ componentName: componentName$6, baseSelector: ':host > div' });
1747
+ const BaseInputClass = createBaseInputClass({ componentName: componentName$7, baseSelector: 'div' });
1748
1748
 
1749
1749
  class PasscodeInternal extends BaseInputClass {
1750
1750
  static get observedAttributes() {
1751
- return observedAttributes.concat(BaseInputClass.observedAttributes || []);
1751
+ return observedAttributes$1.concat(BaseInputClass.observedAttributes || []);
1752
1752
  }
1753
1753
 
1754
1754
  static get componentName() {
1755
- return componentName$6;
1755
+ return componentName$7;
1756
1756
  }
1757
1757
 
1758
1758
  #dispatchBlur = createDispatchEvent.bind(this, 'blur')
@@ -1812,15 +1812,15 @@ class PasscodeInternal extends BaseInputClass {
1812
1812
  }
1813
1813
  };
1814
1814
 
1815
- connectedCallback() {
1815
+ init() {
1816
1816
  // we are adding listeners before calling to super because it's stopping the events
1817
- createEventListener.call(this, 'focus', (e) => {
1817
+ this.addEventListener('focus', (e) => {
1818
1818
  // we want to ignore focus events we are dispatching
1819
1819
  if (e.isTrusted)
1820
1820
  this.inputs[0].focus();
1821
1821
  });
1822
1822
 
1823
- super.connectedCallback?.();
1823
+ super.init?.();
1824
1824
 
1825
1825
  this.initInputs();
1826
1826
  }
@@ -1862,25 +1862,25 @@ class PasscodeInternal extends BaseInputClass {
1862
1862
  // in order to simulate blur on the input
1863
1863
  // we are checking if focus on one of the digits happened immediately after blur on another digit
1864
1864
  // if not, the component is no longer focused and we should simulate blur
1865
- createEventListener.call(this, 'blur', (e) => {
1865
+ input.addEventListener('blur', (e) => {
1866
1866
  e.stopImmediatePropagation();
1867
1867
 
1868
1868
  blurTimerId = setTimeout(() => {
1869
1869
  blurTimerId = null;
1870
1870
  this.#dispatchBlur();
1871
1871
  });
1872
- }, { element: input });
1872
+ });
1873
1873
 
1874
- createEventListener.call(this, 'focus', (e) => {
1874
+ input.addEventListener('focus', (e) => {
1875
1875
  e.stopImmediatePropagation();
1876
1876
 
1877
1877
  clearTimeout(blurTimerId);
1878
1878
  if (!blurTimerId) {
1879
1879
  this.#dispatchFocus();
1880
1880
  }
1881
- }, { element: input });
1881
+ });
1882
1882
 
1883
- createEventListener.call(this, 'input', (e) => {
1883
+ input.addEventListener('input', (e) => {
1884
1884
  const charArr = getSanitizedCharacters(input.value);
1885
1885
 
1886
1886
  if (!charArr.length) {
@@ -1893,7 +1893,7 @@ class PasscodeInternal extends BaseInputClass {
1893
1893
  if (prevVal === this.value) {
1894
1894
  e.stopImmediatePropagation();
1895
1895
  }
1896
- }, { element: input });
1896
+ });
1897
1897
 
1898
1898
  input.onkeydown = ({ key }) => {
1899
1899
  prevVal = this.value;
@@ -1919,7 +1919,7 @@ class PasscodeInternal extends BaseInputClass {
1919
1919
 
1920
1920
  // sync attributes to inputs
1921
1921
  if (oldValue !== newValue) {
1922
- if (observedAttributes.includes(attrName)) {
1922
+ if (observedAttributes$1.includes(attrName)) {
1923
1923
  this.inputs.forEach(
1924
1924
  (input) => newValue === null ?
1925
1925
  input.removeAttribute(attrName) :
@@ -1930,7 +1930,7 @@ class PasscodeInternal extends BaseInputClass {
1930
1930
  }
1931
1931
  }
1932
1932
 
1933
- const componentName$5 = getComponentName('text-field');
1933
+ const componentName$6 = getComponentName('text-field');
1934
1934
 
1935
1935
  let overrides$3 = ``;
1936
1936
 
@@ -1947,7 +1947,7 @@ const TextField = compose(
1947
1947
  wrappedEleName: 'vaadin-text-field',
1948
1948
  style: () => overrides$3,
1949
1949
  excludeAttrsSync: ['tabindex'],
1950
- componentName: componentName$5
1950
+ componentName: componentName$6
1951
1951
  })
1952
1952
  );
1953
1953
 
@@ -1992,7 +1992,7 @@ overrides$3 = `
1992
1992
  }
1993
1993
  `;
1994
1994
 
1995
- const componentName$4 = getComponentName('passcode');
1995
+ const componentName$5 = getComponentName('passcode');
1996
1996
 
1997
1997
  const customMixin = (superclass) =>
1998
1998
  class DraggableMixinClass extends superclass {
@@ -2004,22 +2004,22 @@ const customMixin = (superclass) =>
2004
2004
  return Number.parseInt(this.getAttribute('digits')) || 6;
2005
2005
  }
2006
2006
 
2007
- connectedCallback() {
2008
- super.connectedCallback?.();
2007
+ init() {
2008
+ super.init?.();
2009
2009
  const template = document.createElement('template');
2010
2010
 
2011
2011
  template.innerHTML = `
2012
- <${componentName$6}
2012
+ <${componentName$7}
2013
2013
  bordered="true"
2014
2014
  name="code"
2015
2015
  tabindex="-1"
2016
2016
  slot="input"
2017
- ></${componentName$6}>
2017
+ ></${componentName$7}>
2018
2018
  `;
2019
2019
 
2020
2020
  this.baseElement.appendChild(template.content.cloneNode(true));
2021
2021
 
2022
- this.inputElement = this.shadowRoot.querySelector(componentName$6);
2022
+ this.inputElement = this.shadowRoot.querySelector(componentName$7);
2023
2023
 
2024
2024
  forwardAttrs(this.shadowRoot.host, this.inputElement, { includeAttrs: ['required', 'pattern'] });
2025
2025
 
@@ -2059,10 +2059,6 @@ const Passcode = compose(
2059
2059
  display: inline-block;
2060
2060
  }
2061
2061
 
2062
- :host([readonly]) descope-passcode-internal > div {
2063
- pointer-events: none;
2064
- }
2065
-
2066
2062
  descope-passcode-internal {
2067
2063
  -webkit-mask-image: none;
2068
2064
  display: flex;
@@ -2098,17 +2094,17 @@ const Passcode = compose(
2098
2094
  }
2099
2095
  `,
2100
2096
  excludeAttrsSync: ['tabindex'],
2101
- componentName: componentName$4
2097
+ componentName: componentName$5
2102
2098
  })
2103
2099
  );
2104
2100
 
2105
- customElements.define(componentName$5, TextField);
2101
+ customElements.define(componentName$6, TextField);
2106
2102
 
2107
- customElements.define(componentName$6, PasscodeInternal);
2103
+ customElements.define(componentName$7, PasscodeInternal);
2108
2104
 
2109
- customElements.define(componentName$4, Passcode);
2105
+ customElements.define(componentName$5, Passcode);
2110
2106
 
2111
- const componentName$3 = getComponentName('password-field');
2107
+ const componentName$4 = getComponentName('password-field');
2112
2108
 
2113
2109
  let overrides$2 = ``;
2114
2110
 
@@ -2133,7 +2129,7 @@ const PasswordField = compose(
2133
2129
  wrappedEleName: 'vaadin-password-field',
2134
2130
  style: () => overrides$2,
2135
2131
  excludeAttrsSync: ['tabindex'],
2136
- componentName: componentName$3
2132
+ componentName: componentName$4
2137
2133
  })
2138
2134
  );
2139
2135
 
@@ -2177,9 +2173,9 @@ overrides$2 = `
2177
2173
  }
2178
2174
  `;
2179
2175
 
2180
- customElements.define(componentName$3, PasswordField);
2176
+ customElements.define(componentName$4, PasswordField);
2181
2177
 
2182
- const componentName$2 = getComponentName('switch-toggle');
2178
+ const componentName$3 = getComponentName('switch-toggle');
2183
2179
 
2184
2180
  let overrides$1 = ``;
2185
2181
 
@@ -2199,7 +2195,7 @@ const SwitchToggle = compose(
2199
2195
  wrappedEleName: 'vaadin-checkbox',
2200
2196
  style: () => overrides$1,
2201
2197
  excludeAttrsSync: ['tabindex'],
2202
- componentName: componentName$2
2198
+ componentName: componentName$3
2203
2199
  })
2204
2200
  );
2205
2201
 
@@ -2257,9 +2253,9 @@ overrides$1 = `
2257
2253
  }
2258
2254
  `;
2259
2255
 
2260
- customElements.define(componentName$2, SwitchToggle);
2256
+ customElements.define(componentName$3, SwitchToggle);
2261
2257
 
2262
- const componentName$1 = getComponentName('text-area');
2258
+ const componentName$2 = getComponentName('text-area');
2263
2259
 
2264
2260
  const selectors$1 = {
2265
2261
  label: '::part(label)',
@@ -2295,7 +2291,7 @@ const TextArea = compose(
2295
2291
  wrappedEleName: 'vaadin-text-area',
2296
2292
  style: () => overrides,
2297
2293
  excludeAttrsSync: ['tabindex'],
2298
- componentName: componentName$1
2294
+ componentName: componentName$2
2299
2295
  })
2300
2296
  );
2301
2297
 
@@ -2321,7 +2317,53 @@ overrides = `
2321
2317
  }
2322
2318
  `;
2323
2319
 
2324
- customElements.define(componentName$1, TextArea);
2320
+ customElements.define(componentName$2, TextArea);
2321
+
2322
+ const observedAttributes = ['src', 'alt'];
2323
+
2324
+ const componentName$1 = getComponentName('image');
2325
+
2326
+ const BaseClass = createBaseClass({ componentName: componentName$1, baseSelector: ':host > img' });
2327
+ class RawImage extends BaseClass {
2328
+ static get observedAttributes() {
2329
+ return observedAttributes.concat(BaseClass.observedAttributes || []);
2330
+ }
2331
+
2332
+ constructor() {
2333
+ super();
2334
+
2335
+ this.attachShadow({ mode: 'open' }).innerHTML = `
2336
+ <style>
2337
+ :host > img {
2338
+ width: 100%;
2339
+ height: 100%
2340
+ }
2341
+ :host {
2342
+ display: inline-flex;
2343
+ }
2344
+ </style>
2345
+ <img/>
2346
+ `;
2347
+ }
2348
+
2349
+ connectedCallback(){
2350
+ super.connectedCallback?.();
2351
+
2352
+ forwardAttrs(this, this.baseElement, {includeAttrs: observedAttributes});
2353
+ }
2354
+ }
2355
+
2356
+ const Image = compose(
2357
+ createStyleMixin({
2358
+ mappings: {
2359
+ height: { selector: () => ':host' },
2360
+ width: { selector: () => ':host' },
2361
+ }
2362
+ }),
2363
+ draggableMixin,
2364
+ )(RawImage);
2365
+
2366
+ customElements.define(componentName$1, Image);
2325
2367
 
2326
2368
  const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
2327
2369
 
@@ -2605,7 +2647,7 @@ const mode = {
2605
2647
  surface: globalRefs$7.colors.surface
2606
2648
  };
2607
2649
 
2608
- const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$i);
2650
+ const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$j);
2609
2651
 
2610
2652
  const button = {
2611
2653
  ...helperTheme$2,
@@ -2842,7 +2884,7 @@ const [helperTheme$1, helperRefs$1, helperVars] =
2842
2884
  verticalAlignment,
2843
2885
  horizontalAlignment,
2844
2886
  shadowColor: '#00000020' //if we want to support transparency vars, we should use different color format
2845
- }, 'container');
2887
+ }, Container.componentName);
2846
2888
 
2847
2889
  const container = {
2848
2890
  ...helperTheme$1,
@@ -3063,7 +3105,7 @@ const vars$3 = Divider.cssVarList;
3063
3105
 
3064
3106
  const thickness = '2px';
3065
3107
  const textPaddingSize = '10px';
3066
- const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$c);
3108
+ const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$d);
3067
3109
 
3068
3110
 
3069
3111
  const divider = {
@@ -3255,8 +3297,8 @@ const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclas
3255
3297
  overlay._enterModalState = function () { };
3256
3298
  }
3257
3299
 
3258
- connectedCallback() {
3259
- super.connectedCallback?.();
3300
+ init() {
3301
+ super.init?.();
3260
3302
 
3261
3303
  this.#overrideOverlaySettings();
3262
3304
  observeChildren(this, this.#onChildrenChange.bind(this));
@@ -3327,6 +3369,10 @@ const comboBox = {
3327
3369
  // [vars.overlayBorder]: '3px solid red',
3328
3370
  };
3329
3371
 
3372
+ Image.cssVarList;
3373
+
3374
+ const image = {};
3375
+
3330
3376
  var components = {
3331
3377
  button,
3332
3378
  textField: textField$1,
@@ -3344,7 +3390,8 @@ var components = {
3344
3390
  passcode,
3345
3391
  loaderRadial,
3346
3392
  loaderLinear,
3347
- comboBox
3393
+ comboBox,
3394
+ image
3348
3395
  };
3349
3396
 
3350
3397
  var index = { globals, components };