npm - @siemens/ix - Versions diffs - 1.6.3 → 2.0.0-beta.0 - Mend

@siemens/ix 1.6.3 → 2.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1110) hide show

package/dist/collection/components/pill/pill.css CHANGED Viewed

@@ -22,6 +22,14 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 /* Dimensions */
 /* Font sizes */
 /* Line heights */
@@ -35,245 +43,173 @@
  * LICENSE file in the root directory of this source tree.
  */
 :host {
+  display: inline-block;
+  position: relative;
+  height: 1.25rem;
+  max-height: 1.25rem;
+  margin-left: 0.25rem;
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+.container {
   display: inline-flex;
-  width: -moz-fit-content;
-  width: fit-content;
+  width: inherit;
+  box-sizing: border-box;
   position: relative;
   align-items: center;
-  justify-content: center;
   border-radius: 100px;
-  padding: 0px 6px;
-  margin-left: 0.25rem;
-  min-width: 1.5rem;
-  height: 1.25rem;
-  min-height: 1.25rem;
-  max-height: 1.25rem;
-  cursor: auto;
+  padding: 0.5rem;
+  height: 2rem;
+  max-height: 2rem;
+  cursor: default;
 }
-:host .with-icon {
+.container .with-icon {
   margin-right: 0.25rem;
 }
-:host.align-left {
-  justify-content: flex-start;
+.container .hidden {
+  width: 0px;
+  margin-right: 0px;
+}
+.container .close-button-container {
+  display: inline-flex;
+  margin-left: auto;
+  padding-left: 0.5rem;
+}
+.container .slot-container {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.container.icon {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
 }
-:host[variant=primary] {
+.container.closable {
+  padding-right: 0.25rem;
+}
+.container.primary {
   background-color: var(--theme-color-primary);
   color: var(--theme-chip-primary--color);
 }
-:host[variant=primary] .close-button {
+.container.primary .close-button {
   color: var(--theme-chip-primary--color);
+  --ix-icon-button-color: var(--theme-chip-primary--color);
   pointer-events: auto;
 }
-:host[variant=primary].outline {
+.container.primary.outline {
   color: var(--theme-chip-primary-outline--color);
   background-color: transparent;
   border: solid 1px var(--theme-chip-primary-outline--border-color);
 }
-:host[variant=primary].outline .close-button {
+.container.primary.outline .close-button {
   color: var(--theme-chip-primary-outline--color);
+  --ix-icon-button-color: var(--theme-chip-primary-outline--color);
 }
-:host[variant=alarm] {
+.container.alarm {
   color: var(--theme-color-alarm--contrast);
 }
-:host[variant=alarm]:not(.outline) {
+.container.alarm:not(.outline) {
   background-color: var(--theme-color-alarm);
 }
-:host[variant=alarm]:not(.outline) .close-button {
+.container.alarm:not(.outline) .close-button {
   color: var(--theme-color-alarm--contrast);
+  --ix-icon-button-color: var(--theme-color-alarm--contrast);
 }
-:host[variant=alarm]:not(.outline):hover::after {
-  content: "";
-  background-color: rgba(0, 0, 0, 0.05);
-}
-:host[variant=alarm]:not(.outline).active::after, :host[variant=alarm]:not(.outline):active::after {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-:host[variant=alarm].outline {
+.container.alarm.outline {
   color: var(--theme-chip-outline--color);
   border: solid 1px var(--theme-color-alarm);
 }
-:host[variant=alarm].outline:hover::after {
-  display: none;
-}
-:host[variant=alarm].outline:hover {
-  background-color: var(--theme-chip-outline--background--hover);
-}
-:host[variant=alarm].outline.active::after, :host[variant=alarm].outline:active::after {
-  display: none;
-}
-:host[variant=alarm].outline.active, :host[variant=alarm].outline:active {
-  background-color: var(--theme-chip-outline--background--active);
-}
-:host[variant=critical] {
+.container.critical {
   color: var(--theme-color-critical--contrast);
 }
-:host[variant=critical]:not(.outline) {
+.container.critical:not(.outline) {
   background-color: var(--theme-color-critical);
 }
-:host[variant=critical]:not(.outline) .close-button {
+.container.critical:not(.outline) .close-button {
   color: var(--theme-color-critical--contrast);
+  --ix-icon-button-color: var(--theme-color-critical--contrast);
 }
-:host[variant=critical]:not(.outline):hover::after {
-  content: "";
-  background-color: rgba(0, 0, 0, 0.05);
-}
-:host[variant=critical]:not(.outline).active::after, :host[variant=critical]:not(.outline):active::after {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-:host[variant=critical].outline {
+.container.critical.outline {
   color: var(--theme-chip-outline--color);
   border: solid 1px var(--theme-color-critical);
 }
-:host[variant=critical].outline:hover::after {
-  display: none;
-}
-:host[variant=critical].outline:hover {
-  background-color: var(--theme-chip-outline--background--hover);
-}
-:host[variant=critical].outline.active::after, :host[variant=critical].outline:active::after {
-  display: none;
-}
-:host[variant=critical].outline.active, :host[variant=critical].outline:active {
-  background-color: var(--theme-chip-outline--background--active);
-}
-:host[variant=warning] {
+.container.warning {
   color: var(--theme-color-warning--contrast);
 }
-:host[variant=warning]:not(.outline) {
+.container.warning:not(.outline) {
   background-color: var(--theme-color-warning);
 }
-:host[variant=warning]:not(.outline) .close-button {
+.container.warning:not(.outline) .close-button {
   color: var(--theme-color-warning--contrast);
+  --ix-icon-button-color: var(--theme-color-warning--contrast);
 }
-:host[variant=warning]:not(.outline):hover::after {
-  content: "";
-  background-color: rgba(0, 0, 0, 0.05);
-}
-:host[variant=warning]:not(.outline).active::after, :host[variant=warning]:not(.outline):active::after {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-:host[variant=warning].outline {
+.container.warning.outline {
   color: var(--theme-chip-outline--color);
   border: solid 1px var(--theme-color-warning);
 }
-:host[variant=warning].outline:hover::after {
-  display: none;
-}
-:host[variant=warning].outline:hover {
-  background-color: var(--theme-chip-outline--background--hover);
-}
-:host[variant=warning].outline.active::after, :host[variant=warning].outline:active::after {
-  display: none;
-}
-:host[variant=warning].outline.active, :host[variant=warning].outline:active {
-  background-color: var(--theme-chip-outline--background--active);
-}
-:host[variant=info] {
+.container.info {
   color: var(--theme-color-info--contrast);
 }
-:host[variant=info]:not(.outline) {
+.container.info:not(.outline) {
   background-color: var(--theme-color-info);
 }
-:host[variant=info]:not(.outline) .close-button {
+.container.info:not(.outline) .close-button {
   color: var(--theme-color-info--contrast);
+  --ix-icon-button-color: var(--theme-color-info--contrast);
 }
-:host[variant=info]:not(.outline):hover::after {
-  content: "";
-  background-color: rgba(0, 0, 0, 0.05);
-}
-:host[variant=info]:not(.outline).active::after, :host[variant=info]:not(.outline):active::after {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-:host[variant=info].outline {
+.container.info.outline {
   color: var(--theme-chip-outline--color);
   border: solid 1px var(--theme-color-info);
 }
-:host[variant=info].outline:hover::after {
-  display: none;
-}
-:host[variant=info].outline:hover {
-  background-color: var(--theme-chip-outline--background--hover);
-}
-:host[variant=info].outline.active::after, :host[variant=info].outline:active::after {
-  display: none;
-}
-:host[variant=info].outline.active, :host[variant=info].outline:active {
-  background-color: var(--theme-chip-outline--background--active);
-}
-:host[variant=neutral] {
+.container.neutral {
   color: var(--theme-color-neutral--contrast);
 }
-:host[variant=neutral]:not(.outline) {
+.container.neutral:not(.outline) {
   background-color: var(--theme-color-neutral);
 }
-:host[variant=neutral]:not(.outline) .close-button {
+.container.neutral:not(.outline) .close-button {
   color: var(--theme-color-neutral--contrast);
+  --ix-icon-button-color: var(--theme-color-neutral--contrast);
 }
-:host[variant=neutral]:not(.outline):hover::after {
-  content: "";
-  background-color: rgba(0, 0, 0, 0.05);
-}
-:host[variant=neutral]:not(.outline).active::after, :host[variant=neutral]:not(.outline):active::after {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-:host[variant=neutral].outline {
+.container.neutral.outline {
   color: var(--theme-chip-outline--color);
   border: solid 1px var(--theme-color-neutral);
 }
-:host[variant=neutral].outline:hover::after {
-  display: none;
-}
-:host[variant=neutral].outline:hover {
-  background-color: var(--theme-chip-outline--background--hover);
-}
-:host[variant=neutral].outline.active::after, :host[variant=neutral].outline:active::after {
-  display: none;
-}
-:host[variant=neutral].outline.active, :host[variant=neutral].outline:active {
-  background-color: var(--theme-chip-outline--background--active);
-}
-:host[variant=success] {
+.container.success {
   color: var(--theme-color-success--contrast);
 }
-:host[variant=success]:not(.outline) {
+.container.success:not(.outline) {
   background-color: var(--theme-color-success);
 }
-:host[variant=success]:not(.outline) .close-button {
+.container.success:not(.outline) .close-button {
   color: var(--theme-color-success--contrast);
+  --ix-icon-button-color: var(--theme-color-success--contrast);
 }
-:host[variant=success]:not(.outline):hover::after {
-  content: "";
-  background-color: rgba(0, 0, 0, 0.05);
-}
-:host[variant=success]:not(.outline).active::after, :host[variant=success]:not(.outline):active::after {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-:host[variant=success].outline {
+.container.success.outline {
   color: var(--theme-chip-outline--color);
   border: solid 1px var(--theme-color-success);
 }
-:host[variant=success].outline:hover::after {
-  display: none;
-}
-:host[variant=success].outline:hover {
-  background-color: var(--theme-chip-outline--background--hover);
-}
-:host[variant=success].outline.active::after, :host[variant=success].outline:active::after {
-  display: none;
-}
-:host[variant=success].outline.active, :host[variant=success].outline:active {
-  background-color: var(--theme-chip-outline--background--active);
-}
-:host[variant=custom].outline {
-  border: solid 1px transparent;
-  background-color: transparent;
-}
-:host .slot {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+:host .container {
+  height: 100%;
+  justify-content: center;
+  padding-right: 0.5rem;
 }
-:host .hidden {
-  width: 0px;
-  margin-right: 0px;
+:host(.align-left) .container {
+  justify-content: flex-start;
 }

package/dist/collection/components/pill/pill.js CHANGED Viewed

@@ -17,21 +17,39 @@ export class Pill {
     this.alignLeft = false;
   }
   render() {
-    return (h(Host, { class: {
-        outline: this.outline,
-        'align-left': this.alignLeft,
-      }, style: this.variant === 'custom'
+    let customStyle = {};
+    if (this.variant === 'custom') {
+      customStyle = {
+        color: this.color,
+        [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
+      };
+    }
+    return (h(Host, { style: this.variant === 'custom'
         ? {
-          color: this.color,
-          backgroundColor: this.background,
+          '--ix-icon-button-color': this.color,
         }
-        : {}, title: this.el.textContent }, h("ix-icon", { class: {
+        : {}, title: this.el.textContent, class: {
+        'align-left': this.alignLeft,
+      } }, h("div", { style: Object.assign({}, customStyle), class: {
+        container: true,
+        outline: this.outline,
+        inactive: false,
+        alarm: this.variant === 'alarm',
+        critical: this.variant === 'critical',
+        info: this.variant === 'info',
+        neutral: this.variant === 'neutral',
+        primary: this.variant === 'primary',
+        success: this.variant === 'success',
+        warning: this.variant === 'warning',
+        closable: false,
+        icon: !!this.icon,
+      } }, h("ix-icon", { class: {
         'with-icon': true,
         hidden: this.icon === undefined || this.icon === '',
-      }, name: this.icon, size: '16' }), h("div", { class: "slot" }, h("slot", null))));
+      }, name: this.icon, size: '16' }), h("span", { class: "slot-container" }, h("slot", null)))));
   }
   static get is() { return "ix-pill"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["pill.scss"]

package/dist/collection/components/pill/pill.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pill.js","sourceRoot":"","sources":["../../../src/components/pill/pill.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOlE,MAAM,OAAO,IAAI;;mBAcA,SAAS;mBAKN,KAAK;;;;qBAoBH,KAAK;;EAEzB,MAAM;IACJ,~~OAAO~~,~~CACL~~,~~EAAC~~,IAAI,~~IACH~~,KAAK,EAAE;~~QACL~~,~~OAAO~~,EAAE,IAAI,CAAC,~~OAAO~~;~~QACrB~~,~~YAAY~~,EAAE,IAAI,CAAC,~~SAAS~~;~~OAC7B~~,~~EACD~~,KAAK,EACH,IAAI,CAAC,OAAO,KAAK,QAAQ;QACvB,CAAC,CAAC;UACE,KAAK,EAAE,IAAI,CAAC,KAAK;~~UACjB~~,~~eAAe~~,EAAE,IAAI,CAAC,UAAU;~~SACjC~~;~~QACH~~,CAAC,CAAC,EAAE,~~EAER~~,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,~~WAAW~~;~~MAE1B~~,eACE,KAAK,EAAE;~~UACL~~,WAAW,EAAE,IAAI;~~UACjB~~,MAAM,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;~~SACpD~~,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,GACV;~~MACF~~,~~WAAK~~,KAAK,EAAC,~~MAAM~~;~~QACf~~,eAAa,~~CACT~~,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-pill',\n styleUrl: 'pill.scss',\n ~~scoped~~: true,\n})\nexport class Pill {\n @Element() el: HTMLIxPillElement;\n\n /\n Pill variant\n /\n @Prop({ reflect: true }) variant:\n \| 'primary'\n \| 'alarm'\n \| 'critical'\n \| 'warning'\n \| 'info'\n \| 'neutral'\n \| 'success'\n \| 'custom' = 'primary';\n\n /\n Show pill as outline\n /\n @Prop() outline = false;\n\n /\n Show icon\n /\n @Prop() icon: string \| undefined;\n\n /\n Custom color for pill. Only working for `variant='custom'`\n /\n @Prop() background: string \| undefined;\n\n /\n Custom font color for pill. Only working for `variant='custom'`\n /\n @Prop() color: string \| undefined;\n\n /\n Align pill content left\n */\n @Prop() alignLeft = false;\n\n render() {\n ~~return~~ (\n ~~<Host\n class~~={{\n ~~outline~~: this.~~outline~~,\n '~~align-left~~': this.~~alignLeft~~,\n }}\n style={\n this.variant === 'custom'\n ? {\n color: this.color,\n ~~backgroundColor: this.background,\n~~ }\n : {}\n }\n title={this.el.textContent}\n >\n <ix-icon\n class={{\n 'with-icon': true,\n hidden: this.icon === undefined \|\| this.icon === '',\n }}\n name={this.icon}\n size={'16'}\n />\n <~~div~~ class=\"slot\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pill.js","sourceRoot":"","sources":["../../../src/components/pill/pill.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOlE,MAAM,OAAO,IAAI;;mBAcA,SAAS;mBAKN,KAAK;;;;qBAoBH,KAAK;;EAEzB,MAAM;IACJ,IAAI,WAAW,GAAG,EAAE,CAAC;IAErB,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE;MAC7B,WAAW,GAAG;QACZ,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC,EAAE,IAAI,CAAC,UAAU;OACpE,CAAC;KACH;IACD,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EACH,IAAI,CAAC,OAAO,KAAK,QAAQ;QACvB,CAAC,CAAC;UACE,wBAAwB,EAAE,IAAI,CAAC,KAAK;SACrC;QACH,CAAC,CAAC,EAAE,EAER,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,WAAW,EAC1B,KAAK,EAAE;QACL,YAAY,EAAE,IAAI,CAAC,SAAS;OAC7B;MAED,WACE,KAAK,oBAAO,WAAW,GACvB,KAAK,EAAE;UACL,SAAS,EAAE,IAAI;UACf,OAAO,EAAE,IAAI,CAAC,OAAO;UACrB,QAAQ,EAAE,KAAK;UACf,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;UAC/B,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;UACrC,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;UAC7B,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;UACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;UACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;UACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;UACnC,QAAQ,EAAE,KAAK;UACf,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;SAClB;QAED,eACE,KAAK,EAAE;YACL,WAAW,EAAE,IAAI;YACjB,MAAM,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;WACpD,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,GACV;QACF,YAAM,KAAK,EAAC,gBAAgB;UAC1B,eAAa,CACR,CACH,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-pill',\n styleUrl: 'pill.scss',\n shadow: true,\n})\nexport class Pill {\n @Element() el: HTMLIxPillElement;\n\n /\n Pill variant\n /\n @Prop({ reflect: true }) variant:\n \| 'primary'\n \| 'alarm'\n \| 'critical'\n \| 'warning'\n \| 'info'\n \| 'neutral'\n \| 'success'\n \| 'custom' = 'primary';\n\n /\n Show pill as outline\n /\n @Prop() outline = false;\n\n /\n Show icon\n /\n @Prop() icon: string \| undefined;\n\n /\n Custom color for pill. Only working for `variant='custom'`\n /\n @Prop() background: string \| undefined;\n\n /\n Custom font color for pill. Only working for `variant='custom'`\n /\n @Prop() color: string \| undefined;\n\n /\n Align pill content left\n */\n @Prop() alignLeft = false;\n\n render() {\n let customStyle = {};\n\n if (this.variant === 'custom') {\n customStyle = {\n color: this.color,\n [this.outline ? 'borderColor' : 'backgroundColor']: this.background,\n };\n }\n return (\n <Host\n style={\n this.variant === 'custom'\n ? {\n '--ix-icon-button-color': this.color,\n }\n : {}\n }\n title={this.el.textContent}\n class={{\n 'align-left': this.alignLeft,\n }}\n >\n <div\n style={{ ...customStyle }}\n class={{\n container: true,\n outline: this.outline,\n inactive: false,\n alarm: this.variant === 'alarm',\n critical: this.variant === 'critical',\n info: this.variant === 'info',\n neutral: this.variant === 'neutral',\n primary: this.variant === 'primary',\n success: this.variant === 'success',\n warning: this.variant === 'warning',\n closable: false,\n icon: !!this.icon,\n }}\n >\n <ix-icon\n class={{\n 'with-icon': true,\n hidden: this.icon === undefined \|\| this.icon === '',\n }}\n name={this.icon}\n size={'16'}\n />\n <span class=\"slot-container\">\n <slot></slot>\n </span>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/select/select.css CHANGED Viewed

@@ -48,6 +48,9 @@
   height: auto;
   border-radius: var(--theme-input--border-radius);
 }
+:host .d-none {
+  display: none;
+}
 :host .select {
   position: relative;
   display: flex;
@@ -183,5 +186,5 @@
   align-items: center;
   height: 2rem;
   color: var(--theme-select-list-item-hint--color);
-  margin: 0 0.5rem 0 2rem;
+  margin: 0 0.5rem 0 1rem;
 }

package/dist/collection/components/select/select.js CHANGED Viewed

@@ -102,6 +102,11 @@ export class Select {
     }
     this.inputValue = null;
   }
+  componentDidLoad() {
+    this.inputRef.addEventListener('input', () => {
+      this.inputChange.emit(this.inputRef.value);
+    });
+  }
   componentWillLoad() {
     if (this.selectedIndices) {
       this.selectValue(Array.isArray(this.selectedIndices)
@@ -238,6 +243,11 @@ export class Select {
     }
     return this.i18nPlaceholder;
   }
+  isAddItemVisible() {
+    return (!this.itemExists(this.inputFilterText) &&
+      this.editable &&
+      this.inputFilterText);
+  }
   render() {
     var _a, _b, _c;
     return (h(Host, null, h("div", { class: {
@@ -269,21 +279,20 @@ export class Select {
           this.dropdownWrapperRef = ref;
       } }, h("ix-icon", { class: "chevron", name: "chevron-down-small" }))))))), h("ix-dropdown", { ref: (ref) => (this.dropdownRef = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
         'd-none': this.disabled || this.readonly,
-      }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "auto-start", overwriteDropdownStyle: async () => {
+      }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom-start", overwriteDropdownStyle: async () => {
         return {
           minWidth: `${this.hostElement.clientWidth}px`,
         };
       } }, h("div", { class: {
         'select-list-header': true,
         hidden: this.hideListHeader || this.isDropdownEmpty,
-      }, title: this.i18nSelectListHeader }, this.i18nSelectListHeader), h("slot", null), h("div", { ref: (ref) => (this.addItemRef = ref), class: "d-contents" }), this.itemExists(this.inputFilterText) ? ('') : (h("ix-dropdown-item", { "data-testid": "add-item", icon: "plus", class: {
+      }, title: this.i18nSelectListHeader }, this.i18nSelectListHeader), h("slot", null), h("div", { ref: (ref) => (this.addItemRef = ref), class: "d-contents" }), this.isAddItemVisible() ? (h("ix-dropdown-item", { "data-testid": "add-item", icon: "plus", class: {
         'add-item': true,
-        'd-none': !(this.editable && this.inputFilterText),
       }, label: this.inputFilterText, onItemClick: (e) => {
         e.preventDefault();
         e.stopPropagation();
         this.emitAddItem(this.inputFilterText);
-      } })), this.isDropdownEmpty && !this.editable ? (h("div", { class: "select-list-header" }, this.i18nNoMatches)) : (''))));
+      } })) : null, this.isDropdownEmpty && !this.editable ? (h("div", { class: "select-list-header" }, this.i18nNoMatches)) : (''))));
   }
   static get is() { return "ix-select"; }
   static get encapsulation() { return "scoped"; }
@@ -311,7 +320,7 @@ export class Select {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Indices of selected items\nThis corresponds to the value property of ix-select-items and therefor not neccessarily the indices of the items in the list."
+          "text": "Indices of selected items\nThis corresponds to the value property of ix-select-items and therefor not necessarily the indices of the items in the list."
         },
         "attribute": "selected-indices",
         "reflect": false,
@@ -537,6 +546,24 @@ export class Select {
           "resolved": "string | string[]",
           "references": {}
         }
+      }, {
+        "method": "inputChange",
+        "name": "inputChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "since",
+              "text": "2.0.0"
+            }],
+          "text": "Event dispatched whenever the text input changes."
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
       }, {
         "method": "addItem",
         "name": "addItem",

package/dist/collection/components/select/select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { IxSelectItemLabelChangeEvent } from '../select-item/events';\n\n@Component({\n tag: 'ix-select',\n styleUrl: 'select.scss',\n scoped: true,\n})\nexport class Select {\n @Element() hostElement!: HTMLIxSelectElement;\n\n /\n Indices of selected items\n * This corresponds to the value property of ix-select-items and therefor not neccessarily the indices of the items in the list.\n /\n @Prop({ mutable: true }) selectedIndices: string \| string[] = [];\n\n /\n Show clear button\n /\n @Prop() allowClear = false;\n\n /\n Selection mode\n /\n @Prop() mode: 'single' \| 'multiple' = 'single';\n\n /\n Select is extendable\n /\n @Prop() editable = false;\n\n /\n If true the select will be in disabled state\n /\n @Prop() disabled = false;\n\n /\n If true the select will be in readonly mode\n /\n @Prop() readonly = false;\n\n /\n Input field placeholder\n /\n @Prop() i18nPlaceholder = 'Select an option';\n\n /\n Input field placeholder for editable select\n /\n @Prop() i18nPlaceholderEditable = 'Type of select option';\n\n /\n Select list header\n /\n @Prop() i18nSelectListHeader = 'Please select an option';\n\n /\n Hint inside of dropdown if no items where found with current filter text\n \n @since 1.5.0\n /\n @Prop() i18nNoMatches = 'No matches';\n\n /\n Hide list header\n \n @since 1.5.0\n @\n /\n @Prop() hideListHeader = false;\n\n /\n Item selection changed\n /\n @Event() itemSelectionChange: EventEmitter<string \| string[]>;\n\n /\n Item added to selection\n */\n @Event() addItem: EventEmitter<string>;\n\n @State() dropdownShow = false;\n @State() value: string[];\n @State() dropdownWrapperRef!: HTMLElement;\n @State() dropdownAnchor!: HTMLElement;\n @State() isDropdownEmpty = false;\n @State() hasFocus = false;\n @State() navigationItem: HTMLIxSelectItemElement;\n @State() inputFilterText: string;\n @State() inputValue: string;\n\n private inputRef!: HTMLInputElement;\n private dropdownRef!: HTMLIxDropdownElement;\n private addItemRef!: HTMLDivElement;\n\n private labelMutationObserver: MutationObserver;\n\n get items() {\n return Array.from(this.hostElement.querySelectorAll('ix-select-item'));\n }\n\n get selectedItems() {\n return this.items.filter((item) => item.selected);\n }\n\n get addItemButton() {\n return this.hostElement.querySelector('.add-item');\n }\n\n get isSingleMode() {\n return this.mode === 'single';\n }\n\n get isMultipleMode() {\n return this.mode === 'multiple';\n }\n\n get isEveryDropdownItemHidden() {\n return this.items.every((item) => item.classList.contains('d-none'));\n }\n\n @Watch('selectedIndices')\n watchSelectedIndices(newId: string \| string[]) {\n if (!newId) {\n this.selectValue([]);\n return;\n }\n\n if (Array.isArray(newId)) {\n this.selectValue([...newId]);\n return;\n }\n\n this.selectValue([newId]);\n }\n\n @Listen('itemClick')\n onItemClicked(event: CustomEvent<string>) {\n const newId = event.detail;\n this.emitItemClick(newId);\n }\n\n private emitItemClick(newId: string) {\n if (this.isMultipleMode && Array.isArray(this.selectedIndices)) {\n if (this.selectedIndices.includes(newId)) {\n this.selectedIndices = this.selectedIndices.filter((i) => i !== newId);\n } else {\n this.selectedIndices = [...this.selectedIndices, newId];\n }\n } else {\n this.selectedIndices = [newId];\n }\n\n this.selectValue(this.selectedIndices);\n this.itemSelectionChange.emit(this.selectedIndices);\n }\n\n private emitAddItem(value: string) {\n if (value.trim() === '') {\n return;\n }\n\n const newItem = document.createElement('ix-select-item');\n newItem.value = value;\n newItem.label = value;\n\n this.addItemRef.appendChild(newItem);\n\n this.clearInput();\n this.emitItemClick(value);\n this.addItem.emit(value);\n }\n\n private selectValue(ids: string[]) {\n this.items.forEach((item) => {\n item.selected = ids.some((i) => i === item.value);\n });\n\n this.value = this.selectedItems.map((item) => item.label);\n\n if (this.isSingleMode) {\n this.inputValue = this.value?.length ? this.value[0] : null;\n return;\n }\n\n this.inputValue = null;\n }\n\n componentWillLoad() {\n if (this.selectedIndices) {\n this.selectValue(\n Array.isArray(this.selectedIndices)\n ? this.selectedIndices\n : [this.selectedIndices]\n );\n }\n }\n\n @Listen('ix-select-item:labelChange')\n onLabelChange(event: IxSelectItemLabelChangeEvent) {\n event.preventDefault();\n event.stopImmediatePropagation();\n this.selectValue(\n Array.isArray(this.selectedIndices)\n ? this.selectedIndices\n : [this.selectedIndices]\n );\n }\n\n disconnectedCallback() {\n if (this.labelMutationObserver) {\n this.labelMutationObserver.disconnect();\n }\n }\n\n private itemExists(item: string) {\n return this.items.find((i) => i.label === item);\n }\n\n private dropdownVisibilityChanged(event: CustomEvent<boolean>) {\n this.dropdownShow = event.detail;\n this.hasFocus = event.detail;\n\n if (event.detail) {\n this.inputRef.focus();\n this.inputRef.select();\n\n this.removeHiddenFromItems();\n this.isDropdownEmpty = this.isEveryDropdownItemHidden;\n } else {\n this.navigationItem = undefined;\n }\n }\n\n @Listen('keydown', {\n target: 'window',\n })\n async onKeyDown(event: KeyboardEvent) {\n if (!this.dropdownShow) {\n return;\n }\n\n if (event.code === 'ArrowDown' \|\| event.code === 'ArrowUp') {\n this.onArrowNavigation(event);\n }\n\n if (event.code === 'Enter' \|\| event.code === 'NumpadEnter') {\n await this.onEnterNavigation();\n }\n\n if (event.code === 'Escape') {\n this.dropdownShow = false;\n }\n }\n\n private async onEnterNavigation() {\n if (this.isMultipleMode) {\n return;\n }\n\n if (this.editable && !this.itemExists(this.inputFilterText)) {\n this.emitAddItem(this.inputFilterText);\n this.navigationItem = this.items[this.items.length - 1];\n }\n\n this.navigationItem?.onItemClick();\n await this.dropdownRef?.updatePosition();\n\n if (this.isSingleMode && !this.editable) {\n this.dropdownShow = false;\n }\n }\n\n private onArrowNavigation(event: KeyboardEvent) {\n event.stopPropagation();\n event.preventDefault();\n\n const focusItem = this.items.find(\n (item) => document.activeElement === item.querySelector('button')\n );\n this.navigationItem = focusItem;\n\n const selectItems = this.items.filter(\n (i) => !i.classList.contains('d-none')\n );\n\n const index = selectItems.indexOf(this.navigationItem);\n\n if (event.code === 'ArrowDown' && index < selectItems.length - 1) {\n this.navigationItem = selectItems[index + 1];\n } else if (event.code === 'ArrowUp' && index > 0) {\n this.navigationItem = selectItems[index - 1];\n }\n\n this.setHoverEffectForNavigatedSelectItem();\n }\n\n private setHoverEffectForNavigatedSelectItem() {\n this.navigationItem?.querySelector('button').focus();\n }\n\n private filterItemsWithTypeahead() {\n this.inputFilterText = this.inputRef.value;\n\n if (this.inputFilterText) {\n this.items.forEach((item) => {\n item.classList.remove('d-none');\n if (\n !item.label.toLowerCase().includes(this.inputFilterText.toLowerCase())\n ) {\n item.classList.add('d-none');\n }\n });\n } else {\n this.removeHiddenFromItems();\n }\n\n this.isDropdownEmpty = this.isEveryDropdownItemHidden;\n }\n\n private removeHiddenFromItems() {\n this.items.forEach((item) => {\n item.classList.remove('d-none');\n });\n }\n\n private clearInput() {\n this.inputRef.value = '';\n this.inputFilterText = '';\n }\n\n private clear() {\n this.clearInput();\n this.value = [];\n this.selectedIndices = [];\n this.itemSelectionChange.emit(null);\n this.dropdownShow = false;\n }\n\n private onInputBlur(e) {\n if (this.editable) {\n return;\n }\n\n if (this.isSingleMode) {\n if (this.dropdownShow && this.isDropdownEmpty) {\n this.dropdownShow = false;\n }\n }\n\n if (!this.dropdownShow && this.mode !== 'multiple') {\n e.target['value'] = this.value;\n }\n }\n\n private placeholderValue() {\n if (this.editable) {\n return this.i18nPlaceholderEditable;\n }\n\n if (this.readonly) {\n return '';\n }\n\n return this.i18nPlaceholder;\n }\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'form-control': true,\n select: true,\n focus: this.hasFocus,\n editable: this.editable,\n disabled: this.disabled,\n readonly: this.readonly,\n }}\n ref={(ref) => {\n this.dropdownAnchor = ref;\n if (!this.editable) this.dropdownWrapperRef = ref;\n }}\n >\n <div class=\"input-container\">\n <div class=\"chips\">\n {this.isMultipleMode\n ? this.selectedItems?.map((item) => (\n <ix-filter-chip\n disabled={this.disabled \|\| this.readonly}\n key={item.value}\n onCloseClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n this.emitItemClick(item.value);\n }}\n >\n {item.label}\n </ix-filter-chip>\n ))\n : ''}\n <div class=\"trigger\">\n <input\n data-testid=\"input\"\n disabled={this.disabled}\n readOnly={this.readonly}\n type=\"text\"\n class={{\n 'allow-clear': this.allowClear && !!this.value?.length,\n }}\n placeholder={this.placeholderValue()}\n value={this.inputValue}\n ref={(ref) => (this.inputRef = ref)}\n onBlur={(e) => this.onInputBlur(e)}\n onInput={() => this.filterItemsWithTypeahead()}\n />\n {this.allowClear &&\n (this.value?.length \|\| this.inputFilterText) ? (\n <ix-icon-button\n class=\"clear\"\n icon=\"clear\"\n ghost\n oval\n size=\"16\"\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n this.clear();\n }}\n />\n ) : null}\n {this.disabled \|\| this.readonly ? null : (\n <div\n class=\"chevron-down-container\"\n ref={(ref) => {\n if (this.editable) this.dropdownWrapperRef = ref;\n }}\n >\n <ix-icon class=\"chevron\" name=\"chevron-down-small\" />\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n <ix-dropdown\n ref={(ref) => (this.dropdownRef = ref)}\n show={this.dropdownShow}\n closeBehavior={this.isMultipleMode ? 'outside' : 'both'}\n class={{\n 'd-none': this.disabled \|\| this.readonly,\n }}\n anchor={this.dropdownAnchor}\n trigger={this.dropdownWrapperRef}\n onShowChanged={(e) => this.dropdownVisibilityChanged(e)}\n placement=\"auto-start\"\n overwriteDropdownStyle={async () => {\n return {\n minWidth: `${this.hostElement.clientWidth}px`,\n };\n }}\n >\n <div\n class={{\n 'select-list-header': true,\n hidden: this.hideListHeader \|\| this.isDropdownEmpty,\n }}\n title={this.i18nSelectListHeader}\n >\n {this.i18nSelectListHeader}\n </div>\n <slot></slot>\n <div ref={(ref) => (this.addItemRef = ref)} class=\"d-contents\"></div>\n {this.itemExists(this.inputFilterText) ? (\n ''\n ) : (\n <ix-dropdown-item\n data-testid=\"add-item\"\n icon=\"plus\"\n class={{\n 'add-item': true,\n 'd-none': !(this.editable && this.inputFilterText),\n }}\n label={this.inputFilterText}\n onItemClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n this.emitAddItem(this.inputFilterText);\n }}\n ></ix-dropdown-item>\n )}\n {this.isDropdownEmpty && !this.editable ? (\n <div class=\"select-list-header\">{this.i18nNoMatches}</div>\n ) : (\n ''\n )}\n </ix-dropdown>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { IxSelectItemLabelChangeEvent } from '../select-item/events';\n\n@Component({\n tag: 'ix-select',\n styleUrl: 'select.scss',\n scoped: true,\n})\nexport class Select {\n @Element() hostElement!: HTMLIxSelectElement;\n\n /\n Indices of selected items\n * This corresponds to the value property of ix-select-items and therefor not necessarily the indices of the items in the list.\n /\n @Prop({ mutable: true }) selectedIndices: string \| string[] = [];\n\n /\n Show clear button\n /\n @Prop() allowClear = false;\n\n /\n Selection mode\n /\n @Prop() mode: 'single' \| 'multiple' = 'single';\n\n /\n Select is extendable\n /\n @Prop() editable = false;\n\n /\n If true the select will be in disabled state\n /\n @Prop() disabled = false;\n\n /\n If true the select will be in readonly mode\n /\n @Prop() readonly = false;\n\n /\n Input field placeholder\n /\n @Prop() i18nPlaceholder = 'Select an option';\n\n /\n Input field placeholder for editable select\n /\n @Prop() i18nPlaceholderEditable = 'Type of select option';\n\n /\n Select list header\n /\n @Prop() i18nSelectListHeader = 'Please select an option';\n\n /\n Hint inside of dropdown if no items where found with current filter text\n \n @since 1.5.0\n /\n @Prop() i18nNoMatches = 'No matches';\n\n /\n Hide list header\n \n @since 1.5.0\n @\n /\n @Prop() hideListHeader = false;\n\n /\n Item selection changed\n /\n @Event() itemSelectionChange: EventEmitter<string \| string[]>;\n\n /\n Event dispatched whenever the text input changes.\n \n @since 2.0.0\n /\n @Event() inputChange: EventEmitter<string>;\n\n /\n Item added to selection\n */\n @Event() addItem: EventEmitter<string>;\n\n @State() dropdownShow = false;\n @State() value: string[];\n @State() dropdownWrapperRef!: HTMLElement;\n @State() dropdownAnchor!: HTMLElement;\n @State() isDropdownEmpty = false;\n @State() hasFocus = false;\n @State() navigationItem: HTMLIxSelectItemElement;\n @State() inputFilterText: string;\n @State() inputValue: string;\n\n private inputRef!: HTMLInputElement;\n private dropdownRef!: HTMLIxDropdownElement;\n private addItemRef!: HTMLDivElement;\n\n private labelMutationObserver: MutationObserver;\n\n get items() {\n return Array.from(this.hostElement.querySelectorAll('ix-select-item'));\n }\n\n get selectedItems() {\n return this.items.filter((item) => item.selected);\n }\n\n get addItemButton() {\n return this.hostElement.querySelector('.add-item');\n }\n\n get isSingleMode() {\n return this.mode === 'single';\n }\n\n get isMultipleMode() {\n return this.mode === 'multiple';\n }\n\n get isEveryDropdownItemHidden() {\n return this.items.every((item) => item.classList.contains('d-none'));\n }\n\n @Watch('selectedIndices')\n watchSelectedIndices(newId: string \| string[]) {\n if (!newId) {\n this.selectValue([]);\n return;\n }\n\n if (Array.isArray(newId)) {\n this.selectValue([...newId]);\n return;\n }\n\n this.selectValue([newId]);\n }\n\n @Listen('itemClick')\n onItemClicked(event: CustomEvent<string>) {\n const newId = event.detail;\n this.emitItemClick(newId);\n }\n\n private emitItemClick(newId: string) {\n if (this.isMultipleMode && Array.isArray(this.selectedIndices)) {\n if (this.selectedIndices.includes(newId)) {\n this.selectedIndices = this.selectedIndices.filter((i) => i !== newId);\n } else {\n this.selectedIndices = [...this.selectedIndices, newId];\n }\n } else {\n this.selectedIndices = [newId];\n }\n\n this.selectValue(this.selectedIndices);\n this.itemSelectionChange.emit(this.selectedIndices);\n }\n\n private emitAddItem(value: string) {\n if (value.trim() === '') {\n return;\n }\n\n const newItem = document.createElement('ix-select-item');\n newItem.value = value;\n newItem.label = value;\n\n this.addItemRef.appendChild(newItem);\n\n this.clearInput();\n this.emitItemClick(value);\n this.addItem.emit(value);\n }\n\n private selectValue(ids: string[]) {\n this.items.forEach((item) => {\n item.selected = ids.some((i) => i === item.value);\n });\n\n this.value = this.selectedItems.map((item) => item.label);\n\n if (this.isSingleMode) {\n this.inputValue = this.value?.length ? this.value[0] : null;\n return;\n }\n\n this.inputValue = null;\n }\n\n componentDidLoad() {\n this.inputRef.addEventListener('input', () => {\n this.inputChange.emit(this.inputRef.value);\n });\n }\n\n componentWillLoad() {\n if (this.selectedIndices) {\n this.selectValue(\n Array.isArray(this.selectedIndices)\n ? this.selectedIndices\n : [this.selectedIndices]\n );\n }\n }\n\n @Listen('ix-select-item:labelChange')\n onLabelChange(event: IxSelectItemLabelChangeEvent) {\n event.preventDefault();\n event.stopImmediatePropagation();\n this.selectValue(\n Array.isArray(this.selectedIndices)\n ? this.selectedIndices\n : [this.selectedIndices]\n );\n }\n\n disconnectedCallback() {\n if (this.labelMutationObserver) {\n this.labelMutationObserver.disconnect();\n }\n }\n\n private itemExists(item: string) {\n return this.items.find((i) => i.label === item);\n }\n\n private dropdownVisibilityChanged(event: CustomEvent<boolean>) {\n this.dropdownShow = event.detail;\n this.hasFocus = event.detail;\n\n if (event.detail) {\n this.inputRef.focus();\n this.inputRef.select();\n\n this.removeHiddenFromItems();\n this.isDropdownEmpty = this.isEveryDropdownItemHidden;\n } else {\n this.navigationItem = undefined;\n }\n }\n\n @Listen('keydown', {\n target: 'window',\n })\n async onKeyDown(event: KeyboardEvent) {\n if (!this.dropdownShow) {\n return;\n }\n\n if (event.code === 'ArrowDown' \|\| event.code === 'ArrowUp') {\n this.onArrowNavigation(event);\n }\n\n if (event.code === 'Enter' \|\| event.code === 'NumpadEnter') {\n await this.onEnterNavigation();\n }\n\n if (event.code === 'Escape') {\n this.dropdownShow = false;\n }\n }\n\n private async onEnterNavigation() {\n if (this.isMultipleMode) {\n return;\n }\n\n if (this.editable && !this.itemExists(this.inputFilterText)) {\n this.emitAddItem(this.inputFilterText);\n this.navigationItem = this.items[this.items.length - 1];\n }\n\n this.navigationItem?.onItemClick();\n await this.dropdownRef?.updatePosition();\n\n if (this.isSingleMode && !this.editable) {\n this.dropdownShow = false;\n }\n }\n\n private onArrowNavigation(event: KeyboardEvent) {\n event.stopPropagation();\n event.preventDefault();\n\n const focusItem = this.items.find(\n (item) => document.activeElement === item.querySelector('button')\n );\n this.navigationItem = focusItem;\n\n const selectItems = this.items.filter(\n (i) => !i.classList.contains('d-none')\n );\n\n const index = selectItems.indexOf(this.navigationItem);\n\n if (event.code === 'ArrowDown' && index < selectItems.length - 1) {\n this.navigationItem = selectItems[index + 1];\n } else if (event.code === 'ArrowUp' && index > 0) {\n this.navigationItem = selectItems[index - 1];\n }\n\n this.setHoverEffectForNavigatedSelectItem();\n }\n\n private setHoverEffectForNavigatedSelectItem() {\n this.navigationItem?.querySelector('button').focus();\n }\n\n private filterItemsWithTypeahead() {\n this.inputFilterText = this.inputRef.value;\n\n if (this.inputFilterText) {\n this.items.forEach((item) => {\n item.classList.remove('d-none');\n if (\n !item.label.toLowerCase().includes(this.inputFilterText.toLowerCase())\n ) {\n item.classList.add('d-none');\n }\n });\n } else {\n this.removeHiddenFromItems();\n }\n\n this.isDropdownEmpty = this.isEveryDropdownItemHidden;\n }\n\n private removeHiddenFromItems() {\n this.items.forEach((item) => {\n item.classList.remove('d-none');\n });\n }\n\n private clearInput() {\n this.inputRef.value = '';\n this.inputFilterText = '';\n }\n\n private clear() {\n this.clearInput();\n this.value = [];\n this.selectedIndices = [];\n this.itemSelectionChange.emit(null);\n this.dropdownShow = false;\n }\n\n private onInputBlur(e) {\n if (this.editable) {\n return;\n }\n\n if (this.isSingleMode) {\n if (this.dropdownShow && this.isDropdownEmpty) {\n this.dropdownShow = false;\n }\n }\n\n if (!this.dropdownShow && this.mode !== 'multiple') {\n e.target['value'] = this.value;\n }\n }\n\n private placeholderValue() {\n if (this.editable) {\n return this.i18nPlaceholderEditable;\n }\n\n if (this.readonly) {\n return '';\n }\n\n return this.i18nPlaceholder;\n }\n\n private isAddItemVisible() {\n return (\n !this.itemExists(this.inputFilterText) &&\n this.editable &&\n this.inputFilterText\n );\n }\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'form-control': true,\n select: true,\n focus: this.hasFocus,\n editable: this.editable,\n disabled: this.disabled,\n readonly: this.readonly,\n }}\n ref={(ref) => {\n this.dropdownAnchor = ref;\n if (!this.editable) this.dropdownWrapperRef = ref;\n }}\n >\n <div class=\"input-container\">\n <div class=\"chips\">\n {this.isMultipleMode\n ? this.selectedItems?.map((item) => (\n <ix-filter-chip\n disabled={this.disabled \|\| this.readonly}\n key={item.value}\n onCloseClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n this.emitItemClick(item.value);\n }}\n >\n {item.label}\n </ix-filter-chip>\n ))\n : ''}\n <div class=\"trigger\">\n <input\n data-testid=\"input\"\n disabled={this.disabled}\n readOnly={this.readonly}\n type=\"text\"\n class={{\n 'allow-clear': this.allowClear && !!this.value?.length,\n }}\n placeholder={this.placeholderValue()}\n value={this.inputValue}\n ref={(ref) => (this.inputRef = ref)}\n onBlur={(e) => this.onInputBlur(e)}\n onInput={() => this.filterItemsWithTypeahead()}\n />\n {this.allowClear &&\n (this.value?.length \|\| this.inputFilterText) ? (\n <ix-icon-button\n class=\"clear\"\n icon=\"clear\"\n ghost\n oval\n size=\"16\"\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n this.clear();\n }}\n />\n ) : null}\n {this.disabled \|\| this.readonly ? null : (\n <div\n class=\"chevron-down-container\"\n ref={(ref) => {\n if (this.editable) this.dropdownWrapperRef = ref;\n }}\n >\n <ix-icon class=\"chevron\" name=\"chevron-down-small\" />\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n <ix-dropdown\n ref={(ref) => (this.dropdownRef = ref)}\n show={this.dropdownShow}\n closeBehavior={this.isMultipleMode ? 'outside' : 'both'}\n class={{\n 'd-none': this.disabled \|\| this.readonly,\n }}\n anchor={this.dropdownAnchor}\n trigger={this.dropdownWrapperRef}\n onShowChanged={(e) => this.dropdownVisibilityChanged(e)}\n placement=\"bottom-start\"\n overwriteDropdownStyle={async () => {\n return {\n minWidth: `${this.hostElement.clientWidth}px`,\n };\n }}\n >\n <div\n class={{\n 'select-list-header': true,\n hidden: this.hideListHeader \|\| this.isDropdownEmpty,\n }}\n title={this.i18nSelectListHeader}\n >\n {this.i18nSelectListHeader}\n </div>\n <slot></slot>\n <div ref={(ref) => (this.addItemRef = ref)} class=\"d-contents\"></div>\n {this.isAddItemVisible() ? (\n <ix-dropdown-item\n data-testid=\"add-item\"\n icon=\"plus\"\n class={{\n 'add-item': true,\n }}\n label={this.inputFilterText}\n onItemClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n this.emitAddItem(this.inputFilterText);\n }}\n ></ix-dropdown-item>\n ) : null}\n {this.isDropdownEmpty && !this.editable ? (\n <div class=\"select-list-header\">{this.i18nNoMatches}</div>\n ) : (\n ''\n )}\n </ix-dropdown>\n </Host>\n );\n }\n}\n"]}