build: Updated to TS 4.9 and build chain

.github/workflows/node.js.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x, 16.x]
+        node-version: [16.x, 18.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
@@ -31,7 +31,7 @@ jobs:
     - run: npm run check
     - run: npm run test
     - name: Publish to coveralls.io
-      if: matrix.node-version == '14.x'
+      if: matrix.node-version == '16.x'
       uses: coverallsapp/github-action@v1.1.2
       with:
           github-token: ${{ github.token }}

.github/workflows/npm-publish.yml

@@ -11,7 +11,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '14'
+          node-version: '16'
           cache: 'npm'
           registry-url: 'https://registry.npmjs.org'
       - run: echo "VERSION=${GITHUB_REF/refs\/tags\//}" >> $GITHUB_ENV

package.json

@@ -53,47 +53,47 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.0.4",
-    "lit": "^2.4.0"
+    "@floating-ui/dom": "^1.0.7",
+    "lit": "^2.4.1"
   },
   "devDependencies": {
     "@igniteui/material-icons-extended": "^2.11.0",
-    "@open-wc/eslint-config": "^8.0.2",
-    "@open-wc/testing": "^3.1.6",
+    "@open-wc/eslint-config": "^9.0.0",
+    "@open-wc/testing": "^3.1.7",
     "@storybook/storybook-deployer": "^2.8.16",
-    "@typescript-eslint/eslint-plugin": "^5.42.0",
-    "@typescript-eslint/parser": "^5.42.0",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
     "@web/dev-server": "^0.1.35",
     "@web/dev-server-rollup": "^0.3.19",
     "@web/dev-server-storybook": "^0.5.4",
     "@web/test-runner": "^0.15.0",
     "autoprefixer": "^10.4.13",
     "browser-sync": "^2.27.10",
-    "concurrently": "^7.5.0",
-    "eslint": "^8.26.0",
+    "concurrently": "^7.6.0",
+    "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "globby": "^13.1.2",
-    "husky": "^8.0.1",
+    "husky": "^8.0.2",
     "igniteui-theming": "^1.1.4",
     "igniteui-typedoc-theme": "^3.1.0",
     "keep-a-changelog": "^2.1.0",
-    "lint-staged": "^13.0.3",
+    "lint-staged": "^13.0.4",
     "lit-analyzer": "^2.0.0-pre.2",
     "madge": "^5.0.1",
     "node-watch": "^0.7.3",
-    "postcss": "^8.4.18",
-    "prettier": "^2.7.1",
+    "postcss": "^8.4.19",
+    "prettier": "^2.8.0",
     "rimraf": "^3.0.2",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.55.0",
-    "sinon": "^14.0.1",
-    "stylelint": "^14.14.0",
-    "stylelint-config-standard-scss": "^6.0.0",
+    "sass": "^1.56.1",
+    "sinon": "^15.0.0",
+    "stylelint": "^14.15.0",
+    "stylelint-config-standard-scss": "^6.1.0",
     "stylelint-scss": "^4.3.0",
-    "tslib": "^2.4.0",
-    "typedoc": "^0.22.17",
-    "typedoc-plugin-localization": "^2.3.0",
-    "typescript": "^4.7.4",
+    "tslib": "^2.4.1",
+    "typedoc": "^0.23.21",
+    "typedoc-plugin-localization": "^2.4.0",
+    "typescript": "^4.9.3",
     "web-component-analyzer": "^2.0.0-next.4"
   },
   "lint-staged": {

scripts/_package.json

@@ -54,7 +54,7 @@
     "tree"
   ],
   "dependencies": {
-    "@floating-ui/dom": "^1.0.4",
-    "lit": "^2.4.0"
+    "@floating-ui/dom": "^1.0.7",
+    "lit": "^2.4.1"
   }
 }

src/components/accordion/accordion.ts

@@ -24,6 +24,10 @@ export default class IgcAccordionComponent extends LitElement {
     return this.panels.filter((p) => !p.disabled);
   }
 
+  /**
+   * Allows only one panel to be expanded at a time.
+   * @attr single-expand
+   */
   @property({ attribute: 'single-expand', reflect: true, type: Boolean })
   public singleExpand = false;
 

