@operato/input 0.4.0 → 0.4.3
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 +24 -0
- package/dist/src/ox-buttons-radio.js +7 -7
- package/dist/src/ox-buttons-radio.js.map +1 -1
- package/dist/src/ox-checkbox.js +61 -61
- package/dist/src/ox-checkbox.js.map +1 -1
- package/dist/src/ox-input-3dish.js +22 -22
- package/dist/src/ox-input-3dish.js.map +1 -1
- package/dist/src/ox-input-angle.js +14 -14
- package/dist/src/ox-input-angle.js.map +1 -1
- package/dist/src/ox-input-barcode.js +69 -69
- package/dist/src/ox-input-barcode.js.map +1 -1
- package/dist/src/ox-input-code.js +25 -25
- package/dist/src/ox-input-code.js.map +1 -1
- package/dist/src/ox-input-container.js +6 -6
- package/dist/src/ox-input-container.js.map +1 -1
- package/dist/src/ox-input-data.js +27 -27
- package/dist/src/ox-input-data.js.map +1 -1
- package/dist/src/ox-input-file.js +73 -73
- package/dist/src/ox-input-file.js.map +1 -1
- package/dist/src/ox-input-id.js +15 -15
- package/dist/src/ox-input-id.js.map +1 -1
- package/dist/src/ox-input-image.js +68 -68
- package/dist/src/ox-input-image.js.map +1 -1
- package/dist/src/ox-input-search.js +27 -27
- package/dist/src/ox-input-search.js.map +1 -1
- package/dist/src/ox-input-stack.js +32 -32
- package/dist/src/ox-input-stack.js.map +1 -1
- package/dist/src/ox-select.js +36 -36
- package/dist/src/ox-select.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +5 -5
|
@@ -36,6 +36,31 @@ let OxInputCode = class OxInputCode extends OxFormField {
|
|
|
36
36
|
this._editor = null;
|
|
37
37
|
this._changed = false;
|
|
38
38
|
}
|
|
39
|
+
static { this.styles = [
|
|
40
|
+
ScrollbarStyles,
|
|
41
|
+
css `
|
|
42
|
+
${unsafeCSS(CodeMirrorStyle)}
|
|
43
|
+
${unsafeCSS(FullScreenStyle)}
|
|
44
|
+
${unsafeCSS(NightThemeStyle)}
|
|
45
|
+
`,
|
|
46
|
+
css `
|
|
47
|
+
:host {
|
|
48
|
+
display: block;
|
|
49
|
+
position: relative;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
textarea {
|
|
53
|
+
display: block;
|
|
54
|
+
height: 100%;
|
|
55
|
+
width: 100%;
|
|
56
|
+
resize: none;
|
|
57
|
+
font-size: 16px;
|
|
58
|
+
line-height: 20px;
|
|
59
|
+
border: 0px;
|
|
60
|
+
padding: 0px;
|
|
61
|
+
}
|
|
62
|
+
`
|
|
63
|
+
]; }
|
|
39
64
|
// private lint: any
|
|
40
65
|
// private hintOptions: any
|
|
41
66
|
updated(changes) {
|
|
@@ -104,31 +129,6 @@ let OxInputCode = class OxInputCode extends OxFormField {
|
|
|
104
129
|
return this._editor;
|
|
105
130
|
}
|
|
106
131
|
};
|
|
107
|
-
OxInputCode.styles = [
|
|
108
|
-
ScrollbarStyles,
|
|
109
|
-
css `
|
|
110
|
-
${unsafeCSS(CodeMirrorStyle)}
|
|
111
|
-
${unsafeCSS(FullScreenStyle)}
|
|
112
|
-
${unsafeCSS(NightThemeStyle)}
|
|
113
|
-
`,
|
|
114
|
-
css `
|
|
115
|
-
:host {
|
|
116
|
-
display: block;
|
|
117
|
-
position: relative;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
textarea {
|
|
121
|
-
display: block;
|
|
122
|
-
height: 100%;
|
|
123
|
-
width: 100%;
|
|
124
|
-
resize: none;
|
|
125
|
-
font-size: 16px;
|
|
126
|
-
line-height: 20px;
|
|
127
|
-
border: 0px;
|
|
128
|
-
padding: 0px;
|
|
129
|
-
}
|
|
130
|
-
`
|
|
131
|
-
];
|
|
132
132
|
__decorate([
|
|
133
133
|
property({ type: String })
|
|
134
134
|
], OxInputCode.prototype, "value", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-code.js","sourceRoot":"","sources":["../../src/ox-input-code.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,uCAAuC,CAAA;AAC9C,OAAO,+BAA+B,CAAA;AACtC,OAAO,qCAAqC,CAAA;AAC5C,OAAO,sCAAsC,CAAA;AAE7C,OAAO,eAAe,MAAM,uDAAuD,CAAA;AACnF,OAAO,eAAe,MAAM,6CAA6C,CAAA;AACzE,OAAO,eAAe,MAAM,0CAA0C,CAAA;AACtE,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,SAAS,EAAE,MAAM,KAAK,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAE7C;;;;;;;EAOE;AAEF,IAAqB,WAAW,GAAhC,MAAqB,WAAY,SAAQ,WAAW;IAApD;;QA2BE;;WAEG;QACyB,UAAK,GAAW,EAAE,CAAA;QAEK,YAAO,GAAW,CAAC,CAAA;QACd,eAAU,GAAY,IAAI,CAAA;QAE1E,sBAAiB,GAAY,KAAK,CAAA;QAClC,mBAAc,GAAY,KAAK,CAAA;QAC/B,YAAO,GAAqD,IAAI,CAAA;QAChE,aAAQ,GAAY,KAAK,CAAA;IA8EnC,CAAC;
|
|
1
|
+
{"version":3,"file":"ox-input-code.js","sourceRoot":"","sources":["../../src/ox-input-code.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport 'codemirror/mode/javascript/javascript'\nimport 'codemirror/mode/python/python'\nimport 'codemirror/addon/display/fullscreen'\nimport 'codemirror/addon/display/autorefresh'\n\nimport FullScreenStyle from '!!text-loader!codemirror/addon/display/fullscreen.css'\nimport CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css'\nimport NightThemeStyle from '!!text-loader!codemirror/theme/night.css'\nimport CodeMirror from 'codemirror'\nimport { css, html, PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { OxFormField } from './ox-form-field'\n\n/**\nWEB Component for code-mirror code editor.\n\nExample:\n\n <things-editor-code .value=${text} mode=${mode} tab-size=\"4\" tab-as-space=\"true\">\n </things-editor-code>\n*/\n@customElement('ox-input-code')\nexport default class OxInputCode extends OxFormField {\n static styles = [\n ScrollbarStyles,\n css`\n ${unsafeCSS(CodeMirrorStyle)}\n ${unsafeCSS(FullScreenStyle)}\n ${unsafeCSS(NightThemeStyle)}\n `,\n css`\n :host {\n display: block;\n position: relative;\n }\n\n textarea {\n display: block;\n height: 100%;\n width: 100%;\n resize: none;\n font-size: 16px;\n line-height: 20px;\n border: 0px;\n padding: 0px;\n }\n `\n ]\n\n /**\n * `value`는 에디터에서 작성중인 contents이다.\n */\n @property({ type: String }) value: string = ''\n @property({ type: String }) mode?: string\n @property({ type: Number, attribute: 'tab-size' }) tabSize: number = 2\n @property({ type: Boolean, attribute: 'tab-as-space' }) tabAsSpace: boolean = true\n\n private _outside_changing: boolean = false\n private _self_changing: boolean = false\n private _editor: CodeMirror.EditorFromTextArea | null | undefined = null\n private _changed: boolean = false\n\n // private lint: any\n // private hintOptions: any\n\n updated(changes: PropertyValues<this>) {\n this._outside_changing = true\n if (changes.has('value') && this.editor && !this._self_changing) {\n this.editor?.setValue(this.value === undefined ? '' : String(this.value))\n this.editor?.refresh()\n }\n this._outside_changing = false\n }\n\n render() {\n return html` <textarea></textarea> `\n }\n\n get editor() {\n if (!this._editor) {\n let textarea = this.renderRoot.querySelector('textarea')\n let mode = this.mode || 'javascript'\n let tabSize = Number(this.tabSize) || 2\n let indentUnit = tabSize\n // let lint = this.lint\n // let hintOptions = this.hintOptions\n let tabAsSpace = this.tabAsSpace\n\n if (textarea) {\n this._editor = CodeMirror.fromTextArea(textarea, {\n value: this.value,\n mode,\n // lint,\n // hintOptions,\n tabSize,\n indentUnit,\n lineNumbers: false,\n showCursorWhenSelecting: true,\n theme: 'night',\n extraKeys: {\n F11: function (cm) {\n cm.setOption('fullScreen', !cm.getOption('fullScreen'))\n },\n Esc: function (cm) {\n cm.setOption('fullScreen', !cm.getOption('fullScreen'))\n },\n // https://github.com/codemirror/CodeMirror/issues/988#issuecomment-37095621\n Tab: tabAsSpace\n ? function (cm: CodeMirror.Editor) {\n cm.replaceSelection(Array(cm.getOption('tabSize')).join(' '))\n }\n : false\n },\n autoRefresh: {\n delay: 500\n }\n })\n\n this._editor.on('blur', e => {\n if (!this._changed) return\n\n this.value = e.getValue()\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n })\n\n this._editor.on('change', async e => {\n this._self_changing = true\n\n this._changed = true\n\n await this.updateComplete\n this._self_changing = false\n })\n }\n }\n\n return this._editor\n }\n}\n"]}
|
|
@@ -4,6 +4,12 @@ import '@operato/popup/ox-popup-list.js';
|
|
|
4
4
|
import { css, html, LitElement } from 'lit';
|
|
5
5
|
import { customElement, query } from 'lit/decorators.js';
|
|
6
6
|
let OxInputContainer = class OxInputContainer extends LitElement {
|
|
7
|
+
static { this.styles = [
|
|
8
|
+
css `
|
|
9
|
+
:host {
|
|
10
|
+
}
|
|
11
|
+
`
|
|
12
|
+
]; }
|
|
7
13
|
render() {
|
|
8
14
|
return html `
|
|
9
15
|
<slot> </slot>
|
|
@@ -19,12 +25,6 @@ let OxInputContainer = class OxInputContainer extends LitElement {
|
|
|
19
25
|
});
|
|
20
26
|
}
|
|
21
27
|
};
|
|
22
|
-
OxInputContainer.styles = [
|
|
23
|
-
css `
|
|
24
|
-
:host {
|
|
25
|
-
}
|
|
26
|
-
`
|
|
27
|
-
];
|
|
28
28
|
__decorate([
|
|
29
29
|
query('ox-popup-list')
|
|
30
30
|
], OxInputContainer.prototype, "popupList", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-container.js","sourceRoot":"","sources":["../../src/ox-input-container.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAKxD,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,UAAU;
|
|
1
|
+
{"version":3,"file":"ox-input-container.js","sourceRoot":"","sources":["../../src/ox-input-container.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAKxD,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,UAAU;aACvC,WAAM,GAAG;QACd,GAAG,CAAA;;;KAGF;KACF,CAAA;IAID,MAAM;QACJ,OAAO,IAAI,CAAA;;yBAEU,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;;;KAGjD,CAAA;IACH,CAAC;IAED,aAAa,CAAC,CAAa;QACzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,CAAC;YACP,GAAG,EAAE,CAAC;SACP,CAAC,CAAA;IACJ,CAAC;CACF,CAAA;AAjByB;IAAvB,KAAK,CAAC,eAAe,CAAC;mDAAwB;AARpC,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAyB5B;SAzBY,gBAAgB","sourcesContent":["import '@material/mwc-icon'\nimport '@operato/popup/ox-popup-list.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { OxPopupList } from '@operato/popup'\n\n@customElement('ox-input-container')\nexport class OxInputContainer extends LitElement {\n static styles = [\n css`\n :host {\n }\n `\n ]\n\n @query('ox-popup-list') popupList!: OxPopupList\n\n render() {\n return html`\n <slot> </slot>\n <mwc-icon @click=${this.openPopupList.bind(this)}>menu</mwc-icon>\n\n <ox-popup-list></ox-popup-list>\n `\n }\n\n openPopupList(e: MouseEvent) {\n this.popupList.open({\n left: 0,\n top: 0\n })\n }\n}\n"]}
|
|
@@ -15,6 +15,33 @@ Example:
|
|
|
15
15
|
</ox-input-data>
|
|
16
16
|
*/
|
|
17
17
|
let OxInputData = class OxInputData extends OxFormField {
|
|
18
|
+
static { this.styles = [
|
|
19
|
+
css `
|
|
20
|
+
:host {
|
|
21
|
+
display: flex;
|
|
22
|
+
flex-direction: column;
|
|
23
|
+
position: relative;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
div[datatype] {
|
|
27
|
+
display: flex;
|
|
28
|
+
align-items: center;
|
|
29
|
+
padding: 2px;
|
|
30
|
+
background-color: rgba(0, 0, 0, 0.08);
|
|
31
|
+
font-size: small;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
div[datatype] mwc-icon {
|
|
35
|
+
margin-left: auto;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
ox-input-code {
|
|
39
|
+
flex: 1;
|
|
40
|
+
max-width: 260px;
|
|
41
|
+
overflow: auto;
|
|
42
|
+
}
|
|
43
|
+
`
|
|
44
|
+
]; }
|
|
18
45
|
render() {
|
|
19
46
|
return html `
|
|
20
47
|
<div datatype>
|
|
@@ -101,33 +128,6 @@ let OxInputData = class OxInputData extends OxFormField {
|
|
|
101
128
|
}));
|
|
102
129
|
}
|
|
103
130
|
};
|
|
104
|
-
OxInputData.styles = [
|
|
105
|
-
css `
|
|
106
|
-
:host {
|
|
107
|
-
display: flex;
|
|
108
|
-
flex-direction: column;
|
|
109
|
-
position: relative;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
div[datatype] {
|
|
113
|
-
display: flex;
|
|
114
|
-
align-items: center;
|
|
115
|
-
padding: 2px;
|
|
116
|
-
background-color: rgba(0, 0, 0, 0.08);
|
|
117
|
-
font-size: small;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
div[datatype] mwc-icon {
|
|
121
|
-
margin-left: auto;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
ox-input-code {
|
|
125
|
-
flex: 1;
|
|
126
|
-
max-width: 260px;
|
|
127
|
-
overflow: auto;
|
|
128
|
-
}
|
|
129
|
-
`
|
|
130
|
-
];
|
|
131
131
|
OxInputData = __decorate([
|
|
132
132
|
customElement('ox-input-data')
|
|
133
133
|
], OxInputData);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-data.js","sourceRoot":"","sources":["../../src/ox-input-data.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,iBAAiB,CAAA;AAExB,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAG7C;;;;;;;EAOE;AAEF,IAAqB,WAAW,GAAhC,MAAqB,WAAY,SAAQ,WAAW;
|
|
1
|
+
{"version":3,"file":"ox-input-data.js","sourceRoot":"","sources":["../../src/ox-input-data.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-input-code'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\nimport OxInputCode from './ox-input-code'\n\n/**\nWEB Component for code-mirror based data editor.\n\nExample:\n\n <ox-input-data value=${text}>\n </ox-input-data>\n*/\n@customElement('ox-input-data')\nexport default class OxInputData extends OxFormField {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n position: relative;\n }\n\n div[datatype] {\n display: flex;\n align-items: center;\n padding: 2px;\n background-color: rgba(0, 0, 0, 0.08);\n font-size: small;\n }\n\n div[datatype] mwc-icon {\n margin-left: auto;\n }\n\n ox-input-code {\n flex: 1;\n max-width: 260px;\n overflow: auto;\n }\n `\n ]\n\n render() {\n return html`\n <div datatype>\n <input\n type=\"radio\"\n name=\"data-type\"\n data-value=\"string\"\n .checked=${typeof this.value == 'string'}\n @click=${() => this._setDataType('string')}\n />string\n\n <input\n type=\"radio\"\n name=\"data-type\"\n data-value=\"number\"\n .checked=${typeof this.value == 'number'}\n @click=${() => this._setDataType('number')}\n />number\n\n <input\n type=\"radio\"\n name=\"data-type\"\n data-value=\"object\"\n .checked=${typeof this.value == 'object'}\n @click=${() => this._setDataType('object')}\n />object\n <mwc-icon @click=${() => this._clearData()} title=\"delete\">delete_forever</mwc-icon>\n </div>\n\n <ox-input-code .value=${this._getData(this.value)} editor> </ox-input-code>\n `\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', e => {\n e.stopPropagation()\n const target = e.target as OxInputCode\n if (target.hasAttribute('editor')) {\n this.value = target.value\n }\n\n const type = this.renderRoot.querySelector('input[name=data-type]:checked')?.getAttribute('data-value')\n this._setDataType(type)\n })\n }\n\n udpated(changes: PropertyValues<this>) {\n if (changes.has('value')) {\n this.value = this._getData(this.value)\n }\n }\n\n _setDataType(type: string | undefined | null) {\n if (typeof this.value !== type) {\n var value = this.value\n\n try {\n switch (type) {\n case 'string':\n this.value = String(value || '')\n break\n case 'number':\n if (!isNaN(value)) {\n this.value = Number(value)\n }\n break\n case 'object':\n this.value = eval('(' + value + ')')\n break\n }\n } catch (e) {\n console.log(e)\n }\n }\n\n this._onAfterValueChange()\n }\n\n _clearData() {\n this.value = undefined\n this._onAfterValueChange()\n }\n\n _getData(data: any) {\n return typeof data !== 'object' ? data || '' : JSON.stringify(data, null, 1)\n }\n\n _onAfterValueChange() {\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true\n })\n )\n }\n}\n"]}
|
|
@@ -11,6 +11,79 @@ let OxInputFile = class OxInputFile extends OxFormField {
|
|
|
11
11
|
this.hideFileList = false;
|
|
12
12
|
this.attachFileList = false;
|
|
13
13
|
}
|
|
14
|
+
static { this.styles = [
|
|
15
|
+
ScrollbarStyles,
|
|
16
|
+
css `
|
|
17
|
+
:host {
|
|
18
|
+
display: flex;
|
|
19
|
+
flex-direction: column;
|
|
20
|
+
border-radius: var(--border-radius);
|
|
21
|
+
align-items: center;
|
|
22
|
+
justify-content: center;
|
|
23
|
+
padding: var(--padding-default, 9px);
|
|
24
|
+
min-height: 100px;
|
|
25
|
+
text-transform: capitalize;
|
|
26
|
+
|
|
27
|
+
border: var(--file-uploader-border);
|
|
28
|
+
background-color: var(--main-section-background-color);
|
|
29
|
+
font: var(--file-uploader-font) !important;
|
|
30
|
+
color: var(--file-uploader-color);
|
|
31
|
+
}
|
|
32
|
+
:host > mwc-icon {
|
|
33
|
+
color: var(--file-uploader-icon-color);
|
|
34
|
+
--mdc-icon-size: var(--file-uploader-icon-size, 36px);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
:host(.candrop) {
|
|
38
|
+
background-color: var(--file-uploader-candrop-background-color);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
#input-file {
|
|
42
|
+
display: none;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
label {
|
|
46
|
+
position: relative;
|
|
47
|
+
width: auto;
|
|
48
|
+
border: none;
|
|
49
|
+
text-transform: capitalize;
|
|
50
|
+
|
|
51
|
+
padding: var(--file-uploader-label-padding);
|
|
52
|
+
border-radius: var(--file-uploader-label-border-radius);
|
|
53
|
+
background-color: var(--file-uploader-label-background-color);
|
|
54
|
+
color: var(--file-uploader-label-color);
|
|
55
|
+
font: var(--file-uploader-label-font) !important;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
ul {
|
|
59
|
+
max-width: 500px;
|
|
60
|
+
width: 100%;
|
|
61
|
+
list-style: none;
|
|
62
|
+
margin: 5px 0 0 0;
|
|
63
|
+
padding: 0;
|
|
64
|
+
max-height: 46px;
|
|
65
|
+
overflow: auto;
|
|
66
|
+
background-color: rgba(var(--primary-color-rgb), 0.1);
|
|
67
|
+
}
|
|
68
|
+
li {
|
|
69
|
+
text-align: left;
|
|
70
|
+
|
|
71
|
+
padding: 3px 5px 2px 5px;
|
|
72
|
+
border-bottom: var(--file-uploader-li-border-bottom);
|
|
73
|
+
font: normal 14px var(--theme-font);
|
|
74
|
+
}
|
|
75
|
+
li mwc-icon {
|
|
76
|
+
float: right;
|
|
77
|
+
cursor: pointer;
|
|
78
|
+
margin: var(--file-uploader-li-icon-margin);
|
|
79
|
+
font-size: 1em;
|
|
80
|
+
}
|
|
81
|
+
li mwc-icon:hover,
|
|
82
|
+
li mwc-icon:active {
|
|
83
|
+
color: var(--file-uploader-li-icon-focus-color);
|
|
84
|
+
}
|
|
85
|
+
`
|
|
86
|
+
]; }
|
|
14
87
|
render() {
|
|
15
88
|
var files = this.value || [];
|
|
16
89
|
return html `
|
|
@@ -82,79 +155,6 @@ let OxInputFile = class OxInputFile extends OxFormField {
|
|
|
82
155
|
}));
|
|
83
156
|
}
|
|
84
157
|
};
|
|
85
|
-
OxInputFile.styles = [
|
|
86
|
-
ScrollbarStyles,
|
|
87
|
-
css `
|
|
88
|
-
:host {
|
|
89
|
-
display: flex;
|
|
90
|
-
flex-direction: column;
|
|
91
|
-
border-radius: var(--border-radius);
|
|
92
|
-
align-items: center;
|
|
93
|
-
justify-content: center;
|
|
94
|
-
padding: var(--padding-default, 9px);
|
|
95
|
-
min-height: 100px;
|
|
96
|
-
text-transform: capitalize;
|
|
97
|
-
|
|
98
|
-
border: var(--file-uploader-border);
|
|
99
|
-
background-color: var(--main-section-background-color);
|
|
100
|
-
font: var(--file-uploader-font) !important;
|
|
101
|
-
color: var(--file-uploader-color);
|
|
102
|
-
}
|
|
103
|
-
:host > mwc-icon {
|
|
104
|
-
color: var(--file-uploader-icon-color);
|
|
105
|
-
--mdc-icon-size: var(--file-uploader-icon-size, 36px);
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
:host(.candrop) {
|
|
109
|
-
background-color: var(--file-uploader-candrop-background-color);
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
#input-file {
|
|
113
|
-
display: none;
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
label {
|
|
117
|
-
position: relative;
|
|
118
|
-
width: auto;
|
|
119
|
-
border: none;
|
|
120
|
-
text-transform: capitalize;
|
|
121
|
-
|
|
122
|
-
padding: var(--file-uploader-label-padding);
|
|
123
|
-
border-radius: var(--file-uploader-label-border-radius);
|
|
124
|
-
background-color: var(--file-uploader-label-background-color);
|
|
125
|
-
color: var(--file-uploader-label-color);
|
|
126
|
-
font: var(--file-uploader-label-font) !important;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
ul {
|
|
130
|
-
max-width: 500px;
|
|
131
|
-
width: 100%;
|
|
132
|
-
list-style: none;
|
|
133
|
-
margin: 5px 0 0 0;
|
|
134
|
-
padding: 0;
|
|
135
|
-
max-height: 46px;
|
|
136
|
-
overflow: auto;
|
|
137
|
-
background-color: rgba(var(--primary-color-rgb), 0.1);
|
|
138
|
-
}
|
|
139
|
-
li {
|
|
140
|
-
text-align: left;
|
|
141
|
-
|
|
142
|
-
padding: 3px 5px 2px 5px;
|
|
143
|
-
border-bottom: var(--file-uploader-li-border-bottom);
|
|
144
|
-
font: normal 14px var(--theme-font);
|
|
145
|
-
}
|
|
146
|
-
li mwc-icon {
|
|
147
|
-
float: right;
|
|
148
|
-
cursor: pointer;
|
|
149
|
-
margin: var(--file-uploader-li-icon-margin);
|
|
150
|
-
font-size: 1em;
|
|
151
|
-
}
|
|
152
|
-
li mwc-icon:hover,
|
|
153
|
-
li mwc-icon:active {
|
|
154
|
-
color: var(--file-uploader-li-icon-focus-color);
|
|
155
|
-
}
|
|
156
|
-
`
|
|
157
|
-
];
|
|
158
158
|
__decorate([
|
|
159
159
|
property({ type: Boolean })
|
|
160
160
|
], OxInputFile.prototype, "multiple", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-file.js","sourceRoot":"","sources":["../../src/ox-input-file.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGhD,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,WAAW;IAA5C;;QAiFE,iBAAY,GAAY,KAAK,CAAA;QAE7B,mBAAc,GAAY,KAAK,CAAA;IA0FjC,CAAC;
|
|
1
|
+
{"version":3,"file":"ox-input-file.js","sourceRoot":"","sources":["../../src/ox-input-file.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport { css, html } from 'lit'\nimport { customElement, property, 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-file')\nexport class OxInputFile extends OxFormField {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n border-radius: var(--border-radius);\n align-items: center;\n justify-content: center;\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(--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 --mdc-icon-size: var(--file-uploader-icon-size, 36px);\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 width: 100%;\n list-style: none;\n margin: 5px 0 0 0;\n padding: 0;\n max-height: 46px;\n overflow: auto;\n background-color: rgba(var(--primary-color-rgb), 0.1);\n }\n li {\n text-align: left;\n\n padding: 3px 5px 2px 5px;\n border-bottom: var(--file-uploader-li-border-bottom);\n font: normal 14px var(--theme-font);\n }\n li mwc-icon {\n float: right;\n cursor: pointer;\n margin: var(--file-uploader-li-icon-margin);\n font-size: 1em;\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\n @property({ type: String }) accept?: string\n @property({ type: String }) icon?: string\n @property({ type: String }) label?: string\n @property({ type: String }) description?: string\n @property({ type: Boolean, reflect: true, attribute: 'hide-filelist' })\n hideFileList: boolean = false\n @property({ type: Boolean, reflect: true, attribute: 'attach-filelist' })\n attachFileList: boolean = false\n\n @query('#input-file') fileInput!: HTMLInputElement\n\n render() {\n var files: File[] = this.value || []\n\n return html`\n <mwc-icon>upload</mwc-icon>\n\n <span>drop files here!</span>\n\n <input\n id=\"input-file\"\n type=\"file\"\n accept=${this.accept}\n ?multiple=${this.multiple}\n hidden\n capture=\"environment\"\n @change=${(e: Event) => this._onChangeValue(e)}\n />\n\n <label for=\"input-file\">${this.label || 'select files'}</label>\n\n ${!this.hideFileList && files?.length\n ? html` <ul>\n ${files.map(\n file => html`\n <li>\n - ${file.name}\n <mwc-icon\n @click=${(e: Event) => {\n files.splice(files.indexOf(file), 1)\n this.value = [...files]\n this._notifyChange()\n }}\n >delete_outline</mwc-icon\n >\n </li>\n `\n )}\n </ul>`\n : html``}\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 = this.multiple ? detail : detail[0] ? [detail[0]] : []\n\n this._notifyChange()\n })\n }\n\n get files() {\n return this.value\n }\n\n reset() {\n this.fileInput.value = ''\n this.value = []\n\n this._notifyChange()\n }\n\n _onChangeValue(e: Event) {\n const fileInput = e.currentTarget as HTMLInputElement\n const files = this.value || []\n\n this.value = this.attachFileList\n ? [...files, ...Array.from(fileInput.files as FileList)]\n : [...Array.from(fileInput.files as FileList)]\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-id.js
CHANGED
|
@@ -7,6 +7,21 @@ let OxInputId = class OxInputId extends OxFormField {
|
|
|
7
7
|
super(...arguments);
|
|
8
8
|
this._ids = [];
|
|
9
9
|
}
|
|
10
|
+
static { this.styles = css `
|
|
11
|
+
:host {
|
|
12
|
+
position: relative;
|
|
13
|
+
display: inline-flex;
|
|
14
|
+
align-items: center;
|
|
15
|
+
justify-content: flex-end;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
input {
|
|
19
|
+
width: 100%;
|
|
20
|
+
height: 100%;
|
|
21
|
+
box-sizing: border-box;
|
|
22
|
+
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
23
|
+
}
|
|
24
|
+
`; }
|
|
10
25
|
render() {
|
|
11
26
|
const ids = this._ids || [];
|
|
12
27
|
return html `
|
|
@@ -40,21 +55,6 @@ let OxInputId = class OxInputId extends OxFormField {
|
|
|
40
55
|
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
|
|
41
56
|
}
|
|
42
57
|
};
|
|
43
|
-
OxInputId.styles = css `
|
|
44
|
-
:host {
|
|
45
|
-
position: relative;
|
|
46
|
-
display: inline-flex;
|
|
47
|
-
align-items: center;
|
|
48
|
-
justify-content: flex-end;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
input {
|
|
52
|
-
width: 100%;
|
|
53
|
-
height: 100%;
|
|
54
|
-
box-sizing: border-box;
|
|
55
|
-
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
56
|
-
}
|
|
57
|
-
`;
|
|
58
58
|
__decorate([
|
|
59
59
|
property({ type: Object })
|
|
60
60
|
], OxInputId.prototype, "property", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-id.js","sourceRoot":"","sources":["../../src/ox-input-id.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAG7C,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,WAAW;IAA1C;;QAmBW,SAAI,GAAkB,EAAE,CAAA;IA0CnC,CAAC;
|
|
1
|
+
{"version":3,"file":"ox-input-id.js","sourceRoot":"","sources":["../../src/ox-input-id.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAG7C,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,WAAW;IAA1C;;QAmBW,SAAI,GAAkB,EAAE,CAAA;IA0CnC,CAAC;aA5DQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;GAclB,CAAA;IAMD,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;QAE3B,OAAO,IAAI,CAAA;;;;iBAIE,IAAI,CAAC,KAAK,IAAI,EAAE;mBACd,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;kBAC3C,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;uBACrC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,EAAE;;;;2BAIlC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAA,kBAAkB,EAAE,aAAa,CAAC;KAC1E,CAAA;IACH,CAAC;IAED,eAAe,CAAC,CAAa;QAC3B,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QAEvC,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,6BAA6B,EAAE;YAC7C,MAAM,EAAE;gBACN,SAAS;gBACT,QAAQ,EAAE,CAAC,GAAa,EAAE,EAAE;oBAC1B,IAAI,CAAC,IAAI,GAAG,GAAG,CAAA;gBACjB,CAAC;aACF;SACF,CAAC,CACH,CAAA;IACH,CAAC;IAED,eAAe,CAAC,CAAa;QAC3B,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAA;QAEjD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;CACF,CAAA;AA5C6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAoD;AAEtE;IAAR,KAAK,EAAE;uCAAyB;AAnBtB,SAAS;IADrB,aAAa,CAAC,aAAa,CAAC;GAChB,SAAS,CA6DrB;SA7DY,SAAS","sourcesContent":["import { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-input-id')\nexport class OxInputId extends OxFormField {\n static styles = css`\n :host {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: flex-end;\n }\n\n input {\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.2);\n }\n `\n\n @property({ type: Object }) property: { component?: string } | null | undefined\n\n @state() _ids: Array<string> = []\n\n render() {\n const ids = this._ids || []\n\n return html`\n <input\n id=\"text\"\n type=\"text\"\n .value=${this.value || ''}\n @focusin=${(e: FocusEvent) => this._onInputFocused(e)}\n @change=${(e: InputEvent) => this._onInputChanged(e)}\n .placeholder=${this.getAttribute('placeholder') || ''}\n list=\"ids\"\n />\n\n <datalist id=\"ids\">${ids.map(id => html` <option value=${id}></option> `)}</datalist>\n `\n }\n\n _onInputFocused(e: FocusEvent) {\n var { component } = this.property || {}\n\n document.dispatchEvent(\n new CustomEvent('get-all-scene-component-ids', {\n detail: {\n component,\n callback: (ids: string[]) => {\n this._ids = ids\n }\n }\n })\n )\n }\n\n _onInputChanged(e: InputEvent) {\n e.stopPropagation()\n\n this.value = (e.target as HTMLInputElement).value\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}
|
|
@@ -7,6 +7,74 @@ import { FileDropHelper } from '@operato/utils';
|
|
|
7
7
|
import { OxFormField } from './ox-form-field.js';
|
|
8
8
|
const IMAGE_FALLBACK = new URL('../../assets/images/no-image.png', import.meta.url).href;
|
|
9
9
|
let OxInputImage = class OxInputImage extends OxFormField {
|
|
10
|
+
static { this.styles = [
|
|
11
|
+
ScrollbarStyles,
|
|
12
|
+
css `
|
|
13
|
+
:host {
|
|
14
|
+
position: relative;
|
|
15
|
+
box-sizing: border-box;
|
|
16
|
+
|
|
17
|
+
display: flex;
|
|
18
|
+
flex-direction: column;
|
|
19
|
+
place-content: center;
|
|
20
|
+
border-radius: var(--border-radius);
|
|
21
|
+
padding: var(--padding-default, 9px);
|
|
22
|
+
min-height: 100px;
|
|
23
|
+
text-transform: capitalize;
|
|
24
|
+
|
|
25
|
+
border: var(--file-uploader-border);
|
|
26
|
+
background-color: var(--main-section-background-color);
|
|
27
|
+
font: var(--file-uploader-font) !important;
|
|
28
|
+
color: var(--file-uploader-color);
|
|
29
|
+
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
:host(.candrop) {
|
|
34
|
+
background-color: var(--file-uploader-candrop-background-color);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
img {
|
|
38
|
+
min-height: 100%;
|
|
39
|
+
margin: auto;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
[overlay] {
|
|
43
|
+
position: absolute;
|
|
44
|
+
left: 0;
|
|
45
|
+
top: 0;
|
|
46
|
+
width: 100%;
|
|
47
|
+
height: 100%;
|
|
48
|
+
opacity: 0%;
|
|
49
|
+
background-color: white;
|
|
50
|
+
|
|
51
|
+
display: flex;
|
|
52
|
+
place-content: center;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
[overlay]:hover {
|
|
56
|
+
opacity: 50%;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
#input-file {
|
|
60
|
+
display: none;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
label {
|
|
64
|
+
border: none;
|
|
65
|
+
flex: 1;
|
|
66
|
+
display: flex;
|
|
67
|
+
place-content: center;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
mwc-icon {
|
|
71
|
+
align-self: center;
|
|
72
|
+
|
|
73
|
+
color: var(--file-uploader-icon-color, black);
|
|
74
|
+
--mdc-icon-size: var(--file-uploader-icon-size, 36px);
|
|
75
|
+
}
|
|
76
|
+
`
|
|
77
|
+
]; }
|
|
10
78
|
render() {
|
|
11
79
|
var value = this.value;
|
|
12
80
|
var src;
|
|
@@ -72,74 +140,6 @@ let OxInputImage = class OxInputImage extends OxFormField {
|
|
|
72
140
|
}));
|
|
73
141
|
}
|
|
74
142
|
};
|
|
75
|
-
OxInputImage.styles = [
|
|
76
|
-
ScrollbarStyles,
|
|
77
|
-
css `
|
|
78
|
-
:host {
|
|
79
|
-
position: relative;
|
|
80
|
-
box-sizing: border-box;
|
|
81
|
-
|
|
82
|
-
display: flex;
|
|
83
|
-
flex-direction: column;
|
|
84
|
-
place-content: center;
|
|
85
|
-
border-radius: var(--border-radius);
|
|
86
|
-
padding: var(--padding-default, 9px);
|
|
87
|
-
min-height: 100px;
|
|
88
|
-
text-transform: capitalize;
|
|
89
|
-
|
|
90
|
-
border: var(--file-uploader-border);
|
|
91
|
-
background-color: var(--main-section-background-color);
|
|
92
|
-
font: var(--file-uploader-font) !important;
|
|
93
|
-
color: var(--file-uploader-color);
|
|
94
|
-
|
|
95
|
-
overflow: hidden;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
:host(.candrop) {
|
|
99
|
-
background-color: var(--file-uploader-candrop-background-color);
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
img {
|
|
103
|
-
min-height: 100%;
|
|
104
|
-
margin: auto;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
[overlay] {
|
|
108
|
-
position: absolute;
|
|
109
|
-
left: 0;
|
|
110
|
-
top: 0;
|
|
111
|
-
width: 100%;
|
|
112
|
-
height: 100%;
|
|
113
|
-
opacity: 0%;
|
|
114
|
-
background-color: white;
|
|
115
|
-
|
|
116
|
-
display: flex;
|
|
117
|
-
place-content: center;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
[overlay]:hover {
|
|
121
|
-
opacity: 50%;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
#input-file {
|
|
125
|
-
display: none;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
label {
|
|
129
|
-
border: none;
|
|
130
|
-
flex: 1;
|
|
131
|
-
display: flex;
|
|
132
|
-
place-content: center;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
mwc-icon {
|
|
136
|
-
align-self: center;
|
|
137
|
-
|
|
138
|
-
color: var(--file-uploader-icon-color, black);
|
|
139
|
-
--mdc-icon-size: var(--file-uploader-icon-size, 36px);
|
|
140
|
-
}
|
|
141
|
-
`
|
|
142
|
-
];
|
|
143
143
|
__decorate([
|
|
144
144
|
query('#input-file')
|
|
145
145
|
], OxInputImage.prototype, "fileInput", void 0);
|