@six-group/ui-library 0.0.0-insider.d16ec8e → 0.0.0-insider.db2b416

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

@@ -0,0 +1,22 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixSearchField } from "../six-search-field";
+describe('six-search-field', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [SixSearchField],
+      html: `<six-search-field clearable></six-search-field>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-search-field clearable="" debounce="300" value="" clearable>
+        <mock:shadow-root>
+          <div class="search-box">
+            <six-input clearable="" value="">
+             <six-icon class="search-box__icon" size="small" slot="prefix">search</six-icon></six-input>
+            <slot></slot>
+          </div>
+        </mock:shadow-root>
+      </six-search-field>
+    `);
+  });
+});
+//# sourceMappingURL=six-search-field.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-search-field.spec.js","sourceRoot":"","sources":["../../../../src/components/six-search-field/test/six-search-field.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;EAChC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,iDAAiD;KACxD,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;KAU7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixSearchField } from '../six-search-field';\n\ndescribe('six-search-field', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixSearchField],\n      html: `<six-search-field clearable></six-search-field>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-search-field clearable=\"\" debounce=\"300\" value=\"\" clearable>\n        <mock:shadow-root>\n          <div class=\"search-box\">\n            <six-input clearable=\"\" value=\"\">\n             <six-icon class=\"search-box__icon\" size=\"small\" slot=\"prefix\">search</six-icon></six-input>\n            <slot></slot>\n          </div>\n        </mock:shadow-root>\n      </six-search-field>\n    `);\n  });\n});\n"]}

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