src/components/avatar/avatar.ts

@@ -26,22 +26,34 @@ export default class IgcAvatarComponent extends SizableMixin(LitElement) {
   public static readonly tagName = 'igc-avatar';
   public static override styles = styles;
 
-  /** The image source to use. */
+  /**
+   * The image source to use.
+   * @attr
+   */
   @property()
   public src!: string;
 
   @state()
   private hasError = false;
 
-  /** Alternative text for the image. */
+  /**
+   * Alternative text for the image.
+   * @attr
+   */
   @property()
   public alt!: string;
 
-  /** Initials to use as a fallback when no image is available. */
+  /**
+   * Initials to use as a fallback when no image is available.
+   * @attr
+   */
   @property()
   public initials!: string;
 
-  /** The shape of the avatar. */
+  /**
+   * The shape of the avatar.
+   * @attr
+   */
   @property({ reflect: true })
   public shape: 'circle' | 'rounded' | 'square' = 'square';
 

src/components/badge/badge.ts

@@ -19,16 +19,25 @@ export default class IgcBadgeComponent extends LitElement {
   public static readonly tagName = 'igc-badge';
   public static override styles = styles;
 
-  /** The type of badge. */
+  /**
+   * The type of badge.
+   * @attr
+   */
   @property({ reflect: true })
   public variant: 'primary' | 'info' | 'success' | 'warning' | 'danger' =
     'primary';
 
-  /** Sets whether to draw an outlined version of the badge. */
+  /**
+   * Sets whether to draw an outlined version of the badge.
+   * @attr
+   */
   @property({ type: Boolean, reflect: true })
   public outlined = false;
 
-  /** The shape of the badge. */
+  /**
+   * The shape of the badge.
+   * @attr
+   */
   @property({ reflect: true })
   public shape: 'rounded' | 'square' = 'rounded';
 

src/components/button/button-base.ts

@@ -29,32 +29,44 @@ export abstract class IgcButtonBaseComponent extends SizableMixin(
 
   /**
    * The type of the button. Defaults to undefined.
+   * @attr
    */
   @alternateName('displayType')
   @property()
   public type!: 'button' | 'reset' | 'submit';
 
-  /** The URL the button points to. */
+  /**
+   * The URL the button points to.
+   * @attr
+   */
   @property()
   public href!: string;
 
-  /** Prompts to save the linked URL instead of navigating to it. */
+  /**
+   * Prompts to save the linked URL instead of navigating to it.
+   * @attr
+   */
   @property()
   public download!: string;
 
-  /** Where to display the linked URL, as the name for a browsing context. */
+  /**
+   * Where to display the linked URL, as the name for a browsing context.
+   * @attr
+   */
   @property()
   public target!: '_blank' | '_parent' | '_self' | '_top' | undefined;
 
   /**
    * The relationship of the linked URL.
    * See https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types
+   * @attr
    */
   @property()
   public rel!: string;
 
   /**
    * Determines whether the button is disabled.
+   * @attr
    */
   @property({ type: Boolean, reflect: true })
   public disabled = false;

src/components/button/button.ts

@@ -31,7 +31,10 @@ export default class IgcButtonComponent extends IgcButtonBaseComponent {
 
   protected static styles = styles;
 
-  /** Sets the variant of the button. */
+  /**
+   * Sets the variant of the button.
+   * @attr
+   */
   @property({ reflect: true })
   public variant: 'flat' | 'contained' | 'outlined' | 'fab' = 'contained';
 

src/components/button/icon-button.ts

@@ -31,20 +31,32 @@ export default class IgcIconButtonComponent extends IgcButtonBaseComponent {
   public static readonly tagName = 'igc-icon-button';
   protected static styles = styles;
 
-  /** The name of the icon. */
+  /**
+   * The name of the icon.
+   * @attr
+   */
   @alternateName('iconName')
   @property()
   public name!: string;
 
-  /** The name of the icon collection. */
+  /**
+   * The name of the icon collection.
+   * @attr
+   */
   @property()
   public collection!: string;
 
-  /** Whether to flip the icon button. Useful for RTL layouts. */
+  /**
+   * Whether to flip the icon button. Useful for RTL layouts.
+   * @attr
+   */
   @property({ type: Boolean })
   public mirrored = false;
 
-  /** The visual variant of the icon button. */
+  /**
+   * The visual variant of the icon button.
+   * @attr
+   */
   @property({ reflect: true })
   public variant: 'flat' | 'contained' | 'outlined' = 'contained';
 

src/components/calendar/calendar.ts

@@ -129,7 +129,8 @@ export default class IgcCalendarComponent extends SizableMixin(
 
   /** The resource strings. */
   @property({ attribute: false })
-  public resourceStrings: IgcCalendarResourceStrings = IgcCalendarResourceStringEN;
+  public resourceStrings: IgcCalendarResourceStrings =
+    IgcCalendarResourceStringEN;
 
   @watch('formatOptions')
   @watch('locale')

src/components/calendar/days-view/days-view.ts

@@ -86,7 +86,8 @@ export default class IgcDaysViewComponent extends EventEmitterMixin<
 
   /** The resource strings. */
   @property({ attribute: false })
-  public resourceStrings: IgcCalendarResourceStrings = IgcCalendarResourceStringEN;
+  public resourceStrings: IgcCalendarResourceStrings =
+    IgcCalendarResourceStringEN;
 
   @watch('weekDayFormat')
   @watch('locale')

src/components/card/card.actions.ts

@@ -16,7 +16,10 @@ export default class IgcCardActionsComponent extends LitElement {
   public static readonly tagName = 'igc-card-actions';
   public static override styles = styles;
 
-  /** The orientation of the actions. */
+  /**
+   * The orientation of the actions.
+   * @attr
+   */
   @property({ reflect: true })
   public orientation: 'vertical' | 'horizontal' = 'horizontal';
 

src/components/card/card.ts

@@ -31,7 +31,10 @@ export default class IgcCardComponent extends LitElement {
   public static readonly tagName = 'igc-card';
   public static override styles = styles;
 
-  /** Sets card elevated style, otherwise card looks outlined. */
+  /**
+   * Sets card elevated style, otherwise card looks outlined.
+   * @attr
+   */
   @property({ type: Boolean, reflect: true })
   public elevated = false;
 

src/components/checkbox/checkbox-base.ts

@@ -29,32 +29,53 @@ export class IgcCheckboxBaseComponent extends EventEmitterMixin<
   @state()
   protected hideLabel = false;
 
-  /** The name attribute of the control. */
+  /**
+   * The name attribute of the control.
+   * @attr
+   */
   @property()
   public name!: string;
 
-  /** The value attribute of the control. */
+  /**
+   * The value attribute of the control.
+   * @attr
+   */
   @property()
   public value!: string;
 
-  /** Disables the control. */
+  /**
+   * Disables the control.
+   * @attr
+   */
   @property({ type: Boolean, reflect: true })
   public disabled = false;
 
-  /** The checked state of the control. */
+  /**
+   * The checked state of the control.
+   * @attr
+   */
   @property({ type: Boolean })
   @blazorTwoWayBind('igcChange', 'detail')
   public checked = false;
 
-  /** Makes the control a required field. */
+  /**
+   * Makes the control a required field.
+   * @attr
+   */
   @property({ type: Boolean, reflect: true })
   public required = false;
 
-  /** Controls the validity of the control. */
+  /**
+   * Controls the validity of the control.
+   * @attr
+   */
   @property({ type: Boolean, reflect: true })
   public invalid = false;
 
-  /** The label position of the control. */
+  /**
+   * The label position of the control.
+   * @attr label-position
+   */
   @property({ reflect: true, attribute: 'label-position' })
   public labelPosition: 'before' | 'after' = 'after';
 

src/components/checkbox/checkbox.ts

@@ -37,7 +37,10 @@ export default class IgcCheckboxComponent extends IgcCheckboxBaseComponent {
   private inputId = `checkbox-${IgcCheckboxComponent.increment()}`;
   private labelId = `checkbox-label-${this.inputId}`;
 
-  /** Draws the checkbox in indeterminate state. */
+  /**
+   * Draws the checkbox in indeterminate state.
+   * @attr
+   */
   @property({ type: Boolean, reflect: true })
   public indeterminate = false;