@operato/form 1.0.0-alpha.1

package/.editorconfig

@@ -0,0 +1,29 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.json]
+indent_size = 2
+
+[*.{html,js,md}]
+block_comment_start = /**
+block_comment = *
+block_comment_end = */

package/.storybook/main.js

@@ -0,0 +1,3 @@
+module.exports = {
+  stories: ['../dist/stories/**/*.stories.{js,md,mdx}'],
+};

package/.storybook/server.mjs

@@ -0,0 +1,8 @@
+import { storybookPlugin } from '@web/dev-server-storybook';
+import baseConfig from '../web-dev-server.config.mjs';
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  ...baseConfig,
+  open: '/',
+  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
+});

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [1.0.0-alpha.1](https://github.com/hatiolab/operato/compare/v0.4.3...v1.0.0-alpha.1) (2022-03-09)
+
+
+### :rocket: New Features
+
+* 1.0-alpha ([42f87cf](https://github.com/hatiolab/operato/commit/42f87cf6a3cef0381db91ecb1179e63c64c01370))

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) hatiolab.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,75 @@
+# \<mini-app>
+
+This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+
+## Installation
+
+```bash
+npm i mini-app
+```
+
+## Usage
+
+```html
+<script type="module">
+  import 'mini-app/mini-app.js'
+</script>
+
+<mini-app></mini-app>
+```
+
+## Linting and formatting
+
+To scan the project for linting and formatting errors, run
+
+```bash
+npm run lint
+```
+
+To automatically fix linting and formatting errors, run
+
+```bash
+npm run format
+```
+
+## Testing with Web Test Runner
+
+To execute a single test run:
+
+```bash
+npm run test
+```
+
+To run the tests in interactive watch mode run:
+
+```bash
+npm run test:watch
+```
+
+## Demoing with Storybook
+
+To run a local instance of Storybook for your component, run
+
+```bash
+npm run storybook
+```
+
+To build a production version of Storybook, run
+
+```bash
+npm run storybook:build
+```
+
+## Tooling configs
+
+For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
+
+If you customize the configuration a lot, you can consider moving them to individual files.
+
+## Local Demo with `web-dev-server`
+
+```bash
+npm start
+```
+
+To run a local development server that serves the basic demo located in `demo/index.html`

package/demo/index.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      body {
+        background: #fafafa;
+        --ox-checkbox-size: 12px;
+      }
+
+      #demo {
+        position: relative;
+        height: 300px;
+        background-color: lightgray;
+        vertical-align: middle;
+      }
+    </style>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="demo"></div>
+
+    <script type="module">
+      import { html, render } from 'lit'
+      import '@material/mwc-icon'
+
+      const parent = document.querySelector('#demo')
+
+      render(html``, parent)
+    </script>
+  </body>
+</html>

package/dist/src/components/ox-custom-input.d.ts

@@ -0,0 +1,23 @@
+import { LitElement, PropertyValues } from 'lit';
+export declare class CustomInput extends LitElement {
+    static styles: import("lit").CSSResult;
+    name?: string;
+    placeholder?: string;
+    type?: string;
+    props: any;
+    attrs: any;
+    valueField?: string;
+    value: any;
+    autofocus: boolean;
+    input: HTMLInputElement;
+    render(): import("lit-html").TemplateResult<1>;
+    get checked(): boolean;
+    set checked(checked: boolean);
+    firstUpdated(): void;
+    updated(changes: PropertyValues<this>): void;
+    _isObject(v: any): boolean;
+    focus(): void;
+    select(): void;
+    blur(): void;
+    checkValidity(): boolean;
+}

package/dist/src/components/ox-custom-input.js

@@ -0,0 +1,114 @@
+import { __decorate } from "tslib";
+import { LitElement, css, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+let CustomInput = class CustomInput extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.autofocus = false;
+    }
+    render() {
+        return html `
+      <input
+        name=${this.name}
+        placeholder=${this.placeholder}
+        type=${this.type || 'text'}
+        value=${this.value || ''}
+        @input=${(e) => (this.value = e.currentTarget.value)}
+        ?autofocus=${this.autofocus}
+      />
+    `;
+    }
+    get checked() {
+        return this.input.checked;
+    }
+    set checked(checked) {
+        this.input.checked = checked;
+    }
+    firstUpdated() {
+        this.dispatchEvent(new CustomEvent('load'));
+    }
+    updated(changes) {
+        if (changes.has('props')) {
+            if (this._isObject(this.props)) {
+                for (let prop in this.props) {
+                    if (this.props[prop]) {
+                        this.input.setAttribute(prop, this.props[prop]);
+                        this.setAttribute(prop, this.props[prop]);
+                    }
+                }
+            }
+        }
+        if (changes.has('attrs')) {
+            if (this.attrs && Array.isArray(this.attrs)) {
+                this.attrs.forEach(attr => {
+                    this.input.setAttribute(attr, '');
+                    this.setAttribute(attr, '');
+                });
+            }
+        }
+        if (changes.has('value') && this._isObject(this.value)) {
+            let value = this.value;
+            this.value = (this.valueField && value[this.valueField]) || value[Object.keys(value)[0]];
+        }
+    }
+    _isObject(v) {
+        return v instanceof Object && !Array.isArray(v);
+    }
+    focus() {
+        this.input.focus();
+    }
+    select() {
+        this.input.select();
+    }
+    blur() {
+        this.input.blur();
+    }
+    checkValidity() {
+        return this.input.checkValidity();
+    }
+};
+CustomInput.styles = css `
+    input {
+      margin: auto 0;
+      border-style: var(--form-input-border-style, solid);
+      border-width: var(--form-input-border-width, 1px);
+      border-color: var(--form-input-border-color, #c4c5c6);
+      padding: var(--form-input-padding, 5px);
+      min-width: var(--form-input-width, 300px);
+      max-width: var(--form-input-width, 300px);
+      outline: var(--form-input-outline, none);
+      background-color: var(--form-input-background-color, #fff);
+    }
+  `;
+__decorate([
+    property({ type: String })
+], CustomInput.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], CustomInput.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String })
+], CustomInput.prototype, "type", void 0);
+__decorate([
+    property({ type: Object })
+], CustomInput.prototype, "props", void 0);
+__decorate([
+    property({ type: Array })
+], CustomInput.prototype, "attrs", void 0);
+__decorate([
+    property({ type: String })
+], CustomInput.prototype, "valueField", void 0);
+__decorate([
+    property({ type: Object })
+], CustomInput.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], CustomInput.prototype, "autofocus", void 0);
+__decorate([
+    query('input')
+], CustomInput.prototype, "input", void 0);
+CustomInput = __decorate([
+    customElement('custom-input')
+], CustomInput);
+export { CustomInput };
+//# sourceMappingURL=ox-custom-input.js.map

