@vetorzero/pts-custom-elements 0.0.20 → 0.1.1

package/dist/collection/collection-manifest.json

@@ -1,11 +1,11 @@
 {
   "entries": [
-    "components/my-component/my-component.js",
     "components/pts-remote-picker/pts-remote-picker.js"
   ],
+  "mixins": [],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.43.1",
+    "version": "4.43.2",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],

package/dist/collection/components/pts-remote-picker/providers/abstract.js

@@ -0,0 +1,8 @@
+export default class AbstractProvider {
+    static abortSymbol = Symbol('providerAbortion');
+    endpoint = '';
+    debounceMs = 666;
+    minChars = 0;
+    onQueryResult = undefined;
+    onStateChange = undefined;
+}

package/dist/collection/components/pts-remote-picker/providers/pts.js

@@ -0,0 +1,70 @@
+import z from "zod";
+import AbstractProvider from "./abstract";
+const optionSchema = z.object({
+    value: z.string().nonempty(),
+    caption: z.string().nonempty(),
+    summary: z.string().nullish(),
+});
+const queryResultSchema = z.object({
+    options: optionSchema.array(),
+});
+export default class PTSProvider extends AbstractProvider {
+    #abortController;
+    #debounceTimeout = 0;
+    abort = () => {
+        this.#abortController?.abort(AbstractProvider.abortSymbol);
+    };
+    query(q) {
+        this.abort();
+        if (q.length < this.minChars)
+            return;
+        this.onStateChange?.('waiting');
+        // debounce
+        window.clearTimeout(this.#debounceTimeout);
+        this.#debounceTimeout = window.setTimeout(() => {
+            this.onStateChange?.('loading');
+            this.#runQuery(q)
+                .then(options => options && this.onQueryResult?.(options))
+                .finally(() => this.onStateChange?.('idle'));
+        }, this.debounceMs);
+    }
+    async resolve(value) {
+        const url = new URL(this.endpoint);
+        url.searchParams.set('value', value);
+        try {
+            return this.#fetchJson(url).then(optionSchema.parseAsync);
+        }
+        catch {
+            return undefined;
+        }
+    }
+    async #runQuery(q) {
+        const url = new URL(this.endpoint);
+        url.searchParams.set('q', q);
+        try {
+            const result = await this.#fetchJson(url).then(queryResultSchema.parseAsync);
+            return result.options;
+        }
+        catch (err) {
+            console.log('Validation error', err);
+            return undefined;
+        }
+    }
+    async #fetchJson(url) {
+        this.onStateChange?.('loading');
+        this.abort();
+        // create new abort controller
+        this.#abortController = new AbortController();
+        const signal = this.#abortController.signal;
+        return fetch(url, { signal })
+            .then(r => r.json())
+            .catch(err => {
+            // ignore abort error
+            if (err === AbstractProvider.abortSymbol)
+                return undefined;
+            else
+                throw err;
+        })
+            .finally(() => this.onStateChange?.('idle'));
+    }
+}

package/dist/collection/components/pts-remote-picker/providers/tvmaze.js

@@ -0,0 +1,86 @@
+import z from "zod";
+import AbstractProvider from "./abstract";
+const showSchema = z.object({
+    id: z.coerce.string(),
+    name: z.string(),
+    summary: z
+        .string()
+        .transform(val => (val ? getTextFromHTML(val) : null))
+        .nullable(),
+});
+const queryResultSchema = z.array(z.object({
+    score: z.number(),
+    show: showSchema,
+}));
+class TVProvider extends AbstractProvider {
+    searchURL = '/search/shows';
+    resolveURL = '/shows/:id';
+    baseUrl = 'https://api.tvmaze.com';
+    #abortController;
+    #debounceTimeout = 0;
+    abort = () => {
+        this.#abortController?.abort(AbstractProvider.abortSymbol);
+    };
+    query(q) {
+        if (q.length < this.minChars)
+            return;
+        this.onStateChange?.('waiting');
+        // debounce
+        window.clearTimeout(this.#debounceTimeout);
+        this.#debounceTimeout = window.setTimeout(() => {
+            this.onStateChange?.('loading');
+            this.#runQuery(q)
+                .then(options => options && this.onQueryResult?.(options))
+                .finally(() => this.onStateChange?.('idle'));
+        }, this.debounceMs);
+    }
+    async resolve(value) {
+        const url = new URL(this.resolveURL.replace(':id', encodeURIComponent(value)), this.baseUrl);
+        try {
+            const result = await this.#fetchJson(url).then(showSchema.parseAsync);
+            return { value: result.id, caption: result.name, summary: result.summary || undefined };
+        }
+        catch {
+            return undefined;
+        }
+    }
+    #runQuery = async (q) => {
+        // fetch the data
+        const url = new URL(this.searchURL, this.baseUrl);
+        url.searchParams.append('q', q);
+        try {
+            const result = await this.#fetchJson(url).then(queryResultSchema.parseAsync);
+            return result.map(r => ({
+                value: r.show.id,
+                caption: r.show.name,
+                summary: r.show.summary || undefined,
+            }));
+        }
+        catch (err) {
+            console.log('Validation error', err);
+            return undefined;
+        }
+    };
+    #fetchJson = async (url) => {
+        this.onStateChange?.('loading');
+        // abort previous request (if in flight)
+        this.#abortController?.abort(AbstractProvider.abortSymbol);
+        // create new abort controller
+        this.#abortController = new AbortController();
+        const signal = this.#abortController.signal;
+        return fetch(url, { signal })
+            .then(r => r.json())
+            .catch(err => {
+            if (err === AbstractProvider.abortSymbol)
+                return undefined;
+            else
+                throw err;
+        })
+            .finally(() => this.onStateChange?.('idle'));
+    };
+}
+function getTextFromHTML(html) {
+    const el = document.createElement('fragment');
+    el.innerHTML = html;
+    return el.innerText ?? el.textContent;
+}

