@descope/web-components-ui 1.0.71 → 1.0.72

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/index.esm.js CHANGED
@@ -579,7 +579,7 @@ const createProxy = ({
579
579
  return ProxyClass;
580
580
  };
581
581
 
582
- const observedAttributes$1 = [
582
+ const observedAttributes$2 = [
583
583
  'required',
584
584
  'pattern',
585
585
  ];
@@ -592,7 +592,7 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
592
592
  static get observedAttributes() {
593
593
  return [
594
594
  ...superclass.observedAttributes || [],
595
- ...observedAttributes$1
595
+ ...observedAttributes$2
596
596
  ];
597
597
  }
598
598
 
@@ -680,7 +680,7 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
680
680
  attributeChangedCallback(attrName, oldValue, newValue) {
681
681
  super.attributeChangedCallback?.(attrName, oldValue, newValue);
682
682
 
683
- if (observedAttributes$1.includes(attrName)) {
683
+ if (observedAttributes$2.includes(attrName)) {
684
684
  this.#setValidity();
685
685
  }
686
686
  }
@@ -1002,7 +1002,7 @@ const normalizeBooleanAttributesMixin = (superclass) => class NormalizeBooleanAt
1002
1002
  }
1003
1003
  };
1004
1004
 
1005
- const componentName$i = getComponentName('button');
1005
+ const componentName$j = getComponentName('button');
1006
1006
 
1007
1007
  const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
1008
1008
  const resetStyles = `
@@ -1056,7 +1056,7 @@ const Button = compose(
1056
1056
  style: () =>
1057
1057
  `${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
1058
1058
  excludeAttrsSync: ['tabindex'],
1059
- componentName: componentName$i
1059
+ componentName: componentName$j
1060
1060
  })
1061
1061
  );
1062
1062
 
@@ -1093,9 +1093,9 @@ const loadingIndicatorStyles = `
1093
1093
  }
1094
1094
  `;
1095
1095
 
1096
- customElements.define(componentName$i, Button);
1096
+ customElements.define(componentName$j, Button);
1097
1097
 
1098
- const componentName$h = getComponentName('checkbox');
1098
+ const componentName$i = getComponentName('checkbox');
1099
1099
 
