Merge remote-tracking branch 'origin/lab' into lab

Author: clukhei

index.html

@@ -89,7 +89,6 @@ export class DropdownElement extends SgdsElement {
         //working
         this.dropdownConfig = {
           placement: "bottom-start",
-          strategy: "fixed",
           modifiers: !this.noFlip
             ? this.modifierOpt
             : [

src/base/dropdown-element.ts

@@ -1,13 +1,18 @@
+.combobox .dropdown-menu {
+  min-width: 100%;
+}
+
 .sgds.combobox .form-control-icon {
   align-items: center;
-  display: flex;
+  /* display: flex;
   font-size: 1rem;
   height: 3rem;
   justify-content: center;
   position: absolute;
   width: 3rem;
-  z-index: 4;
+  z-index: 4; */
 }
+
 .sgds.combobox {
   display: flex;
   flex-wrap: wrap;
@@ -16,16 +21,25 @@
   position: relative;
   width: -webkit-fill-available;
   width: -moz-available;
+
 }
-.sgds.combobox .dropdown-toggle {
-  width: 100%;
-}
-.sgds.combobox > .dropdown-menu {
-  min-width: 100%;
+
+
+.dropdown-menu {
+  max-height: 10rem;
+  overflow-y: auto;
+  overflow-x: hidden;
+  box-sizing: border-box;
 }
+
+/* .sgds.combobox .dropdown-toggle {
+  width: 100%;
+} */
+
 .form-control-icon {
   bottom: 0;
 }
+
 .combobox-caret {
   color: var(--sgds-form-color-default);
 }

src/components/ComboBox/combo-box.css

@@ -1,10 +1,12 @@
 import { SgdsComboBox } from "./sgds-combo-box";
 import { register } from "../../utils/ce-registry";
+import SgdsComboBoxItem from "./sgds-combo-box-item";
 
 register("sgds-combo-box", SgdsComboBox);
 
 declare global {
   interface HTMLElementTagNameMap {
     "sgds-combo-box": SgdsComboBox;
+    "sgds-combo-box-item": SgdsComboBoxItem;
   }
 }

src/components/ComboBox/index.ts

@@ -0,0 +1,24 @@
+:host([active]) .dropdown-item {
+    background-color: var(--sgds-form-primary-bg-translucent, rgba(90, 66, 192, 0.1));
+}
+
+.dropdown-item .normal-item-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+}
+
+:host([active]) .dropdown-item .normal-item-content {
+    color: var(--sgds-primary-bg);
+}
+
+:host([active]) .dropdown-item .normal-item-content sgds-icon {
+    color: var(--sgds-primary-bg);
+    fill: var(--sgds-primary-bg);
+}
+
+.dropdown-item {
+    padding: var(--sgds-dropdown-item-padding-y, 0.5rem) var(--sgds-dropdown-item-padding-x, 1rem);
+
+}

src/components/ComboBox/sgds-combo-box-item.css

@@ -0,0 +1,97 @@
+import { html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import SgdsElement from "../../base/sgds-element";
+import SgdsIcon from "../Icon/sgds-icon";
+import SgdsCheckbox from "../Checkbox/sgds-checkbox";
+import comboBoxItemStyles from "./sgds-combo-box-item.css";
+
+export class SgdsComboBoxItem extends SgdsElement {
+  static dependencies = {
+    "sgds-icon": SgdsIcon,
+    "sgds-checkbox": SgdsCheckbox
+  };
+
+  static styles = [comboBoxItemStyles];
+  /** when true, sets the active stylings */
+  @property({ type: Boolean }) active = false;
+
+  /** Disables the Item */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /** If true, this item is rendered as a checkbox item */
+  @property({ type: Boolean, reflect: true }) checkbox = false;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute("role", "menuitem");
+    this.setAttribute("aria-disabled", `${this.disabled}`);
+  }
+
+  private _handleNonCheckboxClick() {
+    if (!this.checkbox) {
+      this.active = true;
+      this.dispatchEvent(
+        new CustomEvent("sgds-combo-box-item-select", {
+          detail: { active: this.active },
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+  }
+
+  private _handleCheckboxChange(e: Event) {
+    const checkbox = e.target as HTMLInputElement;
+    this.active = checkbox.checked;
+
+    this.dispatchEvent(
+      new CustomEvent("sgds-combo-box-item-select", {
+        detail: { active: this.active },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+
+  render() {
+    const classes = {
+      disabled: this.disabled,
+      active: this.active,
+      checkbox: this.checkbox
+    };
+
+    return html`
+      <div
+        class="dropdown-item ${classMap(classes)}"
+        tabindex=${this.disabled ? "-1" : "0"}
+        @click=${!this.checkbox ? this._handleNonCheckboxClick : null}
+      >
+        ${this.checkbox
+          ? html`
+              <sgds-checkbox
+                .checked=${this.active}
+                .disabled=${this.disabled}
+                @sgds-change=${this._handleCheckboxChange}
+              >
+                <slot></slot>
+              </sgds-checkbox>
+            `
+          : html`
+              <div class="normal-item-content">
+                <slot></slot>
+                ${this.active
+                  ? html`
+                      <div>
+                        <sgds-icon name="check"></sgds-icon>
+                      </div>
+                    `
+                  : nothing}
+              </div>
+            `}
+      </div>
+    `;
+  }
+}
+
+export default SgdsComboBoxItem;