@phatvu/web-component-poc 1.0.5 → 1.0.7

package/dist/collection/components/job-card/job-card.css

@@ -0,0 +1,247 @@
+/* Job Card Component Styles */
+
+.job-card {
+  display: block;
+  padding: 16px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  background-color: #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+  transition: box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.job-card:hover {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
+  border-color: #d0d0d0;
+}
+
+/* Header Section */
+.job-card__header {
+  margin-bottom: 12px;
+}
+
+.job-card__title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.job-card__title--link {
+  text-decoration: none;
+  color: #1f9755;
+  transition: color 0.2s ease;
+}
+
+.job-card__title--link:hover {
+  text-decoration: underline;
+  color: #1a7a43;
+}
+
+.job-card__reference {
+  font-size: 0.875em;
+  color: #666;
+  background-color: #f5f5f5;
+  padding: 2px 6px;
+  border-radius: 3px;
+}
+
+.job-card__reference--empty {
+  display: none;
+}
+
+.job-card__remote {
+  background: #e8f5e9;
+  color: #2e7d32;
+  border-radius: 100px;
+  padding: 4px 12px;
+  text-transform: uppercase;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1.5;
+  white-space: nowrap;
+}
+
+.job-card__remote--empty {
+  display: none;
+}
+
+/* Distance Badge */
+.job-card__distance {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #555;
+}
+
+.job-card__distance--icon {
+  display: inline-flex;
+  align-items: center;
+}
+
+.job-card__distance--icon svg {
+  width: 16px;
+  height: 16px;
+  color: #1f9755;
+}
+
+/* Content Section */
+.job-card__content {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.job-card__info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* Info Rows - Location, Brand, Employment Type */
+.job-card__street,
+.job-card__brand,
+.job-card__employment-type {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px 6px;
+  font-size: 14px;
+}
+
+.job-card__street--empty,
+.job-card__brand--empty,
+.job-card__employment-type--empty {
+  color: #999;
+}
+
+.job-card__street--icon,
+.job-card__brand--icon,
+.job-card__employment-type--icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.job-card__street--icon svg,
+.job-card__brand--icon svg,
+.job-card__employment-type--icon svg {
+  width: 16px;
+  height: 16px;
+  color: #666;
+}
+
+.job-card__street--label,
+.job-card__brand--label,
+.job-card__employment-type--label {
+  color: #333;
+}
+
+.job-card__street--label__wrapper {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.job-card__street--more-locations__wrapper {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  font-size: 12px;
+  margin-left: 2px;
+}
+
+.job-card__street--amount {
+  font-weight: 600;
+  color: #1f9755;
+}
+
+.job-card__street--more-locations {
+  color: #999;
+}
+
+/* Apply Button */
+.job-card__apply {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 10px 16px;
+  background-color: #198754;
+  color: #fff;
+  border-radius: 4px;
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 14px;
+  transition: background-color 0.2s ease, transform 0.1s ease;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.job-card__apply:hover {
+  background-color: #1a6f47;
+  transform: translateY(-1px);
+}
+
+.job-card__apply:active {
+  transform: translateY(0);
+}
+
+.job-card__apply--icon {
+  display: inline-flex;
+  align-items: center;
+}
+
+.job-card__apply--icon svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .job-card {
+    padding: 12px;
+  }
+
+  .job-card__content {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .job-card__apply {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .job-card__title {
+    font-size: 16px;
+  }
+}
+
+@media (max-width: 480px) {
+  .job-card {
+    padding: 10px;
+  }
+
+  .job-card__title {
+    font-size: 15px;
+  }
+
+  .job-card__distance {
+    font-size: 12px;
+  }
+
+  .job-card__street,
+  .job-card__brand,
+  .job-card__employment-type {
+    font-size: 13px;
+  }
+}

package/dist/collection/components/job-card/job-card.js

@@ -0,0 +1,435 @@
+import { h } from "@stencil/core";
+/**
+ * Helper function to get formatted location label from location object
+ */
+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 || '';
+}
+/**
+ * Helper function to get the first location from job locations
+ */
+function getFirstLocation(job) {
+    const locs = job.locations;
+    if (!locs?.length)
+        return undefined;
+    return locs[0];
+}
+/**
+ * JobCard Component
+ *
+ * A reusable card component for displaying job information based on the React JobItem component.
+ * Features include:
+ * - Job title with apply link
+ * - Location with distance
+ * - Brand/company name
+ * - Employment type
+ * - Reference number (optional)
+ * - Remote indicator (optional)
+ * - Multi-location support
+ * - Custom extra fields
+ *
+ * @example
+ * ```html
+ * <job-card
+ *   .job={jobData}
+ *   applyButtonText="Apply"
+ *   showBrand="true"
+ *   showEmploymentType="true"
+ * ></job-card>
+ * ```
+ */
+export class JobCard {
+    /**
+     * The job data object to display. Accepts either a Job object or a JSON string.
+     */
+    job;
+    /**
+     * Index of the job in a list (used for accessibility)
+     */
+    index = 0;
+    /**
+     * Text for the apply button
+     */
+    applyButtonText = 'Apply Now';
+    /**
+     * Whether to show the brand/company name
+     */
+    showBrand = true;
+    /**
+     * Whether to show the reference number
+     */
+    showReference = false;
+    /**
+     * Whether to show employment type
+     */
+    showEmploymentType = true;
+    /**
+     * Text shown for multiple locations
+     */
+    multiLocationText = 'More locations';
+    /**
+     * Text shown for remote jobs
+     */
+    remoteLocationText = 'Remote';
+    /**
+     * Whether to show distances in kilometers instead of miles
+     */
+    enableKilometers = false;
+    /**
+     * Whether to show commute time
+     */
+    showCommuteTime = false;
+    /**
+     * Format string for street address (not used in base web component)
+     */
+    streetFormat = '{street}, {city_state_abbr}';
+    /** Extra CSS class on the root inner element (avoid prop name "className", reserved on HTMLElement). */
+    rootClass = '';
+    /**
+     * Custom extra fields configuration
+     */
+    extraFieldsConfig = [];
+    /**
+     * Format distance with unit
+     */
+    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;
+    }
+    /**
+     * Is Empty utility
+     */
+    isEmpty(value) {
+        if (value === null || value === undefined || value === '') {
+            return true;
+        }
+        if (Array.isArray(value) && value.length === 0) {
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Parse job data from prop - handles both object and JSON string
+     */
+    getJobData() {
+        if (!this.job)
+            return null;
+        if (typeof this.job === 'string') {
+            try {
+                return JSON.parse(this.job);
+            }
+            catch {
+                console.warn('job-card: Failed to parse job JSON string');
+                return null;
+            }
+        }
+        return this.job;
+    }
+    render() {
+        const job = this.getJobData();
+        if (!job)
+            return null;
+        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 (h("div", { class: `job-card ${this.rootClass}`.trim() }, h("div", { class: "job-card__header" }, h("h3", { class: "job-card__title" }, h("a", { class: "job-card__title--link", href: applyHref, target: "_blank", rel: "noopener noreferrer" }, job.title || ''), this.showReference && (h("span", { class: `job-card__reference ${job.reference ? '' : 'job-card__reference--empty'}` }, job.reference || '')), job.isRemote && (h("span", { class: this.remoteLocationText ? 'job-card__remote' : 'job-card__remote job-card__remote--empty' }, this.remoteLocationText))), distanceLabel && (h("div", { class: "job-card__distance" }, h("span", { class: "job-card__distance--icon" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z" }), h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 8v4l2 2" }))), h("span", { class: "job-card__distance--label" }, distanceLabel)))), h("div", { class: "job-card__content" }, h("div", { class: "job-card__info" }, h("div", { class: locs.length ? 'job-card__street' : 'job-card__street job-card__street--empty' }, h("div", { class: "job-card__street--label__wrapper" }, h("span", { class: "job-card__street--icon" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, 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" }), 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" }))), h("span", { class: "job-card__street--label" }, locationLabel || '—')), hasMultipleLocations && (h("div", { class: "job-card__street--more-locations__wrapper" }, h("span", { class: "job-card__street--amount" }, "+", locs.length - 1), h("span", { class: "job-card__street--more-locations" }, this.multiLocationText)))), this.showBrand && (h("div", { class: job.brandName ? 'job-card__brand' : 'job-card__brand job-card__brand--empty' }, h("span", { class: "job-card__brand--icon" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, 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" }))), h("span", { class: "job-card__brand--label" }, job.brandName || '—'))), this.showEmploymentType && (h("div", { class: job.employmentType?.length
+                ? 'job-card__employment-type'
+                : 'job-card__employment-type job-card__employment-type--empty' }, h("span", { class: "job-card__employment-type--icon" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, 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) => (h("span", { key: type, class: "job-card__employment-type--label" }, type)))) : (h("span", { class: "job-card__employment-type--label" }, "\u2014")))), (job.jobCardExtraFields ?? []).length > 0 &&
+            job.jobCardExtraFields?.map((field, idx) => (h("div", { key: idx, class: !this.isEmpty(field.value) ? `${field.classname}` : `${field.classname}--empty` }, Array.isArray(field.value) ? (field.value.map((item, itemIdx) => (h("span", { key: itemIdx, class: `${field.classname}--label` }, item)))) : (h("span", { class: `${field.classname}--label` }, field.value)))))), h("a", { class: "job-card__apply", href: applyHref, target: "_blank", rel: "noopener noreferrer", "aria-label": applyLabel }, h("span", { class: "job-card__apply--label" }, this.applyButtonText), h("span", { class: "job-card__apply--icon" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" })))))));
+    }
+    static get is() { return "job-card"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["job-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["job-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "job": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Job | string",
+                    "resolved": "Job | string",
+                    "references": {
+                        "Job": {
+                            "location": "import",
+                            "path": "../../types/jobs-list",
+                            "id": "src/types/jobs-list.ts::Job",
+                            "referenceLocation": "Job"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The job data object to display. Accepts either a Job object or a JSON string."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "job"
+            },
+            "index": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Index of the job in a list (used for accessibility)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "index",
+                "defaultValue": "0"
+            },
+            "applyButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text for the apply button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "apply-button-text",
+                "defaultValue": "'Apply Now'"
+            },
+            "showBrand": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the brand/company name"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-brand",
+                "defaultValue": "true"
+            },
+            "showReference": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the reference number"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-reference",
+                "defaultValue": "false"
+            },
+            "showEmploymentType": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show employment type"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-employment-type",
+                "defaultValue": "true"
+            },
+            "multiLocationText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text shown for multiple locations"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multi-location-text",
+                "defaultValue": "'More locations'"
+            },
+            "remoteLocationText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text shown for remote jobs"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "remote-location-text",
+                "defaultValue": "'Remote'"
+            },
+            "enableKilometers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show distances in kilometers instead of miles"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-kilometers",
+                "defaultValue": "false"
+            },
+            "showCommuteTime": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show commute time"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-commute-time",
+                "defaultValue": "false"
+            },
+            "streetFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Format string for street address (not used in base web component)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "street-format",
+                "defaultValue": "'{street}, {city_state_abbr}'"
+            },
+            "rootClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Extra CSS class on the root inner element (avoid prop name \"className\", reserved on HTMLElement)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "root-class",
+                "defaultValue": "''"
+            },
+            "extraFieldsConfig": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<{ name: string; value: string }>",
+                    "resolved": "{ name: string; value: string; }[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom extra fields configuration"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+}

package/dist/collection/components/jobs-item/jobs-item.js

@@ -68,14 +68,14 @@ export class JobsItem {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "JobSummary",
-                    "resolved": "JobSummary",
+                    "original": "Job",
+                    "resolved": "Job",
                     "references": {
-                        "JobSummary": {
+                        "Job": {
                             "location": "import",
                             "path": "../../types/jobs-list",
-                            "id": "src/types/jobs-list.ts::JobSummary",
-                            "referenceLocation": "JobSummary"
+                            "id": "src/types/jobs-list.ts::Job",
+                            "referenceLocation": "Job"
                         }
                     }
                 },