@sky.ui/core 0.0.7 → 0.0.20
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 +6 -0
- package/auto-import.js +1 -31
- package/dist/custom-elements.json +7115 -21498
- package/dist/helper/utils/color-resolver.d.ts +12 -0
- package/dist/helper/utils/color-resolver.js +1 -1
- package/dist/helper/utils/color-resolver.js.map +1 -1
- package/dist/index.d.ts +1 -31
- package/dist/index.js +1 -1
- package/dist/sky-alert/sky-alert.js +32 -42
- package/dist/sky-alert/sky-alert.js.map +1 -1
- package/dist/sky-appbar/sky-appbar.d.ts +5 -0
- package/dist/sky-appbar/sky-appbar.js +63 -21
- package/dist/sky-appbar/sky-appbar.js.map +1 -1
- package/dist/sky-avatar/sky-avatar.d.ts +2 -2
- package/dist/sky-avatar/sky-avatar.js +36 -28
- package/dist/sky-avatar/sky-avatar.js.map +1 -1
- package/dist/sky-badge/sky-badge.d.ts +2 -0
- package/dist/sky-badge/sky-badge.js +21 -19
- package/dist/sky-badge/sky-badge.js.map +1 -1
- package/dist/sky-button/sky-button.d.ts +4 -0
- package/dist/sky-button/sky-button.js +85 -26
- package/dist/sky-button/sky-button.js.map +1 -1
- package/dist/sky-card/sky-card.d.ts +7 -1
- package/dist/sky-card/sky-card.js +72 -40
- package/dist/sky-card/sky-card.js.map +1 -1
- package/dist/sky-checkbox/sky-checkbox.js +34 -23
- package/dist/sky-checkbox/sky-checkbox.js.map +1 -1
- package/dist/sky-chip/sky-chip.js +53 -35
- package/dist/sky-chip/sky-chip.js.map +1 -1
- package/dist/sky-combobox/sky-combobox.d.ts +6 -2
- package/dist/sky-combobox/sky-combobox.js +92 -262
- package/dist/sky-combobox/sky-combobox.js.map +1 -1
- package/dist/sky-dialog/sky-dialog.d.ts +4 -11
- package/dist/sky-dialog/sky-dialog.js +78 -131
- package/dist/sky-dialog/sky-dialog.js.map +1 -1
- package/dist/sky-flexbox/sky-flexbox.js.map +1 -1
- package/dist/sky-form/sky-form.js +21 -19
- package/dist/sky-form/sky-form.js.map +1 -1
- package/dist/sky-image/sky-image.d.ts +1 -0
- package/dist/sky-image/sky-image.js +14 -7
- package/dist/sky-image/sky-image.js.map +1 -1
- package/dist/sky-input/sky-input.d.ts +15 -2
- package/dist/sky-input/sky-input.js +188 -193
- package/dist/sky-input/sky-input.js.map +1 -1
- package/dist/sky-list/sky-list.d.ts +11 -2
- package/dist/sky-list/sky-list.js +15 -25
- package/dist/sky-list/sky-list.js.map +1 -1
- package/dist/sky-listitem/sky-listitem.js +62 -30
- package/dist/sky-listitem/sky-listitem.js.map +1 -1
- package/dist/sky-radio/sky-radio.d.ts +2 -0
- package/dist/sky-radio/sky-radio.js +29 -9
- package/dist/sky-radio/sky-radio.js.map +1 -1
- package/dist/sky-sheet/sky-sheet.d.ts +1 -1
- package/dist/sky-sheet/sky-sheet.js +68 -22
- package/dist/sky-sheet/sky-sheet.js.map +1 -1
- package/dist/sky-simple-table/index.d.ts +1 -0
- package/dist/sky-simple-table/index.js +1 -0
- package/dist/sky-simple-table/sky-simple-table.d.ts +68 -0
- package/dist/sky-simple-table/sky-simple-table.js +100 -0
- package/dist/sky-simple-table/sky-simple-table.js.map +1 -0
- package/dist/sky-theme-provider/sky-theme-provider.d.ts +10 -1
- package/dist/sky-theme-provider/sky-theme-provider.js +2 -2
- package/dist/sky-theme-provider/sky-theme-provider.js.map +1 -1
- package/package.json +39 -269
- package/dist/sky-accordion/index.d.ts +0 -1
- package/dist/sky-accordion/index.js +0 -1
- package/dist/sky-accordion/sky-accordion.d.ts +0 -201
- package/dist/sky-accordion/sky-accordion.js +0 -84
- package/dist/sky-accordion/sky-accordion.js.map +0 -1
- package/dist/sky-accordion-item/index.d.ts +0 -1
- package/dist/sky-accordion-item/index.js +0 -1
- package/dist/sky-accordion-item/sky-accordion-item.d.ts +0 -161
- package/dist/sky-accordion-item/sky-accordion-item.js +0 -191
- package/dist/sky-accordion-item/sky-accordion-item.js.map +0 -1
- package/dist/sky-breadcrumb/index.d.ts +0 -1
- package/dist/sky-breadcrumb/index.js +0 -1
- package/dist/sky-breadcrumb/sky-breadcrumb.d.ts +0 -111
- package/dist/sky-breadcrumb/sky-breadcrumb.js +0 -230
- package/dist/sky-breadcrumb/sky-breadcrumb.js.map +0 -1
- package/dist/sky-button-group/index.d.ts +0 -1
- package/dist/sky-button-group/index.js +0 -1
- package/dist/sky-button-group/sky-button-group.d.ts +0 -93
- package/dist/sky-button-group/sky-button-group.js +0 -281
- package/dist/sky-button-group/sky-button-group.js.map +0 -1
- package/dist/sky-carousel/index.d.ts +0 -1
- package/dist/sky-carousel/index.js +0 -1
- package/dist/sky-carousel/sky-carousel.d.ts +0 -265
- package/dist/sky-carousel/sky-carousel.js +0 -211
- package/dist/sky-carousel/sky-carousel.js.map +0 -1
- package/dist/sky-counter/index.d.ts +0 -1
- package/dist/sky-counter/index.js +0 -1
- package/dist/sky-counter/sky-counter.d.ts +0 -130
- package/dist/sky-counter/sky-counter.js +0 -101
- package/dist/sky-counter/sky-counter.js.map +0 -1
- package/dist/sky-drawer/index.d.ts +0 -1
- package/dist/sky-drawer/index.js +0 -1
- package/dist/sky-drawer/sky-drawer.d.ts +0 -161
- package/dist/sky-drawer/sky-drawer.js +0 -175
- package/dist/sky-drawer/sky-drawer.js.map +0 -1
- package/dist/sky-dropdown/index.d.ts +0 -1
- package/dist/sky-dropdown/index.js +0 -1
- package/dist/sky-dropdown/sky-dropdown.d.ts +0 -254
- package/dist/sky-dropdown/sky-dropdown.js +0 -61
- package/dist/sky-dropdown/sky-dropdown.js.map +0 -1
- package/dist/sky-dropdown-item/index.d.ts +0 -1
- package/dist/sky-dropdown-item/index.js +0 -1
- package/dist/sky-dropdown-item/sky-dropdown-item.d.ts +0 -207
- package/dist/sky-dropdown-item/sky-dropdown-item.js +0 -341
- package/dist/sky-dropdown-item/sky-dropdown-item.js.map +0 -1
- package/dist/sky-flexbar/index.d.ts +0 -1
- package/dist/sky-flexbar/index.js +0 -1
- package/dist/sky-flexbar/sky-flexbar.d.ts +0 -189
- package/dist/sky-flexbar/sky-flexbar.js +0 -157
- package/dist/sky-flexbar/sky-flexbar.js.map +0 -1
- package/dist/sky-flexitem/index.d.ts +0 -1
- package/dist/sky-flexitem/index.js +0 -1
- package/dist/sky-flexitem/sky-flexitem.d.ts +0 -114
- package/dist/sky-flexitem/sky-flexitem.js +0 -52
- package/dist/sky-flexitem/sky-flexitem.js.map +0 -1
- package/dist/sky-navbar/index.d.ts +0 -1
- package/dist/sky-navbar/index.js +0 -1
- package/dist/sky-navbar/sky-navbar.d.ts +0 -211
- package/dist/sky-navbar/sky-navbar.js +0 -521
- package/dist/sky-navbar/sky-navbar.js.map +0 -1
- package/dist/sky-navpanel/index.d.ts +0 -1
- package/dist/sky-navpanel/index.js +0 -1
- package/dist/sky-navpanel/sky-navpanel.d.ts +0 -187
- package/dist/sky-navpanel/sky-navpanel.js +0 -404
- package/dist/sky-navpanel/sky-navpanel.js.map +0 -1
- package/dist/sky-notification/index.d.ts +0 -1
- package/dist/sky-notification/index.js +0 -1
- package/dist/sky-notification/sky-notification.d.ts +0 -152
- package/dist/sky-notification/sky-notification.js +0 -456
- package/dist/sky-notification/sky-notification.js.map +0 -1
- package/dist/sky-otp/index.d.ts +0 -1
- package/dist/sky-otp/index.js +0 -1
- package/dist/sky-otp/sky-otp.d.ts +0 -101
- package/dist/sky-otp/sky-otp.js +0 -96
- package/dist/sky-otp/sky-otp.js.map +0 -1
- package/dist/sky-overlay/index.d.ts +0 -1
- package/dist/sky-overlay/index.js +0 -1
- package/dist/sky-overlay/sky-overlay.d.ts +0 -71
- package/dist/sky-overlay/sky-overlay.js +0 -26
- package/dist/sky-overlay/sky-overlay.js.map +0 -1
- package/dist/sky-pagination/index.d.ts +0 -1
- package/dist/sky-pagination/index.js +0 -1
- package/dist/sky-pagination/sky-pagination.d.ts +0 -167
- package/dist/sky-pagination/sky-pagination.js +0 -453
- package/dist/sky-pagination/sky-pagination.js.map +0 -1
- package/dist/sky-progress/index.d.ts +0 -1
- package/dist/sky-progress/index.js +0 -1
- package/dist/sky-progress/sky-progress.d.ts +0 -70
- package/dist/sky-progress/sky-progress.js +0 -87
- package/dist/sky-progress/sky-progress.js.map +0 -1
- package/dist/sky-radio-group/index.d.ts +0 -1
- package/dist/sky-radio-group/index.js +0 -1
- package/dist/sky-radio-group/sky-radio-group.d.ts +0 -186
- package/dist/sky-radio-group/sky-radio-group.js +0 -239
- package/dist/sky-radio-group/sky-radio-group.js.map +0 -1
- package/dist/sky-range/index.d.ts +0 -1
- package/dist/sky-range/index.js +0 -1
- package/dist/sky-range/sky-range.d.ts +0 -110
- package/dist/sky-range/sky-range.js +0 -196
- package/dist/sky-range/sky-range.js.map +0 -1
- package/dist/sky-serial/index.d.ts +0 -1
- package/dist/sky-serial/index.js +0 -1
- package/dist/sky-serial/sky-serial.d.ts +0 -127
- package/dist/sky-serial/sky-serial.js +0 -133
- package/dist/sky-serial/sky-serial.js.map +0 -1
- package/dist/sky-skeleton/index.d.ts +0 -1
- package/dist/sky-skeleton/index.js +0 -1
- package/dist/sky-skeleton/sky-skeleton.d.ts +0 -80
- package/dist/sky-skeleton/sky-skeleton.js +0 -233
- package/dist/sky-skeleton/sky-skeleton.js.map +0 -1
- package/dist/sky-slider/index.d.ts +0 -1
- package/dist/sky-slider/index.js +0 -1
- package/dist/sky-slider/sky-slider.d.ts +0 -96
- package/dist/sky-slider/sky-slider.js +0 -139
- package/dist/sky-slider/sky-slider.js.map +0 -1
- package/dist/sky-speeddial/index.d.ts +0 -1
- package/dist/sky-speeddial/index.js +0 -1
- package/dist/sky-speeddial/sky-speeddial.d.ts +0 -86
- package/dist/sky-speeddial/sky-speeddial.js +0 -154
- package/dist/sky-speeddial/sky-speeddial.js.map +0 -1
- package/dist/sky-spinner/index.d.ts +0 -1
- package/dist/sky-spinner/index.js +0 -1
- package/dist/sky-spinner/sky-spinner.d.ts +0 -87
- package/dist/sky-spinner/sky-spinner.js +0 -334
- package/dist/sky-spinner/sky-spinner.js.map +0 -1
- package/dist/sky-steps/index.d.ts +0 -1
- package/dist/sky-steps/index.js +0 -1
- package/dist/sky-steps/sky-steps.d.ts +0 -170
- package/dist/sky-steps/sky-steps.js +0 -455
- package/dist/sky-steps/sky-steps.js.map +0 -1
- package/dist/sky-switch/index.d.ts +0 -1
- package/dist/sky-switch/index.js +0 -1
- package/dist/sky-switch/sky-switch.d.ts +0 -116
- package/dist/sky-switch/sky-switch.js +0 -191
- package/dist/sky-switch/sky-switch.js.map +0 -1
- package/dist/sky-tab/index.d.ts +0 -1
- package/dist/sky-tab/index.js +0 -1
- package/dist/sky-tab/sky-tab.d.ts +0 -188
- package/dist/sky-tab/sky-tab.js +0 -390
- package/dist/sky-tab/sky-tab.js.map +0 -1
- package/dist/sky-tab-button/index.d.ts +0 -1
- package/dist/sky-tab-button/index.js +0 -1
- package/dist/sky-tab-button/sky-tab-button.d.ts +0 -114
- package/dist/sky-tab-button/sky-tab-button.js +0 -167
- package/dist/sky-tab-button/sky-tab-button.js.map +0 -1
- package/dist/sky-theme-switcher/index.d.ts +0 -1
- package/dist/sky-theme-switcher/index.js +0 -1
- package/dist/sky-theme-switcher/sky-theme-switcher.d.ts +0 -92
- package/dist/sky-theme-switcher/sky-theme-switcher.js +0 -43
- package/dist/sky-theme-switcher/sky-theme-switcher.js.map +0 -1
- package/dist/sky-tooltip/index.d.ts +0 -1
- package/dist/sky-tooltip/index.js +0 -1
- package/dist/sky-tooltip/sky-tooltip.d.ts +0 -156
- package/dist/sky-tooltip/sky-tooltip.js +0 -242
- package/dist/sky-tooltip/sky-tooltip.js.map +0 -1
|
@@ -1,196 +0,0 @@
|
|
|
1
|
-
import{__decorate as t,__metadata as i}from"tslib";import{LitElement as e,css as s,html as r}from"lit";import{property as a,customElement as o}from"lit/decorators.js";import{when as n}from"lit/directives/when.js";import{styleMap as h}from"lit/directives/style-map.js";let p=class extends e{constructor(){super(...arguments),this.from=20,this.to=80,this.min=0,this.max=100,this.step=10,this.label="",this.disabled=!1,this.prefix="",this.suffix="",this.shadow=!1,this.commitOnly=!1,this.showValue=!0,this._lastCommittedFrom=this.from,this._lastCommittedTo=this.to}static{this.styles=s`
|
|
2
|
-
:host {
|
|
3
|
-
display: flex;
|
|
4
|
-
flex-direction: column;
|
|
5
|
-
align-items: center;
|
|
6
|
-
width: 100%;
|
|
7
|
-
font-family: var(--sky-font);
|
|
8
|
-
font-weight: 400;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.range-container {
|
|
12
|
-
display: flex;
|
|
13
|
-
flex-direction: column;
|
|
14
|
-
align-items: flex-start;
|
|
15
|
-
width: 100%;
|
|
16
|
-
padding: 8px;
|
|
17
|
-
gap: 4px;
|
|
18
|
-
box-sizing: border-box;
|
|
19
|
-
position: relative;
|
|
20
|
-
border-radius: var(--sky-radius-primary);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
/* Only apply glass/shadow if shadow prop is set */
|
|
24
|
-
.range-container[shadow] {
|
|
25
|
-
background: var(--sky-glass-primary);
|
|
26
|
-
box-shadow: var(--sky-box-shadow-primary);
|
|
27
|
-
border: var(--sky-border-primary);
|
|
28
|
-
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.range-container[shadow]::before {
|
|
32
|
-
content: "";
|
|
33
|
-
position: absolute;
|
|
34
|
-
inset: 0;
|
|
35
|
-
z-index: -1;
|
|
36
|
-
border-radius: inherit;
|
|
37
|
-
backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
|
|
38
|
-
var(--sky-saturation-primary);
|
|
39
|
-
-webkit-backdrop-filter: var(--sky-blur-primary)
|
|
40
|
-
var(--sky-brightness-primary) var(--sky-saturation-primary);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.range-label {
|
|
44
|
-
font-size: 14px;
|
|
45
|
-
font-weight: inherit;
|
|
46
|
-
color: var(--sky-text-primary);
|
|
47
|
-
text-align: center;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.slider-container {
|
|
51
|
-
position: relative;
|
|
52
|
-
width: 100%;
|
|
53
|
-
height: 14px;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.track {
|
|
57
|
-
position: absolute;
|
|
58
|
-
width: 100%;
|
|
59
|
-
height: 3px;
|
|
60
|
-
background: var(--sky-hover-primary);
|
|
61
|
-
top: 50%;
|
|
62
|
-
transform: translateY(-50%);
|
|
63
|
-
border-radius: 6px;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.range-highlight {
|
|
67
|
-
position: absolute;
|
|
68
|
-
height: 3px;
|
|
69
|
-
background: var(--sky-active-primary);
|
|
70
|
-
border-radius: 6px;
|
|
71
|
-
top: 50%;
|
|
72
|
-
transform: translateY(-50%);
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
.range-value {
|
|
76
|
-
font-size: 14px;
|
|
77
|
-
color: var(--sky-text-primary);
|
|
78
|
-
font-weight: inherit;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
sky-icon {
|
|
82
|
-
display: inline-block;
|
|
83
|
-
width: 1em;
|
|
84
|
-
height: 1em;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
input[type="range"] {
|
|
88
|
-
position: absolute;
|
|
89
|
-
width: 100%;
|
|
90
|
-
left: 0;
|
|
91
|
-
height: 14px;
|
|
92
|
-
-webkit-appearance: none;
|
|
93
|
-
appearance: none;
|
|
94
|
-
background: transparent;
|
|
95
|
-
pointer-events: none; /* thumbs capture events */
|
|
96
|
-
margin: 0;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
.prefix,
|
|
100
|
-
.suffix {
|
|
101
|
-
color: var(--sky-text-secondary);
|
|
102
|
-
font-size: 14px;
|
|
103
|
-
font-weight: inherit;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
input[type="range"]::-webkit-slider-thumb {
|
|
107
|
-
pointer-events: auto;
|
|
108
|
-
-webkit-appearance: none;
|
|
109
|
-
appearance: none;
|
|
110
|
-
width: 14px;
|
|
111
|
-
height: 14px;
|
|
112
|
-
background: var(--sky-glass-solid);
|
|
113
|
-
border: 5px solid var(--sky-active-primary-dark);
|
|
114
|
-
border-radius: 50%;
|
|
115
|
-
cursor: pointer;
|
|
116
|
-
box-shadow: var(--sky-box-shadow-primary);
|
|
117
|
-
transition:
|
|
118
|
-
transform 0.3s ease,
|
|
119
|
-
box-shadow 0.3s ease;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
input[type="range"]::-moz-range-thumb {
|
|
123
|
-
pointer-events: auto;
|
|
124
|
-
width: 14px;
|
|
125
|
-
height: 14px;
|
|
126
|
-
background: var(--sky-active-primary-dark);
|
|
127
|
-
border-radius: 50%;
|
|
128
|
-
cursor: pointer;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
.range-container[disabled] {
|
|
132
|
-
pointer-events: none;
|
|
133
|
-
opacity: 0.6;
|
|
134
|
-
}
|
|
135
|
-
`}roundToStep(t){const i=this.step>0?this.step:1;return Math.round(t/i)*i}clamp(t){return Math.min(this.max,Math.max(this.min,t))}onFromInput(t){const i=t.target,e=Number(i.value),s=this.clamp(e);if(s>=this.to)return;if(this.commitOnly)return void(this.from=s);const r=this.roundToStep(s);r>=this.to||r!==this.from&&(this.from=r,this._lastCommittedFrom=r,this.dispatchRangeChange())}onFromChange(t){const i=t.target,e=Number(i.value),s=this.clamp(e),r=this.roundToStep(s);r>=this.to?i.value=String(this.from):(this.from=r,i.value=String(this.from),this.commitOnly&&r!==this._lastCommittedFrom&&(this._lastCommittedFrom=r,this.dispatchRangeChange()))}onToInput(t){const i=t.target,e=Number(i.value),s=this.clamp(e);if(s<=this.from)return;if(this.commitOnly)return void(this.to=s);const r=this.roundToStep(s);r<=this.from||r!==this.to&&(this.to=r,this._lastCommittedTo=r,this.dispatchRangeChange())}onToChange(t){const i=t.target,e=Number(i.value),s=this.clamp(e),r=this.roundToStep(s);r<=this.from?i.value=String(this.to):(this.to=r,i.value=String(this.to),this.commitOnly&&r!==this._lastCommittedTo&&(this._lastCommittedTo=r,this.dispatchRangeChange()))}dispatchRangeChange(){this.dispatchEvent(new CustomEvent("range-changed",{detail:{from:this.from,to:this.to},bubbles:!0,composed:!0}))}setRange(t,i){const e=this.roundToStep(this.clamp(t)),s=this.roundToStep(this.clamp(i));e>=s||(this.from=e,this.to=s,this._lastCommittedFrom=e,this._lastCommittedTo=s,this.dispatchRangeChange())}render(){const t=this.closest('[dir="rtl"]')||"rtl"===document.dir,i=Math.max(1,this.max-this.min),e=(this.from-this.min)/i*100,s=(this.to-this.min)/i*100,a=Math.max(0,s-e);return r`
|
|
136
|
-
<div
|
|
137
|
-
class="range-container"
|
|
138
|
-
part="container"
|
|
139
|
-
?disabled="${this.disabled}"
|
|
140
|
-
?shadow="${this.shadow}"
|
|
141
|
-
aria-disabled="${this.disabled?"true":"false"}"
|
|
142
|
-
>
|
|
143
|
-
${n(this.showValue||""!==this.label,()=>r`
|
|
144
|
-
<div
|
|
145
|
-
style="display:flex;align-items:center;gap:5px;justify-content:space-between;width:100%;"
|
|
146
|
-
>
|
|
147
|
-
${n(this.label,()=>r`<div class="range-label" part="label">${this.label}</div>`)}
|
|
148
|
-
${n(this.showValue,()=>r`
|
|
149
|
-
<div class="range-value" part="value">
|
|
150
|
-
<span class="prefix">${this.prefix}</span>
|
|
151
|
-
${this.from.toFixed(2)}<span class="suffix">${this.suffix}</span>
|
|
152
|
-
-
|
|
153
|
-
<span class="prefix">${this.prefix}</span>
|
|
154
|
-
${this.to.toFixed(2)}<span class="suffix">${this.suffix}</span>
|
|
155
|
-
</div>
|
|
156
|
-
`)}
|
|
157
|
-
</div>
|
|
158
|
-
`)}
|
|
159
|
-
|
|
160
|
-
<div class="slider-container" part="slider-container">
|
|
161
|
-
<div class="track" part="track"></div>
|
|
162
|
-
<div
|
|
163
|
-
class="range-highlight"
|
|
164
|
-
part="highlight"
|
|
165
|
-
style=${h(t?{right:`${e}%`,width:`${a}%`}:{left:`${e}%`,width:`${a}%`})}
|
|
166
|
-
></div>
|
|
167
|
-
|
|
168
|
-
<input
|
|
169
|
-
part="slider-from"
|
|
170
|
-
type="range"
|
|
171
|
-
?disabled="${this.disabled}"
|
|
172
|
-
min="${this.min}"
|
|
173
|
-
max="${this.max}"
|
|
174
|
-
step="${this.step}"
|
|
175
|
-
.value="${String(this.from)}"
|
|
176
|
-
@input="${this.onFromInput}"
|
|
177
|
-
@change="${this.onFromChange}"
|
|
178
|
-
aria-label="${this.label?`${this.label} from`:"From"}"
|
|
179
|
-
/>
|
|
180
|
-
|
|
181
|
-
<input
|
|
182
|
-
part="slider-to"
|
|
183
|
-
type="range"
|
|
184
|
-
?disabled="${this.disabled}"
|
|
185
|
-
min="${this.min}"
|
|
186
|
-
max="${this.max}"
|
|
187
|
-
step="${this.step}"
|
|
188
|
-
.value="${String(this.to)}"
|
|
189
|
-
@input="${this.onToInput}"
|
|
190
|
-
@change="${this.onToChange}"
|
|
191
|
-
aria-label="${this.label?`${this.label} to`:"To"}"
|
|
192
|
-
/>
|
|
193
|
-
</div>
|
|
194
|
-
</div>
|
|
195
|
-
`}};t([a({type:Number}),i("design:type",Object)],p.prototype,"from",void 0),t([a({type:Number}),i("design:type",Object)],p.prototype,"to",void 0),t([a({type:Number}),i("design:type",Object)],p.prototype,"min",void 0),t([a({type:Number}),i("design:type",Object)],p.prototype,"max",void 0),t([a({type:Number}),i("design:type",Object)],p.prototype,"step",void 0),t([a({type:String}),i("design:type",Object)],p.prototype,"label",void 0),t([a({type:Boolean,reflect:!0}),i("design:type",Object)],p.prototype,"disabled",void 0),t([a({type:String}),i("design:type",Object)],p.prototype,"prefix",void 0),t([a({type:String}),i("design:type",Object)],p.prototype,"suffix",void 0),t([a({type:Boolean,reflect:!0}),i("design:type",Object)],p.prototype,"shadow",void 0),t([a({type:Boolean,reflect:!0}),i("design:type",Object)],p.prototype,"commitOnly",void 0),t([a({type:Boolean,reflect:!0}),i("design:type",Object)],p.prototype,"showValue",void 0),p=t([o("sky-range")],p);export{p as SkyRange};
|
|
196
|
-
//# sourceMappingURL=sky-range.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"sky-range.js","sources":["../../src/sky-range/sky-range.ts"],"sourcesContent":[null],"names":["SkyRange","LitElement","constructor","this","from","to","min","max","step","label","disabled","prefix","suffix","shadow","commitOnly","showValue","_lastCommittedFrom","_lastCommittedTo","styles","css","roundToStep","value","Math","round","clamp","onFromInput","event","input","target","raw","Number","clamped","snapped","dispatchRangeChange","onFromChange","String","onToInput","onToChange","dispatchEvent","CustomEvent","detail","bubbles","composed","setRange","nextFrom","nextTo","render","isRTL","closest","document","dir","range","fromOffset","toOffset","width","html","when","toFixed","styleMap","right","left","__decorate","property","type","prototype","Boolean","reflect","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./sky-serial";
|
package/dist/sky-serial/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './sky-serial.js';
|
|
@@ -1,127 +0,0 @@
|
|
|
1
|
-
import { PropertyValues } from "lit";
|
|
2
|
-
import { FormControlBase, FormState } from "../helper/internals/form-control-base";
|
|
3
|
-
export type SkySerialValidation = (value: string) => true | string;
|
|
4
|
-
export type SkySerialValueChangedDetail = {
|
|
5
|
-
value: string;
|
|
6
|
-
};
|
|
7
|
-
export type SkySerialValueClearedDetail = {
|
|
8
|
-
value: "";
|
|
9
|
-
};
|
|
10
|
-
export type SkySerialValidationErrorDetail = {
|
|
11
|
-
errors: string[];
|
|
12
|
-
};
|
|
13
|
-
/**
|
|
14
|
-
* @element sky-serial
|
|
15
|
-
*
|
|
16
|
-
* @summary Segmented serial/OTP input with separators, masking, and validation support.
|
|
17
|
-
*
|
|
18
|
-
* @status stable
|
|
19
|
-
* @since 1.0.0
|
|
20
|
-
*
|
|
21
|
-
* @documentation https://library.sky-ui.com/components/serial
|
|
22
|
-
*
|
|
23
|
-
* @uiVModel value value-changed
|
|
24
|
-
*
|
|
25
|
-
* @slot - (No slots) — Content is internally rendered.
|
|
26
|
-
*
|
|
27
|
-
* @csspart wrapper - The flex wrapper around groups and separators.
|
|
28
|
-
* @csspart group - A group of input boxes between separators.
|
|
29
|
-
* @csspart input - An individual digit/char input.
|
|
30
|
-
* @csspart separator - The visual separator between groups.
|
|
31
|
-
* @csspart error - The validation error text element.
|
|
32
|
-
*
|
|
33
|
-
* @property {number} length - Total number of character boxes.
|
|
34
|
-
* @property {string} separator - Separator character inserted between groups.
|
|
35
|
-
* @property {number[]} separatorPositions - Indices after which separators are inserted.
|
|
36
|
-
* @property {boolean} alphanumeric - Allows alphanumeric characters instead of digits only.
|
|
37
|
-
* @property {string} value - Canonical component value.
|
|
38
|
-
* @property {SkySerialValidation[]} validations - Validation functions that return `true` or an error message.
|
|
39
|
-
* @property {string[]} validationErrors - Collected validation messages.
|
|
40
|
-
* @property {boolean} showErrors - Controls error text rendering.
|
|
41
|
-
* @property {boolean} validationActive - Enables active validation state.
|
|
42
|
-
* @property {boolean} withSeparator - Includes separators in emitted `value`.
|
|
43
|
-
* @property {boolean} masked - Masks entered characters in input fields.
|
|
44
|
-
*
|
|
45
|
-
* @fires {CustomEvent<SkySerialValueChangedDetail>} value-changed - Fired when a committed value changes.
|
|
46
|
-
* @fires {CustomEvent<SkySerialValueClearedDetail>} value-cleared - Fired when `reset()` clears the value.
|
|
47
|
-
* @fires {CustomEvent<SkySerialValidationErrorDetail>} validation-error - Fired with current validation errors.
|
|
48
|
-
*
|
|
49
|
-
* @Behavior
|
|
50
|
-
* - Updates UI live while typing and emits `value-changed` only on commit.
|
|
51
|
-
* - Supports grouped input with optional separators in public value.
|
|
52
|
-
* - Integrates with `FormControlBase` for form value and validity synchronization.
|
|
53
|
-
*
|
|
54
|
-
* @example
|
|
55
|
-
* ```html
|
|
56
|
-
* <sky-serial length="10" separator="-" separator-positions="[3,6]" with-separator show-errors validation-active></sky-serial>
|
|
57
|
-
* ```
|
|
58
|
-
* ```vue
|
|
59
|
-
* <template>
|
|
60
|
-
* <sky-serial :length="10" separator="-" :separator-positions="[3,6]" with-separator show-errors validation-active></sky-serial>
|
|
61
|
-
* </template>
|
|
62
|
-
* ```
|
|
63
|
-
* ```jsx
|
|
64
|
-
* export default function Demo() {
|
|
65
|
-
* return <sky-serial length={10} separator="-" separator-positions={[3, 6]} with-separator show-errors validation-active></sky-serial>;
|
|
66
|
-
* }
|
|
67
|
-
* ```
|
|
68
|
-
*/
|
|
69
|
-
export declare class SkySerial extends FormControlBase {
|
|
70
|
-
length: number;
|
|
71
|
-
separator: string;
|
|
72
|
-
/** raw indices AFTER which separator is inserted (e.g. [3,6] => 4-3-... style) */
|
|
73
|
-
separatorPositions: number[];
|
|
74
|
-
alphanumeric: boolean;
|
|
75
|
-
/**
|
|
76
|
-
* Canonical value (with or without separators based on withSeparator).
|
|
77
|
-
* NOTE: This is the "public" value string.
|
|
78
|
-
*/
|
|
79
|
-
value: string;
|
|
80
|
-
validations: SkySerialValidation[];
|
|
81
|
-
validationErrors: string[];
|
|
82
|
-
showErrors: boolean;
|
|
83
|
-
validationActive: boolean;
|
|
84
|
-
withSeparator: boolean;
|
|
85
|
-
masked: boolean;
|
|
86
|
-
invalid: boolean;
|
|
87
|
-
/** Non-reactive buffer (unmasked chars only) */
|
|
88
|
-
private displayValues;
|
|
89
|
-
private _lastCommitted;
|
|
90
|
-
constructor();
|
|
91
|
-
static styles: import("lit").CSSResult;
|
|
92
|
-
firstUpdated(): void;
|
|
93
|
-
protected willUpdate(changed: PropertyValues<this>): void;
|
|
94
|
-
protected getFormValue(): FormState;
|
|
95
|
-
protected setValueFromFormState(state: FormState): void;
|
|
96
|
-
protected getValidityAnchor(): HTMLElement | undefined;
|
|
97
|
-
protected isEmpty(): boolean;
|
|
98
|
-
protected getNativeControl(): HTMLElement | null;
|
|
99
|
-
/**
|
|
100
|
-
* IMPORTANT: PURE — do not mutate reactive state here.
|
|
101
|
-
* Return first error string if any, else "".
|
|
102
|
-
*/
|
|
103
|
-
protected validateForForm(): string;
|
|
104
|
-
protected onFormReset(): void;
|
|
105
|
-
/** Live typing updates display buffer + public value, but DOES NOT emit. */
|
|
106
|
-
private handleInput;
|
|
107
|
-
private handleKeydown;
|
|
108
|
-
private handlePaste;
|
|
109
|
-
/** Commit => validate, sync form value+validity, emit if changed */
|
|
110
|
-
protected commit(): void;
|
|
111
|
-
/** Clear all characters and emit once + form sync. */
|
|
112
|
-
reset(): void;
|
|
113
|
-
focus(): void;
|
|
114
|
-
/** Keep your public validateInput() API (manual validation trigger) */
|
|
115
|
-
validateInput(): boolean;
|
|
116
|
-
private computeValidationErrors;
|
|
117
|
-
/** Strip separators, enforce numeric/alphanumeric, clamp to length. */
|
|
118
|
-
private normalizeRaw;
|
|
119
|
-
private addSeparators;
|
|
120
|
-
private ensureDisplayBuffer;
|
|
121
|
-
private syncDisplayFromValue;
|
|
122
|
-
private getRawFromDisplay;
|
|
123
|
-
private applyInputsFromDisplay;
|
|
124
|
-
private applyInvalidClass;
|
|
125
|
-
private renderInputFields;
|
|
126
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
127
|
-
}
|
|
@@ -1,133 +0,0 @@
|
|
|
1
|
-
import{__decorate as t,__metadata as i}from"tslib";import{css as s,html as a}from"lit";import{property as e,customElement as r}from"lit/decorators.js";import{live as o}from"lit/directives/live.js";import{FormControlBase as l}from"../helper/internals/form-control-base.js";let n=class extends l{constructor(){super(),this.length=10,this.separator="-",this.separatorPositions=[3],this.alphanumeric=!1,this.value="",this.validations=[],this.validationErrors=[],this.showErrors=!1,this.validationActive=!1,this.withSeparator=!1,this.masked=!1,this.invalid=!1,this.displayValues=[],this._lastCommitted="",this.addEventListener("focusout",t=>{if(!this.shadowRoot)return;const i=t.relatedTarget;!!i&&this.shadowRoot.contains(i)||this.commit()})}static{this.styles=s`
|
|
2
|
-
:host {
|
|
3
|
-
display: block;
|
|
4
|
-
font-family: var(--sky-font);
|
|
5
|
-
position: relative;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
.input-wrapper {
|
|
9
|
-
display: flex;
|
|
10
|
-
flex-wrap: wrap;
|
|
11
|
-
gap: 8px;
|
|
12
|
-
align-items: center;
|
|
13
|
-
justify-content: center;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.input-wrapper.shake {
|
|
17
|
-
animation: shake 0.3s ease-in-out 1;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
@keyframes shake {
|
|
21
|
-
0% {
|
|
22
|
-
transform: translateX(0);
|
|
23
|
-
}
|
|
24
|
-
25% {
|
|
25
|
-
transform: translateX(-3px);
|
|
26
|
-
}
|
|
27
|
-
50% {
|
|
28
|
-
transform: translateX(3px);
|
|
29
|
-
}
|
|
30
|
-
75% {
|
|
31
|
-
transform: translateX(-3px);
|
|
32
|
-
}
|
|
33
|
-
100% {
|
|
34
|
-
transform: translateX(0);
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.group {
|
|
39
|
-
display: flex;
|
|
40
|
-
gap: 8px;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
input {
|
|
44
|
-
width: 20px;
|
|
45
|
-
height: 20px;
|
|
46
|
-
text-align: center;
|
|
47
|
-
font-size: var(--sky-font-size-md);
|
|
48
|
-
border-radius: var(--sky-radius-primary);
|
|
49
|
-
font-family: var(--sky-font);
|
|
50
|
-
padding: 5px;
|
|
51
|
-
border: var(--sky-border-primary);
|
|
52
|
-
box-shadow: var(--sky-box-shadow-primary);
|
|
53
|
-
backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
|
|
54
|
-
var(--sky-saturation-primary);
|
|
55
|
-
-webkit-backdrop-filter: var(--sky-blur-primary)
|
|
56
|
-
var(--sky-brightness-primary) var(--sky-saturation-primary);
|
|
57
|
-
background: transparent;
|
|
58
|
-
color: var(--sky-text-primary);
|
|
59
|
-
transition: all 0.2s ease-in-out;
|
|
60
|
-
vertical-align: middle;
|
|
61
|
-
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
input.invalid {
|
|
65
|
-
box-shadow: 0 2px 12px
|
|
66
|
-
color-mix(in srgb, var(--sky-danger-primary) 30%, transparent);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
input:focus {
|
|
70
|
-
outline: none;
|
|
71
|
-
border-color: transparent;
|
|
72
|
-
box-shadow: 0 2px 12px
|
|
73
|
-
color-mix(in srgb, var(--sky-active-primary) 30%, transparent);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
.separator {
|
|
77
|
-
font-size: var(--sky-font-size-lg);
|
|
78
|
-
padding: 0 5px;
|
|
79
|
-
color: var(--sky-active-primary);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.error-message {
|
|
83
|
-
position: absolute;
|
|
84
|
-
font-size: var(--sky-font-size-xs);
|
|
85
|
-
color: var(--sky-danger-primary);
|
|
86
|
-
white-space: nowrap;
|
|
87
|
-
overflow: hidden;
|
|
88
|
-
text-overflow: ellipsis;
|
|
89
|
-
pointer-events: none;
|
|
90
|
-
margin-left: 5px;
|
|
91
|
-
width: 100%;
|
|
92
|
-
text-align: start;
|
|
93
|
-
}
|
|
94
|
-
:dir(rtl) .error-message {
|
|
95
|
-
right: 0;
|
|
96
|
-
margin-right: 5px;
|
|
97
|
-
margin-left: unset;
|
|
98
|
-
}
|
|
99
|
-
`}firstUpdated(){this.captureDefaultValue(this.value??""),this.ensureDisplayBuffer(),this.syncDisplayFromValue(),this.syncFormValue(),this.syncValidity()}willUpdate(t){if(t.has("length")||t.has("separator")||t.has("separatorPositions")||t.has("alphanumeric")||t.has("withSeparator")||t.has("value")){this.ensureDisplayBuffer();const i=this.normalizeRaw(this.value??""),s=this.withSeparator?this.addSeparators(i):i;(this.value??"")!==s&&(this.value=s),this.displayValues=Array.from({length:this.length},(t,s)=>i[s]??""),t.has("value")&&(this._lastCommitted=s)}}getFormValue(){if(!this.name||this.disabled)return null;const t=this.getRawFromDisplay();return this.withSeparator?this.addSeparators(t):t}setValueFromFormState(t){const i="string"==typeof t?t:"",s=this.normalizeRaw(i??""),a=this.withSeparator?this.addSeparators(s):s;this.value=a,this.ensureDisplayBuffer(),this.displayValues=Array.from({length:this.length},(t,i)=>s[i]??""),this._lastCommitted=a,queueMicrotask(()=>this.applyInputsFromDisplay())}getValidityAnchor(){return this.shadowRoot?.querySelector(".digit-input")??void 0}isEmpty(){return this.getRawFromDisplay().trim().length<this.length}getNativeControl(){return this.shadowRoot?.querySelector(".digit-input")??null}validateForForm(){const t=this.getRawFromDisplay(),i=this.withSeparator?this.addSeparators(t):t;return this.computeValidationErrors(i)[0]??""}onFormReset(){const t=this.normalizeRaw(this.defaultValue??""),i=this.withSeparator?this.addSeparators(t):t;this.value=i,this.validationErrors=[],this.validationActive=!1,this.invalid=!1,this.ensureDisplayBuffer(),this.displayValues=Array.from({length:this.length},(i,s)=>t[s]??""),this._lastCommitted=i,queueMicrotask(()=>{this.applyInputsFromDisplay(),this.applyInvalidClass(!1)})}handleInput(t,i){if(this.disabled||this.readonly)return void t.preventDefault();this.ensureDisplayBuffer();const s=this.shadowRoot?.querySelectorAll(".digit-input"),a=t.target,e=t,r=(("string"==typeof e.data?e.data:a.value)??"").slice(-1),o=this.alphanumeric?/^[a-zA-Z0-9]$/:/^[0-9]$/;if(r&&!o.test(r))return a.value="",this.displayValues[i]="",void(this.value=this.withSeparator?this.addSeparators(this.getRawFromDisplay()):this.getRawFromDisplay());this.displayValues[i]=r;const l=this.getRawFromDisplay();this.value=this.withSeparator?this.addSeparators(l):l,r&&s&&i<this.length-1&&s[i+1]?.focus(),r&&this.displayValues.every(t=>t.length>0)&&this.commit()}handleKeydown(t,i){const s=this.shadowRoot?.querySelectorAll(".digit-input");if(s)switch(t.key){case"Backspace":if(!s[i].value&&i>0)s[i-1].focus();else{this.ensureDisplayBuffer(),this.displayValues[i]="",s[i].value="";const t=this.getRawFromDisplay();this.value=this.withSeparator?this.addSeparators(t):t}break;case"ArrowLeft":i>0&&s[i-1].focus();break;case"ArrowRight":i<this.length-1&&s[i+1].focus();break;case"Enter":this.commit()}}handlePaste(t){if(this.disabled||this.readonly)return void t.preventDefault();t.preventDefault();const i=t.clipboardData?.getData("text")||"",s=this.normalizeRaw(i);this.ensureDisplayBuffer(),this.displayValues=Array.from({length:this.length},(t,i)=>s[i]??""),this.value=this.withSeparator?this.addSeparators(s):s,this.commit();const a=this.shadowRoot?.querySelectorAll(".digit-input");if(a){const t=this.displayValues.findIndex(t=>!t);a[t>=0?t:this.length-1].focus()}}commit(){if(this.disabled)return;const t=this.getRawFromDisplay(),i=this.withSeparator?this.addSeparators(t):t;this.validationActive=!0;const s=this.computeValidationErrors(i);this.validationErrors=s,this.dispatchEvent(new CustomEvent("validation-error",{detail:{errors:[...s]},bubbles:!0,composed:!0})),this.applyInvalidClass(s.length>0),this.invalid=s.length>0,this.syncFormValue(),this.syncValidity(),i!==this._lastCommitted&&(this._lastCommitted=i,this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:i},bubbles:!0,composed:!0})))}reset(){this.disabled||(this.validationErrors=[],this.validationActive=!1,this.invalid=!1,this.ensureDisplayBuffer(),this.displayValues=Array.from({length:this.length},()=>""),this.value=(this.withSeparator,""),this._lastCommitted="",queueMicrotask(()=>{this.applyInputsFromDisplay(),this.applyInvalidClass(!1)}),this.syncFormValue(),this.syncValidity(),this.dispatchEvent(new CustomEvent("value-cleared",{detail:{value:""},bubbles:!0,composed:!0})))}focus(){const t=this.shadowRoot?.querySelector(".digit-input"),i=this.shadowRoot?.querySelector(".input-wrapper");t&&(t.focus(),i&&(i.classList.remove("shake"),i.offsetWidth,i.classList.add("shake")))}validateInput(){this.validationActive=!0;const t=this.getRawFromDisplay(),i=this.withSeparator?this.addSeparators(t):t,s=this.computeValidationErrors(i);return this.validationErrors=s,this.dispatchEvent(new CustomEvent("validation-error",{detail:{errors:[...s]},bubbles:!0,composed:!0})),this.applyInvalidClass(s.length>0),this.toggleAttribute("aria-invalid",s.length>0),this.syncFormValue(),this.syncValidity(),0===s.length}computeValidationErrors(t){const i=[];if(this.getRawFromDisplay().length<this.length)return i;if(Array.isArray(this.validations)&&this.validations.length)for(let s=0;s<this.validations.length;s++)try{const a=this.validations[s](t);!0!==a&&i.push("string"==typeof a?a:`Validation ${s} failed.`)}catch(t){i.push(`Error in validation ${s}: ${String(t?.message??t)}`)}return i}normalizeRaw(t){const i=this.separator||"-",s=(t??"").replace(new RegExp(`\\${i}`,"g"),""),a=this.alphanumeric?/[a-zA-Z0-9]/g:/\d/g;return(s.match(a)??[]).join("").slice(0,this.length)}addSeparators(t){if(!t)return"";const i=t.split("");return(Array.isArray(this.separatorPositions)?this.separatorPositions:[]).forEach((t,s)=>{t<=i.length+s&&i.splice(t+s,0,this.separator)}),i.join("")}ensureDisplayBuffer(){if(this.displayValues.length!==this.length){const t=this.displayValues;this.displayValues=Array.from({length:this.length},(i,s)=>t[s]??"")}}syncDisplayFromValue(){const t=this.normalizeRaw(this.value??"");this.displayValues=Array.from({length:this.length},(i,s)=>t[s]??"")}getRawFromDisplay(){return(this.displayValues.join("")??"").slice(0,this.length)}applyInputsFromDisplay(){const t=this.shadowRoot?.querySelectorAll(".digit-input");t&&t.forEach((t,i)=>{t.value=this.displayValues[i]??""})}applyInvalidClass(t){const i=this.shadowRoot?.querySelectorAll(".digit-input");i&&i.forEach(i=>i.classList.toggle("invalid",t))}renderInputFields(){const t=[];let i=0,s=[];const e=Array.isArray(this.separatorPositions)?this.separatorPositions:[];for(let r=0;r<this.length;r++)e[i]===r&&(t.push(a`<div class="group" part="group">${s}</div>`),t.push(a`<span class="separator" part="separator"
|
|
100
|
-
>${this.separator}</span
|
|
101
|
-
>`),s=[],i++),s.push(a`
|
|
102
|
-
<input
|
|
103
|
-
class="digit-input"
|
|
104
|
-
part="input"
|
|
105
|
-
.type=${this.masked?"password":"text"}
|
|
106
|
-
maxlength="1"
|
|
107
|
-
inputmode=${this.alphanumeric?"text":"numeric"}
|
|
108
|
-
autocomplete=${"one-time-code"}
|
|
109
|
-
.value=${o(this.displayValues[r]??"")}
|
|
110
|
-
?disabled=${this.disabled}
|
|
111
|
-
.readOnly=${this.readonly}
|
|
112
|
-
@input=${t=>this.handleInput(t,r)}
|
|
113
|
-
@keydown=${t=>this.handleKeydown(t,r)}
|
|
114
|
-
@paste=${t=>this.handlePaste(t)}
|
|
115
|
-
@change=${()=>this.commit()}
|
|
116
|
-
aria-invalid=${this.validationActive&&this.validationErrors.length>0?"true":"false"}
|
|
117
|
-
aria-label="Serial character ${r+1} of ${this.length}"
|
|
118
|
-
/>
|
|
119
|
-
`);return s.length&&t.push(a`<div class="group" part="group">${s}</div>`),t}render(){return a`
|
|
120
|
-
<div
|
|
121
|
-
class="input-wrapper"
|
|
122
|
-
part="wrapper"
|
|
123
|
-
role="group"
|
|
124
|
-
aria-label="Serial input"
|
|
125
|
-
>
|
|
126
|
-
${this.renderInputFields()}
|
|
127
|
-
</div>
|
|
128
|
-
|
|
129
|
-
${this.showErrors&&this.validationErrors.length>0&&this.validationActive?a`<div class="error-message" part="error">
|
|
130
|
-
${this.validationErrors[0]}
|
|
131
|
-
</div>`:""}
|
|
132
|
-
`}};t([e({type:Number}),i("design:type",Object)],n.prototype,"length",void 0),t([e({type:String}),i("design:type",Object)],n.prototype,"separator",void 0),t([e({type:Array}),i("design:type",Array)],n.prototype,"separatorPositions",void 0),t([e({type:Boolean}),i("design:type",Object)],n.prototype,"alphanumeric",void 0),t([e({type:String}),i("design:type",Object)],n.prototype,"value",void 0),t([e({type:Array}),i("design:type",Array)],n.prototype,"validations",void 0),t([e({type:Array}),i("design:type",Array)],n.prototype,"validationErrors",void 0),t([e({type:Boolean}),i("design:type",Object)],n.prototype,"showErrors",void 0),t([e({type:Boolean,reflect:!0}),i("design:type",Object)],n.prototype,"validationActive",void 0),t([e({type:Boolean}),i("design:type",Object)],n.prototype,"withSeparator",void 0),t([e({type:Boolean}),i("design:type",Object)],n.prototype,"masked",void 0),t([e({type:Boolean,reflect:!0}),i("design:type",Boolean)],n.prototype,"invalid",void 0),n=t([r("sky-serial"),i("design:paramtypes",[])],n);export{n as SkySerial};
|
|
133
|
-
//# sourceMappingURL=sky-serial.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"sky-serial.js","sources":["../../src/sky-serial/sky-serial.ts"],"sourcesContent":[null],"names":["SkySerial","FormControlBase","constructor","super","this","length","separator","separatorPositions","alphanumeric","value","validations","validationErrors","showErrors","validationActive","withSeparator","masked","invalid","displayValues","_lastCommitted","addEventListener","e","shadowRoot","related","relatedTarget","contains","commit","styles","css","firstUpdated","captureDefaultValue","ensureDisplayBuffer","syncDisplayFromValue","syncFormValue","syncValidity","willUpdate","changed","has","raw","normalizeRaw","canonical","addSeparators","Array","from","_","i","getFormValue","name","disabled","getRawFromDisplay","setValueFromFormState","state","s","queueMicrotask","applyInputsFromDisplay","getValidityAnchor","querySelector","undefined","isEmpty","trim","getNativeControl","validateForForm","valueToValidate","computeValidationErrors","onFormReset","defaultValue","applyInvalidClass","handleInput","index","readonly","preventDefault","inputs","querySelectorAll","target","ie","char","data","slice","isValid","test","rawValue","focus","every","c","handleKeydown","key","handlePaste","clipboardData","getData","firstEmptyIdx","findIndex","errors","dispatchEvent","CustomEvent","detail","bubbles","composed","reset","first","wrapper","classList","remove","offsetWidth","add","validateInput","toggleAttribute","isArray","r","push","err","String","message","v","sep","noSeps","replace","RegExp","allowed","match","join","chars","split","forEach","pos","splice","old","inp","isInvalid","toggle","renderInputFields","fields","separatorIndex","group","positions","html","live","render","__decorate","property","type","Number","prototype","Boolean","reflect","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./sky-skeleton";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './sky-skeleton.js';
|
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
import { LitElement } from "lit";
|
|
2
|
-
/**
|
|
3
|
-
* @element sky-skeleton
|
|
4
|
-
*
|
|
5
|
-
* @summary Skeleton loader with preset shapes and shimmer animation.
|
|
6
|
-
*
|
|
7
|
-
* @status stable
|
|
8
|
-
* @since 1.0.0
|
|
9
|
-
*
|
|
10
|
-
* @documentation https://library.sky-ui.com/components/skeleton
|
|
11
|
-
*
|
|
12
|
-
* @slot - Default slot for the real content that is revealed when `loading=false`.
|
|
13
|
-
*
|
|
14
|
-
* @csspart container - The outer container for skeleton/slot regions.
|
|
15
|
-
* @csspart skeleton-wrapper - Wrapper that contains the skeleton items.
|
|
16
|
-
* @csspart slot-wrapper - Wrapper that contains the slotted content.
|
|
17
|
-
* @csspart item - Each individual skeleton block (applies to all presets).
|
|
18
|
-
* @csspart shimmer - The animated overlay (implemented via `::after`).
|
|
19
|
-
*
|
|
20
|
-
* @property {string} type - Comma-separated list of skeleton presets.
|
|
21
|
-
* @property {boolean} loading - Shows skeletons when true and slot content when false.
|
|
22
|
-
* @property {string} width - Width for the fallback default block.
|
|
23
|
-
* @property {string} height - Height for the fallback default block.
|
|
24
|
-
* @property {string} radius - Border radius for the fallback default block: token (`none`, `sm`, `md`, `lg`, `full`) or CSS length.
|
|
25
|
-
*
|
|
26
|
-
* @Behavior
|
|
27
|
-
* - Renders one or more preset skeleton blocks based on `type`.
|
|
28
|
-
* - Toggles `aria-busy` with `loading` to expose loading state.
|
|
29
|
-
* - Reveals slotted content when loading completes.
|
|
30
|
-
*
|
|
31
|
-
* @example
|
|
32
|
-
* ```html
|
|
33
|
-
* <sky-skeleton loading type="avatar, text, actions">
|
|
34
|
-
* <article>
|
|
35
|
-
* <h3>Quarterly Report</h3>
|
|
36
|
-
* <p>Revenue and adoption trends are now available.</p>
|
|
37
|
-
* </article>
|
|
38
|
-
* </sky-skeleton>
|
|
39
|
-
* ```
|
|
40
|
-
* ```vue
|
|
41
|
-
* <template>
|
|
42
|
-
* <sky-skeleton loading type="avatar, text, actions">
|
|
43
|
-
* <article>
|
|
44
|
-
* <h3>Quarterly Report</h3>
|
|
45
|
-
* <p>Revenue and adoption trends are now available.</p>
|
|
46
|
-
* </article>
|
|
47
|
-
* </sky-skeleton>
|
|
48
|
-
* </template>
|
|
49
|
-
* ```
|
|
50
|
-
* ```jsx
|
|
51
|
-
* export default function Demo() {
|
|
52
|
-
* return (
|
|
53
|
-
* <sky-skeleton loading type="avatar, text, actions">
|
|
54
|
-
* <article>
|
|
55
|
-
* <h3>Quarterly Report</h3>
|
|
56
|
-
* <p>Revenue and adoption trends are now available.</p>
|
|
57
|
-
* </article>
|
|
58
|
-
* </sky-skeleton>
|
|
59
|
-
* );
|
|
60
|
-
* }
|
|
61
|
-
* ```
|
|
62
|
-
*/
|
|
63
|
-
export declare class SkySkeleton extends LitElement {
|
|
64
|
-
/** Comma‑separated preset types, e.g., `"avatar, text"`. */
|
|
65
|
-
type: string;
|
|
66
|
-
/** Show skeletons when true; show slotted content when false. */
|
|
67
|
-
loading: boolean;
|
|
68
|
-
/** Width for the fallback `default` block. */
|
|
69
|
-
width: string;
|
|
70
|
-
/** Height for the fallback `default` block. */
|
|
71
|
-
height: string;
|
|
72
|
-
/** Border‑radius for the fallback `default` block (token or CSS length). */
|
|
73
|
-
radius: string;
|
|
74
|
-
connectedCallback(): void;
|
|
75
|
-
static styles: import("lit").CSSResult;
|
|
76
|
-
protected updated(changed: Map<string, unknown>): void;
|
|
77
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
78
|
-
/** Render a single skeleton preset block. */
|
|
79
|
-
private renderSkeleton;
|
|
80
|
-
}
|