@phatvu/web-component-poc 1.0.0 → 1.0.2

package/dist/cjs/index.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}
+
+exports.format = format;

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var index = require('./index-C756SOR-.js');
+var appGlobals = require('./app-globals-V2Kpy_OQ.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["fast-button_2.cjs",[[769,"fast-button",{"variant":[1],"type":[1],"disabled":[4]}],[512,"jobs-list-only-ui",{"mockData":[4,"mock-data"],"jobs":[1],"loading":[4],"totalJob":[2,"total-job"],"noResultsLine1":[1,"no-results-line-1"],"noResultsLine2":[1,"no-results-line-2"],"applyButtonText":[1,"apply-button-text"],"showBrand":[4,"show-brand"],"showReference":[4,"show-reference"],"showEmploymentType":[4,"show-employment-type"],"streetFormat":[1,"street-format"],"multiLocationText":[1,"multi-location-text"],"remoteLocationText":[1,"remote-location-text"],"enableKilometers":[4,"enable-kilometers"],"rootClass":[1,"root-class"],"showSuggestions":[4,"show-suggestions"],"clearResultSuggestionsTitleText":[1,"clear-result-suggestions-title-text"],"clearResultSuggestionsLine1":[1,"clear-result-suggestions-line-1"],"clearResultSuggestionsLine2":[1,"clear-result-suggestions-line-2"],"clearResultSuggestionsLine3":[1,"clear-result-suggestions-line-3"],"clearResultSuggestionsLine4":[1,"clear-result-suggestions-line-4"]}]]],["fast-carousel.cjs",[[769,"fast-carousel",{"items":[1],"loop":[4],"class":[1],"controlClass":[1,"control-class"],"slideClass":[1,"slide-class"],"itemClass":[1,"item-class"],"scrollPrev":[64],"scrollNext":[64],"goToSlide":[64],"getEmbla":[64]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/cjs/web-component-poc.cjs.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var index = require('./index-C756SOR-.js');
+var appGlobals = require('./app-globals-V2Kpy_OQ.js');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+/*
+ Stencil Client Patch Browser v4.43.2 | MIT Licensed | https://stenciljs.com
+ */
+
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('web-component-poc.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["fast-button_2.cjs",[[769,"fast-button",{"variant":[1],"type":[1],"disabled":[4]}],[512,"jobs-list-only-ui",{"mockData":[4,"mock-data"],"jobs":[1],"loading":[4],"totalJob":[2,"total-job"],"noResultsLine1":[1,"no-results-line-1"],"noResultsLine2":[1,"no-results-line-2"],"applyButtonText":[1,"apply-button-text"],"showBrand":[4,"show-brand"],"showReference":[4,"show-reference"],"showEmploymentType":[4,"show-employment-type"],"streetFormat":[1,"street-format"],"multiLocationText":[1,"multi-location-text"],"remoteLocationText":[1,"remote-location-text"],"enableKilometers":[4,"enable-kilometers"],"rootClass":[1,"root-class"],"showSuggestions":[4,"show-suggestions"],"clearResultSuggestionsTitleText":[1,"clear-result-suggestions-title-text"],"clearResultSuggestionsLine1":[1,"clear-result-suggestions-line-1"],"clearResultSuggestionsLine2":[1,"clear-result-suggestions-line-2"],"clearResultSuggestionsLine3":[1,"clear-result-suggestions-line-3"],"clearResultSuggestionsLine4":[1,"clear-result-suggestions-line-4"]}]]],["fast-carousel.cjs",[[769,"fast-carousel",{"items":[1],"loop":[4],"class":[1],"controlClass":[1,"control-class"],"slideClass":[1,"slide-class"],"itemClass":[1,"item-class"],"scrollPrev":[64],"scrollNext":[64],"goToSlide":[64],"getEmbla":[64]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,15 @@
+{
+  "entries": [
+    "components/button/button.js",
+    "components/fast-carousel/carousel.js",
+    "components/jobs-list-only-ui/jobs-list-only-ui.js"
+  ],
+  "mixins": [],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.43.2",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/button/button.css

@@ -0,0 +1,76 @@
+: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;
+}
+
+/* Primary */
+.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);
+}
+
+/* Secondary */
+.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);
+}
+
+/* Text */
+.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));
+}
+
+/* Disabled */
+.custom-button--disabled,
+.custom-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}

package/dist/collection/components/button/button.js

@@ -0,0 +1,145 @@
+import { h } from "@stencil/core";
+export class CustomButton {
+    /**
+     * 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 (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 }, h("slot", { key: '2a046bc70af051c04f4549def87dac7044b41e04' })));
+    }
+    static get is() { return "fast-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonVariant",
+                    "resolved": "\"primary\" | \"secondary\" | \"text\"",
+                    "references": {
+                        "ButtonVariant": {
+                            "location": "local",
+                            "path": "/Users/phat.vu/Documents/Paradox/web-component-poc/src/components/button/button.tsx",
+                            "id": "src/components/button/button.tsx::ButtonVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant of the button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'primary'"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonType",
+                    "resolved": "\"button\" | \"submit\"",
+                    "references": {
+                        "ButtonType": {
+                            "location": "local",
+                            "path": "/Users/phat.vu/Documents/Paradox/web-component-poc/src/components/button/button.tsx",
+                            "id": "src/components/button/button.tsx::ButtonType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Native button type (button or submit)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'button'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, the button is disabled and does not emit events."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "buttonClick",
+                "name": "buttonClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the button is clicked (not emitted when disabled)."
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,98 @@
+:host {
+  display: block;
+}
+
+.carousel {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.carousel__viewport {
+  overflow: hidden;
+  touch-action: pan-y pinch-zoom;
+}
+
+.carousel__container {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  margin-left: calc(-0.4rem);
+}
+
+.carousel__container ::slotted(*) {
+  flex: 0 0 50%;
+  width: 50%;
+  height: 100%;
+  padding-left: 0.4rem;
+  box-sizing: border-box;
+}
+
+.carousel__slide {
+  flex: 0 0 50%;
+  width: 50%;
+  height: 100%;
+  padding-left: 0.4rem;
+  box-sizing: border-box;
+}
+
+.carousel__controls {
+  display: flex;
+  gap: 0.25rem;
+  margin-top: 0.25rem;
+  justify-content: center;
+  align-items: center;
+}
+
+.carousel__prev,
+.carousel__next {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: currentColor;
+}
+
+.carousel__prev:disabled,
+.carousel__next:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.carousel__icon {
+  width: 2.4rem;
+  height: 2.4rem;
+}
+
+.carousel__dots {
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+}
+
+.carousel__dot {
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  width: 0.5rem;
+  height: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.carousel__dot-inner {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: var(--carousel-dot-bg, #cbd5e1);
+  transition: background-color 0.2s ease;
+}
+
+.carousel__dot.current .carousel__dot-inner {
+  background-color: var(--carousel-dot-active-bg, #94a3b8);
+}