package/dist/collection/components/pts-remote-picker/pts-remote-picker.css

@@ -1,5 +1,92 @@
 :host {
-  display: inline-block;
-  border: 4px solid green;
-  padding: .35rem;
+  --highlighted-option-bg: #fff;
+  --listbox-bg: #eeeeee;
+
+  display: block;
+  position: relative;
+}
+
+/* Layout */
+
+#controls {
+  display: flex;
+  /* height: 25px; */
+  align-items: stretch;
+  gap: 0.5rem;
+}
+#q {
+  flex-grow: 1;
+}
+.listbox {
+  position: absolute;
+  inset: 100% 0 auto;
+  max-height: 20rem;
+  overflow-y: auto;
+  z-index: 1;
+}
+
+/* Appearance */
+
+:host {
+  background: lightgray;
+  /* &:focus {
+    outline: 2px solid deeppink;
+    outline-offset: 4px;
+  } */
+
+}
+input,
+button {
+  appearance: none;
+  background: none;
+  border: none;
+  padding: 0.5rem;
+  font: inherit;
+  cursor: pointer;
+}
+
+.listbox {
+  background: var(--listbox-bg);
+}
+.listbox-option {
+  padding: 0.5rem;
+  cursor: pointer;
+  transition: 200ms background-color;
+  display: flex;
+  flex-flow: column;
+  gap: 0.25rem;
+  &:hover {
+    background-color: hsl(from var(--highlighted-option-bg) h s l / 50%);
+  }
+  &[aria-selected='true'] {
+    background: var(--highlighted-option-bg);
+  }
+}
+.option-caption {
+  font-size: small;
+  font-weight: 500;
+}
+.option-summary {
+  font-size: x-small;
+  opacity: 50%;
+  text-overflow: ellipsis;
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Icons */
+
+.status-icon {
+  width: 1rem;
+  :host([state='idle']) & {
+    background: oklch(59.6% 0.145 163.225);
+  }
+  :host([state='waiting']) & {
+    background: oklch(68.1% 0.162 75.834);
+  }
+  :host([state='loading']) & {
+    background: oklch(58.6% 0.253 17.585);
+  }
 }

package/dist/collection/components/pts-remote-picker/pts-remote-picker.js

@@ -1,8 +1,221 @@
-import { Host, h } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
+import PTSProvider from "./providers/pts";
 export class PtsRemotePicker {
+    el;
+    // @ts-ignore -- O decorator injeta
+    internals;
+    value = "";
+    displayValue = "";
+    endpoint = "";
+    _state = "idle";
+    _query = "";
+    _querying = false;
+    _expanded = false;
+    _options = [];
+    _focusedIndex = -1;
+    #provider;
+    constructor() {
+        this.#provider = new PTSProvider();
+        this.#provider.endpoint = this.endpoint;
+        this.#provider.onQueryResult = (options) => {
+            if (options) {
+                this._options = options;
+                this._focusedIndex = -1;
+            }
+        };
+        this.#provider.onStateChange = (state) => (this._state = state);
+    }
+    // callbacks
+    connectedCallback() {
+        window.addEventListener("click", this.handleWindowClick);
+        // window.addEventListener('focusin', this.handleWindowFocus);
+    }
+    disconnectedCallback() {
+        window.removeEventListener("click", this.handleWindowClick);
+        // window.removeEventListener('focusin', this.handleWindowFocus);
+    }
+    componentWillLoad() {
+        if (this.value && !this.displayValue) {
+            this.resolveDisplayValue();
+        }
+        this.internals.setFormValue(this.value);
+    }
+    formResetCallback() {
+        this.value = this.el.getAttribute("value") ?? "";
+        this.displayValue = this.el.getAttribute("displayValue") ?? "";
+        if (this.value && !this.displayValue) {
+            this.resolveDisplayValue();
+        }
+    }
     render() {
-        return (h(Host, { key: '7562a6d662c271aca673dac296ece21afe251c65' }, "before", h("slot", { key: '61e6025bfb14cbf10e1bb5aaed2e66a488cf2f9e' }), "after"));
+        // const debugObject = {
+        //   _expanded: this._expanded,
+        //   _loading: this._loading,
+        //   _query: this._query,
+        //   _querying: this._querying,
+        //   // _options: this._options,
+        //   value: this.value,
+        //   displayValue: this.displayValue,
+        // };
+        const options = this._options.map((o, idx) => (h("div", { role: "option", class: "listbox-option", "data-index": idx, "aria-selected": this._focusedIndex === idx ? "true" : "false", tabindex: "-1", onClick: () => this.setValue(o.value, o.caption) }, h("div", { class: "option-caption" }, o.caption), o.summary ? h("div", { class: "option-summary" }, o.summary) : null)));
+        return (h(Host, { key: '65681df5904c0a95d54f5f12db1fad13ec8c1f66', state: this._state, onKeyDown: this.handleKeyDown, onBlur: this.handleBlur }, h("div", { key: 'b4f224463334c29a114acdf0a3e5ca8294f79462', id: "controls" }, h("div", { key: '1dd778250dd76b8ecae8bb1d4fceeeac280ced0f', class: "status-icon", part: "status-icon" }), h("input", { key: 'd4e845370e2320a22bb4f0e3fec51bf4be6a72d0', part: "q", type: "text", id: "q", spellcheck: false, autoCapitalize: "none", autoComplete: "off", autoCorrect: "off", inputMode: "none", value: this._querying ? this._query : this.displayValue, onFocus: this.handleQueryFocus, onInput: this.handleQueryInput }), h("button", { key: 'e640b0c7b2756f32e6513f9a657ca1ee258d33c1', type: "button", id: "toggle", onClick: this.handleToggle, "aria-label": "Expandir" }, "Toggle"), h("button", { key: '55e2b1846df075f2b4f8906fd1dbc1cd67b3994f', type: "button", id: "clear", onClick: this.handleClear, "aria-label": "Limpar" }, "Clear")), h("div", { key: '16df6bb0bac3bdafae1f4e815e3dbbc5bca8641a', role: "listbox", class: "listbox", hidden: !this._expanded || this._options.length < 1 }, h("div", { key: 'dec2c25fbb902bebbde16962682824961b120056', class: "scroller" }, h("div", { key: '1966b8f63e4f2a3fd21835612ac9fa9acd2c6e82', class: "scroller__marker scroller__marker--before" }), h("div", { key: '932c460391dfff774a1a1c6bc171d47c737bf7dd', class: "scroller__content", tabindex: -1 }, options), h("div", { key: '1057d3a4f64a51981424e5dd04ea13f839f1f6f1', class: "scroller__marker scroller__marker--after" })))));
+    }
+    // element methods
+    #shouldResolve = true;
+    async resolveDisplayValue() {
+        if (!this.#shouldResolve)
+            return;
+        if (!this.value) {
+            this.displayValue = "";
+            return;
+        }
+        const resolved = await this.#provider.resolve(this.value);
+        if (resolved) {
+            this.setValue(resolved.value, resolved.caption); // ISSO PODE DAR LOOP INFINITO
+        }
+        else {
+            this.value = "";
+        }
+    }
+    async handleSetValue() {
+        this.internals.setFormValue(this.value);
+        await this.resolveDisplayValue();
+        this.el.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+    }
+    // @ts-ignore
+    async handleSetBaseUrl(...x) {
+        console.log("set endpoint", x);
+        this.#provider.endpoint = this.endpoint;
+    }
+    async setValue(value, displayValue) {
+        this.#shouldResolve = !displayValue;
+        this.displayValue = String(displayValue ?? "");
+        this.value = value;
+        this.collapse();
+        this.el.dispatchEvent(new Event("input", { bubbles: true }));
+        this.#shouldResolve = true;
+    }
+    async expand() {
+        this._expanded = true;
+    }
+    async collapse() {
+        this._expanded = false;
+        this._querying = false;
+        this._focusedIndex = -1;
     }
+    async clear() {
+        this.#provider.abort();
+        this._query = "";
+        this._querying = false;
+        this._expanded = false;
+        this._options = [];
+        this._focusedIndex = -1;
+        this.setValue("", "");
+    }
+    // event handlers
+    handleKeyDown = (e) => {
+        const optionsCount = this._options.length;
+        const input = e.target;
+        switch (e.key) {
+            case "ArrowDown":
+                {
+                    e.preventDefault();
+                    // If closed, open it.
+                    if (!this._expanded && optionsCount > 0) {
+                        this.expand();
+                    }
+                    if (optionsCount > 0) {
+                        const next = this._focusedIndex + 1;
+                        this._focusedIndex = next % optionsCount;
+                        this.ensureOptionInView(this._focusedIndex);
+                    }
+                }
+                break;
+            case "ArrowUp":
+                {
+                    e.preventDefault();
+                    if (!this._expanded && optionsCount > 0) {
+                        this.expand();
+                    }
+                    if (optionsCount > 0) {
+                        const isUnselected = this._focusedIndex < 0;
+                        if (isUnselected) {
+                            this._focusedIndex = optionsCount - 1;
+                        }
+                        else {
+                            const prev = this._focusedIndex - 1;
+                            this._focusedIndex = (prev + optionsCount) % optionsCount;
+                        }
+                        this.ensureOptionInView(this._focusedIndex);
+                    }
+                }
+                break;
+            case "Enter":
+                {
+                    if (this._expanded &&
+                        this._focusedIndex >= 0 &&
+                        this._focusedIndex < optionsCount) {
+                        e.preventDefault();
+                        const option = this._options[this._focusedIndex];
+                        this.setValue(option.value, option.caption);
+                        this.collapse();
+                        input.blur();
+                    }
+                }
+                break;
+            case "Escape":
+                {
+                    if (this._expanded) {
+                        e.preventDefault();
+                        this.collapse();
+                    }
+                }
+                break;
+        }
+    };
+    ensureOptionInView(index) {
+        // wait for render
+        requestAnimationFrame(() => {
+            const listbox = this.el.shadowRoot?.querySelector(".listbox");
+            const option = listbox?.querySelector(`[data-index="${index}"]`);
+            console.log({ option, listbox });
+            option.scrollIntoView({
+                behavior: "instant",
+                block: "nearest",
+            });
+        });
+    }
+    handleQueryInput = (e) => {
+        const q = e.target.value;
+        this._query = q;
+        this.#provider.query(q);
+    };
+    handleQueryFocus = () => {
+        this._querying = true;
+        this.expand();
+    };
+    handleBlur = () => {
+        this._querying = false;
+        this._expanded = false;
+    };
+    handleToggle = () => {
+        this._expanded ? this.collapse() : this.expand();
+    };
+    handleClear = () => {
+        this.clear();
+    };
+    handleWindowFocus = (e) => {
+        const target = e.target;
+        if (target instanceof HTMLElement && !this.el.contains(target)) {
+            this.collapse();
+        }
+    };
+    handleWindowClick = (e) => {
+        const target = e.target;
+        if (target instanceof HTMLElement && !this.el.contains(target)) {
+            this.collapse();
+        }
+    };
     static get is() { return "pts-remote-picker"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
@@ -15,4 +228,169 @@ export class PtsRemotePicker {
             "$": ["pts-remote-picker.css"]
         };
     }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "\"\""
+            },
+            "displayValue": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "display-value",
+                "defaultValue": "\"\""
+            },
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "endpoint",
+                "defaultValue": "\"\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_state": {},
+            "_query": {},
+            "_querying": {},
+            "_expanded": {},
+            "_options": {},
+            "_focusedIndex": {}
+        };
+    }
+    static get methods() {
+        return {
+            "setValue": {
+                "complexType": {
+                    "signature": "(value: string, displayValue?: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "displayValue",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "expand": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "collapse": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "clear": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleSetValue"
+            }, {
+                "propName": "endpoint",
+                "methodName": "handleSetBaseUrl"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
 }

package/dist/collection/index.js

@@ -1,10 +1 @@
-/**
- * @fileoverview entry point for your component library
- *
- * This is the entry point for your component library. Use this file to export utilities,
- * constants or data structure that accompany your components.
- *
- * DO NOT use this file to export your components. Instead, use the recommended approaches
- * to consume components of this package as outlined in the `README.md`.
- */
-export { format } from './utils/utils';
+export {};