@descope/web-components-ui 1.0.267 → 1.0.268

Sign up to get free protection for your applications and to get access to all the features.
package/dist/index.esm.js CHANGED
@@ -12,6 +12,7 @@ import { GridSortColumn } from '@vaadin/grid/vaadin-grid-sort-column';
12
12
  import { GridSelectionColumn } from '@vaadin/grid/vaadin-grid-selection-column';
13
13
  import '@vaadin/multi-select-combo-box';
14
14
  import '@vaadin/dialog';
15
+ import '@vaadin/notification';
15
16
  import merge from 'lodash.merge';
16
17
  import Color from 'color';
17
18
 
@@ -1288,7 +1289,7 @@ const clickableMixin = (superclass) =>
1288
1289
  }
1289
1290
  };
1290
1291
 
1291
- const componentName$H = getComponentName('button');
1292
+ const componentName$I = getComponentName('button');
1292
1293
 
1293
1294
  const resetStyles = `
1294
1295
  :host {
@@ -1390,7 +1391,7 @@ const ButtonClass = compose(
1390
1391
  }
1391
1392
  `,
1392
1393
  excludeAttrsSync: ['tabindex'],
1393
- componentName: componentName$H,
1394
+ componentName: componentName$I,
1394
1395
  })
1395
1396
  );
1396
1397
 
@@ -1427,7 +1428,7 @@ loadingIndicatorStyles = `
1427
1428
  }
1428
1429
  `;
1429
1430
 
1430
- customElements.define(componentName$H, ButtonClass);
1431
+ customElements.define(componentName$I, ButtonClass);
1431
1432
 
1432
1433
  const createBaseInputClass = (...args) =>
1433
1434
  compose(
@@ -1437,11 +1438,11 @@ const createBaseInputClass = (...args) =>
1437
1438
  inputEventsDispatchingMixin
1438
1439
  )(createBaseClass(...args));
1439
1440
 
1440
- const componentName$G = getComponentName('boolean-field-internal');
1441
+ const componentName$H = getComponentName('boolean-field-internal');
1441
1442
 
1442
1443
  const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
1443
1444
 
1444
- const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$G, baseSelector: 'div' });
1445
+ const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$H, baseSelector: 'div' });
1445
1446
 
1446
1447
  class BooleanInputInternal extends BaseInputClass$5 {
1447
1448
  static get observedAttributes() {
@@ -1517,14 +1518,14 @@ const booleanFieldMixin = (superclass) =>
1517
1518
 
1518
1519
  const template = document.createElement('template');
1519
1520
  template.innerHTML = `
1520
- <${componentName$G}
1521
+ <${componentName$H}
1521
1522
  tabindex="-1"
1522
1523
  slot="input"
1523
- ></${componentName$G}>
1524
+ ></${componentName$H}>
1524
1525
  `;
1525
1526
 
1526
1527
  this.baseElement.appendChild(template.content.cloneNode(true));
1527
- this.inputElement = this.shadowRoot.querySelector(componentName$G);
1528
+ this.inputElement = this.shadowRoot.querySelector(componentName$H);
1528
1529
  this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
1529
1530
 
1530
1531
  forwardAttrs(this, this.inputElement, {
@@ -1723,7 +1724,7 @@ descope-boolean-field-internal {
1723
1724
  }
1724
1725
  `;
1725
1726
 
1726
- const componentName$F = getComponentName('checkbox');
1727
+ const componentName$G = getComponentName('checkbox');
1727
1728
 
1728
1729
  const {
1729
1730
  host: host$g,
@@ -1829,15 +1830,15 @@ const CheckboxClass = compose(
1829
1830
  }
1830
1831
  `,
1831
1832
  excludeAttrsSync: ['label', 'tabindex'],
1832
- componentName: componentName$F,
1833
+ componentName: componentName$G,
1833
1834
  })
1834
1835
  );
1835
1836
 
1836
- customElements.define(componentName$G, BooleanInputInternal);
1837
+ customElements.define(componentName$H, BooleanInputInternal);
1837
1838
 
1838
- customElements.define(componentName$F, CheckboxClass);
1839
+ customElements.define(componentName$G, CheckboxClass);
1839
1840
 
1840
- const componentName$E = getComponentName('switch-toggle');
1841
+ const componentName$F = getComponentName('switch-toggle');
1841
1842
 
1842
1843
  const {
1843
1844
  host: host$f,
@@ -1969,17 +1970,17 @@ const SwitchToggleClass = compose(
1969
1970
  }
1970
1971
  `,
1971
1972
  excludeAttrsSync: ['label', 'tabindex'],
1972
- componentName: componentName$E,
1973
+ componentName: componentName$F,
1973
1974
  })
1974
1975
  );
1975
1976
 
1976
- customElements.define(componentName$E, SwitchToggleClass);
1977
+ customElements.define(componentName$F, SwitchToggleClass);
1977
1978
 
1978
- const componentName$D = getComponentName('loader-linear');
1979
+ const componentName$E = getComponentName('loader-linear');
1979
1980
 
1980
- class RawLoaderLinear extends createBaseClass({ componentName: componentName$D, baseSelector: ':host > div' }) {
1981
+ class RawLoaderLinear extends createBaseClass({ componentName: componentName$E, baseSelector: ':host > div' }) {
1981
1982
  static get componentName() {
1982
- return componentName$D;
1983
+ return componentName$E;
1983
1984
  }
1984
1985
 
1985
1986
  constructor() {
@@ -2040,11 +2041,11 @@ const LoaderLinearClass = compose(
2040
2041
  componentNameValidationMixin
2041
2042
  )(RawLoaderLinear);
2042
2043
 
2043
- customElements.define(componentName$D, LoaderLinearClass);
2044
+ customElements.define(componentName$E, LoaderLinearClass);
2044
2045
 
2045
- const componentName$C = getComponentName('loader-radial');
2046
+ const componentName$D = getComponentName('loader-radial');
2046
2047
 
2047
- class RawLoaderRadial extends createBaseClass({ componentName: componentName$C, baseSelector: ':host > div' }) {
2048
+ class RawLoaderRadial extends createBaseClass({ componentName: componentName$D, baseSelector: ':host > div' }) {
2048
2049
  constructor() {
2049
2050
  super();
2050
2051
 
@@ -2088,11 +2089,11 @@ const LoaderRadialClass = compose(
2088
2089
  componentNameValidationMixin
2089
2090
  )(RawLoaderRadial);
2090
2091
 
2091
- customElements.define(componentName$C, LoaderRadialClass);
2092
+ customElements.define(componentName$D, LoaderRadialClass);
2092
2093
 
2093
- const componentName$B = getComponentName('container');
2094
+ const componentName$C = getComponentName('container');
2094
2095
 
2095
- class RawContainer extends createBaseClass({ componentName: componentName$B, baseSelector: 'slot' }) {
2096
+ class RawContainer extends createBaseClass({ componentName: componentName$C, baseSelector: 'slot' }) {
2096
2097
  constructor() {
2097
2098
  super();
2098
2099
 
@@ -2144,13 +2145,13 @@ const ContainerClass = compose(
2144
2145
  componentNameValidationMixin
2145
2146
  )(RawContainer);
2146
2147
 
2147
- customElements.define(componentName$B, ContainerClass);
2148
+ customElements.define(componentName$C, ContainerClass);
2148
2149
 
2149
2150
  // eslint-disable-next-line max-classes-per-file
2150
2151
 
2151
- const componentName$A = getComponentName('text');
2152
+ const componentName$B = getComponentName('text');
2152
2153
 
2153
- class RawText extends createBaseClass({ componentName: componentName$A, baseSelector: ':host > slot' }) {
2154
+ class RawText extends createBaseClass({ componentName: componentName$B, baseSelector: ':host > slot' }) {
2154
2155
  constructor() {
2155
2156
  super();
2156
2157
 
@@ -2210,8 +2211,8 @@ const TextClass = compose(
2210
2211
  customTextMixin
2211
2212
  )(RawText);
2212
2213
 
2213
- const componentName$z = getComponentName('divider');
2214
- class RawDivider extends createBaseClass({ componentName: componentName$z, baseSelector: ':host > div' }) {
2214
+ const componentName$A = getComponentName('divider');
2215
+ class RawDivider extends createBaseClass({ componentName: componentName$A, baseSelector: ':host > div' }) {
2215
2216
  constructor() {
2216
2217
  super();
2217
2218
 
@@ -2310,9 +2311,9 @@ const DividerClass = compose(
2310
2311
  componentNameValidationMixin
2311
2312
  )(RawDivider);
2312
2313
 
2313
- customElements.define(componentName$A, TextClass);
2314
+ customElements.define(componentName$B, TextClass);
2314
2315
 
2315
- customElements.define(componentName$z, DividerClass);
2316
+ customElements.define(componentName$A, DividerClass);
2316
2317
 
2317
2318
  const { host: host$c, label: label$9, placeholder: placeholder$3, requiredIndicator: requiredIndicator$9, inputField: inputField$6, input, helperText: helperText$7, errorMessage: errorMessage$9 } =
2318
2319
  {
@@ -2369,7 +2370,7 @@ var textFieldMappings = {
2369
2370
  inputPlaceholderColor: { ...placeholder$3, property: 'color' },
2370
2371
  };
2371
2372
 
2372
- const componentName$y = getComponentName('email-field');
2373
+ const componentName$z = getComponentName('email-field');
2373
2374
 
2374
2375
  const customMixin$6 = (superclass) =>
2375
2376
  class EmailFieldMixinClass extends superclass {
@@ -2404,15 +2405,15 @@ const EmailFieldClass = compose(
2404
2405
  ${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
2405
2406
  `,
2406
2407
  excludeAttrsSync: ['tabindex'],
2407
- componentName: componentName$y,
2408
+ componentName: componentName$z,
2408
2409
  })