@@ -1,9 +1,9 @@
-import { h } from '@stencil/core';
-import { getTextContent, hasSlot } from '../../utils/slot';
-import FormControl from '../../functional-components/form-control/form-control';
-import { EventListeners } from '../../utils/event-listeners';
-import { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';
-import { isValueEmpty } from './util';
+import { h } from "@stencil/core";
+import { getTextContent, hasSlot } from "../../utils/slot";
+import FormControl from "../../functional-components/form-control/form-control";
+import { EventListeners } from "../../utils/event-listeners";
+import { debounce, DEFAULT_DEBOUNCE_FAST } from "../../utils/execution-control";
+import { isValueEmpty } from "./util";
 let id = 0;
 /**
  * @since 1.0
@@ -33,8 +33,6 @@ export class SixSelect {
     this.helpTextId = `select-help-text-${id}`;
     this.errorTextId = `select-error-text-${id}`;
     this.touched = false;
-    this.customErrorText = '';
-    this.customValidation = false;
     this.eventListeners = new EventListeners();
     this.handleBlur = () => {
       this.hasFocus = false;
@@ -44,9 +42,6 @@ export class SixSelect {
       this.hasFocus = true;
       this.sixFocus.emit();
     };
-    this.handleInvalid = () => {
-      this.invalid = true;
-    };
     this.handleClearClick = (event) => {
       event.stopPropagation();
       this.clearValues();
@@ -146,7 +141,6 @@ export class SixSelect {
     };
     this.handleSlotChange = () => {
       this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
-      this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
       this.hasLabelSlot = hasSlot(this.host, 'label');
       this.syncItemsFromValue();
     };
@@ -165,7 +159,6 @@ export class SixSelect {
     };
     this.hasFocus = false;
     this.hasHelpTextSlot = false;
-    this.hasErrorTextSlot = false;
     this.hasLabelSlot = false;
     this.isOpen = false;
     this.displayLabel = '';
@@ -181,21 +174,19 @@ export class SixSelect {
     this.hoist = false;
     this.value = '';
     this.pill = false;
-    this.label = '';
     this.helpText = '';
-    this.errorText = '';
     this.required = false;
     this.clearable = false;
+    this.label = '';
+    this.errorText = '';
     this.invalid = false;
     this.line = false;
-    this.errorOnBlur = false;
     this.filter = false;
     this.asyncFilter = false;
     this.autocomplete = false;
     this.inputDebounce = DEFAULT_DEBOUNCE_FAST;
     this.options = null;
     this.virtualScroll = false;
-    this.defaultValue = this.multiple ? [] : '';
   }
   handleDisabledChange() {
     var _a;
@@ -212,14 +203,14 @@ export class SixSelect {
     this.value = this.multiple ? value : value[0] || '';
     this.syncItemsFromValue();
   }
-  handleValueChange() {
+  async handleValueChange() {
     if (this.multiple && !Array.isArray(this.value)) {
       this.value = [];
     }
     if (!this.multiple && typeof this.value !== 'string') {
       this.value = '';
     }
-    this.syncItemsFromValue();
+    await this.syncItemsFromValue();
     if (this.input) {
       this.sixChange.emit({ value: this.value, isSelected: true });
     }
@@ -230,6 +221,9 @@ export class SixSelect {
       console.error('Options must be defined when using virtual scrolling');
     }
     (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
+    this.eventListeners.forward('six-select-change', 'change', this.host);
+    this.eventListeners.forward('six-select-blur', 'blur', this.host);
+    this.eventListeners.forward('six-select-focus', 'focus', this.host);
   }
   componentWillLoad() {
     this.handleSlotChange();
@@ -244,12 +238,6 @@ export class SixSelect {
     this.resizeObserver = new ResizeObserver(() => this.resizeMenu());
     // We need to do an initial sync after the component has rendered, so this will suppress the re-render warning
     requestAnimationFrame(() => this.syncItemsFromValue());
-    this.eventListeners.add(this.input, 'invalid', async (event) => {
-      if (this.customValidation || (!this.hasErrorTextSlot && this.errorText == null && this.customErrorText == null)) {
-        this.customErrorText = await input.getValidationMessage();
-      }
-      event.preventDefault();
-    });
     this.eventListeners.add(input, 'six-input-input', debounce((event) => {
       const enteredValue = input.value;
       this.clearValues();
@@ -263,34 +251,11 @@ export class SixSelect {
     (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
     this.eventListeners.removeAll();
   }
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  async reportValidity() {
-    var _a;
-    return (_a = this.input) === null || _a === void 0 ? void 0 : _a.reportValidity();
-  }
-  /** Checks for validity. */
-  async checkValidity() {
+  /** Sets focus on the select. */
+  async setFocus(options) {
     var _a;
-    return (_a = this.input) === null || _a === void 0 ? void 0 : _a.isValid();
-  }
-  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
-  async setCustomValidity(message) {
-    if (this.input == null)
-      return;
-    this.customErrorText = '';
-    this.customValidation = message !== '';
-    await this.input.setCustomValidity(message);
-    this.invalid = !(await this.input.checkValidity());
-  }
-  /** Resets the formcontrol */
-  async reset() {
-    if (this.input == null)
-      return;
-    this.value = this.defaultValue;
-    this.customErrorText = '';
-    this.customValidation = false;
-    await this.input.setCustomValidity('');
-    this.invalid = false;
+    this.hasFocus = true;
+    (_a = this.box) === null || _a === void 0 ? void 0 : _a.focus(options);
   }
   getItemLabel(item) {
     var _a, _b;
@@ -318,8 +283,7 @@ export class SixSelect {
     return values.map(String);
   }
   clearValues() {
-    var _a;
-    this.value = (_a = this.defaultValue) !== null && _a !== void 0 ? _a : (this.multiple ? [] : '');
+    this.value = this.multiple ? [] : '';
     this.syncItemsFromValue();
   }
   resizeMenu() {
@@ -364,7 +328,6 @@ export class SixSelect {
     }
     if (this.touched && this.input != null) {
       this.input.value = Array.isArray(this.value) ? this.value.join(',') : this.value;
-      this.invalid = !(await this.input.checkValidity());
     }
   }
   extractLabelForSelectedItem(value, items) {
@@ -388,13 +351,10 @@ export class SixSelect {
         ? checkedValues[0]
         : '';
   }
-  displayError() {
-    return this.invalid && (!this.errorOnBlur || (!this.hasFocus && !this.isOpen));
-  }
   render() {
     var _a;
     const hasSelection = this.hasSelection();
-    return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.customErrorText != null && this.customErrorText !== '' ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, onLabelClick: this.handleLabelClick, disabled: this.disabled, required: this.required, displayError: this.displayError() }, h("six-dropdown", { part: "base", ref: (el) => (this.dropdown = el), hoist: this.hoist, closeOnSelect: !this.multiple, containingElement: this.host, disableHideOnEnterAndSpace: this.autocomplete, class: {
+    return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, size: this.size, onLabelClick: this.handleLabelClick, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("six-dropdown", { part: "base", ref: (el) => (this.dropdown = el), hoist: this.hoist, closeOnSelect: !this.multiple, containingElement: this.host, disableHideOnEnterAndSpace: this.autocomplete, class: {
         select: true,
         'select--open': this.isOpen,
         'select--empty': ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === 0,
@@ -416,7 +376,7 @@ export class SixSelect {
       }, role: "combobox", "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-haspopup": "true", "aria-expanded": this.isOpen ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown }, h("span", { class: "select__label" }, this.displayTags.length > 0 ? (h("span", { part: "tags", class: "select__tags" }, this.displayTags)) : (this.displayLabel || this.placeholder)), this.clearable && hasSelection && (h("six-icon-button", { exportparts: "base:clear-button", class: "select__clear", name: "clear", size: "small", onClick: this.handleClearClick, tabindex: "-1" })), this.hasMenuItems() && (h("span", { part: "icon", class: "select__icon" }, h("six-icon", { size: "medium" }, "expand_more"))), h("six-input", { ref: (el) => (this.input = el), class: {
         select__input: true,
         'select__hidden-select': !this.autocomplete,
-      }, "aria-hidden": "true", required: this.required, onInvalid: this.handleInvalid, onFocus: this.handleFocus, clearable: this.clearable, placeholder: this.placeholder, pill: this.pill, disabled: this.disabled, size: this.size, tabIndex: -1 })), h("six-menu", { ref: (el) => (this.menu = el), part: "menu", class: {
+      }, "aria-hidden": "true", required: this.required, onFocus: this.handleFocus, clearable: this.clearable, placeholder: this.placeholder, pill: this.pill, disabled: this.disabled, size: this.size, tabIndex: -1 })), h("six-menu", { ref: (el) => (this.menu = el), part: "menu", class: {
         select__menu: true,
         'select__menu--filtered': this.filter || this.asyncFilter,
         'select__menu--hidden': !this.hasMenuItems(),
@@ -636,24 +596,6 @@ export class SixSelect {
         "reflect": false,
         "defaultValue": "false"
       },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The select's label. Alternatively, you can use the label slot."
-        },
-        "attribute": "label",
-        "reflect": false,
-        "defaultValue": "''"
-      },
       "helpText": {
         "type": "string",
         "mutable": false,
@@ -672,25 +614,25 @@ export class SixSelect {
         "reflect": false,
         "defaultValue": "''"
       },
-      "errorText": {
-        "type": "string",
+      "required": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The select's error text. Alternatively, you can use the error-text slot."
+          "text": "Set to true to show an asterisk beneath the label."
         },
-        "attribute": "error-text",
+        "attribute": "required",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "false"
       },
-      "required": {
+      "clearable": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -702,49 +644,49 @@ export class SixSelect {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The select's required attribute."
+          "text": "Set to true to add a clear button when the select is populated."
         },
-        "attribute": "required",
+        "attribute": "clearable",
         "reflect": false,
         "defaultValue": "false"
       },
-      "clearable": {
-        "type": "boolean",
+      "label": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set to true to add a clear button when the select is populated."
+          "text": "The label text."
         },
-        "attribute": "clearable",
+        "attribute": "label",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "''"
       },
-      "invalid": {
-        "type": "boolean",
-        "mutable": true,
+      "errorText": {
+        "type": "string",
+        "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "This will be true when the control is in an invalid state. Validity is determined by the `required` prop."
+          "text": "The error message shown, if `invalid` is set to true."
         },
-        "attribute": "invalid",
+        "attribute": "error-text",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "''"
       },
-      "line": {
+      "invalid": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -756,13 +698,13 @@ export class SixSelect {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set to render as line"
+          "text": "If this property is set to true and an error message is provided by `errorText`, the error message is displayed."
         },
-        "attribute": "line",
-        "reflect": false,
+        "attribute": "invalid",
+        "reflect": true,
         "defaultValue": "false"
       },
-      "errorOnBlur": {
+      "line": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -774,9 +716,9 @@ export class SixSelect {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set to display the error text on blur and not when typing"
+          "text": "Set to render as line"
         },
-        "attribute": "error-on-blur",
+        "attribute": "line",
         "reflect": false,
         "defaultValue": "false"
       },
@@ -861,7 +803,8 @@ export class SixSelect {
           "references": {
             "SixMenuItemData": {
               "location": "import",
-              "path": "../six-menu/six-menu"
+              "path": "../six-menu/six-menu",
+              "id": "src/components/six-menu/six-menu.tsx::SixMenuItemData"
             }
           }
         },
@@ -890,24 +833,6 @@ export class SixSelect {
         "attribute": "virtual-scroll",
         "reflect": false,
         "defaultValue": "false"
-      },
-      "defaultValue": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | string[]",
-          "resolved": "string | string[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The default value the select will be reverted to when reset is executed"
-        },
-        "attribute": "default-value",
-        "reflect": false,
-        "defaultValue": "this.multiple ? [] : ''"
       }
     };
   }
@@ -915,7 +840,6 @@ export class SixSelect {
     return {
       "hasFocus": {},
       "hasHelpTextSlot": {},
-      "hasErrorTextSlot": {},
       "hasLabelSlot": {},
       "isOpen": {},
       "displayLabel": {},
@@ -939,7 +863,8 @@ export class SixSelect {
           "references": {
             "SixSelectChangePayload": {
               "location": "local",
-              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-select/six-select.tsx"
+              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-select/six-select.tsx",
+              "id": "src/components/six-select/six-select.tsx::SixSelectChangePayload"
             }
           }
         }
@@ -959,7 +884,8 @@ export class SixSelect {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -979,7 +905,8 @@ export class SixSelect {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -987,70 +914,27 @@ export class SixSelect {
   }
   static get methods() {
     return {
-      "reportValidity": {
+      "setFocus": {
         "complexType": {
-          "signature": "() => Promise<boolean | undefined>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<boolean | undefined>"
-        },
-        "docs": {
-          "text": "Checks for validity and shows the browser's validation message if the control is invalid.",
-          "tags": []
-        }
-      },
-      "checkValidity": {
-        "complexType": {
-          "signature": "() => Promise<boolean | undefined>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<boolean | undefined>"
-        },
-        "docs": {
-          "text": "Checks for validity.",
-          "tags": []
-        }
-      },
-      "setCustomValidity": {
-        "complexType": {
-          "signature": "(message: string) => Promise<void>",
+          "signature": "(options?: FocusOptions) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
             }],
           "references": {
             "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets a custom validation message. If `message` is not empty, the field will be considered invalid.",
-          "tags": []
-        }
-      },
-      "reset": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
+            },
+            "FocusOptions": {
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Resets the formcontrol",
+          "text": "Sets focus on the select.",
           "tags": []
         }
       }