@everymatrix/pam-change-password 1.90.7 → 1.90.8

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 (19) hide show
  1. package/dist/cjs/checkbox-group-input_16.cjs.entry.js +256 -346
  2. package/dist/cjs/{index-3c192635.js → index-72ca6dad.js} +1 -4
  3. package/dist/cjs/index.cjs.js +2 -2
  4. package/dist/cjs/loader.cjs.js +2 -2
  5. package/dist/cjs/{pam-change-password-efbc87ff.js → pam-change-password-9160a539.js} +4 -1
  6. package/dist/cjs/pam-change-password.cjs.js +2 -2
  7. package/dist/esm/checkbox-group-input_16.entry.js +257 -346
  8. package/dist/esm/{index-c666b6e6.js → index-7469517b.js} +1 -4
  9. package/dist/esm/index.js +2 -2
  10. package/dist/esm/loader.js +3 -3
  11. package/dist/esm/{pam-change-password-20667ec7.js → pam-change-password-233d1ebe.js} +2 -2
  12. package/dist/esm/pam-change-password.js +3 -3
  13. package/dist/pam-change-password/checkbox-group-input_16.entry.js +241 -241
  14. package/dist/pam-change-password/{index-c666b6e6.js → index-7469517b.js} +2 -2
  15. package/dist/pam-change-password/index.esm.js +1 -1
  16. package/dist/pam-change-password/pam-change-password-233d1ebe.js +1 -0
  17. package/dist/pam-change-password/pam-change-password.esm.js +1 -1
  18. package/package.json +1 -1
  19. package/dist/pam-change-password/pam-change-password-20667ec7.js +0 -1
package/dist/cjs/checkbox-group-input_16.cjs.entry.js CHANGED
@@ -2,8 +2,8 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-3c192635.js');
6
- const pamChangePassword = require('./pam-change-password-efbc87ff.js');
5
+ const index = require('./index-72ca6dad.js');
6
+ const pamChangePassword = require('./pam-change-password-9160a539.js');
7
7
 
8
8
  const DEFAULT_LANGUAGE = 'en';
