Feat: Combo Component

CHANGELOG.md

@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ## [Unreleased]
 ### Added
 - Stepper Component [#219](https://github.com/IgniteUI/igniteui-webcomponents/issues/219)
+- Combo Component [#411](https://github.com/IgniteUI/igniteui-webcomponents/issues/411)
 
 ## [4.0.0] - 2022-11-02
 ### Changed

package.json

@@ -54,6 +54,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.0.7",
+    "@lit-labs/virtualizer": "^0.7.2",
     "lit": "^2.4.1"
   },
   "devDependencies": {

scripts/_package.json

@@ -30,6 +30,7 @@
     "circular progress",
     "checkbox",
     "chip",
+    "combo",
     "date input",
     "dropdown",
     "expansion panel",
@@ -55,6 +56,7 @@
   ],
   "dependencies": {
     "@floating-ui/dom": "^1.0.7",
-    "lit": "^2.4.1"
+    "lit": "^2.4.1",
+    "@lit-labs/virtualizer": "^0.7.2"
   }
 }

src/components/combo/combo-header.ts

@@ -0,0 +1,20 @@
+import { html, LitElement } from 'lit';
+import { themes } from '../../theming/theming-decorator.js';
+import { styles } from './themes/light/header/combo-header.base.css.js';
+import { styles as bootstrap } from '../dropdown/themes/light/dropdown-header.bootstrap.css.js';
+import { styles as fluent } from '../dropdown/themes/light/dropdown-header.fluent.css.js';
+
+@themes({ bootstrap, fluent })
+export default class IgcComboHeaderComponent extends LitElement {
+  public static readonly tagName: string = 'igc-combo-header';
+  public static override styles = styles;
+
+  protected override render() {
+    return html`<slot></slot>`;
+  }
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'igc-combo-header': IgcComboHeaderComponent;
+  }
+}

src/components/combo/combo-item.ts

@@ -0,0 +1,67 @@
+import { html, LitElement } from 'lit';
+import { themes } from '../../theming/theming-decorator.js';
+import { styles } from './themes/light/item/combo-item.base.css.js';
+import { styles as bootstrap } from '../dropdown/themes/light/dropdown-item.bootstrap.css.js';
+import { styles as fluent } from '../dropdown/themes/light/dropdown-item.fluent.css.js';
+import { styles as indigo } from '../dropdown/themes/light/dropdown-item.indigo.css.js';
+import { property } from 'lit/decorators.js';
+import { watch } from '../common/decorators/watch.js';
+import IgcCheckboxComopnent from '../checkbox/checkbox.js';
+import { defineComponents } from '../common/definitions/defineComponents.js';
+
+defineComponents(IgcCheckboxComopnent);
+
+@themes({ bootstrap, fluent, indigo })
+export default class IgcComboItemComponent extends LitElement {
+  public static readonly tagName: string = 'igc-combo-item';
+  public static override styles = styles;
+
+  @property({ attribute: false })
+  public index!: number;
+
+  /**
+   * Determines whether the item is selected.
+   */
+  @property({ type: Boolean, reflect: true })
+  public selected = false;
+
+  /**
+   * Determines whether the item is active.
+   */
+  @property({ type: Boolean, reflect: true })
+  public active = false;
+
+  @watch('selected')
+  protected selectedChange() {
+    this.selected
+      ? this.setAttribute('aria-selected', 'true')
+      : this.removeAttribute('aria-selected');
+  }
+
+  public override connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'option');
+  }
+
+  protected override render() {
+    return html`
+      <section part="prefix">
+        <igc-checkbox
+          aria-hidden="true"
+          ?checked=${this.selected}
+          tabindex="-1"
+          exportparts="control: checkbox, indicator: checkbox-indicator, checked"
+        ></igc-checkbox>
+      </section>
+      <section id="content" part="content">
+        <slot></slot>
+      </section>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'igc-combo-item': IgcComboItemComponent;
+  }
+}

src/components/combo/combo-list.ts

@@ -0,0 +1,18 @@
+import { LitVirtualizer } from '@lit-labs/virtualizer';
+
+export default class IgcComboListComponent extends LitVirtualizer {
+  public static readonly tagName = 'igc-combo-list';
+  public override scroller = true;
+
+  public override connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('tabindex', '0');
+    this.setAttribute('role', 'listbox');
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'igc-combo-list': IgcComboListComponent;
+  }
+}