@six-group/ui-library 0.0.0-insider.a358260 → 0.0.0-insider.b8b84f6

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

@@ -1,6 +1,6 @@
-import { h } from '@stencil/core';
-import { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';
-import { EventListeners } from '../../utils/event-listeners';
+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
@@ -11,7 +11,9 @@ export class SixSearchField {
   constructor() {
     this.eventListeners = new EventListeners();
     this.handleInputChange = () => {
-      this.searchFieldChange.emit({ value: this.inputElement.value });
+      if (this.inputElement != null) {
+        this.searchFieldChange.emit({ value: this.inputElement.value });
+      }
     };
     this.placeholder = undefined;
     this.debounce = DEFAULT_DEBOUNCE_FAST;
@@ -20,14 +22,17 @@ export class SixSearchField {
     this.clearable = false;
   }
   handleValueChange() {
-    if (this.inputElement) {
+    if (this.inputElement != null) {
       this.inputElement.value = this.value;
     }
   }
   componentDidLoad() {
+    if (this.inputElement == null)
+      return;
     this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));
     this.eventListeners.add(this.inputElement, 'keydown', (event) => {
-      if (event.key === 'Enter') {
+      const keyboardEvent = event;
+      if (keyboardEvent.key === 'Enter') {
         // emit immediately
         this.handleInputChange();
       }
@@ -58,11 +63,11 @@ export class SixSearchField {
         "mutable": false,
         "complexType": {
           "original": "string",
-          "resolved": "string",
+          "resolved": "string | undefined",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "The input's placeholder text."
@@ -161,7 +166,8 @@ export class SixSearchField {
           "references": {
             "SixSearchFieldChangePayload": {
               "location": "local",
-              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-search-field/six-search-field.tsx"
+              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-search-field/six-search-field.tsx",
+              "id": "src/components/six-search-field/six-search-field.tsx::SixSearchFieldChangePayload"
             }
           }
         }

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

@@ -1 +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"]}
+{"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;;IAqBjB,mBAAc,GAAG,IAAI,cAAc,EAAE,CAAC;IAEtC,sBAAiB,GAAG,GAAG,EAAE;MAC/B,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;QAC7B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,CAAC;OACjE;IACH,CAAC,CAAC;;oBAtBkC,qBAAqB;oBAGrB,KAAK;iBAGR,EAAE;qBAGf,KAAK;;EAgBzB,iBAAiB;IACf,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;MAC7B,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;KACtC;EACH,CAAC;EAED,gBAAgB;IACd,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI;MAAE,OAAO;IAEtC,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,KAAY,EAAE,EAAE;MACrE,MAAM,aAAa,GAAG,KAAsB,CAAC;MAC7C,IAAI,aAAa,CAAC,GAAG,KAAK,OAAO,EAAE;QACjC,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  private inputElement?: HTMLSixInputElement;\n\n  private eventListeners = new EventListeners();\n\n  private handleInputChange = () => {\n    if (this.inputElement != null) {\n      this.searchFieldChange.emit({ value: this.inputElement.value });\n    }\n  };\n\n  @Watch('value')\n  handleValueChange() {\n    if (this.inputElement != null) {\n      this.inputElement.value = this.value;\n    }\n  }\n\n  componentDidLoad() {\n    if (this.inputElement == null) return;\n\n    this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));\n    this.eventListeners.add(this.inputElement, 'keydown', (event: Event) => {\n      const keyboardEvent = event as KeyboardEvent;\n      if (keyboardEvent.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-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.css

@@ -104,7 +104,6 @@
   background-color: var(--six-input-background-color);
   border: solid var(--six-border-width) var(--six-input-border-color);
   vertical-align: middle;
-  overflow: hidden;
   transition: var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;
   cursor: pointer;
 }
@@ -169,13 +168,17 @@
   -ms-overflow-style: none;
   overflow-x: auto;
   overflow-y: hidden;
-  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 .select__label::-webkit-scrollbar {
   width: 0;
   height: 0;
 }
 
+.select__label--single {
+  white-space: nowrap;
+}
+
 .select__clear {
   flex-shrink: 0;
   flex-grow: 0;
@@ -202,7 +205,7 @@
 }
 
 .select__tags {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   flex-wrap: wrap;
   justify-content: left;
@@ -250,8 +253,6 @@
 }
 .select--small .select__tags six-tag {
   padding-top: 2px;
-}
-.select--small .select__tags six-tag:not(:last-of-type) {
   margin-right: var(--six-spacing-xx-small);
 }
 .select--small.select--has-tags .select__label {
@@ -281,8 +282,6 @@
 }
 .select--medium .select__tags six-tag {
   padding-top: 3px;
-}
-.select--medium .select__tags six-tag:not(:last-of-type) {
   margin-right: var(--six-spacing-xx-small);
 }
 .select--medium.select--has-tags .select__label {
@@ -312,8 +311,6 @@
 }
 .select--large .select__tags six-tag {
   padding-top: 4px;
-}
-.select--large .select__tags six-tag:not(:last-of-type) {
   margin-right: var(--six-spacing-xx-small);
 }
 .select--large.select--has-tags .select__label {