9
9
  const TRANSLATIONS = {
@@ -388,11 +388,6 @@ const CheckboxGroupInput = class {
388
388
  this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
389
389
  this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
390
390
  this.value = null;
391
- this.setClientStyling = () => {
392
- let sheet = document.createElement('style');
393
- sheet.innerHTML = this.clientStyling;
394
- this.stylingContainer.prepend(sheet);
395
- };
396
391
  this.name = undefined;
397
392
  this.displayName = undefined;
398
393
  this.defaultValue = '';
@@ -403,16 +398,17 @@ const CheckboxGroupInput = class {
403
398
  this.language = undefined;
404
399
  this.emitValue = undefined;
405
400
  this.clientStyling = '';
401
+ this.mbSource = undefined;
406
402
  this.errorMessage = undefined;
407
403
  this.isValid = undefined;
408
- this.limitStylingAppends = false;
409
404
  this.showTooltip = false;
410
405
  this.selectedValues = [];
411
406
  this.showCheckboxes = false;
412
407
  }
413
- handleStylingChange(newValue, oldValue) {
414
- if (newValue !== oldValue)
415
- this.setClientStyling();
408
+ handleClientStylingChange(newValue, oldValue) {
409
+ if (newValue !== oldValue) {
410
+ pamChangePassword.setClientStyling(this.stylingContainer, this.clientStyling);
411
+ }
416
412
  }
417
413
  validityChanged() {
418
414
  this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -444,16 +440,17 @@ const CheckboxGroupInput = class {
444
440
  this.showTooltip = false;
445
441
  }
446
442
  }
447
- componentDidRender() {
448
- // start custom styling area
449
- if (!this.limitStylingAppends && this.stylingContainer) {
450
- if (this.clientStyling)
451
- this.setClientStyling();
452
- this.limitStylingAppends = true;
443
+ handleClientStyling() {
444
+ if (window.emMessageBus !== undefined) {
445
+ this.stylingSubscription = pamChangePassword.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
446
+ return;
447
+ }
448
+ if (this.clientStyling) {
449
+ pamChangePassword.setClientStyling(this.stylingContainer, this.clientStyling);
453
450
  }
454
- // end custom styling area
455
451
  }
456
452
  componentDidLoad() {
453
+ this.handleClientStyling();
457
454
  this.inputReference = this.element.shadowRoot.querySelector('input');
458
455
  // For now this input has no validation. Send isValid as true immediately.
459
456
  //@TODO: add validation logic to it, if business reason arises.
@@ -490,14 +487,14 @@ const CheckboxGroupInput = class {
490
487
  return (index.h("label", { class: 'checkbox__label', htmlFor: `${this.name}__input`, slot: 'label' }, index.h("div", { class: 'checkbox__label-text', innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
491
488
  }
492
489
  render() {
493
- return index.h("div", { key: '9985f4050655bc2233090f63abb0e22f2fe0b556', class: `checkboxgroup__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '9922e45ae7ee74b137ffc8552b3d714b7e3b1f59', class: 'checkboxgroup__wrapper--flex' }, index.h("vaadin-checkbox", { key: 'f18bae7c3ee6df76edcde75924eb1ad51a227443', class: 'checkbox__input', checked: this.selectedValues.length === this.options.length || this.defaultValue === 'true', indeterminate: this.selectedValues.length > 0 && this.selectedValues.length < this.options.length, onChange: (e) => this.handleParentCheckbox(e) }, this.renderLabel()), this.tooltip &&
494
- index.h("img", { key: '3dc2ce07e4d5f8de7ed4707b5e140fb4752ca86b', class: 'checkboxgroup__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), index.h("small", { key: 'd55f25f75aa20007ff58cf45b6632517f49b6c00', class: 'checkboxgroup__error-message' }, this.errorMessage), this.showCheckboxes && (index.h("vaadin-checkbox-group", { key: '210c3cc2868a07a403494e04336c4f3091eea0e4', theme: "vertical", value: this.selectedValues, "on-value-changed": (event) => {
490
+ return index.h("div", { key: '342900ae923094f2746fd43917743d01efba942e', class: `checkboxgroup__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '8f3b470274047b355741b438a4e15c7c46504f5a', class: 'checkboxgroup__wrapper--flex' }, index.h("vaadin-checkbox", { key: 'c7a74f9da877304f4d71607d58eba90dd0a29de7', class: 'checkbox__input', checked: this.selectedValues.length === this.options.length || this.defaultValue === 'true', indeterminate: this.selectedValues.length > 0 && this.selectedValues.length < this.options.length, onChange: (e) => this.handleParentCheckbox(e) }, this.renderLabel()), this.tooltip &&
491
+ index.h("img", { key: '75d807ad544e043a2e3beed46bf0c7dfa2125324', class: 'checkboxgroup__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), index.h("small", { key: '4b17e1e613c7561fb3c99f334926544ef2ba787a', class: 'checkboxgroup__error-message' }, this.errorMessage), this.showCheckboxes && (index.h("vaadin-checkbox-group", { key: '9a8d573a7cb48bb2d68cceec5f39f1e0886ea05f', theme: "vertical", value: this.selectedValues, "on-value-changed": (event) => {
495
492
  this.selectedValues = event.detail.value;
496
493
  } }, this.options.map((checkbox) => index.h("vaadin-checkbox", { class: 'checkbox__input', name: checkbox.name, value: checkbox.name, label: checkbox.displayName })))));
497
494
  }
498
495
  get element() { return index.getElement(this); }
499
496
  static get watchers() { return {
500
- "clientStyling": ["handleStylingChange"],
497
+ "clientStyling": ["handleClientStylingChange"],
501
498
  "isValid": ["validityChanged"],
502
499
  "selectedValues": ["setValue"],
503
500
  "emitValue": ["emitValueHandler"]
@@ -514,11 +511,6 @@ const CheckboxInput = class {
514
511
  this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
515
512
  this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
516
513
  this.value = '';
517
- this.setClientStyling = () => {
518
- let sheet = document.createElement('style');
519
- sheet.innerHTML = this.clientStyling;
520
- this.stylingContainer.prepend(sheet);
521
- };
522
514
  this.name = undefined;
523
515
  this.displayName = undefined;
524
516
  this.defaultValue = '';
@@ -528,14 +520,15 @@ const CheckboxInput = class {
528
520
  this.language = undefined;
529
521
  this.emitValue = undefined;
530
522
  this.clientStyling = '';
523
+ this.mbSource = undefined;
531
524
  this.errorMessage = undefined;
532
525
  this.isValid = undefined;
533
- this.limitStylingAppends = false;
534
526
  this.showTooltip = false;
535
527
  }
536
- handleStylingChange(newValue, oldValue) {
537
- if (newValue !== oldValue)
538
- this.setClientStyling();
528
+ handleClientStylingChange(newValue, oldValue) {
529
+ if (newValue !== oldValue) {
530
+ pamChangePassword.setClientStyling(this.stylingContainer, this.clientStyling);
531
+ }
539
532
  }
540
533
  validityChanged() {
541
534
  this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -560,16 +553,17 @@ const CheckboxInput = class {
560
553
  this.showTooltip = false;
561
554
  }
562
555
  }
563
- componentDidRender() {
564
- // start custom styling area
565
- if (!this.limitStylingAppends && this.stylingContainer) {
566
- if (this.clientStyling)
567
- this.setClientStyling();
568
- this.limitStylingAppends = true;
556
+ handleClientStyling() {
557
+ if (window.emMessageBus !== undefined) {
558
+ this.stylingSubscription = pamChangePassword.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
559
+ return;
560
+ }
561
+ if (this.clientStyling) {
562
+ pamChangePassword.setClientStyling(this.stylingContainer, this.clientStyling);
569
563
  }
570
- // end custom styling area
571
564
  }
572
565
  componentDidLoad() {
566
+ this.handleClientStyling();
573
567
  this.inputReference = this.vaadinCheckbox.querySelector('input');
574
568
  if (this.defaultValue) {
575
569
  this.value = this.defaultValue;
@@ -604,10 +598,10 @@ const CheckboxInput = class {
604
598
  return null;
605
599
  }
606
600
  render() {
607
- return (index.h("div", { key: '80ed581cec5bb009ea5ea009f11c6453fe24ef7b', class: `checkbox__wrapper ${this.name}__input`, ref: (el) => (this.stylingContainer = el) }, index.h("vaadin-checkbox", { key: '42d793f607af77435f629218f9bdac7736522bc3', class: "checkbox__input", required: this.validation.mandatory, checked: this.defaultValue === 'true', onChange: (e) => this.handleCheckbox(e), "error-message": !this.isValid && this.errorMessage, ref: (el) => (this.vaadinCheckbox = el) }, this.renderLabel()), this.tooltip && (index.h("img", { key: 'ce3870810ede8f3905fd8c07c0892ab0d909bab5', class: "checkboxgroup__tooltip-icon", src: tooltipIconSvg, alt: "", ref: (el) => (this.tooltipIconReference = el), onClick: () => (this.showTooltip = !this.showTooltip) })), this.renderTooltip()));
601
+ return (index.h("div", { key: 'a8d8bf6aa2001b6aee44d728a198244819ae169e', class: `checkbox__wrapper ${this.name}__input`, ref: (el) => (this.stylingContainer = el) }, index.h("vaadin-checkbox", { key: '13a5589a78bef4277922535e59c5718d36b1f318', class: "checkbox__input", required: this.validation.mandatory, checked: this.defaultValue === 'true', onChange: (e) => this.handleCheckbox(e), "error-message": !this.isValid && this.errorMessage, ref: (el) => (this.vaadinCheckbox = el) }, this.renderLabel()), this.tooltip && (index.h("img", { key: '008bb9a318c914b4b40e80b15080f7f174cc1262', class: "checkboxgroup__tooltip-icon", src: tooltipIconSvg, alt: "", ref: (el) => (this.tooltipIconReference = el), onClick: () => (this.showTooltip = !this.showTooltip) })), this.renderTooltip()));
608
602
  }
609
603
  static get watchers() { return {
610
- "clientStyling": ["handleStylingChange"],
604
+ "clientStyling": ["handleClientStylingChange"],
611
605
  "isValid": ["validityChanged"],
612
606
  "emitValue": ["emitValueHandler"]
613
607
  }; }
@@ -5998,11 +5992,6 @@ const DateInput = class {
5998
5992
  const date = parse(inputValue, this.dateFormat, new Date());
5999
5993
  return { year: date.getFullYear(), month: date.getMonth(), day: date.getDate() };
6000
5994
  };
6001
- this.setClientStyling = () => {
6002
- let sheet = document.createElement('style');
6003
- sheet.innerHTML = this.clientStyling;
6004
- this.stylingContainer.prepend(sheet);
6005
- };
6006
5995
  this.handleDocumentIdUpdate = (e) => {
6007
5996
  if (this.name !== CONSTANTS.BIRTHDATE) {
6008
5997
  return;
@@ -6089,9 +6078,9 @@ const DateInput = class {
6089
6078
  this.emitOnClick = false;
6090
6079
  this.enableSouthAfricanMode = undefined;
6091
6080
  this.enableManualDateInput = false;
6081
+ this.mbSource = undefined;
6092
6082
  this.errorMessage = undefined;
6093
6083
  this.isValid = undefined;
6094
- this.limitStylingAppends = false;
6095
6084
  this.showTooltip = false;
6096
6085
  }
6097
6086
  get formattedValue() {
@@ -6100,9 +6089,10 @@ const DateInput = class {
6100
6089
  const parsedDate = parse(this.value, 'yyyy-MM-dd', new Date());
6101
6090
  return format(parsedDate, this.dateFormat);
6102
6091
  }
6103
- handleStylingChange(newValue, oldValue) {
6104
- if (newValue !== oldValue)
6105
- this.setClientStyling();
6092
+ handleClientStylingChange(newValue, oldValue) {
6093
+ if (newValue !== oldValue) {
6094
+ pamChangePassword.setClientStyling(this.stylingContainer, this.clientStyling);
6095
+ }
6106
6096
  }
6107
6097
  validityChanged() {
6108
6098
  this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -6140,17 +6130,18 @@ const DateInput = class {
6140
6130
  this.minDate = parse(((_a = this.validation.min) === null || _a === void 0 ? void 0 : _a.toString()) || '', 'yyyy-MM-dd', new Date());
6141
6131
  this.maxDate = parse(((_b = this.validation.max) === null || _b === void 0 ? void 0 : _b.toString()) || '', 'yyyy-MM-dd', new Date());
6142
6132
  }
6143
- componentDidRender() {
6144
- // start custom styling area
6145
- if (!this.limitStylingAppends && this.stylingContainer) {
6146
- if (this.clientStyling)
6147
- this.setClientStyling();
6148
- this.limitStylingAppends = true;
6133
+ handleClientStyling() {
6134
+ if (window.emMessageBus !== undefined) {
6135
+ this.stylingSubscription = pamChangePassword.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
6136
+ return;
6137
+ }
6138
+ if (this.clientStyling) {
6139
+ pamChangePassword.setClientStyling(this.stylingContainer, this.clientStyling);
6149
6140
  }
6150
- // end custom styling area
6151
6141
  }
6152
6142
  componentDidLoad() {
6153
6143
  var _a;
6144
+ this.handleClientStyling();
6154
6145
  this.datePicker = this.element.shadowRoot.querySelector('vaadin-date-picker');
6155
6146
  this.inputReference = this.element.shadowRoot.querySelector('input');
6156
6147
  if (this.datePicker) {
@@ -6305,12 +6296,12 @@ const DateInput = class {
6305
6296
  if (this.touched) {
6306
6297
  invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
6307
6298
  }
6308
- return index.h("div", { key: 'f8011520dee6f11203da18cc27a6f278283daace', class: `date__wrapper ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("label", { key: 'e1e21a234b5f20f05a5c2d6eb38095bb50748ad6', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, index.h("span", { key: '8dbd7ecb2e8fc686afc02a15a247f5f78484ec22', class: this.validation.mandatory ? 'date__label--required' : '' })), index.h("vaadin-date-picker", { key: '40b5106d0b80799cd81b154889461fa5378264b8', id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass} ${this.enableManualDateInput && 'date__manual-mode'}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e), onValidated: () => this.handleValidated(), autoOpenDisabled: this.enableManualDateInput }), index.h("small", { key: 'cd96dd3bb68896ea44d5071d783a7a2e2d75738f', class: 'date__error-message' }, this.errorMessage), this.tooltip &&
6309
- index.h("img", { key: '971aeba271d68264bb9ff23b86bed878699d81b1', class: 'date__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
6299
+ return index.h("div", { key: 'ffff8be16fb22a41ea8c5168a79e40b9f410c63b', class: `date__wrapper ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("label", { key: '60da1ad0bc4cc7757e6f1096866667a97bd146b5', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, index.h("span", { key: '450b4638efa34f4490035b0d99b0b186f053a2d0', class: this.validation.mandatory ? 'date__label--required' : '' })), index.h("vaadin-date-picker", { key: '421875a710bb4508e3218d28bf2c28dcd0e9793b', id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass} ${this.enableManualDateInput && 'date__manual-mode'}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e), onValidated: () => this.handleValidated(), autoOpenDisabled: this.enableManualDateInput }), index.h("small", { key: '33a6fed8057a84cb648f94a318c3ec0b1e495fff', class: 'date__error-message' }, this.errorMessage), this.tooltip &&
6300
+ index.h("img", { key: 'd91fcd13e1ae384b67b6d478834b65136ab77b77', class: 'date__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
6310
6301
  }
6311
6302
  get element() { return index.getElement(this); }
6312
6303
  static get watchers() { return {
6313
- "clientStyling": ["handleStylingChange"],
6304
+ "clientStyling": ["handleClientStylingChange"],
6314
6305
  "isValid": ["validityChanged"],
6315
6306
  "emitValue": ["emitValueHandler"],
6316
6307
  "enableSouthAfricanMode": ["handleCustomRegistrationChange"]
@@ -6345,11 +6336,6 @@ const EmailInput = class {
6345
6336
  this.errorMessage = this.setErrorMessage();
6346
6337
  this.touched = true;
6347
6338
  };
6348
- this.setClientStyling = () => {
6349
- let sheet = document.createElement('style');
6350
- sheet.innerHTML = this.clientStyling;
6351
- this.stylingContainer.prepend(sheet);
6352
- };
6353
6339
  this.name = undefined;
6354
6340
  this.displayName = undefined;
6355
6341
  this.placeholder = undefined;
@@ -6361,14 +6347,15 @@ const EmailInput = class {
6361
6347
  this.emitValue = undefined;
6362
6348
  this.isDuplicateInput = undefined;
6363
6349
  this.clientStyling = '';
6350
+ this.mbSource = undefined;
6364
6351
  this.errorMessage = undefined;
6365
6352
  this.isValid = undefined;
6366
- this.limitStylingAppends = false;
6367
6353
  this.showTooltip = false;
6368
6354
  }
6369
- handleStylingChange(newValue, oldValue) {
6370
- if (newValue !== oldValue)
6371
- this.setClientStyling();
6355
+ handleClientStylingChange(newValue, oldValue) {
6356
+ if (newValue !== oldValue) {
6357
+ pamChangePassword.setClientStyling(this.stylingContainer, this.clientStyling);
6358
+ }
6372
6359
  }
6373
6360
  validityChanged() {
6374
6361
  this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -6403,16 +6390,17 @@ const EmailInput = class {
6403
6390
  connectedCallback() {
6404
6391
  this.validationPattern = this.setPattern();
6405
6392
  }
6406
- componentDidRender() {
6407
- // start custom styling area
6408
- if (!this.limitStylingAppends && this.stylingContainer) {
6409
- if (this.clientStyling)
6410
- this.setClientStyling();
6411
- this.limitStylingAppends = true;
6393
+ handleClientStyling() {
6394
+ if (window.emMessageBus !== undefined) {
6395
+ this.stylingSubscription = pamChangePassword.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
6396
+ return;
6397
+ }
6398
+ if (this.clientStyling) {
6399
+ pamChangePassword.setClientStyling(this.stylingContainer, this.clientStyling);
6412
6400
  }
6413
- // end custom styling area
6414
6401
  }
6415
6402
  componentDidLoad() {
6403
+ this.handleClientStyling();
6416
6404
  this.isValid = this.setValidity();
6417
6405
  if (this.defaultValue) {
6418
6406
  this.value = this.defaultValue;
@@ -6458,11 +6446,11 @@ const EmailInput = class {
6458
6446
  if (this.touched) {
6459
6447
  invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
6460
6448
  }
6461
- return index.h("div", { key: '723df8f3a6e8c57fe19082400971daf50f5c981d', class: `email__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '581d6e02b63d1c659ae44424518f64db450d5365', class: 'email__wrapper--flex' }, index.h("label", { key: '11e6a848f6f04903989b3ab2075865f6e279c087', class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '73e11520cffbddda1a2aeb4b560e7f4cf456e2fb', class: 'email__wrapper--relative' }, this.tooltip &&
6462
- index.h("img", { key: 'e8571ce14b9b98311daf1712ebde7d6da9b5a6a6', class: 'email__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: 'dd05ef0b4d906598c6d5775a78ccbdc9ea81cb8c', id: `${this.name}__input`, type: 'email', class: `email__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: '0d2d41207f8274d8c6f69143131265ef5b458689', class: 'email__error-message' }, this.errorMessage));
6449
+ return index.h("div", { key: 'f852525fe8d8b695e638fdd83e8b0c2c20d98771', class: `email__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'd6a6dec4e76ba1fbe15bed09f82cecde12cabe1a', class: 'email__wrapper--flex' }, index.h("label", { key: '4498ae1bac287cb80544c4d743afad2ec678e3bd', class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'e54d1258e48f54304a553cffb83466e4a4fadb4c', class: 'email__wrapper--relative' }, this.tooltip &&
6450
+ index.h("img", { key: '29d7b95f22c8cb70d505f74a7ea18284faa908ee', class: 'email__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: '08754b178e395f26c1d8a61ff667b91df3fb0ec7', id: `${this.name}__input`, type: 'email', class: `email__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: '3024a57f5d0897f34013eb4397d78babc2333192', class: 'email__error-message' }, this.errorMessage));
6463
6451
  }
6464
6452
  static get watchers() { return {
6465
- "clientStyling": ["handleStylingChange"],
6453
+ "clientStyling": ["handleClientStylingChange"],
6466
6454
  "isValid": ["validityChanged"],
6467
6455
  "emitValue": ["emitValueHandler"]
6468
6456
  }; }
@@ -13136,32 +13124,6 @@ const GeneralInput = class {
13136
13124
  constructor(hostRef) {
13137
13125
  index.registerInstance(this, hostRef);
13138
13126
  this.registrationWidgetLoaded = index.createEvent(this, "registrationWidgetLoaded", 7);
13139
- this.setClientStyling = () => {
13140
- let sheet = document.createElement('style');
13141
- sheet.innerHTML = this.clientStyling;
13142
- this.host.shadowRoot.prepend(sheet);
13143
- };
13144
- this.setStreamStyling = (domain) => {
13145
- if (window.emMessageBus) {
13146
- const sheet = document.createElement('style');
13147
- this.stylingSubscription = window.emMessageBus.subscribe(domain, (data) => {
13148
- sheet.innerHTML = data;
13149
- this.clientStyling = data;
13150
- this.host.shadowRoot.prepend(sheet);
13151
- });
13152
- }
13153
- };
13154
- this.setClientStylingURL = () => {
13155
- let url = new URL(this.clientStylingUrl);
13156
- let cssFile = document.createElement('style');
13157
- fetch(url.href)
13158
- .then((res) => res.text())
13159
- .then((data) => {
13160
- cssFile.innerHTML = data;
13161
- this.clientStyling = data;
13162
- setTimeout(() => { this.host.shadowRoot.prepend(cssFile); }, 1);
13163
- });
13164
- };
13165
13127
  this.handleClick = (event) => {
13166
13128
  if (this.emitOnClick) {
13167
13129
  event.stopPropagation();
@@ -13198,15 +13160,17 @@ const GeneralInput = class {
13198
13160
  this.enableManualDateInput = false;
13199
13161
  this.pinAttemptsExceeded = undefined;
13200
13162
  this.mbSource = undefined;
13201
- this.limitStylingAppends = false;
13202
13163
  }
13203
- handleStylingChange(newValue, oldValue) {
13204
- if (newValue !== oldValue)
13205
- this.setClientStyling();
13164
+ handleClientStylingChange(newValue, oldValue) {
13165
+ if (newValue !== oldValue) {
13166
+ pamChangePassword.setClientStyling(this.stylingContainer, this.clientStyling);
13167
+ }
13206
13168
  }
13207
- handleStylingUrlChange(newValue, oldValue) {
13208
- if (newValue !== oldValue)
13209
- this.setClientStylingURL();
13169
+ handleClientStylingChangeURL(newValue, oldValue) {
13170
+ if (newValue !== oldValue) {
13171
+ if (this.clientStylingUrl)
13172
+ pamChangePassword.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
13173
+ }
13210
13174
  }
13211
13175
  connectedCallback() {
13212
13176
  if (this.translationUrl) {
@@ -13217,51 +13181,50 @@ const GeneralInput = class {
13217
13181
  this.stylingSubscription && this.stylingSubscription.unsubscribe();
13218
13182
  }
13219
13183
  componentDidLoad() {
13184
+ this.handleClientStyling();
13220
13185
  this.registrationWidgetLoaded.emit();
13221
13186
  window.postMessage({ type: 'registrationWidgetLoaded' }, window.location.href);
13222
- if (!this.limitStylingAppends && this.host) {
13223
- if (window.emMessageBus != undefined) {
13224
- this.setStreamStyling(`${this.mbSource}.Style`);
13225
- }
13226
- else {
13227
- if (this.clientStyling)
13228
- this.setClientStyling();
13229
- if (this.clientStylingUrl)
13230
- this.setClientStylingURL();
13231
- this.limitStylingAppends = true;
13232
- }
13187
+ }
13188
+ handleClientStyling() {
13189
+ if (window.emMessageBus !== undefined) {
13190
+ this.stylingSubscription = pamChangePassword.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
13191
+ return;
13233
13192
  }
13193
+ if (this.clientStyling)
13194
+ pamChangePassword.setClientStyling(this.stylingContainer, this.clientStyling);
13195
+ if (this.clientStylingUrl)
13196
+ pamChangePassword.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
13234
13197
  }
13235
13198
  renderInput() {
13236
13199
  var _a;
13237
13200
  switch ((_a = this.type) === null || _a === void 0 ? void 0 : _a.toLowerCase()) {
13238
13201
  case 'text':
13239
13202
  if (this.haspostalcodelookup && this.name === 'PostalCode') {
13240
- return index.h("postalcode-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, postalcodelength: this.postalcodelength, addresses: this.addresses, ignoreCountry: this.ignoreCountry });
13203
+ return index.h("postalcode-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, postalcodelength: this.postalcodelength, addresses: this.addresses, ignoreCountry: this.ignoreCountry, "mb-source": this.mbSource });
13241
13204
  }
13242
13205
  else {
13243
- return index.h("text-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, haspostalcodelookup: this.haspostalcodelookup, "enable-south-african-mode": this.enableSouthAfricanMode });
13206
+ return index.h("text-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, haspostalcodelookup: this.haspostalcodelookup, "enable-south-african-mode": this.enableSouthAfricanMode, "mb-source": this.mbSource });
13244
13207
  }
13245
13208
  case 'email':
13246
- return index.h("email-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder });
13209
+ return index.h("email-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, "mb-source": this.mbSource });
13247
13210
  case 'number':
13248
- return index.h("number-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder });
13211
+ return index.h("number-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, "mb-source": this.mbSource });
13249
13212
  case 'checkbox':
13250
- return index.h("checkbox-input", { name: this.name, displayName: this.displayName, validation: this.validation, emitValue: this.emitValue, defaultValue: this.defaultValue, autofilled: this.autofilled, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip });
13213
+ return index.h("checkbox-input", { name: this.name, displayName: this.displayName, validation: this.validation, emitValue: this.emitValue, defaultValue: this.defaultValue, autofilled: this.autofilled, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, "mb-source": this.mbSource });
13251
13214
  case 'checkboxgroup':
13252
- return index.h("checkbox-group-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, options: this.options });
13215
+ return index.h("checkbox-group-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, options: this.options, "mb-source": this.mbSource });
13253
13216
  case 'togglecheckbox':
13254
- return index.h("toggle-checkbox-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, options: this.options, "emit-on-click": this.emitOnClick });
13217
+ return index.h("toggle-checkbox-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, options: this.options, "emit-on-click": this.emitOnClick, "mb-source": this.mbSource });
13255
13218
  case 'datetime':
13256
- return index.h("date-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, dateFormat: this.dateFormat, "emit-on-click": this.emitOnClick, "enable-south-african-mode": this.enableSouthAfricanMode, "enable-manual-date-input": this.enableManualDateInput });
13219
+ return index.h("date-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, dateFormat: this.dateFormat, "emit-on-click": this.emitOnClick, "enable-south-african-mode": this.enableSouthAfricanMode, "enable-manual-date-input": this.enableManualDateInput, "mb-source": this.mbSource });
13257
13220
  case 'password':
13258
- return index.h("password-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput, hidePasswordComplexity: this.hidePasswordComplexity, "no-validation": this.noValidation, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, "enable-south-african-mode": this.enableSouthAfricanMode });
13221
+ return index.h("password-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput, hidePasswordComplexity: this.hidePasswordComplexity, "no-validation": this.noValidation, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, "enable-south-african-mode": this.enableSouthAfricanMode, "mb-source": this.mbSource });
13259
13222
  case 'radio':
13260
- return index.h("radio-input", { name: this.name, displayName: this.displayName, optionsGroup: this.options, validation: this.validation, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling });
13223
+ return index.h("radio-input", { name: this.name, displayName: this.displayName, optionsGroup: this.options, validation: this.validation, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, "mb-source": this.mbSource });
13261
13224
  case 'tel':
13262
- return index.h("tel-input", { name: this.name, action: this.action, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, emitValue: this.emitValue, language: this.language, autofilled: this.autofilled, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder });
13225
+ return index.h("tel-input", { name: this.name, action: this.action, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, emitValue: this.emitValue, language: this.language, autofilled: this.autofilled, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, "mb-source": this.mbSource });
13263
13226
  case 'dropdown':
13264
- return index.h("select-input", { name: this.name, action: this.action, defaultValue: this.defaultValue, displayName: this.displayName, options: this.options, validation: this.validation, emitValue: this.emitValue, autofilled: this.autofilled, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder });
13227
+ return index.h("select-input", { name: this.name, action: this.action, defaultValue: this.defaultValue, displayName: this.displayName, options: this.options, validation: this.validation, emitValue: this.emitValue, autofilled: this.autofilled, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, "mb-source": this.mbSource });
13265
13228
  case 'twofa':
13266
13229
  return index.h("twofa-input", { name: this.name, displayName: this.displayName, validation: this.validation, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, destination: this.twofaDestination, "resend-interval-seconds": this.twofaResendIntervalSeconds, "enable-south-african-mode": this.enableSouthAfricanMode, "pin-attempts-exceeded": this.pinAttemptsExceeded, "mb-source": this.mbSource });
13267
13230
  case 'label':
@@ -13276,12 +13239,12 @@ const GeneralInput = class {
13276
13239
  }
13277
13240
  }
13278
13241
  render() {
13279
- return (index.h(index.Host, { key: '7a7805c641082de9c5da4859187765002ab6f32d', class: `general-input--${this.name}`, onClick: this.handleClick }, this.renderInput()));
13242
+ return (index.h(index.Host, { key: '12e3e43442ba3fd4a47bbc5c05456eb019405b1e', class: `general-input--${this.name}`, onClick: this.handleClick }, this.renderInput()));
13280
13243
  }
13281
13244
  get host() { return index.getElement(this); }
13282
13245
  static get watchers() { return {
13283
- "clientStyling": ["handleStylingChange"],
13284
- "clientStylingUrl": ["handleStylingUrlChange"]
13246
+ "clientStyling": ["handleClientStylingChange"],
13247
+ "clientStylingUrl": ["handleClientStylingChangeURL"]
13285
13248
  }; }
13286
13249
  };
13287
13250
  GeneralInput.style = GeneralInputStyle0;
@@ -13313,11 +13276,6 @@ const NumberInput = class {
13313
13276
  this.errorMessage = this.setErrorMessage();
13314
13277
  this.touched = true;
13315
13278
  };
13316
- this.setClientStyling = () => {
13317
- let sheet = document.createElement('style');
13318
- sheet.innerHTML = this.clientStyling;
13319
- this.stylingContainer.prepend(sheet);
13320
- };
13321
13279
  this.name = undefined;
13322
13280
  this.displayName = undefined;
13323
13281
  this.placeholder = undefined;
@@ -13328,14 +13286,15 @@ const NumberInput = class {
13328
13286
  this.language = undefined;
13329
13287
  this.emitValue = undefined;
13330
13288
  this.clientStyling = '';
13289
+ this.mbSource = undefined;
13331
13290
  this.errorMessage = undefined;
13332
13291
  this.isValid = undefined;
13333
- this.limitStylingAppends = false;
13334
13292
  this.showTooltip = false;
13335
13293
  }
13336
- handleStylingChange(newValue, oldValue) {
13337
- if (newValue !== oldValue)
13338
- this.setClientStyling();
13294
+ handleClientStylingChange(newValue, oldValue) {
13295
+ if (newValue !== oldValue) {
13296
+ pamChangePassword.setClientStyling(this.stylingContainer, this.clientStyling);
13297
+ }
13339
13298
  }
13340
13299
  validityChanged() {
13341
13300
  this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -13363,16 +13322,17 @@ const NumberInput = class {
13363
13322
  connectedCallback() {
13364
13323
  this.validationPattern = this.setPattern();
13365
13324
  }
13366
- componentDidRender() {
13367
- // start custom styling area
13368
- if (!this.limitStylingAppends && this.stylingContainer) {
13369
- if (this.clientStyling)
13370
- this.setClientStyling();
13371
- this.limitStylingAppends = true;
13325
+ handleClientStyling() {
13326
+ if (window.emMessageBus !== undefined) {
13327
+ this.stylingSubscription = pamChangePassword.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
13328
+ return;
13329
+ }
13330
+ if (this.clientStyling) {
13331
+ pamChangePassword.setClientStyling(this.stylingContainer, this.clientStyling);
13372
13332
  }
13373
- // end custom styling area
13374
13333
  }
13375
13334
  componentDidLoad() {
13335
+ this.handleClientStyling();
13376
13336
  this.isValid = this.setValidity();
13377
13337
  if (this.defaultValue) {
13378
13338
  this.value = this.defaultValue;
@@ -13413,11 +13373,11 @@ const NumberInput = class {
13413
13373
  if (this.touched) {
13414
13374
  invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
13415
13375
  }
13416
- return index.h("div", { key: 'aea370172d0e55d32dc665a1c340c734334e1caf', class: `number__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '10e16d10b956c5a647bc68ecffbc2eb0b06fa92a', class: 'number__wrapper--flex' }, index.h("label", { key: '0827d47c7278c6fdf8ebdd1dff03b91c39be6812', class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'cb868d01e8555f5e3333240f54d86f0a56641d0f', class: 'number__wrapper--relative' }, this.tooltip &&
13417
- index.h("img", { key: '1aa2b16b59f4bfd4b1dadf2641ec6cb4cfc251bf', class: 'number__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: '365b70a2eb333878d367d1d414ee0e296c91b3ec', ref: (el) => this.inputReference = el, type: "number", value: this.defaultValue, readOnly: this.autofilled, id: `${this.name}__input`, class: `number__input ${invalidClass}`, pattern: this.validationPattern, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: 'a8639df7ef1e98807a7daffc9da4afd347b1c292', class: 'number__error-message' }, this.errorMessage));
13376
+ return index.h("div", { key: 'bd11140dc6c8ddb6b800d4fe6544df733c5157c4', class: `number__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'c8318c687bc471fc225b9aba52686e38ecb400de', class: 'number__wrapper--flex' }, index.h("label", { key: '7eaf64057ef71b07a0defc1e372fd85baab2bd68', class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '99f4151f50a7fb0abb9a8e53bacc8c8bd303d659', class: 'number__wrapper--relative' }, this.tooltip &&
13377
+ index.h("img", { key: '875d6284697dc06ac05c682509856faeade3d8be', class: 'number__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: 'f1f563567cde4a744c68e27ab91a3d795f596be6', ref: (el) => this.inputReference = el, type: "number", value: this.defaultValue, readOnly: this.autofilled, id: `${this.name}__input`, class: `number__input ${invalidClass}`, pattern: this.validationPattern, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: '0226f04a059fd8763822483de42bd7e647040bf3', class: 'number__error-message' }, this.errorMessage));
13418
13378
  }
13419
13379
  static get watchers() { return {
13420
- "clientStyling": ["handleStylingChange"],
13380
+ "clientStyling": ["handleClientStylingChange"],
13421
13381
  "isValid": ["validityChanged"],
13422
13382
  "emitValue": ["emitValueHandler"]
13423
13383
  }; }
@@ -13466,11 +13426,6 @@ const PasswordInput = class {
13466
13426
  this.showPopup = true;
13467
13427
  this.calculateComplexity(this.value);
13468
13428
  };
13469
- this.setClientStyling = () => {
13470
- let sheet = document.createElement('style');
13471
- sheet.innerHTML = this.clientStyling;
13472
- this.stylingContainer.prepend(sheet);
13473
- };
13474
13429
  this.name = undefined;
13475
13430
  this.displayName = undefined;
13476
13431
  this.placeholder = undefined;
@@ -13485,17 +13440,18 @@ const PasswordInput = class {
13485
13440
  this.hidePasswordComplexity = false;
13486
13441
  this.clientStyling = '';
13487
13442
  this.enableSouthAfricanMode = undefined;
13443
+ this.mbSource = undefined;
13488
13444
  this.isValid = undefined;
13489
13445
  this.errorMessage = undefined;
13490
- this.limitStylingAppends = false;
13491
13446
  this.showTooltip = false;
13492
13447
  this.passwordComplexity = undefined;
13493
13448
  this.showPopup = undefined;
13494
13449
  this.value = '';
13495
13450
  }
13496
- handleStylingChange(newValue, oldValue) {
13497
- if (newValue !== oldValue)
13498
- this.setClientStyling();
13451
+ handleClientStylingChange(newValue, oldValue) {
13452
+ if (newValue !== oldValue) {
13453
+ pamChangePassword.setClientStyling(this.stylingContainer, this.clientStyling);
13454
+ }
13499
13455
  }
13500
13456
  validityChanged() {
13501
13457
  this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -13556,16 +13512,17 @@ const PasswordInput = class {
13556
13512
  this.showTooltip = false;
13557
13513
  }
13558
13514
  }
13559
- componentDidRender() {
13560
- // start custom styling area
13561
- if (!this.limitStylingAppends && this.stylingContainer) {
13562
- if (this.clientStyling)
13563
- this.setClientStyling();
13564
- this.limitStylingAppends = true;
13515
+ handleClientStyling() {
13516
+ if (window.emMessageBus !== undefined) {
13517
+ this.stylingSubscription = pamChangePassword.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
13518
+ return;
13519
+ }
13520
+ if (this.clientStyling) {
13521
+ pamChangePassword.setClientStyling(this.stylingContainer, this.clientStyling);
13565
13522
  }
13566
- // end custom styling area
13567
13523
  }
13568
13524
  componentDidLoad() {
13525
+ this.handleClientStyling();
13569
13526
  this.inputReference = this.element.shadowRoot.querySelector('input');
13570
13527
  this.passwordButton = this.element.shadowRoot.querySelector('vaadin-password-field-button');
13571
13528
  this.passwordButton.tabIndex = -1;
@@ -13672,8 +13629,8 @@ const PasswordInput = class {
13672
13629
  if (this.touched) {
13673
13630
  invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
13674
13631
  }
13675
- return index.h("div", { key: 'fe895585dd908f75eee4ba797dc9c02b237bed7f', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '844bdb3dab98e62cc5d92a761b85adcdc44831d0', class: 'password__wrapper--flex' }, index.h("label", { key: '28041267a6df666e7df3660a907f995eff092ae1', class: `password__label ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '79c300643134802f04d8f909fe7bb3895911c88a', class: 'password__wrapper--relative' }, this.tooltip &&
13676
- index.h("img", { key: '43ae58549e42ba59054162c25887ec36eb826aaa', class: 'password__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("vaadin-password-field", { key: '0edcfed0ea65666537240f531e5239bd5b11181e', type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue, required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.placeholder}`, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), !this.noValidation && index.h("small", { key: 'c8aeba074e66b771d745194fec535aa0b82de6d8', class: 'password__error-message' }, this.errorMessage), this.passwordComplexity &&
13632
+ return index.h("div", { key: '18213d251639938165f3e4ad58bdc904fb953fe2', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '092c431b178682d0006cf6ad5c14b0a7e6fb5569', class: 'password__wrapper--flex' }, index.h("label", { key: '64c101b7d70305ecf09735234d902a6b33823551', class: `password__label ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '189929eefa1caf71a1be39f0d663eef914d241d5', class: 'password__wrapper--relative' }, this.tooltip &&
13633
+ index.h("img", { key: '95ee0d824b5be14ab4e62fc0b5f1731fe6ca5775', class: 'password__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("vaadin-password-field", { key: 'bf85dde83305233c566b1c50d0286548ba0f48a5', type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue, required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.placeholder}`, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), !this.noValidation && index.h("small", { key: '3acbe164ff532bcfcd9e4a237a6f352df0cfdc2d', class: 'password__error-message' }, this.errorMessage), this.passwordComplexity &&
13677
13634
  this.showPopup &&
13678
13635
  !this.hidePasswordComplexity &&
13679
13636
  !this.isDuplicateInput &&
@@ -13683,7 +13640,7 @@ const PasswordInput = class {
13683
13640
  }
13684
13641
  get element() { return index.getElement(this); }
13685
13642
  static get watchers() { return {
13686
- "clientStyling": ["handleStylingChange"],
13643
+ "clientStyling": ["handleClientStylingChange"],
13687
13644
  "isValid": ["validityChanged"],
13688
13645
  "value": ["valueChanged"],
13689
13646
  "emitValue": ["emitValueHandler"]
@@ -13833,11 +13790,6 @@ const PostalCodeInput = class {
13833
13790
  targetInput.focus();
13834
13791
  }
13835
13792
  };
13836
- this.setClientStyling = () => {
13837
- let sheet = document.createElement('style');
13838
- sheet.innerHTML = this.clientStyling;
13839
- this.stylingContainer.prepend(sheet);
13840
- };
13841
13793
  this.handleOutsideClick = (event) => {
13842
13794
  if (!this.openAddressDropdown)
13843
13795
  return;
@@ -13863,9 +13815,9 @@ const PostalCodeInput = class {
13863
13815
  this.postalcodelength = undefined;
13864
13816
  this.addresses = undefined;
13865
13817
  this.ignoreCountry = false;
13818
+ this.mbSource = undefined;
13866
13819
  this.isValid = undefined;
13867
13820
  this.errorMessage = '';
13868
- this.limitStylingAppends = false;
13869
13821
  this.showTooltip = false;
13870
13822
  this.selectedCountryCode = '';
13871
13823
  this.currentPostalCode = '';
@@ -13874,9 +13826,10 @@ const PostalCodeInput = class {
13874
13826
  this.refreshTrigger = 0;
13875
13827
  this.isFetchingAddresses = false;
13876
13828
  }
13877
- handleStylingChange(newValue, oldValue) {
13878
- if (newValue !== oldValue)
13879
- this.setClientStyling();
13829
+ handleClientStylingChange(newValue, oldValue) {
13830
+ if (newValue !== oldValue) {
13831
+ pamChangePassword.setClientStyling(this.stylingContainer, this.clientStyling);
13832
+ }
13880
13833
  }
13881
13834
  validityChanged() {
13882
13835
  this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -13937,19 +13890,22 @@ const PostalCodeInput = class {
13937
13890
  connectedCallback() {
13938
13891
  this.validationPattern = this.setPattern();
13939
13892
  }
13940
- componentDidRender() {
13941
- if (!this.limitStylingAppends && this.stylingContainer) {
13942
- if (this.clientStyling)
13943
- this.setClientStyling();
13944
- this.limitStylingAppends = true;
13945
- }
13946
- }
13947
13893
  componentWillLoad() {
13948
13894
  if (this.defaultValue) {
13949
13895
  this.value = this.defaultValue;
13950
13896
  }
13951
13897
  }
13898
+ handleClientStyling() {
13899
+ if (window.emMessageBus !== undefined) {
13900
+ this.stylingSubscription = pamChangePassword.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
13901
+ return;
13902
+ }
13903
+ if (this.clientStyling) {
13904
+ pamChangePassword.setClientStyling(this.stylingContainer, this.clientStyling);
13905
+ }
13906
+ }
13952
13907
  componentDidLoad() {
13908
+ this.handleClientStyling();
13953
13909
  if (this.defaultValue) {
13954
13910
  this.valueHandler({ name: this.name, value: this.value });
13955
13911
  }
@@ -14041,10 +13997,10 @@ const PostalCodeInput = class {
14041
13997
  let shouldShowNoResults = this.showNoResultsMessage && this.currentPostalCode &&
14042
13998
  this.currentPostalCode.length >= this.postalcodelength && (((_b = this.addresses) === null || _b === void 0 ? void 0 : _b.length) === 0) && isUKCountry;
14043
13999
  let showLoadingMessage = this.isFetchingAddresses && this.currentPostalCode.length >= this.postalcodelength;
14044
- return (index.h("div", { key: 'e358dddfc4b20b0847d03e3f12ff637922470105', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'b806cac9ad62480a1be6bf802528c60c79804e94', class: 'text__wrapper--flex' }, index.h("label", { key: '4fb327989e8b828559c01601eea47bdd58da4bd3', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '6c293495a8935db477cbcac2eb9102bffeb85ddb', class: 'text__wrapper--relative' }, this.tooltip && (index.h("img", { key: '848bb5b44d834c4f0e4a78cfebef0ecf1b88fd2e', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip })), this.renderTooltip())), index.h("div", { key: '7f6195e5cfc5bfabc9854ec6acc19c1e52e70f1b', class: 'input__text-wrapper' }, index.h("input", { key: '4369b4a99016a7aebbb396bdda35c31d92e4d557', name: this.name, id: `${this.name}__input`, value: this.determineInputValue(), type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.maxPostalCodeLength, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), !isUKCountry && (index.h("p", { key: '0e3c0fcb974d2f3dae76f9afdbf173fcc25d258f', class: "address__manual-input-msg", onClick: () => this.enterAddressManually() }, translate('enterIEAddressManually', this.language))), showAddressesDropdown && (index.h("div", { key: '1c644f87f2617180e6356c724d72b6d3fc8e472e', class: "input__addresses-container", ref: (el) => (this.addressesDropdownRef = el) }, index.h("div", { key: 'f2a7b8133908441a3cf67eb48928a2d61d17e32f', class: "options" }, this.addresses.map((addr, index$1) => (index.h("div", { key: index$1, class: "option", onClick: (e) => this.handlePostalCode(e, addr) }, addr.number, " ", addr.street, " ", addr.city)))))), showLoadingMessage && (index.h("div", { key: 'c0cb29f7d174ca8981c8b9dfd2ee9b972b0fd1ea', class: "postalcode__loading-spinner" }, index.h("div", { key: '76f17cb0a440f7ed9cc8de3620b55136549586e6', class: "loading-spinner" }), index.h("span", { key: 'e10c4177fb0f21f142fd3120177e450413687cf3' }, translate('searchingForAddresses', this.language)))), shouldShowNoResults && (index.h("div", { key: 'f729f6206cc900a2c94e3df0e8b08cc3dc5b751f', class: "postalcode__no-results-message" }, translate('postalLookUpNoAddressFound', this.language)))), index.h("small", { key: 'c8a79e601f22444b34dc7d037c94f92875f51aad', class: 'text__error-message' }, this.errorMessage)));
14000
+ return (index.h("div", { key: 'f0dda39cf9a02d53213848926908c0cb39d1cd3f', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, index.h("div", { key: '5e1c51af264392d2be986e305e6526310f55f40b', class: 'text__wrapper--flex' }, index.h("label", { key: 'c12c45d88bdf42aeb6be505d473ab0f55da2be87', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '7b93a75f19590b445227fa1a64c90fd20c0afd5d', class: 'text__wrapper--relative' }, this.tooltip && (index.h("img", { key: '504004a13595694307c1e3450b69982150dc55fd', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip })), this.renderTooltip())), index.h("div", { key: '19de66fd72fd0a6befe3bbaebb6c8f99ec5f850b', class: 'input__text-wrapper' }, index.h("input", { key: '78cd4229ed5104518b991df0bc6bf527df2ec3e2', name: this.name, id: `${this.name}__input`, value: this.determineInputValue(), type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.maxPostalCodeLength, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), !isUKCountry && (index.h("p", { key: '6b9e307d59fb9fed93f4df6c07a091d299844c62', class: "address__manual-input-msg", onClick: () => this.enterAddressManually() }, translate('enterIEAddressManually', this.language))), showAddressesDropdown && (index.h("div", { key: 'ecb7892a9a8d967540d8fd013518ae19498fcd48', class: "input__addresses-container", ref: (el) => (this.addressesDropdownRef = el) }, index.h("div", { key: 'a5ef3f81a85207a821964e23b21aaf783be807cc', class: "options" }, this.addresses.map((addr, index$1) => (index.h("div", { key: index$1, class: "option", onClick: (e) => this.handlePostalCode(e, addr) }, addr.number, " ", addr.street, " ", addr.city)))))), showLoadingMessage && (index.h("div", { key: '338c17e484721efb387e608f3ce4416a0e47b8af', class: "postalcode__loading-spinner" }, index.h("div", { key: '7638cea4fba975e3a27d4cb00bce217129bd0750', class: "loading-spinner" }), index.h("span", { key: 'b59a8a9c3d7ecf209a68717346d1d29062994f79' }, translate('searchingForAddresses', this.language)))), shouldShowNoResults && (index.h("div", { key: '212a74fed94b3ee089aed5c9afb544966b5f11cd', class: "postalcode__no-results-message" }, translate('postalLookUpNoAddressFound', this.language)))), index.h("small", { key: '4f66e97dd811b9917c92ff4bcbf236817ac57933', class: 'text__error-message' }, this.errorMessage)));
14045
14001
  }
14046
14002
  static get watchers() { return {
14047
- "clientStyling": ["handleStylingChange"],
14003
+ "clientStyling": ["handleClientStylingChange"],
14048
14004
  "isValid": ["validityChanged"],
14049
14005
  "emitValue": ["emitValueHandler"],
14050
14006
  "addresses": ["handleAddresses"]
@@ -14060,11 +14016,6 @@ const RadioInput = class {
14060
14016
  index.registerInstance(this, hostRef);
14061
14017
  this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
14062
14018
  this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
14063
- this.setClientStyling = () => {
14064
- let sheet = document.createElement('style');
14065
- sheet.innerHTML = this.clientStyling;
14066
- this.stylingContainer.prepend(sheet);
14067
- };
14068
14019
  this.name = undefined;
14069
14020
  this.displayName = undefined;
14070
14021
  this.optionsGroup = undefined;
@@ -14073,14 +14024,15 @@ const RadioInput = class {
14073
14024
  this.language = undefined;
14074
14025
  this.emitValue = undefined;
14075
14026
  this.clientStyling = '';
14027
+ this.mbSource = undefined;
14076
14028
  this.errorMessage = undefined;
14077
14029
  this.isValid = undefined;
14078
- this.limitStylingAppends = false;
14079
14030
  this.showTooltip = false;
14080
14031
  }
14081
- handleStylingChange(newValue, oldValue) {
14082
- if (newValue !== oldValue)
14083
- this.setClientStyling();
14032
+ handleClientStylingChange(newValue, oldValue) {
14033
+ if (newValue !== oldValue) {
14034
+ pamChangePassword.setClientStyling(this.stylingContainer, this.clientStyling);
14035
+ }
14084
14036
  }
14085
14037
  validityChanged() {
14086
14038
  this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -14105,14 +14057,17 @@ const RadioInput = class {
14105
14057
  this.showTooltip = false;
14106
14058
  }
14107
14059
  }
14108
- componentDidRender() {
14109
- // start custom styling area
14110
- if (!this.limitStylingAppends && this.stylingContainer) {
14111
- if (this.clientStyling)
14112
- this.setClientStyling();
14113
- this.limitStylingAppends = true;
14060
+ handleClientStyling() {
14061
+ if (window.emMessageBus !== undefined) {
14062
+ this.stylingSubscription = pamChangePassword.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
14063
+ return;
14064
+ }
14065
+ if (this.clientStyling) {
14066
+ pamChangePassword.setClientStyling(this.stylingContainer, this.clientStyling);
14114
14067
  }
14115
- // end custom styling area
14068
+ }
14069
+ componentDidLoad() {
14070
+ this.handleClientStyling();
14116
14071
  }
14117
14072
  handleClick(event) {
14118
14073
  this.value = event.target.value;
@@ -14135,11 +14090,11 @@ const RadioInput = class {
14135
14090
  return null;
14136
14091
  }
14137
14092
  render() {
14138
- return index.h("fieldset", { key: '33493de460303a32a37d253a0fd5f9da59676542', class: `radio__fieldset ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("legend", { key: '8aef7aa84a119742e05d72d976c936a560154b3f', class: 'radio__legend' }, this.displayName, ":"), this.optionsGroup.map(option => index.h("div", { class: 'radio__wrapper' }, index.h("input", { type: "radio", class: 'radio__input', id: `${option.label}__input`, ref: (el) => this.inputReference = el, value: option.value, name: this.name, required: this.validation.mandatory, onClick: (e) => this.handleClick(e) }), index.h("label", { htmlFor: `${option.label}__input` }, option.label))), index.h("small", { key: 'bec44ed4007e408ddeb0b0293b82e034c8e165f2', class: 'radio__error-message' }, this.errorMessage), this.tooltip &&
14139
- index.h("img", { key: 'a3b0a041beabe3f14661c0af8cd970040d060435', class: 'radio__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
14093
+ return index.h("fieldset", { key: '7048de0e37c9541af1c9788e8b46c789ca788c31', class: `radio__fieldset ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("legend", { key: '403b739c966d510740ca59621c094872b93e2cba', class: 'radio__legend' }, this.displayName, ":"), this.optionsGroup.map(option => index.h("div", { class: 'radio__wrapper' }, index.h("input", { type: "radio", class: 'radio__input', id: `${option.label}__input`, ref: (el) => this.inputReference = el, value: option.value, name: this.name, required: this.validation.mandatory, onClick: (e) => this.handleClick(e) }), index.h("label", { htmlFor: `${option.label}__input` }, option.label))), index.h("small", { key: '46dce1082a6aa9f2a5bdc3e3654c924fcd2a8357', class: 'radio__error-message' }, this.errorMessage), this.tooltip &&
14094
+ index.h("img", { key: 'dfe155a429485b5c891db2943d9115cdc40e169b', class: 'radio__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
14140
14095
  }
14141
14096
  static get watchers() { return {
14142
- "clientStyling": ["handleStylingChange"],
14097
+ "clientStyling": ["handleClientStylingChange"],
14143
14098
  "isValid": ["validityChanged"],
14144
14099
  "emitValue": ["emitValueHandler"]
14145
14100
  }; }
@@ -14188,11 +14143,6 @@ const SelectInput = class {
14188
14143
  this.validityStateHandler({ valid: this.isValid, name: this.name });
14189
14144
  this.emitValueHandler(true);
14190
14145
  };
14191
- this.setClientStyling = () => {
14192
- let sheet = document.createElement('style');
14193
- sheet.innerHTML = this.clientStyling;
14194
- this.stylingContainer.prepend(sheet);
14195
- };
14196
14146
  this.name = undefined;
14197
14147
  this.displayName = undefined;
14198
14148
  this.placeholder = undefined;
@@ -14205,14 +14155,15 @@ const SelectInput = class {
14205
14155
  this.language = undefined;
14206
14156
  this.emitValue = undefined;
14207
14157
  this.clientStyling = '';
14158
+ this.mbSource = undefined;
14208
14159
  this.errorMessage = undefined;
14209
14160
  this.isValid = undefined;
14210
- this.limitStylingAppends = false;
14211
14161
  this.showTooltip = false;
14212
14162
  }
14213
- handleStylingChange(newValue, oldValue) {
14214
- if (newValue !== oldValue)
14215
- this.setClientStyling();
14163
+ handleClientStylingChange(newValue, oldValue) {
14164
+ if (newValue !== oldValue) {
14165
+ pamChangePassword.setClientStyling(this.stylingContainer, this.clientStyling);
14166
+ }
14216
14167
  }
14217
14168
  validityChanged() {
14218
14169
  this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -14262,16 +14213,17 @@ const SelectInput = class {
14262
14213
  }
14263
14214
  }
14264
14215
  }
14265
- componentDidRender() {
14266
- // start custom styling area
14267
- if (!this.limitStylingAppends && this.stylingContainer) {
14268
- if (this.clientStyling)
14269
- this.setClientStyling();
14270
- this.limitStylingAppends = true;
14216
+ handleClientStyling() {
14217
+ if (window.emMessageBus !== undefined) {
14218
+ this.stylingSubscription = pamChangePassword.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
14219
+ return;
14220
+ }
14221
+ if (this.clientStyling) {
14222
+ pamChangePassword.setClientStyling(this.stylingContainer, this.clientStyling);
14271
14223
  }
14272
- // end custom styling area
14273
14224
  }
14274
14225
  componentDidLoad() {
14226
+ this.handleClientStyling();
14275
14227
  this.inputReference = this.vaadinCombo.querySelector('input');
14276
14228
  if (this.defaultValue) {
14277
14229
  this.value = this.defaultValue;
@@ -14336,13 +14288,13 @@ const SelectInput = class {
14336
14288
  if (this.touched) {
14337
14289
  invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
14338
14290
  }
14339
- return index.h("div", { key: 'b0ed504667761e5fd77e0ac13382b467448a1944', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'b48d38dc4c2cb3442ff6773a1b1d13191ec4d0e6', class: 'select__wrapper--flex' }, index.h("label", { key: 'ad592c8c98ecbec1961d22cdfeb8cec910291ea8', class: 'select__label', htmlFor: `${this.name}__input` }, this.displayName, index.h("span", { key: 'b3c0f2fe9a2d26ade1626878ed9bc1f0b86a23ad', class: this.validation.mandatory ? 'select__label--required' : '' })), index.h("div", { key: '29d0f504d0f51175818dffffb882ac4e6e9c3bde', class: 'select__wrapper--relative' }, this.tooltip &&
14340
- index.h("img", { key: '66e524ffebc43f9418e90b3bd2d7ae62eba47da3', class: 'select__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), this.isComboBox ? index.h("vaadin-combo-box", { name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", ref: (el) => this.vaadinCombo = el, readOnly: this.autofilled, required: (_a = this.validation) === null || _a === void 0 ? void 0 : _a.mandatory, value: this.value, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleComboChange, onBlur: this.handleBlur })
14291
+ return index.h("div", { key: 'eb6c9d7d85546159d44d06a0635f173263edd7d1', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '0fd71c528870966fdb23049b1806a267e9e6ca5c', class: 'select__wrapper--flex' }, index.h("label", { key: '44aeb4e50ab2f79df06741ff07ac03131c987447', class: 'select__label', htmlFor: `${this.name}__input` }, this.displayName, index.h("span", { key: '796a83aeadd480a571b6bae035a46138d7b10b24', class: this.validation.mandatory ? 'select__label--required' : '' })), index.h("div", { key: '6d7b2d785c6b0bdd05c7444f563b21cedf26ff7c', class: 'select__wrapper--relative' }, this.tooltip &&
14292
+ index.h("img", { key: 'f33e43a9d42e8b8d1cf136374505eeaedcbede26', class: 'select__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), this.isComboBox ? index.h("vaadin-combo-box", { name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", ref: (el) => this.vaadinCombo = el, readOnly: this.autofilled, required: (_a = this.validation) === null || _a === void 0 ? void 0 : _a.mandatory, value: this.value, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleComboChange, onBlur: this.handleBlur })
14341
14293
  :
14342
- index.h("vaadin-select", { name: this.name, popover: false, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", ref: (el) => this.vaadinCombo = el, readOnly: this.autofilled, required: (_b = this.validation) === null || _b === void 0 ? void 0 : _b.mandatory, value: this.value, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleSelectChange, "no-vertical-overlap": true, noVerticalOverlap: true }), index.h("small", { key: '0143b538740c3a8e9bfcab6bbb44660355c40cf7', class: 'select__error-message' }, this.errorMessage));
14294
+ index.h("vaadin-select", { name: this.name, popover: false, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", ref: (el) => this.vaadinCombo = el, readOnly: this.autofilled, required: (_b = this.validation) === null || _b === void 0 ? void 0 : _b.mandatory, value: this.value, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleSelectChange, "no-vertical-overlap": true, noVerticalOverlap: true }), index.h("small", { key: '261b3c4abc9b360e6b937d851f8bfc810280a8c6', class: 'select__error-message' }, this.errorMessage));
14343
14295
  }
14344
14296
  static get watchers() { return {
14345
- "clientStyling": ["handleStylingChange"],
14297
+ "clientStyling": ["handleClientStylingChange"],
14346
14298
  "isValid": ["validityChanged"],
14347
14299
  "emitValue": ["emitValueHandler"]
14348
14300
  }; }
@@ -14377,11 +14329,6 @@ const TelInput = class {
14377
14329
  this.isValid = this.isValidValue();
14378
14330
  this.errorMessage = this.setErrorMessage();
14379
14331
  };
14380
- this.setClientStyling = () => {
14381
- let sheet = document.createElement('style');
14382
- sheet.innerHTML = this.clientStyling;
14383
- this.stylingContainer.prepend(sheet);
14384
- };
14385
14332
  this.name = undefined;
14386
14333
  this.displayName = undefined;
14387
14334
  this.placeholder = undefined;
@@ -14394,9 +14341,9 @@ const TelInput = class {
14394
14341
  this.language = undefined;
14395
14342
  this.emitValue = undefined;
14396
14343
  this.clientStyling = '';
14344
+ this.mbSource = undefined;
14397
14345
  this.isValid = undefined;
14398
14346
  this.errorMessage = undefined;
14399
- this.limitStylingAppends = false;
14400
14347
  this.showTooltip = false;
14401
14348
  this.disablePhonePrefix = false;
14402
14349
  this.phoneValue = '';
@@ -14408,9 +14355,10 @@ const TelInput = class {
14408
14355
  if (this.inputReference)
14409
14356
  this.inputReference.value = this.phoneValue;
14410
14357
  }
14411
- handleStylingChange(newValue, oldValue) {
14412
- if (newValue !== oldValue)
14413
- this.setClientStyling();
14358
+ handleClientStylingChange(newValue, oldValue) {
14359
+ if (newValue !== oldValue) {
14360
+ pamChangePassword.setClientStyling(this.stylingContainer, this.clientStyling);
14361
+ }
14414
14362
  }
14415
14363
  validityChanged() {
14416
14364
  this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -14461,16 +14409,17 @@ const TelInput = class {
14461
14409
  }
14462
14410
  }
14463
14411
  }
14464
- componentDidRender() {
14465
- // start custom styling area
14466
- if (!this.limitStylingAppends && this.stylingContainer) {
14467
- if (this.clientStyling)
14468
- this.setClientStyling();
14469
- this.limitStylingAppends = true;
14412
+ handleClientStyling() {
14413
+ if (window.emMessageBus !== undefined) {
14414
+ this.stylingSubscription = pamChangePassword.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
14415
+ return;
14416
+ }
14417
+ if (this.clientStyling) {
14418
+ pamChangePassword.setClientStyling(this.stylingContainer, this.clientStyling);
14470
14419
  }
14471
- // end custom styling area
14472
14420
  }
14473
14421
  componentDidLoad() {
14422
+ this.handleClientStyling();
14474
14423
  this.isValid = this.isValidValue();
14475
14424
  if (this.defaultValue) {
14476
14425
  this.value = this.defaultValue;
@@ -14562,11 +14511,11 @@ const TelInput = class {
14562
14511
  if (this.touched) {
14563
14512
  invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
14564
14513
  }
14565
- return index.h("div", { key: 'bf824bf310bec50746fb6b82cd8f7decbcfc284b', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '0b6c42e7aca5686f310ffdcecb96cf909e83521f', class: 'tel__wrapper--flex-label' }, index.h("label", { key: 'ddf2fa885ac53e7f337525357a7dce52f911213d', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'e21a84509b32f379bb3ce92137255caf99a86dc5', class: 'tel__wrapper--relative' }, this.tooltip &&
14566
- index.h("img", { key: '9ff0a8c19aa067c1e7799227617405e373b344e4', class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("div", { key: '5db13af7e421480b89253970a5f2470f999c922d', class: `tel__wrapper--flex ${invalidClass}` }, index.h("vaadin-combo-box", { key: '164fe2bd2940bd5a251fda48b28f1af1bc3e78be', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.disablePhonePrefix, onChange: (e) => this.handlePrefixInput(e) }), index.h("input", { key: '90ae038a383645d6579fb68bc5adbe8a2b1d676c', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: (_a = this.phoneValue) !== null && _a !== void 0 ? _a : '', placeholder: `${this.placeholder}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })), index.h("small", { key: 'a68f95384965384a67d042b89264dbda03f25b7a', class: 'tel__error-message' }, this.errorMessage));
14514
+ return index.h("div", { key: '9cf9eb751bca1978d8554fffc912ef2039c42e41', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'cc88d6e9aa7a0f3801fad75e3ca509fbd01b0538', class: 'tel__wrapper--flex-label' }, index.h("label", { key: 'c8a35af4ddd2d4f9751d7f60c9e075ae8eccb441', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '73fcdcc25dde1be087ee60062dc5eee2d1e5d29e', class: 'tel__wrapper--relative' }, this.tooltip &&
14515
+ index.h("img", { key: '56df66fddf599fbafb179c7cd90ea7d58b008ea6', class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("div", { key: '20eb5689932c2f71322102229cc7346d18e9bc87', class: `tel__wrapper--flex ${invalidClass}` }, index.h("vaadin-combo-box", { key: '9ec4142dc84e0022ced7e34248d5f4f8f59c34af', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.disablePhonePrefix, onChange: (e) => this.handlePrefixInput(e) }), index.h("input", { key: 'c083b17f71de36b84892a8080f776debf1fe7351', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: (_a = this.phoneValue) !== null && _a !== void 0 ? _a : '', placeholder: `${this.placeholder}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })), index.h("small", { key: '2201c2d7b968731042624b265cf535c656c86933', class: 'tel__error-message' }, this.errorMessage));
14567
14516
  }
14568
14517
  static get watchers() { return {
14569
- "clientStyling": ["handleStylingChange"],
14518
+ "clientStyling": ["handleClientStylingChange"],
14570
14519
  "isValid": ["validityChanged"],
14571
14520
  "emitValue": ["emitValueHandler"]
14572
14521
  }; }
@@ -14610,11 +14559,6 @@ const TextInput = class {
14610
14559
  this.touched = true;
14611
14560
  this.updateValidationState();
14612
14561
  };
14613
- this.setClientStyling = () => {
14614
- let sheet = document.createElement('style');
14615
- sheet.innerHTML = this.clientStyling;
14616
- this.stylingContainer.prepend(sheet);
14617
- };
14618
14562
  this.name = undefined;
14619
14563
  this.displayName = undefined;
14620
14564
  this.placeholder = undefined;
@@ -14629,15 +14573,16 @@ const TextInput = class {
14629
14573
  this.clientStyling = '';
14630
14574
  this.haspostalcodelookup = undefined;
14631
14575
  this.enableSouthAfricanMode = undefined;
14576
+ this.mbSource = undefined;
14632
14577
  this.isValid = undefined;
14633
14578
  this.errorMessage = '';
14634
- this.limitStylingAppends = false;
14635
14579
  this.showTooltip = false;
14636
14580
  this.selectedCountryCode = '';
14637
14581
  }
14638
- handleStylingChange(newValue, oldValue) {
14639
- if (newValue !== oldValue)
14640
- this.setClientStyling();
14582
+ handleClientStylingChange(newValue, oldValue) {
14583
+ if (newValue !== oldValue) {
14584
+ pamChangePassword.setClientStyling(this.stylingContainer, this.clientStyling);
14585
+ }
14641
14586
  }
14642
14587
  validityChanged() {
14643
14588
  this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -14749,21 +14694,22 @@ const TextInput = class {
14749
14694
  }
14750
14695
  this.validityStateHandler({ valid: false, name: this.name });
14751
14696
  }
14752
- componentDidRender() {
14753
- // start custom styling area
14754
- if (!this.limitStylingAppends && this.stylingContainer) {
14755
- if (this.clientStyling)
14756
- this.setClientStyling();
14757
- this.limitStylingAppends = true;
14758
- }
14759
- // end custom styling area
14760
- }
14761
14697
  componentWillLoad() {
14762
14698
  if (this.defaultValue) {
14763
14699
  this.value = this.defaultValue;
14764
14700
  }
14765
14701
  }
14702
+ handleClientStyling() {
14703
+ if (window.emMessageBus !== undefined) {
14704
+ this.stylingSubscription = pamChangePassword.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
14705
+ return;
14706
+ }
14707
+ if (this.clientStyling) {
14708
+ pamChangePassword.setClientStyling(this.stylingContainer, this.clientStyling);
14709
+ }
14710
+ }
14766
14711
  componentDidLoad() {
14712
+ this.handleClientStyling();
14767
14713
  if (this.defaultValue) {
14768
14714
  this.value = this.defaultValue;
14769
14715
  this.valueHandler({ name: this.name, value: this.value });
@@ -14875,11 +14821,11 @@ const TextInput = class {
14875
14821
  if (this.touched) {
14876
14822
  invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
14877
14823
  }
14878
- return index.h("div", { key: 'aacb35e1808720cfdb24708254c01cb5be0fe6b6', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, index.h("div", { key: '14a292cc7661d663698384d989d57d21786210b9', class: 'text__wrapper--flex' }, index.h("label", { key: 'c04b29364c4b54e9aad3036264044177e4a2dc51', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'eb8aee30e47241b533c7ca8fcb354c782b4e2be1', class: 'text__wrapper--relative' }, this.tooltip &&
14879
- index.h("img", { key: '23d4b70d93910f43ce0ea54c1bcffd81dfc54ebc', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: '3f901d85111256370811f4abe51bcd5b2971b60c', name: this.name, id: `${this.name}__input`, value: this.value, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.enableSouthAfricanMode ? '' : this.validation.minLength, maxlength: this.enableSouthAfricanMode ? '' : this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: '1661215687f1eecd622b2610c3e056f45944fee3', class: 'text__error-message' }, this.errorMessage));
14824
+ return index.h("div", { key: 'f48e592bac049022b283bac917c095772b1508f5', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'fe3626ead38dd18dfa14795ee2332e93f5f09652', class: 'text__wrapper--flex' }, index.h("label", { key: '6b2854b460e0ac7d4ae0ebccc06dbe64770581d5', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'f29d266973bd700a4270495bc4eb6e8296b6eeaf', class: 'text__wrapper--relative' }, this.tooltip &&
14825
+ index.h("img", { key: '68e69abbb78250e763822608e963bc16d702f099', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: '99b8eab15ab32656f86fedd3f36a09a5bbe108d3', name: this.name, id: `${this.name}__input`, value: this.value, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.enableSouthAfricanMode ? '' : this.validation.minLength, maxlength: this.enableSouthAfricanMode ? '' : this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: 'cc28c1c19370faa94fa1f738066042dce8d694ce', class: 'text__error-message' }, this.errorMessage));
14880
14826
  }
14881
14827
  static get watchers() { return {
14882
- "clientStyling": ["handleStylingChange"],
14828
+ "clientStyling": ["handleClientStylingChange"],
14883
14829
  "isValid": ["validityChanged"],
14884
14830
  "emitValue": ["emitValueHandler"]
14885
14831
  }; }
@@ -14901,11 +14847,6 @@ const ToggleCheckboxInput = class {
14901
14847
  event.stopPropagation();
14902
14848
  window.postMessage({ type: `registration${fieldName}Clicked` }, window.location.href);
14903
14849
  };
14904
- this.setClientStyling = () => {
14905
- let sheet = document.createElement('style');
14906
- sheet.innerHTML = this.clientStyling;
14907
- this.stylingContainer.prepend(sheet);
14908
- };
14909
14850
  this.name = undefined;
14910
14851
  this.displayName = undefined;
14911
14852
  this.defaultValue = '';
@@ -14916,15 +14857,16 @@ const ToggleCheckboxInput = class {
14916
14857
  this.language = undefined;
14917
14858
  this.emitValue = undefined;
14918
14859
  this.clientStyling = '';
14860
+ this.mbSource = undefined;
14919
14861
  this.errorMessage = undefined;
14920
14862
  this.isValid = undefined;
14921
- this.limitStylingAppends = false;
14922
14863
  this.showTooltip = false;
14923
14864
  this.showFields = this.defaultValue === 'true';
14924
14865
  }
14925
- handleStylingChange(newValue, oldValue) {
14926
- if (newValue !== oldValue)
14927
- this.setClientStyling();
14866
+ handleClientStylingChange(newValue, oldValue) {
14867
+ if (newValue !== oldValue) {
14868
+ pamChangePassword.setClientStyling(this.stylingContainer, this.clientStyling);
14869
+ }
14928
14870
  }
14929
14871
  validityStateHandler(inputStateEvent) {
14930
14872
  this.sendValidityState.emit(inputStateEvent);
@@ -14938,16 +14880,17 @@ const ToggleCheckboxInput = class {
14938
14880
  this.showTooltip = false;
14939
14881
  }
14940
14882
  }
14941
- componentDidRender() {
14942
- // start custom styling area
14943
- if (!this.limitStylingAppends && this.stylingContainer) {
14944
- if (this.clientStyling)
14945
- this.setClientStyling();
14946
- this.limitStylingAppends = true;
14883
+ handleClientStyling() {
14884
+ if (window.emMessageBus !== undefined) {
14885
+ this.stylingSubscription = pamChangePassword.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
14886
+ return;
14887
+ }
14888
+ if (this.clientStyling) {
14889
+ pamChangePassword.setClientStyling(this.stylingContainer, this.clientStyling);
14947
14890
  }
14948
- // end custom styling area
14949
14891
  }
14950
14892
  componentDidLoad() {
14893
+ this.handleClientStyling();
14951
14894
  if (this.options.length === 0)
14952
14895
  return;
14953
14896
  this.options.forEach((subField) => {
@@ -14984,13 +14927,13 @@ const ToggleCheckboxInput = class {
14984
14927
  return null;
14985
14928
  }
14986
14929
  render() {
14987
- return index.h("div", { key: '828751327e59e9649afc04c6c9f7a02ef7dcae8d', class: `togglecheckbox__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'd02a2a6ef595aaf7142cbc6e9681394ee4db8fee', class: 'togglecheckbox__wrapper--flex' }, index.h("input", { key: 'fca6401ef6eb178f53471362444d54ed69086429', class: 'togglecheckbox__input', type: "checkbox", id: `${this.name}__input`, ref: (el) => this.checkboxReference = el, name: this.name, checked: this.defaultValue === "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), this.renderLabel()), index.h("small", { key: '3781a8fdfeb719422693bcd541a4a3fe708e705a', class: 'togglecheckbox__error-message' }, this.errorMessage), index.h("div", { key: '27a4c6b047cd332407ee40c82cf7be1914ed34c9', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
14988
- index.h("img", { key: 'f1367d7e061d20ad68c24dfbe3147e6b67df746f', class: 'togglecheckbox__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), index.h("div", { key: '98d42103554de4d14a65eafd1722bf9d587a27f1', class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
14930
+ return index.h("div", { key: '31cd24b5da24368eef2f53952714395d6d9f6285', class: `togglecheckbox__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'aa14784bd8a3870f7015db79d23226521706ad58', class: 'togglecheckbox__wrapper--flex' }, index.h("input", { key: '0237f06c99b8b2ed7de80433f5b93b9eae7c25f5', class: 'togglecheckbox__input', type: "checkbox", id: `${this.name}__input`, ref: (el) => this.checkboxReference = el, name: this.name, checked: this.defaultValue === "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), this.renderLabel()), index.h("small", { key: '7e26bea1cfcc725d5aa5a795fd0f999d99abe39d', class: 'togglecheckbox__error-message' }, this.errorMessage), index.h("div", { key: '4256fc552545b7a1050ff5cdeb005f5ea83cc5c1', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
14931
+ index.h("img", { key: 'be3c3e036f0bfe46658fce870ae0ffa258229e7d', class: 'togglecheckbox__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), index.h("div", { key: '2d61bedaac02f21116318b10a21b361e70e0213f', class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
14989
14932
  return index.h("general-input", { type: subfield.inputType, name: subfield.name, displayName: subfield.displayName, validation: subfield.validate, action: subfield.action || null, defaultValue: subfield.defaultValue, autofilled: subfield.autofill, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: subfield.tooltip, placeholder: subfield.placeholder == null ? '' : subfield.placeholder, ref: el => this.subFieldsObject[subfield.name] = el });
14990
14933
  })));
14991
14934
  }
14992
14935
  static get watchers() { return {
14993
- "clientStyling": ["handleStylingChange"]
14936
+ "clientStyling": ["handleClientStylingChange"]
14994
14937
  }; }
14995
14938
  };
14996
14939
  ToggleCheckboxInput.style = ToggleCheckboxInputStyle0;
@@ -15016,17 +14959,6 @@ const TwofaInput = class {
15016
14959
  this.triggerResendInterval();
15017
14960
  this.resendCode.emit();
15018
14961
  };
15019
- this.setClientStylingURL = () => {
15020
- let url = new URL(this.clientStylingUrl);
15021
- let cssFile = document.createElement('style');
15022
- fetch(url.href)
15023
- .then((res) => res.text())
15024
- .then((data) => {
15025
- cssFile.innerHTML = data;
15026
- this.clientStyling = data;
15027
- setTimeout(() => { this.host.shadowRoot.prepend(cssFile); }, 1);
15028
- });
15029
- };
15030
14962
  this.setInputRef = (el, idx) => {
15031
14963
  if (el) {
15032
14964
  this.inputRefs[idx] = el;
@@ -15082,21 +15014,6 @@ const TwofaInput = class {
15082
15014
  this.setValidity();
15083
15015
  this.setErrorMessage();
15084
15016
  };
15085
- this.setClientStyling = () => {
15086
- let sheet = document.createElement('style');
15087
- sheet.innerHTML = this.clientStyling;
15088
- this.stylingContainer.prepend(sheet);
15089
- };
15090
- this.setStreamStyling = (domain) => {
15091
- if (window.emMessageBus) {
15092
- const sheet = document.createElement('style');
15093
- this.stylingSubscription = window.emMessageBus.subscribe(domain, (data) => {
15094
- sheet.innerHTML = data;
15095
- this.clientStyling = data;
15096
- this.host.shadowRoot.prepend(sheet);
15097
- });
15098
- }
15099
- };
15100
15017
  this.name = '';
15101
15018
  this.displayName = '';
15102
15019
  this.placeholder = '';
@@ -15111,7 +15028,6 @@ const TwofaInput = class {
15111
15028
  this.pinAttemptsExceeded = undefined;
15112
15029
  this.clientStylingUrl = '';
15113
15030
  this.mbSource = undefined;
15114
- this.limitStylingAppends = false;
15115
15031
  this.isValid = false;
15116
15032
  this.isResendButtonAvailable = true;
15117
15033
  this.showTooltip = false;
@@ -15131,9 +15047,16 @@ const TwofaInput = class {
15131
15047
  this.valueHandler({ name: this.name, value: this.code.join('') });
15132
15048
  }
15133
15049
  }
15134
- handleStylingUrlChange(newValue, oldValue) {
15135
- if (newValue !== oldValue)
15136
- this.setClientStylingURL();
15050
+ handleClientStylingChange(newValue, oldValue) {
15051
+ if (newValue !== oldValue) {
15052
+ pamChangePassword.setClientStyling(this.stylingContainer, this.clientStyling);
15053
+ }
15054
+ }
15055
+ handleClientStylingChangeURL(newValue, oldValue) {
15056
+ if (newValue !== oldValue) {
15057
+ if (this.clientStylingUrl)
15058
+ pamChangePassword.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
15059
+ }
15137
15060
  }
15138
15061
  validityStateHandler(inputStateEvent) {
15139
15062
  this.sendValidityState.emit(inputStateEvent);
@@ -15147,10 +15070,6 @@ const TwofaInput = class {
15147
15070
  this.showTooltip = false;
15148
15071
  }
15149
15072
  }
15150
- handleStylingChange(newValue, oldValue) {
15151
- if (newValue !== oldValue)
15152
- this.setClientStyling();
15153
- }
15154
15073
  connectedCallback() {
15155
15074
  this.validationPattern = this.setPattern();
15156
15075
  this.code = new Array(this.validation.maxLength).fill('');
@@ -15158,30 +15077,21 @@ const TwofaInput = class {
15158
15077
  disconnectedCallback() {
15159
15078
  this.stylingSubscription && this.stylingSubscription.unsubscribe();
15160
15079
  }
15161
- componentDidRender() {
15162
- if (!this.limitStylingAppends && this.stylingContainer) {
15163
- if (this.clientStyling) {
15164
- this.setClientStyling();
15165
- }
15166
- this.limitStylingAppends = true;
15080
+ handleClientStyling() {
15081
+ if (window.emMessageBus !== undefined) {
15082
+ this.stylingSubscription = pamChangePassword.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
15083
+ return;
15167
15084
  }
15085
+ if (this.clientStyling)
15086
+ pamChangePassword.setClientStyling(this.stylingContainer, this.clientStyling);
15087
+ if (this.clientStylingUrl)
15088
+ pamChangePassword.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
15168
15089
  }
15169
15090
  componentDidLoad() {
15170
15091
  this.setValidity();
15171
15092
  this.registrationWidgetLoaded.emit();
15172
15093
  window.postMessage({ type: 'registrationWidgetLoaded' }, window.location.href);
15173
- if (!this.limitStylingAppends && this.host) {
15174
- if (window.emMessageBus != undefined) {
15175
- this.setStreamStyling(`${this.mbSource}.Style`);
15176
- }
15177
- else {
15178
- if (this.clientStyling)
15179
- this.setClientStyling();
15180
- if (this.clientStylingUrl)
15181
- this.setClientStylingURL();
15182
- this.limitStylingAppends = true;
15183
- }
15184
- }
15094
+ this.handleClientStyling();
15185
15095
  }
15186
15096
  handleKeyDown(e, idx) {
15187
15097
  if (e.key === 'Backspace') {
@@ -15272,9 +15182,9 @@ const TwofaInput = class {
15272
15182
  return current;
15273
15183
  }
15274
15184
  render() {
15275
- return (index.h("div", { key: '08b9139f1c2236dd40a045517a9623ad966f29d3', class: "twofa", ref: el => this.stylingContainer = el }, index.h("div", { key: '7528885100be3d450ec52aafd6085a4c852710c8', class: 'twofa__error-message' }, index.h("p", { key: '51dab3f02156b5eb3b7408f06f2d359cfbda11a7' }, this.errorMessage)), index.h("div", { key: 'f336f89ecee0724663b1bbb4d443bb834336b5c1', class: "twofa__description", innerHTML: translate('twofaDescription', this.language, { values: { destination: this.destination } }) }), index.h("div", { key: '5127127ccc8e50428f8319fddc9e21606f3b4148', class: "twofa__input-wrapper", ref: this.setContainerRef }, this.code.map((_, idx) => {
15185
+ return (index.h("div", { key: 'cd5396afccaf4016201281f5cc53898c0a2052ed', class: "twofa", ref: el => this.stylingContainer = el }, index.h("div", { key: '008dd54682a0d93190e9e5b2b49673262ed01763', class: 'twofa__error-message' }, index.h("p", { key: '41db51d6b396ccd1f3149e4473e96960e92d05ca' }, this.errorMessage)), index.h("div", { key: '67e9e4ac90cf95f2269e75b121ed220a02c5f139', class: "twofa__description", innerHTML: translate('twofaDescription', this.language, { values: { destination: this.destination } }) }), index.h("div", { key: '702c342eb7be0001ab8de310cadd7e8684a8025d', class: "twofa__input-wrapper", ref: this.setContainerRef }, this.code.map((_, idx) => {
15276
15186
  return (index.h("input", { key: idx, ref: el => this.setInputRef(el, idx), id: `otp-input-${idx}`, type: "text", maxLength: 2, value: this.getInputDisplayValue(idx), onInput: (event) => this.handleInput(event, idx), onKeyDown: (event) => this.handleKeyDown(event, idx), onPaste: (event) => this.handlePaste(event) }));
15277
- })), index.h("div", { key: 'be82ae1192129d571275b78c8097c3023468cf3e', class: "twofa__button-wrapper" }, index.h("p", { key: '11de61d738ffa74bfd44f0d7c88fc4e456647d0c', class: "twofa__resend-message" }, translate('twofaResendMessage', this.language)), index.h("button", { key: '84d5c55c4d9bf024164ec52e2100cfcc8c236ac2', class: `twofa__resend-button ${this.pinAttemptsExceeded ? 'twofa__resend-button--disabled' : ''}`, onClick: this.resendCodeHandler, disabled: !this.isResendButtonAvailable || this.pinAttemptsExceeded }, this.isResendButtonAvailable
15187
+ })), index.h("div", { key: '63564bd4a0442232f81058ba914ee86c537ce85a', class: "twofa__button-wrapper" }, index.h("p", { key: '219f5005c0d03189df48f05c5e0cd980eb0e1979', class: "twofa__resend-message" }, translate('twofaResendMessage', this.language)), index.h("button", { key: '12b7b4bc3ea165994f2c50107f406c64e708cf4d', class: `twofa__resend-button ${this.pinAttemptsExceeded ? 'twofa__resend-button--disabled' : ''}`, onClick: this.resendCodeHandler, disabled: !this.isResendButtonAvailable || this.pinAttemptsExceeded }, this.isResendButtonAvailable
15278
15188
  ? translate('twofaResendButton', this.language)
15279
15189
  : this.formatTime()))));
15280
15190
  }
@@ -15282,8 +15192,8 @@ const TwofaInput = class {
15282
15192
  static get watchers() { return {
15283
15193
  "isValid": ["validityChanged"],
15284
15194
  "emitValue": ["emitValueHandler"],
15285
- "clientStylingUrl": ["handleStylingUrlChange"],
15286
- "clientStyling": ["handleStylingChange"]
15195
+ "clientStyling": ["handleClientStylingChange"],
15196
+ "clientStylingUrl": ["handleClientStylingChangeURL"]
15287
15197
  }; }
15288
15198
  };
15289
15199
  TwofaInput.style = TwofaInputStyle0;