1100
1100
  const Checkbox = compose(
1101
1101
  createStyleMixin({
@@ -1121,17 +1121,17 @@ const Checkbox = compose(
1121
1121
  }
1122
1122
  `,
1123
1123
  excludeAttrsSync: ['tabindex'],
1124
- componentName: componentName$h
1124
+ componentName: componentName$i
1125
1125
  })
1126
1126
  );
1127
1127
 
1128
- customElements.define(componentName$h, Checkbox);
1128
+ customElements.define(componentName$i, Checkbox);
1129
1129
 
1130
- const componentName$g = getComponentName('loader-linear');
1130
+ const componentName$h = getComponentName('loader-linear');
1131
1131
 
1132
- class RawLoaderLinear extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > div' }) {
1132
+ class RawLoaderLinear extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > div' }) {
1133
1133
  static get componentName() {
1134
- return componentName$g;
1134
+ return componentName$h;
1135
1135
  }
1136
1136
  constructor() {
1137
1137
  super();
@@ -1189,11 +1189,11 @@ const LoaderLinear = compose(
1189
1189
  componentNameValidationMixin
1190
1190
  )(RawLoaderLinear);
1191
1191
 
1192
- customElements.define(componentName$g, LoaderLinear);
1192
+ customElements.define(componentName$h, LoaderLinear);
1193
1193
 
1194
- const componentName$f = getComponentName('loader-radial');
1194
+ const componentName$g = getComponentName('loader-radial');
1195
1195
 
1196
- class RawLoaderRadial extends createBaseClass({ componentName: componentName$f, baseSelector: ':host > div' }) {
1196
+ class RawLoaderRadial extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > div' }) {
1197
1197
  constructor() {
1198
1198
  super();
1199
1199
 
@@ -1239,11 +1239,11 @@ const LoaderRadial = compose(
1239
1239
  componentNameValidationMixin
1240
1240
  )(RawLoaderRadial);
1241
1241
 
1242
- customElements.define(componentName$f, LoaderRadial);
1242
+ customElements.define(componentName$g, LoaderRadial);
1243
1243
 
1244
- const componentName$e = getComponentName('container');
1244
+ const componentName$f = getComponentName('container');
1245
1245
 
1246
- class RawContainer extends createBaseClass({componentName: componentName$e, baseSelector: ':host > slot'}) {
1246
+ class RawContainer extends createBaseClass({componentName: componentName$f, baseSelector: ':host > slot'}) {
1247
1247
  constructor() {
1248
1248
  super();
1249
1249
 
@@ -1299,26 +1299,26 @@ const Container = compose(
1299
1299
  componentNameValidationMixin
1300
1300
  )(RawContainer);
1301
1301
 
1302
- customElements.define(componentName$e, Container);
1302
+ customElements.define(componentName$f, Container);
1303
1303
 
1304
- const componentName$d = getComponentName('date-picker');
1304
+ const componentName$e = getComponentName('date-picker');
1305
1305
 
1306
1306
  const DatePicker = compose(
1307
1307
  draggableMixin,
1308
1308
  componentNameValidationMixin
1309
1309
  )(
1310
1310
  createProxy({
1311
- componentName: componentName$d,
1311
+ componentName: componentName$e,
1312
1312
  slots: ['prefix', 'suffix'],
1313
1313
  wrappedEleName: 'vaadin-date-picker',
1314
1314
  style: ``
1315
1315
  })
1316
1316
  );
1317
1317
 
1318
- customElements.define(componentName$d, DatePicker);
1318
+ customElements.define(componentName$e, DatePicker);
1319
1319
 
1320
- const componentName$c = getComponentName('divider');
1321
- class RawDivider extends createBaseClass({ componentName: componentName$c, baseSelector: ':host > div' }) {
1320
+ const componentName$d = getComponentName('divider');
1321
+ class RawDivider extends createBaseClass({ componentName: componentName$d, baseSelector: ':host > div' }) {
1322
1322
  constructor() {
1323
1323
  super();
1324
1324
 
@@ -1396,9 +1396,9 @@ const Divider = compose(
1396
1396
  componentNameValidationMixin
1397
1397
  )(RawDivider);
1398
1398
 
1399
- const componentName$b = getComponentName('text');
1399
+ const componentName$c = getComponentName('text');
1400
1400
 
1401
- class RawText extends createBaseClass({ componentName: componentName$b, baseSelector: ':host > slot' }) {
1401
+ class RawText extends createBaseClass({ componentName: componentName$c, baseSelector: ':host > slot' }) {
1402
1402
  constructor() {
1403
1403
  super();
1404
1404
 
@@ -1440,9 +1440,9 @@ const Text = compose(
1440
1440
  componentNameValidationMixin
1441
1441
  )(RawText);
1442
1442
 
1443
- customElements.define(componentName$b, Text);
1443
+ customElements.define(componentName$c, Text);
1444
1444
 
1445
- customElements.define(componentName$c, Divider);
1445
+ customElements.define(componentName$d, Divider);
1446
1446
 
1447
1447
  const selectors$3 = {
1448
1448
  label: '::part(label)',
@@ -1479,7 +1479,7 @@ var textFieldMappings = {
1479
1479
  placeholderColor: { selector: selectors$3.placeholder, property: 'color' }
1480
1480
  };
1481
1481
 
1482
- const componentName$a = getComponentName('email-field');
1482
+ const componentName$b = getComponentName('email-field');
1483
1483
 
1484
1484
  let overrides$5 = ``;
1485
1485
 
@@ -1498,7 +1498,7 @@ const EmailField = compose(
1498
1498
  wrappedEleName: 'vaadin-email-field',
1499
1499
  style: () => overrides$5,
1500
1500
  excludeAttrsSync: ['tabindex'],
1501
- componentName: componentName$a
1501
+ componentName: componentName$b
1502
1502
  })
1503
1503
  );
1504
1504
 
@@ -1542,10 +1542,10 @@ overrides$5 = `
1542
1542
  }
1543
1543
  `;
1544
1544
 
1545
- customElements.define(componentName$a, EmailField);
1545
+ customElements.define(componentName$b, EmailField);
1546
1546
 
1547
- const componentName$9 = getComponentName('link');
1548
- class RawLink extends createBaseClass({ componentName: componentName$9, baseSelector: ':host a' }) {
1547
+ const componentName$a = getComponentName('link');
1548
+ class RawLink extends createBaseClass({ componentName: componentName$a, baseSelector: ':host a' }) {
1549
1549
  constructor() {
1550
1550
  super();
1551
1551
  document.createElement('template');
@@ -1606,14 +1606,14 @@ const Link = compose(
1606
1606
  componentNameValidationMixin
1607
1607
  )(RawLink);
1608
1608
 
1609
- customElements.define(componentName$9, Link);
1609
+ customElements.define(componentName$a, Link);
1610
1610
 
1611
- const componentName$8 = getComponentName('logo');
1611
+ const componentName$9 = getComponentName('logo');
1612
1612
 
1613
1613
  let style;
1614
1614
  const getStyle = () => style;
1615
1615
 
1616
- class RawLogo extends createBaseClass({ componentName: componentName$8, baseSelector: ':host > div' }) {
1616
+ class RawLogo extends createBaseClass({ componentName: componentName$9, baseSelector: ':host > div' }) {
1617
1617
  constructor() {
1618
1618
  super();
1619
1619
 
@@ -1648,9 +1648,9 @@ style = `
1648
1648
  }
1649
1649
  `;
1650
1650
 
1651
- customElements.define(componentName$8, Logo);
1651
+ customElements.define(componentName$9, Logo);
1652
1652
 
1653
- const componentName$7 = getComponentName('number-field');
1653
+ const componentName$8 = getComponentName('number-field');
1654
1654
 
1655
1655
  let overrides$4 = ``;
1656
1656
 
@@ -1669,7 +1669,7 @@ const NumberField = compose(
1669
1669
  wrappedEleName: 'vaadin-number-field',
1670
1670
  style: () => overrides$4,
1671
1671
  excludeAttrsSync: ['tabindex'],
1672
- componentName: componentName$7
1672
+ componentName: componentName$8
1673
1673
  })
1674
1674
  );
1675
1675
 
@@ -1713,7 +1713,7 @@ overrides$4 = `
1713
1713
  }
