@xplor-education/core-stencil-components 2.0.0

package/dist/collection/components/xplor-input-search/xplor-input-search.css

@@ -0,0 +1,371 @@
+/* on mobile browsers, I set a width of 100% */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  /* html[data-theme='office'] {
+    --color-primary: rgb(219, 59, 3);
+    --color-secondary: rgb(0, 119, 107);
+    --color-buttons: #89da59;
+    --color-typography: #ff320e;
+  }
+
+  html {
+    --color-primary: #db3b03;
+    --color-primary-50: #db3b03;
+    --color-secondary: rgb(0, 119, 107);
+    --color-secondary-50: rgb(0, 119, 107);
+    --color-tertiary: rgb(128, 104, 186);
+  } */
+  :root {
+    --color-primary: #db3b03;
+    --color-primary-50: rgba(255, 152, 0, 1);
+    --color-secondary: rgb(0, 119, 107);
+    --color-secondary-50: rgba(1, 163, 157, 1);
+    --color-tertiary: rgb(128, 104, 186);
+    --color-tertiary: rgb(223, 242, 241);
+    --color-white: white;
+    --color-emphasis: rgb(8, 8, 9);
+    --color-supergiant: rgb(213, 66, 99);
+    --color-orange: rgb(250, 200, 127);
+    --color-buttons: #fbbc05;
+    --color-typography: #ea4335;
+    --background: 20 66% 99%;
+    --foreground: 20 51% 4%;
+    --muted: 20 25% 86%;
+    --muted-foreground: 20 7% 25%;
+    --popover: 20 66% 98%;
+    --popover-foreground: 20 51% 3%;
+    --card: 20 66% 98%;
+    --card-foreground: 20 51% 3%;
+    --border: 20 15% 94%;
+    --input: 20 15% 94%;
+    --primary: 20 48% 72%;
+    --primary-foreground: 20 48% 12%;
+    --secondary: 20 12% 92%;
+    --secondary-foreground: 20 12% 32%;
+    --accent: 20 12% 92%;
+    --accent-foreground: 20 12% 32%;
+    --destructive: 11 80% 22%;
+    --destructive-foreground: 11 80% 82%;
+    --ring: 20 48% 72%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+  .dark {
+    --background: 253 43% 3%;
+    --foreground: 253 31% 98%;
+    --muted: 253 7% 13%;
+    --muted-foreground: 253 13% 63%;
+    --popover: 253 43% 3%;
+    --popover-foreground: 253 31% 98%;
+    --card: 253 43% 4%;
+    --card-foreground: 253 31% 99%;
+    --border: 215 27.9% 16.9%;
+    --input: 215 27.9% 16.9%;
+    --primary: 253 91% 58%;
+    --primary-foreground: 253 91% 98%;
+    --secondary: 253 7% 9%;
+    --secondary-foreground: 253 7% 69%;
+    --accent: 253 13% 14%;
+    --accent-foreground: 253 13% 74%;
+    --destructive: 339.2 90.36% 51.18%;
+    --destructive-foreground: 0 0% 100%;
+    --ring: 253 91% 58%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply box-border bg-background text-foreground;
+  }
+}
+@layer utilities {
+  .min-h-screen {
+    min-height: 100vh;
+    /* Fallback */
+    min-height: 100dvh;
+  }
+  .h-screen {
+    height: 100vh;
+    /* Fallback */
+    height: 100dvh;
+  }
+}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer components {
+  .glass {
+    border: none;
+    backdrop-filter: blur(var(--glass-blur, 40px));
+    background-color: transparent;
+    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);
+    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);
+    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));
+  }
+}
+.tox.tox-tinymce {
+  width: 50% !important;
+  height: 400px !important;
+  display: inline-flex;
+}
+
+/* on large screens, I use a different layout, so 600px are sufficient */
+@media only screen and (min-width: 600px) {
+  .tox.tox-tinymce {
+    width: 600px !important;
+  }
+}
+h1 {
+  color: var(--color-primary);
+  /* Header/H1 */
+  font-family: Inter;
+  font-size: 48px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 56px; /* 116.667% */
+}
+
+h2 {
+  color: var(--grey-1100252525, #252525);
+  /* Header/H2 Bold */
+  font-family: Inter;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 38px; /* 118.75% */
+  letter-spacing: 0.25px;
+}
+
+h3 {
+  color: var(--grey-1100252525, #252525);
+  /* Header/H3 */
+  font-family: Inter;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 32px; /* 133.333% */
+}
+
+.overline {
+  color: var(--grey-1100252525, #252525);
+  /* Overline/Regular */
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px; /* 133.333% */
+  letter-spacing: 3.2px;
+  text-transform: uppercase;
+}
+
+ol,
+ul {
+  list-style: none;
+  margin: 1rem;
+  padding: 0;
+}
+ol li,
+ul li {
+  margin: 1rem;
+  padding: 0;
+}
+ol.mdc-list,
+ul.mdc-list {
+  list-style-type: none;
+  list-style: none;
+}
+ol.mdc-list li.mdc-list-item,
+ul.mdc-list li.mdc-list-item {
+  list-style-type: none;
+  list-style: none !important;
+}
+
+.orange-label {
+  color: var(--Orange-900-Primary, #db3b03);
+  /* Caption 1/Regular */
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px; /* 133.333% */
+  letter-spacing: 0.4px;
+  margin: 0px 0 -9px 16px;
+  z-index: 1 !important;
+  position: relative;
+  width: fit-content;
+}
+.orange-label.grey-bg {
+  background-color: #fefcfb;
+}
+
+#spinnerLoader {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  pointer-events: none;
+}
+
+#textfield-Title-label {
+  background-color: white;
+}
+
+.mdc-ripple-upgraded .mdc-text-field--outlined .mdc-notched-outline__notch {
+  border: 0px solid transparent !important;
+  border-bottom: 1px solid #db3b03 !important;
+  padding: 0;
+  height: 0;
+}
+
+.mdc-text-field--focused .mdc-notched-outline__notch {
+  border: 0px solid transparent !important;
+  border-bottom: 2px solid #db3b03 !important;
+}
+
+.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch {
+  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);
+  border-top: transparent;
+}
+
+.generate-btn {
+  display: flex;
+  height: 48px;
+  padding: 12px 24px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 16px;
+}
+.generate-btn.link:hover {
+  background-color: var(--Cyan-700-Secondary, #e27046);
+  color: var(--Cyan-700-Secondary-Text, #fff);
+}
+
+.bg-green {
+  background: var(--Cyan-700-Secondary, #00776b);
+}
+
+:host {
+  display: block;
+}
+
+.xplor-input-search {
+  display: flex;
+  flex-direction: column;
+}
+.xplor-input-search__field {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border: 1px solid rgba(0, 0, 0, 0.23);
+  border-radius: 1rem;
+  background-color: white;
+  transition: border-color 0.2s ease;
+  padding-right: 0.375rem;
+}
+.xplor-input-search__field:hover:not(.xplor-input-search--disabled .xplor-input-search__field) {
+  border-color: rgba(0, 0, 0, 0.6);
+}
+.xplor-input-search--focused .xplor-input-search__field {
+  border-color: #008480;
+  border-width: 2px;
+  padding-right: calc(0.375rem - 1px);
+}
+.xplor-input-search--focused .xplor-input-search__input {
+  padding-left: calc(1rem - 1px);
+}
+.xplor-input-search__input {
+  flex: 1;
+  padding: 0.875rem 1rem;
+  font-size: 1rem;
+  font-family: inherit;
+  border: none;
+  outline: none;
+  background: transparent;
+  min-width: 0;
+}
+.xplor-input-search__input::placeholder {
+  color: rgba(0, 0, 0, 0.38);
+}
+.xplor-input-search__input:disabled {
+  color: rgba(0, 0, 0, 0.38);
+  cursor: not-allowed;
+}
+.xplor-input-search__button {
+  min-height: 0;
+  min-width: 0;
+  height: 2.5rem;
+  width: 2.5rem;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background-color: #008480;
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s ease;
+  flex-shrink: 0;
+}
+.xplor-input-search__button:hover:not(:disabled) {
+  background-color: #006D6A;
+}
+.xplor-input-search__button:active:not(:disabled) {
+  background-color: #005755;
+}
+.xplor-input-search__button:disabled {
+  opacity: 0.38;
+  cursor: not-allowed;
+}
+.xplor-input-search__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  fill: currentColor;
+}
+.xplor-input-search--compact .xplor-input-search__input {
+  padding: 0.625rem 1rem;
+}
+.xplor-input-search--compact .xplor-input-search__button {
+  height: 2rem;
+  width: 2rem;
+}
+.xplor-input-search--compact .xplor-input-search__icon {
+  width: 1rem;
+  height: 1rem;
+}
+.xplor-input-search--comfortable .xplor-input-search__input {
+  padding: 1rem 1rem;
+}
+.xplor-input-search--comfortable .xplor-input-search__button {
+  height: 2.75rem;
+  width: 2.75rem;
+}
+.xplor-input-search--comfortable .xplor-input-search__icon {
+  width: 1.375rem;
+  height: 1.375rem;
+}
+.xplor-input-search--disabled .xplor-input-search__field {
+  background-color: rgba(0, 0, 0, 0.04);
+}

package/dist/collection/components/xplor-input-search/xplor-input-search.js

@@ -0,0 +1,213 @@
+import { Host, h } from "@stencil/core";
+export class XplorInputSearch {
+    constructor() {
+        /**
+         * Search value
+         */
+        this.value = '';
+        /**
+         * Input placeholder
+         */
+        this.placeholder = 'Search...';
+        /**
+         * Background color
+         */
+        this.bgColor = 'white';
+        /**
+         * Button/focus color
+         */
+        this.color = '#008480';
+        /**
+         * Whether the input is disabled
+         */
+        this.disabled = false;
+        /**
+         * Density (compact, default, comfortable)
+         */
+        this.density = 'default';
+        this.isFocused = false;
+        this.handleInput = (event) => {
+            const target = event.target;
+            this.value = target.value;
+        };
+        this.handleSearch = () => {
+            this.search.emit(this.value);
+        };
+        this.handleKeyDown = (event) => {
+            if (event.key === 'Enter') {
+                this.handleSearch();
+            }
+        };
+    }
+    render() {
+        const containerClasses = {
+            'xplor-input-search': true,
+            [`xplor-input-search--${this.density}`]: true,
+            'xplor-input-search--focused': this.isFocused,
+            'xplor-input-search--disabled': this.disabled,
+        };
+        return (h(Host, { key: 'c608c1ad9c73dc708aaf5d985b0e376ad7923b59' }, h("div", { key: '8efabc2eea7bf741658a8d01f4b6ed14b259de82', class: containerClasses }, h("div", { key: '82384b7cf2967ca26e8d3b1358a5c9266fa09f20', class: "xplor-input-search__field" }, h("input", { key: '57a6c1dc9fff69f25bd75ad78e9c092e593cbee1', type: "text", class: "xplor-input-search__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), style: {
+                backgroundColor: this.bgColor,
+            } }), h("slot", { key: '8656098e81af32b857589443a89f009791429d2d', name: "append-inner" }, h("button", { key: 'ca36754aec41e189e4b870103fe82efb8667d895', type: "button", class: "xplor-input-search__button", onClick: this.handleSearch, disabled: this.disabled, "data-testid": "input-search-button" }, h("svg", { key: '3e5f9f080c757f46e17641c549bfda7eeb0d9b30', viewBox: "0 0 24 24", class: "xplor-input-search__icon" }, h("path", { key: 'c5814684ea375fe19074f47234cc11f919a4db5c', d: "M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" }))))))));
+    }
+    static get is() { return "xplor-input-search"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xplor-input-search.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xplor-input-search.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Search value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "attribute": "placeholder",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input placeholder"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Search...'"
+            },
+            "bgColor": {
+                "type": "string",
+                "attribute": "bg-color",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Background color"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'white'"
+            },
+            "color": {
+                "type": "string",
+                "attribute": "color",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button/focus color"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'#008480'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "density": {
+                "type": "string",
+                "attribute": "density",
+                "mutable": false,
+                "complexType": {
+                    "original": "'compact' | 'default' | 'comfortable'",
+                    "resolved": "\"comfortable\" | \"compact\" | \"default\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Density (compact, default, comfortable)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'default'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isFocused": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "search",
+                "name": "search",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Search event (triggered on button click or Enter key)"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=xplor-input-search.js.map

package/dist/collection/components/xplor-input-search/xplor-input-search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xplor-input-search.js","sourceRoot":"","sources":["../../../src/components/xplor-input-search/xplor-input-search.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAOrF,MAAM,OAAO,gBAAgB;IAL7B;QAME;;WAEG;QACsB,UAAK,GAAW,EAAE,CAAC;QAE5C;;WAEG;QACK,gBAAW,GAAW,WAAW,CAAC;QAE1C;;WAEG;QACK,YAAO,GAAW,OAAO,CAAC;QAElC;;WAEG;QACK,UAAK,GAAW,SAAS,CAAC;QAElC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,YAAO,GAA0C,SAAS,CAAC;QAO1D,cAAS,GAAY,KAAK,CAAC;QAE5B,gBAAW,GAAG,CAAC,KAAY,EAAE,EAAE;YACrC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;YAChD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAC5B,CAAC,CAAC;QAEM,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/B,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC/C,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;gBAC1B,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,CAAC;QACH,CAAC,CAAC;KA+CH;IA7CC,MAAM;QACJ,MAAM,gBAAgB,GAAG;YACvB,oBAAoB,EAAE,IAAI;YAC1B,CAAC,uBAAuB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YAC7C,6BAA6B,EAAE,IAAI,CAAC,SAAS;YAC7C,8BAA8B,EAAE,IAAI,CAAC,QAAQ;SAC9C,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB;gBAC1B,4DAAK,KAAK,EAAC,2BAA2B;oBACpC,8DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,2BAA2B,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EACtC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,EACtC,KAAK,EAAE;4BACL,eAAe,EAAE,IAAI,CAAC,OAAO;yBAC9B,GACD;oBAEF,6DAAM,IAAI,EAAC,cAAc;wBACvB,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,iBACX,qBAAqB;4BAEjC,4DAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,0BAA0B;gCACvD,6DAAM,CAAC,EAAC,mQAAmQ,GAAG,CAC1Q,CACC,CACJ,CACH,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-input-search',\n  styleUrl: 'xplor-input-search.scss',\n  scoped: true,\n})\nexport class XplorInputSearch {\n  /**\n   * Search value\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * Input placeholder\n   */\n  @Prop() placeholder: string = 'Search...';\n\n  /**\n   * Background color\n   */\n  @Prop() bgColor: string = 'white';\n\n  /**\n   * Button/focus color\n   */\n  @Prop() color: string = '#008480';\n\n  /**\n   * Whether the input is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Density (compact, default, comfortable)\n   */\n  @Prop() density: 'compact' | 'default' | 'comfortable' = 'default';\n\n  /**\n   * Search event (triggered on button click or Enter key)\n   */\n  @Event() search: EventEmitter<string>;\n\n  @State() isFocused: boolean = false;\n\n  private handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n  };\n\n  private handleSearch = () => {\n    this.search.emit(this.value);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter') {\n      this.handleSearch();\n    }\n  };\n\n  render() {\n    const containerClasses = {\n      'xplor-input-search': true,\n      [`xplor-input-search--${this.density}`]: true,\n      'xplor-input-search--focused': this.isFocused,\n      'xplor-input-search--disabled': this.disabled,\n    };\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          <div class=\"xplor-input-search__field\">\n            <input\n              type=\"text\"\n              class=\"xplor-input-search__input\"\n              value={this.value}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              onInput={this.handleInput}\n              onKeyDown={this.handleKeyDown}\n              onFocus={() => (this.isFocused = true)}\n              onBlur={() => (this.isFocused = false)}\n              style={{\n                backgroundColor: this.bgColor,\n              }}\n            />\n\n            <slot name=\"append-inner\">\n              <button\n                type=\"button\"\n                class=\"xplor-input-search__button\"\n                onClick={this.handleSearch}\n                disabled={this.disabled}\n                data-testid=\"input-search-button\"\n              >\n                <svg viewBox=\"0 0 24 24\" class=\"xplor-input-search__icon\">\n                  <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n                </svg>\n              </button>\n            </slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}