@xplortech/apollo-core 1.0.0-beta.8 → 2.4.2

package/dist/collection/components/xpl-input/xpl-input-date/xpl-input-date.js

@@ -0,0 +1,377 @@
+import { Host, h } from "@stencil/core";
+import flatpickr from "flatpickr";
+const arrowSvg = (rotate = false) => `<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="${rotate
+    ? 'M0.557948 5.6813L6.06209 0.132167C6.23831 -0.0440556 6.52327 -0.0440556 6.69949 0.132167L7.44187 0.874551C7.61809 1.05077 7.61809 1.33573 7.44187 1.51195L2.99882 6L7.44187 10.488C7.61809 10.6643 7.61809 10.9492 7.44187 11.1254L6.69949 11.8678C6.52327 12.0441 6.23831 12.0441 6.06209 11.8678L0.557948 6.3187C0.381726 6.14248 0.381726 5.85752 0.557948 5.6813Z'
+    : 'M7.44187 6.3187L1.93773 11.8678C1.76151 12.0441 1.47655 12.0441 1.30033 11.8678L0.557948 11.1254C0.381726 10.9492 0.381726 10.6643 0.557948 10.488L5.001 6L0.557948 1.51195C0.381726 1.33573 0.381726 1.05077 0.557948 0.874551L1.30033 0.132167C1.47655 -0.0440556 1.76151 -0.0440556 1.93773 0.132167L7.44187 5.6813C7.6181 5.85752 7.6181 6.14248 7.44187 6.3187Z'}" /></svg>`;
+export class XplInputDate {
+    constructor() {
+        this.dateFormat = 'Y-m-d';
+        this.mode = 'single';
+        this.valueChanged = (event) => {
+            const target = event.target;
+            this.valueChange.emit(target.value);
+        };
+    }
+    onHasErrorStateChanged(newValue) {
+        this.hasErrorStateChanged.emit(newValue);
+    }
+    onValueChanged(newValue) {
+        var _a;
+        (_a = this.flatpickrInstance) === null || _a === void 0 ? void 0 : _a.setDate(newValue);
+    }
+    componentDidLoad() {
+        this.flatpickrInstance = flatpickr(this.input, {
+            allowInput: true,
+            dateFormat: this.dateFormat,
+            defaultDate: this.value,
+            maxDate: this.max,
+            minDate: this.min,
+            mode: this.mode,
+            nextArrow: arrowSvg(),
+            prevArrow: arrowSvg(true),
+            onClose: (selectedDates) => {
+                const minRequiredDates = !this.required ? 0 : this.mode === 'single' ? 1 : 2;
+                this.hasErrorState = selectedDates.length < minRequiredDates ? 'required' : null;
+                if (selectedDates.length === 2) {
+                    const [start, end] = selectedDates;
+                    this.rangeSelected.emit({
+                        start,
+                        end,
+                    });
+                }
+            },
+        });
+    }
+    render() {
+        return (h(Host, { key: '6024246dd7a92cc6396c634e8e87d614b1d860e3', class: {
+                'xpl-input-date': true,
+                [`xpl-input-date--mode-${this.mode}`]: true,
+                'xpl-input-date--error': !!this.hasErrorState,
+            } }, h("div", { key: '0c8fe7b8057715618ae040b64ee2ae6506051200', class: "xpl-input-wrapper" }, this.pre && (h("label", { key: 'd0d1048313962c7381b9fc4e2d07b107d42f86d1', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), h("input", { key: '3daca1a28baf14701e4b7a9761d2ff91be8dcd96', type: "date", id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, ref: (el) => {
+                this.input = el;
+            }, onChange: (event) => {
+                this.valueChanged(event);
+            } }), h("xpl-icon", { key: '82c57c4694c088debfb710e37bd90b5132fa3339', class: "xpl-input-calendar", icon: "calendar-month", size: 24 }), this.post && (h("label", { key: '553fa633312ed0adf1fd38352f40142e2b48eeaa', class: "xpl-input-post", htmlFor: this.inputId }, this.post)))));
+    }
+    static get is() { return "xpl-input-date"; }
+    static get properties() {
+        return {
+            "inputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `inputId` is used to associate the input with a label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input-id"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the field is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Most inputs are used in forms, and should have a\n`name` associated with the input for handling form data.\n\nApplies to all input types."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is required"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is editable"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Including a `value` will pre-populate the input\nwith the given string."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text that appears when the field has no value\n\nApplies to text, password, number, and date inputs."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "post": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A string (recommended max 3 characters) that gets shown\nvisually to the left of (before) the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "post"
+            },
+            "pre": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A string (recommended max 8 characters) that gets shown\nvisually to the right of (after) the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pre"
+            },
+            "max": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum value for the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max"
+            },
+            "min": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The minimum value for the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min"
+            },
+            "dateFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The date format to use for the datepicker input.\nThis is used by flatpickr to format the date.\nDefault is 'Y-m-d' (e.g., 2023-10-01).\n\nSee https://flatpickr.js.org/formatting/ for more details."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "date-format",
+                "defaultValue": "'Y-m-d'"
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'single' | /* \"multiple\" | */ 'range'",
+                    "resolved": "\"range\" | \"single\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "For datepicker inputs, whether to allow only a single\ndate or a range of dates. (Multiple non-consecutive\ndates planned to be supported in the future.)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mode",
+                "defaultValue": "'single'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasErrorState": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event that emits the current value of the input"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "hasErrorStateChanged",
+                "name": "hasErrorStateChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event that is emitted when the hasErrorState state changes."
+                },
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "rangeSelected",
+                "name": "rangeSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event that emits the selected date range when the mode is 'range'.\nThe emitted value is an object with `start` and `end` properties."
+                },
+                "complexType": {
+                    "original": "{ start: Date; end: Date }",
+                    "resolved": "{ start: Date; end: Date; }",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "hasErrorState",
+                "methodName": "onHasErrorStateChanged"
+            }, {
+                "propName": "value",
+                "methodName": "onValueChanged"
+            }];
+    }
+}

