@operato/input 9.2.0 → 10.0.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,15 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
### [9.2.1](https://github.com/hatiolab/operato/compare/v9.2.0...v9.2.1) (2025-11-09)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* remove unused resources ([cdbae9a](https://github.com/hatiolab/operato/commit/cdbae9adcfd772e373377275fd6e68b5f7e434ef))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
6
15
|
## [9.2.0](https://github.com/hatiolab/operato/compare/v9.1.1...v9.2.0) (2025-11-09)
|
|
7
16
|
|
|
8
17
|
|
|
@@ -8,7 +8,6 @@ import { customElement, query } from 'lit/decorators.js';
|
|
|
8
8
|
import { ScrollbarStyles } from '@operato/styles';
|
|
9
9
|
import { FileDropHelper } from '@operato/utils';
|
|
10
10
|
import { OxFormField } from './ox-form-field.js';
|
|
11
|
-
const VIDEO_FALLBACK = new URL('../../assets/images/no-video.png', import.meta.url).href;
|
|
12
11
|
let OxInputVideo = class OxInputVideo extends OxFormField {
|
|
13
12
|
static { this.styles = [
|
|
14
13
|
ScrollbarStyles,
|
|
@@ -111,9 +110,7 @@ let OxInputVideo = class OxInputVideo extends OxFormField {
|
|
|
111
110
|
return html `
|
|
112
111
|
${src
|
|
113
112
|
? html `
|
|
114
|
-
<video src=${src} controls style="max-width: 100%;">
|
|
115
|
-
Your browser does not support the video tag.
|
|
116
|
-
</video>
|
|
113
|
+
<video src=${src} controls style="max-width: 100%;">Your browser does not support the video tag.</video>
|
|
117
114
|
`
|
|
118
115
|
: html `
|
|
119
116
|
<div class="placeholder">
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-video.js","sourceRoot":"","sources":["../../src/ox-input-video.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;
|
|
1
|
+
{"version":3,"file":"ox-input-video.js","sourceRoot":"","sources":["../../src/ox-input-video.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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkFF;KACF,AArFY,CAqFZ;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;yBACW,GAAG;WACjB;YACH,CAAC,CAAC,IAAI,CAAA;;;;;WAKH;;;;;;;;;;sBAUW,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;;AApFqB;IAArB,KAAK,CAAC,aAAa,CAAC;+CAA6B;AAxFvC,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CA6KxB","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-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%;\">Your browser does not support the video tag.</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"]}
|