From 21c0ef2ef3c921a2a1523ab2456a245247b1f71b Mon Sep 17 00:00:00 2001 From: Robert Hjalmers Date: Tue, 14 Dec 2021 09:23:29 +0100 Subject: [PATCH 1/4] fix(left-navigation): support multi-line closes #89 --- .../src/app/app-routing.module.ts | 4 +- .../left-navigation.component.html | 12 +- .../left-navigation.component.scss | 112 +++++++----------- 3 files changed, 55 insertions(+), 73 deletions(-) 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 }}
    [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 */ From 0c8b971a8f6f5eb3ebb066f79e7382b2f4301047 Mon Sep 17 00:00:00 2001 From: Robert Hjalmers Date: Tue, 14 Dec 2021 10:55:16 +0100 Subject: [PATCH 2/4] feat(state): add method for clearing state closes #92 --- .../step-states/step-states.component.html | 10 ++++++++++ .../step-states/step-states.component.ts | 8 ++++++++ .../src/lib/services/wizard-steps.service.ts | 19 +++++++++++++++++++ projects/seb-ng-wizard/tsconfig.lib.json | 2 +- 4 files changed, 38 insertions(+), 1 deletion(-) 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/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, From e71b7207343e9f940a434c2056f81feb2895ba53 Mon Sep 17 00:00:00 2001 From: Robert Hjalmers Date: Tue, 14 Dec 2021 11:03:07 +0100 Subject: [PATCH 3/4] chore: update lock file From 563923b8373063f7ea79da6a94e14e5e8d3f2dbe Mon Sep 17 00:00:00 2001 From: Robert Hjalmers Date: Tue, 14 Dec 2021 11:18:53 +0100 Subject: [PATCH 4/4] chore: update lock file --- package-lock.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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"