package/dist/collection/components/xpl-input/xpl-input-file/xpl-input-file.js

@@ -0,0 +1,276 @@
+import { Host, h, } from "@stencil/core";
+export class XplInputFile {
+    constructor() {
+        this.accept = '';
+        this.multiple = false;
+        this.hideTriggerOnSelect = false;
+        this.hideFileNames = false;
+        this.hideAcceptText = false;
+        this.files = null;
+        this.openFileDialog = () => {
+            var _a;
+            if (this.disabled) {
+                return;
+            }
+            (_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.click();
+        };
+        this.handleFileChange = (event) => {
+            const target = event.target;
+            this.files = Array.from(target.files);
+        };
+        this.onRemoveFileByIndex = (fileIndex) => {
+            this.files = this.files.filter((_, i) => i !== fileIndex);
+        };
+    }
+    onFilesChange(newFiles) {
+        this.inputChange.emit({
+            type: 'file',
+            value: newFiles,
+        });
+    }
+    async removeFileByIndex(fileIndex) {
+        this.onRemoveFileByIndex(fileIndex);
+    }
+    render() {
+        var _a, _b;
+        return (h(Host, { key: '984964735a57f0c1ae83b7a6e9ad548b8b732694', class: {
+                'xpl-input-file': true,
+                'xpl-input-file--hide-trigger-on-select': this.hideTriggerOnSelect,
+                'xpl-input-file--disabled': this.disabled,
+            } }, h("span", { key: '20da96646dda47226058869a6a3c188aa602ae7b', class: {
+                'xpl-input-file__trigger-wrapper': true,
+                'xpl-input-file__trigger-wrapper--hidden': this.hideTriggerOnSelect && ((_a = this.files) === null || _a === void 0 ? void 0 : _a.length) > 0,
+            }, role: "button", tabIndex: 0, onClick: this.openFileDialog }, h("slot", { key: 'd6355378f46c6a6edd193839e3ff24bd241db9b6', name: "trigger" })), ((_b = this.files) === null || _b === void 0 ? void 0 : _b.length) > 0 && !this.hideFileNames && (h("ul", { key: '48a7c3ff9668c7a7ad3e1f719c05f0439db0eb98', class: "xpl-input-file__file-list" }, this.files.map((file, fileIndex) => (h("li", { class: "xpl-input-file__file-item" }, h("span", { class: "xpl-text-callout" }, file.name), h("xpl-icon", { icon: "x-circle", size: 24, onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                this.onRemoveFileByIndex(fileIndex);
+            }, class: "xpl-input-file__remove-icon" })))))), this.accept && !this.hideAcceptText && (h("span", { key: '81a892b3c7cac161c4fe893b9e627055d43a13c8', class: "xpl-input-file__accept xpl-text-caption" }, "Accepted file types: ", this.accept)), h("input", { key: 'bb3e89c64ae62748b3e4afd5f80fcede37ae7b3a', onChange: this.handleFileChange, type: "file", ref: (el) => {
+                this.fileInput = el;
+            }, hidden: true, accept: this.accept, multiple: this.multiple, name: this.name })));
+    }
+    static get is() { return "xpl-input-file"; }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the field is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Most inputs are used in forms, and should have a\n`name` associated with the input for handling form data."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "_id": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Because `id` is a reserved HTMLElement attribute,\nwe prefix it with an underscore here so that it\ndoesn't get automatically applied to the outer container."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "_id"
+            },
+            "accept": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The accepted file types for the file input.\nCorresponds to the `accept` attribute on the input element.\nExample: 'image/*' for all image types, '.pdf' for PDF files, etc."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accept",
+                "defaultValue": "''"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the user can select multiple files at once.\nCorresponds to the `multiple` attribute on the input element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            },
+            "hideTriggerOnSelect": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the trigger element when a file is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-trigger-on-select",
+                "defaultValue": "false"
+            },
+            "hideFileNames": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the file names in the file upload component"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-file-names",
+                "defaultValue": "false"
+            },
+            "hideAcceptText": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the \"Accept\" text that indicates the accepted file types"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-accept-text",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "files": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "inputChange",
+                "name": "inputChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a file is selected.\nThe event detail contains the FileList object."
+                },
+                "complexType": {
+                    "original": "{\n        type: string;\n        value: File[] | null;\n    }",
+                    "resolved": "{ type: string; value: File[]; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "removeFileByIndex": {
+                "complexType": {
+                    "signature": "(fileIndex: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "fileIndex",
+                            "type": "number",
+                            "docs": "The index of the file to remove."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Removes a file from the selected files by its index.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "fileIndex The index of the file to remove."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "files",
+                "methodName": "onFilesChange"
+            }];
+    }
+}