diff --git a/packages/select-rich/src/LionSelectInvoker.js b/packages/select-rich/src/LionSelectInvoker.js
index fcc01c144..dd30134e0 100644
--- a/packages/select-rich/src/LionSelectInvoker.js
+++ b/packages/select-rich/src/LionSelectInvoker.js
@@ -10,9 +10,16 @@ import { html } from '@lion/core';
export class LionSelectInvoker extends LionButton {
static get properties() {
return {
+ /**
+ * @desc the option Element that is currently selected
+ */
selectedElement: {
type: Object,
},
+ /**
+ * @desc When the connected LionSelectRich insteance is readOnly,
+ * this should be reflected in the invoker as well
+ */
readOnly: {
type: Boolean,
reflect: true,
@@ -32,7 +39,7 @@ export class LionSelectInvoker extends LionButton {
};
}
- get contentWrapper() {
+ get _contentWrapperNode() {
return this.shadowRoot.getElementById('content-wrapper');
}
@@ -53,7 +60,7 @@ export class LionSelectInvoker extends LionButton {
return ``;
}
- _renderBefore() {
+ _beforeTemplate() {
return html`
${this._contentTemplate()}
@@ -62,7 +69,7 @@ export class LionSelectInvoker extends LionButton {
}
// eslint-disable-next-line class-methods-use-this
- _renderAfter() {
+ _afterTemplate() {
return html`
`;
diff --git a/packages/select-rich/src/LionSelectRich.js b/packages/select-rich/src/LionSelectRich.js
index 22dbdda67..e6812ae22 100644
--- a/packages/select-rich/src/LionSelectRich.js
+++ b/packages/select-rich/src/LionSelectRich.js
@@ -157,8 +157,8 @@ export class LionSelectRich extends ChoiceGroupMixin(
return this.formElements.findIndex(el => el.active === true);
}
- get scrollTarget() {
- return this._overlayContentNode.scrollTarget || this._overlayContentNode;
+ get _scrollTargetNode() {
+ return this._overlayContentNode._scrollTargetNode || this._overlayContentNode;
}
set activeIndex(index) {
@@ -166,7 +166,7 @@ export class LionSelectRich extends ChoiceGroupMixin(
const el = this.formElements[index];
el.active = true;
- if (!isInView(this.scrollTarget, el)) {
+ if (!isInView(this._scrollTargetNode, el)) {
el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
}
@@ -239,8 +239,8 @@ export class LionSelectRich extends ChoiceGroupMixin(
render() {
return html`
- ${this.labelTemplate()} ${this.helpTextTemplate()} ${this.inputGroupTemplate()}
- ${this.feedbackTemplate()}
+ ${this._labelTemplate()} ${this._helpTextTemplate()} ${this._inputGroupTemplate()}
+ ${this._feedbackTemplate()}
`;
}
@@ -288,7 +288,7 @@ export class LionSelectRich extends ChoiceGroupMixin(
* @override
*/
// eslint-disable-next-line
- inputGroupInputTemplate() {
+ _inputGroupInputTemplate() {
return html`
@@ -614,13 +614,13 @@ export class LionSelectRich extends ChoiceGroupMixin(
this._overlayCtrl.addEventListener('hide', this.__overlayOnHide);
this.__preventScrollingWithArrowKeys = this.__preventScrollingWithArrowKeys.bind(this);
- this.scrollTarget.addEventListener('keydown', this.__preventScrollingWithArrowKeys);
+ this._scrollTargetNode.addEventListener('keydown', this.__preventScrollingWithArrowKeys);
}
__teardownOverlay() {
this._overlayCtrl.removeEventListener('show', this.__overlayOnShow);
this._overlayCtrl.removeEventListener('hide', this.__overlayOnHide);
- this.scrollTarget.removeEventListener('keydown', this.__overlayOnHide);
+ this._scrollTargetNode.removeEventListener('keydown', this.__overlayOnHide);
}
__preventScrollingWithArrowKeys(ev) {
diff --git a/packages/select-rich/test/lion-select-invoker.test.js b/packages/select-rich/test/lion-select-invoker.test.js
index fdec095ac..526470252 100644
--- a/packages/select-rich/test/lion-select-invoker.test.js
+++ b/packages/select-rich/test/lion-select-invoker.test.js
@@ -19,7 +19,7 @@ describe('lion-select-invoker', () => {
el.selectedElement = await fixture(`
`);
await el.updateComplete;
- expect(el.contentWrapper).lightDom.to.equal(
+ expect(el._contentWrapperNode).lightDom.to.equal(
`
I am
2 lines
@@ -37,7 +37,7 @@ describe('lion-select-invoker', () => {
el.selectedElement = await fixture(`
just textContent
`);
await el.updateComplete;
- expect(el.contentWrapper).lightDom.to.equal('just textContent');
+ expect(el._contentWrapperNode).lightDom.to.equal('just textContent');
});
it('has tabindex="0"', async () => {
@@ -66,11 +66,11 @@ describe('lion-select-invoker', () => {
el.selectedElement = await fixture(`
cat
`);
await el.updateComplete;
- expect(el.contentWrapper).lightDom.to.equal('cat selected');
+ expect(el._contentWrapperNode).lightDom.to.equal('cat selected');
el.selectedElement = await fixture(`
dog
`);
await el.updateComplete;
- expect(el.contentWrapper).lightDom.to.equal('no valid selection');
+ expect(el._contentWrapperNode).lightDom.to.equal('no valid selection');
});
});
});
diff --git a/packages/switch/src/LionSwitch.js b/packages/switch/src/LionSwitch.js
index e24be04d8..2155fe75b 100644
--- a/packages/switch/src/LionSwitch.js
+++ b/packages/switch/src/LionSwitch.js
@@ -30,23 +30,23 @@ export class LionSwitch extends ChoiceInputMixin(LionField) {
render() {
return html`
- ${this.groupOneTemplate()}
+ ${this._groupOneTemplate()}
- ${this.groupTwoTemplate()}
+ ${this._groupTwoTemplate()}
`;
}
- groupOneTemplate() {
+ _groupOneTemplate() {
return html`
- ${this.labelTemplate()} ${this.helpTextTemplate()} ${this.feedbackTemplate()}
+ ${this._labelTemplate()} ${this._helpTextTemplate()} ${this._feedbackTemplate()}
`;
}
- groupTwoTemplate() {
+ _groupTwoTemplate() {
return html`
- ${this.inputGroupTemplate()}
+ ${this._inputGroupTemplate()}
`;
}