@operato/input 9.0.34 → 9.2.0

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [9.2.0](https://github.com/hatiolab/operato/compare/v9.1.1...v9.2.0) (2025-11-09)
+
+
+### :memo: Documentation
+
+* add storybook stories for video and audio input components ([4e8a0e5](https://github.com/hatiolab/operato/commit/4e8a0e56df067d023ef90d3a05a1e97f39260df5))
+
+
+### :rocket: New Features
+
+* add ox-input-image stories ([6d2927b](https://github.com/hatiolab/operato/commit/6d2927b46b5bd466f3cde8bd557d2ba98e483a9d))
+* add video and audio input components for media upload ([433053e](https://github.com/hatiolab/operato/commit/433053ecc3d595c578c82ec56b5c5f252af42795))
+
+
+
+## [9.1.0](https://github.com/hatiolab/operato/compare/v9.0.35...v9.1.0) (2025-09-16)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
 ### [9.0.34](https://github.com/hatiolab/operato/compare/v9.0.33...v9.0.34) (2025-09-15)
 
 **Note:** Version bump only for package @operato/input

package/dist/src/index.d.ts

@@ -16,6 +16,8 @@ export * from './ox-input-color.js';
 export * from './ox-input-multiple-colors.js';
 export * from './ox-input-file.js';
 export * from './ox-input-image.js';
+export * from './ox-input-video.js';
+export * from './ox-input-audio.js';
 export * from './ox-input-value-ranges.js';
 export * from './ox-input-value-map.js';
 export * from './ox-input-scene-component-id.js';

package/dist/src/index.js

@@ -16,6 +16,8 @@ export * from './ox-input-color.js';
 export * from './ox-input-multiple-colors.js';
 export * from './ox-input-file.js';
 export * from './ox-input-image.js';
+export * from './ox-input-video.js';
+export * from './ox-input-audio.js';
 export * from './ox-input-value-ranges.js';
 export * from './ox-input-value-map.js';
 export * from './ox-input-scene-component-id.js';

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,kCAAkC,CAAA;AAChD,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mCAAmC,CAAA;AACjD,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,yBAAyB,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport * from './ox-form-field.js'\nexport * from './ox-buttons-radio.js'\nexport * from './ox-checkbox.js'\nexport * from './ox-select.js'\nexport * from './ox-input-switch.js'\nexport * from './ox-input-angle.js'\nexport * from './ox-input-3dish.js'\nexport * from './ox-input-3axis.js'\nexport * from './ox-input-stack.js'\nexport * from './ox-input-barcode.js'\nexport * from './ox-input-code.js'\nexport * from './ox-input-color.js'\nexport * from './ox-input-multiple-colors.js'\nexport * from './ox-input-file.js'\nexport * from './ox-input-image.js'\nexport * from './ox-input-value-ranges.js'\nexport * from './ox-input-value-map.js'\nexport * from './ox-input-scene-component-id.js'\nexport * from './ox-input-crontab.js'\nexport * from './ox-input-partition-keys.js'\nexport * from './ox-input-duration.js'\nexport * from './ox-input-quantifier.js'\nexport * from './ox-input-select-buttons.js'\nexport * from './ox-input-textarea.js'\nexport * from './ox-input-direction.js'\nexport * from './ox-input-table-column-config.js'\nexport * from './ox-input-search.js'\nexport * from './ox-input-secret.js'\nexport * from './ox-input-signature.js'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,kCAAkC,CAAA;AAChD,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mCAAmC,CAAA;AACjD,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,yBAAyB,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport * from './ox-form-field.js'\nexport * from './ox-buttons-radio.js'\nexport * from './ox-checkbox.js'\nexport * from './ox-select.js'\nexport * from './ox-input-switch.js'\nexport * from './ox-input-angle.js'\nexport * from './ox-input-3dish.js'\nexport * from './ox-input-3axis.js'\nexport * from './ox-input-stack.js'\nexport * from './ox-input-barcode.js'\nexport * from './ox-input-code.js'\nexport * from './ox-input-color.js'\nexport * from './ox-input-multiple-colors.js'\nexport * from './ox-input-file.js'\nexport * from './ox-input-image.js'\nexport * from './ox-input-video.js'\nexport * from './ox-input-audio.js'\nexport * from './ox-input-value-ranges.js'\nexport * from './ox-input-value-map.js'\nexport * from './ox-input-scene-component-id.js'\nexport * from './ox-input-crontab.js'\nexport * from './ox-input-partition-keys.js'\nexport * from './ox-input-duration.js'\nexport * from './ox-input-quantifier.js'\nexport * from './ox-input-select-buttons.js'\nexport * from './ox-input-textarea.js'\nexport * from './ox-input-direction.js'\nexport * from './ox-input-table-column-config.js'\nexport * from './ox-input-search.js'\nexport * from './ox-input-secret.js'\nexport * from './ox-input-signature.js'\n"]}

package/dist/src/ox-input-audio.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@material/web/icon/icon.js';
+import { OxFormField } from './ox-form-field.js';
+export declare class OxInputAudio extends OxFormField {
+    static styles: import("lit").CSSResult[];
+    fileInput: HTMLInputElement;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    get file(): any;
+    reset(): void;
+    _onChangeValue(e: Event): void;
+    _notifyChange(): void;
+}

package/dist/src/ox-input-audio.js

@@ -0,0 +1,171 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import { css, html } from 'lit';
+import { customElement, query } from 'lit/decorators.js';
+import { ScrollbarStyles } from '@operato/styles';
+import { FileDropHelper } from '@operato/utils';
+import { OxFormField } from './ox-form-field.js';
+let OxInputAudio = class OxInputAudio extends OxFormField {
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
+      :host {
+        position: relative;
+        box-sizing: border-box;
+
+        display: flex;
+        flex-direction: column;
+        place-content: center;
+        border-radius: var(--border-radius);
+        padding: var(--padding-default, 9px);
+        min-height: 100px;
+        text-transform: capitalize;
+
+        border: var(--file-uploader-border);
+        background-color: var(--md-sys-color-background);
+        font: var(--file-uploader-font) !important;
+        color: var(--file-uploader-color);
+
+        overflow: hidden;
+      }
+
+      :host(.candrop) {
+        background-color: var(--file-uploader-candrop-background-color);
+      }
+
+      audio {
+        width: 100%;
+        margin: auto;
+      }
+
+      .placeholder {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        width: 100%;
+        height: 100%;
+        min-height: 100px;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      .placeholder md-icon {
+        --md-icon-size: 48px;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      [overlay] {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0%;
+        background-color: var(--md-sys-color-surface);
+
+        display: flex;
+        place-content: center;
+      }
+
+      [overlay]:hover {
+        opacity: 50%;
+      }
+
+      #input-file {
+        display: none;
+      }
+
+      label {
+        border: none;
+        flex: 1;
+        display: flex;
+        place-content: center;
+      }
+
+      md-icon {
+        align-self: center;
+
+        color: var(--file-uploader-icon-color, black);
+        --md-icon-size: var(--file-uploader-icon-size, 36px);
+      }
+    `
+    ]; }
+    render() {
+        var value = this.value;
+        var src;
+        if (value) {
+            if (typeof value === 'string') {
+                src = value;
+            }
+            else {
+                src = URL.createObjectURL(value);
+                requestAnimationFrame(() => URL.revokeObjectURL(src));
+            }
+        }
+        return html `
+      ${src
+            ? html ` <audio src=${src} controls style="width: 100%;"> Your browser does not support the audio element. </audio> `
+            : html `
+            <div class="placeholder">
+              <md-icon>audiotrack</md-icon>
+              <span>No audio selected</span>
+            </div>
+          `}
+
+      <div overlay>
+        <label>
+          <input
+            id="input-file"
+            type="file"
+            accept="audio/*"
+            hidden
+            @change=${(e) => this._onChangeValue(e)}
+            ?disabled=${this.disabled}
+          />
+          <md-icon>upload</md-icon>
+        </label>
+      </div>
+    `;
+    }
+    firstUpdated() {
+        FileDropHelper.set(this);
+        this.addEventListener('file-drop', (e) => {
+            const detail = e.detail;
+            this.value = detail[0];
+            this._notifyChange();
+        });
+    }
+    get file() {
+        return this.value;
+    }
+    reset() {
+        this.fileInput.value = '';
+        this.value = undefined;
+        this._notifyChange();
+    }
+    _onChangeValue(e) {
+        const fileInput = e.currentTarget;
+        this.value = [...Array.from(fileInput.files)][0];
+        fileInput.files = null;
+        this._notifyChange();
+    }
+    _notifyChange() {
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: this.value
+        }));
+    }
+};
+__decorate([
+    query('#input-file')
+], OxInputAudio.prototype, "fileInput", void 0);
+OxInputAudio = __decorate([
+    customElement('ox-input-audio')
+], OxInputAudio);
+export { OxInputAudio };
+//# sourceMappingURL=ox-input-audio.js.map

package/dist/src/ox-input-audio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-audio.js","sourceRoot":"","sources":["../../src/ox-input-audio.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAExD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGzC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;aACpC,WAAM,GAAG;QACd,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiFF;KACF,AApFY,CAoFZ;IAID,MAAM;QACJ,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QACtB,IAAI,GAAuB,CAAA;QAE3B,IAAI,KAAK,EAAE,CAAC;YACV,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;gBAC9B,GAAG,GAAG,KAAK,CAAA;YACb,CAAC;iBAAM,CAAC;gBACN,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,KAAK,CAAC,CAAA;gBAChC,qBAAqB,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,eAAe,CAAC,GAAI,CAAC,CAAC,CAAA;YACxD,CAAC;QACH,CAAC;QAED,OAAO,IAAI,CAAA;QACP,GAAG;YACH,CAAC,CAAC,IAAI,CAAA,eAAe,GAAG,4FAA4F;YACpH,CAAC,CAAC,IAAI,CAAA;;;;;WAKH;;;;;;;;;sBASW,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;wBAClC,IAAI,CAAC,QAAQ;;;;;KAKhC,CAAA;IACH,CAAC;IAED,YAAY;QACV,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;QAExB,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,CAAQ,EAAE,EAAE;YAC9C,MAAM,MAAM,GAAI,CAAiB,CAAC,MAAM,CAAA;YACxC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;YAEtB,IAAI,CAAC,aAAa,EAAE,CAAA;QACtB,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,KAAK,CAAA;IACnB,CAAC;IAED,KAAK;QACH,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,EAAE,CAAA;QACzB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAA;QAEtB,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,MAAM,SAAS,GAAG,CAAC,CAAC,aAAiC,CAAA;QAErD,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QAE5D,SAAS,CAAC,KAAK,GAAG,IAAI,CAAA;QAEtB,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,aAAa;QACX,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC,CACH,CAAA;IACH,CAAC;;AAjFqB;IAArB,KAAK,CAAC,aAAa,CAAC;+CAA6B;AAvFvC,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAyKxB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\n\nimport { css, html } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { FileDropHelper } from '@operato/utils'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-audio')\nexport class OxInputAudio extends OxFormField {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        position: relative;\n        box-sizing: border-box;\n\n        display: flex;\n        flex-direction: column;\n        place-content: center;\n        border-radius: var(--border-radius);\n        padding: var(--padding-default, 9px);\n        min-height: 100px;\n        text-transform: capitalize;\n\n        border: var(--file-uploader-border);\n        background-color: var(--md-sys-color-background);\n        font: var(--file-uploader-font) !important;\n        color: var(--file-uploader-color);\n\n        overflow: hidden;\n      }\n\n      :host(.candrop) {\n        background-color: var(--file-uploader-candrop-background-color);\n      }\n\n      audio {\n        width: 100%;\n        margin: auto;\n      }\n\n      .placeholder {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 8px;\n        width: 100%;\n        height: 100%;\n        min-height: 100px;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      .placeholder md-icon {\n        --md-icon-size: 48px;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      [overlay] {\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        opacity: 0%;\n        background-color: var(--md-sys-color-surface);\n\n        display: flex;\n        place-content: center;\n      }\n\n      [overlay]:hover {\n        opacity: 50%;\n      }\n\n      #input-file {\n        display: none;\n      }\n\n      label {\n        border: none;\n        flex: 1;\n        display: flex;\n        place-content: center;\n      }\n\n      md-icon {\n        align-self: center;\n\n        color: var(--file-uploader-icon-color, black);\n        --md-icon-size: var(--file-uploader-icon-size, 36px);\n      }\n    `\n  ]\n\n  @query('#input-file') fileInput!: HTMLInputElement\n\n  render() {\n    var value = this.value\n    var src: string | undefined\n\n    if (value) {\n      if (typeof value === 'string') {\n        src = value\n      } else {\n        src = URL.createObjectURL(value)\n        requestAnimationFrame(() => URL.revokeObjectURL(src!))\n      }\n    }\n\n    return html`\n      ${src\n        ? html` <audio src=${src} controls style=\"width: 100%;\"> Your browser does not support the audio element. </audio> `\n        : html`\n            <div class=\"placeholder\">\n              <md-icon>audiotrack</md-icon>\n              <span>No audio selected</span>\n            </div>\n          `}\n\n      <div overlay>\n        <label>\n          <input\n            id=\"input-file\"\n            type=\"file\"\n            accept=\"audio/*\"\n            hidden\n            @change=${(e: Event) => this._onChangeValue(e)}\n            ?disabled=${this.disabled}\n          />\n          <md-icon>upload</md-icon>\n        </label>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    FileDropHelper.set(this)\n\n    this.addEventListener('file-drop', (e: Event) => {\n      const detail = (e as CustomEvent).detail\n      this.value = detail[0]\n\n      this._notifyChange()\n    })\n  }\n\n  get file() {\n    return this.value\n  }\n\n  reset() {\n    this.fileInput.value = ''\n    this.value = undefined\n\n    this._notifyChange()\n  }\n\n  _onChangeValue(e: Event) {\n    const fileInput = e.currentTarget as HTMLInputElement\n\n    this.value = [...Array.from(fileInput.files as FileList)][0]\n\n    fileInput.files = null\n\n    this._notifyChange()\n  }\n\n  _notifyChange() {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n}\n"]}

package/dist/src/ox-input-video.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@material/web/icon/icon.js';
+import { OxFormField } from './ox-form-field.js';
+export declare class OxInputVideo extends OxFormField {
+    static styles: import("lit").CSSResult[];
+    fileInput: HTMLInputElement;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    get file(): any;
+    reset(): void;
+    _onChangeValue(e: Event): void;
+    _notifyChange(): void;
+}

package/dist/src/ox-input-video.js

@@ -0,0 +1,178 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import { css, html } from 'lit';
+import { customElement, query } from 'lit/decorators.js';
+import { ScrollbarStyles } from '@operato/styles';
+import { FileDropHelper } from '@operato/utils';
+import { OxFormField } from './ox-form-field.js';
+const VIDEO_FALLBACK = new URL('../../assets/images/no-video.png', import.meta.url).href;
+let OxInputVideo = class OxInputVideo extends OxFormField {
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
+      :host {
+        position: relative;
+        box-sizing: border-box;
+
+        display: flex;
+        flex-direction: column;
+        place-content: center;
+        border-radius: var(--border-radius);
+        padding: var(--padding-default, 9px);
+        min-height: 150px;
+        text-transform: capitalize;
+
+        border: var(--file-uploader-border);
+        background-color: var(--md-sys-color-background);
+        font: var(--file-uploader-font) !important;
+        color: var(--file-uploader-color);
+
+        overflow: hidden;
+      }
+
+      :host(.candrop) {
+        background-color: var(--file-uploader-candrop-background-color);
+      }
+
+      video {
+        min-height: 100%;
+        max-width: 100%;
+        margin: auto;
+      }
+
+      .placeholder {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        width: 100%;
+        height: 100%;
+        min-height: 150px;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      .placeholder md-icon {
+        --md-icon-size: 48px;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      [overlay] {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0%;
+        background-color: var(--md-sys-color-surface);
+
+        display: flex;
+        place-content: center;
+      }
+
+      [overlay]:hover {
+        opacity: 50%;
+      }
+
+      #input-file {
+        display: none;
+      }
+
+      label {
+        border: none;
+        flex: 1;
+        display: flex;
+        place-content: center;
+      }
+
+      md-icon {
+        align-self: center;
+
+        color: var(--file-uploader-icon-color, black);
+        --md-icon-size: var(--file-uploader-icon-size, 36px);
+      }
+    `
+    ]; }
+    render() {
+        var value = this.value;
+        var src;
+        if (value) {
+            if (typeof value === 'string') {
+                src = value;
+            }
+            else {
+                src = URL.createObjectURL(value);
+                requestAnimationFrame(() => URL.revokeObjectURL(src));
+            }
+        }
+        return html `
+      ${src
+            ? html `
+            <video src=${src} controls style="max-width: 100%;">
+              Your browser does not support the video tag.
+            </video>
+          `
+            : html `
+            <div class="placeholder">
+              <md-icon>videocam</md-icon>
+              <span>No video selected</span>
+            </div>
+          `}
+
+      <div overlay>
+        <label>
+          <input
+            id="input-file"
+            type="file"
+            accept="video/*"
+            hidden
+            capture="environment"
+            @change=${(e) => this._onChangeValue(e)}
+            ?disabled=${this.disabled}
+          />
+          <md-icon>upload</md-icon>
+        </label>
+      </div>
+    `;
+    }
+    firstUpdated() {
+        FileDropHelper.set(this);
+        this.addEventListener('file-drop', (e) => {
+            const detail = e.detail;
+            this.value = detail[0];
+            this._notifyChange();
+        });
+    }
+    get file() {
+        return this.value;
+    }
+    reset() {
+        this.fileInput.value = '';
+        this.value = undefined;
+        this._notifyChange();
+    }
+    _onChangeValue(e) {
+        const fileInput = e.currentTarget;
+        this.value = [...Array.from(fileInput.files)][0];
+        fileInput.files = null;
+        this._notifyChange();
+    }
+    _notifyChange() {
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: this.value
+        }));
+    }
+};
+__decorate([
+    query('#input-file')
+], OxInputVideo.prototype, "fileInput", void 0);
+OxInputVideo = __decorate([
+    customElement('ox-input-video')
+], OxInputVideo);
+export { OxInputVideo };
+//# sourceMappingURL=ox-input-video.js.map

package/dist/src/ox-input-video.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-video.js","sourceRoot":"","sources":["../../src/ox-input-video.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\n\nimport { css, html } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { FileDropHelper } from '@operato/utils'\n\nimport { OxFormField } from './ox-form-field.js'\n\nconst VIDEO_FALLBACK = new URL('../../assets/images/no-video.png', import.meta.url).href\n\n@customElement('ox-input-video')\nexport class OxInputVideo extends OxFormField {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        position: relative;\n        box-sizing: border-box;\n\n        display: flex;\n        flex-direction: column;\n        place-content: center;\n        border-radius: var(--border-radius);\n        padding: var(--padding-default, 9px);\n        min-height: 150px;\n        text-transform: capitalize;\n\n        border: var(--file-uploader-border);\n        background-color: var(--md-sys-color-background);\n        font: var(--file-uploader-font) !important;\n        color: var(--file-uploader-color);\n\n        overflow: hidden;\n      }\n\n      :host(.candrop) {\n        background-color: var(--file-uploader-candrop-background-color);\n      }\n\n      video {\n        min-height: 100%;\n        max-width: 100%;\n        margin: auto;\n      }\n\n      .placeholder {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 8px;\n        width: 100%;\n        height: 100%;\n        min-height: 150px;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      .placeholder md-icon {\n        --md-icon-size: 48px;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      [overlay] {\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        opacity: 0%;\n        background-color: var(--md-sys-color-surface);\n\n        display: flex;\n        place-content: center;\n      }\n\n      [overlay]:hover {\n        opacity: 50%;\n      }\n\n      #input-file {\n        display: none;\n      }\n\n      label {\n        border: none;\n        flex: 1;\n        display: flex;\n        place-content: center;\n      }\n\n      md-icon {\n        align-self: center;\n\n        color: var(--file-uploader-icon-color, black);\n        --md-icon-size: var(--file-uploader-icon-size, 36px);\n      }\n    `\n  ]\n\n  @query('#input-file') fileInput!: HTMLInputElement\n\n  render() {\n    var value = this.value\n    var src: string | undefined\n\n    if (value) {\n      if (typeof value === 'string') {\n        src = value\n      } else {\n        src = URL.createObjectURL(value)\n        requestAnimationFrame(() => URL.revokeObjectURL(src!))\n      }\n    }\n\n    return html`\n      ${src\n        ? html`\n            <video src=${src} controls style=\"max-width: 100%;\">\n              Your browser does not support the video tag.\n            </video>\n          `\n        : html`\n            <div class=\"placeholder\">\n              <md-icon>videocam</md-icon>\n              <span>No video selected</span>\n            </div>\n          `}\n\n      <div overlay>\n        <label>\n          <input\n            id=\"input-file\"\n            type=\"file\"\n            accept=\"video/*\"\n            hidden\n            capture=\"environment\"\n            @change=${(e: Event) => this._onChangeValue(e)}\n            ?disabled=${this.disabled}\n          />\n          <md-icon>upload</md-icon>\n        </label>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    FileDropHelper.set(this)\n\n    this.addEventListener('file-drop', (e: Event) => {\n      const detail = (e as CustomEvent).detail\n      this.value = detail[0]\n\n      this._notifyChange()\n    })\n  }\n\n  get file() {\n    return this.value\n  }\n\n  reset() {\n    this.fileInput.value = ''\n    this.value = undefined\n\n    this._notifyChange()\n  }\n\n  _onChangeValue(e: Event) {\n    const fileInput = e.currentTarget as HTMLInputElement\n\n    this.value = [...Array.from(fileInput.files as FileList)][0]\n\n    fileInput.files = null\n\n    this._notifyChange()\n  }\n\n  _notifyChange() {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n}\n"]}