@operato/input 0.2.34 → 0.2.41
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 +51 -0
- package/demo/index-3dish.html +15 -2
- package/demo/index-angle.html +9 -4
- package/demo/index-button-radio.html +18 -6
- package/demo/index-checkbox.html +17 -9
- package/demo/index-stack.html +15 -3
- package/demo/index.html +79 -73
- package/dist/src/ox-buttons-radio.d.ts +7 -5
- package/dist/src/ox-buttons-radio.js +13 -9
- package/dist/src/ox-buttons-radio.js.map +1 -1
- package/dist/src/ox-checkbox.d.ts +5 -6
- package/dist/src/ox-checkbox.js +32 -29
- package/dist/src/ox-checkbox.js.map +1 -1
- package/dist/src/ox-formfield.d.ts +10 -0
- package/dist/src/ox-formfield.js +38 -0
- package/dist/src/ox-formfield.js.map +1 -0
- package/dist/src/ox-input-3dish.d.ts +15 -14
- package/dist/src/ox-input-3dish.js +51 -23
- package/dist/src/ox-input-3dish.js.map +1 -1
- package/dist/src/ox-input-angle.d.ts +4 -5
- package/dist/src/ox-input-angle.js +10 -12
- package/dist/src/ox-input-angle.js.map +1 -1
- package/dist/src/ox-input-stack.d.ts +5 -3
- package/dist/src/ox-input-stack.js +40 -35
- package/dist/src/ox-input-stack.js.map +1 -1
- package/dist/src/ox-select.d.ts +5 -4
- package/dist/src/ox-select.js +34 -12
- package/dist/src/ox-select.js.map +1 -1
- package/dist/test/property-angle.test.js +3 -3
- package/dist/test/property-angle.test.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -3
- package/src/ox-buttons-radio.ts +15 -9
- package/src/ox-checkbox.ts +36 -29
- package/src/ox-formfield.ts +36 -0
- package/src/ox-input-3dish.ts +65 -29
- package/src/ox-input-angle.ts +11 -12
- package/src/ox-input-stack.ts +43 -24
- package/src/ox-select.ts +44 -15
- package/test/property-angle.test.ts +3 -4
package/dist/src/ox-checkbox.js
CHANGED
|
@@ -1,30 +1,21 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
|
-
*/
|
|
4
|
-
import { __decorate } from "tslib";
|
|
5
1
|
/*
|
|
6
2
|
This component is inspired by https://github.com/Polydile/dile-components, thanks Dile.
|
|
7
3
|
*/
|
|
8
|
-
import {
|
|
4
|
+
import { __decorate } from "tslib";
|
|
5
|
+
import { css, html } from 'lit';
|
|
9
6
|
import { customElement, property, state } from 'lit/decorators.js';
|
|
10
|
-
|
|
7
|
+
import { OxFormField } from './ox-formfield';
|
|
8
|
+
let OxCheckbox = class OxCheckbox extends OxFormField {
|
|
11
9
|
constructor() {
|
|
12
10
|
super(...arguments);
|
|
13
11
|
this.checked = false;
|
|
14
12
|
this.disabled = false;
|
|
15
|
-
this.name = '';
|
|
16
13
|
this._hasInner = !!this.innerHTML.trim().length;
|
|
17
14
|
}
|
|
18
15
|
render() {
|
|
19
16
|
return html `
|
|
20
17
|
<div @click=${this.onClick} ?disabled=${this.disabled}>
|
|
21
|
-
<a
|
|
22
|
-
href="#"
|
|
23
|
-
@click=${(e) => e.preventDefault()}
|
|
24
|
-
@keydown=${this.onKeyDown}
|
|
25
|
-
?checked=${this.checked}
|
|
26
|
-
checkbox
|
|
27
|
-
>
|
|
18
|
+
<a href="#" @click=${(e) => e.preventDefault()} checkbox>
|
|
28
19
|
${this.checked ? this.checkedIcon : this.uncheckedIcon}
|
|
29
20
|
</a>
|
|
30
21
|
${this._hasInner
|
|
@@ -35,6 +26,11 @@ let OxCheckbox = class OxCheckbox extends LitElement {
|
|
|
35
26
|
</div>
|
|
36
27
|
`;
|
|
37
28
|
}
|
|
29
|
+
connectedCallback() {
|
|
30
|
+
super.connectedCallback();
|
|
31
|
+
this.setAttribute('tabindex', '0');
|
|
32
|
+
this.addEventListener('keydown', this.onKeyDown.bind(this));
|
|
33
|
+
}
|
|
38
34
|
onClick() {
|
|
39
35
|
if (this.disabled) {
|
|
40
36
|
return;
|
|
@@ -50,21 +46,28 @@ let OxCheckbox = class OxCheckbox extends LitElement {
|
|
|
50
46
|
}));
|
|
51
47
|
}
|
|
52
48
|
get checkedIcon() {
|
|
53
|
-
return html
|
|
54
|
-
<
|
|
55
|
-
|
|
49
|
+
return html `
|
|
50
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
51
|
+
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
|
|
52
|
+
</svg>
|
|
53
|
+
`;
|
|
56
54
|
}
|
|
57
55
|
get uncheckedIcon() {
|
|
58
|
-
return html
|
|
59
|
-
<
|
|
60
|
-
|
|
56
|
+
return html `
|
|
57
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
58
|
+
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
|
|
59
|
+
</svg>
|
|
60
|
+
`;
|
|
61
61
|
}
|
|
62
62
|
onKeyDown(e) {
|
|
63
63
|
e.preventDefault();
|
|
64
|
-
if (e.
|
|
64
|
+
if (e.key === ' ' || e.key == 'Spacebar') {
|
|
65
65
|
this.onClick();
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
|
+
appendFormData({ formData }) {
|
|
69
|
+
this.name && formData.append(this.name, this.checked ? 'true' : 'false');
|
|
70
|
+
}
|
|
68
71
|
};
|
|
69
72
|
OxCheckbox.styles = [
|
|
70
73
|
css `
|
|
@@ -88,8 +91,8 @@ OxCheckbox.styles = [
|
|
|
88
91
|
border-radius: var(--ox-checkbox-border-radius, 4px);
|
|
89
92
|
border: var(--ox-checkbox-border, 1px solid rgba(0, 0, 0, 0.3));
|
|
90
93
|
background-color: var(--ox-checkbox-background-color, #fff);
|
|
91
|
-
width: var(--ox-checkbox-size,
|
|
92
|
-
height: var(--ox-checkbox-size,
|
|
94
|
+
width: var(--ox-checkbox-size, 15px);
|
|
95
|
+
height: var(--ox-checkbox-size, 15px);
|
|
93
96
|
align-items: center;
|
|
94
97
|
justify-content: center;
|
|
95
98
|
}
|
|
@@ -99,7 +102,7 @@ OxCheckbox.styles = [
|
|
|
99
102
|
border: var(--ox-checkbox-unchecked-border, 1px solid rgba(0, 0, 0, 0.3));
|
|
100
103
|
}
|
|
101
104
|
|
|
102
|
-
|
|
105
|
+
:host([checked]) a {
|
|
103
106
|
background-color: var(--ox-checkbox-checked-background-color, #fff);
|
|
104
107
|
border: var(--ox-checkbox-checked-border, 1px solid #38a25b);
|
|
105
108
|
}
|
|
@@ -108,13 +111,13 @@ OxCheckbox.styles = [
|
|
|
108
111
|
fill: var(--ox-checkbox-fill-color, rgba(0, 0, 0, 0.1));
|
|
109
112
|
}
|
|
110
113
|
|
|
111
|
-
[checked] path {
|
|
114
|
+
:host([checked]) path {
|
|
112
115
|
fill: var(--ox-checkbox-checked-color, #38a25b);
|
|
113
116
|
}
|
|
114
117
|
|
|
115
118
|
svg {
|
|
116
|
-
width: var(--ox-checkbox-size,
|
|
117
|
-
height: var(--ox-checkbox-size,
|
|
119
|
+
width: var(--ox-checkbox-size, 15px);
|
|
120
|
+
height: var(--ox-checkbox-size, 15px);
|
|
118
121
|
}
|
|
119
122
|
|
|
120
123
|
[label] {
|
|
@@ -122,13 +125,13 @@ OxCheckbox.styles = [
|
|
|
122
125
|
color: var(--ox-checkbox-label-color, #3a5877);
|
|
123
126
|
}
|
|
124
127
|
|
|
125
|
-
[checked]
|
|
128
|
+
:host([checked]) [label] {
|
|
126
129
|
font-weight: var(--ox-checkbox-checked-font-weight, bold);
|
|
127
130
|
}
|
|
128
131
|
`
|
|
129
132
|
];
|
|
130
133
|
__decorate([
|
|
131
|
-
property({ type: Boolean })
|
|
134
|
+
property({ type: Boolean, attribute: 'checked', reflect: true })
|
|
132
135
|
], OxCheckbox.prototype, "checked", void 0);
|
|
133
136
|
__decorate([
|
|
134
137
|
property({ type: Boolean })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-checkbox.js","sourceRoot":"","sources":["../../src/ox-checkbox.ts"],"names":[],"mappings":"AAAA;;
|
|
1
|
+
{"version":3,"file":"ox-checkbox.js","sourceRoot":"","sources":["../../src/ox-checkbox.ts"],"names":[],"mappings":"AAAA;;EAEE;;AAEF,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,gBAAgB,CAAA;AAG5C,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,WAAW;IAA3C;;QA+DoE,YAAO,GAAY,KAAK,CAAA;QAC7D,aAAQ,GAAY,KAAK,CAAA;QAG7C,cAAS,GAAY,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC,MAAM,CAAA;IAsE9D,CAAC;IApEC,MAAM;QACJ,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,OAAO,cAAc,IAAI,CAAC,QAAQ;6BAC9B,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;YACjD,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa;;UAEtD,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA;;oBAEI;YACV,CAAC,CAAC,EAAE;;KAET,CAAA;IACH,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA;QAClC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC7D,CAAC;IAED,OAAO;QACL,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAM;SACP;QAED,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAA;QAE5B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB;SACF,CAAC,CACH,CAAA;IACH,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAA;;;;KAIV,CAAA;IACH,CAAC;IAED,IAAI,aAAa;QACf,OAAO,IAAI,CAAA;;;;KAIV,CAAA;IACH,CAAC;IAED,SAAS,CAAC,CAAgB;QACxB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,IAAI,UAAU,EAAE;YACxC,IAAI,CAAC,OAAO,EAAE,CAAA;SACf;IACH,CAAC;IAES,cAAc,CAAC,EAAE,QAAQ,EAAiB;QAClD,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IAC1E,CAAC;CACF,CAAA;AAxIQ,iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0DF;CACF,CAAA;AAEiE;IAAjE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAyB;AAC7D;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAA0B;AAC1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAc;AAEhC;IAAR,KAAK,EAAE;6CAAoD;AAnEjD,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAyItB;SAzIY,UAAU","sourcesContent":["/*\n This component is inspired by https://github.com/Polydile/dile-components, thanks Dile.\n*/\n\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-formfield'\n\n@customElement('ox-checkbox')\nexport class OxCheckbox extends OxFormField {\n static styles = [\n css`\n :host {\n display: block;\n }\n\n div {\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n\n [disabled] {\n opacity: var(--ox-checkbox-disabled-opacity, 0.5);\n cursor: auto;\n }\n\n [checkbox] {\n display: flex;\n border-radius: var(--ox-checkbox-border-radius, 4px);\n border: var(--ox-checkbox-border, 1px solid rgba(0, 0, 0, 0.3));\n background-color: var(--ox-checkbox-background-color, #fff);\n width: var(--ox-checkbox-size, 15px);\n height: var(--ox-checkbox-size, 15px);\n align-items: center;\n justify-content: center;\n }\n\n a {\n background-color: var(--ox-checkbox-unchecked-background-color, #fff);\n border: var(--ox-checkbox-unchecked-border, 1px solid rgba(0, 0, 0, 0.3));\n }\n\n :host([checked]) a {\n background-color: var(--ox-checkbox-checked-background-color, #fff);\n border: var(--ox-checkbox-checked-border, 1px solid #38a25b);\n }\n\n path {\n fill: var(--ox-checkbox-fill-color, rgba(0, 0, 0, 0.1));\n }\n\n :host([checked]) path {\n fill: var(--ox-checkbox-checked-color, #38a25b);\n }\n\n svg {\n width: var(--ox-checkbox-size, 15px);\n height: var(--ox-checkbox-size, 15px);\n }\n\n [label] {\n margin: var(--ox-checkbox-label-margin, 0 0 0 7px);\n color: var(--ox-checkbox-label-color, #3a5877);\n }\n\n :host([checked]) [label] {\n font-weight: var(--ox-checkbox-checked-font-weight, bold);\n }\n `\n ]\n\n @property({ type: Boolean, attribute: 'checked', reflect: true }) checked: boolean = false\n @property({ type: Boolean }) disabled: boolean = false\n @property({ type: String }) name?: string\n\n @state() _hasInner: boolean = !!this.innerHTML.trim().length\n\n render() {\n return html`\n <div @click=${this.onClick} ?disabled=${this.disabled}>\n <a href=\"#\" @click=${(e: Event) => e.preventDefault()} checkbox>\n ${this.checked ? this.checkedIcon : this.uncheckedIcon}\n </a>\n ${this._hasInner\n ? html` <span label>\n <slot></slot>\n </span>`\n : ''}\n </div>\n `\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n this.setAttribute('tabindex', '0')\n this.addEventListener('keydown', this.onKeyDown.bind(this))\n }\n\n onClick() {\n if (this.disabled) {\n return\n }\n\n this.checked = !this.checked\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: {\n checked: this.checked,\n name: this.name\n }\n })\n )\n }\n\n get checkedIcon() {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n </svg>\n `\n }\n\n get uncheckedIcon() {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n </svg>\n `\n }\n\n onKeyDown(e: KeyboardEvent) {\n e.preventDefault()\n\n if (e.key === ' ' || e.key == 'Spacebar') {\n this.onClick()\n }\n }\n\n protected appendFormData({ formData }: FormDataEvent): void {\n this.name && formData.append(this.name, this.checked ? 'true' : 'false')\n }\n}\n"]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { LitElement } from 'lit-element';
|
|
2
|
+
export declare abstract class OxFormField extends LitElement {
|
|
3
|
+
name?: string;
|
|
4
|
+
value?: any;
|
|
5
|
+
private _form;
|
|
6
|
+
private _formdataEventHandler;
|
|
7
|
+
connectedCallback(): void;
|
|
8
|
+
disconnectedCallback(): void;
|
|
9
|
+
protected appendFormData({ formData }: FormDataEvent): void;
|
|
10
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { LitElement } from 'lit-element';
|
|
3
|
+
import { property } from 'lit/decorators.js';
|
|
4
|
+
export class OxFormField extends LitElement {
|
|
5
|
+
constructor() {
|
|
6
|
+
super(...arguments);
|
|
7
|
+
this._form = null;
|
|
8
|
+
this._formdataEventHandler = null;
|
|
9
|
+
}
|
|
10
|
+
connectedCallback() {
|
|
11
|
+
super.connectedCallback();
|
|
12
|
+
if (this.name) {
|
|
13
|
+
this._form = this.closest('form');
|
|
14
|
+
if (this._form) {
|
|
15
|
+
this._formdataEventHandler = this.appendFormData.bind(this);
|
|
16
|
+
this._form.addEventListener('formdata', this._formdataEventHandler);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
disconnectedCallback() {
|
|
21
|
+
super.disconnectedCallback();
|
|
22
|
+
if (this._form) {
|
|
23
|
+
this._form.removeEventListener('formdata', this._formdataEventHandler);
|
|
24
|
+
this._form = null;
|
|
25
|
+
this._formdataEventHandler = null;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
appendFormData({ formData }) {
|
|
29
|
+
this.name && formData.append(this.name, this.value);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
__decorate([
|
|
33
|
+
property({ type: String })
|
|
34
|
+
], OxFormField.prototype, "name", void 0);
|
|
35
|
+
__decorate([
|
|
36
|
+
property()
|
|
37
|
+
], OxFormField.prototype, "value", void 0);
|
|
38
|
+
//# sourceMappingURL=ox-formfield.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-formfield.js","sourceRoot":"","sources":["../../src/ox-formfield.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,MAAM,OAAgB,WAAY,SAAQ,UAAU;IAApD;;QAIU,UAAK,GAA2B,IAAI,CAAA;QACpC,0BAAqB,GAAyB,IAAI,CAAA;IA2B5D,CAAC;IAzBU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;YACjC,IAAI,IAAI,CAAC,KAAK,EAAE;gBACd,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAA;gBAC5E,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAA;aACpE;SACF;IACH,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAE5B,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,qBAAsB,CAAC,CAAA;YACvE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;YACjB,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAA;SAClC;IACH,CAAC;IAES,cAAc,CAAC,EAAE,QAAQ,EAAiB;QAClD,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;IACrD,CAAC;CACF;AA/B6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAc;AAC7B;IAAX,QAAQ,EAAE;0CAAY","sourcesContent":["import { LitElement } from 'lit-element'\nimport { property } from 'lit/decorators.js'\n\nexport abstract class OxFormField extends LitElement {\n @property({ type: String }) name?: string\n @property() value?: any\n\n private _form: HTMLFormElement | null = null\n private _formdataEventHandler: EventListener | null = null\n\n override connectedCallback(): void {\n super.connectedCallback()\n\n if (this.name) {\n this._form = this.closest('form')\n if (this._form) {\n this._formdataEventHandler = this.appendFormData.bind(this) as EventListener\n this._form.addEventListener('formdata', this._formdataEventHandler)\n }\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback()\n\n if (this._form) {\n this._form.removeEventListener('formdata', this._formdataEventHandler!)\n this._form = null\n this._formdataEventHandler = null\n }\n }\n\n protected appendFormData({ formData }: FormDataEvent): void {\n this.name && formData.append(this.name, this.value)\n }\n}\n"]}
|
|
@@ -1,30 +1,31 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
3
|
*/
|
|
4
|
-
import {
|
|
5
|
-
export declare class OxInput3Dish extends
|
|
4
|
+
import { OxFormField } from './ox-formfield';
|
|
5
|
+
export declare class OxInput3Dish extends OxFormField {
|
|
6
6
|
static styles: import("lit").CSSResult[];
|
|
7
7
|
dimension?: {
|
|
8
|
-
width
|
|
9
|
-
height
|
|
10
|
-
depth
|
|
8
|
+
width?: number;
|
|
9
|
+
height?: number;
|
|
10
|
+
depth?: number;
|
|
11
11
|
};
|
|
12
12
|
translatex?: {
|
|
13
|
-
x
|
|
14
|
-
y
|
|
15
|
-
z
|
|
13
|
+
x?: number;
|
|
14
|
+
y?: number;
|
|
15
|
+
z?: number;
|
|
16
16
|
};
|
|
17
17
|
rotate?: {
|
|
18
|
-
x
|
|
19
|
-
y
|
|
20
|
-
z
|
|
18
|
+
x?: number;
|
|
19
|
+
y?: number;
|
|
20
|
+
z?: number;
|
|
21
21
|
};
|
|
22
22
|
scale?: {
|
|
23
|
-
x
|
|
24
|
-
y
|
|
25
|
-
z
|
|
23
|
+
x?: number;
|
|
24
|
+
y?: number;
|
|
25
|
+
z?: number;
|
|
26
26
|
};
|
|
27
27
|
firstUpdated(): void;
|
|
28
28
|
_onChange(e: Event): void;
|
|
29
29
|
render(): import("lit-html").TemplateResult<1>;
|
|
30
|
+
protected appendFormData({ formData }: FormDataEvent): void;
|
|
30
31
|
}
|
|
@@ -2,81 +2,101 @@
|
|
|
2
2
|
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
3
|
*/
|
|
4
4
|
import { __decorate } from "tslib";
|
|
5
|
-
import { css, html
|
|
5
|
+
import { css, html } from 'lit';
|
|
6
6
|
import { customElement, property } from 'lit/decorators.js';
|
|
7
|
-
|
|
7
|
+
import { OxFormField } from './ox-formfield';
|
|
8
|
+
let OxInput3Dish = class OxInput3Dish extends OxFormField {
|
|
8
9
|
firstUpdated() {
|
|
9
10
|
this.renderRoot.addEventListener('change', this._onChange.bind(this));
|
|
10
11
|
}
|
|
11
12
|
_onChange(e) {
|
|
13
|
+
e.stopPropagation();
|
|
14
|
+
e.preventDefault();
|
|
12
15
|
var element = e.target;
|
|
13
16
|
var id = element.id;
|
|
14
17
|
var prop = id.substr(1);
|
|
15
18
|
var value = Number(element.value);
|
|
16
19
|
switch (element.tagName) {
|
|
17
20
|
case 'PROPERTY-ANGLE':
|
|
18
|
-
value = Number(element.
|
|
21
|
+
value = Number(element.value || 0);
|
|
19
22
|
break;
|
|
20
23
|
}
|
|
21
24
|
switch (id) {
|
|
22
25
|
case 'tx':
|
|
23
26
|
case 'ty':
|
|
24
27
|
case 'tz':
|
|
28
|
+
this.translatex = {
|
|
29
|
+
...this.translatex,
|
|
30
|
+
[prop]: value
|
|
31
|
+
};
|
|
25
32
|
this.dispatchEvent(new CustomEvent('translate-changed', {
|
|
26
33
|
bubbles: true,
|
|
27
34
|
composed: true,
|
|
28
35
|
detail: {
|
|
29
|
-
value:
|
|
30
|
-
...this.translatex,
|
|
31
|
-
[prop]: value
|
|
32
|
-
}
|
|
36
|
+
value: this.translatex
|
|
33
37
|
}
|
|
34
38
|
}));
|
|
35
39
|
break;
|
|
36
40
|
case 'rx':
|
|
37
41
|
case 'ry':
|
|
38
42
|
case 'rz':
|
|
43
|
+
this.rotate = {
|
|
44
|
+
...this.rotate,
|
|
45
|
+
[prop]: value
|
|
46
|
+
};
|
|
39
47
|
this.dispatchEvent(new CustomEvent('rotate-changed', {
|
|
40
48
|
bubbles: true,
|
|
41
49
|
composed: true,
|
|
42
50
|
detail: {
|
|
43
|
-
value:
|
|
44
|
-
...this.rotate,
|
|
45
|
-
[prop]: value
|
|
46
|
-
}
|
|
51
|
+
value: this.rotate
|
|
47
52
|
}
|
|
48
53
|
}));
|
|
49
54
|
break;
|
|
50
55
|
case 'sx':
|
|
51
56
|
case 'sy':
|
|
52
57
|
case 'sz':
|
|
58
|
+
this.scale = {
|
|
59
|
+
...this.scale,
|
|
60
|
+
[prop]: value
|
|
61
|
+
};
|
|
53
62
|
this.dispatchEvent(new CustomEvent('scale-changed', {
|
|
54
63
|
bubbles: true,
|
|
55
64
|
composed: true,
|
|
56
65
|
detail: {
|
|
57
|
-
value:
|
|
58
|
-
...this.scale,
|
|
59
|
-
[prop]: value
|
|
60
|
-
}
|
|
66
|
+
value: this.scale
|
|
61
67
|
}
|
|
62
68
|
}));
|
|
63
69
|
break;
|
|
64
70
|
default:
|
|
65
71
|
// dimension
|
|
72
|
+
this.dimension = {
|
|
73
|
+
...this.dimension,
|
|
74
|
+
[prop]: value
|
|
75
|
+
};
|
|
66
76
|
this.dispatchEvent(new CustomEvent('dimension-changed', {
|
|
67
77
|
bubbles: true,
|
|
68
78
|
composed: true,
|
|
69
79
|
detail: {
|
|
70
|
-
value:
|
|
71
|
-
...this.dimension,
|
|
72
|
-
[prop]: value
|
|
73
|
-
}
|
|
80
|
+
value: this.dimension
|
|
74
81
|
}
|
|
75
82
|
}));
|
|
76
83
|
}
|
|
84
|
+
this.value = {
|
|
85
|
+
translate: this.translatex,
|
|
86
|
+
rotate: this.rotate,
|
|
87
|
+
scale: this.scale,
|
|
88
|
+
dimension: this.dimension
|
|
89
|
+
};
|
|
90
|
+
this.dispatchEvent(new CustomEvent('change', {
|
|
91
|
+
bubbles: true,
|
|
92
|
+
composed: true,
|
|
93
|
+
detail: {
|
|
94
|
+
value: this.value
|
|
95
|
+
}
|
|
96
|
+
}));
|
|
77
97
|
}
|
|
78
98
|
render() {
|
|
79
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
99
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
80
100
|
return html `
|
|
81
101
|
<span></span> <span><i18n-msg msgid="label.x-axes">x-axes</i18n-msg></span>
|
|
82
102
|
<span><i18n-msg msgid="label.y-axes">y-axes</i18n-msg></span>
|
|
@@ -92,12 +112,20 @@ let OxInput3Dish = class OxInput3Dish extends LitElement {
|
|
|
92
112
|
<input type="number" id="ty" .value=${(_e = this.translatex) === null || _e === void 0 ? void 0 : _e.y} />
|
|
93
113
|
<input type="number" id="tz" .value=${(_f = this.translatex) === null || _f === void 0 ? void 0 : _f.z} />
|
|
94
114
|
|
|
115
|
+
<label><i18n-msg msgid="label.scale">scale</i18n-msg></label>
|
|
116
|
+
<input type="number" id="sx" .value=${(_g = this.scale) === null || _g === void 0 ? void 0 : _g.x} />
|
|
117
|
+
<input type="number" id="sy" .value=${(_h = this.scale) === null || _h === void 0 ? void 0 : _h.y} />
|
|
118
|
+
<input type="number" id="sz" .value=${(_j = this.scale) === null || _j === void 0 ? void 0 : _j.z} />
|
|
119
|
+
|
|
95
120
|
<label><i18n-msg msgid="label.rotate">rotate</i18n-msg></label>
|
|
96
|
-
<ox-input-angle id="rx" .
|
|
97
|
-
<ox-input-angle id="ry" .
|
|
98
|
-
<ox-input-angle id="rz" .
|
|
121
|
+
<ox-input-angle id="rx" .value=${(_k = this.rotate) === null || _k === void 0 ? void 0 : _k.x}></ox-input-angle>
|
|
122
|
+
<ox-input-angle id="ry" .value=${(_l = this.rotate) === null || _l === void 0 ? void 0 : _l.y}></ox-input-angle>
|
|
123
|
+
<ox-input-angle id="rz" .value=${(_m = this.rotate) === null || _m === void 0 ? void 0 : _m.z}></ox-input-angle>
|
|
99
124
|
`;
|
|
100
125
|
}
|
|
126
|
+
appendFormData({ formData }) {
|
|
127
|
+
this.name && formData.append(this.name, JSON.stringify(this.value));
|
|
128
|
+
}
|
|
101
129
|
};
|
|
102
130
|
OxInput3Dish.styles = [
|
|
103
131
|
css `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-3dish.js","sourceRoot":"","sources":["../../src/ox-input-3dish.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"ox-input-3dish.js","sourceRoot":"","sources":["../../src/ox-input-3dish.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-formfield'\nimport { OxInputAngle } from './ox-input-angle'\n\n@customElement('ox-input-3dish')\nexport class OxInput3Dish extends OxFormField {\n static styles = [\n css`\n :host {\n display: grid;\n grid-template-columns: repeat(4, minmax(50px, 1fr));\n grid-gap: 5px;\n grid-auto-rows: minmax(24px, auto);\n }\n\n :host > * {\n grid-column: span 1;\n }\n\n label {\n text-align: right;\n }\n\n span {\n text-align: center;\n }\n `\n ]\n\n @property({ type: Object }) dimension?: { width?: number; height?: number; depth?: number }\n // translate는 고유한 html element의 attribute이므로, property는 translatex로 한다.\n @property({ type: Object }) translatex?: { x?: number; y?: number; z?: number }\n @property({ type: Object }) rotate?: { x?: number; y?: number; z?: number }\n @property({ type: Object }) scale?: { x?: number; y?: number; z?: number }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onChange.bind(this))\n }\n\n _onChange(e: Event) {\n e.stopPropagation()\n e.preventDefault()\n\n var element = e.target as HTMLElement\n var id = element.id\n var prop = id.substr(1)\n var value = Number((element as HTMLInputElement).value)\n\n switch (element.tagName) {\n case 'PROPERTY-ANGLE':\n value = Number((element as OxInputAngle).value || 0)\n break\n }\n\n switch (id) {\n case 'tx':\n case 'ty':\n case 'tz':\n this.translatex = {\n ...this.translatex,\n [prop]: value\n }\n\n this.dispatchEvent(\n new CustomEvent('translate-changed', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.translatex\n }\n })\n )\n break\n\n case 'rx':\n case 'ry':\n case 'rz':\n this.rotate = {\n ...this.rotate,\n [prop]: value\n }\n\n this.dispatchEvent(\n new CustomEvent('rotate-changed', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.rotate\n }\n })\n )\n break\n\n case 'sx':\n case 'sy':\n case 'sz':\n this.scale = {\n ...this.scale,\n [prop]: value\n }\n\n this.dispatchEvent(\n new CustomEvent('scale-changed', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.scale\n }\n })\n )\n break\n\n default:\n // dimension\n this.dimension = {\n ...this.dimension,\n [prop]: value\n }\n\n this.dispatchEvent(\n new CustomEvent('dimension-changed', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.dimension\n }\n })\n )\n }\n\n this.value = {\n translate: this.translatex,\n rotate: this.rotate,\n scale: this.scale,\n dimension: this.dimension\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.value\n }\n })\n )\n }\n\n render() {\n return html`\n <span></span> <span><i18n-msg msgid=\"label.x-axes\">x-axes</i18n-msg></span>\n <span><i18n-msg msgid=\"label.y-axes\">y-axes</i18n-msg></span>\n <span><i18n-msg msgid=\"label.z-axes\">z-axes</i18n-msg></span>\n\n <label><i18n-msg msgid=\"label.dimension\">dimension</i18n-msg></label>\n <input type=\"number\" id=\"dwidth\" .value=${this.dimension?.width} />\n <input type=\"number\" id=\"dheight\" .value=${this.dimension?.height} />\n <input type=\"number\" id=\"ddepth\" .value=${this.dimension?.depth} />\n\n <label><i18n-msg msgid=\"label.translate\">translate</i18n-msg></label>\n <input type=\"number\" id=\"tx\" .value=${this.translatex?.x} />\n <input type=\"number\" id=\"ty\" .value=${this.translatex?.y} />\n <input type=\"number\" id=\"tz\" .value=${this.translatex?.z} />\n\n <label><i18n-msg msgid=\"label.scale\">scale</i18n-msg></label>\n <input type=\"number\" id=\"sx\" .value=${this.scale?.x} />\n <input type=\"number\" id=\"sy\" .value=${this.scale?.y} />\n <input type=\"number\" id=\"sz\" .value=${this.scale?.z} />\n\n <label><i18n-msg msgid=\"label.rotate\">rotate</i18n-msg></label>\n <ox-input-angle id=\"rx\" .value=${this.rotate?.x}></ox-input-angle>\n <ox-input-angle id=\"ry\" .value=${this.rotate?.y}></ox-input-angle>\n <ox-input-angle id=\"rz\" .value=${this.rotate?.z}></ox-input-angle>\n `\n }\n\n protected appendFormData({ formData }: FormDataEvent): void {\n this.name && formData.append(this.name, JSON.stringify(this.value))\n }\n}\n"]}
|
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
3
|
*/
|
|
4
|
-
import {
|
|
5
|
-
export declare class OxInputAngle extends
|
|
4
|
+
import { OxFormField } from './ox-formfield';
|
|
5
|
+
export declare class OxInputAngle extends OxFormField {
|
|
6
6
|
static styles: import("lit").CSSResult[];
|
|
7
|
-
|
|
7
|
+
placeholder?: string;
|
|
8
8
|
input: HTMLInputElement;
|
|
9
9
|
render(): import("lit-html").TemplateResult<1>;
|
|
10
|
-
get placeholder(): string;
|
|
11
10
|
_onChangeValue(e: Event): void;
|
|
12
|
-
_toDegree(
|
|
11
|
+
_toDegree(value: string | number | undefined): number;
|
|
13
12
|
_toRadian(degree: string | number | undefined): number | undefined;
|
|
14
13
|
}
|
|
@@ -2,28 +2,26 @@
|
|
|
2
2
|
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
3
|
*/
|
|
4
4
|
import { __decorate } from "tslib";
|
|
5
|
-
import { css, html
|
|
5
|
+
import { css, html } from 'lit';
|
|
6
6
|
import { customElement, property, query } from 'lit/decorators.js';
|
|
7
|
-
|
|
7
|
+
import { OxFormField } from './ox-formfield';
|
|
8
|
+
let OxInputAngle = class OxInputAngle extends OxFormField {
|
|
8
9
|
render() {
|
|
9
10
|
return html `
|
|
10
11
|
<input
|
|
11
12
|
type="number"
|
|
12
|
-
.value=${this._toDegree(this.
|
|
13
|
+
.value=${this._toDegree(this.value)}
|
|
14
|
+
.placeholder=${this.placeholder || '0°'}
|
|
13
15
|
@change=${(e) => this._onChangeValue(e)}
|
|
14
|
-
.placeholder=${this.placeholder}
|
|
15
16
|
/>
|
|
16
17
|
`;
|
|
17
18
|
}
|
|
18
|
-
get placeholder() {
|
|
19
|
-
return this.getAttribute('placeholder') || '0°';
|
|
20
|
-
}
|
|
21
19
|
_onChangeValue(e) {
|
|
22
|
-
this.
|
|
20
|
+
this.value = this._toRadian(this.input.value);
|
|
23
21
|
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
|
|
24
22
|
}
|
|
25
|
-
_toDegree(
|
|
26
|
-
return Math.round(((Number(
|
|
23
|
+
_toDegree(value) {
|
|
24
|
+
return Math.round(((Number(value) || 0) * 180) / Math.PI);
|
|
27
25
|
}
|
|
28
26
|
_toRadian(degree) {
|
|
29
27
|
return isNaN(Number(degree)) ? undefined : Number(degree) * (Math.PI / 180);
|
|
@@ -44,8 +42,8 @@ OxInputAngle.styles = [
|
|
|
44
42
|
`
|
|
45
43
|
];
|
|
46
44
|
__decorate([
|
|
47
|
-
property({ type:
|
|
48
|
-
], OxInputAngle.prototype, "
|
|
45
|
+
property({ type: String })
|
|
46
|
+
], OxInputAngle.prototype, "placeholder", void 0);
|
|
49
47
|
__decorate([
|
|
50
48
|
query('input')
|
|
51
49
|
], OxInputAngle.prototype, "input", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-angle.js","sourceRoot":"","sources":["../../src/ox-input-angle.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"ox-input-angle.js","sourceRoot":"","sources":["../../src/ox-input-angle.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,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,gBAAgB,CAAA;AAG5C,IAAa,YAAY,GAAzB,MAAa,YAAa,SAAQ,WAAW;IAoB3C,MAAM;QACJ,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;uBACpB,IAAI,CAAC,WAAW,IAAI,IAAI;kBAC7B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;;KAEjD,CAAA;IACH,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QAE7C,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;IAED,SAAS,CAAC,KAAkC;QAC1C,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,CAAA;IAC3D,CAAC;IAED,SAAS,CAAC,MAAmC;QAC3C,OAAO,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,GAAG,CAAC,CAAA;IAC7E,CAAC;CACF,CAAA;AA3CQ,mBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;KAWF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAqB;AAEhC;IAAf,KAAK,CAAC,OAAO,CAAC;2CAAyB;AAlB7B,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CA4CxB;SA5CY,YAAY","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-formfield'\n\n@customElement('ox-input-angle')\nexport class OxInputAngle extends OxFormField {\n static styles = [\n css`\n :host {\n display: inline-block;\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\n @property({ type: String }) placeholder?: string\n\n @query('input') input!: HTMLInputElement\n\n render() {\n return html`\n <input\n type=\"number\"\n .value=${this._toDegree(this.value)}\n .placeholder=${this.placeholder || '0°'}\n @change=${(e: Event) => this._onChangeValue(e)}\n />\n `\n }\n\n _onChangeValue(e: Event) {\n this.value = this._toRadian(this.input.value)\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n _toDegree(value: string | number | undefined) {\n return Math.round(((Number(value) || 0) * 180) / Math.PI)\n }\n\n _toRadian(degree: string | number | undefined) {\n return isNaN(Number(degree)) ? undefined : Number(degree) * (Math.PI / 180)\n }\n}\n"]}
|
|
@@ -1,21 +1,23 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
3
|
*/
|
|
4
|
-
import {
|
|
5
|
-
export default class
|
|
4
|
+
import { OxFormField } from './ox-formfield';
|
|
5
|
+
export default class OxInputStack extends OxFormField {
|
|
6
6
|
static styles: import("lit").CSSResult[];
|
|
7
7
|
/**
|
|
8
8
|
* `stack`은 stack에 의해 만들어진 층의 배열을 유지한다.
|
|
9
9
|
*/
|
|
10
10
|
stack: {
|
|
11
11
|
name: string;
|
|
12
|
+
active?: boolean;
|
|
12
13
|
}[];
|
|
13
14
|
/**
|
|
14
15
|
* `activeIndex`은 현재 active된 층의 인덱스를 유지한다.
|
|
15
16
|
*/
|
|
16
|
-
activeIndex: number;
|
|
17
17
|
render(): import("lit-html").TemplateResult<1>;
|
|
18
|
+
_notifyChange(): void;
|
|
18
19
|
_onClickAddFloor(e: Event): void;
|
|
19
20
|
_onClickToActive(e: Event): void;
|
|
20
21
|
_onClickRemoveFloor(e: Event): void;
|
|
22
|
+
protected appendFormData({ formData }: FormDataEvent): void;
|
|
21
23
|
}
|