@six-group/ui-library 3.0.0-beta.1.7 → 4.0.0-beta.0

package/dist/collection/components/six-search-field/six-search-field.js

@@ -1,171 +1,177 @@
-import { Component, Event, h, Prop, Watch } from '@stencil/core';
-import { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';
-import { EventListeners } from '../../utils/event-listeners';
-/**
- * @since 1.0
- * @status stable
- *
- * @slot - Used to define the results below the search component.
- */
-export class SixSearchField {
-  constructor() {
-    /** Debounce time in milliseconds, default is 300 ms */
-    this.debounce = DEFAULT_DEBOUNCE_FAST;
-    /** Set to true to disable the input. */
-    this.disabled = false;
-    /** The input's value attribute. */
-    this.value = '';
-    /** Set to true to add a clear button when the input is populated. */
-    this.clearable = false;
-    this.eventListeners = new EventListeners();
-    this.handleInputChange = () => {
-      this.searchFieldChange.emit({ value: this.inputElement.value });
-    };
-  }
-  handleValueChange() {
-    if (this.inputElement) {
-      this.inputElement.value = this.value;
-    }
-  }
-  componentDidLoad() {
-    this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));
-    this.eventListeners.add(this.inputElement, 'keydown', (event) => {
-      if (event.key === 'Enter') {
-        // emit immediately
-        this.handleInputChange();
-      }
-    });
-  }
-  disconnectedCallback() {
-    this.eventListeners.removeAll();
-  }
-  render() {
-    return (h("div", { class: "search-box" },
-      h("six-input", { ref: (el) => (this.inputElement = el), placeholder: this.placeholder, value: this.value, disabled: this.disabled, clearable: this.clearable },
-        h("six-icon", { class: "search-box__icon", slot: "prefix", size: "small", onClick: this.handleInputChange }, "search")),
-      h("slot", null)));
-  }
-  static get is() { return "six-search-field"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["six-search-field.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["six-search-field.css"]
-  }; }
-  static get properties() { return {
-    "placeholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The input's placeholder text."
-      },
-      "attribute": "placeholder",
-      "reflect": false
-    },
-    "debounce": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Debounce time in milliseconds, default is 300 ms"
-      },
-      "attribute": "debounce",
-      "reflect": true,
-      "defaultValue": "DEFAULT_DEBOUNCE_FAST"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to disable the input."
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "value": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The input's value attribute."
-      },
-      "attribute": "value",
-      "reflect": true,
-      "defaultValue": "''"
-    },
-    "clearable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to add a clear button when the input is populated."
-      },
-      "attribute": "clearable",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get events() { return [{
-      "method": "searchFieldChange",
-      "name": "six-search-field-change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when a search is triggered"
-      },
-      "complexType": {
-        "original": "SixSearchFieldChangePayload",
-        "resolved": "SixSearchFieldChangePayload",
-        "references": {
-          "SixSearchFieldChangePayload": {
-            "location": "local"
-          }
-        }
-      }
-    }]; }
-  static get watchers() { return [{
-      "propName": "value",
-      "methodName": "handleValueChange"
-    }]; }
-}
+import { h } from '@stencil/core';
+import { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';
+import { EventListeners } from '../../utils/event-listeners';
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * @slot - Used to define the results below the search component.
+ */
+export class SixSearchField {
+  constructor() {
+    this.eventListeners = new EventListeners();
+    this.handleInputChange = () => {
+      this.searchFieldChange.emit({ value: this.inputElement.value });
+    };
+    this.placeholder = undefined;
+    this.debounce = DEFAULT_DEBOUNCE_FAST;
+    this.disabled = false;
+    this.value = '';
+    this.clearable = false;
+  }
+  handleValueChange() {
+    if (this.inputElement) {
+      this.inputElement.value = this.value;
+    }
+  }
+  componentDidLoad() {
+    this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));
+    this.eventListeners.add(this.inputElement, 'keydown', (event) => {
+      if (event.key === 'Enter') {
+        // emit immediately
+        this.handleInputChange();
+      }
+    });
+  }
+  disconnectedCallback() {
+    this.eventListeners.removeAll();
+  }
+  render() {
+    return (h("div", { class: "search-box" }, h("six-input", { ref: (el) => (this.inputElement = el), placeholder: this.placeholder, value: this.value, disabled: this.disabled, clearable: this.clearable }, h("six-icon", { class: "search-box__icon", slot: "prefix", size: "small", onClick: this.handleInputChange }, "search")), h("slot", null)));
+  }
+  static get is() { return "six-search-field"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["six-search-field.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["six-search-field.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The input's placeholder text."
+        },
+        "attribute": "placeholder",
+        "reflect": false
+      },
+      "debounce": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Debounce time in milliseconds, default is 300 ms"
+        },
+        "attribute": "debounce",
+        "reflect": true,
+        "defaultValue": "DEFAULT_DEBOUNCE_FAST"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true to disable the input."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The input's value attribute."
+        },
+        "attribute": "value",
+        "reflect": true,
+        "defaultValue": "''"
+      },
+      "clearable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true to add a clear button when the input is populated."
+        },
+        "attribute": "clearable",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "searchFieldChange",
+        "name": "six-search-field-change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when a search is triggered"
+        },
+        "complexType": {
+          "original": "SixSearchFieldChangePayload",
+          "resolved": "SixSearchFieldChangePayload",
+          "references": {
+            "SixSearchFieldChangePayload": {
+              "location": "local",
+              "path": "/home/runner/work/six-webcomponents/six-webcomponents/packages/ui-library/src/components/six-search-field/six-search-field.tsx"
+            }
+          }
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "handleValueChange"
+      }];
+  }
+}
+//# sourceMappingURL=six-search-field.js.map