package/dist/src/components/ox-custom-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-custom-input.js","sourceRoot":"","sources":["../../../src/components/ox-custom-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\n@customElement('custom-input')\nexport class CustomInput extends LitElement {\n  static styles = css`\n    input {\n      margin: auto 0;\n      border-style: var(--form-input-border-style, solid);\n      border-width: var(--form-input-border-width, 1px);\n      border-color: var(--form-input-border-color, #c4c5c6);\n      padding: var(--form-input-padding, 5px);\n      min-width: var(--form-input-width, 300px);\n      max-width: var(--form-input-width, 300px);\n      outline: var(--form-input-outline, none);\n      background-color: var(--form-input-background-color, #fff);\n    }\n  `\n\n  @property({ type: String }) name?: string\n  @property({ type: String }) placeholder?: string\n  @property({ type: String }) type?: string\n  @property({ type: Object }) props: any\n  @property({ type: Array }) attrs: any\n  @property({ type: String }) valueField?: string\n  @property({ type: Object }) value: any\n  @property({ type: Boolean }) autofocus: boolean = false\n\n  @query('input') input!: HTMLInputElement\n\n  render() {\n    return html`\n      <input\n        name=${this.name}\n        placeholder=${this.placeholder}\n        type=${this.type || 'text'}\n        value=${this.value || ''}\n        @input=${(e: InputEvent) => (this.value = (e.currentTarget as HTMLInputElement).value)}\n        ?autofocus=${this.autofocus}\n      />\n    `\n  }\n\n  get checked() {\n    return this.input.checked\n  }\n\n  set checked(checked) {\n    this.input.checked = checked\n  }\n\n  firstUpdated() {\n    this.dispatchEvent(new CustomEvent('load'))\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('props')) {\n      if (this._isObject(this.props)) {\n        for (let prop in this.props) {\n          if (this.props[prop]) {\n            this.input.setAttribute(prop, this.props[prop])\n            this.setAttribute(prop, this.props[prop])\n          }\n        }\n      }\n    }\n\n    if (changes.has('attrs')) {\n      if (this.attrs && Array.isArray(this.attrs)) {\n        this.attrs.forEach(attr => {\n          this.input.setAttribute(attr, '')\n          this.setAttribute(attr, '')\n        })\n      }\n    }\n\n    if (changes.has('value') && this._isObject(this.value)) {\n      let value = this.value\n      this.value = (this.valueField && value[this.valueField]) || value[Object.keys(value)[0]]\n    }\n  }\n\n  _isObject(v: any) {\n    return v instanceof Object && !Array.isArray(v)\n  }\n\n  focus() {\n    this.input.focus()\n  }\n\n  select() {\n    this.input.select()\n  }\n\n  blur() {\n    this.input.blur()\n  }\n\n  checkValidity() {\n    return this.input.checkValidity()\n  }\n}\n"]}

