diff --git a/packages/steps/src/LionStep.js b/packages/steps/src/LionStep.js index d3c5fd356..af7c407f1 100644 --- a/packages/steps/src/LionStep.js +++ b/packages/steps/src/LionStep.js @@ -97,9 +97,8 @@ export class LionStep extends LionLitElement { `; } - connectedCallback() { - // eslint-disable-next-line wc/guard-super-call - super.connectedCallback(); + firstUpdated() { + super.firstUpdated(); this.controller = this.parentNode; if (this.initialStep === true) { this.enter(true); @@ -107,9 +106,9 @@ export class LionStep extends LionLitElement { } getControllerIndex() { - const controllerChildren = this.controller.children; - for (let i = 0; i < controllerChildren.length; i += 1) { - if (controllerChildren[i] === this) { + const { steps } = this.controller; + for (let i = 0; i < steps.length; i += 1) { + if (steps[i] === this) { return i; } } diff --git a/packages/steps/src/LionSteps.js b/packages/steps/src/LionSteps.js index 81b46843c..c44c7cd78 100644 --- a/packages/steps/src/LionSteps.js +++ b/packages/steps/src/LionSteps.js @@ -63,7 +63,7 @@ export class LionSteps extends ObserverMixin(LionLitElement) { firstUpdated() { super.firstUpdated(); - this._max = this.children.length - 1; + this._max = this.steps.length - 1; } next() { @@ -74,12 +74,17 @@ export class LionSteps extends ObserverMixin(LionLitElement) { this._goTo(this.current - 1, this.current); } + get steps() { + const defaultSlot = this.shadowRoot.querySelector('slot:not([name])'); + return defaultSlot.assignedNodes().filter(node => node.nodeType === Node.ELEMENT_NODE); + } + _goTo(newCurrent, oldCurrent) { if (newCurrent < 0 || newCurrent > this._max) { throw new Error(`There is no step at index ${newCurrent}.`); } - const nextStep = this.children[newCurrent]; + const nextStep = this.steps[newCurrent]; const back = newCurrent < oldCurrent; if (nextStep.passesCondition(this.data)) { @@ -99,8 +104,8 @@ export class LionSteps extends ObserverMixin(LionLitElement) { } _changeStep(newCurrent, oldCurrent) { - const oldStepElement = this.children[oldCurrent]; - const newStepElement = this.children[newCurrent]; + const oldStepElement = this.steps[oldCurrent]; + const newStepElement = this.steps[newCurrent]; const fromStep = { number: oldCurrent, element: oldStepElement }; const toStep = { number: newCurrent, element: newStepElement }; diff --git a/packages/steps/test/lion-step.test.js b/packages/steps/test/lion-step.test.js index 593df8047..67668cb20 100644 --- a/packages/steps/test/lion-step.test.js +++ b/packages/steps/test/lion-step.test.js @@ -1,4 +1,4 @@ -import { expect, fixture, html, oneEvent } from '@open-wc/testing'; +import { expect, fixture, fixtureSync, html, oneEvent } from '@open-wc/testing'; import '../lion-step.js'; @@ -36,20 +36,24 @@ describe('lion-step', () => { }); it('allows to define it as the initial-step', async () => { - const el = await fixture(html` + const el = fixtureSync(html` Step 1 `); + el.steps = [el.children[0]]; + await el.updateComplete; expect(el.current).to.equal(0); expect(el.children[0].status).to.equal('entered'); - const el2 = await fixture(html` + const el2 = fixtureSync(html` Step 1 Step 2 `); + el2.steps = [el2.children[0], el2.children[1]]; + await el2.updateComplete; expect(el2.current).to.equal(1); expect(el2.children[0].status).to.equal('untouched'); expect(el2.children[1].status).to.equal('entered'); diff --git a/packages/steps/test/lion-steps.test.js b/packages/steps/test/lion-steps.test.js index f6a798c91..06b1e6d5d 100644 --- a/packages/steps/test/lion-steps.test.js +++ b/packages/steps/test/lion-steps.test.js @@ -27,6 +27,21 @@ async function checkWorkflow(steps, expected) { } describe('lion-steps', () => { + it('has "steps" getter that returns default slot elements', async () => { + const el = await fixture(html` + + Step 1 + Step 2 + Step 3 + e.g. steps indicator + + `); + expect(el.steps.length).to.equal(3); + expect(el.steps[0].tagName).to.equal('LION-STEP'); + expect(el.steps[1].tagName).to.equal('LION-STEP'); + expect(el.steps[2].tagName).to.equal('OTHER-STEP-ELEMENT'); + }); + describe('initialization', () => { it('activates step with an "initial-step" attribute', async () => { const el = await fixture(html`