ngx-pk-ui 1.1.4 → 1.1.6
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/package.json +1 -1
- package/styles/pk-font.css +53 -0
- package/styles/pk-toggle.css +190 -0
- package/styles/pk-ui.css +1 -0
package/package.json
CHANGED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* pk-font — Thai & Lao Google Fonts helper classes for ngx-pk-ui
|
|
3
|
+
*
|
|
4
|
+
* All fonts are served from Google Fonts CDN (SIL Open Font License 1.1).
|
|
5
|
+
* Note: "Google Sans" is a proprietary Google typeface — not on Google Fonts.
|
|
6
|
+
*
|
|
7
|
+
* ── Thai ──────────────────────────────────────────────────────────────
|
|
8
|
+
* Bai Jamjuree · Chakra Petch · Charm · Charmonman · Kanit · Mitr
|
|
9
|
+
* Noto Sans Thai · Pattaya · Prompt · Sarabun · Sriracha · Srisakdi
|
|
10
|
+
* Thasadith · Trirong
|
|
11
|
+
*
|
|
12
|
+
* ── Lao ───────────────────────────────────────────────────────────────
|
|
13
|
+
* Noto Sans Lao · Noto Sans Lao Looped · Noto Serif Lao · Phetsarath
|
|
14
|
+
*
|
|
15
|
+
* Usage:
|
|
16
|
+
* <p class="pk-font-sarabun">ข้อความภาษาไทย</p>
|
|
17
|
+
* <p class="pk-font-noto-sans-lao">ຂໍ້ຄວາມພາສາລາວ</p>
|
|
18
|
+
*
|
|
19
|
+
* Import (opt-in — not included in pk-ui.css by default):
|
|
20
|
+
* @import 'ngx-pk-ui/styles/pk-font.css';
|
|
21
|
+
*/
|
|
22
|
+
|
|
23
|
+
/* ─── Thai fonts ──────────────────────────────────────────────────── */
|
|
24
|
+
|
|
25
|
+
@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@300;400;500;600;700&family=Chakra+Petch:wght@300;400;500;600;700&family=Charm:wght@400;700&family=Charmonman:wght@400;700&family=Kanit:wght@300;400;500;600;700&family=Mitr:wght@300;400;500;600;700&family=Noto+Sans+Thai:wght@300;400;500;600;700&family=Pattaya&family=Prompt:wght@300;400;500;600;700&family=Sarabun:wght@300;400;500;600;700&family=Sriracha&family=Srisakdi:wght@400;700&family=Thasadith:wght@400;700&family=Trirong:wght@300;400;500;600;700&display=swap');
|
|
26
|
+
|
|
27
|
+
/* ─── Lao fonts ───────────────────────────────────────────────────── */
|
|
28
|
+
|
|
29
|
+
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Lao:wght@300;400;500;600;700&family=Noto+Sans+Lao+Looped:wght@300;400;500;600;700&family=Noto+Serif+Lao:wght@300;400;500;600;700&family=Phetsarath:wght@400;700&display=swap');
|
|
30
|
+
|
|
31
|
+
/* ─── Thai class map ──────────────────────────────────────────────── */
|
|
32
|
+
|
|
33
|
+
.pk-font-bai-jamjuree { font-family: 'Bai Jamjuree', sans-serif; }
|
|
34
|
+
.pk-font-chakra-petch { font-family: 'Chakra Petch', sans-serif; }
|
|
35
|
+
.pk-font-charm { font-family: 'Charm', cursive; }
|
|
36
|
+
.pk-font-charmonman { font-family: 'Charmonman', cursive; }
|
|
37
|
+
.pk-font-kanit { font-family: 'Kanit', sans-serif; }
|
|
38
|
+
.pk-font-mitr { font-family: 'Mitr', sans-serif; }
|
|
39
|
+
.pk-font-noto-sans-thai { font-family: 'Noto Sans Thai', sans-serif; }
|
|
40
|
+
.pk-font-pattaya { font-family: 'Pattaya', sans-serif; }
|
|
41
|
+
.pk-font-prompt { font-family: 'Prompt', sans-serif; }
|
|
42
|
+
.pk-font-sarabun { font-family: 'Sarabun', sans-serif; }
|
|
43
|
+
.pk-font-sriracha { font-family: 'Sriracha', cursive; }
|
|
44
|
+
.pk-font-srisakdi { font-family: 'Srisakdi', cursive; }
|
|
45
|
+
.pk-font-thasadith { font-family: 'Thasadith', sans-serif; }
|
|
46
|
+
.pk-font-trirong { font-family: 'Trirong', serif; }
|
|
47
|
+
|
|
48
|
+
/* ─── Lao class map ───────────────────────────────────────────────── */
|
|
49
|
+
|
|
50
|
+
.pk-font-noto-sans-lao { font-family: 'Noto Sans Lao', sans-serif; }
|
|
51
|
+
.pk-font-noto-sans-lao-looped { font-family: 'Noto Sans Lao Looped', sans-serif; }
|
|
52
|
+
.pk-font-noto-serif-lao { font-family: 'Noto Serif Lao', serif; }
|
|
53
|
+
.pk-font-phetsarath { font-family: 'Phetsarath', sans-serif; }
|
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* pk-toggle — Toggle switch CSS for ngx-pk-ui
|
|
3
|
+
*
|
|
4
|
+
* Replaces <input type="checkbox"> with a styled toggle switch.
|
|
5
|
+
* Uses a visually-hidden checkbox + sibling label — fully accessible,
|
|
6
|
+
* keyboard-operable, and works without any JavaScript.
|
|
7
|
+
*
|
|
8
|
+
* Structure:
|
|
9
|
+
* <label class="pk-toggle">
|
|
10
|
+
* <input type="checkbox" />
|
|
11
|
+
* <span class="pk-toggle__track"></span>
|
|
12
|
+
* <span class="pk-toggle__label">Label text</span> ← optional
|
|
13
|
+
* </label>
|
|
14
|
+
*
|
|
15
|
+
* Variants: pk-toggle-primary (default) | pk-toggle-success | pk-toggle-warn | pk-toggle-error
|
|
16
|
+
* Modifiers: pk-toggle-sm | pk-toggle-lg | pk-toggle-label-left
|
|
17
|
+
*
|
|
18
|
+
* Usage:
|
|
19
|
+
* <label class="pk-toggle">
|
|
20
|
+
* <input type="checkbox" />
|
|
21
|
+
* <span class="pk-toggle__track"></span>
|
|
22
|
+
* </label>
|
|
23
|
+
*
|
|
24
|
+
* <label class="pk-toggle pk-toggle-success">
|
|
25
|
+
* <input type="checkbox" checked />
|
|
26
|
+
* <span class="pk-toggle__track"></span>
|
|
27
|
+
* <span class="pk-toggle__label">Enable notifications</span>
|
|
28
|
+
* </label>
|
|
29
|
+
*
|
|
30
|
+
* <!-- Disabled -->
|
|
31
|
+
* <label class="pk-toggle">
|
|
32
|
+
* <input type="checkbox" disabled />
|
|
33
|
+
* <span class="pk-toggle__track"></span>
|
|
34
|
+
* <span class="pk-toggle__label">Disabled</span>
|
|
35
|
+
* </label>
|
|
36
|
+
*/
|
|
37
|
+
|
|
38
|
+
/* ─── CSS Custom Properties ───────────────────────────────────────── */
|
|
39
|
+
|
|
40
|
+
:root {
|
|
41
|
+
--pk-toggle-off-bg: #bdbdbd;
|
|
42
|
+
--pk-toggle-thumb: #fff;
|
|
43
|
+
--pk-toggle-shadow: 0 1px 4px rgba(0,0,0,0.25);
|
|
44
|
+
--pk-toggle-duration: 0.22s;
|
|
45
|
+
|
|
46
|
+
/* Track dimensions (md) */
|
|
47
|
+
--pk-toggle-width: 44px;
|
|
48
|
+
--pk-toggle-height: 24px;
|
|
49
|
+
--pk-toggle-thumb-size: 18px;
|
|
50
|
+
--pk-toggle-thumb-inset: 3px;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/* ─── Wrapper label ───────────────────────────────────────────────── */
|
|
54
|
+
|
|
55
|
+
.pk-toggle {
|
|
56
|
+
display: inline-flex;
|
|
57
|
+
align-items: center;
|
|
58
|
+
gap: 10px;
|
|
59
|
+
cursor: pointer;
|
|
60
|
+
user-select: none;
|
|
61
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
62
|
+
font-size: 0.9rem;
|
|
63
|
+
color: #333;
|
|
64
|
+
vertical-align: middle;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* ─── Visually-hidden native checkbox ────────────────────────────── */
|
|
68
|
+
|
|
69
|
+
.pk-toggle input[type="checkbox"] {
|
|
70
|
+
position: absolute;
|
|
71
|
+
width: 1px;
|
|
72
|
+
height: 1px;
|
|
73
|
+
margin: -1px;
|
|
74
|
+
padding: 0;
|
|
75
|
+
overflow: hidden;
|
|
76
|
+
clip: rect(0, 0, 0, 0);
|
|
77
|
+
white-space: nowrap;
|
|
78
|
+
border: 0;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/* ─── Track ───────────────────────────────────────────────────────── */
|
|
82
|
+
|
|
83
|
+
.pk-toggle__track {
|
|
84
|
+
position: relative;
|
|
85
|
+
display: inline-block;
|
|
86
|
+
flex-shrink: 0;
|
|
87
|
+
width: var(--pk-toggle-width);
|
|
88
|
+
height: var(--pk-toggle-height);
|
|
89
|
+
background-color: var(--pk-toggle-off-bg);
|
|
90
|
+
border-radius: 9999px;
|
|
91
|
+
transition: background-color var(--pk-toggle-duration) ease;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* Thumb (pseudo-element) */
|
|
95
|
+
.pk-toggle__track::after {
|
|
96
|
+
content: '';
|
|
97
|
+
position: absolute;
|
|
98
|
+
top: var(--pk-toggle-thumb-inset);
|
|
99
|
+
left: var(--pk-toggle-thumb-inset);
|
|
100
|
+
width: var(--pk-toggle-thumb-size);
|
|
101
|
+
height: var(--pk-toggle-thumb-size);
|
|
102
|
+
background-color: var(--pk-toggle-thumb);
|
|
103
|
+
border-radius: 50%;
|
|
104
|
+
box-shadow: var(--pk-toggle-shadow);
|
|
105
|
+
transition: transform var(--pk-toggle-duration) ease,
|
|
106
|
+
box-shadow var(--pk-toggle-duration) ease;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/* ─── Checked state — default (primary) ──────────────────────────── */
|
|
110
|
+
|
|
111
|
+
.pk-toggle input[type="checkbox"]:checked + .pk-toggle__track {
|
|
112
|
+
background-color: var(--pk-btn-primary, #1976d2);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.pk-toggle input[type="checkbox"]:checked + .pk-toggle__track::after {
|
|
116
|
+
transform: translateX(calc(var(--pk-toggle-width) - var(--pk-toggle-thumb-size) - var(--pk-toggle-thumb-inset) * 2));
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/* ─── Focus ring (keyboard accessibility) ────────────────────────── */
|
|
120
|
+
|
|
121
|
+
.pk-toggle input[type="checkbox"]:focus-visible + .pk-toggle__track {
|
|
122
|
+
outline: 2px solid var(--pk-btn-primary, #1976d2);
|
|
123
|
+
outline-offset: 2px;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
/* ─── Disabled ────────────────────────────────────────────────────── */
|
|
127
|
+
|
|
128
|
+
.pk-toggle input[type="checkbox"]:disabled + .pk-toggle__track {
|
|
129
|
+
opacity: 0.45;
|
|
130
|
+
cursor: not-allowed;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.pk-toggle:has(input[type="checkbox"]:disabled) {
|
|
134
|
+
cursor: not-allowed;
|
|
135
|
+
color: #9e9e9e;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/* ─── Color Variants ──────────────────────────────────────────────── */
|
|
139
|
+
|
|
140
|
+
.pk-toggle-success input[type="checkbox"]:checked + .pk-toggle__track {
|
|
141
|
+
background-color: var(--pk-btn-success, #43a047);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.pk-toggle-success input[type="checkbox"]:focus-visible + .pk-toggle__track {
|
|
145
|
+
outline-color: var(--pk-btn-success, #43a047);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.pk-toggle-warn input[type="checkbox"]:checked + .pk-toggle__track {
|
|
149
|
+
background-color: var(--pk-btn-warn, #fb8c00);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.pk-toggle-warn input[type="checkbox"]:focus-visible + .pk-toggle__track {
|
|
153
|
+
outline-color: var(--pk-btn-warn, #fb8c00);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.pk-toggle-error input[type="checkbox"]:checked + .pk-toggle__track {
|
|
157
|
+
background-color: var(--pk-btn-error, #e53935);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.pk-toggle-error input[type="checkbox"]:focus-visible + .pk-toggle__track {
|
|
161
|
+
outline-color: var(--pk-btn-error, #e53935);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
/* ─── Size: sm ────────────────────────────────────────────────────── */
|
|
165
|
+
|
|
166
|
+
.pk-toggle-sm {
|
|
167
|
+
--pk-toggle-width: 34px;
|
|
168
|
+
--pk-toggle-height: 18px;
|
|
169
|
+
--pk-toggle-thumb-size: 12px;
|
|
170
|
+
--pk-toggle-thumb-inset: 3px;
|
|
171
|
+
font-size: 0.8rem;
|
|
172
|
+
gap: 7px;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
/* ─── Size: lg ────────────────────────────────────────────────────── */
|
|
176
|
+
|
|
177
|
+
.pk-toggle-lg {
|
|
178
|
+
--pk-toggle-width: 56px;
|
|
179
|
+
--pk-toggle-height: 30px;
|
|
180
|
+
--pk-toggle-thumb-size: 22px;
|
|
181
|
+
--pk-toggle-thumb-inset: 4px;
|
|
182
|
+
font-size: 1rem;
|
|
183
|
+
gap: 12px;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
/* ─── Label on the left ───────────────────────────────────────────── */
|
|
187
|
+
|
|
188
|
+
.pk-toggle-label-left {
|
|
189
|
+
flex-direction: row-reverse;
|
|
190
|
+
}
|