@everymatrix/lottery-bullet 0.1.1 → 0.1.2
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/dist/cjs/lottery-bullet.cjs.entry.js +1 -1
- package/dist/collection/components/lottery-bullet/lottery-bullet.css +11 -97
- package/dist/components/lottery-bullet.js +1 -1
- package/dist/esm/lottery-bullet.entry.js +1 -1
- package/dist/lottery-bullet/lottery-bullet.esm.js +1 -1
- package/dist/lottery-bullet/p-22da9c5e.entry.js +1 -0
- package/package.json +1 -1
- package/dist/lottery-bullet/p-a2cf1083.entry.js +0 -1
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-2668d7da.js');
|
|
6
6
|
|
|
7
|
-
const lotteryBulletCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}
|
|
7
|
+
const lotteryBulletCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Circle{cursor:pointer;color:#000000;display:block;background:#FFF;border:solid 2px #00958f;height:20px;width:20px;border-radius:50%;margin:0;display:flex;align-items:center;justify-content:center;user-select:none;font-size:12px;font-weight:600;position:relative}.Circle:hover{background:#aee4e2}.Circle.Selected{color:#ffffff;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #00958f}.Circle.Disabled{color:#707070;background:#D4D4D4;border:solid 2px #707070;cursor:default}.Circle.DisabledSelected{color:#ffffff;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #707070;cursor:default}";
|
|
8
8
|
|
|
9
9
|
const LotteryBullet = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -4,110 +4,28 @@
|
|
|
4
4
|
font-family: "Roboto", sans-serif;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
-
/*** Animation - Show */
|
|
8
|
-
@-webkit-keyframes Circle {
|
|
9
|
-
0% {
|
|
10
|
-
-webkit-transform: scale(0.5);
|
|
11
|
-
transform: scale(0.5);
|
|
12
|
-
}
|
|
13
|
-
100% {
|
|
14
|
-
-webkit-transform: scale(1);
|
|
15
|
-
transform: scale(1);
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
@keyframes Circle {
|
|
19
|
-
0% {
|
|
20
|
-
-webkit-transform: scale(0.5);
|
|
21
|
-
transform: scale(0.5);
|
|
22
|
-
}
|
|
23
|
-
100% {
|
|
24
|
-
-webkit-transform: scale(1);
|
|
25
|
-
transform: scale(1);
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
/*** Animation - Hover */
|
|
29
|
-
@-webkit-keyframes hover-rotate {
|
|
30
|
-
0% {
|
|
31
|
-
-webkit-transform: scale(1) rotateZ(0);
|
|
32
|
-
transform: scale(1) rotateZ(0);
|
|
33
|
-
}
|
|
34
|
-
50% {
|
|
35
|
-
-webkit-transform: scale(1.2) rotateZ(180deg);
|
|
36
|
-
transform: scale(1.22) rotateZ(180deg);
|
|
37
|
-
}
|
|
38
|
-
100% {
|
|
39
|
-
-webkit-transform: scale(1) rotateZ(360deg);
|
|
40
|
-
transform: scale(1) rotateZ(360deg);
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
@keyframes hover-rotate {
|
|
44
|
-
0% {
|
|
45
|
-
-webkit-transform: scale(1) rotateZ(0);
|
|
46
|
-
transform: scale(1) rotateZ(0);
|
|
47
|
-
}
|
|
48
|
-
50% {
|
|
49
|
-
-webkit-transform: scale(1.2) rotateZ(180deg);
|
|
50
|
-
transform: scale(1.2) rotateZ(180deg);
|
|
51
|
-
}
|
|
52
|
-
100% {
|
|
53
|
-
-webkit-transform: scale(1) rotateZ(360deg);
|
|
54
|
-
transform: scale(1) rotateZ(360deg);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
/*** Animation - Selected */
|
|
58
|
-
@-webkit-keyframes selected-scaleUp {
|
|
59
|
-
0% {
|
|
60
|
-
-webkit-transform: scale(0.5);
|
|
61
|
-
transform: scale(0.5);
|
|
62
|
-
}
|
|
63
|
-
100% {
|
|
64
|
-
-webkit-transform: scale(1.2);
|
|
65
|
-
transform: scale(1.2);
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
@keyframes selected-scaleUp {
|
|
69
|
-
0% {
|
|
70
|
-
-webkit-transform: scale(0.5);
|
|
71
|
-
transform: scale(0.5);
|
|
72
|
-
}
|
|
73
|
-
100% {
|
|
74
|
-
-webkit-transform: scale(1);
|
|
75
|
-
transform: scale(1);
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
7
|
.Circle {
|
|
79
|
-
-webkit-animation: Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;
|
|
80
|
-
animation: Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;
|
|
81
8
|
cursor: pointer;
|
|
82
9
|
color: #000000;
|
|
83
10
|
display: block;
|
|
84
|
-
|
|
85
|
-
|
|
11
|
+
background: #FFF;
|
|
12
|
+
border: solid 2px #00958f;
|
|
13
|
+
height: 20px;
|
|
14
|
+
width: 20px;
|
|
15
|
+
border-radius: 50%;
|
|
86
16
|
margin: 0;
|
|
87
17
|
display: flex;
|
|
88
18
|
align-items: center;
|
|
89
19
|
justify-content: center;
|
|
90
|
-
justify-content: center;
|
|
91
|
-
align-items: center;
|
|
92
|
-
border: solid 2px #ffffff;
|
|
93
|
-
background: radial-gradient(circle at top, white 0%, white 100%);
|
|
94
|
-
font-weight: bold;
|
|
95
|
-
border-radius: 50%;
|
|
96
|
-
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
|
|
97
20
|
user-select: none;
|
|
98
|
-
font-size:
|
|
99
|
-
line-height: 16px;
|
|
21
|
+
font-size: 12px;
|
|
100
22
|
font-weight: 600;
|
|
101
23
|
position: relative;
|
|
102
24
|
}
|
|
103
25
|
.Circle:hover {
|
|
104
|
-
|
|
105
|
-
animation: hover-rotate 0.4s linear both;
|
|
106
|
-
background: radial-gradient(circle at top, white 0%, #f1f1f1 100%);
|
|
26
|
+
background: #aee4e2;
|
|
107
27
|
}
|
|
108
28
|
.Circle.Selected {
|
|
109
|
-
-webkit-animation: selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
|
|
110
|
-
animation: selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
|
|
111
29
|
color: #ffffff;
|
|
112
30
|
background: #9EC258;
|
|
113
31
|
background: -webkit-radial-gradient(top, #00958f, #004D4A);
|
|
@@ -116,21 +34,17 @@
|
|
|
116
34
|
border: solid 2px #00958f;
|
|
117
35
|
}
|
|
118
36
|
.Circle.Disabled {
|
|
119
|
-
|
|
120
|
-
animation: selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
|
|
121
|
-
color: #f1f1f1;
|
|
37
|
+
color: #707070;
|
|
122
38
|
background: #D4D4D4;
|
|
123
|
-
border: solid 2px #
|
|
39
|
+
border: solid 2px #707070;
|
|
124
40
|
cursor: default;
|
|
125
41
|
}
|
|
126
42
|
.Circle.DisabledSelected {
|
|
127
|
-
|
|
128
|
-
animation: selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
|
|
129
|
-
color: #f1f1f1;
|
|
43
|
+
color: #ffffff;
|
|
130
44
|
background: #9EC258;
|
|
131
45
|
background: -webkit-radial-gradient(top, #00958f, #004D4A);
|
|
132
46
|
background: -moz-radial-gradient(top, #00958f, #004D4A);
|
|
133
47
|
background: radial-gradient(to bottom, #00958f, #004D4A);
|
|
134
|
-
border: solid 2px #
|
|
48
|
+
border: solid 2px #707070;
|
|
135
49
|
cursor: default;
|
|
136
50
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const lotteryBulletCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}
|
|
3
|
+
const lotteryBulletCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Circle{cursor:pointer;color:#000000;display:block;background:#FFF;border:solid 2px #00958f;height:20px;width:20px;border-radius:50%;margin:0;display:flex;align-items:center;justify-content:center;user-select:none;font-size:12px;font-weight:600;position:relative}.Circle:hover{background:#aee4e2}.Circle.Selected{color:#ffffff;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #00958f}.Circle.Disabled{color:#707070;background:#D4D4D4;border:solid 2px #707070;cursor:default}.Circle.DisabledSelected{color:#ffffff;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #707070;cursor:default}";
|
|
4
4
|
|
|
5
5
|
const LotteryBullet$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
6
6
|
constructor() {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h } from './index-bb47b6b1.js';
|
|
2
2
|
|
|
3
|
-
const lotteryBulletCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}
|
|
3
|
+
const lotteryBulletCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Circle{cursor:pointer;color:#000000;display:block;background:#FFF;border:solid 2px #00958f;height:20px;width:20px;border-radius:50%;margin:0;display:flex;align-items:center;justify-content:center;user-select:none;font-size:12px;font-weight:600;position:relative}.Circle:hover{background:#aee4e2}.Circle.Selected{color:#ffffff;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #00958f}.Circle.Disabled{color:#707070;background:#D4D4D4;border:solid 2px #707070;cursor:default}.Circle.DisabledSelected{color:#ffffff;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #707070;cursor:default}";
|
|
4
4
|
|
|
5
5
|
const LotteryBullet = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as t}from"./p-9ea4d1d3.js";(()=>{const t=import.meta.url,l={};return""!==t&&(l.resourcesUrl=new URL(".",t).href),e(l)})().then((e=>t([["p-
|
|
1
|
+
import{p as e,b as t}from"./p-9ea4d1d3.js";(()=>{const t=import.meta.url,l={};return""!==t&&(l.resourcesUrl=new URL(".",t).href),e(l)})().then((e=>t([["p-22da9c5e",[[1,"lottery-bullet",{value:[1],selectable:[4],isSelected:[4,"is-selected"]}]]]],e)));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,c as o,h as r}from"./p-9ea4d1d3.js";const e=class{constructor(r){t(this,r),this.bulletEvent=o(this,"lotteryBulletSelection",7),this.value="0",this.selectable=!0,this.isSelected=!1,this.select=()=>{this.selectable&&(this.isSelected=!this.isSelected,this.bulletEvent.emit({value:this.value,selected:this.isSelected}))}}render(){return r("div",{class:"Circle "+(this.selectable?"":"Disabled")+(this.isSelected?"Selected":""),onClick:()=>this.select()},this.value)}};e.style='@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");:host{display:block;font-family:"Roboto", sans-serif}.Circle{cursor:pointer;color:#000000;display:block;background:#FFF;border:solid 2px #00958f;height:20px;width:20px;border-radius:50%;margin:0;display:flex;align-items:center;justify-content:center;user-select:none;font-size:12px;font-weight:600;position:relative}.Circle:hover{background:#aee4e2}.Circle.Selected{color:#ffffff;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #00958f}.Circle.Disabled{color:#707070;background:#D4D4D4;border:solid 2px #707070;cursor:default}.Circle.DisabledSelected{color:#ffffff;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #707070;cursor:default}';export{e as lottery_bullet}
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as e,c as t,h as r}from"./p-9ea4d1d3.js";const a=class{constructor(r){e(this,r),this.bulletEvent=t(this,"lotteryBulletSelection",7),this.value="0",this.selectable=!0,this.isSelected=!1,this.select=()=>{this.selectable&&(this.isSelected=!this.isSelected,this.bulletEvent.emit({value:this.value,selected:this.isSelected}))}}render(){return r("div",{class:"Circle "+(this.selectable?"":"Disabled")+(this.isSelected?"Selected":""),onClick:()=>this.select()},this.value)}};a.style='@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");:host{display:block;font-family:"Roboto", sans-serif}@-webkit-keyframes Circle{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes Circle{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes hover-rotate{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(1.2) rotateZ(180deg);transform:scale(1.22) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@keyframes hover-rotate{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(1.2) rotateZ(180deg);transform:scale(1.2) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@-webkit-keyframes selected-scaleUp{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1.2);transform:scale(1.2)}}@keyframes selected-scaleUp{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}.Circle{-webkit-animation:Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;cursor:pointer;color:#000000;display:block;height:30px;width:30px;margin:0;display:flex;align-items:center;justify-content:center;justify-content:center;align-items:center;border:solid 2px #ffffff;background:radial-gradient(circle at top, white 0%, white 100%);font-weight:bold;border-radius:50%;box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.5);user-select:none;font-size:16px;line-height:16px;font-weight:600;position:relative}.Circle:hover{-webkit-animation:hover-rotate 0.4s linear both;animation:hover-rotate 0.4s linear both;background:radial-gradient(circle at top, white 0%, #f1f1f1 100%)}.Circle.Selected{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#ffffff;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #00958f}.Circle.Disabled{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#f1f1f1;background:#D4D4D4;border:solid 2px #D4D4D4;cursor:default}.Circle.DisabledSelected{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#f1f1f1;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #D4D4D4;cursor:default}';export{a as lottery_bullet}
|