2409
2410
  );
2410
2411
 
2411
- customElements.define(componentName$y, EmailFieldClass);
2412
+ customElements.define(componentName$z, EmailFieldClass);
2412
2413
 
2413
- const componentName$x = getComponentName('link');
2414
+ const componentName$y = getComponentName('link');
2414
2415
 
2415
- class RawLink extends createBaseClass({ componentName: componentName$x, baseSelector: ':host a' }) {
2416
+ class RawLink extends createBaseClass({ componentName: componentName$y, baseSelector: ':host a' }) {
2416
2417
  constructor() {
2417
2418
  super();
2418
2419
 
@@ -2477,7 +2478,7 @@ const LinkClass = compose(
2477
2478
  componentNameValidationMixin
2478
2479
  )(RawLink);
2479
2480
 
2480
- customElements.define(componentName$x, LinkClass);
2481
+ customElements.define(componentName$y, LinkClass);
2481
2482
 
2482
2483
  const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
2483
2484
  let style;
@@ -2529,37 +2530,37 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
2529
2530
  return CssVarImageClass;
2530
2531
  };
2531
2532
 
2532
- const componentName$w = getComponentName('logo');
2533
+ const componentName$x = getComponentName('logo');
2533
2534
 
2534
2535
  const LogoClass = createCssVarImageClass({
2535
- componentName: componentName$w,
2536
+ componentName: componentName$x,
2536
2537
  varName: 'url',
2537
2538
  fallbackVarName: 'fallbackUrl',
2538
2539
  });
2539
2540
 
2540
- customElements.define(componentName$w, LogoClass);
2541
+ customElements.define(componentName$x, LogoClass);
2541
2542
 
2542
- const componentName$v = getComponentName('totp-image');
2543
+ const componentName$w = getComponentName('totp-image');
2543
2544
 
2544
2545
  const TotpImageClass = createCssVarImageClass({
2545
- componentName: componentName$v,
2546
+ componentName: componentName$w,
2546
2547
  varName: 'url',
2547
2548
  fallbackVarName: 'fallbackUrl',
2548
2549
  });
2549
2550
 
2550
- customElements.define(componentName$v, TotpImageClass);
2551
+ customElements.define(componentName$w, TotpImageClass);
2551
2552
 
2552
- const componentName$u = getComponentName('notp-image');
2553
+ const componentName$v = getComponentName('notp-image');
2553
2554
 
2554
2555
  const NotpImageClass = createCssVarImageClass({
2555
- componentName: componentName$u,
2556
+ componentName: componentName$v,
2556
2557
  varName: 'url',
2557
2558
  fallbackVarName: 'fallbackUrl',
2558
2559
  });
2559
2560
 
2560
- customElements.define(componentName$u, NotpImageClass);
2561
+ customElements.define(componentName$v, NotpImageClass);
2561
2562
 
2562
- const componentName$t = getComponentName('number-field');
2563
+ const componentName$u = getComponentName('number-field');
2563
2564
 
2564
2565
  const NumberFieldClass = compose(
2565
2566
  createStyleMixin({
@@ -2585,11 +2586,11 @@ const NumberFieldClass = compose(
2585
2586
  ${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
2586
2587
  `,
2587
2588
  excludeAttrsSync: ['tabindex'],
2588
- componentName: componentName$t,
2589
+ componentName: componentName$u,
2589
2590
  })
2590
2591
  );
2591
2592
 
2592
- customElements.define(componentName$t, NumberFieldClass);
2593
+ customElements.define(componentName$u, NumberFieldClass);
2593
2594
 
2594
2595
  const focusElement = (ele) => {
2595
2596
  ele?.focus();
@@ -2607,13 +2608,13 @@ const getSanitizedCharacters = (str) => {
2607
2608
 
2608
2609
  /* eslint-disable no-param-reassign */
2609
2610
 
2610
- const componentName$s = getComponentName('passcode-internal');
2611
+ const componentName$t = getComponentName('passcode-internal');
2611
2612
 
2612
2613
  const observedAttributes$5 = ['digits', 'loading'];
2613
2614
 
2614
2615
  const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
2615
2616
 
2616
- const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$s, baseSelector: 'div' });
2617
+ const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$t, baseSelector: 'div' });
2617
2618
 
2618
2619
  class PasscodeInternal extends BaseInputClass$4 {
2619
2620
  static get observedAttributes() {
@@ -2839,7 +2840,7 @@ class PasscodeInternal extends BaseInputClass$4 {
2839
2840
  }
2840
2841
  }
2841
2842
 
2842
- const componentName$r = getComponentName('text-field');
2843
+ const componentName$s = getComponentName('text-field');
2843
2844
 
2844
2845
  const observedAttrs = ['type'];
2845
2846
 
@@ -2889,11 +2890,11 @@ const TextFieldClass = compose(
2889
2890
  ${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
2890
2891
  `,
2891
2892
  excludeAttrsSync: ['tabindex'],
2892
- componentName: componentName$r,
2893
+ componentName: componentName$s,
2893
2894
  })
2894
2895
  );
2895
2896
 
2896
- const componentName$q = getComponentName('passcode');
2897
+ const componentName$r = getComponentName('passcode');
2897
2898
 
2898
2899
  const observedAttributes$4 = ['digits'];
2899
2900
 
@@ -2912,17 +2913,17 @@ const customMixin$4 = (superclass) =>
2912
2913
  const template = document.createElement('template');
2913
2914
 
2914
2915
  template.innerHTML = `
2915
- <${componentName$s}
2916
+ <${componentName$t}
2916
2917
  bordered="true"
2917
2918
  name="code"
2918
2919
  tabindex="-1"
2919
2920
  slot="input"
2920
- ><slot></slot></${componentName$s}>
2921
+ ><slot></slot></${componentName$t}>
2921
2922
  `;
2922
2923
 
2923
2924
  this.baseElement.appendChild(template.content.cloneNode(true));
2924
2925
 
2925
- this.inputElement = this.shadowRoot.querySelector(componentName$s);
2926
+ this.inputElement = this.shadowRoot.querySelector(componentName$t);
2926
2927
 
2927
2928
  forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
2928
2929
  }
@@ -3069,15 +3070,15 @@ const PasscodeClass = compose(
3069
3070
  ${resetInputCursor('vaadin-text-field')}
3070
3071
  `,
3071
3072
  excludeAttrsSync: ['tabindex'],
3072
- componentName: componentName$q,
3073
+ componentName: componentName$r,
3073
3074
  })
3074
3075
  );
3075
3076
 
3076
- customElements.define(componentName$r, TextFieldClass);
3077
+ customElements.define(componentName$s, TextFieldClass);
3077
3078
 
3078
- customElements.define(componentName$s, PasscodeInternal);
3079
+ customElements.define(componentName$t, PasscodeInternal);
3079
3080
 
3080
- customElements.define(componentName$q, PasscodeClass);
3081
+ customElements.define(componentName$r, PasscodeClass);
3081
3082
 
3082
3083
  const passwordDraggableMixin = (superclass) =>
3083
3084
  class PasswordDraggableMixinClass extends superclass {
@@ -3113,7 +3114,7 @@ const passwordDraggableMixin = (superclass) =>
3113
3114
  }
3114
3115
  };
3115
3116
 
3116
- const componentName$p = getComponentName('password');
3117
+ const componentName$q = getComponentName('password');
3117
3118
 
3118
3119
  const {
3119
3120
  host: host$9,
@@ -3244,13 +3245,13 @@ const PasswordClass = compose(
3244
3245
  }
3245
3246
  `,
3246
3247
  excludeAttrsSync: ['tabindex'],
3247
- componentName: componentName$p,
3248
+ componentName: componentName$q,
3248
3249
  })
3249
3250
  );
3250
3251
 
3251
- customElements.define(componentName$p, PasswordClass);
3252
+ customElements.define(componentName$q, PasswordClass);
3252
3253
 
3253
- const componentName$o = getComponentName('text-area');
3254
+ const componentName$p = getComponentName('text-area');
3254
3255
 
3255
3256
  const {
3256
3257
  host: host$8,
@@ -3326,17 +3327,17 @@ const TextAreaClass = compose(
3326
3327
  ${resetInputCursor('vaadin-text-area')}
3327
3328
  `,
3328
3329
  excludeAttrsSync: ['tabindex'],
3329
- componentName: componentName$o,
3330
+ componentName: componentName$p,
3330
3331
  })
3331
3332
  );
3332
3333
 
3333
- customElements.define(componentName$o, TextAreaClass);
3334
+ customElements.define(componentName$p, TextAreaClass);
3334
3335
 
3335
3336
  const observedAttributes$3 = ['src', 'alt'];
3336
3337
 
3337
- const componentName$n = getComponentName('image');
3338
+ const componentName$o = getComponentName('image');
3338
3339
 
3339
- const BaseClass$1 = createBaseClass({ componentName: componentName$n, baseSelector: ':host > img' });
3340
+ const BaseClass$1 = createBaseClass({ componentName: componentName$o, baseSelector: ':host > img' });
3340
3341
  class RawImage extends BaseClass$1 {
3341
3342
  static get observedAttributes() {
3342
3343
  return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
@@ -3376,9 +3377,9 @@ const ImageClass = compose(
3376
3377
  draggableMixin
3377
3378
  )(RawImage);
3378
3379
 
3379
- customElements.define(componentName$n, ImageClass);
3380
+ customElements.define(componentName$o, ImageClass);
3380
3381
 
3381
- const componentName$m = getComponentName('combo-box');
3382
+ const componentName$n = getComponentName('combo-box');
3382
3383
 
3383
3384
  const ComboBoxMixin = (superclass) =>
3384
3385
  class ComboBoxMixinClass extends superclass {
@@ -3757,12 +3758,12 @@ const ComboBoxClass = compose(
3757
3758
  // and reset items to an empty array, and opening the list box with no items
3758
3759
  // to display.
3759
3760
  excludeAttrsSync: ['tabindex', 'size', 'data'],
3760
- componentName: componentName$m,
3761
+ componentName: componentName$n,
3761
3762
  includeForwardProps: ['items', 'renderer', 'selectedItem'],
3762
3763
  })
3763
3764
  );
3764
3765
 
3765
- customElements.define(componentName$m, ComboBoxClass);
3766
+ customElements.define(componentName$n, ComboBoxClass);
3766
3767
 
3767
3768
  var CountryCodes = [
3768
3769
  {
@@ -5002,7 +5003,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
5002
5003
  </div>
5003
5004
  `;
5004
5005
 
5005
- const componentName$l = getComponentName('phone-field-internal');
5006
+ const componentName$m = getComponentName('phone-field-internal');
5006
5007
 
5007
5008
  const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
5008
5009
  const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
@@ -5014,7 +5015,7 @@ const mapAttrs$1 = {
5014
5015
 
5015
5016
  const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
5016
5017
 
5017
- const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$l, baseSelector: 'div' });
5018
+ const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$m, baseSelector: 'div' });
5018
5019
 