1714
1714
  `;
1715
1715
 
1716
- customElements.define(componentName$7, NumberField);
1716
+ customElements.define(componentName$8, NumberField);
1717
1717
 
1718
1718
  const createBaseInputClass = (...args) => compose(
1719
1719
  focusMixin,
@@ -1735,24 +1735,24 @@ const getSanitizedCharacters = (str) => {
1735
1735
  return [...pin]; // creating array of chars
1736
1736
  };
1737
1737
 
1738
- const componentName$6 = getComponentName('passcode-internal');
1738
+ const componentName$7 = getComponentName('passcode-internal');
1739
1739
 
1740
- const observedAttributes = [
1740
+ const observedAttributes$1 = [
1741
1741
  'disabled',
1742
1742
  'bordered',
1743
1743
  'size',
1744
1744
  'invalid'
1745
1745
  ];
1746
1746
 
1747
- const BaseInputClass = createBaseInputClass({ componentName: componentName$6, baseSelector: ':host > div' });
1747
+ const BaseInputClass = createBaseInputClass({ componentName: componentName$7, baseSelector: ':host > 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')
@@ -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 {
@@ -2009,17 +2009,17 @@ const customMixin = (superclass) =>
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
 
@@ -2098,17 +2098,17 @@ const Passcode = compose(
2098
2098
  }
2099
2099
  `,
2100
2100
  excludeAttrsSync: ['tabindex'],
2101
- componentName: componentName$4
2101
+ componentName: componentName$5
2102
2102
  })
2103
2103
  );
2104
2104
 
2105
- customElements.define(componentName$5, TextField);
2105
+ customElements.define(componentName$6, TextField);
2106
2106
 
2107
- customElements.define(componentName$6, PasscodeInternal);
2107
+ customElements.define(componentName$7, PasscodeInternal);
2108
2108
 
2109
- customElements.define(componentName$4, Passcode);
2109
+ customElements.define(componentName$5, Passcode);
2110
2110
 
2111
- const componentName$3 = getComponentName('password-field');
2111
+ const componentName$4 = getComponentName('password-field');
2112
2112
 
2113
2113
  let overrides$2 = ``;
2114
2114
 
@@ -2133,7 +2133,7 @@ const PasswordField = compose(
2133
2133
  wrappedEleName: 'vaadin-password-field',
2134
2134
  style: () => overrides$2,
2135
2135
  excludeAttrsSync: ['tabindex'],
2136
- componentName: componentName$3
2136
+ componentName: componentName$4
2137
2137
  })
2138
2138
  );
2139
2139
 
@@ -2177,9 +2177,9 @@ overrides$2 = `
2177
2177
  }
2178
2178
  `;
2179
2179
 
2180
- customElements.define(componentName$3, PasswordField);
2180
+ customElements.define(componentName$4, PasswordField);
2181
2181
 
2182
- const componentName$2 = getComponentName('switch-toggle');
2182
+ const componentName$3 = getComponentName('switch-toggle');
2183
2183
 
2184
2184
  let overrides$1 = ``;
2185
2185
 
@@ -2199,7 +2199,7 @@ const SwitchToggle = compose(
2199
2199
  wrappedEleName: 'vaadin-checkbox',
2200
2200
  style: () => overrides$1,
2201
2201
  excludeAttrsSync: ['tabindex'],
2202
- componentName: componentName$2
2202
+ componentName: componentName$3
2203
2203
  })
