chore: unify the naming of changedProperties param (#620)
This commit is contained in:
parent
67a42c032e
commit
ad1e828d51
15 changed files with 73 additions and 67 deletions
|
|
@ -217,8 +217,8 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
|
||||||
this.__addEventForKeyboardNavigation();
|
this.__addEventForKeyboardNavigation();
|
||||||
}
|
}
|
||||||
|
|
||||||
updated(changed) {
|
updated(changedProperties) {
|
||||||
if (changed.has('__focusedDate') && this.__focusedDate) {
|
if (changedProperties.has('__focusedDate') && this.__focusedDate) {
|
||||||
this.focusCentralDate();
|
this.focusCentralDate();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -62,18 +62,18 @@ export const ChoiceInputMixin = superclass =>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
firstUpdated(c) {
|
firstUpdated(changedProperties) {
|
||||||
super.firstUpdated(c);
|
super.firstUpdated(changedProperties);
|
||||||
if (c.has('checked')) {
|
if (changedProperties.has('checked')) {
|
||||||
// Here we set the initial value for our [slot=input] content,
|
// Here we set the initial value for our [slot=input] content,
|
||||||
// which has been set by our SlotMixin
|
// which has been set by our SlotMixin
|
||||||
this.__syncCheckedToInputElement();
|
this.__syncCheckedToInputElement();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
updated(c) {
|
updated(changedProperties) {
|
||||||
super.updated(c);
|
super.updated(changedProperties);
|
||||||
if (c.has('modelValue')) {
|
if (changedProperties.has('modelValue')) {
|
||||||
this.__syncCheckedToInputElement();
|
this.__syncCheckedToInputElement();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -102,10 +102,10 @@ export const FormControlMixin = dedupeMixin(
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
updated(changedProps) {
|
updated(changedProperties) {
|
||||||
super.updated(changedProps);
|
super.updated(changedProperties);
|
||||||
|
|
||||||
if (changedProps.has('_ariaLabelledNodes')) {
|
if (changedProperties.has('_ariaLabelledNodes')) {
|
||||||
this.__reflectAriaAttr(
|
this.__reflectAriaAttr(
|
||||||
'aria-labelledby',
|
'aria-labelledby',
|
||||||
this._ariaLabelledNodes,
|
this._ariaLabelledNodes,
|
||||||
|
|
@ -113,7 +113,7 @@ export const FormControlMixin = dedupeMixin(
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (changedProps.has('_ariaDescribedNodes')) {
|
if (changedProperties.has('_ariaDescribedNodes')) {
|
||||||
this.__reflectAriaAttr(
|
this.__reflectAriaAttr(
|
||||||
'aria-describedby',
|
'aria-describedby',
|
||||||
this._ariaDescribedNodes,
|
this._ariaDescribedNodes,
|
||||||
|
|
@ -121,11 +121,11 @@ export const FormControlMixin = dedupeMixin(
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (changedProps.has('label')) {
|
if (changedProperties.has('label')) {
|
||||||
this._onLabelChanged({ label: this.label });
|
this._onLabelChanged({ label: this.label });
|
||||||
}
|
}
|
||||||
|
|
||||||
if (changedProps.has('helpText')) {
|
if (changedProperties.has('helpText')) {
|
||||||
this._onHelpTextChanged({ helpText: this.helpText });
|
this._onHelpTextChanged({ helpText: this.helpText });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -93,8 +93,8 @@ export class LionField extends FormControlMixin(
|
||||||
this.submitted = false;
|
this.submitted = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
firstUpdated(c) {
|
firstUpdated(changedProperties) {
|
||||||
super.firstUpdated(c);
|
super.firstUpdated(changedProperties);
|
||||||
this._initialModelValue = this.modelValue;
|
this._initialModelValue = this.modelValue;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -118,19 +118,19 @@ export class LionField extends FormControlMixin(
|
||||||
this._inputNode.removeEventListener('change', this._onChange);
|
this._inputNode.removeEventListener('change', this._onChange);
|
||||||
}
|
}
|
||||||
|
|
||||||
updated(changedProps) {
|
updated(changedProperties) {
|
||||||
super.updated(changedProps);
|
super.updated(changedProperties);
|
||||||
|
|
||||||
if (changedProps.has('disabled')) {
|
if (changedProperties.has('disabled')) {
|
||||||
this._inputNode.disabled = this.disabled;
|
this._inputNode.disabled = this.disabled;
|
||||||
this.validate();
|
this.validate();
|
||||||
}
|
}
|
||||||
|
|
||||||
if (changedProps.has('name')) {
|
if (changedProperties.has('name')) {
|
||||||
this._inputNode.name = this.name;
|
this._inputNode.name = this.name;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (changedProps.has('autocomplete')) {
|
if (changedProperties.has('autocomplete')) {
|
||||||
this._inputNode.autocomplete = this.autocomplete;
|
this._inputNode.autocomplete = this.autocomplete;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -145,10 +145,10 @@ export const FormGroupMixin = dedupeMixin(
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
updated(changedProps) {
|
updated(changedProperties) {
|
||||||
super.updated(changedProps);
|
super.updated(changedProperties);
|
||||||
|
|
||||||
if (changedProps.has('disabled')) {
|
if (changedProperties.has('disabled')) {
|
||||||
if (this.disabled) {
|
if (this.disabled) {
|
||||||
this.__requestChildrenToBeDisabled();
|
this.__requestChildrenToBeDisabled();
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -156,7 +156,7 @@ export const FormGroupMixin = dedupeMixin(
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (changedProps.has('focused')) {
|
if (changedProperties.has('focused')) {
|
||||||
if (this.focused === true) {
|
if (this.focused === true) {
|
||||||
this.__setupOutsideClickHandling();
|
this.__setupOutsideClickHandling();
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -37,8 +37,8 @@ export class HelperOutput extends LitElement {
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
firstUpdated(c) {
|
firstUpdated(changedProperties) {
|
||||||
super.firstUpdated(c);
|
super.firstUpdated(changedProperties);
|
||||||
if (!this.field) {
|
if (!this.field) {
|
||||||
// Fuzzy logic, but... practical
|
// Fuzzy logic, but... practical
|
||||||
const prev = this.previousElementSibling;
|
const prev = this.previousElementSibling;
|
||||||
|
|
|
||||||
|
|
@ -87,9 +87,9 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
updated(changedProps) {
|
updated(changedProperties) {
|
||||||
super.updated(changedProps);
|
super.updated(changedProperties);
|
||||||
if (changedProps.has('currency')) {
|
if (changedProperties.has('currency')) {
|
||||||
this._onCurrencyChanged({ currency: this.currency });
|
this._onCurrencyChanged({ currency: this.currency });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -23,9 +23,9 @@ export class LionInputDate extends LocalizeMixin(LionInput) {
|
||||||
this.defaultValidators.push(new IsDate());
|
this.defaultValidators.push(new IsDate());
|
||||||
}
|
}
|
||||||
|
|
||||||
updated(c) {
|
updated(changedProperties) {
|
||||||
super.updated(c);
|
super.updated(changedProperties);
|
||||||
if (c.has('locale')) {
|
if (changedProperties.has('locale')) {
|
||||||
this._calculateValues();
|
this._calculateValues();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -178,22 +178,22 @@ export class LionInputDatepicker extends OverlayMixin(LionInputDate) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
firstUpdated(c) {
|
firstUpdated(changedProperties) {
|
||||||
super.firstUpdated(c);
|
super.firstUpdated(changedProperties);
|
||||||
this.__toggleInvokerDisabled();
|
this.__toggleInvokerDisabled();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @override
|
* @override
|
||||||
* @param {Map} c - changed properties
|
* @param {Map} changedProperties - changed properties
|
||||||
*/
|
*/
|
||||||
updated(c) {
|
updated(changedProperties) {
|
||||||
super.updated(c);
|
super.updated(changedProperties);
|
||||||
if (c.has('validators')) {
|
if (changedProperties.has('validators')) {
|
||||||
const validators = [...(this.validators || [])];
|
const validators = [...(this.validators || [])];
|
||||||
this.__syncDisabledDates(validators);
|
this.__syncDisabledDates(validators);
|
||||||
}
|
}
|
||||||
if (c.has('label')) {
|
if (changedProperties.has('label')) {
|
||||||
this.calendarHeading = this.calendarHeading || this.label;
|
this.calendarHeading = this.calendarHeading || this.label;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -60,17 +60,17 @@ export class LionInput extends LionField {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
firstUpdated(c) {
|
firstUpdated(changedProperties) {
|
||||||
super.firstUpdated(c);
|
super.firstUpdated(changedProperties);
|
||||||
this.__delegateReadOnly();
|
this.__delegateReadOnly();
|
||||||
}
|
}
|
||||||
|
|
||||||
updated(changedProps) {
|
updated(changedProperties) {
|
||||||
super.updated(changedProps);
|
super.updated(changedProperties);
|
||||||
if (changedProps.has('type')) {
|
if (changedProperties.has('type')) {
|
||||||
this._inputNode.type = this.type;
|
this._inputNode.type = this.type;
|
||||||
}
|
}
|
||||||
if (changedProps.has('placeholder')) {
|
if (changedProperties.has('placeholder')) {
|
||||||
this._inputNode.placeholder = this.placeholder;
|
this._inputNode.placeholder = this.placeholder;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -200,8 +200,8 @@ export class LionSelectRich extends ChoiceGroupMixin(
|
||||||
this.__teardownListboxNode();
|
this.__teardownListboxNode();
|
||||||
}
|
}
|
||||||
|
|
||||||
firstUpdated(c) {
|
firstUpdated(changedProperties) {
|
||||||
super.firstUpdated(c);
|
super.firstUpdated(changedProperties);
|
||||||
this.__setupOverlay();
|
this.__setupOverlay();
|
||||||
this.__setupInvokerNode();
|
this.__setupInvokerNode();
|
||||||
this.__setupListboxNode();
|
this.__setupListboxNode();
|
||||||
|
|
@ -245,10 +245,10 @@ export class LionSelectRich extends ChoiceGroupMixin(
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
updated(changedProps) {
|
updated(changedProperties) {
|
||||||
super.updated(changedProps);
|
super.updated(changedProperties);
|
||||||
|
|
||||||
if (changedProps.has('disabled')) {
|
if (changedProperties.has('disabled')) {
|
||||||
if (this.disabled) {
|
if (this.disabled) {
|
||||||
this._invokerNode.makeRequestToBeDisabled();
|
this._invokerNode.makeRequestToBeDisabled();
|
||||||
this.__requestOptionsToBeDisabled();
|
this.__requestOptionsToBeDisabled();
|
||||||
|
|
@ -259,21 +259,21 @@ export class LionSelectRich extends ChoiceGroupMixin(
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this._inputNode && this._invokerNode) {
|
if (this._inputNode && this._invokerNode) {
|
||||||
if (changedProps.has('_ariaLabelledNodes')) {
|
if (changedProperties.has('_ariaLabelledNodes')) {
|
||||||
this._invokerNode.setAttribute(
|
this._invokerNode.setAttribute(
|
||||||
'aria-labelledby',
|
'aria-labelledby',
|
||||||
`${this._inputNode.getAttribute('aria-labelledby')} ${this._invokerNode.id}`,
|
`${this._inputNode.getAttribute('aria-labelledby')} ${this._invokerNode.id}`,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (changedProps.has('_ariaDescribedNodes')) {
|
if (changedProperties.has('_ariaDescribedNodes')) {
|
||||||
this._invokerNode.setAttribute(
|
this._invokerNode.setAttribute(
|
||||||
'aria-describedby',
|
'aria-describedby',
|
||||||
this._inputNode.getAttribute('aria-describedby'),
|
this._inputNode.getAttribute('aria-describedby'),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (changedProps.has('showsFeedbackFor')) {
|
if (changedProperties.has('showsFeedbackFor')) {
|
||||||
// The ValidateMixin sets aria-invalid on the inputNode, but in this component we also need it on the invoker
|
// The ValidateMixin sets aria-invalid on the inputNode, but in this component we also need it on the invoker
|
||||||
this._invokerNode.setAttribute('aria-invalid', this._hasFeedbackVisibleFor('error'));
|
this._invokerNode.setAttribute('aria-invalid', this._hasFeedbackVisibleFor('error'));
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -31,10 +31,13 @@ export class LionSteps extends LitElement {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
updated(changedProps) {
|
updated(changedProperties) {
|
||||||
super.updated(changedProps);
|
super.updated(changedProperties);
|
||||||
if (changedProps.has('current')) {
|
if (changedProperties.has('current')) {
|
||||||
this._onCurrentChanged({ current: this.current }, { current: changedProps.get('current') });
|
this._onCurrentChanged(
|
||||||
|
{ current: this.current },
|
||||||
|
{ current: changedProperties.get('current') },
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -188,8 +188,8 @@ export const ValidateMixin = dedupeMixin(
|
||||||
await import('../lion-validation-feedback.js');
|
await import('../lion-validation-feedback.js');
|
||||||
}
|
}
|
||||||
|
|
||||||
firstUpdated(c) {
|
firstUpdated(changedProperties) {
|
||||||
super.firstUpdated(c);
|
super.firstUpdated(changedProperties);
|
||||||
this.__validateInitialized = true;
|
this.__validateInitialized = true;
|
||||||
this.validate();
|
this.validate();
|
||||||
this._loadFeedbackComponent();
|
this._loadFeedbackComponent();
|
||||||
|
|
@ -591,10 +591,13 @@ export const ValidateMixin = dedupeMixin(
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
updated(c) {
|
updated(changedProperties) {
|
||||||
super.updated(c);
|
super.updated(changedProperties);
|
||||||
|
|
||||||
if (c.has('shouldShowFeedbackFor') || c.has('hasFeedbackFor')) {
|
if (
|
||||||
|
changedProperties.has('shouldShowFeedbackFor') ||
|
||||||
|
changedProperties.has('hasFeedbackFor')
|
||||||
|
) {
|
||||||
this.showsFeedbackFor = this.constructor.validationTypes
|
this.showsFeedbackFor = this.constructor.validationTypes
|
||||||
.map(type => (this._hasFeedbackVisibleFor(type) ? type : undefined))
|
.map(type => (this._hasFeedbackVisibleFor(type) ? type : undefined))
|
||||||
.filter(_ => !!_);
|
.filter(_ => !!_);
|
||||||
|
|
|
||||||
|
|
@ -25,8 +25,8 @@ export const SyncUpdatableMixin = dedupeMixin(
|
||||||
this.__SyncUpdatableNamespace = {};
|
this.__SyncUpdatableNamespace = {};
|
||||||
}
|
}
|
||||||
|
|
||||||
firstUpdated(c) {
|
firstUpdated(changedProperties) {
|
||||||
super.firstUpdated(c);
|
super.firstUpdated(changedProperties);
|
||||||
this.__SyncUpdatableNamespace.connected = true;
|
this.__SyncUpdatableNamespace.connected = true;
|
||||||
this.__syncUpdatableInitialize();
|
this.__syncUpdatableInitialize();
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -27,8 +27,8 @@ describe('SyncUpdatableMixin', () => {
|
||||||
this.propB = 'init-b';
|
this.propB = 'init-b';
|
||||||
}
|
}
|
||||||
|
|
||||||
firstUpdated(c) {
|
firstUpdated(changedProperties) {
|
||||||
super.firstUpdated(c);
|
super.firstUpdated(changedProperties);
|
||||||
hasCalledFirstUpdated = true;
|
hasCalledFirstUpdated = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue