@six-group/ui-library 0.0.0-insider.012ddb2

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-range.spec.js","sourceRoot":"","sources":["../../../../src/components/six-range/test/six-range.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,CAAC,cAAc,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QAElC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE,wCAAwC;SAC/C,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;KAqB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixRange } from '../six-range';\n\ndescribe('six-range', () => {\n  it('renders', async () => {\n    global.ResizeObserver = jest.fn();\n\n    const page = await newSpecPage({\n      components: [SixRange],\n      html: `<six-range tooltip=\"none\"></six-range>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-range tooltip=\"none\">\n       <mock:shadow-root>\n        <div class=\"form-control form-control--medium\" part=\"form-control\">\n         <label aria-hidden=\"true\" class=\"form-control__label\" htmlfor=\"input-1\" id=\"input-label-1\" part=\"label\">\n          <slot name=\"label\"></slot>\n         </label>\n         <div class=\"form-control__input\">\n          <div class=\"range\" part=\"base\">\n           <input class=\"range__control\" max=\"100\" min=\"0\" part=\"input\" step=\"1\" type=\"range\" value=\"0\" style=\"background: -webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) 0%, var(--six-color-web-rock-300) 0%);\">\n          </div>\n         </div>\n         <div aria-hidden=\"true\" class=\"form-control__error-text\" id=\"input-error-text-1\" part=\"error-text\">\n           <slot name=\"error-text\"></slot>\n         </div>\n          <div aria-hidden=\"true\" class=\"form-control__help-text\" id=\"input-help-text-1\" part=\"help-text\">\n           <slot name=\"help-text\"></slot>\n          </div>\n        </div>\n       </mock:shadow-root>\n      </six-range>\n    `);\n  });\n});\n"]}

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

@@ -0,0 +1,48 @@
+:host {
+  display: block;
+  overflow: hidden;
+  height: inherit;
+}
+
+.six-root {
+  display: grid;
+  grid-template: auto 1fr auto/auto 1fr auto;
+  height: 100%;
+}
+.six-root__container--padded {
+  padding: var(--six-spacing-xxx-large);
+}
+.six-root__left-sidebar {
+  height: 100%;
+  overflow: scroll;
+  grid-column: 1/2;
+}
+.six-root__right-sidebar {
+  height: 100%;
+  overflow: scroll;
+  grid-column: 3/4;
+}
+.six-root nav {
+  overflow: hidden;
+}
+
+header {
+  grid-column: 1/4;
+  position: sticky;
+  top: 0;
+  z-index: var(--six-z-index-header);
+  margin-right: 2px;
+}
+
+main {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  grid-column: 2/3;
+  overflow: auto;
+}
+
+footer {
+  grid-column: 1/4;
+}

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

@@ -0,0 +1,99 @@
+import { h } from "@stencil/core";
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * @slot header - Used to define the header component.
+ * @slot main - Used to define the components in the main area.
+ * @slot left-sidebar - Used to define the sidebar on the left side.
+ * @slot right-sidebar - Used to define the sidebar on the right side.
+ * @slot footer - Used to define the footer component.
+ */
+export class SixRoot {
+    constructor() {
+        this.padded = true;
+        this.stage = null;
+        this.version = '';
+    }
+    render() {
+        return (h("host", { class: "six-root" }, h("header", { part: "header" }, this.stage && h("six-stage-indicator", { stage: this.stage }, this.version), h("slot", { name: "header" })), h("nav", { class: "six-root__left-sidebar", part: "left-sidebar" }, h("slot", { name: "left-sidebar" })), h("main", { part: "main" }, h("div", { class: { 'six-root__container': true, 'six-root__container--padded': this.padded }, part: "container" }, h("slot", { name: "main" })), h("div", { class: "six-root__footer" }, h("slot", { name: "footer" }))), h("nav", { class: "six-root__right-sidebar", part: "right-sidebar" }, h("slot", { name: "right-sidebar" }))));
+    }
+    static get is() { return "six-root"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-root.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-root.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "padded": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines whether the content section should be padded"
+                },
+                "attribute": "padded",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "stage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StageType",
+                    "resolved": "\"ACCEPTANCE\" | \"DEV\" | \"ETU\" | \"ITU\" | \"PROD\" | null",
+                    "references": {
+                        "StageType": {
+                            "location": "import",
+                            "path": "../six-stage-indicator/six-stage-indicator",
+                            "id": "src/components/six-stage-indicator/six-stage-indicator.tsx::StageType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the stage of the application"
+                },
+                "attribute": "stage",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "version": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the version of the application"
+                },
+                "attribute": "version",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=six-root.js.map

package/dist/collection/components/six-root/six-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-root.js","sourceRoot":"","sources":["../../../src/components/six-root/six-root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAG5D;;;;;;;;;GASG;AAOH,MAAM,OAAO,OAAO;;sBAKD,IAAI;qBAGM,IAAI;uBAGb,EAAE;;IAEpB,MAAM;QACJ,OAAO,CACL,YAAM,KAAK,EAAC,UAAU;YACpB,cAAQ,IAAI,EAAC,QAAQ;gBAClB,IAAI,CAAC,KAAK,IAAI,2BAAqB,KAAK,EAAE,IAAI,CAAC,KAAK,IAAG,IAAI,CAAC,OAAO,CAAuB;gBAC3F,YAAM,IAAI,EAAC,QAAQ,GAAG,CACf;YACT,WAAK,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,cAAc;gBACrD,YAAM,IAAI,EAAC,cAAc,GAAG,CACxB;YACN,YAAM,IAAI,EAAC,MAAM;gBACf,WAAK,KAAK,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,6BAA6B,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAC,WAAW;oBACvG,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB;gBACN,WAAK,KAAK,EAAC,kBAAkB;oBAC3B,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD;YACP,WAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,eAAe;gBACvD,YAAM,IAAI,EAAC,eAAe,GAAG,CACzB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop } from '@stencil/core';\nimport { StageType } from '../six-stage-indicator/six-stage-indicator';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot header - Used to define the header component.\n * @slot main - Used to define the components in the main area.\n * @slot left-sidebar - Used to define the sidebar on the left side.\n * @slot right-sidebar - Used to define the sidebar on the right side.\n * @slot footer - Used to define the footer component.\n */\n\n@Component({\n  tag: 'six-root',\n  styleUrl: 'six-root.scss',\n  shadow: true,\n})\nexport class SixRoot {\n  @Element() host!: HTMLSixRootElement;\n\n  /** Defines whether the content section should be padded */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() padded = true;\n\n  /** Defines the stage of the application*/\n  @Prop() stage: StageType = null;\n\n  /** Defines the version of the application*/\n  @Prop() version = '';\n\n  render() {\n    return (\n      <host class=\"six-root\">\n        <header part=\"header\">\n          {this.stage && <six-stage-indicator stage={this.stage}>{this.version}</six-stage-indicator>}\n          <slot name=\"header\" />\n        </header>\n        <nav class=\"six-root__left-sidebar\" part=\"left-sidebar\">\n          <slot name=\"left-sidebar\" />\n        </nav>\n        <main part=\"main\">\n          <div class={{ 'six-root__container': true, 'six-root__container--padded': this.padded }} part=\"container\">\n            <slot name=\"main\" />\n          </div>\n          <div class=\"six-root__footer\">\n            <slot name=\"footer\" />\n          </div>\n        </main>\n        <nav class=\"six-root__right-sidebar\" part=\"right-sidebar\">\n          <slot name=\"right-sidebar\" />\n        </nav>\n      </host>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-root/test/six-root.spec.js

@@ -0,0 +1,36 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixRoot } from "../six-root";
+describe('six-root', () => {
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [SixRoot],
+            html: `<six-root></six-root>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <six-root>
+        <mock:shadow-root>
+          <host class="six-root">
+            <header part="header">
+              <slot name="header"></slot>
+            </header>
+            <nav class="six-root__left-sidebar" part="left-sidebar">
+                <slot name="left-sidebar"></slot>
+            </nav>
+            <main part="main">
+              <div class="six-root__container six-root__container--padded" part="container">
+                <slot name="main"></slot>
+              </div>
+              <div class="six-root__footer">
+                <slot name="footer"></slot>
+              </div>
+            </main>
+            <nav class="six-root__right-sidebar" part="right-sidebar">
+              <slot name="right-sidebar"></slot>
+            </nav>
+          </host>
+        </mock:shadow-root>
+      </six-root>
+    `);
+    });
+});
+//# sourceMappingURL=six-root.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-root.spec.js","sourceRoot":"","sources":["../../../../src/components/six-root/test/six-root.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,uBAAuB;SAC9B,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixRoot } from '../six-root';\n\ndescribe('six-root', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixRoot],\n      html: `<six-root></six-root>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <six-root>\n        <mock:shadow-root>\n          <host class=\"six-root\">\n            <header part=\"header\">\n              <slot name=\"header\"></slot>\n            </header>\n            <nav class=\"six-root__left-sidebar\" part=\"left-sidebar\">\n                <slot name=\"left-sidebar\"></slot>\n            </nav>\n            <main part=\"main\">\n              <div class=\"six-root__container six-root__container--padded\" part=\"container\">\n                <slot name=\"main\"></slot>\n              </div>\n              <div class=\"six-root__footer\">\n                <slot name=\"footer\"></slot>\n              </div>\n            </main>\n            <nav class=\"six-root__right-sidebar\" part=\"right-sidebar\">\n              <slot name=\"right-sidebar\"></slot>\n            </nav>\n          </host>\n        </mock:shadow-root>\n      </six-root>\n    `);\n  });\n});\n"]}

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

