genesys-spark-components 3.30.0 → 3.31.0

package/dist/collection/components/stable/gux-advanced-dropdown/dropdown-option/gux-dropdown-option.js

@@ -1,4 +1,4 @@
-import { Component, Element, Event, h, Method, Prop, State } from '@stencil/core';
+import { h } from '@stencil/core';
 // RegExp escape string from http://stackoverflow.com/a/3561711/23528
 const escapeRegexStr = /[-/\\^$*+?.()|[\]{}]/g;
 function escapeRegex(input) {
@@ -62,170 +62,179 @@ export class GuxDropdownOption {
     const preface = this.text.substring(0, this.highlightIndex);
     const actualHighlight = this.text.substring(this.highlightIndex, this.highlightIndex + this.highlight.length);
     const suffix = this.text.substring(preface.length + this.highlight.length);
-    return (h("span", null,
-      preface,
-      h("strong", null, actualHighlight),
-      suffix));
+    return (h("span", null, preface, h("strong", null, actualHighlight), suffix));
   }
   onItemClicked() {
     this.selected = true;
     this.selectedChanged.emit(this.value);
   }
   static get is() { return "gux-dropdown-option"; }
-  static get originalStyleUrls() { return {
-    "$": ["gux-dropdown-option.less"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["gux-dropdown-option.css"]
-  }; }
-  static get properties() { return {
-    "value": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The content of this attribute represents the value to be submitted on 'input' changes,\nshould this option be selected. If this attribute is omitted, the value is taken from\nthe text content of the option element."
-      },
-      "attribute": "value",
-      "reflect": false
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If this Boolean attribute is set, this option is not checkable. It won't receive any\nbrowsing events, like mouse clicks or focus-related ones."
-      },
-      "attribute": "disabled",
-      "reflect": false
-    },
-    "filtered": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If this Boolean attribute is set, the option is not visible to the select control.\nThis does not mean that it clears the selection if it was previously selected.\n\nShould only be used by internal users."
-      },
-      "attribute": "filtered",
-      "reflect": true
-    },
-    "selected": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If present, this Boolean attribute indicates that the option is currently selected."
-      },
-      "attribute": "selected",
-      "reflect": true
-    },
-    "text": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["gux-dropdown-option.less"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gux-dropdown-option.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The content of this attribute represents the value to be submitted on 'input' changes,\nshould this option be selected. If this attribute is omitted, the value is taken from\nthe text content of the option element."
+        },
+        "attribute": "value",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If this Boolean attribute is set, this option is not checkable. It won't receive any\nbrowsing events, like mouse clicks or focus-related ones."
+        },
+        "attribute": "disabled",
+        "reflect": false
       },
