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`