5019
5020
  let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
5020
5021
  static get observedAttributes() {
@@ -5186,12 +5187,12 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
5186
5187
  }
5187
5188
  };
5188
5189
 
5189
- customElements.define(componentName$l, PhoneFieldInternal$1);
5190
+ customElements.define(componentName$m, PhoneFieldInternal$1);
5190
5191
 
5191
5192
  const textVars$1 = TextFieldClass.cssVarList;
5192
5193
  const comboVars = ComboBoxClass.cssVarList;
5193
5194
 
5194
- const componentName$k = getComponentName('phone-field');
5195
+ const componentName$l = getComponentName('phone-field');
5195
5196
 
5196
5197
  const customMixin$3 = (superclass) =>
5197
5198
  class PhoneFieldMixinClass extends superclass {
@@ -5205,15 +5206,15 @@ const customMixin$3 = (superclass) =>
5205
5206
  const template = document.createElement('template');
5206
5207
 
5207
5208
  template.innerHTML = `
5208
- <${componentName$l}
5209
+ <${componentName$m}
5209
5210
  tabindex="-1"
5210
5211
  slot="input"
5211
- ></${componentName$l}>
5212
+ ></${componentName$m}>
5212
5213
  `;
5213
5214
 
5214
5215
  this.baseElement.appendChild(template.content.cloneNode(true));
5215
5216
 
5216
- this.inputElement = this.shadowRoot.querySelector(componentName$l);
5217
+ this.inputElement = this.shadowRoot.querySelector(componentName$m);
5217
5218
 
5218
5219
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
5219
5220
  includeAttrs: [
@@ -5409,17 +5410,17 @@ const PhoneFieldClass = compose(
5409
5410
  ${resetInputLabelPosition('vaadin-text-field')}
5410
5411
  `,
5411
5412
  excludeAttrsSync: ['tabindex'],
5412
- componentName: componentName$k,
5413
+ componentName: componentName$l,
5413
5414
  })
5414
5415
  );
5415
5416
 
5416
- customElements.define(componentName$k, PhoneFieldClass);
5417
+ customElements.define(componentName$l, PhoneFieldClass);
5417
5418
 
5418
5419
  const getCountryByCodeId = (countryCode) => {
5419
5420
  return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
5420
5421
  };
5421
5422
 
5422
- const componentName$j = getComponentName('phone-field-internal-input-box');
5423
+ const componentName$k = getComponentName('phone-field-internal-input-box');
5423
5424
 
5424
5425
  const observedAttributes$2 = [
5425
5426
  'disabled',
@@ -5433,7 +5434,7 @@ const mapAttrs = {
5433
5434
  'phone-input-placeholder': 'placeholder',
5434
5435
  };
5435
5436
 
5436
- const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$j, baseSelector: 'div' });
5437
+ const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$k, baseSelector: 'div' });
5437
5438
 
5438
5439
  class PhoneFieldInternal extends BaseInputClass$2 {
5439
5440
  static get observedAttributes() {
@@ -5572,11 +5573,11 @@ class PhoneFieldInternal extends BaseInputClass$2 {
5572
5573
  }
5573
5574
  }
5574
5575
 
5575
- customElements.define(componentName$j, PhoneFieldInternal);
5576
+ customElements.define(componentName$k, PhoneFieldInternal);
5576
5577
 
5577
5578
  const textVars = TextFieldClass.cssVarList;
5578
5579
 
5579
- const componentName$i = getComponentName('phone-input-box-field');
5580
+ const componentName$j = getComponentName('phone-input-box-field');
5580
5581
 
5581
5582
  const customMixin$2 = (superclass) =>
5582
5583
  class PhoneInputBoxFieldMixinClass extends superclass {
@@ -5590,15 +5591,15 @@ const customMixin$2 = (superclass) =>
5590
5591
  const template = document.createElement('template');
5591
5592
 
5592
5593
  template.innerHTML = `
5593
- <${componentName$j}
5594
+ <${componentName$k}
5594
5595
  tabindex="-1"
5595
5596
  slot="input"
5596
- ></${componentName$j}>
5597
+ ></${componentName$k}>
5597
5598
  `;
5598
5599
 
5599
5600
  this.baseElement.appendChild(template.content.cloneNode(true));
5600
5601
 
5601
- this.inputElement = this.shadowRoot.querySelector(componentName$j);
5602
+ this.inputElement = this.shadowRoot.querySelector(componentName$k);
5602
5603
 
5603
5604
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
5604
5605
  includeAttrs: [
@@ -5731,15 +5732,15 @@ const PhoneFieldInputBoxClass = compose(
5731
5732
  ${resetInputLabelPosition('vaadin-text-field')}
5732
5733
  `,
5733
5734
  excludeAttrsSync: ['tabindex'],
5734
- componentName: componentName$i,
5735
+ componentName: componentName$j,
5735
5736
  })
5736
5737
  );
