@phatvu/web-component-poc 1.0.0 → 1.0.2

package/dist/cjs/app-globals-V2Kpy_OQ.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const globalScripts = () => {};
+
+exports.globalScripts = globalScripts;

package/dist/cjs/fast-button_2.cjs.entry.js

@@ -0,0 +1,211 @@
+'use strict';
+
+var index = require('./index-C756SOR-.js');
+
+const buttonCss = () => `:host{display:inline-block}.custom-button{display:inline-flex;align-items:center;justify-content:center;padding:0.5rem 1rem;font-family:inherit;font-size:0.875rem;font-weight:500;line-height:1.25;border:none;border-radius:0.375rem;cursor:pointer;transition:background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease}.custom-button:focus{outline:2px solid var(--custom-button-focus-ring, #2563eb);outline-offset:2px}.custom-button:focus:not(:focus-visible){outline:none}.custom-button--primary{background-color:var(--custom-button-primary-bg, #2563eb);color:var(--custom-button-primary-color, #fff)}.custom-button--primary:hover:not(.custom-button--disabled){background-color:var(--custom-button-primary-hover-bg, #1d4ed8)}.custom-button--primary:active:not(.custom-button--disabled){background-color:var(--custom-button-primary-active-bg, #1e40af)}.custom-button--secondary{background-color:var(--custom-button-secondary-bg, #e5e7eb);color:var(--custom-button-secondary-color, #1f2937)}.custom-button--secondary:hover:not(.custom-button--disabled){background-color:var(--custom-button-secondary-hover-bg, #d1d5db)}.custom-button--secondary:active:not(.custom-button--disabled){background-color:var(--custom-button-secondary-active-bg, #9ca3af)}.custom-button--text{background-color:transparent;color:var(--custom-button-text-color, #2563eb)}.custom-button--text:hover:not(.custom-button--disabled){background-color:var(--custom-button-text-hover-bg, rgba(37, 99, 235, 0.08))}.custom-button--text:active:not(.custom-button--disabled){background-color:var(--custom-button-text-active-bg, rgba(37, 99, 235, 0.12))}.custom-button--disabled,.custom-button:disabled{opacity:0.6;cursor:not-allowed}`;
+
+const CustomButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.buttonClick = index.createEvent(this, "buttonClick");
+    }
+    /**
+     * Visual variant of the button.
+     */
+    variant = 'primary';
+    /**
+     * Native button type (button or submit).
+     */
+    type = 'button';
+    /**
+     * When true, the button is disabled and does not emit events.
+     */
+    disabled = false;
+    /**
+     * Emitted when the button is clicked (not emitted when disabled).
+     */
+    buttonClick;
+    handleClick = (e) => {
+        if (this.disabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        this.buttonClick.emit(e);
+    };
+    render() {
+        return (index.h("button", { key: 'b373f44e11e651d0371ce3cade98b4650ccdd727', type: this.type, class: {
+                'custom-button': true,
+                [`custom-button--${this.variant}`]: true,
+                'custom-button--disabled': this.disabled,
+            }, disabled: this.disabled, onClick: this.handleClick }, index.h("slot", { key: '2a046bc70af051c04f4549def87dac7044b41e04' })));
+    }
+};
+CustomButton.style = buttonCss();
+
+/**
+ * Mock jobs for local development and docs.
+ * Use in www or static HTML: jobs='...' (JSON.stringify(mockJobs)).
+ */
+const mockJobsListOnly = [
+    {
+        title: 'Senior Software Engineer',
+        reference: 'REF-001',
+        originalURL: '/jobs/senior-software-engineer',
+        applyURL: 'https://apply.example.com/1',
+        brandName: 'Engineering',
+        isRemote: false,
+        locations: [
+            {
+                city: 'San Francisco',
+                stateAbbr: 'CA',
+                countryAbbr: 'US',
+                distance: 5.2,
+                streetAddress: '123 Market St',
+                cityStateAbbr: 'San Francisco, CA',
+            },
+        ],
+        employmentType: ['Full-time', 'Permanent'],
+    },
+    {
+        title: 'Product Manager',
+        reference: '',
+        originalURL: '/jobs/product-manager',
+        brandName: 'Product',
+        isRemote: true,
+        locations: [],
+        employmentType: ['Full-time'],
+    },
+    {
+        title: 'UX Designer',
+        reference: 'REF-003',
+        originalURL: '/jobs/ux-designer',
+        brandName: 'Design',
+        isRemote: false,
+        locations: [
+            {
+                city: 'New York',
+                stateAbbr: 'NY',
+                countryAbbr: 'US',
+                distance: 0,
+                cityStateAbbr: 'New York, NY',
+            },
+            {
+                city: 'Boston',
+                stateAbbr: 'MA',
+                countryAbbr: 'US',
+                cityStateAbbr: 'Boston, MA',
+            },
+        ],
+        employmentType: ['Full-time', 'Contract'],
+    },
+];
+
+const jobsListOnlyUiCss = () => `: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}.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}`;
+
+const defaultNoResultsLine1 = "Sorry, we're not able to load results for your search.";
+const defaultNoResultsLine2 = 'Please refine your keywords in the search bar above and try again.';
+function getLocationLabel(loc) {
+    if (loc.cityStateAbbr)
+        return loc.cityStateAbbr;
+    const parts = [loc.streetAddress, loc.city, loc.stateAbbr || loc.state, loc.countryAbbr || loc.country].filter(Boolean);
+    return parts.join(', ') || loc.locationText || '';
+}
+function getFirstLocation(job) {
+    const locs = job.locations;
+    if (!locs?.length)
+        return undefined;
+    return locs[0];
+}
+const JobsListOnlyUI = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /**
+     * When "true", use built-in mock data (for local/dev/docs). Otherwise use `jobs` from API/parent.
+     */
+    mockData = false;
+    /** List of jobs to display. Pass as JSON string from attribute or as array via property (e.g. from React). Ignored when mock-data="true". */
+    jobs = [];
+    /** Show loading spinner. Ignored when mock-data="true" (mock shows data immediately). */
+    loading = false;
+    /** Total job count (for screen readers / schema). */
+    totalJob = 0;
+    noResultsLine1 = defaultNoResultsLine1;
+    noResultsLine2 = defaultNoResultsLine2;
+    applyButtonText = 'Apply Now';
+    showBrand = true;
+    showReference = false;
+    showEmploymentType = true;
+    streetFormat = '{street}, {city_state_abbr}';
+    multiLocationText = 'More locations';
+    remoteLocationText = 'Remote';
+    enableKilometers = false;
+    /** Extra CSS class on the root element (avoid prop name "class" / "classname" reserved). */
+    rootClass = '';
+    showSuggestions = false;
+    clearResultSuggestionsTitleText = 'Suggestions';
+    clearResultSuggestionsLine1 = 'Try different keywords';
+    clearResultSuggestionsLine2 = 'Make sure everything is spelled correctly';
+    clearResultSuggestionsLine3 = 'Try other locations';
+    clearResultSuggestionsLine4 = '';
+    getJobsArray() {
+        if (this.mockData) {
+            return mockJobsListOnly;
+        }
+        const j = this.jobs;
+        if (Array.isArray(j))
+            return j;
+        if (typeof j === 'string') {
+            try {
+                const parsed = JSON.parse(j);
+                return Array.isArray(parsed) ? parsed : [];
+            }
+            catch {
+                return [];
+            }
+        }
+        return [];
+    }
+    formatDistance(distance) {
+        const value = this.enableKilometers ? distance * 1.60934 : distance;
+        const unit = this.enableKilometers ? 'Km' : 'Miles';
+        const str = `${value.toFixed(1)} ${unit}`.replace('.0', '');
+        return str;
+    }
+    renderJobItem(job, _index) {
+        const firstLoc = getFirstLocation(job);
+        const locationLabel = firstLoc ? getLocationLabel(firstLoc) : '';
+        const distance = firstLoc?.distance ?? 0;
+        const distanceLabel = distance > 0 ? this.formatDistance(distance) : '';
+        const applyHref = job.applyURL || (job.originalURL ? `${typeof window !== 'undefined' ? window.location.origin : ''}${job.originalURL}` : '#');
+        const applyLabel = `${this.applyButtonText}, ${job.title || ''}`;
+        const locs = job.locations ?? [];
+        const hasMultipleLocations = locs.length > 1;
+        return (index.h("li", { class: "results-list__item" }, index.h("div", { class: "results-list__item-header" }, index.h("h3", { class: "results-list__item-title" }, index.h("a", { class: "results-list__item-title--link", href: applyHref, target: "_blank", rel: "noopener noreferrer" }, job.title || ''), this.showReference && (index.h("span", { class: `reference ${job.reference ? '' : 'empty'}` }, job.reference || '')), job.isRemote && (index.h("span", { class: this.remoteLocationText ? 'remote' : 'remote remote--empty' }, this.remoteLocationText))), distanceLabel && (index.h("div", { class: "results-list__item-distance" }, index.h("span", { class: "results-list__item-distance--icon" }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z" }), index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 8v4l2 2" }))), index.h("span", { class: "results-list__item-distance--label" }, distanceLabel)))), index.h("div", { class: "results-list__item-content" }, index.h("div", { class: "results-list__item-info" }, index.h("div", { class: locs.length
+                ? 'results-list__item-street'
+                : 'results-list__item-street results-list__item-street--empty' }, index.h("div", { class: "results-list__item-street--label__wrapper" }, index.h("span", { class: "results-list__item-street--icon" }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" }), index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0z" }))), index.h("span", { class: "results-list__item-street--label" }, locationLabel || '—')), hasMultipleLocations && (index.h("div", { class: "results-list__item-street--more-locations__wrapper" }, index.h("span", { class: "results-list__item-street--amount" }, "+", locs.length - 1), index.h("span", { class: "results-list__item-street--more-locations" }, this.multiLocationText)))), this.showBrand && (index.h("div", { class: job.brandName
+                ? 'results-list__item-brand'
+                : 'results-list__item-brand results-list__item-brand--empty' }, index.h("span", { class: "results-list__item-brand--icon" }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008z" }))), index.h("span", { class: "results-list__item-brand--label" }, job.brandName || '—'))), this.showEmploymentType && (index.h("div", { class: job.employmentType?.length
+                ? 'results-list__item-employment-type'
+                : 'results-list__item-employment-type results-list__item-employment-type--empty' }, index.h("span", { class: "results-list__item-employment-type--icon" }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" }))), (job.employmentType?.length
+            ? job.employmentType
+            : ['—']).map((type) => (index.h("span", { key: type, class: "results-list__item-employment-type--label" }, type))))), (job.jobCardExtraFields ?? []).map((field, i) => (index.h("div", { key: i, class: (Array.isArray(field.value) ? field.value.length : field.value)
+                ? field.classname
+                : `${field.classname}--empty` }, Array.isArray(field.value)
+            ? field.value.map((v, j) => (index.h("span", { key: j, class: `${field.classname}--label` }, v)))
+            : (index.h("span", { class: `${field.classname}--label` }, String(field.value))))))), index.h("a", { class: "results-list__item-apply", href: applyHref, target: "_blank", rel: "noopener noreferrer", "aria-label": applyLabel }, index.h("span", { class: "results-list__item-apply--label" }, this.applyButtonText), index.h("span", { class: "results-list__item-apply--icon" }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M13 7l5 5m0 0l-5 5m5-5H6" })))))));
+    }
+    render() {
+        const jobsArray = this.getJobsArray();
+        const loading = this.mockData ? false : this.loading;
+        const totalJob = this.mockData ? jobsArray.length : (this.totalJob || jobsArray.length);
+        const showNoResults = !loading && totalJob === 0 && !this.showSuggestions;
+        const showSuggestionsBlock = !loading && totalJob === 0 && this.showSuggestions;
+        return (index.h("div", { key: 'c2e9c9146a24f0869cbd75588b2718c94f62bbbc', class: `jobs-list-root ${this.rootClass}`.trim() }, index.h("div", { key: 'b2f3dffe7e17797b378bd648f54e46bb31e2d374', class: "results-container" }, index.h("div", { key: '4733870b035ec307b6e691f1d62ed8568e93fd1f', class: loading ? 'loader' : 'loader hide', "aria-hidden": !loading }), totalJob > 0 && (index.h("div", { key: 'a9438f079041e0121fafdcb42089f27482475491', class: "card" }, index.h("ul", { key: '3bd7dcc64f46aec24945a25df7345766606a51bd', class: "results-list front" }, jobsArray.map((job, index) => this.renderJobItem(job, index))))), showNoResults && (index.h("div", { key: '1996476568c745e0ada31b47bb1a1be2efaf6917', class: "share-jobs__no-results" }, index.h("h2", { key: '8d2a79881428d89d783b05f26d06abbef94f5c2e' }, this.noResultsLine1), index.h("h3", { key: '855704ea47b06a701c0e59a8bb43fb405ad3bb96' }, this.noResultsLine2))), showSuggestionsBlock && (index.h("div", { key: '74da6e8243423dc9770f4dc67f46f5627c352349', class: "card primary-color" }, index.h("h4", { key: 'd3fb2ef03a656331f97afe3692b05bbe064ed124', class: "result-suggestions-title" }, this.clearResultSuggestionsTitleText, ":"), index.h("ul", { key: '63914647653930e6c686a38d779af20e7e5c17d5', class: "results-list front" }, index.h("li", { key: '82063c023701d0c42ca2787f382d42a80f569b6a', class: "result-suggestions-line" }, this.clearResultSuggestionsLine1), index.h("li", { key: '7645d7a7435f76854b8eeb0d693a883fc341764e', class: "result-suggestions-line" }, this.clearResultSuggestionsLine2), index.h("li", { key: '060675d017137e8b23342c92efadc769e2bae1c2', class: "result-suggestions-line" }, this.clearResultSuggestionsLine3), this.clearResultSuggestionsLine4 && (index.h("li", { key: '0f6ef00a4f6267dc9ad2441e16f02c82b0994d03', class: "result-suggestions-line" }, this.clearResultSuggestionsLine4))))))));
+    }
+};
+JobsListOnlyUI.style = jobsListOnlyUiCss();
+
+exports.fast_button = CustomButton;
+exports.jobs_list_only_ui = JobsListOnlyUI;