diff --git a/package-lock.json b/package-lock.json
index 36360dd..a86fbf5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2428,7 +2428,7 @@
},
"@fortawesome/angular-fontawesome": {
"version": "0.9.0",
- "resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/0.9.0/angular-fontawesome-0.9.0.tgz",
+ "resolved": "https://npm.fontawesome.com/@fortawesome/angular-fontawesome/-/0.9.0/angular-fontawesome-0.9.0.tgz",
"integrity": "sha512-pJNJqxRTJChkUtywbqRuJRpmK/WNwqFqeN/GMmJmy3gHeCnWQ4SG0BwPJqaWqhi4gqII5dADijGts6wqeusxeQ==",
"requires": {
"tslib": "^2.2.0"
@@ -2436,12 +2436,12 @@
},
"@fortawesome/fontawesome-common-types": {
"version": "0.2.36",
- "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/0.2.36/fontawesome-common-types-0.2.36.tgz",
+ "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-common-types/-/0.2.36/fontawesome-common-types-0.2.36.tgz",
"integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg=="
},
"@fortawesome/fontawesome-svg-core": {
"version": "1.2.36",
- "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/1.2.36/fontawesome-svg-core-1.2.36.tgz",
+ "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-svg-core/-/1.2.36/fontawesome-svg-core-1.2.36.tgz",
"integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.36"
@@ -2449,7 +2449,7 @@
},
"@fortawesome/free-brands-svg-icons": {
"version": "5.15.4",
- "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/5.15.4/free-brands-svg-icons-5.15.4.tgz",
+ "resolved": "https://npm.fontawesome.com/@fortawesome/free-brands-svg-icons/-/5.15.4/free-brands-svg-icons-5.15.4.tgz",
"integrity": "sha512-f1witbwycL9cTENJegcmcZRYyawAFbm8+c6IirLmwbbpqz46wyjbQYLuxOc7weXFXfB7QR8/Vd2u5R3q6JYD9g==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.36"
@@ -2457,7 +2457,7 @@
},
"@fortawesome/pro-regular-svg-icons": {
"version": "5.15.4",
- "resolved": "https://registry.npmjs.org/@fortawesome/pro-regular-svg-icons/-/5.15.4/pro-regular-svg-icons-5.15.4.tgz",
+ "resolved": "https://npm.fontawesome.com/@fortawesome/pro-regular-svg-icons/-/5.15.4/pro-regular-svg-icons-5.15.4.tgz",
"integrity": "sha512-LN9wOPIISKg3jZBbAuMm6YcsCiMRzTcpVkotLonRuzDmw0OLszUPCHZ6vB5hEnOC7g6IIOwOOnV12fW0V8IS9Q==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.36"
diff --git a/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/sub-steps/step-states/step-states.component.html b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/sub-steps/step-states/step-states.component.html
index 2ff1ee6..3d047b3 100644
--- a/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/sub-steps/step-states/step-states.component.html
+++ b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/sub-steps/step-states/step-states.component.html
@@ -56,3 +56,13 @@
Set state for step based on route path
+
+Clear all states
+Clear all states with clearState
method.
+
diff --git a/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/sub-steps/step-states/step-states.component.ts b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/sub-steps/step-states/step-states.component.ts
index 61ff0a2..712dbc3 100644
--- a/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/sub-steps/step-states/step-states.component.ts
+++ b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/sub-steps/step-states/step-states.component.ts
@@ -25,6 +25,10 @@ export class StepStatesComponent {
setStateForPath(state: StepState, path: string) {
this.wizardSteps.setState(state, path);
}
+
+ clearAllStates() {
+ this.wizardSteps.clearState();
+ }
}
`;
constructor(private wizardSteps: WizardSteps, private fb: FormBuilder) {
@@ -43,4 +47,8 @@ export class StepStatesComponent {
setStateForPath(state: StepState) {
this.wizardSteps.setState(state, '/wizard/' + this.stepForm.value.stepRoute);
}
+
+ clearAllStates() {
+ this.wizardSteps.clearState();
+ }
}
diff --git a/projects/seb-ng-wizard-simple-usage/src/app/app-routing.module.ts b/projects/seb-ng-wizard-simple-usage/src/app/app-routing.module.ts
index 6fa4d1a..70ff9ea 100644
--- a/projects/seb-ng-wizard-simple-usage/src/app/app-routing.module.ts
+++ b/projects/seb-ng-wizard-simple-usage/src/app/app-routing.module.ts
@@ -24,7 +24,7 @@ const routes: WizardStep[] = [
path: 'step-two',
component: StepTwoComponent,
data: {
- heading: 'Step two',
+ heading: 'Step two with a very long heading spanning two lines',
subSteps: ['step-a', 'step-b'],
},
children: [
@@ -36,7 +36,7 @@ const routes: WizardStep[] = [
path: 'step-a',
component: StepAComponent,
data: {
- heading: 'Sub step A',
+ heading: 'Sub step A with a very long heading',
},
},
{
diff --git a/projects/seb-ng-wizard/src/lib/components/left-navigation/left-navigation.component.html b/projects/seb-ng-wizard/src/lib/components/left-navigation/left-navigation.component.html
index 9383f9b..217eaf3 100644
--- a/projects/seb-ng-wizard/src/lib/components/left-navigation/left-navigation.component.html
+++ b/projects/seb-ng-wizard/src/lib/components/left-navigation/left-navigation.component.html
@@ -26,7 +26,9 @@
[class.list-group-item-wrapper]="step.data?.subSteps?.length > 0"
[routerLinkActive]="'active'"
>
- {{ t[step.data.heading] || step.data.heading }}
+ {{ t[step.data.heading] || step.data.heading }}
0"
@@ -44,10 +46,12 @@
[class.list-group-item-warning]="child?.data?.state === 'warning'"
[routerLinkActive]="'active'"
*ngIf="step.children[subStep] as child"
+ [routerLink]="step.path + '/' + subStep"
+ queryParamsHandling="merge"
>
- {{
- t[child.data?.heading] || child.data?.heading
- }}
+
+ {{ t[child.data?.heading] || child.data?.heading }}
+
diff --git a/projects/seb-ng-wizard/src/lib/components/left-navigation/left-navigation.component.scss b/projects/seb-ng-wizard/src/lib/components/left-navigation/left-navigation.component.scss
index f08b797..8554955 100644
--- a/projects/seb-ng-wizard/src/lib/components/left-navigation/left-navigation.component.scss
+++ b/projects/seb-ng-wizard/src/lib/components/left-navigation/left-navigation.component.scss
@@ -47,9 +47,7 @@ $grid-breakpoints: (
xl: 1248px
);
-/**/
@import '~@sebgroup/bootstrap/scss/core';
-// @import '../wizard/variables.scss';
$navbar-brand-height: 3.5rem;
.step-wrapper {
overflow: hidden;
@@ -57,7 +55,7 @@ $navbar-brand-height: 3.5rem;
}
$wiz-navigation-bg-color: $gray-300;
$box-shadow-wizard: 0 0 0.5rem rgba($black, 0.15) !default;
-
+/* stylelint-disable */
nav {
.list-group-ordered .list-group-item-action:hover,
.list-group-ordered .active {
@@ -99,16 +97,32 @@ nav {
@include media-breakpoint-up(md) {
width: $left-nav-width;
height: calc(100vh - #{$navbar-brand-height});
- //border-right: $border-color $border-width solid;
}
.list-group-wizard {
counter-reset: number;
list-style-type: none;
+ &:not(.list-group-wizard-sub) > .list-group-item:hover,
+ &:not(.list-group-wizard-sub) > .list-group-item.active {
+ > a::after {
+ content: '';
+ display: block;
+ position: absolute;
+ left: -2rem;
+ @include box-shadow($box-shadow-wizard);
+ background: #fff;
+ width: calc(100% + 3rem);
+ height: calc(100% + 2rem);
+ top: -1rem;
+ z-index: 0;
+ }
+ }
.list-group-item {
border-top: solid 1px transparent;
padding: 1rem;
cursor: pointer;
+ display: flex;
+ flex-wrap: wrap;
& + .list-group-item {
&:hover {
@@ -126,8 +140,6 @@ nav {
&:hover > a,
&.active > a {
- @include box-shadow($box-shadow-wizard);
- background: #fff;
&::before {
z-index: 3;
position: relative;
@@ -135,24 +147,25 @@ nav {
}
> a {
- //height: 100%;
- height: 3.5rem;
- position: absolute;
+ flex: 1 0;
top: 0;
left: 0;
- padding: 1rem 2.5rem;
+ position: relative;
width: 100%;
text-decoration: none;
font-weight: normal;
color: inherit;
+ span {
+ position: relative;
+ padding: 0 0.75rem;
+ display: block;
+ z-index: 1;
+ }
&:focus {
- //@include box-shadow($box-shadow-wizard);
outline: none;
- //@include box-shadow(0px 0px 4px 1px $input-focus-border-color inset);
@include box-shadow(0px 0px 4px 1px $input-focus-border-color);
z-index: 2;
- //background: red;
}
}
@@ -168,9 +181,15 @@ nav {
color: inherit;
border-top: solid 1px #fff;
- //background: #fff;
-
- &.list-group-item-passed > a {
+ &.list-group-item-passed > a::after {
+ content: '';
+ display: block;
+ position: absolute;
+ left: -2rem;
+ width: calc(100% + 3rem);
+ height: calc(100% + 2rem);
+ top: -1rem;
+ z-index: 0;
box-shadow: none;
background: #f8f8f8;
}
@@ -178,17 +197,6 @@ nav {
> a {
font-weight: inherit;
color: inherit;
-
- /*&::before {
- content: '';
- display: block;
- background: black;
- width: 6px;
- height: 100%;
- left: 0;
- position: absolute;
- top: 0;
- }*/
}
}
&.list-group-item-passed {
@@ -205,20 +213,12 @@ nav {
}
&.list-group-item-success {
- // font-weight: 500;
- // background: $gray-100;
- &.active {
- //background: #fff;
- }
-
- //&:not(.active)::after {
&::after {
content: '';
display: inline-block;
background-position: center;
background-repeat: no-repeat;
vertical-align: top;
- //margin-top: 4px;
width: 1rem;
height: 1rem;
position: absolute;
@@ -232,16 +232,11 @@ nav {
);
}
- > a {
- // font-weight: inherit;
- }
&:not(:hover) + .list-group-item-success {
border-top: solid 1px $gray-200;
}
}
&.list-group-item-danger {
- // font-weight: 500;
- // background: $gray-100;
&.active {
background: #fff;
}
@@ -252,7 +247,6 @@ nav {
background-position: center;
background-repeat: no-repeat;
vertical-align: top;
- //margin-top: 4px;
width: 1rem;
height: 1rem;
position: absolute;
@@ -274,8 +268,6 @@ nav {
}
}
&.list-group-item-warning {
- // font-weight: 500;
- // background: $gray-100;
&.active {
background: #fff;
}
@@ -286,7 +278,6 @@ nav {
background-position: center;
background-repeat: no-repeat;
vertical-align: top;
- //margin-top: 4px;
width: 1rem;
height: 1rem;
position: absolute;
@@ -301,12 +292,6 @@ nav {
no-repeat,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='10 10'%3E%3Crect width='10' height='10' style='fill:%23000;' /%3E%3C/svg%3E")
4px 4px;
- //background-image: map-get($theme-icons, 'warning');
- /*background-image: str-replace(
- map-get($theme-icons, 'warning'),
- str-replace(#{"fill='" + $icon-fill-color + "'"}, '#', '%23'),
- str-replace(#{"fill='" + map-get($theme-colors, 'warning') + "'"}, '#', '%23')
- );*/
}
> a {
@@ -317,8 +302,6 @@ nav {
}
}
&.list-group-item-info {
- // font-weight: 500;
- // background: $gray-100;
&.active {
background: #fff;
}
@@ -329,7 +312,6 @@ nav {
background-position: center;
background-repeat: no-repeat;
vertical-align: top;
- //margin-top: 4px;
width: 1rem;
height: 1rem;
position: absolute;
@@ -343,21 +325,10 @@ nav {
);
}
- > a {
- // font-weight: inherit;
- }
&:not(:hover) + .list-group-item-success {
border-top: solid 1px $gray-200;
}
}
- // nested
- .list-group-wizard .list-group-item {
- // border-top: solid 1px $gray-200;
- // border-top: solid 1px transparent;
- > a {
- padding-left: 3.25rem;
- }
- }
}
&.indent {
.list-group-wizard .list-group-item {
@@ -368,9 +339,6 @@ nav {
border-top-color: transparent;
}
}
- > a {
- padding-left: 5rem !important;
- }
}
}
&.no-sub {
@@ -382,4 +350,14 @@ nav {
.list-group-wizard-sub > .list-group-item-passed {
border-top: solid 1px $gray-200;
}
+ .list-group-wizard-sub {
+ width: 100%;
+ flex: 1 1 auto;
+ .list-group-item:hover,
+ .list-group-item.active {
+ @include box-shadow($box-shadow-wizard);
+ background: #fff;
+ }
+ }
}
+/* stylelint-enable */
diff --git a/projects/seb-ng-wizard/src/lib/services/wizard-steps.service.ts b/projects/seb-ng-wizard/src/lib/services/wizard-steps.service.ts
index d110b41..6a8b4a4 100644
--- a/projects/seb-ng-wizard/src/lib/services/wizard-steps.service.ts
+++ b/projects/seb-ng-wizard/src/lib/services/wizard-steps.service.ts
@@ -216,6 +216,25 @@ export class WizardSteps {
this._updateStep({ subSteps: activeSubSteps }, path);
}
+ clearState() {
+ this._steps$.next(this._clearState(this.steps));
+ }
+
+ private _clearState(steps: WizardStepConfigs = this.steps) {
+ return Object.fromEntries(
+ Object.entries(steps).map(([key, step]) => {
+ // if step has children...
+ if (step.children) {
+ // ...clear state for children
+ step.children = { ...this._clearState({ ...step.children }) };
+ }
+ // remove state from data
+ const { state, ...newData } = step.data;
+ return [[key], { ...step, data: { ...newData } }];
+ }),
+ );
+ }
+
private _updateStep(object: any, path?: string) {
const p = this._getStepReferenceByUrl(path);
const stepId = p.stepPath.id;
diff --git a/projects/seb-ng-wizard/tsconfig.lib.json b/projects/seb-ng-wizard/tsconfig.lib.json
index c754a25..70ba433 100644
--- a/projects/seb-ng-wizard/tsconfig.lib.json
+++ b/projects/seb-ng-wizard/tsconfig.lib.json
@@ -8,7 +8,7 @@
"declarationMap": true,
"inlineSources": true,
"types": [],
- "lib": ["dom", "es2018"]
+ "lib": ["dom", "es2019"]
},
"angularCompilerOptions": {
"skipTemplateCodegen": true,