@trenoxxious/n-components 1.0.13 → 1.0.15
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/index.css +2 -1
- package/dist/index.html +75 -49
- package/dist/n-components.es.js +182 -92
- package/dist/n-components.umd.js +153 -44
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -172,6 +172,7 @@ b {
|
|
|
172
172
|
font-weight: 500;
|
|
173
173
|
color: rgba(255, 255, 255, 0.95);
|
|
174
174
|
font-family: "Manjari", sans-serif, system-ui;
|
|
175
|
+
text-align: left;
|
|
175
176
|
}
|
|
176
177
|
|
|
177
178
|
.button-grid {
|
|
@@ -213,7 +214,7 @@ b {
|
|
|
213
214
|
.flex-component {
|
|
214
215
|
display: flex;
|
|
215
216
|
flex-direction: column;
|
|
216
|
-
justify-content:
|
|
217
|
+
justify-content: space-between;
|
|
217
218
|
align-items: center;
|
|
218
219
|
}
|
|
219
220
|
|
package/dist/index.html
CHANGED
|
@@ -53,11 +53,9 @@
|
|
|
53
53
|
</script>
|
|
54
54
|
<p>Simple, lightweight web components for use with vanilla HTML, JS and CSS.</p>
|
|
55
55
|
</header>
|
|
56
|
-
<p style="margin-left: 5%; margin-right: 5%;">Import the latest version of <b
|
|
57
|
-
|
|
58
|
-
your static
|
|
59
|
-
vanilla
|
|
60
|
-
HTML file using:</p>
|
|
56
|
+
<p style="margin-left: 5%; margin-right: 5%; margin-bottom: 10px;">Import the latest version of <b
|
|
57
|
+
class="html-red">n-components</b>
|
|
58
|
+
into your static vanilla HTML file using:</p>
|
|
61
59
|
<div class="code"
|
|
62
60
|
style="padding-bottom: 5px; margin-left: 5%; margin-right: 5%; margin-bottom: 0; position: relative;">
|
|
63
61
|
<div class="code-content w-full">
|
|
@@ -66,15 +64,15 @@
|
|
|
66
64
|
class="html-green">"https://unpkg.com/@trenoxxious/n-components@latest/dist/n-components.umd.js"</span>></<span
|
|
67
65
|
class="html-red">script</span>>
|
|
68
66
|
</div>
|
|
69
|
-
<n-copy
|
|
67
|
+
<n-copy class="nc-tr nc-dark nc-medium nc-success-[#00ff6aff]"
|
|
70
68
|
copy='<script src="https://unpkg.com/@trenoxxious/n-components@latest/dist/n-components.umd.js"></script>'></n-copy>
|
|
71
69
|
</div>
|
|
72
70
|
<p style="margin-left: 5%; margin-right: 5%; margin-bottom: 50px; margin-top: 10px;">Then, simply call any of
|
|
73
71
|
the below <b class="html-red">n-components</b> to get started.</p>
|
|
74
72
|
|
|
75
73
|
<!-- Utility -->
|
|
76
|
-
<p class="sec" style="margin-left: 5%; margin-right: 5%;">We have useful
|
|
77
|
-
things like <span class="html-red"><b>n-</b>copy</span>!
|
|
74
|
+
<p class="sec" style="margin-left: 5%; margin-right: 5%;">We have some useful drop-in utilities. Take a peek at
|
|
75
|
+
things like <span class="html-red"><b>n-</b>copy</span> and <span class="html-red"><b>n-</b>tooltip</span>!
|
|
78
76
|
</p>
|
|
79
77
|
<div class="components-grid-full" style="margin-bottom: 50px;">
|
|
80
78
|
<div class="component-card">
|
|
@@ -86,12 +84,19 @@
|
|
|
86
84
|
</div>
|
|
87
85
|
<div class="button-grid-4">
|
|
88
86
|
<div class="flex-component">
|
|
89
|
-
<pre><code class="language-html"><n-copy dark copy="127.0.0.1"></n-copy></code></pre>
|
|
87
|
+
<pre><code class="language-html"><n-copy class="nc-large nc-dark" copy="127.0.0.1"></n-copy></code></pre>
|
|
90
88
|
<div>A simple copy-to-clipboard button.</div>
|
|
91
|
-
<n-copy dark copy="127.0.0.1"></n-copy>
|
|
89
|
+
<n-copy class="nc-dark nc-medium" copy="127.0.0.1"></n-copy>
|
|
92
90
|
<div style="margin-top: 10px;">
|
|
93
|
-
<p style="font-size: 12px;">Accepts: <span class="sub-text">
|
|
94
|
-
|
|
91
|
+
<p style="font-size: 12px;">Accepts: <span class="sub-text">string, nc-classes</span></p>
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
<div class="flex-component">
|
|
95
|
+
<pre><code class="language-html"><n-button n-tooltip="Hover me!" class="nb-info nt-dark">Hello!</n-button></code></pre>
|
|
96
|
+
<div>A tooltip that attaches to the mouse on element hover.</div>
|
|
97
|
+
<n-button n-tooltip="Hover me!" class="nb-info nt-dark">Hello!</n-button>
|
|
98
|
+
<div style="margin-top: 10px;">
|
|
99
|
+
<p style="font-size: 12px;">Accepts: <span class="sub-text">string, nt-classes</span></p>
|
|
95
100
|
</div>
|
|
96
101
|
</div>
|
|
97
102
|
</div>
|
|
@@ -111,14 +116,15 @@
|
|
|
111
116
|
</div>
|
|
112
117
|
<p style="margin-bottom: 12px;">Variants:</p>
|
|
113
118
|
<div class="button-grid">
|
|
114
|
-
<n-button
|
|
115
|
-
<n-button
|
|
116
|
-
<n-button
|
|
117
|
-
<n-button
|
|
118
|
-
<n-button
|
|
119
|
-
<n-button
|
|
120
|
-
<n-button
|
|
121
|
-
<n-button
|
|
119
|
+
<n-button>Normal</n-button>
|
|
120
|
+
<n-button class="nb-info">Info</n-button>
|
|
121
|
+
<n-button class="nb-warning">Warning</n-button>
|
|
122
|
+
<n-button class="nb-alert">Alert</n-button>
|
|
123
|
+
<n-button class="nb-success">Success</n-button>
|
|
124
|
+
<n-button class="nb-alert nb-slow">Cancel</n-button>
|
|
125
|
+
<n-button class="nb-fast">Sign Up</n-button>
|
|
126
|
+
<n-button class="nb-dp nb-dark nb-fast nb-scale nb-outline">Dark Static</n-button>
|
|
127
|
+
<n-button class="nb-dynamic">No</n-button>
|
|
122
128
|
</div>
|
|
123
129
|
</div>
|
|
124
130
|
<div class="component-card">
|
|
@@ -128,67 +134,87 @@
|
|
|
128
134
|
</div>
|
|
129
135
|
<div class="button-grid-3">
|
|
130
136
|
<div>
|
|
131
|
-
<div class="code html-orange">
|
|
132
|
-
class="html-green">"info"</span></div>
|
|
133
|
-
<p style="font-size: 13px; margin: 4px 0;">
|
|
134
|
-
<n-button
|
|
137
|
+
<div class="code html-orange">class<span class="html-gray">=</span><span
|
|
138
|
+
class="html-green">"nb-info"</span></div>
|
|
139
|
+
<p style="font-size: 13px; margin: 4px 0;">Controls theme type.</p>
|
|
140
|
+
<n-button class="nb-info">Button</n-button>
|
|
135
141
|
<p style="font-size: 11px; margin-top: 8px;"><span class="html-gray">Options:</span> <span
|
|
136
142
|
class="sub-text">normal, info, warning, alert, success</span></p>
|
|
137
143
|
</div>
|
|
138
144
|
<div>
|
|
139
|
-
<div class="code html-orange">
|
|
140
|
-
class="html-green">"fast"</span></div>
|
|
145
|
+
<div class="code html-orange">class<span class="html-gray">=</span><span
|
|
146
|
+
class="html-green">"nb-fast"</span></div>
|
|
141
147
|
<p style="font-size: 13px; margin: 4px 0;">Animation speed.</p>
|
|
142
|
-
<n-button
|
|
148
|
+
<n-button class="nb-fast">Fast</n-button>
|
|
143
149
|
<p style="font-size: 11px; margin-top: 8px;"><span class="html-gray">Options:</span> <span
|
|
144
150
|
class="sub-text">fast, normal, slow, very-slow</span></p>
|
|
145
151
|
</div>
|
|
146
152
|
<div>
|
|
147
|
-
<div class="code html-orange">
|
|
148
|
-
class="html-green">"
|
|
149
|
-
<p style="font-size: 13px; margin: 4px 0;">Background color.</p>
|
|
150
|
-
<n-button background="#cd50ec" style="margin: 8px 0;">Custom</n-button>
|
|
151
|
-
<p style="font-size: 11px; margin-top: 8px;"><span class="html-gray">Accepts:</span> <span
|
|
152
|
-
class="sub-text">CSS color values</span></p>
|
|
153
|
-
</div>
|
|
154
|
-
<div>
|
|
155
|
-
<div class="code html-orange">scaleOnHover</div>
|
|
153
|
+
<div class="code html-orange">class<span class="html-gray">=</span><span
|
|
154
|
+
class="html-green">"nb-scale"</span></div>
|
|
156
155
|
<p style="font-size: 13px; margin: 4px 0;">Scales on hover.</p>
|
|
157
|
-
<n-button
|
|
156
|
+
<n-button class="nb-scale">Scales!</n-button>
|
|
158
157
|
<p style="font-size: 11px; margin-top: 8px;"><span class="html-gray">Boolean</span></p>
|
|
159
158
|
</div>
|
|
160
159
|
<div>
|
|
161
|
-
<div class="code html-orange">
|
|
160
|
+
<div class="code html-orange">class<span class="html-gray">=</span><span
|
|
161
|
+
class="html-green">"nb-thick"</span></div>
|
|
162
162
|
<p style="font-size: 13px; margin: 4px 0;">Largest variant.</p>
|
|
163
|
-
<n-button
|
|
163
|
+
<n-button class="nb-thick">Thick</n-button>
|
|
164
164
|
<p style="font-size: 11px; margin-top: 8px;"><span class="html-gray">Boolean</span> · Overrides
|
|
165
165
|
<span class="html-orange">thin</span>
|
|
166
166
|
</p>
|
|
167
167
|
</div>
|
|
168
168
|
<div>
|
|
169
|
-
<div class="code html-orange">
|
|
169
|
+
<div class="code html-orange">class<span class="html-gray">=</span><span
|
|
170
|
+
class="html-green">"nb-thin"</span></div>
|
|
170
171
|
<p style="font-size: 13px; margin: 4px 0;">Smallest variant.</p>
|
|
171
|
-
<n-button
|
|
172
|
+
<n-button class="nb-thin">Thin</n-button>
|
|
172
173
|
<p style="font-size: 11px; margin-top: 8px;"><span class="html-gray">Boolean</span></p>
|
|
173
174
|
</div>
|
|
174
175
|
<div>
|
|
175
|
-
<div class="code html-orange">
|
|
176
|
+
<div class="code html-orange">class<span class="html-gray">=</span><span
|
|
177
|
+
class="html-green">"nb-rounded"</span></div>
|
|
176
178
|
<p style="font-size: 13px; margin: 4px 0;">Rounded corners.</p>
|
|
177
|
-
<n-button
|
|
179
|
+
<n-button class="nb-rounded">Rounded</n-button>
|
|
178
180
|
<p style="font-size: 11px; margin-top: 8px;"><span class="html-gray">Boolean</span> · Overridden by
|
|
179
181
|
<span class="html-orange">sharp</span>
|
|
180
182
|
</p>
|
|
181
183
|
</div>
|
|
182
184
|
<div>
|
|
183
|
-
<div class="code html-orange">
|
|
184
|
-
|
|
185
|
-
<
|
|
185
|
+
<div class="code html-orange">class<span class="html-gray">=</span><span
|
|
186
|
+
class="html-green">"nb-sharp"</span></div>
|
|
187
|
+
<p style="font-size: 13px; margin: 4px 0;">Rounded corners.</p>
|
|
188
|
+
<n-button class="nb-sharp">Sharp</n-button>
|
|
189
|
+
<p style="font-size: 11px; margin-top: 8px;"><span class="html-gray">Boolean</span>
|
|
190
|
+
</p>
|
|
191
|
+
</div>
|
|
192
|
+
<div>
|
|
193
|
+
<div class="code html-orange">class<span class="html-gray">=</span><span
|
|
194
|
+
class="html-green">"nb-outline"</span></div>
|
|
195
|
+
<p style="font-size: 13px; margin: 4px 0;">Outlined only style.</p>
|
|
196
|
+
<n-button class="nb-outline nb-dark">Outline</n-button>
|
|
186
197
|
<p style="font-size: 11px; margin-top: 8px;"><span class="html-gray">Boolean</span></p>
|
|
187
198
|
</div>
|
|
188
199
|
<div>
|
|
189
|
-
<div class="code html-orange">
|
|
200
|
+
<div class="code html-orange">class<span class="html-gray">=</span><span
|
|
201
|
+
class="html-green">"nb-dp"</span></div>
|
|
190
202
|
<p style="font-size: 13px; margin: 4px 0;">Disable click reaction.</p>
|
|
191
|
-
<n-button
|
|
203
|
+
<n-button class="nb-dp">Static</n-button>
|
|
204
|
+
<p style="font-size: 11px; margin-top: 8px;"><span class="html-gray">Boolean</span></p>
|
|
205
|
+
</div>
|
|
206
|
+
<div>
|
|
207
|
+
<div class="code html-orange">class<span class="html-gray">=</span><span
|
|
208
|
+
class="html-green">"nb-dynamic"</span></div>
|
|
209
|
+
<p style="font-size: 13px; margin: 4px 0;">Disable min/max width.</p>
|
|
210
|
+
<n-button class="nb-dynamic">Dyn</n-button>
|
|
211
|
+
<p style="font-size: 11px; margin-top: 8px;"><span class="html-gray">Boolean</span></p>
|
|
212
|
+
</div>
|
|
213
|
+
<div>
|
|
214
|
+
<div class="code html-orange">style<span class="html-gray">=</span><span
|
|
215
|
+
class="html-green">"background: blue;"</span></div>
|
|
216
|
+
<p style="font-size: 13px; margin: 4px 0;">Regular styles work too!</p>
|
|
217
|
+
<n-button style="background: blue;">Static</n-button>
|
|
192
218
|
<p style="font-size: 11px; margin-top: 8px;"><span class="html-gray">Boolean</span></p>
|
|
193
219
|
</div>
|
|
194
220
|
</div>
|
|
@@ -196,7 +222,7 @@
|
|
|
196
222
|
</div>
|
|
197
223
|
<script>
|
|
198
224
|
const currentVersionDisplay = document.getElementById('current-version');
|
|
199
|
-
const currentVersionNum = '1.0.
|
|
225
|
+
const currentVersionNum = '1.0.14';
|
|
200
226
|
|
|
201
227
|
currentVersionDisplay.innerText = currentVersionNum;
|
|
202
228
|
|
package/dist/n-components.es.js
CHANGED
|
@@ -531,22 +531,9 @@ function __decorate(x, j, F, U) {
|
|
|
531
531
|
}
|
|
532
532
|
var NButton = class extends i {
|
|
533
533
|
constructor(...x) {
|
|
534
|
-
super(...x), this.
|
|
534
|
+
super(...x), this.type = "button", this.id = "", this.name = "", this.disabled = !1, this.form = "", this.formaction = "", this.formmethod = "", this.formnovalidate = !1, this.formtarget = "", this.title = "", this.ariaLabel = "", this.ariaDescribedby = "", this.ariaPressed = "", this.background = "", this.borderColor = "", this.textColor = "";
|
|
535
535
|
}
|
|
536
536
|
static #e = this.properties = {
|
|
537
|
-
variant: { type: String },
|
|
538
|
-
animation: { type: String },
|
|
539
|
-
thin: { type: Boolean },
|
|
540
|
-
thick: { type: Boolean },
|
|
541
|
-
outlineOnly: { type: Boolean },
|
|
542
|
-
rounded: { type: Boolean },
|
|
543
|
-
sharp: { type: Boolean },
|
|
544
|
-
scaleOnHover: { type: Boolean },
|
|
545
|
-
dark: { type: Boolean },
|
|
546
|
-
background: { type: String },
|
|
547
|
-
textColor: { type: String },
|
|
548
|
-
borderColor: { type: String },
|
|
549
|
-
dontPunch: { type: Boolean },
|
|
550
537
|
style: { type: String },
|
|
551
538
|
type: { type: String },
|
|
552
539
|
id: { type: String },
|
|
@@ -579,114 +566,122 @@ var NButton = class extends i {
|
|
|
579
566
|
font-size: 14px;
|
|
580
567
|
font-weight: 400;
|
|
581
568
|
border-radius: 2px;
|
|
582
|
-
transition: all;
|
|
583
|
-
animation-duration: 0.3s;
|
|
569
|
+
transition: all 0.25s;
|
|
584
570
|
min-width: 100px;
|
|
571
|
+
max-width: 200px;
|
|
572
|
+
text-wrap: pretty;
|
|
585
573
|
user-select: none;
|
|
586
574
|
}
|
|
587
575
|
|
|
588
|
-
button:not(.dont-punch):active {
|
|
576
|
+
button:not(.nb-dp):not(.nb-dont-punch):active {
|
|
589
577
|
transition: transform 0.15s linear;
|
|
590
578
|
scale: 0.97;
|
|
591
579
|
}
|
|
592
580
|
|
|
593
|
-
button.info {
|
|
581
|
+
button.nb-info {
|
|
594
582
|
background-color: #007bff;
|
|
595
583
|
color: white;
|
|
596
584
|
border: 1px solid #2c92ffff;
|
|
597
585
|
}
|
|
598
586
|
|
|
599
|
-
button.info:hover {
|
|
587
|
+
button.nb-info:hover {
|
|
600
588
|
background-color: #268fffff;
|
|
601
589
|
border: 1px solid #4da3ffff;
|
|
602
590
|
}
|
|
603
591
|
|
|
604
|
-
button.success {
|
|
592
|
+
button.nb-success {
|
|
605
593
|
background-color: #00ff55ff;
|
|
606
594
|
color: #242424ff;
|
|
607
595
|
border: 1px solid #2cff72ff;
|
|
608
596
|
}
|
|
609
597
|
|
|
610
|
-
button.success:hover {
|
|
598
|
+
button.nb-success:hover {
|
|
611
599
|
background-color: #26ff67ff;
|
|
612
600
|
border: 1px solid #93ffb7ff;
|
|
613
601
|
}
|
|
614
602
|
|
|
615
|
-
button
|
|
603
|
+
button,
|
|
604
|
+
button.nb-normal {
|
|
616
605
|
background-color: #e0e0e0;
|
|
617
606
|
color: #242424ff;
|
|
618
607
|
border: 1px solid #ddd;
|
|
619
608
|
}
|
|
620
609
|
|
|
621
|
-
button
|
|
610
|
+
button:hover,
|
|
611
|
+
button.nb-normal:hover {
|
|
622
612
|
background-color: #f5f5f5ff;
|
|
623
613
|
border: 1px solid #ffffffff;
|
|
624
614
|
}
|
|
625
615
|
|
|
626
|
-
button.warning {
|
|
616
|
+
button.nb-warning {
|
|
627
617
|
background-color: rgba(241, 132, 7, 1);
|
|
628
618
|
color: white;
|
|
629
619
|
border: 1px solid rgba(248, 142, 42, 1);
|
|
630
620
|
}
|
|
631
621
|
|
|
632
|
-
button.warning:hover {
|
|
622
|
+
button.nb-warning:hover {
|
|
633
623
|
background-color: rgba(240, 162, 16, 1);
|
|
634
624
|
border: 1px solid rgba(255, 184, 53, 1);
|
|
635
625
|
}
|
|
636
626
|
|
|
637
|
-
button.alert {
|
|
627
|
+
button.nb-alert {
|
|
638
628
|
background-color: rgba(233, 30, 23, 1);
|
|
639
629
|
color: white;
|
|
640
630
|
border: 1px solid rgba(248, 49, 42, 1);
|
|
641
631
|
}
|
|
642
632
|
|
|
643
|
-
button.alert:hover {
|
|
633
|
+
button.nb-alert:hover {
|
|
644
634
|
background-color: rgba(248, 44, 44, 1);
|
|
645
635
|
border: 1px solid rgba(255, 76, 76, 1);
|
|
646
636
|
}
|
|
647
637
|
|
|
648
|
-
|
|
638
|
+
.nb-dynamic {
|
|
639
|
+
min-width: unset !important;
|
|
640
|
+
max-width: unset !important;
|
|
641
|
+
}
|
|
642
|
+
|
|
643
|
+
.nb-nowrap {
|
|
644
|
+
text-wrap: nowrap !important;
|
|
645
|
+
}
|
|
646
|
+
|
|
647
|
+
.nb-thin {
|
|
649
648
|
padding: 4px 8px;
|
|
650
649
|
}
|
|
651
650
|
|
|
652
|
-
|
|
653
|
-
padding: 12px 24px;
|
|
651
|
+
.nb-thick {
|
|
652
|
+
padding: 12px 24px !important;
|
|
654
653
|
}
|
|
655
654
|
|
|
656
|
-
|
|
655
|
+
.nb-outline {
|
|
657
656
|
background-color: transparent !important;
|
|
658
657
|
}
|
|
659
658
|
|
|
660
|
-
|
|
659
|
+
.nb-scale:hover {
|
|
661
660
|
transform: scale(1.05);
|
|
662
661
|
}
|
|
663
662
|
|
|
664
|
-
|
|
665
|
-
|
|
663
|
+
.nb-fast {
|
|
664
|
+
transition: all 0.10s !important;
|
|
666
665
|
}
|
|
667
666
|
|
|
668
|
-
.
|
|
669
|
-
transition: all 0.
|
|
667
|
+
.nb-slow {
|
|
668
|
+
transition: all 0.45s !important;
|
|
670
669
|
}
|
|
671
670
|
|
|
672
|
-
.
|
|
673
|
-
transition: all
|
|
671
|
+
.nb-very-slow {
|
|
672
|
+
transition: all 1s !important;
|
|
674
673
|
}
|
|
675
674
|
|
|
676
|
-
.
|
|
677
|
-
|
|
675
|
+
.nb-dark {
|
|
676
|
+
color: white !important;
|
|
678
677
|
}
|
|
679
678
|
|
|
680
|
-
.
|
|
681
|
-
transition: all 1s;
|
|
682
|
-
}
|
|
683
|
-
|
|
684
|
-
.rounded {
|
|
679
|
+
.nb-rounded {
|
|
685
680
|
border-radius: 4px;
|
|
686
681
|
}
|
|
687
682
|
|
|
688
|
-
.sharp {
|
|
689
|
-
border-radius: 0;
|
|
683
|
+
.nb-sharp {
|
|
684
|
+
border-radius: 0 !important;
|
|
690
685
|
}
|
|
691
686
|
|
|
692
687
|
@media screen and (width <= 1024px) {
|
|
@@ -695,8 +690,13 @@ var NButton = class extends i {
|
|
|
695
690
|
}
|
|
696
691
|
}
|
|
697
692
|
`;
|
|
693
|
+
getButtonClasses() {
|
|
694
|
+
let x = [];
|
|
695
|
+
return (this.getAttribute("class")?.split(" ") || []).forEach((j) => {
|
|
696
|
+
j.startsWith("nb-") && x.push(j);
|
|
697
|
+
}), x.join(" ");
|
|
698
|
+
}
|
|
698
699
|
render() {
|
|
699
|
-
let x = (this.variant === "normal" || this.variant === "success") && this.dark ? this.variant === "normal" ? "white" : "#2cff72ff" : "", j = this.variant === "normal" && this.background !== "" ? this.background : null, F = this.borderColor || null, U = this.textColor || null;
|
|
700
700
|
return b`<button
|
|
701
701
|
type="${this.type}"
|
|
702
702
|
?disabled="${this.disabled}"
|
|
@@ -711,8 +711,8 @@ var NButton = class extends i {
|
|
|
711
711
|
aria-label="${this.ariaLabel || ""}"
|
|
712
712
|
aria-describedby="${this.ariaDescribedby || ""}"
|
|
713
713
|
aria-pressed="${this.ariaPressed || ""}"
|
|
714
|
-
class="${this.
|
|
715
|
-
style="${
|
|
714
|
+
class="${this.getButtonClasses()}"
|
|
715
|
+
style="${this.style}">
|
|
716
716
|
<slot></slot>
|
|
717
717
|
</button>`;
|
|
718
718
|
}
|
|
@@ -720,14 +720,10 @@ var NButton = class extends i {
|
|
|
720
720
|
NButton = __decorate([t("n-button")], NButton);
|
|
721
721
|
var NCopy = class extends i {
|
|
722
722
|
constructor(...x) {
|
|
723
|
-
super(...x), this.
|
|
723
|
+
super(...x), this.copy = "", this.id = "", this.name = "", this.disabled = !1, this.ariaLabel = "", this.ariaDescribedby = "", this.ariaPressed = "", this.colorChanging = !1, this.colorToChangeTo = "";
|
|
724
724
|
}
|
|
725
725
|
static #e = this.properties = {
|
|
726
|
-
dark: { type: Boolean },
|
|
727
726
|
copy: { type: String },
|
|
728
|
-
position: { type: String },
|
|
729
|
-
background: { type: String },
|
|
730
|
-
size: { type: String },
|
|
731
727
|
id: { type: String },
|
|
732
728
|
style: { type: String },
|
|
733
729
|
name: { type: String },
|
|
@@ -747,50 +743,94 @@ var NCopy = class extends i {
|
|
|
747
743
|
};
|
|
748
744
|
static #t = this.styles = i$1`
|
|
749
745
|
.copy-button {
|
|
746
|
+
z-index: 9999;
|
|
747
|
+
background: transparent;
|
|
748
|
+
border: none;
|
|
750
749
|
display: block;
|
|
750
|
+
position: unset;
|
|
751
751
|
cursor: pointer;
|
|
752
752
|
user-select: none;
|
|
753
753
|
padding: 4px;
|
|
754
754
|
border-radius: 4px;
|
|
755
|
+
color: black;
|
|
756
|
+
}
|
|
757
|
+
|
|
758
|
+
.copy-button.dark {
|
|
759
|
+
color: white;
|
|
755
760
|
}
|
|
756
761
|
|
|
757
762
|
.copy-button:active {
|
|
758
763
|
scale: 0.90;
|
|
759
764
|
}
|
|
765
|
+
|
|
766
|
+
.copy-button.nc-tr {
|
|
767
|
+
position: absolute !important;
|
|
768
|
+
top: 0;
|
|
769
|
+
right: 0;
|
|
770
|
+
}
|
|
771
|
+
|
|
772
|
+
.copy-button.nc-tl {
|
|
773
|
+
position: absolute !important;
|
|
774
|
+
top: 0;
|
|
775
|
+
left: 0;
|
|
776
|
+
}
|
|
777
|
+
|
|
778
|
+
.copy-button.nc-t {
|
|
779
|
+
position: absolute !important;
|
|
780
|
+
top: 0;
|
|
781
|
+
right: 50%;
|
|
782
|
+
transform: translateX(-50%);
|
|
783
|
+
}
|
|
784
|
+
|
|
785
|
+
.copy-button.nc-br {
|
|
786
|
+
position: absolute !important;
|
|
787
|
+
bottom: 0;
|
|
788
|
+
right: 0;
|
|
789
|
+
}
|
|
790
|
+
|
|
791
|
+
.copy-button.nc-bl {
|
|
792
|
+
position: absolute !important;
|
|
793
|
+
bottom: 0;
|
|
794
|
+
left: 0;
|
|
795
|
+
}
|
|
796
|
+
|
|
797
|
+
.copy-button.nc-b {
|
|
798
|
+
position: absolute !important;
|
|
799
|
+
bottom: 0;
|
|
800
|
+
right: 50%;
|
|
801
|
+
transform: translateX(-50%);
|
|
802
|
+
}
|
|
803
|
+
|
|
804
|
+
.copy-button.nc-r {
|
|
805
|
+
position: absolute !important;
|
|
806
|
+
right: 0;
|
|
807
|
+
top: 50%;
|
|
808
|
+
transform: translateY(-50%);
|
|
809
|
+
}
|
|
810
|
+
|
|
811
|
+
.copy-button.nc-l {
|
|
812
|
+
position: absolute !important;
|
|
813
|
+
left: 0;
|
|
814
|
+
top: 50%;
|
|
815
|
+
transform: translateY(-50%);
|
|
816
|
+
}
|
|
817
|
+
|
|
818
|
+
.copy-button.nc-dark {
|
|
819
|
+
color: white;
|
|
820
|
+
}
|
|
760
821
|
`;
|
|
822
|
+
getButtonClasses() {
|
|
823
|
+
let x = [];
|
|
824
|
+
return (this.getAttribute("class")?.split(" ") || []).forEach((j) => {
|
|
825
|
+
if (j.startsWith("nc-") && (x.push(j), j.endsWith("]"))) {
|
|
826
|
+
let x = j.match(/\[([^\]]+)\]/);
|
|
827
|
+
x && (this.colorToChangeTo = x[1]);
|
|
828
|
+
}
|
|
829
|
+
}), x.join(" ");
|
|
830
|
+
}
|
|
761
831
|
render() {
|
|
762
|
-
let x = "16px"
|
|
763
|
-
|
|
764
|
-
case "top right":
|
|
765
|
-
j = "position: absolute; top: 0; right: 0;";
|
|
766
|
-
break;
|
|
767
|
-
case "bottom right":
|
|
768
|
-
j = "position: absolute; bottom: 0; right: 0;";
|
|
769
|
-
break;
|
|
770
|
-
case "top left":
|
|
771
|
-
j = "position: absolute; top: 0; left: 0;";
|
|
772
|
-
break;
|
|
773
|
-
case "bottom left":
|
|
774
|
-
j = "position: absolute; bottom: 0; left: 0;";
|
|
775
|
-
break;
|
|
776
|
-
case "top":
|
|
777
|
-
j = "position: absolute; top: 0; right: 50%; transform: translateX(-50%);";
|
|
778
|
-
break;
|
|
779
|
-
case "bottom":
|
|
780
|
-
j = "position: absolute; bottom: 0; right: 50%; transform: translateX(-50%);";
|
|
781
|
-
break;
|
|
782
|
-
case "left":
|
|
783
|
-
j = "position: absolute; left: 0; top: 50%; transform: translateY(-50%);";
|
|
784
|
-
break;
|
|
785
|
-
case "right":
|
|
786
|
-
j = "position: absolute; right: 0; top: 50%; transform: translateY(-50%);";
|
|
787
|
-
break;
|
|
788
|
-
case "block":
|
|
789
|
-
default:
|
|
790
|
-
j = "position: unset;";
|
|
791
|
-
break;
|
|
792
|
-
}
|
|
793
|
-
return b`<div
|
|
832
|
+
let x = "16px";
|
|
833
|
+
return this.classList.contains("nc-medium") ? x = "24px" : this.classList.contains("nc-large") && (x = "32px"), b`<button
|
|
794
834
|
?disabled="${this.disabled}"
|
|
795
835
|
id="${this.id || ""}"
|
|
796
836
|
@click="${this.handleCopy}"
|
|
@@ -799,16 +839,66 @@ var NCopy = class extends i {
|
|
|
799
839
|
aria-label="${this.ariaLabel || ""}"
|
|
800
840
|
aria-describedby="${this.ariaDescribedby || ""}"
|
|
801
841
|
aria-pressed="${this.ariaPressed || ""}"
|
|
802
|
-
class="copy-button"
|
|
803
|
-
style="${
|
|
804
|
-
<svg xmlns="http://www.w3.org/2000/svg" height="
|
|
842
|
+
class="copy-button ${this.getButtonClasses()}"
|
|
843
|
+
style="${this.style}">
|
|
844
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="${x}" viewBox="0 -960 960 960" width="${x}" fill="currentColor">
|
|
805
845
|
<path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"/>
|
|
806
846
|
</svg>
|
|
807
|
-
</
|
|
847
|
+
</button>`;
|
|
808
848
|
}
|
|
809
849
|
handleCopy() {
|
|
810
|
-
|
|
850
|
+
let x = this.shadowRoot?.querySelector(".copy-button");
|
|
851
|
+
this.colorChanging || (this.colorChanging = !0, this.colorToChangeTo !== "" && x && (x.style.color = this.colorToChangeTo), navigator.clipboard.writeText(this.copy), setTimeout(() => {
|
|
852
|
+
x && (x.style.color = ""), this.colorChanging = !1;
|
|
853
|
+
}, 2e3));
|
|
811
854
|
}
|
|
812
855
|
};
|
|
813
856
|
NCopy = __decorate([t("n-copy")], NCopy);
|
|
857
|
+
var padding = 10, maxTooltipLength = 30;
|
|
858
|
+
if (!document.querySelector("style[data-tooltip]")) {
|
|
859
|
+
let x = document.createElement("style");
|
|
860
|
+
x.setAttribute("data-tooltip", "true"), x.textContent = "\n .tooltip {\n font-family: system-ui, sans-serif;\n text-wrap: nowrap;\n z-index: 9999999999;\n font-size: 1rem;\n transition: opacity 0.25s ease-in-out;\n pointer-events: none;\n opacity: 0;\n position: fixed;\n background: white;\n color: black;\n outline: 1px solid black;\n padding: 4px 8px;\n font-weight: 400;\n border-radius: 5px;\n max-width: 300px;\n }\n\n .tooltip.nt-dark {\n background: #1e1e1e;\n color: #ffffff;\n outline: 1px solid #444444;\n }\n\n .tooltip.nt-fast {\n transition: opacity 0.15s ease-in-out;\n }\n\n .tooltip.nt-slow {\n transition: opacity 0.5s ease-in-out;\n }\n\n .tooltip.nt-very-slow {\n transition: opacity 1s ease-in-out;\n }\n ", document.head.appendChild(x);
|
|
861
|
+
}
|
|
862
|
+
function findAllNClasses(x) {
|
|
863
|
+
let j = x.split(" "), F = [];
|
|
864
|
+
return j.forEach((x) => {
|
|
865
|
+
x.startsWith("nt-") && F.push(x);
|
|
866
|
+
}), F;
|
|
867
|
+
}
|
|
868
|
+
function showTooltip(x, j, F, U) {
|
|
869
|
+
if (j) {
|
|
870
|
+
let W = x, G = document.createElement("div");
|
|
871
|
+
G.classList.add("tooltip"), findAllNClasses(W.classList.toString()).forEach((x) => {
|
|
872
|
+
G.classList.add(x);
|
|
873
|
+
}), G.innerHTML = j, j.length >= maxTooltipLength && (G.style.textWrap = "pretty"), G.style.top = `${U - 35 - padding}px`, G.style.left = `${F - 35}px`, document.body.appendChild(G);
|
|
874
|
+
let K = (x) => {
|
|
875
|
+
G.style.top = `${x.clientY - 35 - padding}px`, G.style.left = `${x.clientX - 35}px`;
|
|
876
|
+
};
|
|
877
|
+
W.addEventListener("mousemove", K);
|
|
878
|
+
let q = () => {
|
|
879
|
+
W.removeEventListener("mousemove", K), W.removeEventListener("mouseleave", q), document.removeEventListener("scroll", q, !0), G.style.opacity = "0", setTimeout(() => {
|
|
880
|
+
G.parentElement && G.remove();
|
|
881
|
+
}, 160);
|
|
882
|
+
};
|
|
883
|
+
setTimeout(() => {
|
|
884
|
+
G && (G.style.opacity = "1");
|
|
885
|
+
}, 10), W.addEventListener("mouseleave", q), document.addEventListener("scroll", q, !0), W.addEventListener("focusout", function j() {
|
|
886
|
+
x.classList.contains("focus-hint") && (G.style.opacity = "0", setTimeout(() => {
|
|
887
|
+
G.remove(), W.removeEventListener("mouseleave", j);
|
|
888
|
+
}, 160));
|
|
889
|
+
});
|
|
890
|
+
}
|
|
891
|
+
}
|
|
892
|
+
function initializeTooltips() {
|
|
893
|
+
document.addEventListener("mouseenter", (x) => {
|
|
894
|
+
let j = x.target, F = x;
|
|
895
|
+
j instanceof HTMLElement && j.hasAttribute("n-tooltip") && showTooltip(j, j.getAttribute("n-tooltip"), F.clientX, F.clientY);
|
|
896
|
+
}, !0), document.addEventListener("touchstart", (x) => {
|
|
897
|
+
let j = x.target, F = x.touches[0];
|
|
898
|
+
j instanceof HTMLElement && j.hasAttribute("n-tooltip") && showTooltip(j, j.getAttribute("n-tooltip"), F.clientX, F.clientY);
|
|
899
|
+
}, !0), document.addEventListener("mouseleave", (x) => {
|
|
900
|
+
x.target;
|
|
901
|
+
});
|
|
902
|
+
}
|
|
903
|
+
document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", initializeTooltips) : initializeTooltips();
|
|
814
904
|
export { NButton, NCopy };
|
package/dist/n-components.umd.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.nComponents={}))})(this,function(e){var t=globalThis,n=t.ShadowRoot&&(t.ShadyCSS===void 0||t.ShadyCSS.nativeShadow)&&`adoptedStyleSheets`in Document.prototype&&`replace`in CSSStyleSheet.prototype,r=Symbol(),i=new WeakMap,a=class{constructor(e,t,n){if(this._$cssResult$=!0,n!==r)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o,t=this.t;if(n&&e===void 0){let n=t!==void 0&&t.length===1;n&&(e=i.get(t)),e===void 0&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),n&&i.set(t,e))}return e}toString(){return this.cssText}},o=e=>new a(typeof e==`string`?e:e+``,void 0,r),s=(e,...t)=>new a(e.length===1?e[0]:t.reduce((t,n,r)=>t+(e=>{if(!0===e._$cssResult$)return e.cssText;if(typeof e==`number`)return e;throw Error(`Value passed to 'css' function must be a 'css' function result: `+e+`. Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.`)})(n)+e[r+1],e[0]),e,r),c=(e,r)=>{if(n)e.adoptedStyleSheets=r.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(let n of r){let r=document.createElement(`style`),i=t.litNonce;i!==void 0&&r.setAttribute(`nonce`,i),r.textContent=n.cssText,e.appendChild(r)}},l=n?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t=``;for(let n of e.cssRules)t+=n.cssText;return o(t)})(e):e,{is:u,defineProperty:d,getOwnPropertyDescriptor:ee,getOwnPropertyNames:te,getOwnPropertySymbols:ne,getPrototypeOf:re}=Object,f=globalThis,p=f.trustedTypes,ie=p?p.emptyScript:``,ae=f.reactiveElementPolyfillSupport,m=(e,t)=>e,h={toAttribute(e,t){switch(t){case Boolean:e=e?ie:null;break;case Object:case Array:e=e==null?e:JSON.stringify(e)}return e},fromAttribute(e,t){let n=e;switch(t){case Boolean:n=e!==null;break;case Number:n=e===null?null:Number(e);break;case Object:case Array:try{n=JSON.parse(e)}catch{n=null}}return n}},
|
|
2
|
-
\f\r]`,
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.nComponents={}))})(this,function(e){var t=globalThis,n=t.ShadowRoot&&(t.ShadyCSS===void 0||t.ShadyCSS.nativeShadow)&&`adoptedStyleSheets`in Document.prototype&&`replace`in CSSStyleSheet.prototype,r=Symbol(),i=new WeakMap,a=class{constructor(e,t,n){if(this._$cssResult$=!0,n!==r)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o,t=this.t;if(n&&e===void 0){let n=t!==void 0&&t.length===1;n&&(e=i.get(t)),e===void 0&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),n&&i.set(t,e))}return e}toString(){return this.cssText}},o=e=>new a(typeof e==`string`?e:e+``,void 0,r),s=(e,...t)=>new a(e.length===1?e[0]:t.reduce((t,n,r)=>t+(e=>{if(!0===e._$cssResult$)return e.cssText;if(typeof e==`number`)return e;throw Error(`Value passed to 'css' function must be a 'css' function result: `+e+`. Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.`)})(n)+e[r+1],e[0]),e,r),c=(e,r)=>{if(n)e.adoptedStyleSheets=r.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(let n of r){let r=document.createElement(`style`),i=t.litNonce;i!==void 0&&r.setAttribute(`nonce`,i),r.textContent=n.cssText,e.appendChild(r)}},l=n?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t=``;for(let n of e.cssRules)t+=n.cssText;return o(t)})(e):e,{is:u,defineProperty:d,getOwnPropertyDescriptor:ee,getOwnPropertyNames:te,getOwnPropertySymbols:ne,getPrototypeOf:re}=Object,f=globalThis,p=f.trustedTypes,ie=p?p.emptyScript:``,ae=f.reactiveElementPolyfillSupport,m=(e,t)=>e,h={toAttribute(e,t){switch(t){case Boolean:e=e?ie:null;break;case Object:case Array:e=e==null?e:JSON.stringify(e)}return e},fromAttribute(e,t){let n=e;switch(t){case Boolean:n=e!==null;break;case Number:n=e===null?null:Number(e);break;case Object:case Array:try{n=JSON.parse(e)}catch{n=null}}return n}},oe=(e,t)=>!u(e,t),g={attribute:!0,type:String,converter:h,reflect:!1,useDefault:!1,hasChanged:oe};Symbol.metadata??=Symbol(`metadata`),f.litPropertyMetadata??=new WeakMap;var _=class extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=g){if(t.state&&(t.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(e)&&((t=Object.create(t)).wrapped=!0),this.elementProperties.set(e,t),!t.noAccessor){let n=Symbol(),r=this.getPropertyDescriptor(e,n,t);r!==void 0&&d(this.prototype,e,r)}}static getPropertyDescriptor(e,t,n){let{get:r,set:i}=ee(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};return{get:r,set(t){let a=r?.call(this);i?.call(this,t),this.requestUpdate(e,a,n)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??g}static _$Ei(){if(this.hasOwnProperty(m(`elementProperties`)))return;let e=re(this);e.finalize(),e.l!==void 0&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(m(`finalized`)))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(m(`properties`))){let e=this.properties,t=[...te(e),...ne(e)];for(let n of t)this.createProperty(n,e[n])}let e=this[Symbol.metadata];if(e!==null){let t=litPropertyMetadata.get(e);if(t!==void 0)for(let[e,n]of t)this.elementProperties.set(e,n)}this._$Eh=new Map;for(let[e,t]of this.elementProperties){let n=this._$Eu(e,t);n!==void 0&&this._$Eh.set(n,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){let t=[];if(Array.isArray(e)){let n=new Set(e.flat(1/0).reverse());for(let e of n)t.unshift(l(e))}else e!==void 0&&t.push(l(e));return t}static _$Eu(e,t){let n=t.attribute;return!1===n?void 0:typeof n==`string`?n:typeof e==`string`?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(e=>e(this))}addController(e){(this._$EO??=new Set).add(e),this.renderRoot!==void 0&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){let e=new Map,t=this.constructor.elementProperties;for(let n of t.keys())this.hasOwnProperty(n)&&(e.set(n,this[n]),delete this[n]);e.size>0&&(this._$Ep=e)}createRenderRoot(){let e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return c(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(e=>e.hostConnected?.())}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach(e=>e.hostDisconnected?.())}attributeChangedCallback(e,t,n){this._$AK(e,n)}_$ET(e,t){let n=this.constructor.elementProperties.get(e),r=this.constructor._$Eu(e,n);if(r!==void 0&&!0===n.reflect){let i=(n.converter?.toAttribute===void 0?h:n.converter).toAttribute(t,n.type);this._$Em=e,i==null?this.removeAttribute(r):this.setAttribute(r,i),this._$Em=null}}_$AK(e,t){let n=this.constructor,r=n._$Eh.get(e);if(r!==void 0&&this._$Em!==r){let e=n.getPropertyOptions(r),i=typeof e.converter==`function`?{fromAttribute:e.converter}:e.converter?.fromAttribute===void 0?h:e.converter;this._$Em=r;let a=i.fromAttribute(t,e.type);this[r]=a??this._$Ej?.get(r)??a,this._$Em=null}}requestUpdate(e,t,n,r=!1,i){if(e!==void 0){let a=this.constructor;if(!1===r&&(i=this[e]),n??=a.getPropertyOptions(e),!((n.hasChanged??oe)(i,t)||n.useDefault&&n.reflect&&i===this._$Ej?.get(e)&&!this.hasAttribute(a._$Eu(e,n))))return;this.C(e,t,n)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(e,t,{useDefault:n,reflect:r,wrapped:i},a){n&&!(this._$Ej??=new Map).has(e)&&(this._$Ej.set(e,a??t??this[e]),!0!==i||a!==void 0)||(this._$AL.has(e)||(this.hasUpdated||n||(t=void 0),this._$AL.set(e,t)),!0===r&&this._$Em!==e&&(this._$Eq??=new Set).add(e))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}let e=this.scheduleUpdate();return e!=null&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(let[e,t]of this._$Ep)this[e]=t;this._$Ep=void 0}let e=this.constructor.elementProperties;if(e.size>0)for(let[t,n]of e){let{wrapped:e}=n,r=this[t];!0!==e||this._$AL.has(t)||r===void 0||this.C(t,void 0,n,r)}}let e=!1,t=this._$AL;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),this._$EO?.forEach(e=>e.hostUpdate?.()),this.update(t)):this._$EM()}catch(t){throw e=!1,this._$EM(),t}e&&this._$AE(t)}willUpdate(e){}_$AE(e){this._$EO?.forEach(e=>e.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Eq&&=this._$Eq.forEach(e=>this._$ET(e,this[e])),this._$EM()}updated(e){}firstUpdated(e){}};_.elementStyles=[],_.shadowRootOptions={mode:`open`},_[m(`elementProperties`)]=new Map,_[m(`finalized`)]=new Map,ae?.({ReactiveElement:_}),(f.reactiveElementVersions??=[]).push(`2.1.2`);var v=globalThis,y=e=>e,b=v.trustedTypes,x=b?b.createPolicy(`lit-html`,{createHTML:e=>e}):void 0,S=`$lit$`,C=`lit$${Math.random().toFixed(9).slice(2)}$`,w=`?`+C,se=`<${w}>`,T=document,E=()=>T.createComment(``),D=e=>e===null||typeof e!=`object`&&typeof e!=`function`,O=Array.isArray,ce=e=>O(e)||typeof e?.[Symbol.iterator]==`function`,k=`[
|
|
2
|
+
\f\r]`,A=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,j=/-->/g,M=/>/g,N=RegExp(`>|${k}(?:([^\\s"'>=/]+)(${k}*=${k}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,`g`),P=/'/g,F=/"/g,I=/^(?:script|style|textarea|title)$/i,L=(e=>(t,...n)=>({_$litType$:e,strings:t,values:n}))(1),R=Symbol.for(`lit-noChange`),z=Symbol.for(`lit-nothing`),B=new WeakMap,V=T.createTreeWalker(T,129);function H(e,t){if(!O(e)||!e.hasOwnProperty(`raw`))throw Error(`invalid template strings array`);return x===void 0?t:x.createHTML(t)}var le=(e,t)=>{let n=e.length-1,r=[],i,a=t===2?`<svg>`:t===3?`<math>`:``,o=A;for(let t=0;t<n;t++){let n=e[t],s,c,l=-1,u=0;for(;u<n.length&&(o.lastIndex=u,c=o.exec(n),c!==null);)u=o.lastIndex,o===A?c[1]===`!--`?o=j:c[1]===void 0?c[2]===void 0?c[3]!==void 0&&(o=N):(I.test(c[2])&&(i=RegExp(`</`+c[2],`g`)),o=N):o=M:o===N?c[0]===`>`?(o=i??A,l=-1):c[1]===void 0?l=-2:(l=o.lastIndex-c[2].length,s=c[1],o=c[3]===void 0?N:c[3]===`"`?F:P):o===F||o===P?o=N:o===j||o===M?o=A:(o=N,i=void 0);let d=o===N&&e[t+1].startsWith(`/>`)?` `:``;a+=o===A?n+se:l>=0?(r.push(s),n.slice(0,l)+S+n.slice(l)+C+d):n+C+(l===-2?t:d)}return[H(e,a+(e[n]||`<?>`)+(t===2?`</svg>`:t===3?`</math>`:``)),r]},U=class e{constructor({strings:t,_$litType$:n},r){let i;this.parts=[];let a=0,o=0,s=t.length-1,c=this.parts,[l,u]=le(t,n);if(this.el=e.createElement(l,r),V.currentNode=this.el.content,n===2||n===3){let e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;(i=V.nextNode())!==null&&c.length<s;){if(i.nodeType===1){if(i.hasAttributes())for(let e of i.getAttributeNames())if(e.endsWith(S)){let t=u[o++],n=i.getAttribute(e).split(C),r=/([.?@])?(.*)/.exec(t);c.push({type:1,index:a,name:r[2],strings:n,ctor:r[1]===`.`?de:r[1]===`?`?fe:r[1]===`@`?pe:K}),i.removeAttribute(e)}else e.startsWith(C)&&(c.push({type:6,index:a}),i.removeAttribute(e));if(I.test(i.tagName)){let e=i.textContent.split(C),t=e.length-1;if(t>0){i.textContent=b?b.emptyScript:``;for(let n=0;n<t;n++)i.append(e[n],E()),V.nextNode(),c.push({type:2,index:++a});i.append(e[t],E())}}}else if(i.nodeType===8)if(i.data===w)c.push({type:2,index:a});else{let e=-1;for(;(e=i.data.indexOf(C,e+1))!==-1;)c.push({type:7,index:a}),e+=C.length-1}a++}}static createElement(e,t){let n=T.createElement(`template`);return n.innerHTML=e,n}};function W(e,t,n=e,r){if(t===R)return t;let i=r===void 0?n._$Cl:n._$Co?.[r],a=D(t)?void 0:t._$litDirective$;return i?.constructor!==a&&(i?._$AO?.(!1),a===void 0?i=void 0:(i=new a(e),i._$AT(e,n,r)),r===void 0?n._$Cl=i:(n._$Co??=[])[r]=i),i!==void 0&&(t=W(e,i._$AS(e,t.values),i,r)),t}var ue=class{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){let{el:{content:t},parts:n}=this._$AD,r=(e?.creationScope??T).importNode(t,!0);V.currentNode=r;let i=V.nextNode(),a=0,o=0,s=n[0];for(;s!==void 0;){if(a===s.index){let t;s.type===2?t=new G(i,i.nextSibling,this,e):s.type===1?t=new s.ctor(i,s.name,s.strings,this,e):s.type===6&&(t=new me(i,this,e)),this._$AV.push(t),s=n[++o]}a!==s?.index&&(i=V.nextNode(),a++)}return V.currentNode=T,r}p(e){let t=0;for(let n of this._$AV)n!==void 0&&(n.strings===void 0?n._$AI(e[t]):(n._$AI(e,n,t),t+=n.strings.length-2)),t++}},G=class e{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,n,r){this.type=2,this._$AH=z,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=n,this.options=r,this._$Cv=r?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode,t=this._$AM;return t!==void 0&&e?.nodeType===11&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=W(this,e,t),D(e)?e===z||e==null||e===``?(this._$AH!==z&&this._$AR(),this._$AH=z):e!==this._$AH&&e!==R&&this._(e):e._$litType$===void 0?e.nodeType===void 0?ce(e)?this.k(e):this._(e):this.T(e):this.$(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==z&&D(this._$AH)?this._$AA.nextSibling.data=e:this.T(T.createTextNode(e)),this._$AH=e}$(e){let{values:t,_$litType$:n}=e,r=typeof n==`number`?this._$AC(e):(n.el===void 0&&(n.el=U.createElement(H(n.h,n.h[0]),this.options)),n);if(this._$AH?._$AD===r)this._$AH.p(t);else{let e=new ue(r,this),n=e.u(this.options);e.p(t),this.T(n),this._$AH=e}}_$AC(e){let t=B.get(e.strings);return t===void 0&&B.set(e.strings,t=new U(e)),t}k(t){O(this._$AH)||(this._$AH=[],this._$AR());let n=this._$AH,r,i=0;for(let a of t)i===n.length?n.push(r=new e(this.O(E()),this.O(E()),this,this.options)):r=n[i],r._$AI(a),i++;i<n.length&&(this._$AR(r&&r._$AB.nextSibling,i),n.length=i)}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(!1,!0,t);e!==this._$AB;){let t=y(e).nextSibling;y(e).remove(),e=t}}setConnected(e){this._$AM===void 0&&(this._$Cv=e,this._$AP?.(e))}},K=class{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,n,r,i){this.type=1,this._$AH=z,this._$AN=void 0,this.element=e,this.name=t,this._$AM=r,this.options=i,n.length>2||n[0]!==``||n[1]!==``?(this._$AH=Array(n.length-1).fill(new String),this.strings=n):this._$AH=z}_$AI(e,t=this,n,r){let i=this.strings,a=!1;if(i===void 0)e=W(this,e,t,0),a=!D(e)||e!==this._$AH&&e!==R,a&&(this._$AH=e);else{let r=e,o,s;for(e=i[0],o=0;o<i.length-1;o++)s=W(this,r[n+o],t,o),s===R&&(s=this._$AH[o]),a||=!D(s)||s!==this._$AH[o],s===z?e=z:e!==z&&(e+=(s??``)+i[o+1]),this._$AH[o]=s}a&&!r&&this.j(e)}j(e){e===z?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??``)}},de=class extends K{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===z?void 0:e}},fe=class extends K{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==z)}},pe=class extends K{constructor(e,t,n,r,i){super(e,t,n,r,i),this.type=5}_$AI(e,t=this){if((e=W(this,e,t,0)??z)===R)return;let n=this._$AH,r=e===z&&n!==z||e.capture!==n.capture||e.once!==n.once||e.passive!==n.passive,i=e!==z&&(n===z||r);r&&this.element.removeEventListener(this.name,this,n),i&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){typeof this._$AH==`function`?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}},me=class{constructor(e,t,n){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=n}get _$AU(){return this._$AM._$AU}_$AI(e){W(this,e)}},he=v.litHtmlPolyfillSupport;he?.(U,G),(v.litHtmlVersions??=[]).push(`3.3.2`);var ge=(e,t,n)=>{let r=n?.renderBefore??t,i=r._$litPart$;if(i===void 0){let e=n?.renderBefore??null;r._$litPart$=i=new G(t.insertBefore(E(),e),e,void 0,n??{})}return i._$AI(e),i},q=globalThis,J=class extends _{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){let e=super.createRenderRoot();return this.renderOptions.renderBefore??=e.firstChild,e}update(e){let t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=ge(t,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return R}};J._$litElement$=!0,J.finalized=!0,q.litElementHydrateSupport?.({LitElement:J});var _e=q.litElementPolyfillSupport;_e?.({LitElement:J}),(q.litElementVersions??=[]).push(`4.2.2`);var Y=e=>(t,n)=>{n===void 0?customElements.define(e,t):n.addInitializer(()=>{customElements.define(e,t)})};function X(e,t,n,r){var i=arguments.length,a=i<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,n):r,o;if(typeof Reflect==`object`&&typeof Reflect.decorate==`function`)a=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}var Z=class extends J{constructor(...e){super(...e),this.type=`button`,this.id=``,this.name=``,this.disabled=!1,this.form=``,this.formaction=``,this.formmethod=``,this.formnovalidate=!1,this.formtarget=``,this.title=``,this.ariaLabel=``,this.ariaDescribedby=``,this.ariaPressed=``,this.background=``,this.borderColor=``,this.textColor=``}static#e=this.properties={style:{type:String},type:{type:String},id:{type:String},name:{type:String},disabled:{type:Boolean},form:{type:String},formaction:{type:String},formmethod:{type:String},formnovalidate:{type:Boolean},formtarget:{type:String},title:{type:String},ariaLabel:{type:String,attribute:`aria-label`},ariaDescribedby:{type:String,attribute:`aria-describedby`},ariaPressed:{type:String,attribute:`aria-pressed`}};static#t=this.styles=s`
|
|
3
3
|
button {
|
|
4
4
|
padding: 8px 16px;
|
|
5
5
|
border: none;
|
|
@@ -7,114 +7,122 @@
|
|
|
7
7
|
font-size: 14px;
|
|
8
8
|
font-weight: 400;
|
|
9
9
|
border-radius: 2px;
|
|
10
|
-
transition: all;
|
|
11
|
-
animation-duration: 0.3s;
|
|
10
|
+
transition: all 0.25s;
|
|
12
11
|
min-width: 100px;
|
|
12
|
+
max-width: 200px;
|
|
13
|
+
text-wrap: pretty;
|
|
13
14
|
user-select: none;
|
|
14
15
|
}
|
|
15
16
|
|
|
16
|
-
button:not(.dont-punch):active {
|
|
17
|
+
button:not(.nb-dp):not(.nb-dont-punch):active {
|
|
17
18
|
transition: transform 0.15s linear;
|
|
18
19
|
scale: 0.97;
|
|
19
20
|
}
|
|
20
21
|
|
|
21
|
-
button.info {
|
|
22
|
+
button.nb-info {
|
|
22
23
|
background-color: #007bff;
|
|
23
24
|
color: white;
|
|
24
25
|
border: 1px solid #2c92ffff;
|
|
25
26
|
}
|
|
26
27
|
|
|
27
|
-
button.info:hover {
|
|
28
|
+
button.nb-info:hover {
|
|
28
29
|
background-color: #268fffff;
|
|
29
30
|
border: 1px solid #4da3ffff;
|
|
30
31
|
}
|
|
31
32
|
|
|
32
|
-
button.success {
|
|
33
|
+
button.nb-success {
|
|
33
34
|
background-color: #00ff55ff;
|
|
34
35
|
color: #242424ff;
|
|
35
36
|
border: 1px solid #2cff72ff;
|
|
36
37
|
}
|
|
37
38
|
|
|
38
|
-
button.success:hover {
|
|
39
|
+
button.nb-success:hover {
|
|
39
40
|
background-color: #26ff67ff;
|
|
40
41
|
border: 1px solid #93ffb7ff;
|
|
41
42
|
}
|
|
42
43
|
|
|
43
|
-
button
|
|
44
|
+
button,
|
|
45
|
+
button.nb-normal {
|
|
44
46
|
background-color: #e0e0e0;
|
|
45
47
|
color: #242424ff;
|
|
46
48
|
border: 1px solid #ddd;
|
|
47
49
|
}
|
|
48
50
|
|
|
49
|
-
button
|
|
51
|
+
button:hover,
|
|
52
|
+
button.nb-normal:hover {
|
|
50
53
|
background-color: #f5f5f5ff;
|
|
51
54
|
border: 1px solid #ffffffff;
|
|
52
55
|
}
|
|
53
56
|
|
|
54
|
-
button.warning {
|
|
57
|
+
button.nb-warning {
|
|
55
58
|
background-color: rgba(241, 132, 7, 1);
|
|
56
59
|
color: white;
|
|
57
60
|
border: 1px solid rgba(248, 142, 42, 1);
|
|
58
61
|
}
|
|
59
62
|
|
|
60
|
-
button.warning:hover {
|
|
63
|
+
button.nb-warning:hover {
|
|
61
64
|
background-color: rgba(240, 162, 16, 1);
|
|
62
65
|
border: 1px solid rgba(255, 184, 53, 1);
|
|
63
66
|
}
|
|
64
67
|
|
|
65
|
-
button.alert {
|
|
68
|
+
button.nb-alert {
|
|
66
69
|
background-color: rgba(233, 30, 23, 1);
|
|
67
70
|
color: white;
|
|
68
71
|
border: 1px solid rgba(248, 49, 42, 1);
|
|
69
72
|
}
|
|
70
73
|
|
|
71
|
-
button.alert:hover {
|
|
74
|
+
button.nb-alert:hover {
|
|
72
75
|
background-color: rgba(248, 44, 44, 1);
|
|
73
76
|
border: 1px solid rgba(255, 76, 76, 1);
|
|
74
77
|
}
|
|
75
78
|
|
|
76
|
-
|
|
79
|
+
.nb-dynamic {
|
|
80
|
+
min-width: unset !important;
|
|
81
|
+
max-width: unset !important;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.nb-nowrap {
|
|
85
|
+
text-wrap: nowrap !important;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.nb-thin {
|
|
77
89
|
padding: 4px 8px;
|
|
78
90
|
}
|
|
79
91
|
|
|
80
|
-
|
|
81
|
-
padding: 12px 24px;
|
|
92
|
+
.nb-thick {
|
|
93
|
+
padding: 12px 24px !important;
|
|
82
94
|
}
|
|
83
95
|
|
|
84
|
-
|
|
96
|
+
.nb-outline {
|
|
85
97
|
background-color: transparent !important;
|
|
86
98
|
}
|
|
87
99
|
|
|
88
|
-
|
|
100
|
+
.nb-scale:hover {
|
|
89
101
|
transform: scale(1.05);
|
|
90
102
|
}
|
|
91
103
|
|
|
92
|
-
|
|
93
|
-
|
|
104
|
+
.nb-fast {
|
|
105
|
+
transition: all 0.10s !important;
|
|
94
106
|
}
|
|
95
107
|
|
|
96
|
-
.
|
|
97
|
-
transition: all 0.
|
|
108
|
+
.nb-slow {
|
|
109
|
+
transition: all 0.45s !important;
|
|
98
110
|
}
|
|
99
111
|
|
|
100
|
-
.
|
|
101
|
-
transition: all
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
.animation-slow {
|
|
105
|
-
transition: all 0.45s;
|
|
112
|
+
.nb-very-slow {
|
|
113
|
+
transition: all 1s !important;
|
|
106
114
|
}
|
|
107
115
|
|
|
108
|
-
.
|
|
109
|
-
|
|
116
|
+
.nb-dark {
|
|
117
|
+
color: white !important;
|
|
110
118
|
}
|
|
111
119
|
|
|
112
|
-
.rounded {
|
|
120
|
+
.nb-rounded {
|
|
113
121
|
border-radius: 4px;
|
|
114
122
|
}
|
|
115
123
|
|
|
116
|
-
.sharp {
|
|
117
|
-
border-radius: 0;
|
|
124
|
+
.nb-sharp {
|
|
125
|
+
border-radius: 0 !important;
|
|
118
126
|
}
|
|
119
127
|
|
|
120
128
|
@media screen and (width <= 1024px) {
|
|
@@ -122,7 +130,7 @@
|
|
|
122
130
|
font-size: 12px;
|
|
123
131
|
}
|
|
124
132
|
}
|
|
125
|
-
`;
|
|
133
|
+
`;getButtonClasses(){let e=[];return(this.getAttribute(`class`)?.split(` `)||[]).forEach(t=>{t.startsWith(`nb-`)&&e.push(t)}),e.join(` `)}render(){return L`<button
|
|
126
134
|
type="${this.type}"
|
|
127
135
|
?disabled="${this.disabled}"
|
|
128
136
|
id="${this.id||``}"
|
|
@@ -136,22 +144,87 @@
|
|
|
136
144
|
aria-label="${this.ariaLabel||``}"
|
|
137
145
|
aria-describedby="${this.ariaDescribedby||``}"
|
|
138
146
|
aria-pressed="${this.ariaPressed||``}"
|
|
139
|
-
class="${this.
|
|
140
|
-
style="${
|
|
147
|
+
class="${this.getButtonClasses()}"
|
|
148
|
+
style="${this.style}">
|
|
141
149
|
<slot></slot>
|
|
142
|
-
</button>`}};
|
|
150
|
+
</button>`}};Z=X([Y(`n-button`)],Z);var Q=class extends J{constructor(...e){super(...e),this.copy=``,this.id=``,this.name=``,this.disabled=!1,this.ariaLabel=``,this.ariaDescribedby=``,this.ariaPressed=``,this.colorChanging=!1,this.colorToChangeTo=``}static#e=this.properties={copy:{type:String},id:{type:String},style:{type:String},name:{type:String},disabled:{type:Boolean},ariaLabel:{type:String,attribute:`aria-label`},ariaDescribedby:{type:String,attribute:`aria-describedby`},ariaPressed:{type:String,attribute:`aria-pressed`}};static#t=this.styles=s`
|
|
143
151
|
.copy-button {
|
|
152
|
+
z-index: 9999;
|
|
153
|
+
background: transparent;
|
|
154
|
+
border: none;
|
|
144
155
|
display: block;
|
|
156
|
+
position: unset;
|
|
145
157
|
cursor: pointer;
|
|
146
158
|
user-select: none;
|
|
147
159
|
padding: 4px;
|
|
148
160
|
border-radius: 4px;
|
|
161
|
+
color: black;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.copy-button.dark {
|
|
165
|
+
color: white;
|
|
149
166
|
}
|
|
150
167
|
|
|
151
168
|
.copy-button:active {
|
|
152
169
|
scale: 0.90;
|
|
153
170
|
}
|
|
154
|
-
|
|
171
|
+
|
|
172
|
+
.copy-button.nc-tr {
|
|
173
|
+
position: absolute !important;
|
|
174
|
+
top: 0;
|
|
175
|
+
right: 0;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.copy-button.nc-tl {
|
|
179
|
+
position: absolute !important;
|
|
180
|
+
top: 0;
|
|
181
|
+
left: 0;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.copy-button.nc-t {
|
|
185
|
+
position: absolute !important;
|
|
186
|
+
top: 0;
|
|
187
|
+
right: 50%;
|
|
188
|
+
transform: translateX(-50%);
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.copy-button.nc-br {
|
|
192
|
+
position: absolute !important;
|
|
193
|
+
bottom: 0;
|
|
194
|
+
right: 0;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.copy-button.nc-bl {
|
|
198
|
+
position: absolute !important;
|
|
199
|
+
bottom: 0;
|
|
200
|
+
left: 0;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.copy-button.nc-b {
|
|
204
|
+
position: absolute !important;
|
|
205
|
+
bottom: 0;
|
|
206
|
+
right: 50%;
|
|
207
|
+
transform: translateX(-50%);
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.copy-button.nc-r {
|
|
211
|
+
position: absolute !important;
|
|
212
|
+
right: 0;
|
|
213
|
+
top: 50%;
|
|
214
|
+
transform: translateY(-50%);
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.copy-button.nc-l {
|
|
218
|
+
position: absolute !important;
|
|
219
|
+
left: 0;
|
|
220
|
+
top: 50%;
|
|
221
|
+
transform: translateY(-50%);
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.copy-button.nc-dark {
|
|
225
|
+
color: white;
|
|
226
|
+
}
|
|
227
|
+
`;getButtonClasses(){let e=[];return(this.getAttribute(`class`)?.split(` `)||[]).forEach(t=>{if(t.startsWith(`nc-`)&&(e.push(t),t.endsWith(`]`))){let e=t.match(/\[([^\]]+)\]/);e&&(this.colorToChangeTo=e[1])}}),e.join(` `)}render(){let e=`16px`;return this.classList.contains(`nc-medium`)?e=`24px`:this.classList.contains(`nc-large`)&&(e=`32px`),L`<button
|
|
155
228
|
?disabled="${this.disabled}"
|
|
156
229
|
id="${this.id||``}"
|
|
157
230
|
@click="${this.handleCopy}"
|
|
@@ -160,9 +233,45 @@
|
|
|
160
233
|
aria-label="${this.ariaLabel||``}"
|
|
161
234
|
aria-describedby="${this.ariaDescribedby||``}"
|
|
162
235
|
aria-pressed="${this.ariaPressed||``}"
|
|
163
|
-
class="copy-button"
|
|
164
|
-
style="${
|
|
165
|
-
<svg xmlns="http://www.w3.org/2000/svg" height="
|
|
236
|
+
class="copy-button ${this.getButtonClasses()}"
|
|
237
|
+
style="${this.style}">
|
|
238
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="${e}" viewBox="0 -960 960 960" width="${e}" fill="currentColor">
|
|
166
239
|
<path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"/>
|
|
167
240
|
</svg>
|
|
168
|
-
</
|
|
241
|
+
</button>`}handleCopy(){let e=this.shadowRoot?.querySelector(`.copy-button`);this.colorChanging||(this.colorChanging=!0,this.colorToChangeTo!==``&&e&&(e.style.color=this.colorToChangeTo),navigator.clipboard.writeText(this.copy),setTimeout(()=>{e&&(e.style.color=``),this.colorChanging=!1},2e3))}};Q=X([Y(`n-copy`)],Q);var ve=10,ye=30;if(!document.querySelector(`style[data-tooltip]`)){let e=document.createElement(`style`);e.setAttribute(`data-tooltip`,`true`),e.textContent=`
|
|
242
|
+
.tooltip {
|
|
243
|
+
font-family: system-ui, sans-serif;
|
|
244
|
+
text-wrap: nowrap;
|
|
245
|
+
z-index: 9999999999;
|
|
246
|
+
font-size: 1rem;
|
|
247
|
+
transition: opacity 0.25s ease-in-out;
|
|
248
|
+
pointer-events: none;
|
|
249
|
+
opacity: 0;
|
|
250
|
+
position: fixed;
|
|
251
|
+
background: white;
|
|
252
|
+
color: black;
|
|
253
|
+
outline: 1px solid black;
|
|
254
|
+
padding: 4px 8px;
|
|
255
|
+
font-weight: 400;
|
|
256
|
+
border-radius: 5px;
|
|
257
|
+
max-width: 300px;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.tooltip.nt-dark {
|
|
261
|
+
background: #1e1e1e;
|
|
262
|
+
color: #ffffff;
|
|
263
|
+
outline: 1px solid #444444;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.tooltip.nt-fast {
|
|
267
|
+
transition: opacity 0.15s ease-in-out;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.tooltip.nt-slow {
|
|
271
|
+
transition: opacity 0.5s ease-in-out;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
.tooltip.nt-very-slow {
|
|
275
|
+
transition: opacity 1s ease-in-out;
|
|
276
|
+
}
|
|
277
|
+
`,document.head.appendChild(e)}function be(e){let t=e.split(` `),n=[];return t.forEach(e=>{e.startsWith(`nt-`)&&n.push(e)}),n}function xe(e,t,n,r){if(t){let i=e,a=document.createElement(`div`);a.classList.add(`tooltip`),be(i.classList.toString()).forEach(e=>{a.classList.add(e)}),a.innerHTML=t,t.length>=ye&&(a.style.textWrap=`pretty`),a.style.top=`${r-35-ve}px`,a.style.left=`${n-35}px`,document.body.appendChild(a);let o=e=>{a.style.top=`${e.clientY-35-ve}px`,a.style.left=`${e.clientX-35}px`};i.addEventListener(`mousemove`,o);let s=()=>{i.removeEventListener(`mousemove`,o),i.removeEventListener(`mouseleave`,s),document.removeEventListener(`scroll`,s,!0),a.style.opacity=`0`,setTimeout(()=>{a.parentElement&&a.remove()},160)};setTimeout(()=>{a&&(a.style.opacity=`1`)},10),i.addEventListener(`mouseleave`,s),document.addEventListener(`scroll`,s,!0),i.addEventListener(`focusout`,function t(){e.classList.contains(`focus-hint`)&&(a.style.opacity=`0`,setTimeout(()=>{a.remove(),i.removeEventListener(`mouseleave`,t)},160))})}}function $(){document.addEventListener(`mouseenter`,e=>{let t=e.target,n=e;t instanceof HTMLElement&&t.hasAttribute(`n-tooltip`)&&xe(t,t.getAttribute(`n-tooltip`),n.clientX,n.clientY)},!0),document.addEventListener(`touchstart`,e=>{let t=e.target,n=e.touches[0];t instanceof HTMLElement&&t.hasAttribute(`n-tooltip`)&&xe(t,t.getAttribute(`n-tooltip`),n.clientX,n.clientY)},!0),document.addEventListener(`mouseleave`,e=>{e.target})}document.readyState===`loading`?document.addEventListener(`DOMContentLoaded`,$):$(),Object.defineProperty(e,`NButton`,{enumerable:!0,get:function(){return Z}}),Object.defineProperty(e,`NCopy`,{enumerable:!0,get:function(){return Q}})});
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@trenoxxious/n-components",
|
|
3
3
|
"description": "Customizable components for use with vanilla HTML, Javascript and CSS.",
|
|
4
4
|
"private": false,
|
|
5
|
-
"version": "1.0.
|
|
5
|
+
"version": "1.0.15",
|
|
6
6
|
"repository": "github:Trenoxxious/n-components",
|
|
7
7
|
"keywords": [
|
|
8
8
|
"web-components",
|