@xplor-education/core-stencil-components 2.0.0

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

@@ -0,0 +1,340 @@
+import { Host, h } from "@stencil/core";
+export class XplorInputFile {
+    constructor() {
+        /**
+         * Input label
+         */
+        this.label = '';
+        /**
+         * Input placeholder
+         */
+        this.placeholder = 'Choose file(s)';
+        /**
+         * Border/focus color
+         */
+        this.color = '#008480';
+        /**
+         * Whether the input is disabled
+         */
+        this.disabled = false;
+        /**
+         * Whether multiple files can be selected
+         */
+        this.multiple = false;
+        /**
+         * Accepted file types
+         */
+        this.accept = '';
+        /**
+         * Maximum number of chips to show
+         */
+        this.maxChips = 1;
+        /**
+         * Whether to show file counter
+         */
+        this.counter = true;
+        /**
+         * Whether to show file size
+         */
+        this.showSize = 1000;
+        /**
+         * Prepend inner icon (default: paperclip)
+         */
+        this.prependInnerIcon = '📎';
+        /**
+         * Files selected
+         */
+        this.selectedFiles = [];
+        this.handleFileChange = (event) => {
+            const target = event.target;
+            if (target.files) {
+                this.selectedFiles = Array.from(target.files);
+                this.attach.emit(this.selectedFiles);
+            }
+        };
+        this.handleClear = () => {
+            this.selectedFiles = [];
+            if (this.fileInputRef) {
+                this.fileInputRef.value = '';
+            }
+            this.xplorClear.emit();
+        };
+        this.formatFileSize = (bytes) => {
+            if (bytes === 0)
+                return '0 Bytes';
+            const k = 1024;
+            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+        };
+    }
+    render() {
+        const containerClasses = {
+            'xplor-input-file': true,
+            'xplor-input-file--disabled': this.disabled,
+        };
+        const visibleFiles = this.selectedFiles.slice(0, this.maxChips);
+        const additionalCount = this.selectedFiles.length - this.maxChips;
+        return (h(Host, { key: '40fb5f31ec8451dc63096f535164de6f6eb11014' }, h("div", { key: 'b52686901e2d3bbd56cfb0ee3088bfbf5f8ec365', class: containerClasses }, this.label && (h("label", { key: 'f73832f4c1a8f41690db70e301474d56c6c969b7', class: "xplor-input-file__label" }, this.label)), h("div", { key: '46512b939981a4b4f07ad87f5f9c82c9acb0e7a2', class: "xplor-input-file__field" }, h("span", { key: 'd30c938dff0d36ab2973ce69c29388ed6391317d', class: "xplor-input-file__icon" }, this.prependInnerIcon), h("div", { key: '9d6bb0b0e5ec09e81f9ee57360d84f2239bf5270', class: "xplor-input-file__content" }, this.selectedFiles.length === 0 ? (h("span", { class: "xplor-input-file__placeholder" }, this.placeholder)) : (h("div", { class: "xplor-input-file__chips" }, visibleFiles.map((file) => (h("div", { class: "xplor-input-file__chip", key: file.name }, h("span", { class: "xplor-input-file__chip-text" }, file.name), this.showSize && file.size && (h("span", { class: "xplor-input-file__chip-size" }, "(", this.formatFileSize(file.size), ")"))))), additionalCount > 0 && (h("span", { class: "xplor-input-file__additional" }, "+", additionalCount, " additional file", additionalCount > 1 ? 's' : ''))))), this.selectedFiles.length > 0 && !this.disabled && (h("button", { key: 'a1300d4dce7eed67552774efeb8edc8ce1a41dd7', type: "button", class: "xplor-input-file__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715")), h("input", { key: '41285fdb00cc6e52466b665d5c1fd5bbb4fc54e1', ref: (el) => (this.fileInputRef = el), type: "file", class: "xplor-input-file__input", multiple: this.multiple, accept: this.accept, disabled: this.disabled, onChange: this.handleFileChange })), this.counter && this.selectedFiles.length > 0 && (h("div", { key: 'e11fcc8dab8fb8d73fda9f6b82f2187e65ba61c2', class: "xplor-input-file__counter" }, this.selectedFiles.length, " file", this.selectedFiles.length > 1 ? 's' : '', " selected")))));
+    }
+    static get is() { return "xplor-input-file"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xplor-input-file.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xplor-input-file.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "attribute": "placeholder",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input placeholder"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Choose file(s)'"
+            },
+            "color": {
+                "type": "string",
+                "attribute": "color",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Border/focus color"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'#008480'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "multiple": {
+                "type": "boolean",
+                "attribute": "multiple",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether multiple files can be selected"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "accept": {
+                "type": "string",
+                "attribute": "accept",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accepted file types"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "maxChips": {
+                "type": "number",
+                "attribute": "max-chips",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of chips to show"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "counter": {
+                "type": "boolean",
+                "attribute": "counter",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show file counter"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "showSize": {
+                "type": "number",
+                "attribute": "show-size",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show file size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "1000"
+            },
+            "prependInnerIcon": {
+                "type": "string",
+                "attribute": "prepend-inner-icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Prepend inner icon (default: paperclip)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'\uD83D\uDCCE'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedFiles": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "attach",
+                "name": "attach",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Attach/change event"
+                },
+                "complexType": {
+                    "original": "File[]",
+                    "resolved": "File[]",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "xplorClear",
+                "name": "xplorClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Clear event"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=xplor-input-file.js.map

package/dist/collection/components/xplor-input-file/xplor-input-file.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xplor-input-file.js","sourceRoot":"","sources":["../../../src/components/xplor-input-file/xplor-input-file.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-input-file',\n  styleUrl: 'xplor-input-file.scss',\n  scoped: true,\n})\nexport class XplorInputFile {\n  private fileInputRef: HTMLInputElement;\n\n  /**\n   * Input label\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Input placeholder\n   */\n  @Prop() placeholder: string = 'Choose file(s)';\n\n  /**\n   * Border/focus color\n   */\n  @Prop() color: string = '#008480';\n\n  /**\n   * Whether the input is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether multiple files can be selected\n   */\n  @Prop() multiple: boolean = false;\n\n  /**\n   * Accepted file types\n   */\n  @Prop() accept: string = '';\n\n  /**\n   * Maximum number of chips to show\n   */\n  @Prop() maxChips: number = 1;\n\n  /**\n   * Whether to show file counter\n   */\n  @Prop() counter: boolean = true;\n\n  /**\n   * Whether to show file size\n   */\n  @Prop() showSize: number = 1000;\n\n  /**\n   * Prepend inner icon (default: paperclip)\n   */\n  @Prop() prependInnerIcon: string = '📎';\n\n  /**\n   * Files selected\n   */\n  @State() selectedFiles: File[] = [];\n\n  /**\n   * Attach/change event\n   */\n  @Event() attach: EventEmitter<File[]>;\n\n  /**\n   * Clear event\n   */\n  @Event() xplorClear: EventEmitter<void>;\n\n  private handleFileChange = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    if (target.files) {\n      this.selectedFiles = Array.from(target.files);\n      this.attach.emit(this.selectedFiles);\n    }\n  };\n\n  private handleClear = () => {\n    this.selectedFiles = [];\n    if (this.fileInputRef) {\n      this.fileInputRef.value = '';\n    }\n    this.xplorClear.emit();\n  };\n\n  private formatFileSize = (bytes: number): string => {\n    if (bytes === 0) return '0 Bytes';\n    const k = 1024;\n    const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n    const i = Math.floor(Math.log(bytes) / Math.log(k));\n    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];\n  };\n\n  render() {\n    const containerClasses = {\n      'xplor-input-file': true,\n      'xplor-input-file--disabled': this.disabled,\n    };\n\n    const visibleFiles = this.selectedFiles.slice(0, this.maxChips);\n    const additionalCount = this.selectedFiles.length - this.maxChips;\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          {this.label && (\n            <label class=\"xplor-input-file__label\">{this.label}</label>\n          )}\n\n          <div class=\"xplor-input-file__field\">\n            <span class=\"xplor-input-file__icon\">{this.prependInnerIcon}</span>\n\n            <div class=\"xplor-input-file__content\">\n              {this.selectedFiles.length === 0 ? (\n                <span class=\"xplor-input-file__placeholder\">{this.placeholder}</span>\n              ) : (\n                <div class=\"xplor-input-file__chips\">\n                  {visibleFiles.map((file) => (\n                    <div class=\"xplor-input-file__chip\" key={file.name}>\n                      <span class=\"xplor-input-file__chip-text\">{file.name}</span>\n                      {this.showSize && file.size && (\n                        <span class=\"xplor-input-file__chip-size\">\n                          ({this.formatFileSize(file.size)})\n                        </span>\n                      )}\n                    </div>\n                  ))}\n                  {additionalCount > 0 && (\n                    <span class=\"xplor-input-file__additional\">\n                      +{additionalCount} additional file{additionalCount > 1 ? 's' : ''}\n                    </span>\n                  )}\n                </div>\n              )}\n            </div>\n\n            {this.selectedFiles.length > 0 && !this.disabled && (\n              <button\n                type=\"button\"\n                class=\"xplor-input-file__clear\"\n                onClick={this.handleClear}\n                aria-label=\"Clear\"\n              >\n                ✕\n              </button>\n            )}\n\n            <input\n              ref={(el) => (this.fileInputRef = el)}\n              type=\"file\"\n              class=\"xplor-input-file__input\"\n              multiple={this.multiple}\n              accept={this.accept}\n              disabled={this.disabled}\n              onChange={this.handleFileChange}\n            />\n          </div>\n\n          {this.counter && this.selectedFiles.length > 0 && (\n            <div class=\"xplor-input-file__counter\">\n              {this.selectedFiles.length} file{this.selectedFiles.length > 1 ? 's' : ''} selected\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}