@visma-swno/customer-onboarding-wizard 1.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/index.js +56 -56
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -197,7 +197,7 @@ document.addEventListener('http-error', async (event) => {
|
|
|
197
197
|
**Handled Automatically**: Host application does not need to listen to this event. The component:
|
|
198
198
|
- Displays a red error banner at the top of the wizard
|
|
199
199
|
- Automatically translates error title and message to the user's selected language
|
|
200
|
-
- Supports
|
|
200
|
+
- Supports 6 translation sets: da-DK, en-US, fi-FI, nb-NO, nl-NL, sv-SE (`en-GB` is accepted and served using `en-US` translations)
|
|
201
201
|
- Banner remains visible until the user manually dismisses it by clicking the X button
|
|
202
202
|
- Allows users to report errors to support
|
|
203
203
|
|
package/dist/index.js
CHANGED
|
@@ -1007,7 +1007,7 @@ class O {
|
|
|
1007
1007
|
return this.request(t, { method: "PATCH", body: a, headers: r });
|
|
1008
1008
|
}
|
|
1009
1009
|
}
|
|
1010
|
-
const j = S`button{padding:var(--ga-size-spacing-04) var(--ga-size-spacing-07);border-radius:var(--ga-radius);font-size:var(--ga-text-md-size);font-weight:var(--ga-font-weight-medium);cursor:pointer;transition:background-color var(--ga-transition-hover),border-color var(--ga-transition-hover);border:var(--ga-size-border-width-sm) solid transparent;white-space:nowrap;font-family:var(--vsn-customer-onboarding-wizard-font-family);}.btn-primary{background:var(--ga-color-surface-action);color:var(--ga-color-secondary-10);border-color:var(--ga-color-surface-action);}.btn-primary:hover:not(:disabled){background:var(--ga-color-surface-action-hover);border-color:var(--ga-color-surface-action-hover);}.btn-primary:disabled{opacity:0.5;cursor:not-allowed;}.btn-secondary{background:var(--ga-color-white);color:var(--ga-color-text-body);border-color:var(--ga-color-cyan-80);}.btn-secondary:hover{background:var(--ga-color-secondary-10);}.btn-primary:focus-visible,.btn-secondary:focus-visible{outline:var(--ga-size-border-width-md) solid var(--ga-color-border-focus);outline-offset:var(--ga-size-border-width-md);}`, P = S`:host{display:
|
|
1010
|
+
const j = S`button{padding:var(--ga-size-spacing-04) var(--ga-size-spacing-07);border-radius:var(--ga-radius);font-size:var(--ga-text-md-size);font-weight:var(--ga-font-weight-medium);cursor:pointer;transition:background-color var(--ga-transition-hover),border-color var(--ga-transition-hover);border:var(--ga-size-border-width-sm) solid transparent;white-space:nowrap;font-family:var(--vsn-customer-onboarding-wizard-font-family);}.btn-primary{background:var(--ga-color-surface-action);color:var(--ga-color-secondary-10);border-color:var(--ga-color-surface-action);}.btn-primary:hover:not(:disabled){background:var(--ga-color-surface-action-hover);border-color:var(--ga-color-surface-action-hover);}.btn-primary:disabled{opacity:0.5;cursor:not-allowed;}.btn-secondary{background:var(--ga-color-white);color:var(--ga-color-text-body);border-color:var(--ga-color-cyan-80);}.btn-secondary:hover{background:var(--ga-color-secondary-10);}.btn-primary:focus-visible,.btn-secondary:focus-visible{outline:var(--ga-size-border-width-md) solid var(--ga-color-border-focus);outline-offset:var(--ga-size-border-width-md);}`, P = S`:host{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;}.step-content{text-align:left;flex:1;min-height:0;overflow-y:auto;}.step-content h2{font-size:var(--ga-text-2xl-size);line-height:var(--ga-text-2xl-line-height);letter-spacing:var(--ga-text-2xl-tracking);font-weight:var(--ga-font-weight-normal);margin:0 0 var(--ga-size-spacing-03);color:var(--ga-color-text-headings);}.wizard-actions{display:flex;justify-content:flex-end;align-items:center;margin-top:var(--ga-size-spacing-05);padding-top:var(--ga-size-spacing-05);border-top:var(--ga-size-border-width-sm) solid var(--ga-color-neutral-30);gap:var(--ga-size-spacing-05);flex-shrink:0;}.field-error{display:flex;align-items:center;gap:var(--ga-size-spacing-02);margin-top:var(--ga-size-spacing-01);color:var(--ga-color-icon-error);font-size:var(--ga-text-sm-size);font-family:var(--vsn-customer-onboarding-wizard-font-family);line-height:var(--ga-text-sm-line-height);}.field-error svg{width:var(--ga-size-spacing-04);height:var(--ga-size-spacing-04);flex-shrink:0;}.field-error-text{color:var(--ga-color-text-body);}.field-error--empty{visibility:hidden;}`;
|
|
1011
1011
|
var M = Object.defineProperty, V = Object.getOwnPropertyDescriptor, D = (e, t, a, r) => {
|
|
1012
1012
|
for (var i = r > 1 ? void 0 : r ? V(t, a) : t, o = e.length - 1, s; o >= 0; o--)
|
|
1013
1013
|
(s = e[o]) && (i = (r ? s(t, a, i) : s(i)) || i);
|
|
@@ -1064,7 +1064,7 @@ R.styles = [
|
|
|
1064
1064
|
N,
|
|
1065
1065
|
j,
|
|
1066
1066
|
P,
|
|
1067
|
-
S`.wizard-content{text-align:left;padding:var(--ga-size-spacing-08) 0 var(--ga-size-spacing-06);}.welcome-wrapper{width:var(--ga-size-content-sm);margin:0 auto;text-align:left;}.welcome-wrapper p{font-size:var(--ga-text-md-size);line-height:var(--ga-text-md-line-height);letter-spacing:var(--ga-text-md-tracking);color:var(--ga-color-text-body);margin:0;}.welcome-wrapper h2.welcome-message{font-size:var(--ga-text-2xl-size);line-height:var(--ga-text-2xl-line-height);letter-spacing:var(--ga-text-2xl-tracking);font-weight:400;margin:0 0 var(--ga-size-spacing-06);color:var(--ga-color-text-headings);}h2[tabindex="-1"]:focus{outline:none;}`
|
|
1067
|
+
S`.wizard-content{text-align:left;padding:var(--ga-size-spacing-08) 0 var(--ga-size-spacing-06);flex:1;min-height:0;overflow-y:auto;}.welcome-wrapper{width:var(--ga-size-content-sm);margin:0 auto;text-align:left;}.welcome-wrapper p{font-size:var(--ga-text-md-size);line-height:var(--ga-text-md-line-height);letter-spacing:var(--ga-text-md-tracking);color:var(--ga-color-text-body);margin:0;}.welcome-wrapper h2.welcome-message{font-size:var(--ga-text-2xl-size);line-height:var(--ga-text-2xl-line-height);letter-spacing:var(--ga-text-2xl-tracking);font-weight:400;margin:0 0 var(--ga-size-spacing-06);color:var(--ga-color-text-headings);}h2[tabindex="-1"]:focus{outline:none;}`
|
|
1068
1068
|
];
|
|
1069
1069
|
D([
|
|
1070
1070
|
g({ type: String })
|
|
@@ -1476,8 +1476,6 @@ let m = class extends E {
|
|
|
1476
1476
|
</div>
|
|
1477
1477
|
</div>
|
|
1478
1478
|
|
|
1479
|
-
<hr class="section-divider" />
|
|
1480
|
-
|
|
1481
1479
|
<div class="wizard-actions">
|
|
1482
1480
|
<button type="button" class="btn-secondary" @click=${this.handleSaveAndClose}>
|
|
1483
1481
|
${e.common.saveAndClose}
|
|
@@ -2559,57 +2557,59 @@ let u = class extends E {
|
|
|
2559
2557
|
<h1 class="wizard-title" id="wizard-title">${e.wizard.title}</h1>
|
|
2560
2558
|
${this.renderErrorBanner(e)}
|
|
2561
2559
|
${this.renderStepIndicators(e)}
|
|
2562
|
-
|
|
2563
|
-
|
|
2564
|
-
|
|
2565
|
-
|
|
2566
|
-
|
|
2567
|
-
|
|
2568
|
-
|
|
2569
|
-
|
|
2570
|
-
|
|
2571
|
-
|
|
2572
|
-
|
|
2573
|
-
|
|
2574
|
-
|
|
2575
|
-
|
|
2576
|
-
|
|
2577
|
-
|
|
2578
|
-
|
|
2579
|
-
|
|
2580
|
-
|
|
2581
|
-
|
|
2582
|
-
|
|
2583
|
-
|
|
2584
|
-
|
|
2585
|
-
|
|
2586
|
-
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
|
|
2590
|
-
|
|
2591
|
-
|
|
2592
|
-
|
|
2593
|
-
|
|
2594
|
-
|
|
2595
|
-
|
|
2596
|
-
|
|
2597
|
-
|
|
2598
|
-
|
|
2599
|
-
|
|
2600
|
-
|
|
2601
|
-
|
|
2602
|
-
|
|
2603
|
-
|
|
2604
|
-
|
|
2605
|
-
|
|
2606
|
-
|
|
2607
|
-
|
|
2608
|
-
|
|
2609
|
-
|
|
2610
|
-
|
|
2611
|
-
|
|
2612
|
-
|
|
2560
|
+
|
|
2561
|
+
<div class="wizard-body">
|
|
2562
|
+
${this.currentStep === 0 ? n`
|
|
2563
|
+
<wizard-step-welcome
|
|
2564
|
+
.userName=${this.userName}
|
|
2565
|
+
.translations=${e}
|
|
2566
|
+
@start-setup=${this.handleStartSetup}
|
|
2567
|
+
@save-and-close=${this.handleSaveAndClose}
|
|
2568
|
+
></wizard-step-welcome>
|
|
2569
|
+
` : ""}
|
|
2570
|
+
|
|
2571
|
+
${this.currentStep === 1 ? n`
|
|
2572
|
+
<wizard-step1-company
|
|
2573
|
+
.translations=${e}
|
|
2574
|
+
.locale=${this.locale}
|
|
2575
|
+
.customerInfo=${this.customerInfo}
|
|
2576
|
+
@next=${this.handleNext}
|
|
2577
|
+
@save-and-close=${this.handleSaveAndClose}
|
|
2578
|
+
@edit-customer=${this.handleEditCustomer}
|
|
2579
|
+
></wizard-step1-company>
|
|
2580
|
+
` : ""}
|
|
2581
|
+
|
|
2582
|
+
${this.currentStep === 2 ? n`
|
|
2583
|
+
<wizard-step2-administrators
|
|
2584
|
+
.translations=${e}
|
|
2585
|
+
.httpService=${this.httpService}
|
|
2586
|
+
.customerId=${this.customerId}
|
|
2587
|
+
.locale=${this.locale}
|
|
2588
|
+
.currentUser=${this.currentUserProfile}
|
|
2589
|
+
@next=${this.handleNext}
|
|
2590
|
+
@save-and-close=${this.handleSaveAndClose}
|
|
2591
|
+
></wizard-step2-administrators>
|
|
2592
|
+
` : ""}
|
|
2593
|
+
|
|
2594
|
+
${this.currentStep === 3 ? n`
|
|
2595
|
+
<wizard-step3-partner-access
|
|
2596
|
+
.translations=${e}
|
|
2597
|
+
.httpService=${this.httpService}
|
|
2598
|
+
.customerId=${this.customerId}
|
|
2599
|
+
.partnerId=${((a = (t = this.customerInfo) == null ? void 0 : t.partner) == null ? void 0 : a.partnerId) ?? ""}
|
|
2600
|
+
.partnerName=${((i = (r = this.customerInfo) == null ? void 0 : r.partner) == null ? void 0 : i.name) ?? ""}
|
|
2601
|
+
@complete=${this.handleComplete}
|
|
2602
|
+
@save-and-close=${this.handleSaveAndClose}
|
|
2603
|
+
></wizard-step3-partner-access>
|
|
2604
|
+
` : ""}
|
|
2605
|
+
|
|
2606
|
+
${this.currentStep === 4 ? n`
|
|
2607
|
+
<wizard-step-complete
|
|
2608
|
+
.translations=${e}
|
|
2609
|
+
@close=${this.handleClose}
|
|
2610
|
+
></wizard-step-complete>
|
|
2611
|
+
` : ""}
|
|
2612
|
+
</div>
|
|
2613
2613
|
</div>
|
|
2614
2614
|
</div>
|
|
2615
2615
|
` : ""}
|
|
@@ -2649,7 +2649,7 @@ u.stepMap = {
|
|
|
2649
2649
|
};
|
|
2650
2650
|
u.styles = [
|
|
2651
2651
|
N,
|
|
2652
|
-
S`:host{display:block;font-family:var(--vsn-customer-onboarding-wizard-font-family);}.overlay{position:fixed;inset:0;background:var(--ga-color-surface-page);display:flex;align-items:center;justify-content:center;z-index:1000;}.wizard-container{background:var(--ga-color-white);width:780px;
|
|
2652
|
+
S`:host{display:block;font-family:var(--vsn-customer-onboarding-wizard-font-family);}.overlay{position:fixed;inset:0;background:var(--ga-color-surface-page);display:flex;align-items:center;justify-content:center;z-index:1000;}.wizard-container{background:var(--ga-color-white);width:780px;max-height:90vh;box-sizing:border-box;padding:var(--ga-size-spacing-08) var(--ga-size-spacing-10) var(--ga-size-spacing-05);border-radius:var(--ga-radius);border:1px solid var(--ga-color-cyan-80);display:flex;flex-direction:column;overflow:hidden;}.wizard-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;}h1.wizard-title{font-size:var(--ga-text-2xl-size);line-height:var(--ga-text-2xl-line-height);font-weight:600;margin:0 0 var(--ga-size-spacing-07);color:var(--ga-color-text-headings);text-align:left;letter-spacing:-0.27px}.error-banner{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ga-size-spacing-04);padding:var(--ga-size-spacing-05);margin-bottom:var(--ga-size-spacing-06);background-color:#FEF2F2;border:1px solid #FCA5A5;border-radius:var(--ga-radius);animation:slideDown 0.3s ease-out;}@keyframes slideDown{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}.error-content{display:flex;align-items:flex-start;gap:var(--ga-size-spacing-04);flex:1;}.error-icon{width:24px;height:24px;color:var(--ga-color-error);flex-shrink:0;}.error-icon svg{width:24px;height:24px;}.error-text-container{display:flex;flex-direction:column;gap:var(--ga-size-spacing-01);flex:1;}.error-title{font-size:var(--ga-text-sm-size);line-height:var(--ga-text-sm-line-height);color:var(--ga-color-cyan-90);font-weight:600;margin:0;}.error-message{font-size:var(--ga-text-sm-size);line-height:var(--ga-text-sm-line-height);color:var(--ga-color-cyan-90);font-weight:400;margin:0;}.error-dismiss{background:none;border:none;padding:0;cursor:pointer;color:var(--ga-color-red-60);width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;opacity:0.7;transition:opacity 0.2s;}.error-dismiss:hover{opacity:1;}.error-dismiss:focus-visible{outline:var(--ga-size-border-width-md) solid var(--ga-color-border-focus);outline-offset:var(--ga-size-border-width-md);border-radius:var(--ga-radius);}.error-dismiss svg{width:20px;height:20px;}.step-indicators{display:flex;flex-direction:column;padding-bottom:var(--ga-size-spacing-10);}.line-row{display:flex;gap:0;margin-bottom:var(--ga-size-spacing-04);}.line-segment{flex:1;border-bottom:2px solid var(--ga-color-neutral-30);margin:0;padding:0;}.line-segment.completed{border-bottom-color:var(--ga-color-success);}.line-segment.active{border-bottom-color:var(--ga-color-primary);border-bottom-width:4px;margin-bottom:-2px;}.steps-row{display:flex;gap:0;}.step-wrapper{flex:1;display:flex;align-items:center;}.step-indicator{display:flex;align-items:center;gap:var(--ga-size-spacing-03);}.step-icon{width:24px;height:24px;border-radius:var(--ga-radius-round);background:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ga-color-primary);}.step-indicator.active .step-icon{color:var(--ga-color-primary);}.step-indicator.completed .step-icon{color:var(--ga-color-success);}.step-label{font-size:var(--ga-text-md-size);font-weight:500;color:var(--ga-color-primary);white-space:nowrap;letter-spacing:-0.1px}.step-indicator.active .step-label{color:var(--ga-color-text-headings);font-weight:500;}`
|
|
2653
2653
|
];
|
|
2654
2654
|
y([
|
|
2655
2655
|
g({ type: String })
|