2204
2204
  );
2205
2205
 
@@ -2257,9 +2257,9 @@ overrides$1 = `
2257
2257
  }
2258
2258
  `;
2259
2259
 
2260
- customElements.define(componentName$2, SwitchToggle);
2260
+ customElements.define(componentName$3, SwitchToggle);
2261
2261
 
2262
- const componentName$1 = getComponentName('text-area');
2262
+ const componentName$2 = getComponentName('text-area');
2263
2263
 
2264
2264
  const selectors$1 = {
2265
2265
  label: '::part(label)',
@@ -2295,7 +2295,7 @@ const TextArea = compose(
2295
2295
  wrappedEleName: 'vaadin-text-area',
2296
2296
  style: () => overrides,
2297
2297
  excludeAttrsSync: ['tabindex'],
2298
- componentName: componentName$1
2298
+ componentName: componentName$2
2299
2299
  })
2300
2300
  );
2301
2301
 
@@ -2321,7 +2321,53 @@ overrides = `
2321
2321
  }
2322
2322
  `;
2323
2323
 
2324
- customElements.define(componentName$1, TextArea);
2324
+ customElements.define(componentName$2, TextArea);
2325
+
2326
+ const observedAttributes = ['src', 'alt'];
2327
+
2328
+ const componentName$1 = getComponentName('image');
2329
+
2330
+ const BaseClass = createBaseClass({ componentName: componentName$1, baseSelector: ':host > img' });
2331
+ class RawImage extends BaseClass {
2332
+ static get observedAttributes() {
2333
+ return observedAttributes.concat(BaseClass.observedAttributes || []);
2334
+ }
2335
+
2336
+ constructor() {
2337
+ super();
2338
+
2339
+ this.attachShadow({ mode: 'open' }).innerHTML = `
2340
+ <style>
2341
+ :host > img {
2342
+ width: 100%;
2343
+ height: 100%
2344
+ }
2345
+ :host {
2346
+ display: inline-flex;
2347
+ }
2348
+ </style>
2349
+ <img/>
2350
+ `;
2351
+ }
2352
+
2353
+ connectedCallback(){
2354
+ super.connectedCallback?.();
2355
+
2356
+ forwardAttrs(this, this.baseElement, {includeAttrs: observedAttributes});
2357
+ }
2358
+ }
2359
+
2360
+ const Image = compose(
2361
+ createStyleMixin({
2362
+ mappings: {
2363
+ height: { selector: () => ':host' },
2364
+ width: { selector: () => ':host' },
2365
+ }
2366
+ }),
2367
+ draggableMixin,
2368
+ )(RawImage);
2369
+
2370
+ customElements.define(componentName$1, Image);
2325
2371
 
2326
2372
  const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
2327
2373
 
@@ -2605,7 +2651,7 @@ const mode = {
2605
2651
  surface: globalRefs$7.colors.surface
2606
2652
  };
2607
2653
 
2608
- const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$i);
2654
+ const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$j);
2609
2655
 
2610
2656
  const button = {
2611
2657
  ...helperTheme$2,
@@ -2842,7 +2888,7 @@ const [helperTheme$1, helperRefs$1, helperVars] =
2842
2888
  verticalAlignment,
2843
2889
  horizontalAlignment,
2844
2890
  shadowColor: '#00000020' //if we want to support transparency vars, we should use different color format
2845
- }, 'container');
2891
+ }, Container.componentName);
2846
2892
 
2847
2893
  const container = {
2848
2894
  ...helperTheme$1,
@@ -3063,7 +3109,7 @@ const vars$3 = Divider.cssVarList;
3063
3109
 
3064
3110
  const thickness = '2px';
3065
3111
  const textPaddingSize = '10px';
3066
- const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$c);
3112
+ const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$d);
3067
3113
 
3068
3114
 
3069
3115
  const divider = {
@@ -3327,6 +3373,10 @@ const comboBox = {
3327
3373
  // [vars.overlayBorder]: '3px solid red',
3328
3374
  };
3329
3375
 
3376
+ Image.cssVarList;
3377
+
3378
+ const image = {};
3379
+
3330
3380
  var components = {
3331
3381
  button,
3332
3382
  textField: textField$1,
@@ -3344,7 +3394,8 @@ var components = {
3344
3394
  passcode,
3345
3395
  loaderRadial,
3346
3396
  loaderLinear,
3347
- comboBox
3397
+ comboBox,
3398
+ image
3348
3399
  };
3349
3400
 
3350
3401
  var index = { globals, components };