@usecapsule/core-components 3.0.0 → 3.0.1-dev.1

package/dist/collection/components/cpsl-file-upload/cpsl-file-upload.js

@@ -0,0 +1,406 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try {
+            step(generator.next(value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function rejected(value) { try {
+            step(generator["throw"](value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Host, h, Fragment } from "@stencil/core";
+export class CpslFileUpload {
+    constructor() {
+        this.inputId = `cpsl-file-upload-${inputIds++}`;
+        this.handleDrop = (ev) => __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            ev.preventDefault();
+            const item = (_a = Array.from(ev.dataTransfer.items)) === null || _a === void 0 ? void 0 : _a[0];
+            if (item && this.isValidFile(item.type)) {
+                const file = item.getAsFile();
+                yield this.addFile(file);
+            }
+            this.dragOver = false;
+            this.dragError = false;
+            this.cpslOnDrop.emit(ev);
+        });
+        this.handleDragEnter = (ev) => {
+            var _a;
+            ev.preventDefault();
+            this.dragOver = true;
+            const item = (_a = Array.from(ev.dataTransfer.items)) === null || _a === void 0 ? void 0 : _a[0];
+            if (item && this.isValidFile(item.type)) {
+                this.dragError = true;
+            }
+            this.cpslOnDragEnter.emit(ev);
+        };
+        this.handleDragLeave = (ev) => {
+            ev.preventDefault();
+            this.dragOver = false;
+            this.dragError = false;
+            this.cpslOnDragLeave.emit(ev);
+        };
+        this.handleInputChange = (ev) => __awaiter(this, void 0, void 0, function* () {
+            ev.preventDefault();
+            const input = this.inputEl;
+            if (Boolean(input.files.length)) {
+                const file = input.files[0];
+                if (this.isValidFile(file.type)) {
+                    yield this.addFile(file);
+                }
+            }
+        });
+        this.isValidFile = (type) => {
+            var _a;
+            if (Boolean((_a = this.fileTypes) === null || _a === void 0 ? void 0 : _a.length) ? !this.fileTypes.includes(type) : false) {
+                return false;
+            }
+            return true;
+        };
+        this.addFile = (file) => __awaiter(this, void 0, void 0, function* () {
+            this.file = file;
+            this.cpslFileChange.emit(file);
+            this.uploadError = false;
+            this.isUploading = true;
+            const uploadSuccess = Boolean(this.uploadFile) ? yield this.uploadFile(file) : true;
+            if (!uploadSuccess) {
+                this.uploadError = true;
+                const input = this.inputEl;
+                input.value = '';
+            }
+            this.isUploading = false;
+        });
+        this.removeFile = (e) => {
+            e.preventDefault();
+            this.file = undefined;
+            const input = this.inputEl;
+            input.value = '';
+            this.cpslFileRemoved.emit();
+        };
+        this.file = undefined;
+        this.dragOver = undefined;
+        this.dragError = undefined;
+        this.isUploading = undefined;
+        this.uploadError = undefined;
+        this.errorText = undefined;
+        this.externalFilename = undefined;
+        this.externalSrc = undefined;
+        this.fileTypes = undefined;
+        this.helperText = undefined;
+        this.label = undefined;
+        this.required = false;
+        this.showOptionalLabel = false;
+        this.uploadFile = undefined;
+    }
+    get inputEl() {
+        return this.el.shadowRoot.getElementById(this.inputId);
+    }
+    get FileContent() {
+        var _a;
+        const hasFile = Boolean(this.file) || Boolean(this.externalSrc);
+        const isUploading = this.isUploading;
+        const error = this.uploadError;
+        const text = !hasFile ? (h(Fragment, null, 'Drag file here or ', h("cpsl-text", { class: "inline-text", variant: "bodyXS" }, "upload file"))) : isUploading ? (`${this.file.name} is uploading`) : error ? ('Upload Failed') : (((_a = this.file) === null || _a === void 0 ? void 0 : _a.name) || this.externalFilename || '');
+        const TopElement = !hasFile ? (h("cpsl-icon", { icon: "image" })) : isUploading ? (h("cpsl-spinner", null)) : error ? (h("cpsl-icon", { icon: "close" })) : (h("img", { class: "sample-img", src: Boolean(this.file) ? URL.createObjectURL(this.file) : this.externalSrc, alt: "Sample Image" }));
+        return (h(Fragment, null, TopElement, h("span", { class: "sample-image-name-container" }, h("cpsl-text", { class: "sample-image-name", variant: "bodyXS" }, text), hasFile && !error && !isUploading && h("cpsl-icon", { icon: "close", onClick: this.removeFile }))));
+    }
+    render() {
+        var _a, _b, _c;
+        return (h(Host, { key: '762561d4a888f40c6ef7914d44d3b5d29952c6eb' }, this.label && (h("label", { key: 'ca7847701395b4334d14e34cf065f943bec0d1af', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("slot", { key: '370ca2d812f44f13b20383f303ca7d6daefdfd84', name: "label" }), h("div", { key: 'bece00a4a0a32bb37c4573775cbbe5c89ae3030e', class: { 'container': true, 'error': Boolean(this.errorText), 'drag': this.dragOver, 'drag-error': this.dragError } }, h("div", { key: '32220f003406b15f94c68337ab321b6b07151be0', class: { 'label-container': true } }, h("slot", { key: '88a46b859592b1dbbea964d871ef36d77760da78', name: "left-content" })), h("div", { key: 'd4cbd5c095c8ba522c51a451d749d20c0fd7a5ab', class: { 'file-container': true } }, this.FileContent), h("input", { key: '3798b69f5670e18e9fa4dc34ae7ca661cd6f9294', id: this.inputId, type: "file", accept: (_b = (_a = this.fileTypes) === null || _a === void 0 ? void 0 : _a.join(', ')) !== null && _b !== void 0 ? _b : '*', files: Boolean(this.file) ? [this.file] : undefined, onDrop: this.handleDrop, onDragEnter: this.handleDragEnter, onDragLeave: this.handleDragLeave, onChange: this.handleInputChange })), (this.errorText || this.helperText) && (h("div", { key: '9217cfba0fabd2d8cad86ba34fd69f15cf0186a0', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '0e6f9be6e2042f72b0438cc5d979b21eb9f47356' }, (_c = this.errorText) !== null && _c !== void 0 ? _c : this.helperText)))));
+    }
+    static get is() { return "cpsl-file-upload"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-file-upload.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-file-upload.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "errorText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error text to show below the input. If this is provided the input will enter an error state."
+                },
+                "attribute": "error-text",
+                "reflect": false
+            },
+            "externalFilename": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Filename for the external source of the selected file."
+                },
+                "attribute": "external-filename",
+                "reflect": false
+            },
+            "externalSrc": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "External source for the selected file."
+                },
+                "attribute": "external-src",
+                "reflect": false
+            },
+            "fileTypes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Valid file types."
+                }
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text to show below the input. If `\"errorText\"` is provided that will take precedence."
+                },
+                "attribute": "helper-text",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The label for the input."
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the user must fill in a value before submitting a form."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showOptionalLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the label will display an \"optional\" tag."
+                },
+                "attribute": "show-optional-label",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "uploadFile": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(file: File) => Promise<boolean>",
+                    "resolved": "(file: File) => Promise<boolean>",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        },
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Function to trigger file upload to server.\nReturns: boolean indicating success or failure."
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "file": {},
+            "dragOver": {},
+            "dragError": {},
+            "isUploading": {},
+            "uploadError": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "cpslOnDrop",
+                "name": "cpslOnDrop",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the file is dropped in the input."
+                },
+                "complexType": {
+                    "original": "DragEvent",
+                    "resolved": "DragEvent",
+                    "references": {
+                        "DragEvent": {
+                            "location": "global",
+                            "id": "global::DragEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "cpslOnDragEnter",
+                "name": "cpslOnDragEnter",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the file drag enters the input."
+                },
+                "complexType": {
+                    "original": "DragEvent",
+                    "resolved": "DragEvent",
+                    "references": {
+                        "DragEvent": {
+                            "location": "global",
+                            "id": "global::DragEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "cpslOnDragLeave",
+                "name": "cpslOnDragLeave",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the file drag leaves the input."
+                },
+                "complexType": {
+                    "original": "DragEvent",
+                    "resolved": "DragEvent",
+                    "references": {
+                        "DragEvent": {
+                            "location": "global",
+                            "id": "global::DragEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "cpslFileChange",
+                "name": "cpslFileChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the file changes."
+                },
+                "complexType": {
+                    "original": "File",
+                    "resolved": "File",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "cpslFileRemoved",
+                "name": "cpslFileRemoved",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the file is removed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+let inputIds = 0;
+//# sourceMappingURL=cpsl-file-upload.js.map

package/dist/collection/components/cpsl-file-upload/cpsl-file-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-file-upload.js","sourceRoot":"","sources":["../../../../src/components/cpsl-file-upload/cpsl-file-upload.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, Event, h, EventEmitter, State, Fragment, Element } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-file-upload',\n  styleUrl: 'cpsl-file-upload.scss',\n  shadow: true,\n})\nexport class CpslFileUpload {\n  @Element() el!: HTMLCpslFileUploadElement;\n\n  private inputId = `cpsl-file-upload-${inputIds++}`;\n\n  @State() file?: File;\n  @State() dragOver?: boolean;\n  @State() dragError?: boolean;\n  @State() isUploading?: boolean;\n  @State() uploadError?: boolean;\n\n  /**\n   * Error text to show below the input. If this is provided the input will enter an error state.\n   */\n  @Prop() errorText?: string;\n\n  /**\n   * Filename for the external source of the selected file.\n   */\n  @Prop() externalFilename?: string;\n\n  /**\n   * External source for the selected file.\n   */\n  @Prop() externalSrc?: string;\n\n  /**\n   * Valid file types.\n   */\n  @Prop() fileTypes?: string[];\n\n  /**\n   * Helper text to show below the input. If `\"errorText\"` is provided that will take precedence.\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * The label for the input.\n   */\n  @Prop() label?: string;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required = false;\n\n  /**\n   * If `true`, the label will display an \"optional\" tag.\n   */\n  @Prop() showOptionalLabel = false;\n\n  /**\n   * Function to trigger file upload to server.\n   * Returns: boolean indicating success or failure.\n   */\n  @Prop() uploadFile?: (file: File) => Promise<boolean>;\n\n  /**\n   * Emitted when the file is dropped in the input.\n   */\n  @Event() cpslOnDrop!: EventEmitter<DragEvent>;\n\n  /**\n   * Emitted when the file drag enters the input.\n   */\n  @Event() cpslOnDragEnter!: EventEmitter<DragEvent>;\n\n  /**\n   * Emitted when the file drag leaves the input.\n   */\n  @Event() cpslOnDragLeave!: EventEmitter<DragEvent>;\n\n  /**\n   * Emitted when the file changes.\n   */\n  @Event() cpslFileChange!: EventEmitter<File>;\n\n  /**\n   * Emitted when the file is removed.\n   */\n  @Event() cpslFileRemoved!: EventEmitter<void>;\n\n  private handleDrop = async (ev: DragEvent) => {\n    ev.preventDefault();\n\n    const item = Array.from(ev.dataTransfer.items)?.[0];\n\n    if (item && this.isValidFile(item.type)) {\n      const file = item.getAsFile();\n      await this.addFile(file);\n    }\n\n    this.dragOver = false;\n    this.dragError = false;\n\n    this.cpslOnDrop.emit(ev);\n  };\n\n  private handleDragEnter = (ev: DragEvent) => {\n    ev.preventDefault();\n\n    this.dragOver = true;\n\n    const item = Array.from(ev.dataTransfer.items)?.[0];\n\n    if (item && this.isValidFile(item.type)) {\n      this.dragError = true;\n    }\n\n    this.cpslOnDragEnter.emit(ev);\n  };\n\n  private handleDragLeave = (ev: DragEvent) => {\n    ev.preventDefault();\n\n    this.dragOver = false;\n    this.dragError = false;\n\n    this.cpslOnDragLeave.emit(ev);\n  };\n\n  private handleInputChange = async (ev: Event) => {\n    ev.preventDefault();\n\n    const input = this.inputEl;\n\n    if (Boolean(input.files.length)) {\n      const file = input.files[0];\n\n      if (this.isValidFile(file.type)) {\n        await this.addFile(file);\n      }\n    }\n  };\n\n  private isValidFile = (type: string) => {\n    if (Boolean(this.fileTypes?.length) ? !this.fileTypes.includes(type) : false) {\n      return false;\n    }\n\n    return true;\n  };\n\n  private addFile = async (file: File) => {\n    this.file = file;\n    this.cpslFileChange.emit(file);\n    this.uploadError = false;\n    this.isUploading = true;\n    const uploadSuccess = Boolean(this.uploadFile) ? await this.uploadFile(file) : true;\n    if (!uploadSuccess) {\n      this.uploadError = true;\n      const input = this.inputEl;\n      input.value = '';\n    }\n    this.isUploading = false;\n  };\n\n  private removeFile = (e: MouseEvent) => {\n    e.preventDefault();\n\n    this.file = undefined;\n\n    const input = this.inputEl;\n    input.value = '';\n\n    this.cpslFileRemoved.emit();\n  };\n\n  get inputEl() {\n    return this.el.shadowRoot.getElementById(this.inputId) as HTMLInputElement;\n  }\n\n  get FileContent() {\n    const hasFile = Boolean(this.file) || Boolean(this.externalSrc);\n    const isUploading = this.isUploading;\n    const error = this.uploadError;\n\n    const text = !hasFile ? (\n      <Fragment>\n        {'Drag file here or '}\n        <cpsl-text class=\"inline-text\" variant=\"bodyXS\">\n          upload file\n        </cpsl-text>\n      </Fragment>\n    ) : isUploading ? (\n      `${this.file.name} is uploading`\n    ) : error ? (\n      'Upload Failed'\n    ) : (\n      this.file?.name || this.externalFilename || ''\n    );\n    const TopElement = !hasFile ? (\n      <cpsl-icon icon=\"image\" />\n    ) : isUploading ? (\n      <cpsl-spinner />\n    ) : error ? (\n      <cpsl-icon icon=\"close\" />\n    ) : (\n      <img class=\"sample-img\" src={Boolean(this.file) ? URL.createObjectURL(this.file) : this.externalSrc} alt=\"Sample Image\" />\n    );\n\n    return (\n      <Fragment>\n        {TopElement}\n        <span class=\"sample-image-name-container\">\n          <cpsl-text class=\"sample-image-name\" variant=\"bodyXS\">\n            {text}\n          </cpsl-text>\n          {hasFile && !error && !isUploading && <cpsl-icon icon=\"close\" onClick={this.removeFile} />}\n        </span>\n      </Fragment>\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.label && (\n          <label class=\"label\" htmlFor={this.inputId}>\n            {this.label}\n            {this.required ? '*' : ' '}\n            {!this.required && this.showOptionalLabel ? <span class=\"optional-label\">(optional)</span> : ''}\n          </label>\n        )}\n        <slot name=\"label\"></slot>\n        <div class={{ 'container': true, 'error': Boolean(this.errorText), 'drag': this.dragOver, 'drag-error': this.dragError }}>\n          <div class={{ 'label-container': true }}>\n            <slot name=\"left-content\"></slot>\n          </div>\n          <div class={{ 'file-container': true }}>{this.FileContent}</div>\n          <input\n            id={this.inputId}\n            type=\"file\"\n            accept={this.fileTypes?.join(', ') ?? '*'}\n            files={Boolean(this.file) ? [this.file] : undefined}\n            onDrop={this.handleDrop}\n            onDragEnter={this.handleDragEnter}\n            onDragLeave={this.handleDragLeave}\n            onChange={this.handleInputChange}\n          />\n        </div>\n        {(this.errorText || this.helperText) && (\n          <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n            <span>{this.errorText ?? this.helperText}</span>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n\nlet inputIds = 0;\n"]}

package/dist/collection/components/cpsl-file-upload/test/cpsl-file-upload.e2e.js

@@ -0,0 +1,29 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try {
+            step(generator.next(value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function rejected(value) { try {
+            step(generator["throw"](value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { newE2EPage } from "@stencil/core/testing";
+describe('cpsl-file-upload', () => {
+    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
+        const page = yield newE2EPage();
+        yield page.setContent('<cpsl-file-upload></cpsl-file-upload>');
+        const element = yield page.find('cpsl-file-upload');
+        expect(element).toHaveClass('hydrated');
+    }));
+});
+//# sourceMappingURL=cpsl-file-upload.e2e.js.map

package/dist/collection/components/cpsl-file-upload/test/cpsl-file-upload.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-file-upload.e2e.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-file-upload/test/cpsl-file-upload.e2e.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,uCAAuC,CAAC,CAAC;QAE/D,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QACpD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('cpsl-file-upload', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<cpsl-file-upload></cpsl-file-upload>');\n\n    const element = await page.find('cpsl-file-upload');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}

package/dist/collection/components/cpsl-file-upload/test/cpsl-file-upload.spec.js

@@ -0,0 +1,37 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try {
+            step(generator.next(value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function rejected(value) { try {
+            step(generator["throw"](value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { newSpecPage } from "@stencil/core/testing";
+import { CpslFileUpload } from "../cpsl-file-upload";
+describe('cpsl-file-upload', () => {
+    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
+        const page = yield newSpecPage({
+            components: [CpslFileUpload],
+            html: `<cpsl-file-upload></cpsl-file-upload>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <cpsl-file-upload>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </cpsl-file-upload>
+    `);
+    }));
+});
+//# sourceMappingURL=cpsl-file-upload.spec.js.map

package/dist/collection/components/cpsl-file-upload/test/cpsl-file-upload.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-file-upload.spec.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-file-upload/test/cpsl-file-upload.spec.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;YAC5B,IAAI,EAAE,uCAAuC;SAC9C,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { CpslFileUpload } from '../cpsl-file-upload';\n\ndescribe('cpsl-file-upload', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CpslFileUpload],\n      html: `<cpsl-file-upload></cpsl-file-upload>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <cpsl-file-upload>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </cpsl-file-upload>\n    `);\n  });\n});\n"]}

package/dist/collection/components/cpsl-grid/cpsl-grid.js

@@ -4,9 +4,9 @@ export class CpslGrid {
         this.fixed = false;
     }
     render() {
-        return (h(Host, { key: '7f71c4736413c5fd6a742716da614991ef6a585e', class: {
+        return (h(Host, { key: '76084ea41988e4fdff4a48dc400988d2aa190a56', class: {
                 'grid-fixed': this.fixed,
-            } }, h("slot", { key: '98f624d6d897aca30adcd75b14ef88124781981a' })));
+            } }, h("slot", { key: '1eb8c755910397d58a2165238a1428769623ef6b' })));
     }
     static get is() { return "cpsl-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-icon/cpsl-icon.js

@@ -6,7 +6,7 @@ export class CpslIcon {
         this.icon = undefined;
     }
     render() {
-        return (h(Host, { key: '5e1a7143534342f6c3d79ccf1edcc40aa903773a', part: "icon", role: "img" }, !Boolean(this.icon) ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
+        return (h(Host, { key: 'fe58523210b92237924bd768007f3a191b401a57', part: "icon", role: "img" }, !Boolean(this.icon) ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
     }
     static get is() { return "cpsl-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -44,7 +44,7 @@ export class CpslIcon {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BQ2\" | \"BQ3\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CD2\" | \"CF\" | \"CH\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DS\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB2\" | \"GB\" | \"GD\" | \"GE\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SE\" | \"SG\" | \"SI\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WS\" | \"YE\" | \"ZA\" | \"ZM\" | \"ZW\" | \"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"figmaBrand\" | \"figma\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"home\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"settings\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"youtubeBrand\" | \"youtube\"",
+                    "resolved": "\"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BQ2\" | \"BQ3\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CD2\" | \"CF\" | \"CH\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DS\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB2\" | \"GB\" | \"GD\" | \"GE\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SE\" | \"SG\" | \"SI\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WS\" | \"YE\" | \"ZA\" | \"ZM\" | \"ZW\" | \"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"cube\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"figmaBrand\" | \"figma\" | \"file\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"home\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning01\" | \"lightning\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"menu\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"settings\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"stars\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"x\" | \"youtubeBrand\" | \"youtube\"",
                     "references": {
                         "IconType": {
                             "location": "import",

package/dist/collection/components/cpsl-info-box/cpsl-info-box.css

@@ -71,7 +71,7 @@
   padding-top: var(--box-padding-top);
   padding-bottom: var(--box-padding-bottom);
   display: flex;
-  background-color: var(--cpsl-color-background-secondary);
+  background: var(--cpsl-color-background-secondary);
   border: var(--box-border-width) solid var(--cpsl-color-input-border-placeholder);
   border-radius: var(--box-border-radius);
 }

package/dist/collection/components/cpsl-info-box/cpsl-info-box.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class CpslInfoBox {
     render() {
-        return (h(Host, { key: '519995e7bf034f2bf6bda24249a0acf5264bc0ab' }, h("div", { key: '076b0866fbfa4812c5403511ec7048c99bba1823', class: "info-box-container" }, h("slot", { key: 'e00f6c9efa7f3701b58f8f20808b6323f9618877' }))));
+        return (h(Host, { key: '15b85f109d7e5371f6fa35f38dc35f86a061c46c' }, h("div", { key: '39eae7146dfa17771e1d68045255c9b0db5d0a0c', class: "info-box-container" }, h("slot", { key: '008e3552b563dd2f3b6d10bc7afe59b0f2a2ba3a' }))));
     }
     static get is() { return "cpsl-info-box"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-input/cpsl-input.css

@@ -55,7 +55,7 @@
    */
 :host {
   --container-box-shadow: none;
-  --container-box-shadow-color: var(--cpsl-color-input-border-placeholder);
+  --container-box-shadow-color: none;
   --container-border-color: var(--cpsl-color-input-border-active);
   --container-border-error-color: var(--cpsl-color-input-border-error);
   --container-background-color: var(--cpsl-color-input-surface-default);
@@ -67,7 +67,7 @@
   --container-padding-end: 12px;
   --container-padding-start: 12px;
   --container-height: 48px;
-  --container-gap: 12px;
+  --container-gap: 8px;
   --input-background-color: var(--cpsl-color-input-surface-default);
   --input-background-color-disabled: var(--cpsl-color-input-surface-disabled);
   --input-color: var(--cpsl-color-text-primary);
@@ -100,6 +100,7 @@
   --container-background-color: var(--container-background-color-disabled);
   --input-background-color: var(--input-background-color-disabled);
   --input-color: var(--cpsl-color-text-disabled);
+  --container-border-color: transparent;
 }
 
 :host(.focused) {
@@ -124,7 +125,7 @@
   border-width: var(--container-border-width);
   border-color: var(--container-border-color);
   border-radius: var(--container-border-radius);
-  background-color: var(--container-background-color);
+  background: var(--container-background-color);
   box-shadow: var(--container-box-shadow);
 }
 
@@ -140,7 +141,7 @@
   box-sizing: border-box;
   font-size: var(--input-font-size);
   color: var(--input-color);
-  background-color: var(--input-background-color);
+  background: var(--input-background-color);
   font-family: var(--cpsl-font-family, inherit);
 }
 .native-input:focus, .native-input:focus-visible {
@@ -189,10 +190,10 @@
 }
 
 :host ::slotted([slot=start]) {
-  flex: 0;
+  flex: 0 0 auto;
 }
 :host ::slotted([slot=end]) {
-  flex: 0;
+  flex: 0 0 auto;
 }
 :host ::slotted(cpsl-icon) {
   --icon-color: var(--input-color);