@ppg_pl/pallete 0.0.2 → 0.0.4

package/www/build/my-search.entry.js

@@ -0,0 +1,36 @@
+import { r as registerInstance, e as createEvent, h, f as getAssetPath } from './index-1ac7471e.js';
+
+const mySearchCss = ".pallete-wrapper.sc-my-search *.sc-my-search{font-family:\"Galatea\", sans-serif}.search.sc-my-search{position:relative;width:400px}@media (max-width: 768px){.search.sc-my-search{width:100%}}.search.sc-my-search input.sc-my-search{margin-bottom:12px;font-size:16px;padding:19px;border-radius:27.35px;border:1px solid #dfdfdf;width:100%}.search.sc-my-search button.sc-my-search{position:absolute;border:none;background-color:transparent;right:-20px;top:0;width:50px;height:calc(100% - 12px);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}";
+
+const MySearch = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.searchColors = createEvent(this, "searchColors", 7);
+    this.searchIcon = 'search.svg';
+    this.searchText = null;
+    this.fetchColorsByName = (text) => {
+      this.searchColors.emit(text);
+    };
+  }
+  onInputChangeValue(event) {
+    const value = event.target.value;
+    this.searchColors.emit(value);
+    this.searchText = value;
+  }
+  fetchColorsByNameHandle(newValue) {
+    this.fetchColorsByName(newValue);
+  }
+  render() {
+    return (h("div", { class: 'search' }, h("input", { placeholder: this.isMobile ? 'Wyszukaj kolor' : 'Wyszukaj kolor po nazwie bądź numerze', value: this.searchText || '', type: "text", onInput: this.onInputChangeValue.bind(this) }), h("button", { onClick: () => {
+        this.searchText && this.fetchColorsByName(this.searchText);
+        this.searchText = '';
+      } }, h("img", { src: getAssetPath(`./assets/${this.searchIcon}`), alt: "arrow_down" }))));
+  }
+  static get assetsDirs() { return ["assets"]; }
+  static get watchers() { return {
+    "searchText": ["fetchColorsByNameHandle"]
+  }; }
+};
+MySearch.style = mySearchCss;
+
+export { MySearch as my_search };