131 select input v-2

src/components.d.ts

@@ -63,12 +63,15 @@ export namespace Components {
         "search": boolean;
         "size": 's' | 'm';
     }
+    interface IfxDropdownDivider {
+    }
     interface IfxDropdownItem {
         "checkable": boolean;
         "disabled": boolean;
         "icon": string;
         "label": string;
         "size": 's' | 'm';
+        "value": string;
     }
     interface IfxDropdownMenu {
         "disabled": boolean;
@@ -177,6 +180,8 @@ export namespace Components {
         "size": string;
         "width": string;
     }
+    interface IfxSelectInput {
+    }
     interface IfxSpinner {
         "size": string;
     }
@@ -196,6 +201,16 @@ export namespace Components {
     interface IfxTag {
         "text": string;
     }
+    interface IfxTextInput {
+        "disabled": boolean;
+        "error": boolean;
+        "errorMessage": string;
+        "icon": boolean;
+        "placeholder": string;
+        "readonly": boolean;
+        "success": boolean;
+        "value": string;
+    }
     interface IfxToggle {
         "checked": boolean;
     }
@@ -207,6 +222,14 @@ export interface IfxAccordionItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIfxAccordionItemElement;
 }
+export interface IfxDropdownItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIfxDropdownItemElement;
+}
+export interface IfxDropdownMenuCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIfxDropdownMenuElement;
+}
 export interface IfxProgressBarCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIfxProgressBarElement;
@@ -302,6 +325,12 @@ declare global {
         prototype: HTMLIfxDropdownElement;
         new (): HTMLIfxDropdownElement;
     };