package/dist/collection/components/six-search-field/six-search-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-search-field.js","sourceRoot":"","sources":["../../../src/components/six-search-field/six-search-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAM7D;;;;;GAKG;AAOH,MAAM,OAAO,cAAc;;IAqBhB,mBAAc,GAAG,IAAI,cAAc,EAAE,CAAC;IAE/C,sBAAiB,GAAG,GAAG,EAAE;MACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,CAAC;IAClE,CAAC,CAAC;;oBApBkC,qBAAqB;oBAGrB,KAAK;iBAGR,EAAE;qBAGf,KAAK;;EAczB,iBAAiB;IACf,IAAI,IAAI,CAAC,YAAY,EAAE;MACrB,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;KACtC;EACH,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,iBAAiB,EAAE,QAAQ,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC/G,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,CAAC,KAAoB,EAAE,EAAE;MAC7E,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;QACzB,mBAAmB;QACnB,IAAI,CAAC,iBAAiB,EAAE,CAAC;OAC1B;IACH,CAAC,CAAC,CAAC;EACL,CAAC;EAED,oBAAoB;IAClB,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC;EAClC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,YAAY;MACrB,iBACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS;QAEzB,gBAAU,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,aAElF,CACD;MACZ,eAAQ,CACJ,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';\nimport { EventListeners } from '../../utils/event-listeners';\n\nexport interface SixSearchFieldChangePayload {\n  value: string;\n}\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the results below the search component.\n */\n\n@Component({\n  tag: 'six-search-field',\n  styleUrl: 'six-search-field.scss',\n  shadow: true,\n})\nexport class SixSearchField {\n  /** The input's placeholder text. */\n  @Prop() placeholder: string;\n\n  /** Debounce time in milliseconds, default is 300 ms */\n  @Prop({ reflect: true }) debounce = DEFAULT_DEBOUNCE_FAST;\n\n  /** Set to true to disable the input. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The input's value attribute. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Set to true to add a clear button when the input is populated. */\n  @Prop() clearable = false;\n\n  /** Emitted when a search is triggered */\n  @Event({ eventName: 'six-search-field-change' }) searchFieldChange: EventEmitter<SixSearchFieldChangePayload>;\n\n  inputElement: HTMLSixInputElement;\n\n  readonly eventListeners = new EventListeners();\n\n  handleInputChange = () => {\n    this.searchFieldChange.emit({ value: this.inputElement.value });\n  };\n\n  @Watch('value')\n  handleValueChange() {\n    if (this.inputElement) {\n      this.inputElement.value = this.value;\n    }\n  }\n\n  componentDidLoad() {\n    this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));\n    this.eventListeners.add(this.inputElement, 'keydown', (event: KeyboardEvent) => {\n      if (event.key === 'Enter') {\n        // emit immediately\n        this.handleInputChange();\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  render() {\n    return (\n      <div class=\"search-box\">\n        <six-input\n          ref={(el) => (this.inputElement = el)}\n          placeholder={this.placeholder}\n          value={this.value}\n          disabled={this.disabled}\n          clearable={this.clearable}\n        >\n          <six-icon class=\"search-box__icon\" slot=\"prefix\" size=\"small\" onClick={this.handleInputChange}>\n            search\n          </six-icon>\n        </six-input>\n        <slot />\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-select/six-select.css

@@ -164,8 +164,7 @@
   flex-grow: 1;
   align-items: center;
   user-select: none;
-  width: 0;
-  /* needed for firefox because due to "white-space: nowrap" the default is set to max-content */
+  width: 0; /* needed for firefox because due to "white-space: nowrap" the default is set to max-content */
   scrollbar-width: none;
   -ms-overflow-style: none;
   overflow-x: auto;