@phatvu/web-component-poc 1.0.0 → 1.0.1

package/dist/collection/components/fast-carousel/carousel.js

@@ -0,0 +1,439 @@
+import { h } from "@stencil/core";
+import EmblaCarousel from "embla-carousel";
+export class AppCarousel {
+    el;
+    /** Optional list of items to render as slides (each item in a slide). When set, slot is ignored. Accepts array or JSON string. */
+    items;
+    /** Whether the carousel loops. */
+    loop = true;
+    /** Extra class for the root carousel element. */
+    class;
+    /** Extra class for the controls container. */
+    controlClass;
+    /** Extra class for the slide viewport. */
+    slideClass;
+    /** Extra class for each slide item (items mode only). */
+    itemClass;
+    viewportRef;
+    containerRef;
+    slotRef;
+    prevBtnRef;
+    nextBtnRef;
+    dotsRef;
+    embla = null;
+    movedNodes = [];
+    prevClickHandler = null;
+    nextClickHandler = null;
+    dotClickHandlers = [];
+    slotNodesMoved = false;
+    /**
+     * Go to the previous slide.
+     */
+    async scrollPrev() {
+        this.embla?.scrollPrev();
+    }
+    /**
+     * Go to the next slide.
+     */
+    async scrollNext() {
+        this.embla?.scrollNext();
+    }
+    /**
+     * Go to slide by index (0-based).
+     */
+    async goToSlide(index) {
+        this.embla?.scrollTo(index);
+    }
+    /**
+     * Get the Embla API instance (if initialized). Returns null before init or after destroy.
+     */
+    async getEmbla() {
+        return this.embla;
+    }
+    moveSlotNodesIntoContainer() {
+        if (!this.slotRef || !this.containerRef || this.slotNodesMoved)
+            return;
+        const nodes = this.slotRef
+            .assignedNodes()
+            .filter((n) => n.nodeType === Node.ELEMENT_NODE);
+        if (nodes.length === 0)
+            return;
+        this.movedNodes = [];
+        nodes.forEach((n) => {
+            this.containerRef.appendChild(n);
+            this.movedNodes.push(n);
+        });
+        this.slotNodesMoved = true;
+        this.scheduleEmblaInit();
+    }
+    initScheduled = false;
+    scheduleEmblaInit() {
+        if (this.initScheduled)
+            return;
+        this.initScheduled = true;
+        requestAnimationFrame(() => {
+            this.initScheduled = false;
+            this.destroyEmbla();
+            this.initEmbla();
+        });
+    }
+    moveSlotNodesBack() {
+        const host = this.el;
+        this.movedNodes.forEach((n) => host.appendChild(n));
+        this.movedNodes = [];
+    }
+    initEmbla() {
+        if (!this.viewportRef || !this.containerRef)
+            return;
+        const itemsArr = this.getItemsArray();
+        const hasSlides = itemsArr !== undefined
+            ? itemsArr.length > 0
+            : this.containerRef.children.length > 0;
+        if (!hasSlides)
+            return;
+        this.embla = EmblaCarousel(this.viewportRef, {
+            loop: this.loop,
+            align: 'center',
+            containScroll: 'trimSnaps',
+        });
+        const prevBtn = this.prevBtnRef;
+        const nextBtn = this.nextBtnRef;
+        const dotsNode = this.dotsRef;
+        const togglePrevNext = () => {
+            if (prevBtn) {
+                if (this.embla?.canScrollPrev())
+                    prevBtn.removeAttribute('disabled');
+                else
+                    prevBtn.setAttribute('disabled', '');
+            }
+            if (nextBtn) {
+                if (this.embla?.canScrollNext())
+                    nextBtn.removeAttribute('disabled');
+                else
+                    nextBtn.setAttribute('disabled', '');
+            }
+        };
+        this.embla.on('init', togglePrevNext);
+        this.embla.on('reInit', togglePrevNext);
+        this.embla.on('select', togglePrevNext);
+        if (prevBtn && nextBtn) {
+            this.prevClickHandler = () => this.embla?.scrollPrev();
+            this.nextClickHandler = () => this.embla?.scrollNext();
+            prevBtn.addEventListener('click', this.prevClickHandler);
+            nextBtn.addEventListener('click', this.nextClickHandler);
+        }
+        if (dotsNode) {
+            const count = this.embla.scrollSnapList().length;
+            dotsNode.innerHTML = '';
+            for (let i = 0; i < count; i++) {
+                const btn = document.createElement('button');
+                btn.type = 'button';
+                btn.setAttribute('aria-label', `Go to slide ${i + 1}`);
+                btn.className = 'carousel__dot';
+                if (i === 0)
+                    btn.classList.add('current');
+                const dot = document.createElement('div');
+                dot.className = 'carousel__dot-inner';
+                btn.appendChild(dot);
+                const index = i;
+                const handler = () => this.embla?.scrollTo(index);
+                this.dotClickHandlers.push(handler);
+                btn.addEventListener('click', handler);
+                dotsNode.appendChild(btn);
+            }
+            const updateDots = () => {
+                const selected = this.embla?.selectedScrollSnap() ?? 0;
+                const buttons = dotsNode.querySelectorAll('button');
+                buttons.forEach((b, i) => {
+                    b.classList.toggle('current', i === selected);
+                });
+            };
+            this.embla.on('select', updateDots);
+        }
+        togglePrevNext();
+    }
+    destroyEmbla() {
+        if (this.prevBtnRef && this.prevClickHandler) {
+            this.prevBtnRef.removeEventListener('click', this.prevClickHandler);
+            this.prevClickHandler = null;
+        }
+        if (this.nextBtnRef && this.nextClickHandler) {
+            this.nextBtnRef.removeEventListener('click', this.nextClickHandler);
+            this.nextClickHandler = null;
+        }
+        this.dotClickHandlers = [];
+        if (this.dotsRef)
+            this.dotsRef.innerHTML = '';
+        this.embla?.destroy();
+        this.embla = null;
+    }
+    onSlotChange = () => {
+        if (this.getItemsArray() !== undefined)
+            return;
+        this.moveSlotNodesIntoContainer();
+    };
+    componentDidRender() {
+        if (this.getItemsArray() === undefined) {
+            if (this.slotRef) {
+                this.slotRef.removeEventListener('slotchange', this.onSlotChange);
+                this.slotRef.addEventListener('slotchange', this.onSlotChange);
+            }
+            requestAnimationFrame(() => {
+                this.moveSlotNodesIntoContainer();
+                if (!this.slotNodesMoved) {
+                    this.destroyEmbla();
+                    this.initEmbla();
+                }
+            });
+        }
+        else {
+            this.destroyEmbla();
+            this.initEmbla();
+        }
+    }
+    disconnectedCallback() {
+        if (this.slotRef) {
+            this.slotRef.removeEventListener('slotchange', this.onSlotChange);
+        }
+        this.destroyEmbla();
+        if (this.getItemsArray() === undefined) {
+            this.moveSlotNodesBack();
+            this.slotNodesMoved = false;
+        }
+    }
+    getItemsArray() {
+        if (this.items === undefined)
+            return undefined;
+        if (Array.isArray(this.items))
+            return this.items;
+        if (typeof this.items === 'string') {
+            try {
+                const parsed = JSON.parse(this.items);
+                return Array.isArray(parsed) ? parsed : undefined;
+            }
+            catch {
+                return undefined;
+            }
+        }
+        return undefined;
+    }
+    render() {
+        const itemsArray = this.getItemsArray();
+        const useItems = itemsArray !== undefined && itemsArray.length > 0;
+        return (h("div", { key: '313c58e9c1ea3b9c0d0fd4b9d6354336682d9353', class: `carousel ${this.class || ''}`.trim() }, h("div", { key: '14ad75526a24ed38df053fa221e2fafef6d532ed', class: `carousel__viewport ${this.slideClass || ''}`.trim(), ref: (el) => (this.viewportRef = el) }, h("div", { key: '1d3a771598c382592b789289494f2439fea56918', class: "carousel__container", ref: (el) => (this.containerRef = el) }, useItems && itemsArray
+            ? itemsArray.map((item, i) => (h("div", { key: i, class: `carousel__slide ${this.itemClass || ''}`.trim() }, typeof item === 'object' &&
+                item !== null &&
+                'content' in item
+                ? item.content
+                : String(item))))
+            : null)), !useItems && (h("div", { key: 'cdecd3275ac3c5ffe7a0f46153d3e59ad0d4ba9d', style: { display: 'none' }, "aria-hidden": "true" }, h("slot", { key: '450dd5b90f20166a4d6ef4a0d46d208ad47bbf4b', ref: (el) => (this.slotRef = el) }))), h("div", { key: 'ad4eab3f45204170308d8021799d227eaff36d71', class: `carousel__controls ${this.controlClass || ''}`.trim() }, h("button", { key: '1a4ef7209ea768a55892f4d928da3f6100faab4b', type: "button", "aria-label": "Previous", class: "carousel__prev", ref: (el) => (this.prevBtnRef = el) }, h("svg", { key: '7d579cb030149947791db565bc1520ef2707c360', class: "carousel__icon", "stroke-width": "1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { key: 'fdca1a876d4967c39286bddba6122351fbf0d925', "stroke-linecap": "round", "stroke-linejoin": "round", d: "M15.75 19.5L8.25 12l7.5-7.5" }))), h("div", { key: '4d9a30f1988f2ce04f271967f1dd39c5287273f2', class: "carousel__dots", ref: (el) => (this.dotsRef = el) }), h("button", { key: 'c8bc7787821f3277c6d038e3ff1240b3ce936825', type: "button", "aria-label": "Next", class: "carousel__next", ref: (el) => (this.nextBtnRef = el) }, h("svg", { key: 'e6e4eff954b1b08711cc843de558e00a8257e9f8', class: "carousel__icon", "stroke-width": "1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { key: '37b394093f327bdc46f8da1dcf78ec609a585a0a', "stroke-linecap": "round", "stroke-linejoin": "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }))))));
+    }
+    static get is() { return "fast-carousel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["carousel.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["carousel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "unknown[] | string | undefined",
+                    "resolved": "string | unknown[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional list of items to render as slides (each item in a slide). When set, slot is ignored. Accepts array or JSON string."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items"
+            },
+            "loop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the carousel loops."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loop",
+                "defaultValue": "true"
+            },
+            "class": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Extra class for the root carousel element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "class"
+            },
+            "controlClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Extra class for the controls container."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "control-class"
+            },
+            "slideClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Extra class for the slide viewport."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "slide-class"
+            },
+            "itemClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Extra class for each slide item (items mode only)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "item-class"
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "scrollPrev": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Go to the previous slide.",
+                    "tags": []
+                }
+            },
+            "scrollNext": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Go to the next slide.",
+                    "tags": []
+                }
+            },
+            "goToSlide": {
+                "complexType": {
+                    "signature": "(index: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "index",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Go to slide by index (0-based).",
+                    "tags": []
+                }
+            },
+            "getEmbla": {
+                "complexType": {
+                    "signature": "() => Promise<unknown>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<unknown>"
+                },
+                "docs": {
+                    "text": "Get the Embla API instance (if initialized). Returns null before init or after destroy.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/jobs-list-only-ui/jobs-list-only-ui.css

@@ -0,0 +1,228 @@
+/* Jobs list only - presentation styles (standalone / mock) */
+:host {
+  display: block;
+}
+
+.jobs-list-root {
+  list-style: none;
+}
+
+.results-container {
+  position: relative;
+}
+
+.loader {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border: 2px solid #ddd;
+  border-top-color: #1f9755;
+  border-radius: 50%;
+  animation: jobs-list-spin 0.8s linear infinite;
+}
+
+.loader.hide {
+  display: none;
+}
+
+@keyframes jobs-list-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.card {
+  border: 0;
+}
+
+.results-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: block;
+}
+
+.results-list.front {
+  margin: 3px 0;
+}
+
+.results-list__item {
+  list-style: none;
+  padding: 10px 0;
+  border-bottom: 1px solid #ddd;
+  margin: 15px 0;
+  display: inline-block;
+  width: 100%;
+  position: relative;
+}
+
+.results-list__item:last-child {
+  border-bottom: none;
+}
+
+.results-list__item-header {
+  margin: 10px 0;
+  font-size: 18px;
+  font-weight: 700;
+  display: flex;
+  flex-direction: column;
+}
+
+.results-list__item-title {
+  margin: 0;
+}
+
+.results-list__item-title--link {
+  text-decoration: none;
+  color: #1f9755;
+}
+
+.results-list__item-title--link:hover {
+  text-decoration: underline;
+}
+
+.reference {
+  margin-left: 8px;
+  font-size: 0.9em;
+  color: #666;
+}
+
+.reference.empty {
+  display: none;
+}
+
+.remote {
+  background: #f3f3f3;
+  color: #808285;
+  border-radius: 100px;
+  padding: 6px 16px;
+  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 24px;
+  margin-left: 8px;
+}
+
+.remote--empty {
+  display: none;
+}
+
+.results-list__item-distance {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 4px;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.results-list__item-distance--icon {
+  display: inline-flex;
+}
+
+.results-list__item-distance--icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+.results-list__item-content {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-top: 8px;
+}
+
+.results-list__item-info {
+  flex: 1;
+}
+
+.results-list__item-street,
+.results-list__item-brand,
+.results-list__item-employment-type {
+  margin: 10px 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
+}
+
+.results-list__item-street--empty,
+.results-list__item-brand--empty,
+.results-list__item-employment-type--empty {
+  color: #999;
+}
+
+.results-list__item-street--icon,
+.results-list__item-brand--icon,
+.results-list__item-employment-type--icon {
+  margin-right: 6px;
+  display: inline-flex;
+}
+
+.results-list__item-street--icon svg,
+.results-list__item-brand--icon svg,
+.results-list__item-employment-type--icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+.results-list__item-street--more-locations__wrapper {
+  margin-left: 8px;
+}
+
+.results-list__item-street--amount {
+  font-weight: 600;
+}
+
+.results-list__item-apply {
+  margin: 10px 0;
+  padding: 10px 20px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background-color: #198754;
+  color: #fff;
+  border-radius: 3px;
+  text-decoration: none;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.results-list__item-apply:hover {
+  background-color: #1f9755;
+  color: #fff;
+}
+
+.results-list__item-apply--icon svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* No results & suggestions */
+.share-jobs__no-results {
+  padding: 24px;
+  text-align: center;
+}
+
+.share-jobs__no-results h2,
+.share-jobs__no-results h3 {
+  margin: 8px 0;
+  font-weight: 600;
+}
+
+.card.primary-color {
+  padding: 16px;
+  border-radius: 4px;
+  background: #f8f9fa;
+}
+
+.result-suggestions-title {
+  margin: 0 0 12px 0;
+  font-size: 16px;
+}
+
+.results-list .result-suggestions-line {
+  list-style: none;
+  margin: 4px 0;
+}