+    interface HTMLIfxDropdownDividerElement extends Components.IfxDropdownDivider, HTMLStencilElement {
+    }
+    var HTMLIfxDropdownDividerElement: {
+        prototype: HTMLIfxDropdownDividerElement;
+        new (): HTMLIfxDropdownDividerElement;
+    };
     interface HTMLIfxDropdownItemElement extends Components.IfxDropdownItem, HTMLStencilElement {
     }
     var HTMLIfxDropdownItemElement: {
@@ -422,6 +451,12 @@ declare global {
         prototype: HTMLIfxSearchInputElement;
         new (): HTMLIfxSearchInputElement;
     };
+    interface HTMLIfxSelectInputElement extends Components.IfxSelectInput, HTMLStencilElement {
+    }
+    var HTMLIfxSelectInputElement: {
+        prototype: HTMLIfxSelectInputElement;
+        new (): HTMLIfxSelectInputElement;
+    };
     interface HTMLIfxSpinnerElement extends Components.IfxSpinner, HTMLStencilElement {
     }
     var HTMLIfxSpinnerElement: {
@@ -452,6 +487,12 @@ declare global {
         prototype: HTMLIfxTagElement;
         new (): HTMLIfxTagElement;
     };
+    interface HTMLIfxTextInputElement extends Components.IfxTextInput, HTMLStencilElement {
+    }
+    var HTMLIfxTextInputElement: {
+        prototype: HTMLIfxTextInputElement;
+        new (): HTMLIfxTextInputElement;
+    };
     interface HTMLIfxToggleElement extends Components.IfxToggle, HTMLStencilElement {
     }
     var HTMLIfxToggleElement: {
@@ -476,6 +517,7 @@ declare global {
         "ifx-card-text": HTMLIfxCardTextElement;
         "ifx-checkbox": HTMLIfxCheckboxElement;
         "ifx-dropdown": HTMLIfxDropdownElement;
+        "ifx-dropdown-divider": HTMLIfxDropdownDividerElement;
         "ifx-dropdown-item": HTMLIfxDropdownItemElement;
         "ifx-dropdown-menu": HTMLIfxDropdownMenuElement;
         "ifx-filter-input": HTMLIfxFilterInputElement;
@@ -496,11 +538,13 @@ declare global {
         "ifx-range": HTMLIfxRangeElement;
         "ifx-search-bar": HTMLIfxSearchBarElement;
         "ifx-search-input": HTMLIfxSearchInputElement;
+        "ifx-select-input": HTMLIfxSelectInputElement;
         "ifx-spinner": HTMLIfxSpinnerElement;
         "ifx-status": HTMLIfxStatusElement;
         "ifx-tab": HTMLIfxTabElement;
         "ifx-tabs": HTMLIfxTabsElement;
         "ifx-tag": HTMLIfxTagElement;
+        "ifx-text-input": HTMLIfxTextInputElement;
         "ifx-toggle": HTMLIfxToggleElement;
         "infineon-icon-stencil": HTMLInfineonIconStencilElement;
     }
@@ -561,18 +605,23 @@ declare namespace LocalJSX {
         "search"?: boolean;
         "size"?: 's' | 'm';
     }
+    interface IfxDropdownDivider {
+    }
     interface IfxDropdownItem {
         "checkable"?: boolean;
         "disabled"?: boolean;
         "icon"?: string;
         "label"?: string;
+        "onItemValues"?: (event: IfxDropdownItemCustomEvent<Object>) => void;
         "size"?: 's' | 'm';
+        "value"?: string;
     }
     interface IfxDropdownMenu {
         "disabled"?: boolean;
         "filter"?: boolean;
         "icon"?: boolean;
         "label"?: string;
+        "onSelectValues"?: (event: IfxDropdownMenuCustomEvent<Object>) => void;
         "search"?: boolean;
         "size"?: 's' | 'm';
     }
@@ -678,6 +727,8 @@ declare namespace LocalJSX {
         "size"?: string;
         "width"?: string;
     }
+    interface IfxSelectInput {
+    }
     interface IfxSpinner {
         "size"?: string;
     }
@@ -700,6 +751,16 @@ declare namespace LocalJSX {
     interface IfxTag {
         "text"?: string;
     }
+    interface IfxTextInput {
+        "disabled"?: boolean;
+        "error"?: boolean;
+        "errorMessage"?: string;
+        "icon"?: boolean;
+        "placeholder"?: string;
+        "readonly"?: boolean;
+        "success"?: boolean;
+        "value"?: string;
+    }
     interface IfxToggle {
         "checked"?: boolean;
         "onValueChanged"?: (event: IfxToggleCustomEvent<boolean>) => void;
@@ -719,6 +780,7 @@ declare namespace LocalJSX {
         "ifx-card-text": IfxCardText;
         "ifx-checkbox": IfxCheckbox;
         "ifx-dropdown": IfxDropdown;
+        "ifx-dropdown-divider": IfxDropdownDivider;
         "ifx-dropdown-item": IfxDropdownItem;
         "ifx-dropdown-menu": IfxDropdownMenu;
         "ifx-filter-input": IfxFilterInput;
@@ -739,11 +801,13 @@ declare namespace LocalJSX {
         "ifx-range": IfxRange;
         "ifx-search-bar": IfxSearchBar;
         "ifx-search-input": IfxSearchInput;
+        "ifx-select-input": IfxSelectInput;
         "ifx-spinner": IfxSpinner;
         "ifx-status": IfxStatus;
         "ifx-tab": IfxTab;
         "ifx-tabs": IfxTabs;
         "ifx-tag": IfxTag;
+        "ifx-text-input": IfxTextInput;
         "ifx-toggle": IfxToggle;
         "infineon-icon-stencil": InfineonIconStencil;
     }
@@ -763,6 +827,7 @@ declare module "@stencil/core" {
             "ifx-card-text": LocalJSX.IfxCardText & JSXBase.HTMLAttributes<HTMLIfxCardTextElement>;
             "ifx-checkbox": LocalJSX.IfxCheckbox & JSXBase.HTMLAttributes<HTMLIfxCheckboxElement>;
             "ifx-dropdown": LocalJSX.IfxDropdown & JSXBase.HTMLAttributes<HTMLIfxDropdownElement>;
+            "ifx-dropdown-divider": LocalJSX.IfxDropdownDivider & JSXBase.HTMLAttributes<HTMLIfxDropdownDividerElement>;
             "ifx-dropdown-item": LocalJSX.IfxDropdownItem & JSXBase.HTMLAttributes<HTMLIfxDropdownItemElement>;
             "ifx-dropdown-menu": LocalJSX.IfxDropdownMenu & JSXBase.HTMLAttributes<HTMLIfxDropdownMenuElement>;
             "ifx-filter-input": LocalJSX.IfxFilterInput & JSXBase.HTMLAttributes<HTMLIfxFilterInputElement>;
@@ -783,11 +848,13 @@ declare module "@stencil/core" {
             "ifx-range": LocalJSX.IfxRange & JSXBase.HTMLAttributes<HTMLIfxRangeElement>;
             "ifx-search-bar": LocalJSX.IfxSearchBar & JSXBase.HTMLAttributes<HTMLIfxSearchBarElement>;
             "ifx-search-input": LocalJSX.IfxSearchInput & JSXBase.HTMLAttributes<HTMLIfxSearchInputElement>;
+            "ifx-select-input": LocalJSX.IfxSelectInput & JSXBase.HTMLAttributes<HTMLIfxSelectInputElement>;
             "ifx-spinner": LocalJSX.IfxSpinner & JSXBase.HTMLAttributes<HTMLIfxSpinnerElement>;
             "ifx-status": LocalJSX.IfxStatus & JSXBase.HTMLAttributes<HTMLIfxStatusElement>;
             "ifx-tab": LocalJSX.IfxTab & JSXBase.HTMLAttributes<HTMLIfxTabElement>;
             "ifx-tabs": LocalJSX.IfxTabs & JSXBase.HTMLAttributes<HTMLIfxTabsElement>;
             "ifx-tag": LocalJSX.IfxTag & JSXBase.HTMLAttributes<HTMLIfxTagElement>;
+            "ifx-text-input": LocalJSX.IfxTextInput & JSXBase.HTMLAttributes<HTMLIfxTextInputElement>;
             "ifx-toggle": LocalJSX.IfxToggle & JSXBase.HTMLAttributes<HTMLIfxToggleElement>;
             "infineon-icon-stencil": LocalJSX.InfineonIconStencil & JSXBase.HTMLAttributes<HTMLInfineonIconStencilElement>;
         }

src/components/dropdown-divider/dropdown-divider.scss

@@ -0,0 +1,18 @@
+.dropdown__divider-container {
+  box-sizing: border-box; 
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 4px 16px;
+
+  width: 235px;
+  height: 9px;
+
+  & .dropdown__divider-wrapper { 
+    width: 203px;
+    height: 1px;
+
+    background: #EEEDED;
+  }
+}

src/components/dropdown-divider/dropdown-divider.tsx

@@ -0,0 +1,19 @@
+import { Component, h, Element } from '@stencil/core';
+
+@Component({
+  tag: 'ifx-dropdown-divider',
+  styleUrl: './dropdown-divider.scss',
+  shadow: true
+})
+
+export class DropdownDivider {
+  @Element() el;
+
+  render() {
+    return (
+      <div class="dropdown__divider-container">
+        <div class="dropdown__divider-wrapper"></div>
+      </div>
+    );
+  }
+}

src/components/dropdown-divider/readme.md

@@ -0,0 +1,10 @@
+# ifx-dropdown-divider
+
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

src/components/dropdown-item/dropdown-item.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop, h, Element, State } from "@stencil/core";
+import { Component, Prop, h, Element, State, Event, EventEmitter } from "@stencil/core";
 
 @Component({
   tag: 'ifx-dropdown-item',
@@ -13,9 +13,45 @@ export class DropdownItem {
   @Prop() disabled: boolean;
   @Prop() icon: string;
   @Prop() checkable: boolean = false;
+  @Prop() value: string = ""
   @State() checkboxColor: string = "";
+  @Event({ bubbles: false }) itemValues: EventEmitter<Object>;
   @Element() el;
 
+  // handleMenuItem() {
+  //   const target = this.el.innerHTML;
+  //   //console.log('target', this.el.innerHTML)
+  //   this.select.emit(target);
+  // }
+
+  // handleCheckValue(event) { 
+  //   this.ItemCheck.emit(event.target.checked)
+  // }
+
+  toggleCheckBox() { 
+    let input = this.el.shadowRoot.querySelector('input')
+    if(input) { 
+      input.checked = !input.checked
+    }
+  }
+
+  handleItemChange(event) { 
+    const isNested = this.el.closest('ifx-dropdown')
+    if(!isNested) { 
+      this.toggleCheckBox()
+    }
+    //console.log('current Target',event.currentTarget)
+    if(event.currentTarget.className.toLowerCase() !== 'form-check-input') { 
+
+      const checkBoxValue = this.el.shadowRoot.querySelector('input');
+      if(checkBoxValue) { 
+        this.itemValues.emit({check: checkBoxValue.checked, value: this.value})
+      } else this.itemValues.emit({value: this.value})
+    }
+  }
+
+
+
   componentWillRender() {
     const ifxDropdown = this.el.closest('ifx-dropdown')
     if (ifxDropdown) {
@@ -30,12 +66,11 @@ export class DropdownItem {
 
   render() {
     return (
-      <a href="javascript:;" class={`dropdown-item ${this.checkboxColor}`}>
-        {this.checkable && <input type="checkbox" id="checkbox4" class={`form-check-input`} />}
+      <a href="javascript:;" onClick={this.handleItemChange.bind(this)} class={`dropdown-item ${this.checkboxColor}`}>
+        {this.checkable && <input onClick={this.handleItemChange.bind(this)} type="checkbox" id="checkbox4" class={`form-check-input`} />}
         {this.icon && <ifx-icon icon={this.icon}></ifx-icon>}
         <label class="form-check-label"><slot /></label>
       </a>
-
     )
   }
 }

src/components/dropdown-item/readme.md

@@ -14,6 +14,14 @@
 | `icon`      | `icon`      |             | `string`     | `undefined` |
 | `label`     | `label`     |             | `string`     | `undefined` |
 | `size`      | `size`      |             | `"m" \| "s"` | `undefined` |
+| `value`     | `value`     |             | `string`     | `""`        |
+
+
+## Events
+
+| Event        | Description | Type                  |
+| ------------ | ----------- | --------------------- |
+| `itemValues` |             | `CustomEvent<Object>` |
 
 
 ## Dependencies

src/components/dropdown-menu/dropdown-menu.scss

@@ -7,6 +7,7 @@
   box-shadow: 0px 0px 16px rgba(29, 29, 29, 0.12);
   border-radius: 1px;
   margin-top: 8px;
+  z-index: 1000;
 
   & ifx-search-input {
     max-width: 150px;
@@ -15,13 +16,18 @@
 }
 
 .dropdown-menu.show {
-  display: inline-block;
+  display: inline-flex;
+  flex-direction: column;
   position: absolute;
   min-width: 224px;
   padding: 0;
   border: none;
   border-radius: 1px;
 
+  &.select { 
+    //when inside select
+    width: 235px;
+  }
 
   &.nested {
     transform: none !important;