package/dist/src/components/ox-custom-select.d.ts

@@ -0,0 +1,21 @@
+import { LitElement, PropertyValues } from 'lit';
+export declare class CustomSelect extends LitElement {
+    static styles: import("lit").CSSResult;
+    name?: string;
+    options?: {
+        name: string;
+        value: any;
+    }[];
+    props: any;
+    attrs: any;
+    value: any;
+    autofocus: boolean;
+    select: HTMLInputElement;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    updated(changes: PropertyValues<this>): void;
+    _isObject(v: any): boolean;
+    focus(): void;
+    blur(): void;
+    checkValidity(): boolean;
+}

package/dist/src/components/ox-custom-select.js

@@ -0,0 +1,100 @@
+import { __decorate } from "tslib";
+import { LitElement, css, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+let CustomSelect = class CustomSelect extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.autofocus = false;
+    }
+    render() {
+        return html `
+      <select
+        name=${this.name}
+        ?autofocus=${this.autofocus}
+        @change=${(e) => (this.value = e.currentTarget.value)}
+      >
+        ${(this.options || []).map(option => html `
+            <option value=${option.value} ?selected=${this.value === option.value}>${option.name}</option>
+          `)}
+      </select>
+    `;
+    }
+    firstUpdated() {
+        this.dispatchEvent(new CustomEvent('load'));
+    }
+    updated(changes) {
+        if (changes.has('props') && this._isObject(this.props)) {
+            for (let prop in this.props) {
+                if (this.props[prop]) {
+                    this.select.setAttribute(prop, this.props[prop]);
+                    this.setAttribute(prop, this.props[prop]);
+                }
+            }
+        }
+        if (changes.has('attrs')) {
+            if (this.attrs && Array.isArray(this.attrs)) {
+                this.attrs.forEach(attr => {
+                    this.select.setAttribute(attr, '');
+                    this.setAttribute(attr, '');
+                });
+            }
+        }
+    }
+    _isObject(v) {
+        return v instanceof Object && !Array.isArray(v);
+    }
+    focus() {
+        this.select.focus();
+    }
+    blur() {
+        this.select.blur();
+    }
+    checkValidity() {
+        return this.select.checkValidity();
+    }
+};
+CustomSelect.styles = css `
+    select {
+      margin: auto 0;
+      border-style: var(--form-input-border-style, solid);
+      border-width: var(--form-input-border-width, 1px);
+      border-color: var(--form-input-border-color, #c4c5c6);
+      padding: var(--form-input-padding, 5px);
+      outline: var(--form-input-outline, none);
+      background-color: var(--form-input-background-color, #fff);
+      min-width: calc(
+        var(--form-input-width, 300px) + 2 * var(--form-input-padding, 5px) + 2 * var(--form-input-border-width, 1px)
+      );
+      max-width: calc(
+        var(--form-input-width) + 2 * var(--form-input-padding, 5px) + 2 * var(--form-input-border-width, 1px)
+      );
+      -webkit-appearance: none;
+      -webkit-border-radius: 0px;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], CustomSelect.prototype, "name", void 0);
+__decorate([
+    property({ type: Array })
+], CustomSelect.prototype, "options", void 0);
+__decorate([
+    property({ type: Object })
+], CustomSelect.prototype, "props", void 0);
+__decorate([
+    property({ type: Array })
+], CustomSelect.prototype, "attrs", void 0);
+__decorate([
+    property({ type: String })
+], CustomSelect.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], CustomSelect.prototype, "autofocus", void 0);
+__decorate([
+    query('select')
+], CustomSelect.prototype, "select", void 0);
+CustomSelect = __decorate([
+    customElement('ox-custom-select')
+], CustomSelect);
+export { CustomSelect };
+//# sourceMappingURL=ox-custom-select.js.map

package/dist/src/components/ox-custom-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-custom-select.js","sourceRoot":"","sources":["../../../src/components/ox-custom-select.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\n@customElement('ox-custom-select')\nexport class CustomSelect extends LitElement {\n  static styles = css`\n    select {\n      margin: auto 0;\n      border-style: var(--form-input-border-style, solid);\n      border-width: var(--form-input-border-width, 1px);\n      border-color: var(--form-input-border-color, #c4c5c6);\n      padding: var(--form-input-padding, 5px);\n      outline: var(--form-input-outline, none);\n      background-color: var(--form-input-background-color, #fff);\n      min-width: calc(\n        var(--form-input-width, 300px) + 2 * var(--form-input-padding, 5px) + 2 * var(--form-input-border-width, 1px)\n      );\n      max-width: calc(\n        var(--form-input-width) + 2 * var(--form-input-padding, 5px) + 2 * var(--form-input-border-width, 1px)\n      );\n      -webkit-appearance: none;\n      -webkit-border-radius: 0px;\n    }\n  `\n\n  @property({ type: String }) name?: string\n  @property({ type: Array }) options?: { name: string; value: any }[]\n  @property({ type: Object }) props: any\n  @property({ type: Array }) attrs: any\n  @property({ type: String }) value: any\n  @property({ type: Boolean }) autofocus: boolean = false\n\n  @query('select') select!: HTMLInputElement\n\n  render() {\n    return html`\n      <select\n        name=${this.name}\n        ?autofocus=${this.autofocus}\n        @change=${(e: Event) => (this.value = (e.currentTarget as HTMLSelectElement).value)}\n      >\n        ${(this.options || []).map(\n          option => html`\n            <option value=${option.value} ?selected=${this.value === option.value}>${option.name}</option>\n          `\n        )}\n      </select>\n    `\n  }\n\n  firstUpdated() {\n    this.dispatchEvent(new CustomEvent('load'))\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('props') && this._isObject(this.props)) {\n      for (let prop in this.props) {\n        if (this.props[prop]) {\n          this.select.setAttribute(prop, this.props[prop])\n          this.setAttribute(prop, this.props[prop])\n        }\n      }\n    }\n\n    if (changes.has('attrs')) {\n      if (this.attrs && Array.isArray(this.attrs)) {\n        this.attrs.forEach(attr => {\n          this.select.setAttribute(attr, '')\n          this.setAttribute(attr, '')\n        })\n      }\n    }\n  }\n\n  _isObject(v: any) {\n    return v instanceof Object && !Array.isArray(v)\n  }\n\n  focus() {\n    this.select.focus()\n  }\n\n  blur() {\n    this.select.blur()\n  }\n\n  checkValidity() {\n    return this.select.checkValidity()\n  }\n}\n"]}

package/dist/src/components/ox-file-uploader.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+export declare class FileUploader extends LitElement {
+    static styles: import("lit").CSSResult[];
+    multiple: boolean;
+    accept: string;
+    label?: string;
+    _files: File[];
+    fileInput: HTMLInputElement;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    get files(): File[];
+    reset(): void;
+}

package/dist/src/components/ox-file-uploader.js

@@ -0,0 +1,166 @@
+import { __decorate } from "tslib";
+import { LitElement, css, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { FileDropHelper } from '@operato/utils';
+let FileUploader = class FileUploader extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.multiple = false;
+        this.accept = '*/*';
+        this._files = [];
+    }
+    render() {
+        var _a;
+        return html `
+      <mwc-icon>post_add</mwc-icon>
+      <span>add file or drop files here!</span>
+      <input
+        id="input-file"
+        type="file"
+        accept=${this.accept}
+        ?multiple=${this.multiple}
+        hidden
+        @change=${(e) => {
+            const fileInput = e.currentTarget;
+            const files = fileInput.files;
+            //// Temporary Validation preventing file size more than 10mb to be uploaded
+            for (let index = 0; index < files.length; index++) {
+                if (files[index].size > 9999999) {
+                    document.dispatchEvent(new CustomEvent('notify', {
+                        detail: {
+                            type: 'error',
+                            message: 'File size must be less than 10 MB.'
+                        }
+                    }));
+                    throw new Error('File size must be less than 10 MB.');
+                }
+            }
+            this._files = [...this._files, ...Array.from(files)];
+            this.dispatchEvent(new CustomEvent('files-change', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    files: files
+                }
+            }));
+            fileInput.value = '';
+        }}
+      />
+      <label for="input-file">${this.label || 'select file'}</label>
+
+      ${((_a = this._files) === null || _a === void 0 ? void 0 : _a.length)
+            ? html ` <ul>
+            ${this._files.map(file => html `
+                <li>
+                  - ${file.name}
+                  <mwc-icon
+                    @click=${(e) => {
+                this._files.splice(this._files.indexOf(file), 1);
+                this.requestUpdate();
+            }}
+                    >delete_outline</mwc-icon
+                  >
+                </li>
+              `)}
+          </ul>`
+            : ''}
+    `;
+    }
+    firstUpdated() {
+        FileDropHelper.set(this);
+        this.addEventListener('file-drop', (e) => {
+            const de = e;
+            this._files = this.multiple ? de.detail : de.detail[0] ? [de.detail[0]] : [];
+        });
+    }
+    get files() {
+        return this._files;
+    }
+    reset() {
+        this.fileInput.value = '';
+        this._files = [];
+    }
+};
+FileUploader.styles = [
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        border-radius: var(--border-radius);
+        text-align: center;
+        padding-bottom: 5px !important;
+        text-transform: capitalize;
+
+        border: var(--file-uploader-border);
+        background-color: var(--main-section-background-color);
+        font: var(--file-uploader-font) !important;
+        color: var(--file-uploader-color);
+      }
+      :host > mwc-icon {
+        color: var(--file-uploader-icon-color);
+      }
+
+      :host(.candrop) {
+        background-color: var(--file-uploader-candrop-background-color);
+      }
+
+      #input-file {
+        display: none;
+      }
+
+      label {
+        position: relative;
+        width: auto;
+        border: none;
+        text-transform: capitalize;
+
+        padding: var(--file-uploader-label-padding);
+        border-radius: var(--file-uploader-label-border-radius);
+        background-color: var(--file-uploader-label-background-color);
+        color: var(--file-uploader-label-color);
+        font: var(--file-uploader-label-font) !important;
+      }
+
+      ul {
+        max-width: 500px;
+        list-style: none;
+        padding: 0;
+      }
+      li {
+        text-align: left;
+
+        padding: var(--file-uploader-li-padding);
+        border-bottom: var(--file-uploader-li-border-bottom);
+      }
+      li mwc-icon {
+        float: right;
+        cursor: pointer;
+        font: var(--file-uploader-li-icon-font);
+        margin: var(--file-uploader-li-icon-margin);
+      }
+      li mwc-icon:hover,
+      li mwc-icon:active {
+        color: var(--file-uploader-li-icon-focus-color);
+      }
+    `
+];
+__decorate([
+    property({ type: Boolean })
+], FileUploader.prototype, "multiple", void 0);
+__decorate([
+    property({ type: String })
+], FileUploader.prototype, "accept", void 0);
+__decorate([
+    property({ type: String })
+], FileUploader.prototype, "label", void 0);
+__decorate([
+    property({ type: Array })
+], FileUploader.prototype, "_files", void 0);
+__decorate([
+    query('#input-file')
+], FileUploader.prototype, "fileInput", void 0);
+FileUploader = __decorate([
+    customElement('ox-file-uploader')
+], FileUploader);
+export { FileUploader };
+//# sourceMappingURL=ox-file-uploader.js.map

package/dist/src/components/ox-file-uploader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-file-uploader.js","sourceRoot":"","sources":["../../../src/components/ox-file-uploader.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { FileDropHelper } from '@operato/utils'\n\n@customElement('ox-file-uploader')\nexport class FileUploader extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        border-radius: var(--border-radius);\n        text-align: center;\n        padding-bottom: 5px !important;\n        text-transform: capitalize;\n\n        border: var(--file-uploader-border);\n        background-color: var(--main-section-background-color);\n        font: var(--file-uploader-font) !important;\n        color: var(--file-uploader-color);\n      }\n      :host > mwc-icon {\n        color: var(--file-uploader-icon-color);\n      }\n\n      :host(.candrop) {\n        background-color: var(--file-uploader-candrop-background-color);\n      }\n\n      #input-file {\n        display: none;\n      }\n\n      label {\n        position: relative;\n        width: auto;\n        border: none;\n        text-transform: capitalize;\n\n        padding: var(--file-uploader-label-padding);\n        border-radius: var(--file-uploader-label-border-radius);\n        background-color: var(--file-uploader-label-background-color);\n        color: var(--file-uploader-label-color);\n        font: var(--file-uploader-label-font) !important;\n      }\n\n      ul {\n        max-width: 500px;\n        list-style: none;\n        padding: 0;\n      }\n      li {\n        text-align: left;\n\n        padding: var(--file-uploader-li-padding);\n        border-bottom: var(--file-uploader-li-border-bottom);\n      }\n      li mwc-icon {\n        float: right;\n        cursor: pointer;\n        font: var(--file-uploader-li-icon-font);\n        margin: var(--file-uploader-li-icon-margin);\n      }\n      li mwc-icon:hover,\n      li mwc-icon:active {\n        color: var(--file-uploader-li-icon-focus-color);\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) multiple: boolean = false\n  @property({ type: String }) accept: string = '*/*'\n  @property({ type: String }) label?: string\n\n  @property({ type: Array }) _files: File[] = []\n\n  @query('#input-file') fileInput!: HTMLInputElement\n\n  render() {\n    return html`\n      <mwc-icon>post_add</mwc-icon>\n      <span>add file or drop files here!</span>\n      <input\n        id=\"input-file\"\n        type=\"file\"\n        accept=${this.accept}\n        ?multiple=${this.multiple}\n        hidden\n        @change=${(e: Event) => {\n          const fileInput = e.currentTarget as HTMLInputElement\n          const files = fileInput.files as FileList\n          //// Temporary Validation preventing file size more than 10mb to be uploaded\n          for (let index = 0; index < files.length; index++) {\n            if (files[index].size > 9999999) {\n              document.dispatchEvent(\n                new CustomEvent('notify', {\n                  detail: {\n                    type: 'error',\n                    message: 'File size must be less than 10 MB.'\n                  }\n                })\n              )\n              throw new Error('File size must be less than 10 MB.')\n            }\n          }\n\n          this._files = [...this._files, ...Array.from(files)]\n\n          this.dispatchEvent(\n            new CustomEvent('files-change', {\n              bubbles: true,\n              composed: true,\n              detail: {\n                files: files\n              }\n            })\n          )\n\n          fileInput.value = ''\n        }}\n      />\n      <label for=\"input-file\">${this.label || 'select file'}</label>\n\n      ${this._files?.length\n        ? html` <ul>\n            ${this._files.map(\n              file => html`\n                <li>\n                  - ${file.name}\n                  <mwc-icon\n                    @click=${(e: Event) => {\n                      this._files.splice(this._files.indexOf(file), 1)\n                      this.requestUpdate()\n                    }}\n                    >delete_outline</mwc-icon\n                  >\n                </li>\n              `\n            )}\n          </ul>`\n        : ''}\n    `\n  }\n\n  firstUpdated() {\n    FileDropHelper.set(this)\n\n    this.addEventListener('file-drop', (e: Event) => {\n      const de = e as any\n      this._files = this.multiple ? de.detail : de.detail[0] ? [de.detail[0]] : []\n    })\n  }\n\n  get files() {\n    return this._files\n  }\n\n  reset() {\n    this.fileInput.value = ''\n    this._files = []\n  }\n}\n"]}

package/dist/src/components/ox-form-master.d.ts

@@ -0,0 +1 @@
+export {};