fix(core): lit lifecycle type

- fixes change from upstream lit release
- closes #6654

Signed-off-by: Cory Rylan <splintercode.cb@gmail.com>

packages/core/npm.json

@@ -27,7 +27,7 @@
     "*"
   ],
   "dependencies": {
-    "lit": "2.1.2",
+    "lit": "^2.1.3",
     "ramda": "^0.28.0",
     "tslib": "^2.3.1"
   },

packages/core/package.json

@@ -47,7 +47,7 @@
     "url": "https://github.com/vmware/clarity/issues"
   },
   "dependencies": {
-    "lit": "2.1.2",
+    "lit": "^2.1.3",
     "ramda": "^0.28.0",
     "tslib": "^2.3.1"
   },

packages/core/src/accordion/accordion-panel.element.ts

@@ -4,7 +4,7 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { html, LitElement } from 'lit';
+import { html, LitElement, PropertyValues } from 'lit';
 import {
   AnimationAccordionPanelOpenName,
   reverseAnimation,
@@ -77,7 +77,7 @@ export class CdsAccordionPanel extends LitElement {
     this.expandedChange.emit(!this.expanded);
   }
 
-  updated(props: Map<string, any>) {
+  updated(props: PropertyValues<this>) {
     super.updated(props);
 
     if (this.content && this.header) {

packages/core/src/alert/alert-actions.element.ts

@@ -1,13 +1,13 @@
 /*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
+import { html, LitElement, PropertyValues } from 'lit';
 import { AlertGroupTypes } from '@cds/core/alert';
 import { CdsButton } from '@cds/core/button';
 import { assignSlotNames, baseStyles, querySlotAll, state } from '@cds/core/internal';
-import { html, LitElement } from 'lit';
 import styles from './alert-actions.element.scss';
 
 /**
@@ -54,7 +54,7 @@ export class CdsAlertActions extends LitElement {
     assignSlotNames([this, 'actions']);
   }
 
-  updated(props: Map<string, any>) {
+  updated(props: PropertyValues<this>) {
     super.updated(props);
     this.buttons.forEach(b => {
       b.status = this.type === 'banner' ? 'inverse' : 'primary';

packages/core/src/alert/alert-group.element.ts

@@ -1,10 +1,10 @@
 /*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { html, LitElement } from 'lit';
+import { html, LitElement, PropertyValues } from 'lit';
 import { query } from 'lit/decorators/query.js';
 import { baseStyles, property, querySlot, querySlotAll, syncProps } from '@cds/core/internal';
 import { CdsAlert } from './alert.element.js';
@@ -110,7 +110,7 @@ export class CdsAlertGroup extends LitElement {
     this.role = 'region';
   }
 
-  firstUpdated(props: Map<string, any>) {
+  firstUpdated(props: PropertyValues<this>) {
     super.firstUpdated(props);
     this.setupAlertsUpdate();
   }
@@ -132,7 +132,7 @@ export class CdsAlertGroup extends LitElement {
     );
   }
 
-  updated(props: Map<string, any>) {
+  updated(props: PropertyValues<this>) {
     super.updated(props);
     this.syncAlerts({
       status: props.has('status'),

packages/core/src/alert/alert.element.ts

@@ -4,7 +4,7 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { html, LitElement } from 'lit';
+import { html, LitElement, PropertyValues } from 'lit';
 import {
   baseStyles,
   event,
@@ -181,7 +181,7 @@ export class CdsAlert extends LitElement {
     setAttributes(this, ['aria-describedby', this.idForAriaDescriber], ['role', 'region']);
   }
 
-  updated(props: Map<string, any>) {
+  updated(props: PropertyValues<this>) {
     super.updated(props);
     syncDefinedProps(props, this, [this.alertActions]);
   }

packages/core/src/button-action/button-action.element.ts

@@ -59,7 +59,7 @@ export class CdsButtonAction extends CdsBaseButton {
     `;
   }
 
-  updated(props: PropertyValues) {
+  updated(props: PropertyValues<this>) {
     super.updated(props);
 
     if (!this.ariaLabel && !this.readonly) {

packages/core/src/button-expand/button-expand.element.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -61,7 +61,7 @@ export class CdsButtonExpand extends CdsButtonAction {
     this.pressed = false;
   }
 
-  firstUpdated(props: PropertyValues) {
+  firstUpdated(props: PropertyValues<this>) {
     super.firstUpdated(props);
 
     if (!this.readonly) {

packages/core/src/button/button.element.ts

@@ -4,8 +4,8 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
+import { html, PropertyValues } from 'lit';
 import { baseStyles, CdsBaseButton, getElementWidth, property } from '@cds/core/internal';
-import { html } from 'lit';
 import styles from './button.element.scss';
 
 export const enum ClrLoadingState {
@@ -83,15 +83,15 @@ export class CdsButton extends CdsBaseButton {
   @property({ type: String })
   loadingState: keyof typeof ClrLoadingState = ClrLoadingState.default;
 
-  firstUpdated(props: Map<string, any>) {
+  firstUpdated(props: PropertyValues<this>) {
     super.firstUpdated(props);
 
     if (!this.isDefaultLoadingState(this.loadingState)) {
       this.disabled = true;
     }
   }
 
-  update(props: Map<string, any>) {
+  update(props: PropertyValues<this>) {
     if (props.has('loadingState')) {
       if (this.isDefaultLoadingState(props.get('loadingState'))) {
         // track prior disabled state to set prior value after button is re-enabled from a loading state

packages/core/src/dropdown/dropdown.stories.ts

@@ -1,17 +1,17 @@
 /*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
+import { html, LitElement, PropertyValues } from 'lit';
+import { query } from 'lit/decorators/query.js';
+import { customElement } from 'lit/decorators/custom-element.js';
 import '@cds/core/button/register.js';
 import '@cds/core/radio/register.js';
 import '@cds/core/dropdown/register.js';
 import '@cds/core/modal/register.js';
-import { customElement } from 'lit/decorators/custom-element.js';
 import { spreadProps, getElementStorybookArgs, state, property } from '@cds/core/internal';
-import { html, LitElement } from 'lit';
-import { query } from 'lit/decorators/query.js';
 import { CdsButton } from '@cds/core/button';
 import { CdsDropdown } from '@cds/core/dropdown';
 import { CdsModal } from '@cds/core/modal';
@@ -49,7 +49,7 @@ class DemoDropdown extends LitElement {
 
 @customElement('demo-dropdown-basic')
 class DemoDropdownBasic extends DemoDropdown {
-  firstUpdated(props: Map<string, any>) {
+  firstUpdated(props: PropertyValues<this>) {
     super.firstUpdated(props);
     this.popup.anchor = this.popupAnchor;
   }
@@ -81,7 +81,7 @@ class DemoDropdownBasic extends DemoDropdown {
 
 @customElement('demo-dropdown-scrollable')
 class DemoDropdownScrollable extends DemoDropdown {
-  firstUpdated(props: Map<string, any>) {
+  firstUpdated(props: PropertyValues<this>) {
     super.firstUpdated(props);
     this.popup.anchor = this.popupAnchor;
   }
@@ -292,7 +292,7 @@ class DemoDropdownResponsive extends DemoDropdown {
 
 @customElement('demo-dropdown-closable')
 class DemoDropdownClosable extends DemoDropdown {
-  firstUpdated(props: Map<string, any>) {
+  firstUpdated(props: PropertyValues<this>) {
     super.firstUpdated(props);
     this.popup.anchor = this.popupAnchor;
   }

packages/core/src/file/file.element.ts

@@ -1,10 +1,10 @@
 /*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { html } from 'lit';
+import { html, PropertyValues } from 'lit';
 import { state } from '@cds/core/internal';
 import { i18n, I18nService } from '@cds/core/internal';
 import { CdsControl } from '@cds/core/forms';
@@ -62,7 +62,7 @@ export class CdsFile extends CdsControl {
       : html``;
   }
 
-  firstUpdated(props: Map<string, any>) {
+  firstUpdated(props: PropertyValues<this>) {
     super.firstUpdated(props);
     (this.inputControl as Element).addEventListener('change', e => {
       // NOTE: have to distinguish here being user-caused events and programmatic

packages/core/src/forms/control-action/control-action.element.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -27,7 +27,7 @@ import { CdsButtonAction } from '@cds/core/button-action';
 export class CdsControlAction extends CdsButtonAction {
   @property({ type: String, reflect: true }) action: 'label' | 'prefix' | 'suffix';
 
-  updated(props: PropertyValues) {
+  updated(props: PropertyValues<this>) {
     super.updated(props);
     assignSlotNames([this, this.action ?? false]);
   }

packages/core/src/forms/control-group/control-group.element.ts

@@ -1,10 +1,10 @@
 /*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { html, LitElement } from 'lit';
+import { html, LitElement, PropertyValues } from 'lit';
 import { query } from 'lit/decorators/query.js';
 import {
   baseStyles,
@@ -181,13 +181,13 @@ export class CdsInternalControlGroup extends LitElement {
     setAttributes(this, ['role', 'group'], ['cds-control-group', '']);
   }
 
-  firstUpdated(props: Map<string, any>) {
+  firstUpdated(props: PropertyValues<this>) {
     super.firstUpdated(props);
     this.associateLabelAndGroup();
     this.setupResponsive();
   }
 
-  updated(props: Map<string, any>) {
+  updated(props: PropertyValues<any>) {
     super.updated(props);
     props.set('isControlGroup', true);
     this.controls.forEach((c: any) => (c.isControlGroup = true));

packages/core/src/forms/control-inline/control-inline.element.ts

@@ -1,10 +1,10 @@
 /*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { html } from 'lit';
+import { html, PropertyValues } from 'lit';
 import { EventEmitter, property, event, getElementUpdates, state } from '@cds/core/internal';
 import styles from './control-inline.element.scss';
 import { CdsControl } from '../control/control.element.js';
@@ -86,7 +86,7 @@ export class CdsInternalControlInline extends CdsControl {
     `;
   }
 
-  firstUpdated(props: Map<string, any>) {
+  firstUpdated(props: PropertyValues<this>) {
     super.firstUpdated(props);
     this.inputControl.addEventListener('change', () => (this.checked = this.inputControl.checked));
     this.observers.push(
@@ -99,7 +99,7 @@ export class CdsInternalControlInline extends CdsControl {
     );
   }
 
-  updated(props: Map<string, any>) {
+  updated(props: PropertyValues<any>) {
     super.updated(props);
 
     if (props.has('indeterminate') && props.get('indeterminate') !== this.indeterminate && this.indeterminate) {

packages/core/src/forms/control/control.element.ts

@@ -1,10 +1,10 @@
 /*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { html, LitElement, TemplateResult } from 'lit';
+import { html, LitElement, TemplateResult, PropertyValues } from 'lit';
 import { query } from 'lit/decorators/query.js';
 import {
   baseStyles,
@@ -282,7 +282,7 @@ export class CdsControl extends LitElement {
     this.setAttribute('cds-control', '');
   }
 
-  firstUpdated(props: Map<string, any>) {
+  firstUpdated(props: PropertyValues<this>) {
     super.firstUpdated(props);
     this.setupHostAttributes();
     this.setupHTML5Validation();
@@ -293,7 +293,7 @@ export class CdsControl extends LitElement {
     this.assignSlotIfInControlGroup();
   }
 
-  updated(props: Map<string, any>) {
+  updated(props: PropertyValues<any>) {
     super.updated(props);
     this.messages.forEach(message => syncProps(message, this, { disabled: props.has('disabled') }));
 

packages/core/src/forms/form-group/form-group.element.ts

@@ -1,10 +1,10 @@
 /*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { LitElement, html } from 'lit';
+import { LitElement, html, PropertyValues } from 'lit';
 import {
   baseStyles,
   querySlotAll,
@@ -97,14 +97,14 @@ export class CdsFormGroup extends LitElement {
 
   private overflowElement: CdsControl | null;
 
-  firstUpdated(props: Map<string, any>) {
+  firstUpdated(props: PropertyValues<this>) {
     super.firstUpdated(props);
     this.syncLayouts();
     this.setControlLabelWidths();
     this.observers.push(elementVisible(this, () => this.setControlLabelWidths()));
   }
 
-  updated(props: Map<string, any>) {
+  updated(props: PropertyValues<this>) {
     super.updated(props);
     syncDefinedProps(props, this, this.controlsAndGroups);
   }