5737
5738
 
5738
- customElements.define(componentName$i, PhoneFieldInputBoxClass);
5739
+ customElements.define(componentName$j, PhoneFieldInputBoxClass);
5739
5740
 
5740
- const componentName$h = getComponentName('new-password-internal');
5741
+ const componentName$i = getComponentName('new-password-internal');
5741
5742
 
5742
- const componentName$g = getComponentName('new-password');
5743
+ const componentName$h = getComponentName('new-password');
5743
5744
 
5744
5745
  const customMixin$1 = (superclass) =>
5745
5746
  class NewPasswordMixinClass extends superclass {
@@ -5749,16 +5750,16 @@ const customMixin$1 = (superclass) =>
5749
5750
  const template = document.createElement('template');
5750
5751
 
5751
5752
  template.innerHTML = `
5752
- <${componentName$h}
5753
+ <${componentName$i}
5753
5754
  name="new-password"
5754
5755
  tabindex="-1"
5755
5756
  slot="input"
5756
- ></${componentName$h}>
5757
+ ></${componentName$i}>
5757
5758
  `;
5758
5759
 
5759
5760
  this.baseElement.appendChild(template.content.cloneNode(true));
5760
5761
 
5761
- this.inputElement = this.shadowRoot.querySelector(componentName$h);
5762
+ this.inputElement = this.shadowRoot.querySelector(componentName$i);
5762
5763
 
5763
5764
  forwardAttrs(this, this.inputElement, {
5764
5765
  includeAttrs: [
@@ -5865,7 +5866,7 @@ const NewPasswordClass = compose(
5865
5866
  }
5866
5867
  `,
5867
5868
  excludeAttrsSync: ['tabindex'],
5868
- componentName: componentName$g,
5869
+ componentName: componentName$h,
5869
5870
  })
5870
5871
  );
5871
5872
 
@@ -5890,7 +5891,7 @@ const commonAttrs = [
5890
5891
 
5891
5892
  const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
5892
5893
 
5893
- const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$h, baseSelector: 'div' });
5894
+ const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$i, baseSelector: 'div' });
5894
5895
 
5895
5896
  class NewPasswordInternal extends BaseInputClass$1 {
5896
5897
  static get observedAttributes() {
@@ -6055,16 +6056,16 @@ class NewPasswordInternal extends BaseInputClass$1 {
6055
6056
  }
6056
6057
  }
6057
6058
 
6058
- customElements.define(componentName$h, NewPasswordInternal);
6059
+ customElements.define(componentName$i, NewPasswordInternal);
6059
6060
 
6060
- customElements.define(componentName$g, NewPasswordClass);
6061
+ customElements.define(componentName$h, NewPasswordClass);
6061
6062
 
6062
- const componentName$f = getComponentName('recaptcha');
6063
+ const componentName$g = getComponentName('recaptcha');
6063
6064
 
6064
6065
  const observedAttributes$1 = ['enabled', 'site-key', 'action', 'enterprise'];
6065
6066
 
6066
6067
  const BaseClass = createBaseClass({
6067
- componentName: componentName$f,
6068
+ componentName: componentName$g,
6068
6069
  baseSelector: ':host > div',
6069
6070
  });
6070
6071
  class RawRecaptcha extends BaseClass {
@@ -6216,7 +6217,7 @@ class RawRecaptcha extends BaseClass {
6216
6217
 
6217
6218
  const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
6218
6219
 
6219
- customElements.define(componentName$f, RecaptchaClass);
6220
+ customElements.define(componentName$g, RecaptchaClass);
6220
6221
 
6221
6222
  const getFileBase64 = (fileObj) => {
6222
6223
  return new Promise((resolve) => {
@@ -6230,7 +6231,7 @@ const getFilename = (fileObj) => {
6230
6231
  return fileObj.name.replace(/^.*\\/, '');
6231
6232
  };
6232
6233
 
6233
- const componentName$e = getComponentName('upload-file');
6234
+ const componentName$f = getComponentName('upload-file');
6234
6235
 
6235
6236
  const observedAttributes = [
6236
6237
  'title',
@@ -6245,7 +6246,7 @@ const observedAttributes = [
6245
6246
  'icon',
6246
6247
  ];
6247
6248
 
6248
- const BaseInputClass = createBaseInputClass({ componentName: componentName$e, baseSelector: ':host > div' });
6249
+ const BaseInputClass = createBaseInputClass({ componentName: componentName$f, baseSelector: ':host > div' });
6249
6250
 
6250
6251
  class RawUploadFile extends BaseInputClass {
6251
6252
  static get observedAttributes() {
@@ -6460,7 +6461,7 @@ const UploadFileClass = compose(
6460
6461
  componentNameValidationMixin
6461
6462
  )(RawUploadFile);
6462
6463
 
6463
- customElements.define(componentName$e, UploadFileClass);
6464
+ customElements.define(componentName$f, UploadFileClass);
6464
6465
 
6465
6466
  const createBaseButtonSelectionGroupInternalClass = (componentName) => {
6466
6467
  class BaseButtonSelectionGroupInternalClass extends createBaseInputClass({
@@ -6558,10 +6559,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
6558
6559
  return BaseButtonSelectionGroupInternalClass;
6559
6560
  };
6560
6561
 
6561
- const componentName$d = getComponentName('button-selection-group-internal');
6562
+ const componentName$e = getComponentName('button-selection-group-internal');
6562
6563
 
6563
6564
  class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
6564
- componentName$d
6565
+ componentName$e
6565
6566
  ) {
6566
6567
  getSelectedNode() {
6567
6568
  return this.items.find((item) => item.hasAttribute('selected'));
@@ -6793,7 +6794,7 @@ const buttonSelectionGroupStyles = `
6793
6794
  ${resetInputCursor('vaadin-text-field')}
6794
6795
  `;
6795
6796
 
6796
- const componentName$c = getComponentName('button-selection-group');
6797
+ const componentName$d = getComponentName('button-selection-group');
6797
6798
 
6798
6799
  const buttonSelectionGroupMixin = (superclass) =>
6799
6800
  class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -6802,19 +6803,19 @@ const buttonSelectionGroupMixin = (superclass) =>
6802
6803
  const template = document.createElement('template');
6803
6804
 
6804
6805
  template.innerHTML = `
6805
- <${componentName$d}
6806
+ <${componentName$e}
6806
6807
  name="button-selection-group"
6807
6808
  slot="input"
6808
6809
  tabindex="-1"
6809
6810
  part="internal-component"
6810
6811
  >
6811
6812
  <slot></slot>
6812
- </${componentName$d}>
6813
+ </${componentName$e}>
6813
6814
  `;
6814
6815
 
6815
6816
  this.baseElement.appendChild(template.content.cloneNode(true));
6816
6817
 
6817
- this.inputElement = this.shadowRoot.querySelector(componentName$d);
6818
+ this.inputElement = this.shadowRoot.querySelector(componentName$e);
6818
6819
 
6819
6820
  forwardAttrs(this, this.inputElement, {
6820
6821
  includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -6839,16 +6840,16 @@ const ButtonSelectionGroupClass = compose(
6839
6840
  wrappedEleName: 'vaadin-text-field',
6840
6841
  style: () => buttonSelectionGroupStyles,
6841
6842
  excludeAttrsSync: ['tabindex'],
6842
- componentName: componentName$c,
6843
+ componentName: componentName$d,
6843
6844
  })
6844
6845
  );
6845
6846
 
6846
- customElements.define(componentName$d, ButtonSelectionGroupInternalClass);
6847
+ customElements.define(componentName$e, ButtonSelectionGroupInternalClass);
6847
6848
 
6848
- const componentName$b = getComponentName('button-selection-group-item');
6849
+ const componentName$c = getComponentName('button-selection-group-item');
6849
6850
 
6850
6851
  class RawSelectItem extends createBaseClass({
6851
- componentName: componentName$b,
6852
+ componentName: componentName$c,
6852
6853
  baseSelector: ':host > descope-button',
6853
6854
  }) {
6854
6855
  get size() {
@@ -6946,14 +6947,14 @@ const ButtonSelectionGroupItemClass = compose(
6946
6947
  componentNameValidationMixin
6947
6948
  )(RawSelectItem);
6948
6949
 
6949
- customElements.define(componentName$b, ButtonSelectionGroupItemClass);
6950
+ customElements.define(componentName$c, ButtonSelectionGroupItemClass);
6950
6951
 
6951
- customElements.define(componentName$c, ButtonSelectionGroupClass);
6952
+ customElements.define(componentName$d, ButtonSelectionGroupClass);
6952
6953
 
6953
- const componentName$a = getComponentName('button-multi-selection-group-internal');
6954
+ const componentName$b = getComponentName('button-multi-selection-group-internal');
6954
6955
 
6955
6956
  class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
6956
- componentName$a
6957
+ componentName$b
6957
6958
  ) {
6958
6959
  #getSelectedNodes() {
6959
6960
  return this.items.filter((item) => item.hasAttribute('selected'));
@@ -7056,7 +7057,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
7056
7057
  }
7057
7058
  }
7058
7059
 
7059
- const componentName$9 = getComponentName('button-multi-selection-group');
7060
+ const componentName$a = getComponentName('button-multi-selection-group');
7060
7061
 
7061
7062
  const buttonMultiSelectionGroupMixin = (superclass) =>
7062
7063
  class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -7065,19 +7066,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
7065
7066
  const template = document.createElement('template');
7066
7067
 
7067
7068
  template.innerHTML = `
7068
- <${componentName$a}
7069
+ <${componentName$b}
7069
7070
  name="button-selection-group"
7070
7071
  slot="input"
7071
7072
  tabindex="-1"
7072
7073
  part="internal-component"
7073
7074
  >
7074
7075
  <slot></slot>
7075
- </${componentName$a}>
7076
+ </${componentName$b}>
7076
7077
  `;
7077
7078
 
7078
7079
  this.baseElement.appendChild(template.content.cloneNode(true));
7079
7080
 
7080
- this.inputElement = this.shadowRoot.querySelector(componentName$a);
7081
+ this.inputElement = this.shadowRoot.querySelector(componentName$b);
7081
7082
 
7082
7083
  forwardAttrs(this, this.inputElement, {
7083
7084
  includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
@@ -7102,13 +7103,13 @@ const ButtonMultiSelectionGroupClass = compose(
7102
7103
  wrappedEleName: 'vaadin-text-field',
7103
7104
  style: () => buttonSelectionGroupStyles,
7104
7105
  excludeAttrsSync: ['tabindex'],
7105
- componentName: componentName$9,
7106
+ componentName: componentName$a,
7106
7107
  })
7107
7108
  );
7108
7109
 
7109
- customElements.define(componentName$a, ButtonMultiSelectionGroupInternalClass);
7110
+ customElements.define(componentName$b, ButtonMultiSelectionGroupInternalClass);
7110
7111
 
7111
- customElements.define(componentName$9, ButtonMultiSelectionGroupClass);
7112
+ customElements.define(componentName$a, ButtonMultiSelectionGroupClass);
7112
7113
 
7113
7114
  /* eslint-disable no-param-reassign */
7114
7115
 
@@ -7137,9 +7138,9 @@ class GridTextColumnClass extends GridSortColumn {
7137
7138
  }
7138
7139
  }
7139
7140
 
7140
- const componentName$8 = getComponentName('grid-text-column');
7141
+ const componentName$9 = getComponentName('grid-text-column');
7141
7142
 
7142
- customElements.define(componentName$8, GridTextColumnClass);
7143
+ customElements.define(componentName$9, GridTextColumnClass);
7143
7144
 
7144
7145
  /* eslint-disable no-param-reassign */
7145
7146
 
@@ -7174,9 +7175,9 @@ class GridCustomColumnClass extends GridTextColumnClass {
7174
7175
 
7175
7176
  /* eslint-disable no-param-reassign */
7176
7177
 
7177
- const componentName$7 = getComponentName('grid-custom-column');
7178
+ const componentName$8 = getComponentName('grid-custom-column');
7178
7179
 
7179
- customElements.define(componentName$7, GridCustomColumnClass);
7180
+ customElements.define(componentName$8, GridCustomColumnClass);
7180
7181
 
7181
7182
  const createCheckboxEle = () => {
7182
7183
  const checkbox = document.createElement('descope-checkbox');
@@ -7235,9 +7236,9 @@ class GridSelectionColumnClass extends GridSelectionColumn {
7235
7236
  }
7236
7237
  }
7237
7238
 
7238
- const componentName$6 = getComponentName('grid-selection-column');
7239
+ const componentName$7 = getComponentName('grid-selection-column');
7239
7240
 
7240
- customElements.define(componentName$6, GridSelectionColumnClass);
7241
+ customElements.define(componentName$7, GridSelectionColumnClass);
7241
7242
 
7242
7243
  const isValidDataType = (data) => {
7243
7244
  const isValid = Array.isArray(data);
@@ -7249,7 +7250,7 @@ const isValidDataType = (data) => {
7249
7250
  return isValid;
7250
7251
  };
7251
7252
 
7252
- const componentName$5 = getComponentName('grid');
7253
+ const componentName$6 = getComponentName('grid');
7253
7254
 
7254
7255
  const GridMixin = (superclass) =>
7255
7256
  class GridMixinClass extends superclass {
@@ -7482,13 +7483,13 @@ const GridClass = compose(
7482
7483
  }
7483
7484
  `,
7484
7485
  excludeAttrsSync: ['columns', 'tabindex'],
7485
- componentName: componentName$5,
7486
+ componentName: componentName$6,
7486
7487
  })
7487
7488
  );
7488
7489
 
7489
- customElements.define(componentName$5, GridClass);
7490
+ customElements.define(componentName$6, GridClass);
7490
7491
 
7491
- const componentName$4 = getComponentName('multi-select-combo-box');
7492
+ const componentName$5 = getComponentName('multi-select-combo-box');
7492
7493
 
7493
7494
  const multiSelectComboBoxMixin = (superclass) =>
7494
7495
  class MultiSelectComboBoxMixinClass extends superclass {
@@ -8092,16 +8093,16 @@ const MultiSelectComboBoxClass = compose(
8092
8093
  // Note: we exclude `placeholder` because the vaadin component observes it and
8093
8094
  // tries to override it, causing us to lose the user set placeholder.
8094
8095
  excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
8095
- componentName: componentName$4,
8096
+ componentName: componentName$5,
8096
8097
  includeForwardProps: ['items', 'renderer', 'selectedItems'],
8097
8098
  })
8098
8099
  );
