@operato/input 8.0.0-alpha.20 → 8.0.0-alpha.26
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 +18 -0
- package/dist/src/ox-input-signature.d.ts +4 -2
- package/dist/src/ox-input-signature.js +30 -7
- package/dist/src/ox-input-signature.js.map +1 -1
- package/dist/src/ox-select-floor.d.ts +2 -1
- package/dist/src/ox-select-floor.js +13 -7
- package/dist/src/ox-select-floor.js.map +1 -1
- package/dist/stories/ox-select-floor.stories.js +64 -40
- package/dist/stories/ox-select-floor.stories.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/ox-input-signature.ts +41 -10
- package/src/ox-select-floor.ts +14 -7
- package/stories/ox-select-floor.stories.ts +64 -40
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,24 @@
|
|
|
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
|
+
## [8.0.0-alpha.26](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.25...v8.0.0-alpha.26) (2024-10-06)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* ox-input-signature ([dfd4e67](https://github.com/hatiolab/operato/commit/dfd4e67c213b33c78f6ef380fcc5e8642356e76c))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## [8.0.0-alpha.21](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.20...v8.0.0-alpha.21) (2024-10-05)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### :bug: Bug Fix
|
|
19
|
+
|
|
20
|
+
* support touch gesture for ox-select-floor ([217b1b6](https://github.com/hatiolab/operato/commit/217b1b6bf6415a893a9bb08524b546ec7a8fdca4))
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
6
24
|
## [8.0.0-alpha.20](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.19...v8.0.0-alpha.20) (2024-10-04)
|
|
7
25
|
|
|
8
26
|
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import '@material/web/icon/icon.js';
|
|
2
|
+
import { PropertyValues } from 'lit';
|
|
2
3
|
import { OxFormField } from './ox-form-field.js';
|
|
3
4
|
export declare class OxInputSignature extends OxFormField {
|
|
4
5
|
static styles: import("lit").CSSResult[];
|
|
@@ -10,14 +11,15 @@ export declare class OxInputSignature extends OxFormField {
|
|
|
10
11
|
private isDrawing;
|
|
11
12
|
render(): import("lit-html").TemplateResult<1>;
|
|
12
13
|
firstUpdated(): void;
|
|
14
|
+
updated(changes: PropertyValues<this>): void;
|
|
13
15
|
openDialog(): void;
|
|
14
16
|
closeDialog(): void;
|
|
15
17
|
startDrawing(event: MouseEvent | TouchEvent): void;
|
|
16
|
-
stopDrawing(): void;
|
|
18
|
+
stopDrawing(event: MouseEvent | TouchEvent): void;
|
|
17
19
|
draw(event: MouseEvent | TouchEvent): void;
|
|
18
20
|
clearCanvas(): void;
|
|
19
21
|
saveSignature(): void;
|
|
20
|
-
loadSignature(dataUrl: string): void;
|
|
22
|
+
loadSignature(dataUrl: string | null): void;
|
|
21
23
|
getEventPosition(event: MouseEvent | TouchEvent): {
|
|
22
24
|
x: number;
|
|
23
25
|
y: number;
|
|
@@ -33,8 +33,6 @@ let OxInputSignature = class OxInputSignature extends OxFormField {
|
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
dialog canvas {
|
|
36
|
-
width: 100%;
|
|
37
|
-
height: 100%;
|
|
38
36
|
border: 1px solid var(--md-sys-color-outline);
|
|
39
37
|
}
|
|
40
38
|
|
|
@@ -48,6 +46,19 @@ let OxInputSignature = class OxInputSignature extends OxFormField {
|
|
|
48
46
|
.filler {
|
|
49
47
|
flex: 1;
|
|
50
48
|
}
|
|
49
|
+
|
|
50
|
+
/* 버튼 스타일 */
|
|
51
|
+
button {
|
|
52
|
+
background-color: var(--md-sys-color-primary);
|
|
53
|
+
color: var(--md-sys-color-on-primary);
|
|
54
|
+
padding: 10px 20px;
|
|
55
|
+
border: none;
|
|
56
|
+
border-radius: var(--spacing-small);
|
|
57
|
+
font-family: 'Roboto', sans-serif;
|
|
58
|
+
font-size: 14px;
|
|
59
|
+
cursor: pointer;
|
|
60
|
+
transition: background-color 0.3s ease;
|
|
61
|
+
}
|
|
51
62
|
`
|
|
52
63
|
]; }
|
|
53
64
|
render() {
|
|
@@ -84,11 +95,16 @@ let OxInputSignature = class OxInputSignature extends OxFormField {
|
|
|
84
95
|
this.loadSignature(this.value);
|
|
85
96
|
}
|
|
86
97
|
}
|
|
98
|
+
updated(changes) {
|
|
99
|
+
if (changes.has('value')) {
|
|
100
|
+
this.loadSignature(this.value);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
87
103
|
openDialog() {
|
|
88
|
-
if (this.disabled)
|
|
104
|
+
if (this.disabled) {
|
|
89
105
|
return;
|
|
106
|
+
}
|
|
90
107
|
this.dialog.showModal();
|
|
91
|
-
// 다이아로그가 열릴 때 현재 value를 캔버스에 그리기
|
|
92
108
|
if (this.value) {
|
|
93
109
|
const img = new Image();
|
|
94
110
|
img.onload = () => {
|
|
@@ -104,17 +120,24 @@ let OxInputSignature = class OxInputSignature extends OxFormField {
|
|
|
104
120
|
if (this.disabled) {
|
|
105
121
|
return;
|
|
106
122
|
}
|
|
123
|
+
event.preventDefault();
|
|
124
|
+
event.stopPropagation();
|
|
107
125
|
this.isDrawing = true;
|
|
108
126
|
this.ctx.beginPath();
|
|
109
127
|
const position = this.getEventPosition(event);
|
|
110
128
|
this.ctx.moveTo(position.x, position.y);
|
|
111
129
|
}
|
|
112
|
-
stopDrawing() {
|
|
130
|
+
stopDrawing(event) {
|
|
131
|
+
event.preventDefault();
|
|
132
|
+
event.stopPropagation();
|
|
113
133
|
this.isDrawing = false;
|
|
114
134
|
}
|
|
115
135
|
draw(event) {
|
|
116
|
-
if (!this.isDrawing)
|
|
136
|
+
if (!this.isDrawing) {
|
|
117
137
|
return;
|
|
138
|
+
}
|
|
139
|
+
event.preventDefault();
|
|
140
|
+
event.stopPropagation();
|
|
118
141
|
const position = this.getEventPosition(event);
|
|
119
142
|
this.ctx.lineTo(position.x, position.y);
|
|
120
143
|
this.ctx.stroke();
|
|
@@ -129,7 +152,7 @@ let OxInputSignature = class OxInputSignature extends OxFormField {
|
|
|
129
152
|
this.closeDialog();
|
|
130
153
|
}
|
|
131
154
|
loadSignature(dataUrl) {
|
|
132
|
-
this.previewDiv.style.backgroundImage = `url(${dataUrl})
|
|
155
|
+
this.previewDiv.style.backgroundImage = dataUrl ? `url(${dataUrl})` : 'none';
|
|
133
156
|
}
|
|
134
157
|
getEventPosition(event) {
|
|
135
158
|
const rect = this.canvas.getBoundingClientRect();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-signature.js","sourceRoot":"","sources":["../../src/ox-input-signature.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,
|
|
1
|
+
{"version":3,"file":"ox-input-signature.js","sourceRoot":"","sources":["../../src/ox-input-signature.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-signature')\nexport class OxInputSignature extends OxFormField {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n min-height: var(--signature-min-height, 80px);\n min-width: var(--signature-min-width, 120px);\n\n background-color: var(--signature-background-color, white);\n\n overflow: hidden;\n }\n\n .signature-preview {\n flex: 1;\n align-self: stretch;\n\n border: 1px solid var(--md-sys-color-outline);\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n }\n\n dialog canvas {\n border: 1px solid var(--md-sys-color-outline);\n }\n\n .controls {\n margin-top: 10px;\n display: flex;\n flex-direction: row;\n gap: var(--spacing-medium);\n }\n\n .filler {\n flex: 1;\n }\n\n /* 버튼 스타일 */\n button {\n background-color: var(--md-sys-color-primary);\n color: var(--md-sys-color-on-primary);\n padding: 10px 20px;\n border: none;\n border-radius: var(--spacing-small);\n font-family: 'Roboto', sans-serif;\n font-size: 14px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n }\n `\n ]\n\n @property({ type: String }) value: string | null = null\n\n @query('.signature-preview')\n private previewDiv!: HTMLDivElement\n @query('dialog')\n private dialog!: HTMLDialogElement\n @query('canvas')\n private canvas!: HTMLCanvasElement\n\n private ctx!: CanvasRenderingContext2D\n private isDrawing = false\n\n render() {\n return html`\n <div class=\"signature-preview\" @click=${this.openDialog}></div>\n\n <dialog>\n <canvas\n width=\"800\"\n height=\"400\"\n @mousedown=${this.startDrawing}\n @mouseup=${this.stopDrawing}\n @mousemove=${this.draw}\n @mouseleave=${this.stopDrawing}\n @touchstart=${this.startDrawing}\n @touchend=${this.stopDrawing}\n @touchmove=${this.draw}\n ></canvas>\n <div class=\"controls\">\n <button @click=\"${this.clearCanvas}\">Clear</button>\n <div class=\"filler\"></div>\n <button @click=\"${this.saveSignature}\">Save</button>\n <button @click=\"${this.closeDialog}\">Close</button>\n </div>\n </dialog>\n `\n }\n\n firstUpdated() {\n this.ctx = this.canvas.getContext('2d')!\n this.ctx.strokeStyle = '#000'\n this.ctx.lineWidth = 2\n\n // 처음 로딩 시 서명 데이터를 미리보기 div에 표시\n if (this.value) {\n this.loadSignature(this.value)\n }\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('value')) {\n this.loadSignature(this.value)\n }\n }\n\n openDialog() {\n if (this.disabled) {\n return\n }\n\n this.dialog.showModal()\n\n if (this.value) {\n const img = new Image()\n img.onload = () => {\n this.ctx.drawImage(img, 0, 0, this.canvas.width, this.canvas.height)\n }\n img.src = this.value\n }\n }\n\n closeDialog() {\n this.dialog.close()\n }\n\n startDrawing(event: MouseEvent | TouchEvent) {\n if (this.disabled) {\n return\n }\n\n event.preventDefault()\n event.stopPropagation()\n\n this.isDrawing = true\n this.ctx.beginPath()\n const position = this.getEventPosition(event)\n this.ctx.moveTo(position.x, position.y)\n }\n\n stopDrawing(event: MouseEvent | TouchEvent) {\n event.preventDefault()\n event.stopPropagation()\n\n this.isDrawing = false\n }\n\n draw(event: MouseEvent | TouchEvent) {\n if (!this.isDrawing) {\n return\n }\n\n event.preventDefault()\n event.stopPropagation()\n\n const position = this.getEventPosition(event)\n this.ctx.lineTo(position.x, position.y)\n this.ctx.stroke()\n }\n\n clearCanvas() {\n this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)\n }\n\n saveSignature() {\n this.value = this.canvas.toDataURL()\n this._notifyChange()\n this.previewDiv.style.backgroundImage = `url(${this.value})`\n this.closeDialog()\n }\n\n loadSignature(dataUrl: string | null) {\n this.previewDiv.style.backgroundImage = dataUrl ? `url(${dataUrl})` : 'none'\n }\n\n getEventPosition(event: MouseEvent | TouchEvent) {\n const rect = this.canvas.getBoundingClientRect()\n\n // 캔버스의 실제 크기와 CSS 크기 간의 비율을 계산\n const scaleX = this.canvas.width / rect.width\n const scaleY = this.canvas.height / rect.height\n\n // 실제 좌표 계산\n const isTouchEvent = event instanceof TouchEvent\n const x = (isTouchEvent ? event.touches[0].clientX - rect.left : (event as MouseEvent).clientX - rect.left) * scaleX\n const y = (isTouchEvent ? event.touches[0].clientY - rect.top : (event as MouseEvent).clientY - rect.top) * scaleY\n\n return { x, y }\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"]}
|
|
@@ -15,6 +15,7 @@ export declare class OxSelectFloor extends OxFormField {
|
|
|
15
15
|
private isDragging;
|
|
16
16
|
private lastTouchY;
|
|
17
17
|
private lastMouseY;
|
|
18
|
+
private startY;
|
|
18
19
|
render(): import("lit-html").TemplateResult<1>;
|
|
19
20
|
updated(changes: PropertyValues<this>): void;
|
|
20
21
|
firstUpdated(): void;
|
|
@@ -32,7 +33,7 @@ export declare class OxSelectFloor extends OxFormField {
|
|
|
32
33
|
private updateSelectedIndex;
|
|
33
34
|
private scrollToSelectedCard;
|
|
34
35
|
private selectCard;
|
|
35
|
-
private
|
|
36
|
+
private notifySelection;
|
|
36
37
|
private adjustCardHeight;
|
|
37
38
|
}
|
|
38
39
|
export {};
|
|
@@ -12,6 +12,7 @@ let OxSelectFloor = class OxSelectFloor extends OxFormField {
|
|
|
12
12
|
this.isDragging = false;
|
|
13
13
|
this.lastTouchY = 0;
|
|
14
14
|
this.lastMouseY = 0;
|
|
15
|
+
this.startY = 0;
|
|
15
16
|
}
|
|
16
17
|
static { this.styles = [
|
|
17
18
|
css `
|
|
@@ -61,14 +62,15 @@ let OxSelectFloor = class OxSelectFloor extends OxFormField {
|
|
|
61
62
|
}
|
|
62
63
|
|
|
63
64
|
.selected {
|
|
64
|
-
z-index: 10;
|
|
65
65
|
opacity: 0.8;
|
|
66
|
+
z-index: 1;
|
|
66
67
|
border: 4px solid #3b82f6;
|
|
67
68
|
box-shadow: 0 8px 16px rgba(59, 130, 246, 0.4);
|
|
68
69
|
}
|
|
69
70
|
|
|
70
71
|
.selected.active {
|
|
71
72
|
opacity: 1;
|
|
73
|
+
z-index: 2;
|
|
72
74
|
transform: perspective(var(--ox-select-floor-perspective)) rotateX(var(--ox-select-floor-rotate-x-active));
|
|
73
75
|
box-shadow: 0 12px 24px rgba(59, 130, 246, 0.4);
|
|
74
76
|
}
|
|
@@ -76,7 +78,7 @@ let OxSelectFloor = class OxSelectFloor extends OxFormField {
|
|
|
76
78
|
[template-container] {
|
|
77
79
|
position: absolute;
|
|
78
80
|
right: 10px;
|
|
79
|
-
z-index:
|
|
81
|
+
z-index: 1;
|
|
80
82
|
}
|
|
81
83
|
`
|
|
82
84
|
]; }
|
|
@@ -147,13 +149,17 @@ let OxSelectFloor = class OxSelectFloor extends OxFormField {
|
|
|
147
149
|
}
|
|
148
150
|
handleTouchStart(event) {
|
|
149
151
|
this.lastTouchY = event.touches[0].clientY;
|
|
152
|
+
this.startY = this.lastTouchY;
|
|
150
153
|
}
|
|
151
154
|
handleTouchMove(event) {
|
|
152
155
|
const touch = event.touches[0];
|
|
153
|
-
const deltaY = touch.clientY - this.
|
|
154
|
-
this.
|
|
156
|
+
const deltaY = touch.clientY - this.lastMouseY;
|
|
157
|
+
if (!this.lastMouseY) {
|
|
158
|
+
this.lastMouseY = touch.clientY;
|
|
159
|
+
}
|
|
155
160
|
if (Math.abs(deltaY) > 30) {
|
|
156
|
-
|
|
161
|
+
this.lastMouseY = touch.clientY;
|
|
162
|
+
const direction = deltaY > 0 ? -1 : 1;
|
|
157
163
|
this.updateSelectedIndex(this.selectedIndex + direction);
|
|
158
164
|
}
|
|
159
165
|
}
|
|
@@ -204,10 +210,10 @@ let OxSelectFloor = class OxSelectFloor extends OxFormField {
|
|
|
204
210
|
}
|
|
205
211
|
selectCard(index) {
|
|
206
212
|
this.selectedIndex = index;
|
|
207
|
-
this.
|
|
213
|
+
this.notifySelection();
|
|
208
214
|
this.scrollToSelectedCard();
|
|
209
215
|
}
|
|
210
|
-
|
|
216
|
+
notifySelection() {
|
|
211
217
|
this.value = this.selectedIndex !== -1 ? this.cards[this.selectedIndex]?.name : undefined;
|
|
212
218
|
this.dispatchEvent(new CustomEvent('change', {
|
|
213
219
|
detail: this.value
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-select-floor.js","sourceRoot":"","sources":["../../src/ox-select-floor.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { OxFormField } from './ox-form-field'\n\ntype Card = {\n name: string\n image: string\n}\n\n@customElement('ox-select-floor')\nexport class OxSelectFloor extends OxFormField {\n static styles = [\n css`\n :host {\n display: block;\n position: relative;\n overflow: hidden;\n height: 100%;\n\n --ox-select-floor-rotate-x: 60deg;\n --ox-select-floor-rotate-x-active: 40deg;\n --ox-select-floor-perspective: 1200px;\n }\n\n .carousel-container {\n position: relative;\n height: 100%;\n width: 100%;\n overflow: hidden;\n user-select: none;\n }\n\n .card {\n position: absolute;\n bottom: 0;\n width: 100%;\n background-color: white;\n transition:\n transform 0.3s ease,\n opacity 0.3s ease,\n box-shadow 0.3s ease,\n border 0.3s ease;\n transform-origin: bottom;\n transform: perspective(var(--ox-select-floor-perspective)) rotateX(var(--ox-select-floor-rotate-x));\n opacity: 0.5;\n border: 2px solid transparent;\n border-radius: 12px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n }\n\n .card img {\n width: 100%;\n height: auto;\n display: block;\n pointer-events: none;\n border-radius: 12px;\n }\n\n .selected {\n z-index: 10;\n opacity: 0.8;\n border: 4px solid #3b82f6;\n box-shadow: 0 8px 16px rgba(59, 130, 246, 0.4);\n }\n\n .selected.active {\n opacity: 1;\n transform: perspective(var(--ox-select-floor-perspective)) rotateX(var(--ox-select-floor-rotate-x-active));\n box-shadow: 0 12px 24px rgba(59, 130, 246, 0.4);\n }\n\n [template-container] {\n position: absolute;\n right: 10px;\n z-index: 20;\n }\n `\n ]\n\n @property({ type: Array }) cards: Card[] = []\n @property({ type: String }) value?: string\n @property({ type: Number }) bottomLimit = 70\n\n @state() private selectedIndex = -1\n @state() private activeIndex: number | null = null\n @query('.carousel-container') private carouselContainer!: HTMLDivElement\n\n private isDragging = false\n private lastTouchY = 0\n private lastMouseY = 0\n\n render() {\n const length = this.cards.length\n const cards = this.cards\n\n return html`\n <div\n class=\"carousel-container\"\n @wheel=${this.handleWheel}\n @mousedown=${this.handleMouseDown}\n @mousemove=${this.handleMouseMove}\n @mouseup=${this.handleMouseUp}\n @mouseleave=${this.handleMouseLeave}\n @touchstart=${this.handleTouchStart}\n @touchmove=${this.handleTouchMove}\n @touchend=${this.handleTouchEnd}\n >\n ${cards.map(({ image, name }, index) => {\n return html`\n <div\n class=\"card ${this.getClassForCard(index)} ${this.isActive(index) ? 'active' : ''}\"\n style=\"bottom: ${(this.bottomLimit * index) / length}%;\"\n @click=${() => this.selectCard(index)}\n @tap=${() => this.toggleActiveCard(index)}\n >\n <img src=\"${image}\" @load=${(e: Event) => this.adjustCardHeight(e, index)} />\n </div>\n `\n })}\n ${cards.map(({ image, name }, index) => {\n return html`\n <div\n style=\"bottom: ${(this.bottomLimit * index) / length}%;\"\n @click=${() => this.selectCard(index)}\n template-container\n >\n <slot name=\"template-${index}\"></slot>\n </div>\n `\n })}\n </div>\n `\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('value')) {\n if (this.value) {\n this.selectedIndex = this.cards.findIndex(card => card.name == this.value)\n } else {\n this.selectedIndex = -1\n }\n }\n }\n\n firstUpdated() {\n this.scrollToSelectedCard()\n }\n\n getClassForCard(index: number) {\n return index === this.selectedIndex ? 'selected' : 'compressed'\n }\n\n isActive(index: number): boolean {\n return this.activeIndex === index\n }\n\n handleWheel(event: WheelEvent) {\n event.preventDefault()\n const delta = Math.sign(event.deltaY)\n this.updateSelectedIndex(this.selectedIndex + delta)\n }\n\n handleTouchStart(event: TouchEvent) {\n this.lastTouchY = event.touches[0].clientY\n }\n\n handleTouchMove(event: TouchEvent) {\n const touch = event.touches[0]\n const deltaY = touch.clientY - this.lastTouchY\n this.lastTouchY = touch.clientY\n\n if (Math.abs(deltaY) > 30) {\n const direction = deltaY < 0 ? -1 : 1\n this.updateSelectedIndex(this.selectedIndex + direction)\n }\n }\n\n handleTouchEnd() {\n this.isDragging = false\n }\n\n handleMouseDown(event: MouseEvent) {\n this.isDragging = true\n this.lastMouseY = event.clientY\n }\n\n handleMouseMove(event: MouseEvent) {\n if (!this.isDragging) {\n return\n }\n\n const deltaY = event.clientY - this.lastMouseY\n\n if (!this.lastMouseY) {\n this.lastMouseY = event.clientY\n }\n\n if (Math.abs(deltaY) > 30) {\n this.lastMouseY = event.clientY\n const direction = deltaY > 0 ? -1 : 1\n this.updateSelectedIndex(this.selectedIndex + direction)\n }\n }\n\n handleMouseUp() {\n this.isDragging = false\n }\n\n handleMouseLeave() {\n this.isDragging = false\n }\n\n private toggleActiveCard(index: number) {\n if (this.activeIndex === index) {\n this.activeIndex = null\n } else {\n this.activeIndex = index\n }\n }\n\n private updateSelectedIndex(newIndex: number) {\n this.activeIndex = null\n\n this.selectedIndex = Math.max(-1, Math.min(newIndex, this.cards.length - 1))\n this.scrollToSelectedCard()\n }\n\n private scrollToSelectedCard() {\n const cardHeight = 320\n const targetScrollTop = this.selectedIndex * cardHeight - (window.innerHeight / 2 - cardHeight / 2)\n\n this.carouselContainer.scrollTo({ top: targetScrollTop, behavior: 'smooth' })\n }\n\n private selectCard(index: number) {\n this.selectedIndex = index\n this._notifySelection()\n this.scrollToSelectedCard()\n }\n\n private _notifySelection() {\n this.value = this.selectedIndex !== -1 ? this.cards[this.selectedIndex]?.name : undefined\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: this.value\n })\n )\n }\n\n private adjustCardHeight(e: Event, index: number) {\n const imgElement = e.target as HTMLImageElement\n const aspectRatio = imgElement.naturalWidth / imgElement.naturalHeight\n const newHeight = imgElement.offsetWidth / aspectRatio\n imgElement.style.height = `${newHeight}px`\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ox-select-floor.js","sourceRoot":"","sources":["../../src/ox-select-floor.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { OxFormField } from './ox-form-field'\n\ntype Card = {\n name: string\n image: string\n}\n\n@customElement('ox-select-floor')\nexport class OxSelectFloor extends OxFormField {\n static styles = [\n css`\n :host {\n display: block;\n position: relative;\n overflow: hidden;\n height: 100%;\n\n --ox-select-floor-rotate-x: 60deg;\n --ox-select-floor-rotate-x-active: 40deg;\n --ox-select-floor-perspective: 1200px;\n }\n\n .carousel-container {\n position: relative;\n height: 100%;\n width: 100%;\n overflow: hidden;\n user-select: none;\n }\n\n .card {\n position: absolute;\n bottom: 0;\n width: 100%;\n background-color: white;\n transition:\n transform 0.3s ease,\n opacity 0.3s ease,\n box-shadow 0.3s ease,\n border 0.3s ease;\n transform-origin: bottom;\n transform: perspective(var(--ox-select-floor-perspective)) rotateX(var(--ox-select-floor-rotate-x));\n opacity: 0.5;\n border: 2px solid transparent;\n border-radius: 12px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n }\n\n .card img {\n width: 100%;\n height: auto;\n display: block;\n pointer-events: none;\n border-radius: 12px;\n }\n\n .selected {\n opacity: 0.8;\n z-index: 1;\n border: 4px solid #3b82f6;\n box-shadow: 0 8px 16px rgba(59, 130, 246, 0.4);\n }\n\n .selected.active {\n opacity: 1;\n z-index: 2;\n transform: perspective(var(--ox-select-floor-perspective)) rotateX(var(--ox-select-floor-rotate-x-active));\n box-shadow: 0 12px 24px rgba(59, 130, 246, 0.4);\n }\n\n [template-container] {\n position: absolute;\n right: 10px;\n z-index: 1;\n }\n `\n ]\n\n @property({ type: Array }) cards: Card[] = []\n @property({ type: String }) value?: string\n @property({ type: Number }) bottomLimit = 70\n\n @state() private selectedIndex = -1\n @state() private activeIndex: number | null = null\n @query('.carousel-container') private carouselContainer!: HTMLDivElement\n\n private isDragging = false\n private lastTouchY = 0\n private lastMouseY = 0\n private startY = 0\n\n render() {\n const length = this.cards.length\n const cards = this.cards\n\n return html`\n <div\n class=\"carousel-container\"\n @wheel=${this.handleWheel}\n @mousedown=${this.handleMouseDown}\n @mousemove=${this.handleMouseMove}\n @mouseup=${this.handleMouseUp}\n @mouseleave=${this.handleMouseLeave}\n @touchstart=${this.handleTouchStart}\n @touchmove=${this.handleTouchMove}\n @touchend=${this.handleTouchEnd}\n >\n ${cards.map(({ image, name }, index) => {\n return html`\n <div\n class=\"card ${this.getClassForCard(index)} ${this.isActive(index) ? 'active' : ''}\"\n style=\"bottom: ${(this.bottomLimit * index) / length}%;\"\n @click=${() => this.selectCard(index)}\n @tap=${() => this.toggleActiveCard(index)}\n >\n <img src=\"${image}\" @load=${(e: Event) => this.adjustCardHeight(e, index)} />\n </div>\n `\n })}\n ${cards.map(({ image, name }, index) => {\n return html`\n <div\n style=\"bottom: ${(this.bottomLimit * index) / length}%;\"\n @click=${() => this.selectCard(index)}\n template-container\n >\n <slot name=\"template-${index}\"></slot>\n </div>\n `\n })}\n </div>\n `\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('value')) {\n if (this.value) {\n this.selectedIndex = this.cards.findIndex(card => card.name == this.value)\n } else {\n this.selectedIndex = -1\n }\n }\n }\n\n firstUpdated() {\n this.scrollToSelectedCard()\n }\n\n getClassForCard(index: number) {\n return index === this.selectedIndex ? 'selected' : 'compressed'\n }\n\n isActive(index: number): boolean {\n return this.activeIndex === index\n }\n\n handleWheel(event: WheelEvent) {\n event.preventDefault()\n const delta = Math.sign(event.deltaY)\n this.updateSelectedIndex(this.selectedIndex + delta)\n }\n\n handleTouchStart(event: TouchEvent) {\n this.lastTouchY = event.touches[0].clientY\n this.startY = this.lastTouchY\n }\n\n handleTouchMove(event: TouchEvent) {\n const touch = event.touches[0]\n const deltaY = touch.clientY - this.lastMouseY\n\n if (!this.lastMouseY) {\n this.lastMouseY = touch.clientY\n }\n\n if (Math.abs(deltaY) > 30) {\n this.lastMouseY = touch.clientY\n const direction = deltaY > 0 ? -1 : 1\n this.updateSelectedIndex(this.selectedIndex + direction)\n }\n }\n\n handleTouchEnd() {\n this.isDragging = false\n }\n\n handleMouseDown(event: MouseEvent) {\n this.isDragging = true\n this.lastMouseY = event.clientY\n }\n\n handleMouseMove(event: MouseEvent) {\n if (!this.isDragging) {\n return\n }\n\n const deltaY = event.clientY - this.lastMouseY\n\n if (!this.lastMouseY) {\n this.lastMouseY = event.clientY\n }\n\n if (Math.abs(deltaY) > 30) {\n this.lastMouseY = event.clientY\n const direction = deltaY > 0 ? -1 : 1\n this.updateSelectedIndex(this.selectedIndex + direction)\n }\n }\n\n handleMouseUp() {\n this.isDragging = false\n }\n\n handleMouseLeave() {\n this.isDragging = false\n }\n\n private toggleActiveCard(index: number) {\n if (this.activeIndex === index) {\n this.activeIndex = null\n } else {\n this.activeIndex = index\n }\n }\n\n private updateSelectedIndex(newIndex: number) {\n this.activeIndex = null\n\n this.selectedIndex = Math.max(-1, Math.min(newIndex, this.cards.length - 1))\n this.scrollToSelectedCard()\n }\n\n private scrollToSelectedCard() {\n const cardHeight = 320\n const targetScrollTop = this.selectedIndex * cardHeight - (window.innerHeight / 2 - cardHeight / 2)\n\n this.carouselContainer.scrollTo({ top: targetScrollTop, behavior: 'smooth' })\n }\n\n private selectCard(index: number) {\n this.selectedIndex = index\n this.notifySelection()\n this.scrollToSelectedCard()\n }\n\n private notifySelection() {\n this.value = this.selectedIndex !== -1 ? this.cards[this.selectedIndex]?.name : undefined\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: this.value\n })\n )\n }\n\n private adjustCardHeight(e: Event, index: number) {\n const imgElement = e.target as HTMLImageElement\n const aspectRatio = imgElement.naturalWidth / imgElement.naturalHeight\n const newHeight = imgElement.offsetWidth / aspectRatio\n imgElement.style.height = `${newHeight}px`\n }\n}\n"]}
|
|
@@ -45,6 +45,23 @@ const Template = ({ value, disabled, bottomLimit = 70, perspective = 1200, rotat
|
|
|
45
45
|
</style>
|
|
46
46
|
|
|
47
47
|
<style>
|
|
48
|
+
html,
|
|
49
|
+
body {
|
|
50
|
+
margin: 0;
|
|
51
|
+
padding: 0;
|
|
52
|
+
overflow: hidden;
|
|
53
|
+
|
|
54
|
+
overscroll-behavior-y: none;
|
|
55
|
+
|
|
56
|
+
/* This is a font-stack that tries to use the system-default sans-serifs first */
|
|
57
|
+
font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
58
|
+
line-height: 1.5;
|
|
59
|
+
-webkit-font-smoothing: antialiased;
|
|
60
|
+
|
|
61
|
+
accent-color: var(--md-sys-color-primary);
|
|
62
|
+
background-color: var(--md-sys-color-background);
|
|
63
|
+
}
|
|
64
|
+
|
|
48
65
|
.container {
|
|
49
66
|
height: 1000px;
|
|
50
67
|
text-align: center;
|
|
@@ -60,48 +77,55 @@ const Template = ({ value, disabled, bottomLimit = 70, perspective = 1200, rotat
|
|
|
60
77
|
right: 0px;
|
|
61
78
|
bottom: 0px;
|
|
62
79
|
align-items: center;
|
|
63
|
-
z-index: 2;
|
|
64
80
|
right: 3%;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
div[status] > div[content] {
|
|
84
|
+
display: flex;
|
|
85
|
+
background-color: #4e5055;
|
|
86
|
+
color: #fff;
|
|
87
|
+
padding: 5px 7px;
|
|
88
|
+
border-radius: 7px;
|
|
89
|
+
gap: 10px;
|
|
90
|
+
font-size: 14px;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
div[status] span {
|
|
94
|
+
display: flex;
|
|
95
|
+
align-items: center;
|
|
96
|
+
width: 48px;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
div[status] md-icon {
|
|
100
|
+
width: 20px;
|
|
101
|
+
height: 20px;
|
|
102
|
+
margin-right: 4px;
|
|
103
|
+
border-radius: 5px;
|
|
104
|
+
font-size: 21px;
|
|
105
|
+
font-weight: 700;
|
|
106
|
+
}
|
|
107
|
+
div[status] md-icon[request] {
|
|
108
|
+
background-color: #f7f7f7;
|
|
109
|
+
color: #4e5055;
|
|
110
|
+
}
|
|
111
|
+
div[status] md-icon[pass] {
|
|
112
|
+
background-color: #4bbb4a;
|
|
113
|
+
}
|
|
114
|
+
div[status] md-icon[fail] {
|
|
115
|
+
background-color: #ff4444;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
span[name] {
|
|
119
|
+
width: 40px;
|
|
120
|
+
color: #4e5055;
|
|
121
|
+
margin-left: 6px;
|
|
122
|
+
text-align: center;
|
|
123
|
+
}
|
|
65
124
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
padding: 5px 7px;
|
|
71
|
-
border-radius: 7px;
|
|
72
|
-
gap: 10px;
|
|
73
|
-
font-size: 14px;
|
|
74
|
-
|
|
75
|
-
span {
|
|
76
|
-
display: flex;
|
|
77
|
-
align-items: center;
|
|
78
|
-
width: 48px;
|
|
79
|
-
|
|
80
|
-
md-icon {
|
|
81
|
-
width: 20px;
|
|
82
|
-
height: 20px;
|
|
83
|
-
margin-right: 4px;
|
|
84
|
-
border-radius: 5px;
|
|
85
|
-
font-size: 21px;
|
|
86
|
-
font-weight: 700;
|
|
87
|
-
}
|
|
88
|
-
md-icon[request] {
|
|
89
|
-
background-color: #f7f7f7;
|
|
90
|
-
color: #4e5055;
|
|
91
|
-
}
|
|
92
|
-
md-icon[pass] {
|
|
93
|
-
background-color: #4bbb4a;
|
|
94
|
-
}
|
|
95
|
-
md-icon[fail] {
|
|
96
|
-
background-color: #ff4444;
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
span[name] {
|
|
101
|
-
color: #4e5055;
|
|
102
|
-
margin-left: 6px;
|
|
103
|
-
width: 40px;
|
|
104
|
-
}
|
|
125
|
+
span[name][active] {
|
|
126
|
+
color: var(--md-sys-color-on-error);
|
|
127
|
+
background-color: var(--md-sys-color-error);
|
|
128
|
+
border-radius: 999px;
|
|
105
129
|
}
|
|
106
130
|
|
|
107
131
|
ox-select-floor {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-select-floor.stories.js","sourceRoot":"","sources":["../../stories/ox-select-floor.stories.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAA;AAElC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAC1F,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAA;AAEnD,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,iBAAiB;IAC5B,QAAQ,EAAE;QACR,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,WAAW,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAClC,WAAW,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAClC,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,gBAAgB,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KACxC;CACF,CAAA;AAiBD,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;IACpD,OAAO;QACL,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,KAAK,GAAG,CAAC,GAAG,GAAG;KACtB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,QAAQ,GAAoB,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,WAAW,GAAG,EAAE,EAChB,WAAW,GAAG,IAAI,EAClB,OAAO,GAAG,EAAE,EACZ,gBAAgB,GAAG,EAAE,EACZ,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO
|
|
1
|
+
{"version":3,"file":"ox-select-floor.stories.js","sourceRoot":"","sources":["../../stories/ox-select-floor.stories.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAA;AAElC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAC1F,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAA;AAEnD,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,iBAAiB;IAC5B,QAAQ,EAAE;QACR,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,WAAW,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAClC,WAAW,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAClC,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,gBAAgB,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KACxC;CACF,CAAA;AAiBD,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;IACpD,OAAO;QACL,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,KAAK,GAAG,CAAC,GAAG,GAAG;KACtB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,QAAQ,GAAoB,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,WAAW,GAAG,EAAE,EAChB,WAAW,GAAG,IAAI,EAClB,OAAO,GAAG,EAAE,EACZ,gBAAgB,GAAG,EAAE,EACZ,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAwFK,OAAO;2CACA,gBAAgB;uCACpB,WAAW;;;;;;eAMnC,KAAK;qBACC,WAAW;kBACd,QAAQ;gBACV,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAG,CAAiB,CAAC,MAAe,CAAC,KAAK,CAAC;;QAE5E,KAAK,CAAC,GAAG,CACT,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,CACzB,IAAI,CAAA,uBAAuB,KAAK;;;;;;yBAMjB,IAAI;iBACZ,CACV;;;CAGN,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,WAAW,EAAE,EAAE;IACf,WAAW,EAAE,IAAI;IACjB,OAAO,EAAE,EAAE;IACX,gBAAgB,EAAE,EAAE;CACrB,CAAA","sourcesContent":["import '../src/ox-select-floor.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\nimport { IMAGE } from './image-for-select-floor.js'\n\nexport default {\n title: 'ox-select-floor',\n component: 'ox-select-floor',\n argTypes: {\n disabled: { control: 'boolean' },\n value: { control: 'text' },\n bottomLimit: { control: 'number' },\n perspective: { control: 'number' },\n rotateX: { control: 'number' },\n rotateXForActive: { control: 'number' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n value?: string\n bottomLimit?: number\n perspective?: number\n rotateX?: number\n rotateXForActive?: number\n disabled?: boolean\n}\n\nconst cards = new Array(10).fill({}).map((_, index) => {\n return {\n image: IMAGE,\n name: index + 1 + '층'\n }\n})\n\nconst Template: Story<ArgTypes> = ({\n value,\n disabled,\n bottomLimit = 70,\n perspective = 1200,\n rotateX = 60,\n rotateXForActive = 40\n}: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n html,\n body {\n margin: 0;\n padding: 0;\n overflow: hidden;\n\n overscroll-behavior-y: none;\n\n /* This is a font-stack that tries to use the system-default sans-serifs first */\n font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n\n accent-color: var(--md-sys-color-primary);\n background-color: var(--md-sys-color-background);\n }\n\n .container {\n height: 1000px;\n text-align: center;\n padding: 20px;\n\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n }\n\n div[status] {\n display: flex;\n position: absolute;\n right: 0px;\n bottom: 0px;\n align-items: center;\n right: 3%;\n }\n\n div[status] > div[content] {\n display: flex;\n background-color: #4e5055;\n color: #fff;\n padding: 5px 7px;\n border-radius: 7px;\n gap: 10px;\n font-size: 14px;\n }\n\n div[status] span {\n display: flex;\n align-items: center;\n width: 48px;\n }\n\n div[status] md-icon {\n width: 20px;\n height: 20px;\n margin-right: 4px;\n border-radius: 5px;\n font-size: 21px;\n font-weight: 700;\n }\n div[status] md-icon[request] {\n background-color: #f7f7f7;\n color: #4e5055;\n }\n div[status] md-icon[pass] {\n background-color: #4bbb4a;\n }\n div[status] md-icon[fail] {\n background-color: #ff4444;\n }\n\n span[name] {\n width: 40px;\n color: #4e5055;\n margin-left: 6px;\n text-align: center;\n }\n\n span[name][active] {\n color: var(--md-sys-color-on-error);\n background-color: var(--md-sys-color-error);\n border-radius: 999px;\n }\n\n ox-select-floor {\n --ox-select-floor-rotate-x: ${rotateX}deg;\n --ox-select-floor-rotate-x-active: ${rotateXForActive}deg;\n --ox-select-floor-perspective: ${perspective}px;\n }\n </style>\n\n <div class=\"container md-typescale-body-large-prominent\">\n <ox-select-floor\n .cards=${cards}\n .bottomLimit=${bottomLimit}\n ?disabled=${disabled}\n @change=${(e: Event) => console.log(((e as CustomEvent).target as any)!.value)}\n >\n ${cards.map(\n ({ image, name }, index) =>\n html`<div slot=\"template-${index}\" status>\n <div content>\n <span><md-icon request slot=\"icon\">exclamation</md-icon>100</span>\n <span><md-icon pass slot=\"icon\">check</md-icon>50</span>\n <span><md-icon fail slot=\"icon\">close</md-icon>5</span>\n </div>\n <span name>${name}</span>\n </div>`\n )}\n </ox-select-floor>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n bottomLimit: 70,\n perspective: 1200,\n rotateX: 60,\n rotateXForActive: 40\n}\n"]}
|