@@ -0,0 +1,18 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: border-box;
+}
+
+:host {
+  display: block;
+}
+
+.search-box {
+  z-index: var(--six-z-index-search-field);
+}
+.search-box__icon {
+  cursor: pointer;
+}

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

@@ -0,0 +1,183 @@
+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 = () => {
+            if (this.inputElement != null) {
+                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 != 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) => {
+            const keyboardEvent = event;
+            if (keyboardEvent.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 | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "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/libraries/ui-library/src/components/six-search-field/six-search-field.tsx",
+                            "id": "src/components/six-search-field/six-search-field.tsx::SixSearchFieldChangePayload"
+                        }
+                    }
+                }
+            }];
+    }
+    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;;QAqBjB,mBAAc,GAAG,IAAI,cAAc,EAAE,CAAC;QAEtC,sBAAiB,GAAG,GAAG,EAAE;YAC/B,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;gBAC7B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,CAAC;aACjE;QACH,CAAC,CAAC;;wBAtBkC,qBAAqB;wBAGrB,KAAK;qBAGR,EAAE;yBAGf,KAAK;;IAgBzB,iBAAiB;QACf,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;YAC7B,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;SACtC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI;YAAE,OAAO;QAEtC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,iBAAiB,EAAE,QAAQ,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC/G,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,CAAC,KAAY,EAAE,EAAE;YACrE,MAAM,aAAa,GAAG,KAAsB,CAAC;YAC7C,IAAI,aAAa,CAAC,GAAG,KAAK,OAAO,EAAE;gBACjC,mBAAmB;gBACnB,IAAI,CAAC,iBAAiB,EAAE,CAAC;aAC1B;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC;IAClC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,WAAK,KAAK,EAAC,YAAY;YACrB,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;gBAEzB,gBAAU,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,aAElF,CACD;YACZ,eAAQ,CACJ,CACP,CAAC;IACJ,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;IAChC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;YAC5B,IAAI,EAAE,iDAAiD;SACxD,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;KAU7B,CAAC,CAAC;IACL,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"]}