8099
8100
 
8100
- customElements.define(componentName$4, MultiSelectComboBoxClass);
8101
+ customElements.define(componentName$5, MultiSelectComboBoxClass);
8101
8102
 
8102
- const componentName$3 = getComponentName('badge');
8103
+ const componentName$4 = getComponentName('badge');
8103
8104
 
8104
- class RawBadge extends createBaseClass({ componentName: componentName$3, baseSelector: ':host > div' }) {
8105
+ class RawBadge extends createBaseClass({ componentName: componentName$4, baseSelector: ':host > div' }) {
8105
8106
  constructor() {
8106
8107
  super();
8107
8108
 
@@ -8149,9 +8150,9 @@ const BadgeClass = compose(
8149
8150
  componentNameValidationMixin
8150
8151
  )(RawBadge);
8151
8152
 
8152
- customElements.define(componentName$3, BadgeClass);
8153
+ customElements.define(componentName$4, BadgeClass);
8153
8154
 
8154
- const componentName$2 = getComponentName('modal');
8155
+ const componentName$3 = getComponentName('modal');
8155
8156
 
8156
8157
  const customMixin = (superclass) =>
8157
8158
  class ModalMixinClass extends superclass {
@@ -8250,11 +8251,232 @@ const ModalClass = compose(
8250
8251
  wrappedEleName: 'vaadin-dialog',
8251
8252
  style: () => ``,
8252
8253
  excludeAttrsSync: ['tabindex', 'opened'],
8254
+ componentName: componentName$3,
8255
+ })
8256
+ );
8257
+
8258
+ customElements.define(componentName$3, ModalClass);
8259
+
8260
+ const vaadinContainerClass = window.customElements.get('vaadin-notification-container');
8261
+
8262
+ if (!vaadinContainerClass) {
8263
+ throw new Error('could not get vaadin-notification-container class');
8264
+ }
8265
+
8266
+ class NotificationContainerClass extends vaadinContainerClass {}
8267
+ customElements.define(getComponentName('notification-container'), NotificationContainerClass);
8268
+
8269
+ const componentName$2 = getComponentName('notification-card');
8270
+
8271
+ const notificationCardMixin = (superclass) =>
8272
+ class NotificationCardMixinClass extends superclass {
8273
+ close() {
8274
+ // if animation is not applied to the element, the node will not be removed
8275
+ // from the DOM. We should avoid that. So, if in any case we allow
8276
+ // customizing the animation - we should check if animation is applied
8277
+ // and if it's not applied - remove the element from the DOM and dispatch
8278
+ // `card-closed` event.
8279
+ this.baseElement.addEventListener('animationend', () => {
8280
+ this.remove();
8281
+ this.dispatchEvent(new Event('card-closed'));
8282
+ });
8283
+
8284
+ this.setAttribute('opened', 'false');
8285
+ }
8286
+
8287
+ constructor() {
8288
+ super();
8289
+
8290
+ this.baseElement.innerHTML = `
8291
+ <div part="root">
8292
+ <div part="content">
8293
+ <slot></slot>
8294
+ </div>
8295
+ <div part="close">
8296
+ <slot name="close"></slot>
8297
+ </div>
8298
+ </div>
8299
+ `;
8300
+
8301
+ this.closeEle = this.shadowRoot.querySelector('[part="close"]');
8302
+ }
8303
+
8304
+ init() {
8305
+ super.init?.();
8306
+
8307
+ this.closeEle.onclick = () => {
8308
+ this.close();
8309
+ };
8310
+ }
8311
+ };
8312
+
8313
+ const selectors = {
8314
+ content: () => 'vaadin-notification-card::part(content)',
8315
+ overlay: () => 'vaadin-notification-card::part(overlay)',
8316
+ };
8317
+
8318
+ const NotificationCardClass = compose(
8319
+ createStyleMixin({
8320
+ mappings: {
8321
+ hostMinWidth: { selector: selectors.content, property: 'min-width' },
8322
+ fontFamily: {},
8323
+ fontSize: {},
8324
+ backgroundColor: { selector: selectors.content },
8325
+ textColor: { property: 'color' },
8326
+ boxShadow: {},
8327
+ borderWidth: { selector: selectors.content, property: 'border-width' },
8328
+ borderColor: { selector: selectors.content, property: 'border-color' },
8329
+ borderStyle: { selector: selectors.content, property: 'border-style' },
8330
+ borderRadius: [
8331
+ { selector: selectors.content, property: 'border-radius' },
8332
+ { selector: selectors.overlay, property: 'border-radius' },
8333
+ ],
8334
+ verticalPadding: [
8335
+ { selector: selectors.content, property: 'padding-top' },
8336
+ { selector: selectors.content, property: 'padding-bottom' },
8337
+ ],
8338
+ horizontalPadding: [
8339
+ { selector: selectors.content, property: 'padding-right' },
8340
+ { selector: selectors.content, property: 'padding-left' },
8341
+ ],
8342
+ },
8343
+ }),
8344
+ notificationCardMixin
8345
+ )(
8346
+ createProxy({
8347
+ slots: [],
8348
+ wrappedEleName: 'vaadin-notification-card',
8349
+ style: () => `
8350
+ vaadin-notification-card {
8351
+ box-shadow: none;
8352
+ }
8353
+ ::part(overlay) {
8354
+ box-shadow: none;
8355
+ background: none;
8356
+ }
8357
+
8358
+ [part="close"] {
8359
+ cursor: pointer;
8360
+ display: flex;
8361
+ }
8362
+
8363
+ [part="content"] {
8364
+ display: flex;
8365
+ align-items: center;
8366
+ flex-grow: 1;
8367
+ }
8368
+
8369
+ [part="root"] {
8370
+ display: flex;
8371
+ align-items: center;
8372
+ justify-content: space-between;
8373
+ width: 100%;
8374
+ }
8375
+ `,
8376
+ excludeAttrsSync: ['tabindex'],
8253
8377
  componentName: componentName$2,
8254
8378
  })
8255
8379
  );
8256
8380
 
8257
- customElements.define(componentName$2, ModalClass);
8381
+ customElements.define(componentName$2, NotificationCardClass);
8382
+
8383
+ const componentName$1 = getComponentName('notification');
8384
+
8385
+ const NotificationMixin = (superclass) =>
8386
+ class NotificationMixinClass extends superclass {
8387
+ #card;
8388
+
8389
+ constructor() {
8390
+ super();
8391
+
8392
+ const that = this;
8393
+
8394
+ Object.defineProperty(this.baseElement, '_container', {
8395
+ get() {
8396
+ if (!NotificationMixinClass._container) {
8397
+ NotificationMixinClass._container = document.createElement(
8398
+ 'descope-notification-container'
8399
+ );
8400
+
8401
+ // we're adding the container to body to avoid Vaadin's container's `openChanged`
8402
+ // from breaking when trying to remove it directly from the body.
8403
+ document.body.appendChild(NotificationMixinClass._container);
8404
+ }
8405
+
8406
+ if (!NotificationMixinClass._container.isConnected) {
8407
+ // Then, we're adding the container to the parentNode, which is the desired location
8408
+ // for us on the DOM
8409
+ setTimeout(() => that.parentNode.appendChild(NotificationMixinClass._container));
8410
+ }
8411
+
8412
+ return NotificationMixinClass._container;
8413
+ },
8414
+ });
8415
+
8416
+ Object.defineProperty(this.baseElement, '_card', {
8417
+ get() {
8418
+ return that.#card;
8419
+ },
8420
+ });
8421
+
8422
+ // we want to replace the card with vaadin's remove notification so it will not throw
8423
+ this.baseElement._removeNotificationCard = this.close.bind(this);
8424
+ }
8425
+
8426
+ close() {
8427
+ this.#card.close();
8428
+ }
8429
+
8430
+ init() {
8431
+ super.init?.();
8432
+
8433
+ this.createCard();
8434
+
8435
+ forwardAttrs(this, this.#card);
8436
+ syncAttrs(this.#card, this, { includeAttrs: ['opened'] });
8437
+
8438
+ this.baseElement.renderer = (cardRoot) => {
8439
+ Array.from(this.childNodes).forEach((child) => cardRoot.appendChild(child));
8440
+ };
8441
+ }
8442
+
8443
+ // eslint-disable-next-line class-methods-use-this
8444
+ get isContainerEmpty() {
8445
+ return !NotificationMixinClass._container.children.length;
8446
+ }
8447
+
8448
+ // eslint-disable-next-line class-methods-use-this
8449
+ removeContainer() {
8450
+ NotificationMixinClass._container.remove();
8451
+ }
8452
+
8453
+ removeNotification() {
8454
+ // remove descope-notification from the DOM
8455
+ this.remove();
8456
+ // if needed, remove descope-notification-container
8457
+ if (this.isContainerEmpty) this.removeContainer();
8458
+ }
8459
+
8460
+ createCard() {
8461
+ this.#card = document.createElement('descope-notification-card');
8462
+ this.#card.addEventListener('card-closed', this.removeNotification.bind(this));
8463
+ }
8464
+ };
8465
+
8466
+ const NotificationClass = compose(
8467
+ draggableMixin,
8468
+ componentNameValidationMixin,
8469
+ hoverableMixin,
8470
+ NotificationMixin
8471
+ )(
8472
+ createProxy({
8473
+ wrappedEleName: 'vaadin-notification',
8474
+ excludeAttrsSync: ['tabindex'],
8475
+ componentName: componentName$1,
8476
+ })
8477
+ );
8478
+
8479
+ customElements.define(componentName$1, NotificationClass);
8258
8480
 
8259
8481
  const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
8260
8482
 
@@ -8611,7 +8833,7 @@ const mode = {
8611
8833
  surface: globalRefs$i.colors.surface,
8612
8834
  };
8613
8835
 
8614
- const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$H);
8836
+ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$I);
8615
8837
 
8616
8838
  const button = {
8617
8839
  ...helperTheme$3,
@@ -8727,7 +8949,7 @@ var button$1 = /*#__PURE__*/Object.freeze({
8727
8949
  vars: vars$x
8728
8950
  });
8729
8951
 
8730
- const componentName$1 = getComponentName('input-wrapper');
8952
+ const componentName = getComponentName('input-wrapper');
8731
8953
  const globalRefs$h = getThemeRefs(globals);
8732
8954
 
8733
8955
  const [theme$1, refs, vars$w] = createHelperVars(
@@ -8796,7 +9018,7 @@ const [theme$1, refs, vars$w] = createHelperVars(
8796
9018
  backgroundColor: globalRefs$h.colors.surface.main,
8797
9019
  },
8798
9020
  },
8799
- componentName$1
9021
+ componentName
8800
9022
  );
8801
9023
 
8802
9024
  var inputWrapper = /*#__PURE__*/Object.freeze({
@@ -9120,7 +9342,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
9120
9342
  horizontalAlignment,
9121
9343
  shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
9122
9344
  },
9123
- componentName$B
9345
+ componentName$C
9124
9346
  );
9125
9347
 
9126
9348
  const { shadowColor: shadowColor$1 } = helperRefs$2;
@@ -9391,7 +9613,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
9391
9613
  thickness: '2px',
9392
9614
  spacing: '10px',
9393
9615
  },
9394
- componentName$z
9616
+ componentName$A
9395
9617
  );