-      "attribute": "text",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "highlight": {}
-  }; }
-  static get events() { return [{
-      "method": "selectedChanged",
-      "name": "selectedChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Occurs when the item has been selected."
+      "filtered": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If this Boolean attribute is set, the option is not visible to the select control.\nThis does not mean that it clears the selection if it was previously selected.\n\nShould only be used by internal users."
+        },
+        "attribute": "filtered",
+        "reflect": true
       },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "getDisplayedValue": {
-      "complexType": {
-        "signature": "() => Promise<string>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "selected": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If present, this Boolean attribute indicates that the option is currently selected."
         },
-        "return": "Promise<string>"
+        "attribute": "selected",
+        "reflect": true
       },
-      "docs": {
-        "text": "Gets the value rendered by the drop down item.",
-        "tags": []
+      "text": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "text",
+        "reflect": false
       }
-    },
-    "shouldFilter": {
-      "complexType": {
-        "signature": "(searchInput: string) => Promise<boolean>",
-        "parameters": [{
-            "tags": [{
-                "name": "param",
-                "text": "searchInput The input string being searched for."
-              }],
-            "text": "The input string being searched for."
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+    };
+  }
+  static get states() {
+    return {
+      "highlight": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "selectedChanged",
+        "name": "selectedChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Occurs when the item has been selected."
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "getDisplayedValue": {
+        "complexType": {
+          "signature": "() => Promise<string>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<string>"
         },
-        "return": "Promise<boolean>"
+        "docs": {
+          "text": "Gets the value rendered by the drop down item.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Determines if the search input matches this option.",
-        "tags": [{
-            "name": "param",
-            "text": "searchInput The input string being searched for."
-          }]
+      "shouldFilter": {
+        "complexType": {
+          "signature": "(searchInput: string) => Promise<boolean>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "searchInput The input string being searched for."
+                }],
+              "text": "The input string being searched for."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "Determines if the search input matches this option.",
+          "tags": [{
+              "name": "param",
+              "text": "searchInput The input string being searched for."
+            }]
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "root"; }
 }

package/dist/collection/components/stable/gux-advanced-dropdown/gux-advanced-dropdown.css

@@ -1,21 +1,16 @@
 :host {
   color: #2e394c;
 }
-div.gux-dropdown {
-  position: relative;
+gux-popup {
+  display: block;
   margin: 4px 0;
 }
-div.gux-dropdown.gux-disabled {
-  pointer-events: none;
-  cursor: default;
-  opacity: 0.5;
-}
-div.gux-dropdown .gux-select-field {
+gux-popup .gux-select-field {
   position: relative;
   width: 100%;
   height: 32px;
 }
-div.gux-dropdown .gux-select-field a.gux-select-input {
+gux-popup .gux-select-field a.gux-select-input {
   position: absolute;
   top: 0;
   right: 0;
@@ -33,18 +28,18 @@ div.gux-dropdown .gux-select-field a.gux-select-input {
   border-radius: 4px;
   box-shadow: inset 0 0 4px rgba(32, 41, 55, 0.16);
 }
-div.gux-dropdown .gux-select-field a.gux-select-input .gux-select-placeholder,
-div.gux-dropdown .gux-select-field a.gux-select-input .gux-select-value {
+gux-popup .gux-select-field a.gux-select-input .gux-select-placeholder,
+gux-popup .gux-select-field a.gux-select-input .gux-select-value {
   line-height: 20px;
 }
-div.gux-dropdown .gux-select-field a.gux-select-input .gux-select-placeholder {
+gux-popup .gux-select-field a.gux-select-input .gux-select-placeholder {
   color: #596373;
 }
-div.gux-dropdown .gux-select-field a.gux-select-input:focus {
+gux-popup .gux-select-field a.gux-select-input:focus {
   outline: none;
   box-shadow: 0 0 0 3px rgba(117, 168, 255, 0.5);
 }
-div.gux-dropdown .gux-select-field .gux-icon-wrapper {
+gux-popup .gux-select-field .gux-icon-wrapper {
   position: absolute;
   top: 1px;
   right: 8px;
@@ -54,28 +49,15 @@ div.gux-dropdown .gux-select-field .gux-icon-wrapper {
   overflow: hidden;
   cursor: pointer;
 }
-div.gux-dropdown .gux-select-field .gux-icon-wrapper gux-icon {
+gux-popup .gux-select-field .gux-icon-wrapper gux-icon {
   width: 16px;
   height: 16px;
   color: #596373;
 }
-div.gux-dropdown .gux-select-field:hover .gux-icon-wrapper gux-icon {
+gux-popup .gux-select-field:hover .gux-icon-wrapper gux-icon {
   color: #2e394c;
 }
-div.gux-dropdown.gux-active .gux-select-field .gux-select-input {
-  border: 1px solid #2a60c8;
-  outline: none;
-  box-shadow: 0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff;
-}
-div.gux-dropdown.gux-active .gux-select-field .gux-select-input:focus {
-  outline: none;
-  box-shadow: 0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff;
-}
-div.gux-dropdown .gux-advanced-dropdown-menu {
-  position: absolute;
-  top: 36px;
-  z-index: var(--gux-zindex-popup, 1);
-  display: none;
+gux-popup .gux-advanced-dropdown-menu {
   width: 100%;
   background: #fdfdfd;
   border: 1px solid #b4bccb;
@@ -83,19 +65,16 @@ div.gux-dropdown .gux-advanced-dropdown-menu {
   box-shadow: 0 0 2px 0 rgba(32, 41, 55, 0.24);
   box-shadow: 0 2px 4px rgba(32, 41, 55, 0.24);
 }
-div.gux-dropdown .gux-advanced-dropdown-menu .gux-dropdown-menu-container gux-form-field-search {
+gux-popup .gux-advanced-dropdown-menu .gux-dropdown-menu-container gux-form-field-search {
   margin: 8px 16px;
 }
-div.gux-dropdown .gux-advanced-dropdown-menu .gux-dropdown-menu-container gux-form-field-search input::-webkit-search-cancel-button,
-div.gux-dropdown .gux-advanced-dropdown-menu .gux-dropdown-menu-container gux-form-field-search input::-webkit-search-results-button,
-div.gux-dropdown .gux-advanced-dropdown-menu .gux-dropdown-menu-container gux-form-field-search input::-webkit-calendar-picker-indicator {
+gux-popup .gux-advanced-dropdown-menu .gux-dropdown-menu-container gux-form-field-search input::-webkit-search-cancel-button,
+gux-popup .gux-advanced-dropdown-menu .gux-dropdown-menu-container gux-form-field-search input::-webkit-search-results-button,
+gux-popup .gux-advanced-dropdown-menu .gux-dropdown-menu-container gux-form-field-search input::-webkit-calendar-picker-indicator {
   display: none;
   -webkit-appearance: none;
 }
-div.gux-dropdown .gux-advanced-dropdown-menu.gux-opened {
-  display: block;
-}
-div.gux-dropdown .gux-dropdown-options {
+gux-popup .gux-dropdown-options {
   padding: 8px 0;
   margin: 0;
   overflow-y: auto;