9396
9618
 
9397
9619
  const divider = {
@@ -9534,7 +9756,7 @@ const [helperTheme, helperRefs, helperVars] = createHelperVars(
9534
9756
  },
9535
9757
  },
9536
9758
  },
9537
- componentName$C
9759
+ componentName$D
9538
9760
  );
9539
9761
 
9540
9762
  const loaderRadial = {
@@ -9922,118 +10144,6 @@ var grid$1 = /*#__PURE__*/Object.freeze({
9922
10144
  vars: vars$4
9923
10145
  });
9924
10146
 
9925
- const componentName = getComponentName('notification-card');
9926
-
9927
- const notificationCardMixin = (superclass) =>
9928
- class NotificationCardMixinClass extends superclass {
9929
- close() {
9930
- // if animation is not applied to the element, the node will not be removed
9931
- // from the DOM. We should avoid that. So, if in any case we allow
9932
- // customizing the animation - we should check if animation is applied
9933
- // and if it's not applied - remove the element from the DOM and dispatch
9934
- // `card-closed` event.
9935
- this.baseElement.addEventListener('animationend', () => {
9936
- this.remove();
9937
- this.dispatchEvent(new Event('card-closed'));
9938
- });
9939
-
9940
- this.setAttribute('opened', 'false');
9941
- }
9942
-
9943
- constructor() {
9944
- super();
9945
-
9946
- this.baseElement.innerHTML = `
9947
- <div part="root">
9948
- <div part="content">
9949
- <slot></slot>
9950
- </div>
9951
- <div part="close">
9952
- <slot name="close"></slot>
9953
- </div>
9954
- </div>
9955
- `;
9956
-
9957
- this.closeEle = this.shadowRoot.querySelector('[part="close"]');
9958
- }
9959
-
9960
- init() {
9961
- super.init?.();
9962
-
9963
- this.closeEle.onclick = () => {
9964
- this.close();
9965
- };
9966
- }
9967
- };
9968
-
9969
- const selectors = {
9970
- content: () => 'vaadin-notification-card::part(content)',
9971
- overlay: () => 'vaadin-notification-card::part(overlay)',
9972
- };
9973
-
9974
- const NotificationCardClass = compose(
9975
- createStyleMixin({
9976
- mappings: {
9977
- hostMinWidth: { selector: selectors.content, property: 'min-width' },
9978
- fontFamily: {},
9979
- fontSize: {},
9980
- backgroundColor: { selector: selectors.content },
9981
- textColor: { property: 'color' },
9982
- boxShadow: {},
9983
- borderWidth: { selector: selectors.content, property: 'border-width' },
9984
- borderColor: { selector: selectors.content, property: 'border-color' },
9985
- borderStyle: { selector: selectors.content, property: 'border-style' },
9986
- borderRadius: [
9987
- { selector: selectors.content, property: 'border-radius' },
9988
- { selector: selectors.overlay, property: 'border-radius' },
9989
- ],
9990
- verticalPadding: [
9991
- { selector: selectors.content, property: 'padding-top' },
9992
- { selector: selectors.content, property: 'padding-bottom' },
9993
- ],
9994
- horizontalPadding: [
9995
- { selector: selectors.content, property: 'padding-right' },
9996
- { selector: selectors.content, property: 'padding-left' },
9997
- ],
9998
- },
9999
- }),
10000
- notificationCardMixin
10001
- )(
10002
- createProxy({
10003
- slots: [],
10004
- wrappedEleName: 'vaadin-notification-card',
10005
- style: () => `
10006
- vaadin-notification-card {
10007
- box-shadow: none;
10008
- }
10009
- ::part(overlay) {
10010
- box-shadow: none;
10011
- background: none;
10012
- }
10013
-
10014
- [part="close"] {
10015
- cursor: pointer;
10016
- display: flex;
10017
- }
10018
-
10019
- [part="content"] {
10020
- display: flex;
10021
- align-items: center;
10022
- flex-grow: 1;
10023
- }
10024
-
10025
- [part="root"] {
10026
- display: flex;
10027
- align-items: center;
10028
- justify-content: space-between;
10029
- width: 100%;
10030
- }
10031
- `,
10032
- excludeAttrsSync: ['tabindex'],
10033
- componentName,
10034
- })
10035
- );
10036
-
10037
10147
  const globalRefs$2 = getThemeRefs(globals);
10038
10148
  const vars$3 = NotificationCardClass.cssVarList;
10039
10149
 
@@ -10266,5 +10376,5 @@ const vars = Object.keys(components).reduce(
10266
10376
  const defaultTheme = { globals, components: theme };
10267
10377
  const themeVars = { globals: vars$y, components: vars };
10268
10378
 
10269
- export { BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
10379
+ export { BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ComboBoxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
10270
10380
  //# sourceMappingURL=index.esm.js.map