ds-one 0.3.0-alpha.4 → 0.3.0-alpha.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/DS1/1-root/one.css +9 -8
- package/DS1/2-core/ds-gap.ts +12 -3
- package/DS1/2-core/ds-input.ts +74 -1
- package/DS1/2-core/generated/ds-icon-map.ts +10 -0
- package/DS1/2-core/styles/ds-button.css +3 -2
- package/DS1/2-core/styles/ds-text.css +5 -0
- package/DS1/x-icon/exercise.svg +4 -0
- package/DS1/x-icon/life.svg +9 -0
- package/DS1/x-icon/rewind.svg +5 -0
- package/DS1/x-icon/school.svg +5 -0
- package/DS1/x-icon/work.svg +4 -0
- package/README.md +2 -2
- package/dist/2-core/ds-gap.d.ts +3 -2
- package/dist/2-core/ds-gap.d.ts.map +1 -1
- package/dist/2-core/ds-gap.js +9 -1
- package/dist/2-core/ds-input.d.ts +15 -0
- package/dist/2-core/ds-input.d.ts.map +1 -1
- package/dist/2-core/ds-input.js +51 -1
- package/dist/2-core/generated/ds-icon-map.d.ts +1 -1
- package/dist/2-core/generated/ds-icon-map.d.ts.map +1 -1
- package/dist/2-core/generated/ds-icon-map.js +10 -0
- package/dist/ds-one.bundle.js +74 -6
- package/dist/ds-one.bundle.js.map +1 -1
- package/dist/ds-one.bundle.min.js +249 -182
- package/dist/ds-one.bundle.min.js.map +1 -1
- package/package.json +1 -1
package/DS1/1-root/one.css
CHANGED
|
@@ -1,22 +1,25 @@
|
|
|
1
|
-
/* version 0.3.0-alpha.
|
|
1
|
+
/* version 0.3.0-alpha.6 */
|
|
2
2
|
|
|
3
|
-
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@
|
|
4
|
-
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@
|
|
5
|
-
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@
|
|
3
|
+
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&display=swap");
|
|
4
|
+
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@350&display=swap");
|
|
5
|
+
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@350&display=swap");
|
|
6
6
|
|
|
7
7
|
@font-face {
|
|
8
8
|
font-family: GT-America-Standard-Regular;
|
|
9
9
|
src: url("./fonts/GT-America-Standard-Regular.woff2") format("woff2");
|
|
10
|
+
font-display: swap;
|
|
10
11
|
}
|
|
11
12
|
|
|
12
13
|
@font-face {
|
|
13
14
|
font-family: GT-America-Standard-Medium;
|
|
14
15
|
src: url("./fonts/GT-America-Standard-Medium.woff2") format("woff2");
|
|
16
|
+
font-display: swap;
|
|
15
17
|
}
|
|
16
18
|
|
|
17
19
|
@font-face {
|
|
18
20
|
font-family: GT-America-Compressed-Regular;
|
|
19
21
|
src: url("./fonts/GT-America-Compressed-Regular.woff2") format("woff2");
|
|
22
|
+
font-display: swap;
|
|
20
23
|
}
|
|
21
24
|
|
|
22
25
|
input {
|
|
@@ -165,11 +168,9 @@ input {
|
|
|
165
168
|
|
|
166
169
|
/* button */
|
|
167
170
|
--button-background-color-primary: var(--accent-color);
|
|
168
|
-
--button-background-color-secondary: light
|
|
169
|
-
var(--slate-light),
|
|
170
|
-
var(--slate-dark)
|
|
171
|
-
);
|
|
171
|
+
--button-background-color-secondary: var(--slate-light);
|
|
172
172
|
--button-text-color: light-dark(var(--black), var(--white));
|
|
173
|
+
--button-text-color-on-light: var(--black);
|
|
173
174
|
--button-text-color-secondary: light-dark(
|
|
174
175
|
var(--slate-dark),
|
|
175
176
|
var(--slate-light)
|
package/DS1/2-core/ds-gap.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { LitElement, html, unsafeCSS } from "lit";
|
|
1
|
+
import { LitElement, html, unsafeCSS, PropertyValues } from "lit";
|
|
2
2
|
import styles from "./styles/ds-gap.css?inline";
|
|
3
3
|
|
|
4
4
|
/**
|
|
@@ -15,15 +15,24 @@ export class Gap extends LitElement {
|
|
|
15
15
|
size: { type: String, reflect: true },
|
|
16
16
|
};
|
|
17
17
|
|
|
18
|
-
declare size
|
|
18
|
+
declare size?: string;
|
|
19
19
|
|
|
20
20
|
constructor() {
|
|
21
21
|
super();
|
|
22
|
-
this.size = "";
|
|
23
22
|
}
|
|
24
23
|
|
|
25
24
|
static styles = unsafeCSS(styles);
|
|
26
25
|
|
|
26
|
+
updated(changedProperties: PropertyValues<this>) {
|
|
27
|
+
super.updated(changedProperties);
|
|
28
|
+
// Remove size attribute if it's empty or undefined
|
|
29
|
+
if (changedProperties.has("size")) {
|
|
30
|
+
if (!this.size || this.size === "") {
|
|
31
|
+
this.removeAttribute("size");
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
27
36
|
render() {
|
|
28
37
|
return html``;
|
|
29
38
|
}
|
package/DS1/2-core/ds-input.ts
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
// Input component for text and other input types
|
|
3
3
|
|
|
4
4
|
import { LitElement, html, unsafeCSS } from "lit";
|
|
5
|
+
import { getText, currentLanguage } from "../0-face/i18n";
|
|
5
6
|
import "./ds-text";
|
|
6
7
|
import styles from "./styles/ds-input.css?inline";
|
|
7
8
|
|
|
@@ -29,6 +30,8 @@ export class Input extends LitElement {
|
|
|
29
30
|
error: { type: String },
|
|
30
31
|
errorText: { type: String, attribute: "error-text" },
|
|
31
32
|
_focused: { type: Boolean, state: true },
|
|
33
|
+
_placeholder: { type: String, state: true },
|
|
34
|
+
_currentLanguage: { type: String, state: true },
|
|
32
35
|
};
|
|
33
36
|
|
|
34
37
|
declare type:
|
|
@@ -63,6 +66,9 @@ export class Input extends LitElement {
|
|
|
63
66
|
declare error: string;
|
|
64
67
|
declare errorText: string;
|
|
65
68
|
declare _focused: boolean;
|
|
69
|
+
declare _placeholder: string;
|
|
70
|
+
declare _currentLanguage: string;
|
|
71
|
+
private boundHandlers: { languageChanged: EventListener };
|
|
66
72
|
|
|
67
73
|
constructor() {
|
|
68
74
|
super();
|
|
@@ -88,10 +94,77 @@ export class Input extends LitElement {
|
|
|
88
94
|
this.error = "";
|
|
89
95
|
this.errorText = "";
|
|
90
96
|
this._focused = false;
|
|
97
|
+
this._placeholder = "";
|
|
98
|
+
this._currentLanguage = currentLanguage.value;
|
|
99
|
+
|
|
100
|
+
// Create bound event handlers for proper cleanup
|
|
101
|
+
this.boundHandlers = {
|
|
102
|
+
languageChanged: (() => {
|
|
103
|
+
this._currentLanguage = currentLanguage.value;
|
|
104
|
+
this._loadPlaceholder();
|
|
105
|
+
this.requestUpdate();
|
|
106
|
+
}) as EventListener,
|
|
107
|
+
};
|
|
91
108
|
}
|
|
92
109
|
|
|
93
110
|
static styles = unsafeCSS(styles);
|
|
94
111
|
|
|
112
|
+
connectedCallback() {
|
|
113
|
+
super.connectedCallback();
|
|
114
|
+
this._currentLanguage = currentLanguage.value;
|
|
115
|
+
this._loadPlaceholder();
|
|
116
|
+
|
|
117
|
+
// Listen for language changes
|
|
118
|
+
window.addEventListener(
|
|
119
|
+
"language-changed",
|
|
120
|
+
this.boundHandlers.languageChanged
|
|
121
|
+
);
|
|
122
|
+
|
|
123
|
+
// Also listen for translations loaded event
|
|
124
|
+
window.addEventListener(
|
|
125
|
+
"translations-loaded",
|
|
126
|
+
this.boundHandlers.languageChanged
|
|
127
|
+
);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
disconnectedCallback() {
|
|
131
|
+
super.disconnectedCallback();
|
|
132
|
+
window.removeEventListener(
|
|
133
|
+
"language-changed",
|
|
134
|
+
this.boundHandlers.languageChanged
|
|
135
|
+
);
|
|
136
|
+
window.removeEventListener(
|
|
137
|
+
"translations-loaded",
|
|
138
|
+
this.boundHandlers.languageChanged
|
|
139
|
+
);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
updated(changedProperties: Map<string, unknown>) {
|
|
143
|
+
super.updated(changedProperties);
|
|
144
|
+
|
|
145
|
+
if (changedProperties.has("placeholder") || changedProperties.has("placeholderKey")) {
|
|
146
|
+
this._loadPlaceholder();
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
private _loadPlaceholder() {
|
|
151
|
+
const placeholderText = this.placeholderKey || this.placeholder;
|
|
152
|
+
if (!placeholderText) {
|
|
153
|
+
this._placeholder = "";
|
|
154
|
+
this.requestUpdate();
|
|
155
|
+
return;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
try {
|
|
159
|
+
const translatedText = getText(placeholderText);
|
|
160
|
+
this._placeholder = translatedText || placeholderText;
|
|
161
|
+
} catch (error) {
|
|
162
|
+
// Fallback to original text if translation fails
|
|
163
|
+
this._placeholder = placeholderText;
|
|
164
|
+
}
|
|
165
|
+
this.requestUpdate();
|
|
166
|
+
}
|
|
167
|
+
|
|
95
168
|
private _handleInput(e: Event): void {
|
|
96
169
|
const target = e.target as HTMLInputElement;
|
|
97
170
|
this.value = target.value;
|
|
@@ -158,7 +231,7 @@ export class Input extends LitElement {
|
|
|
158
231
|
.type=${this.type}
|
|
159
232
|
.name=${this.name}
|
|
160
233
|
.value=${this.value}
|
|
161
|
-
.placeholder=${this.placeholder}
|
|
234
|
+
.placeholder=${this._placeholder || this.placeholder}
|
|
162
235
|
?disabled=${this.disabled}
|
|
163
236
|
?readonly=${this.readonly}
|
|
164
237
|
?required=${this.required}
|
|
@@ -27,6 +27,7 @@ export const iconNameToSvgMap: Record<string, string> = {
|
|
|
27
27
|
"down": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7.49645 12.5178V2.86102e-06H8.50702L8.50841 12.5174L11.4156 9.61018L12.1095 10.317L8.00173 14.4248L3.8905 10.3135L4.59784 9.60619L7.49645 12.5178Z\" fill=\"#1E1E1E\"/>\n</svg>",
|
|
28
28
|
"duplicate": "<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect x=\"3\" y=\"3\" width=\"8\" height=\"8\" rx=\"1\" stroke=\"currentColor\" stroke-width=\"1.2\" fill=\"none\"/>\n<path d=\"M9 3V2C9 1.44772 8.55228 1 8 1H2C1.44772 1 1 1.44772 1 2V8C1 8.55228 1.44772 9 2 9H3\" stroke=\"currentColor\" stroke-width=\"1.2\" fill=\"none\"/>\n</svg>",
|
|
29
29
|
"email": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"11\" viewBox=\"0 0 16 11\" fill=\"none\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M14.0871 0.989435L0.930906 0.988037L0.930542 11L13.0753 11H14.0871V0.989435ZM7.50709 8.0566L1.94249 2.49201L1.94248 9.98814H13.0753V2.48839L7.50709 8.0566ZM2.85116 2L7.50709 6.65593L12.1515 1.99952L2.85116 2Z\" fill=\"currentColor\"/>\n</svg>",
|
|
30
|
+
"exercise": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M9.11131 4.50523C8.89226 4.50523 8.69548 4.45325 8.52098 4.3493C8.34648 4.24163 8.20539 4.10054 8.09772 3.92604C7.99377 3.75154 7.94179 3.55662 7.94179 3.34128C7.94179 3.12594 7.99377 2.93102 8.09772 2.75652C8.20539 2.5783 8.34648 2.43722 8.52098 2.33326C8.69548 2.2293 8.89226 2.17732 9.11131 2.17732C9.32665 2.17732 9.52157 2.2293 9.69607 2.33326C9.87057 2.43722 10.0098 2.5783 10.1138 2.75652C10.2214 2.93102 10.2753 3.12594 10.2753 3.34128C10.2753 3.55662 10.2214 3.75154 10.1138 3.92604C10.0098 4.10054 9.87057 4.24163 9.69607 4.3493C9.52157 4.45325 9.32665 4.50523 9.11131 4.50523ZM7.29019 9.12207C7.13797 9.03668 6.98389 8.94386 6.82795 8.84361C6.67202 8.73965 6.55692 8.60228 6.48267 8.43149C6.40841 8.25699 6.41584 8.01938 6.50494 7.71864L6.9282 6.19269C6.9579 6.09616 6.94305 6.0219 6.88365 5.96992C6.82424 5.91794 6.7537 5.89567 6.67202 5.90309L5.93132 5.95322L5.70855 7.49031C5.66029 7.83559 5.48022 7.99524 5.16834 7.96925C5.01983 7.9544 4.90659 7.89314 4.82862 7.78547C4.75066 7.67409 4.72281 7.53486 4.74509 7.36778L5.00127 5.47984C5.01983 5.3239 5.07738 5.19952 5.17391 5.1067C5.27044 5.01388 5.39482 4.9619 5.54705 4.95077L7.40715 4.82268C7.89723 4.78555 8.30193 4.83753 8.62123 4.97861C8.94052 5.11598 9.22084 5.34989 9.46217 5.68033L10.3755 6.94453L11.701 6.3542C11.8495 6.28737 11.985 6.27251 12.1075 6.30964C12.2338 6.34677 12.3284 6.43402 12.3915 6.57139C12.4584 6.70877 12.4658 6.83871 12.4138 6.96123C12.3618 7.08376 12.2597 7.17843 12.1075 7.24526L10.4256 7.9971C10.3143 8.04908 10.1992 8.05836 10.0803 8.02495C9.96525 7.99153 9.87429 7.92284 9.80746 7.81889L9.21713 6.9668C9.16143 6.88512 9.09089 6.84985 9.0055 6.86099C8.9201 6.87213 8.86441 6.92596 8.83842 7.0225L8.44301 8.38137L10.4312 9.68456C10.5834 9.7848 10.6688 9.9296 10.6874 10.119C10.7059 10.3083 10.6503 10.4568 10.5203 10.5645L8.69362 12.1183C8.54511 12.2445 8.3966 12.3021 8.24809 12.2909C8.10329 12.2835 7.98634 12.2297 7.89723 12.1294C7.81184 12.0292 7.77286 11.9085 7.78028 11.7674C7.78771 11.6226 7.86382 11.4908 8.00862 11.372L9.30066 10.2526L7.29019 9.12207ZM3.73707 13.6999C3.6294 13.6034 3.56814 13.4772 3.55329 13.3212C3.54215 13.1653 3.60712 13.0186 3.74821 12.8813L5.53034 11.1103L6.15409 8.89373C6.25062 9.01997 6.37128 9.13878 6.51608 9.25016C6.66088 9.35783 6.83352 9.46736 7.03401 9.57874L7.2178 9.68456L6.50494 11.5224C6.46039 11.6338 6.42326 11.7117 6.39356 11.7563C6.36386 11.7971 6.31188 11.8547 6.23762 11.9289L4.51675 13.6275C4.38309 13.7575 4.24572 13.8224 4.10463 13.8224C3.96355 13.8262 3.84103 13.7853 3.73707 13.6999Z\" fill=\"currentColor\"/>\n</svg>",
|
|
30
31
|
"expand": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n <path d=\"M0 5.81415V0H5.80924L5.81842 0.990424H1.70698L11.0089 10.2943L10.9997 6.18585H12V12H6.19076L6.18158 11.0096H10.293L0.99115 1.70573L1.00033 5.81415H0Z\" fill=\"currentColor\"/>\n</svg>",
|
|
31
32
|
"gallery": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0 16V0H16L0 16ZM0.706055 0.769531V1.80957H3.60547V10H4.83984V1.80957H7.73926V0.769531H0.706055Z\" fill=\"#1E1E1E\"/>\n</svg>",
|
|
32
33
|
"globe": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6.87775 12.5554C7.08028 12.6051 7.28795 12.6416 7.49983 12.664V11.8571C7.2467 11.5176 7.00708 11.1483 6.79982 10.753C6.49693 10.8285 6.20261 10.9278 5.9183 11.0454C6.19879 11.6048 6.53384 12.111 6.87775 12.5554Z\" fill=\"#1E1E1E\"/>\n<path d=\"M5.19187 8.49193C5.23389 9.09581 5.36568 9.66767 5.55639 10.2017C5.83545 10.0858 6.12511 9.9844 6.42434 9.90232C6.26416 9.4557 6.15312 8.98405 6.11253 8.49193H5.19187Z\" fill=\"#1E1E1E\"/>\n<path d=\"M6.87775 3.42868C7.08028 3.37904 7.28795 3.34252 7.49983 3.3201V4.12696C7.2467 4.46645 7.00708 4.83584 6.79982 5.23109C6.49693 5.15561 6.20261 5.05627 5.9183 4.93873C6.19879 4.37926 6.53384 3.87306 6.87775 3.42868Z\" fill=\"#1E1E1E\"/>\n<path d=\"M5.19187 7.49217C5.23389 6.88828 5.36568 6.31643 5.55639 5.7824C5.83545 5.89834 6.12511 5.9997 6.42434 6.08178C6.26416 6.52839 6.15312 7.00004 6.11253 7.49217H5.19187Z\" fill=\"#1E1E1E\"/>\n<path d=\"M2.30171 7.99205H3.30171C3.30172 7.82319 3.31063 7.65642 3.32801 7.49217C3.42195 6.60422 3.76325 5.79004 4.28172 5.11985C3.98894 4.93686 3.71427 4.74365 3.45958 4.54857C2.73299 5.50512 2.30174 6.69824 2.30171 7.99205Z\" fill=\"#1E1E1E\"/>\n<path d=\"M2.30171 7.99205C2.30174 9.28585 2.73299 10.479 3.45958 11.4355C3.71427 11.2404 3.98894 11.0472 4.28172 10.8642C3.76325 10.1941 3.42195 9.37987 3.32801 8.49193C3.31063 8.32768 3.30172 8.1609 3.30171 7.99205H2.30171Z\" fill=\"#1E1E1E\"/>\n<path d=\"M9.12215 12.5552C8.91963 12.6048 8.71196 12.6414 8.50008 12.6638V11.8569C8.75321 11.5174 8.99283 11.148 9.20009 10.7528C9.50298 10.8283 9.7973 10.9276 10.0816 11.0452C9.80112 11.6046 9.46607 12.1108 9.12215 12.5552Z\" fill=\"#1E1E1E\"/>\n<path d=\"M10.808 8.49171C10.766 9.0956 10.6342 9.66745 10.4435 10.2015C10.1645 10.0855 9.87479 9.98418 9.57557 9.90211C9.73575 9.45549 9.84678 8.98384 9.88738 8.49171H10.808Z\" fill=\"#1E1E1E\"/>\n<path d=\"M9.12215 3.42847C8.91963 3.37883 8.71196 3.34231 8.50008 3.31989V4.12675C8.75321 4.46624 8.99283 4.83563 9.20009 5.23088C9.50298 5.1554 9.7973 5.05606 10.0816 4.93852C9.80112 4.37905 9.46607 3.87284 9.12215 3.42847Z\" fill=\"#1E1E1E\"/>\n<path d=\"M10.808 7.49196C10.766 6.88807 10.6342 6.31622 10.4435 5.78218C10.1645 5.89813 9.87479 5.99949 9.57557 6.08156C9.73575 6.52818 9.84678 6.99983 9.88738 7.49196H10.808Z\" fill=\"#1E1E1E\"/>\n<path d=\"M13.6982 7.99205L12.6982 7.99184C12.6982 7.82298 12.6893 7.65621 12.6719 7.49196C12.578 6.60401 12.2367 5.78983 11.7182 5.11964C12.011 4.93665 12.2856 4.74344 12.5403 4.54836C13.2669 5.5049 13.6982 6.69824 13.6982 7.99205Z\" fill=\"#1E1E1E\"/>\n<path d=\"M13.6982 7.99205C13.6982 9.28585 13.2669 10.4788 12.5403 11.4353C12.2856 11.2402 12.011 11.047 11.7182 10.864C12.2367 10.1938 12.578 9.37966 12.6719 8.49171C12.6893 8.32746 12.6982 8.16069 12.6982 7.99184L13.6982 7.99205Z\" fill=\"#1E1E1E\"/>\n<path d=\"M6.872 13.5787C7.2366 13.6519 7.61379 13.6903 7.99995 13.6903V12.6903C7.83102 12.6903 7.66416 12.6814 7.49983 12.664C7.28795 12.6416 7.08028 12.6051 6.87775 12.5554C6.14481 12.3758 5.47939 12.0241 4.9267 11.5457C4.62544 11.7252 4.3403 11.9201 4.0736 12.1216C4.83631 12.847 5.79974 13.3633 6.872 13.5787Z\" fill=\"#1E1E1E\"/>\n<path d=\"M3.45958 11.4355C3.64564 11.6805 3.85108 11.9099 4.0736 12.1216C4.3403 11.9201 4.62544 11.7252 4.9267 11.5457C4.68981 11.3407 4.47363 11.1123 4.28172 10.8642C3.98894 11.0472 3.71427 11.2404 3.45958 11.4355Z\" fill=\"#1E1E1E\"/>\n<path d=\"M4.9267 11.5457C5.24061 11.3587 5.57202 11.1885 5.9183 11.0454C5.78333 10.7762 5.661 10.4946 5.55639 10.2017C5.10182 10.3906 4.6754 10.6182 4.28172 10.8642C4.47363 11.1123 4.68981 11.3407 4.9267 11.5457Z\" fill=\"#1E1E1E\"/>\n<path d=\"M5.9183 11.0454C6.20261 10.9278 6.49693 10.8285 6.79982 10.753C6.65732 10.4812 6.53011 10.1972 6.42434 9.90232C6.12511 9.9844 5.83545 10.0858 5.55639 10.2017C5.661 10.4946 5.78333 10.7762 5.9183 11.0454Z\" fill=\"#1E1E1E\"/>\n<path d=\"M6.79982 10.753C7.02849 10.696 7.26203 10.6526 7.49983 10.6253V9.70209C7.12963 9.73818 6.77058 9.80734 6.42434 9.90232C6.53011 10.1972 6.65732 10.4812 6.79982 10.753Z\" fill=\"#1E1E1E\"/>\n<path d=\"M7.49983 12.664C7.66416 12.6814 7.83102 12.6903 7.99995 12.6903V7.99205H3.30171C3.30172 8.1609 3.31063 8.32768 3.32801 8.49193H5.19187H6.11253H7.49983V9.70209V10.6253V11.8571V12.664Z\" fill=\"#1E1E1E\"/>\n<path d=\"M7.99995 12.6903C8.16889 12.6903 8.33575 12.6812 8.50008 12.6638V11.8569V10.6251V9.70188V8.49171H9.88738H10.808H12.6719C12.6893 8.32746 12.6982 8.16069 12.6982 7.99184L7.99995 7.99205V12.6903Z\" fill=\"#1E1E1E\"/>\n<path d=\"M8.50008 10.6251C8.73788 10.6524 8.97142 10.6958 9.20009 10.7528C9.34259 10.481 9.4698 10.197 9.57557 9.90211C9.22932 9.80713 8.87028 9.73797 8.50008 9.70188V10.6251Z\" fill=\"#1E1E1E\"/>\n<path d=\"M9.20009 10.7528C9.50298 10.8283 9.7973 10.9276 10.0816 11.0452C10.2166 10.7759 10.3389 10.4944 10.4435 10.2015C10.1645 10.0855 9.87479 9.98418 9.57557 9.90211C9.4698 10.197 9.34259 10.481 9.20009 10.7528Z\" fill=\"#1E1E1E\"/>\n<path d=\"M10.0816 11.0452C10.4279 11.1883 10.7593 11.3585 11.0732 11.5455C11.3101 11.3404 11.5263 11.1121 11.7182 10.864C11.3245 10.618 10.8981 10.3904 10.4435 10.2015C10.3389 10.4944 10.2166 10.7759 10.0816 11.0452Z\" fill=\"#1E1E1E\"/>\n<path d=\"M11.9263 12.1214C12.1488 11.9097 12.3543 11.6803 12.5403 11.4353C12.2856 11.2402 12.011 11.047 11.7182 10.864C11.5263 11.1121 11.3101 11.3404 11.0732 11.5455C11.3745 11.725 11.6596 11.9199 11.9263 12.1214Z\" fill=\"#1E1E1E\"/>\n<path d=\"M7.99995 13.6903C8.38611 13.6903 8.7633 13.6517 9.12791 13.5784C10.2002 13.3631 11.1636 12.8468 11.9263 12.1214C11.6596 11.9199 11.3745 11.725 11.0732 11.5455C10.5205 12.0239 9.8551 12.3756 9.12215 12.5552C8.91963 12.6048 8.71196 12.6414 8.50008 12.6638C8.33575 12.6812 8.16889 12.6903 7.99995 12.6903V13.6903Z\" fill=\"#1E1E1E\"/>\n<path d=\"M9.20009 5.23088C8.97142 5.28786 8.73788 5.33124 8.50008 5.3586V6.28179C8.87028 6.24571 9.22932 6.17654 9.57557 6.08156C9.4698 5.78665 9.34259 5.50265 9.20009 5.23088Z\" fill=\"#1E1E1E\"/>\n<path d=\"M7.49983 5.35882C7.26203 5.33145 7.02849 5.28807 6.79982 5.23109C6.65732 5.50286 6.53011 5.78686 6.42434 6.08178C6.77058 6.17675 7.12963 6.24592 7.49983 6.282V5.35882Z\" fill=\"#1E1E1E\"/>\n<path d=\"M6.79982 5.23109C6.49693 5.15561 6.20261 5.05627 5.9183 4.93873C5.78333 5.20794 5.661 5.48948 5.55639 5.7824C5.83545 5.89834 6.12511 5.9997 6.42434 6.08178C6.53011 5.78686 6.65732 5.50286 6.79982 5.23109Z\" fill=\"#1E1E1E\"/>\n<path d=\"M5.9183 4.93873C5.57202 4.79556 5.24061 4.62538 4.9267 4.43838C4.68981 4.64343 4.47363 4.87178 4.28172 5.11985C4.6754 5.36592 5.10182 5.59352 5.55639 5.7824C5.661 5.48948 5.78333 5.20794 5.9183 4.93873Z\" fill=\"#1E1E1E\"/>\n<path d=\"M4.0736 3.86253C3.85108 4.07417 3.64564 4.30362 3.45958 4.54857C3.71427 4.74365 3.98894 4.93686 4.28172 5.11985C4.47363 4.87178 4.68981 4.64343 4.9267 4.43838C4.62544 4.25892 4.3403 4.06396 4.0736 3.86253Z\" fill=\"#1E1E1E\"/>\n<path d=\"M7.99995 2.29381C7.61379 2.29381 7.2366 2.33222 6.872 2.40544C5.79974 2.62077 4.83631 3.13711 4.0736 3.86253C4.3403 4.06396 4.62544 4.25892 4.9267 4.43838C5.47939 3.95997 6.14481 3.60833 6.87775 3.42868C7.08028 3.37904 7.28795 3.34252 7.49983 3.3201C7.66416 3.30271 7.83102 3.2938 7.99995 3.2938V2.29381Z\" fill=\"#1E1E1E\"/>\n<path d=\"M7.99995 3.2938C7.83102 3.2938 7.66416 3.30271 7.49983 3.3201V4.12696V5.35882V6.282V7.49217H6.11253H5.19187H3.32801C3.31063 7.65642 3.30172 7.82319 3.30171 7.99205H7.99995V3.2938Z\" fill=\"#1E1E1E\"/>\n<path d=\"M8.50008 3.31989C8.33575 3.3025 8.16889 3.2938 7.99995 3.2938V7.99205L12.6982 7.99184C12.6982 7.82298 12.6893 7.65621 12.6719 7.49196H10.808H9.88738H8.50008V6.28179V5.3586V4.12675V3.31989Z\" fill=\"#1E1E1E\"/>\n<path d=\"M9.12791 2.40523C8.7633 2.33201 8.38611 2.29381 7.99995 2.29381V3.2938C8.16889 3.2938 8.33575 3.3025 8.50008 3.31989C8.71196 3.34231 8.91963 3.37883 9.12215 3.42847C9.8551 3.60812 10.5205 3.95976 11.0732 4.43817C11.3745 4.25871 11.6596 4.06375 11.9263 3.86232C11.1636 3.13689 10.2002 2.62056 9.12791 2.40523Z\" fill=\"#1E1E1E\"/>\n<path d=\"M10.0816 4.93852C9.7973 5.05606 9.50298 5.1554 9.20009 5.23088C9.34259 5.50265 9.4698 5.78665 9.57557 6.08156C9.87479 5.99949 10.1645 5.89813 10.4435 5.78218C10.3389 5.48926 10.2166 5.20772 10.0816 4.93852Z\" fill=\"#1E1E1E\"/>\n<path d=\"M11.0732 4.43817C10.7593 4.62517 10.4279 4.79535 10.0816 4.93852C10.2166 5.20772 10.3389 5.48926 10.4435 5.78218C10.8981 5.5933 11.3245 5.3657 11.7182 5.11964C11.5263 4.87157 11.3101 4.64322 11.0732 4.43817Z\" fill=\"#1E1E1E\"/>\n<path d=\"M12.5403 4.54836C12.3543 4.3034 12.1488 4.07396 11.9263 3.86232C11.6596 4.06375 11.3745 4.25871 11.0732 4.43817C11.3101 4.64322 11.5263 4.87157 11.7182 5.11964C12.011 4.93665 12.2856 4.74344 12.5403 4.54836Z\" fill=\"#1E1E1E\"/>\n</svg>",
|
|
@@ -37,6 +38,7 @@ export const iconNameToSvgMap: Record<string, string> = {
|
|
|
37
38
|
"icon": "<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect x=\"1\" y=\"1\" width=\"10\" height=\"10\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.2\" fill=\"none\"/>\n<circle cx=\"6\" cy=\"6\" r=\"2.5\" fill=\"currentColor\"/>\n</svg>",
|
|
38
39
|
"in": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12.1361 3.56571L7.99688 7.72965L3.86423 3.57226L4.5628 2.85638L7.48765 5.79873L7.49661 9.59381e-07L8.51508 0L8.50612 5.79873L11.4244 2.84983L12.1361 3.56571Z\" fill=\"#1E1E1E\"/>\n<path d=\"M3.86395 12.3337L8.00314 8.16974L12.1358 12.3271L11.4372 13.043L8.51238 10.1007L8.49783 16H7.47936L7.4939 10.1007L4.57558 13.0496L3.86395 12.3337Z\" fill=\"#1E1E1E\"/>\n</svg>",
|
|
39
40
|
"left": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"9\" viewBox=\"0 0 16 9\" fill=\"none\">\n <path d=\"M1.90697 3.60594H15.0636V4.61651L1.90734 4.61791L4.81456 7.52513L4.10774 8.21898L-1.23978e-05 4.11123L4.11122 0L4.81855 0.707338L1.90697 3.60594Z\" fill=\"currentColor\"/>\n</svg>",
|
|
41
|
+
"life": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3.76595 12.3556L12.2336 12.3556V13.3529L4.76332 13.3529L3.76595 13.3529V12.3556Z\" fill=\"currentColor\"/>\n<path d=\"M4.76332 13.3529L3.76595 13.3529V7.16597L4.76329 7.16597L4.76332 13.3529Z\" fill=\"currentColor\"/>\n<path d=\"M12.2336 13.3529H11.2363L11.2363 7.16599L12.2336 7.16597V13.3529Z\" fill=\"currentColor\"/>\n<path d=\"M11.6251 6.4395H10.6278L10.6278 4.16374L11.6251 4.16372V6.4395Z\" fill=\"currentColor\"/>\n<path d=\"M7.99993 2.64708L13.4713 8.11835L12.7661 8.82358L7.2947 3.35231L7.99993 2.64708Z\" fill=\"currentColor\"/>\n<path d=\"M3.23393 8.82358L2.52869 8.11832L7.99993 2.64708L8.70517 3.3523L3.23393 8.82358Z\" fill=\"currentColor\"/>\n</svg>",
|
|
40
42
|
"lock": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8 2.60742C9.53669 2.60746 10.7822 3.85296 10.7822 5.38965V7.64746H11.5996V13.3926H4.40039V7.64746H5.21777V5.38965C5.21779 3.85295 6.4633 2.60744 8 2.60742ZM8 3.62695C7.02663 3.62697 6.23733 4.41628 6.2373 5.38965V7.64746H9.7627V5.38965C9.76267 4.41629 8.97336 3.62699 8 3.62695Z\" fill=\"#1E1E1E\"/>\n</svg>",
|
|
41
43
|
"loop": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12.0037 1.96826L12.0037 7.12486L14.9023 4.21328L15.6096 4.92061L11.4984 9.03184L7.39064 4.92409L8.08449 4.21727L10.9917 7.12449L10.9931 2.98673L5.00853 3.00323V1.98475L12.0037 1.96826Z\" fill=\"#1E1E1E\"/>\n<path d=\"M3.99657 14.0318L3.99657 8.87523L1.09796 11.7868L0.390625 11.0795L4.50185 6.96825L8.6096 11.076L7.91576 11.7828L5.00853 8.8756L5.00714 13.0134L10.9917 12.9972V14.0157L3.99657 14.0318Z\" fill=\"#1E1E1E\"/>\n<path d=\"M10.9917 12.9972V14.0157H12.0037V12.9973V9.85949L10.9917 9.85912V12.9972Z\" fill=\"#1E1E1E\"/>\n<path d=\"M3.99657 5.1225V6.14098H5.00853V5.12251V1.98475L3.99657 1.98438V5.1225Z\" fill=\"#1E1E1E\"/>\n</svg>",
|
|
42
44
|
"mic": "<svg width=\"10\" height=\"14\" viewBox=\"0 0 10 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect x=\"2.5\" y=\"1\" width=\"5\" height=\"7\" rx=\"2.5\" stroke=\"currentColor\" stroke-width=\"1.2\" fill=\"none\"/>\n<path d=\"M1 6C1 8.76142 2.79086 11 5 11C7.20914 11 9 8.76142 9 6\" stroke=\"currentColor\" stroke-width=\"1.2\" fill=\"none\"/>\n<line x1=\"5\" y1=\"11\" x2=\"5\" y2=\"13\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\"/>\n</svg>",
|
|
@@ -46,8 +48,10 @@ export const iconNameToSvgMap: Record<string, string> = {
|
|
|
46
48
|
"open": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M1.96 7.81289V1.9592H7.80797L7.81721 2.95636H3.67836L13.0422 12.3235L13.033 8.18711H14.04V14.0408H8.19203L8.18279 13.0436H12.3216L2.95776 3.67653L2.967 7.81289H1.96Z\" fill=\"#1E1E1E\"/>\n</svg>",
|
|
47
49
|
"page": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12.9956 1.70508V14.2949H3.00439V1.70508H12.9956ZM3.92432 13.375H12.0757V2.625H3.92432V13.375ZM7.87842 7.85742V8.77734H5.12939V7.85742H7.87842ZM10.0259 5.92578V6.8457H5.12939V5.92578H10.0259ZM10.0259 3.99316V4.91406H5.12939V3.99316H10.0259Z\" fill=\"#1E1E1E\"/>\n</svg>",
|
|
48
50
|
"plus": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8.50235 2.6739L8.4996 7.5035L13.3334 7.51044L13.325 8.50193L8.49328 8.49569L8.49951 13.3274L7.49764 13.3268L7.50039 8.49717L2.66663 8.49024L2.67503 7.49875L7.50672 7.50499L7.50117 2.67261L8.50235 2.6739Z\" fill=\"#1E1E1E\"/>\n</svg>",
|
|
51
|
+
"rewind": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12.0098 8.4352C12.0098 6.22054 10.2147 4.42544 8 4.42544V5.44497C9.65133 5.44497 10.9902 6.78387 10.9902 8.4352C10.9902 10.0865 9.65133 11.4254 8 11.4254C6.34867 11.4254 5.00977 10.0865 5.00977 8.4352H3.99023C3.99023 10.6499 5.78534 12.445 8 12.445C10.2147 12.445 12.0098 10.6499 12.0098 8.4352Z\" fill=\"#1E1E1E\"/>\n<path d=\"M10.8353 5.59987C9.26933 4.03387 6.73067 4.03387 5.16467 5.59987L5.88559 6.32079C7.05325 5.15312 8.94675 5.15312 10.1144 6.32079C11.2821 7.48845 11.2821 9.38195 10.1144 10.5496C8.94675 11.7173 7.05325 11.7173 5.88559 10.5496L5.16467 11.2705C6.73067 12.8365 9.26933 12.8365 10.8353 11.2705C12.4013 9.70453 12.4013 7.16587 10.8353 5.59987Z\" fill=\"#1E1E1E\"/>\n<path d=\"M5.15847 5.59315L5.8743 6.30846H7.93002V7.29888H4.16732V3.53894H5.16306L5.15847 5.59315Z\" fill=\"#1E1E1E\"/>\n</svg>",
|
|
49
52
|
"right": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M13.1566 8.60594H0V9.61651L13.1562 9.61791L10.249 12.5251L10.9558 13.219L15.0636 9.11123L10.9524 5L10.245 5.70734L13.1566 8.60594Z\" fill=\"#1E1E1E\"/>\n</svg>",
|
|
50
53
|
"row": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3.87698 4.67614L8.01617 0.536957L12.1488 4.66961L11.4503 5.38124L8.5254 2.45639L8.49306 13.5436L11.4114 10.6122L12.123 11.3239L7.98382 15.463L3.85117 11.3304L4.54974 10.6188L7.47459 13.5436L7.50693 2.45639L4.58861 5.38777L3.87698 4.67614Z\" fill=\"#1E1E1E\"/>\n</svg>",
|
|
54
|
+
"school": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.48751 11.2972L10.4354 11.2964H5.49535L5.48751 11.2972Z\" fill=\"currentColor\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.49535 13.0423C4.81691 13.0423 4.2588 12.5265 4.19152 11.8658L4.18468 4.00851C4.18468 3.42828 4.65521 2.95775 5.23544 2.95775H10.7646C11.3448 2.95775 11.8153 3.42829 11.8153 4.00851V10.4123C11.8153 10.7646 11.6092 11.0692 11.3109 11.2115V12.1689C11.5526 12.169 11.7527 12.3649 11.7527 12.6066C11.7527 12.8483 11.5526 13.0421 11.3109 13.0423H5.49535ZM5.06017 11.7316C5.06017 11.5214 5.20914 11.3456 5.40729 11.3049L5.48751 11.2972L5.49535 11.2964H10.4354V12.1668H5.49535L5.40729 12.1574C5.20923 12.1167 5.06023 11.9417 5.06017 11.7316ZM10.798 4.09446H5.20187V5.49349H10.798V4.09446Z\" fill=\"currentColor\"/>\n</svg>",
|
|
51
55
|
"sdown": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8.50361 11.1717L8.50222 2.92134L7.49165 2.92134L7.49165 11.1713L4.58442 8.26409L3.89058 8.97091L7.99833 13.0787L12.1096 8.96744L11.4022 8.2601L8.50361 11.1717Z\" fill=\"#1E1E1E\"/>\n</svg>",
|
|
52
56
|
"search": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M9.08545 6.62646C9.08545 5.25128 7.9704 4.13623 6.59521 4.13623C5.22003 4.13623 4.10498 5.25128 4.10498 6.62646C4.10498 8.00165 5.22003 9.1167 6.59521 9.1167C7.9704 9.1167 9.08545 8.00165 9.08545 6.62646ZM10.105 6.62646C10.105 7.39551 9.85647 8.10577 9.43701 8.68408L12.9146 12.1616L12.1929 12.8833L8.72412 9.41455C8.13339 9.86631 7.39632 10.1362 6.59521 10.1362C4.6567 10.1362 3.08545 8.56498 3.08545 6.62646C3.08545 4.68795 4.6567 3.1167 6.59521 3.1167C8.53373 3.1167 10.105 4.68795 10.105 6.62646Z\" fill=\"#1E1E1E\"/>\n</svg>",
|
|
53
57
|
"see": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8.07669 3.70416C10.1007 3.70416 11.795 4.74149 12.9566 5.73248C13.5418 6.23179 14.005 6.72991 14.3218 7.10358C14.4804 7.29069 14.6032 7.44763 14.687 7.55865C14.7289 7.61411 14.7615 7.65861 14.7837 7.68951C14.7947 7.70477 14.8031 7.71711 14.8091 7.72565C14.812 7.72971 14.8143 7.73297 14.8159 7.73541C14.8167 7.73644 14.8174 7.73762 14.8179 7.73834L14.8189 7.73932C14.819 7.73947 14.8195 7.74054 14.4409 8.00006L14.8189 8.25983L14.8179 8.2608C14.8174 8.2616 14.8168 8.26345 14.8159 8.26471C14.8142 8.26716 14.812 8.27042 14.8091 8.27448C14.8031 8.28303 14.7947 8.29531 14.7837 8.31061C14.7615 8.34152 14.7289 8.38597 14.687 8.44147C14.6032 8.5525 14.4805 8.70941 14.3218 8.89655C14.005 9.27021 13.5418 9.76835 12.9566 10.2676C11.795 11.2586 10.1006 12.296 8.07669 12.296C6.05499 12.296 4.32326 11.2606 3.12552 10.2725C2.52184 9.77448 2.04049 9.27717 1.7095 8.90436C1.54374 8.71764 1.4147 8.56095 1.32669 8.45026C1.28274 8.39498 1.24843 8.35111 1.22513 8.32037C1.21356 8.30511 1.20507 8.29275 1.19876 8.28424C1.19566 8.28005 1.19275 8.27694 1.19095 8.27448C1.19016 8.27341 1.18952 8.27227 1.189 8.27155L1.18802 8.27057V8.26959L0.99173 8.00006L1.18802 7.73053V7.72955L1.189 7.72858C1.18953 7.72784 1.19013 7.72676 1.19095 7.72565C1.19276 7.72318 1.19563 7.72011 1.19876 7.71588C1.20506 7.70738 1.21356 7.69502 1.22513 7.67975C1.24842 7.64902 1.28277 7.6051 1.32669 7.54987C1.4147 7.43918 1.54374 7.28248 1.7095 7.09576C2.04048 6.72296 2.52183 6.22565 3.12552 5.7276C4.32326 4.73948 6.05499 3.70417 8.07669 3.70416ZM8.07669 4.62213C6.36481 4.62213 4.83715 5.50531 3.7095 6.43561C3.15087 6.8965 2.70364 7.35865 2.39603 7.70514C2.29735 7.81629 2.21535 7.91722 2.147 8.00006C2.21534 8.08289 2.29738 8.18387 2.39603 8.29498C2.70365 8.64147 3.15087 9.10363 3.7095 9.56451C4.83715 10.4948 6.36481 11.378 8.07669 11.378C9.7862 11.378 11.2738 10.4968 12.3609 9.5694C12.9 9.10949 13.3285 8.64854 13.6216 8.3028C13.7189 8.18799 13.7987 8.0844 13.8648 8.00006C13.7987 7.91573 13.7189 7.81214 13.6216 7.69733C13.3285 7.35158 12.9 6.89064 12.3609 6.43073C11.2738 5.50334 9.78624 4.62213 8.07669 4.62213ZM14.9976 8.00006L14.8199 8.25983L14.4409 8.00006L14.8199 7.7403L14.9976 8.00006Z\" fill=\"#1E1E1E\"/>\n<path d=\"M8.15292 5.66766C9.44109 5.66766 10.4858 6.71157 10.4859 7.99969C10.4859 9.28796 9.44119 10.3327 8.15292 10.3327C6.8648 10.3325 5.82089 9.28786 5.82089 7.99969C5.82106 6.71167 6.8649 5.66783 8.15292 5.66766Z\" fill=\"#1E1E1E\" stroke=\"#1E1E1E\" stroke-width=\"0.81\"/>\n</svg>",
|
|
@@ -66,6 +70,7 @@ export const iconNameToSvgMap: Record<string, string> = {
|
|
|
66
70
|
"unstar": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10.1972 12.3545L7.99995 10.7617L4.3857 13.4014L5.7773 9.2666L2.42281 7.01758H4.86031L10.1972 12.3545Z\" fill=\"#1E1E1E\"/>\n<path d=\"M13.039 12.6807L12.3193 13.4014L2.96089 4.03418L3.68062 3.31348L13.039 12.6807Z\" fill=\"#1E1E1E\"/>\n<path d=\"M9.49507 7.01758H13.5771L10.5205 9.06738L7.01363 5.56055L7.99995 2.58496L9.49507 7.01758Z\" fill=\"#1E1E1E\"/>\n</svg>",
|
|
67
71
|
"untitle": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3.76358 3.06275L3.06079 3.76553L4.35081 5.05677L4.35297 5.05461L7.35278 8.05725V6.65465L5.08414 4.38431H4.45378V3.75347L3.76358 3.06275Z\" fill=\"#1E1E1E\"/>\n<path d=\"M12.4191 13.1326L13.1232 12.4403L11.9204 11.2257L8.58778 7.89058V9.29342L11.3717 12.0799L11.3695 12.0821L12.4191 13.1326Z\" fill=\"#1E1E1E\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.16399 4.38431L5.12477 3.34431H11.4868V4.38431H8.58778V6.80992L7.35278 5.57399V4.38431H6.16399ZM7.35278 9.13802V12.5743H8.58778V10.3742L7.35278 9.13802Z\" fill=\"#1E1E1E\"/>\n<path d=\"M8.58778 7.89058L7.35278 6.65465V8.05725L8.58778 9.29342V7.89058Z\" fill=\"#1E1E1E\"/>\n<path d=\"M4.45378 3.75347V4.38431H5.08414L4.45378 3.75347Z\" fill=\"#1E1E1E\"/>\n</svg>",
|
|
68
72
|
"up": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7.49645 3.48222V16H8.50702L8.50841 3.48259L11.4156 6.38982L12.1095 5.68299L8.00173 1.57524L3.8905 5.68647L4.59784 6.39381L7.49645 3.48222Z\" fill=\"#1E1E1E\"/>\n</svg>",
|
|
73
|
+
"work": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13.8153 4.78289C13.8153 4.20267 13.3448 3.73213 12.7646 3.73213H8H3.23544C2.65521 3.73213 2.18468 4.20267 2.18468 4.78289V7.31419H13.8153L13.8153 4.78289ZM2.18468 8V11.2171C2.18468 11.7973 2.65521 12.2679 3.23544 12.2679H12.7646C13.3448 12.2679 13.8153 11.7973 13.8153 11.2171L13.8153 8L9.33239 7.98014V8.63222C9.33239 8.92233 9.09712 9.1576 8.807 9.1576H8H7.19299C6.90287 9.1576 6.66761 8.92233 6.66761 8.63222V7.98014L2.18468 8Z\" fill=\"currentColor\"/>\n</svg>",
|
|
69
74
|
};
|
|
70
75
|
|
|
71
76
|
export type IconName = keyof typeof iconNameToSvgMap;
|
|
@@ -93,6 +98,7 @@ export const iconNames = [
|
|
|
93
98
|
"down",
|
|
94
99
|
"duplicate",
|
|
95
100
|
"email",
|
|
101
|
+
"exercise",
|
|
96
102
|
"expand",
|
|
97
103
|
"gallery",
|
|
98
104
|
"globe",
|
|
@@ -103,6 +109,7 @@ export const iconNames = [
|
|
|
103
109
|
"icon",
|
|
104
110
|
"in",
|
|
105
111
|
"left",
|
|
112
|
+
"life",
|
|
106
113
|
"lock",
|
|
107
114
|
"loop",
|
|
108
115
|
"mic",
|
|
@@ -112,8 +119,10 @@ export const iconNames = [
|
|
|
112
119
|
"open",
|
|
113
120
|
"page",
|
|
114
121
|
"plus",
|
|
122
|
+
"rewind",
|
|
115
123
|
"right",
|
|
116
124
|
"row",
|
|
125
|
+
"school",
|
|
117
126
|
"sdown",
|
|
118
127
|
"search",
|
|
119
128
|
"see",
|
|
@@ -132,4 +141,5 @@ export const iconNames = [
|
|
|
132
141
|
"unstar",
|
|
133
142
|
"untitle",
|
|
134
143
|
"up",
|
|
144
|
+
"work",
|
|
135
145
|
] as const;
|
|
@@ -41,11 +41,12 @@ button ::slotted(*) {
|
|
|
41
41
|
max-width: 100%;
|
|
42
42
|
text-align: left;
|
|
43
43
|
justify-content: flex-start;
|
|
44
|
+
color: inherit;
|
|
44
45
|
}
|
|
45
46
|
|
|
46
47
|
button[primary] {
|
|
47
48
|
background-color: var(--accent-color);
|
|
48
|
-
color: var(--button-text-color);
|
|
49
|
+
color: var(--button-text-color-on-light, var(--black));
|
|
49
50
|
text-decoration-line: none;
|
|
50
51
|
font-family: var(--typeface-regular);
|
|
51
52
|
padding: 0 calc(0.5px * var(--sf));
|
|
@@ -53,7 +54,7 @@ button[primary] {
|
|
|
53
54
|
|
|
54
55
|
button[secondary] {
|
|
55
56
|
background-color: var(--button-background-color-secondary);
|
|
56
|
-
color: var(--button-text-color);
|
|
57
|
+
color: var(--button-text-color-on-light, var(--black));
|
|
57
58
|
font-family: var(--typeface-regular);
|
|
58
59
|
padding: 0 calc(0.5px * var(--sf));
|
|
59
60
|
}
|
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
text-decoration: var(--text-decoration-default);
|
|
17
17
|
vertical-align: middle;
|
|
18
18
|
white-space: nowrap;
|
|
19
|
+
color: inherit;
|
|
19
20
|
}
|
|
20
21
|
|
|
21
22
|
:host([data-language="ja"]) {
|
|
@@ -32,3 +33,7 @@
|
|
|
32
33
|
font-family: var(--typeface-regular-zh-hans);
|
|
33
34
|
font-weight: 800;
|
|
34
35
|
}
|
|
36
|
+
|
|
37
|
+
:host span {
|
|
38
|
+
color: inherit;
|
|
39
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M9.11131 4.50523C8.89226 4.50523 8.69548 4.45325 8.52098 4.3493C8.34648 4.24163 8.20539 4.10054 8.09772 3.92604C7.99377 3.75154 7.94179 3.55662 7.94179 3.34128C7.94179 3.12594 7.99377 2.93102 8.09772 2.75652C8.20539 2.5783 8.34648 2.43722 8.52098 2.33326C8.69548 2.2293 8.89226 2.17732 9.11131 2.17732C9.32665 2.17732 9.52157 2.2293 9.69607 2.33326C9.87057 2.43722 10.0098 2.5783 10.1138 2.75652C10.2214 2.93102 10.2753 3.12594 10.2753 3.34128C10.2753 3.55662 10.2214 3.75154 10.1138 3.92604C10.0098 4.10054 9.87057 4.24163 9.69607 4.3493C9.52157 4.45325 9.32665 4.50523 9.11131 4.50523ZM7.29019 9.12207C7.13797 9.03668 6.98389 8.94386 6.82795 8.84361C6.67202 8.73965 6.55692 8.60228 6.48267 8.43149C6.40841 8.25699 6.41584 8.01938 6.50494 7.71864L6.9282 6.19269C6.9579 6.09616 6.94305 6.0219 6.88365 5.96992C6.82424 5.91794 6.7537 5.89567 6.67202 5.90309L5.93132 5.95322L5.70855 7.49031C5.66029 7.83559 5.48022 7.99524 5.16834 7.96925C5.01983 7.9544 4.90659 7.89314 4.82862 7.78547C4.75066 7.67409 4.72281 7.53486 4.74509 7.36778L5.00127 5.47984C5.01983 5.3239 5.07738 5.19952 5.17391 5.1067C5.27044 5.01388 5.39482 4.9619 5.54705 4.95077L7.40715 4.82268C7.89723 4.78555 8.30193 4.83753 8.62123 4.97861C8.94052 5.11598 9.22084 5.34989 9.46217 5.68033L10.3755 6.94453L11.701 6.3542C11.8495 6.28737 11.985 6.27251 12.1075 6.30964C12.2338 6.34677 12.3284 6.43402 12.3915 6.57139C12.4584 6.70877 12.4658 6.83871 12.4138 6.96123C12.3618 7.08376 12.2597 7.17843 12.1075 7.24526L10.4256 7.9971C10.3143 8.04908 10.1992 8.05836 10.0803 8.02495C9.96525 7.99153 9.87429 7.92284 9.80746 7.81889L9.21713 6.9668C9.16143 6.88512 9.09089 6.84985 9.0055 6.86099C8.9201 6.87213 8.86441 6.92596 8.83842 7.0225L8.44301 8.38137L10.4312 9.68456C10.5834 9.7848 10.6688 9.9296 10.6874 10.119C10.7059 10.3083 10.6503 10.4568 10.5203 10.5645L8.69362 12.1183C8.54511 12.2445 8.3966 12.3021 8.24809 12.2909C8.10329 12.2835 7.98634 12.2297 7.89723 12.1294C7.81184 12.0292 7.77286 11.9085 7.78028 11.7674C7.78771 11.6226 7.86382 11.4908 8.00862 11.372L9.30066 10.2526L7.29019 9.12207ZM3.73707 13.6999C3.6294 13.6034 3.56814 13.4772 3.55329 13.3212C3.54215 13.1653 3.60712 13.0186 3.74821 12.8813L5.53034 11.1103L6.15409 8.89373C6.25062 9.01997 6.37128 9.13878 6.51608 9.25016C6.66088 9.35783 6.83352 9.46736 7.03401 9.57874L7.2178 9.68456L6.50494 11.5224C6.46039 11.6338 6.42326 11.7117 6.39356 11.7563C6.36386 11.7971 6.31188 11.8547 6.23762 11.9289L4.51675 13.6275C4.38309 13.7575 4.24572 13.8224 4.10463 13.8224C3.96355 13.8262 3.84103 13.7853 3.73707 13.6999Z" fill="currentColor"/>
|
|
3
|
+
</svg>
|
|
4
|
+
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M3.76595 12.3556L12.2336 12.3556V13.3529L4.76332 13.3529L3.76595 13.3529V12.3556Z" fill="currentColor"/>
|
|
3
|
+
<path d="M4.76332 13.3529L3.76595 13.3529V7.16597L4.76329 7.16597L4.76332 13.3529Z" fill="currentColor"/>
|
|
4
|
+
<path d="M12.2336 13.3529H11.2363L11.2363 7.16599L12.2336 7.16597V13.3529Z" fill="currentColor"/>
|
|
5
|
+
<path d="M11.6251 6.4395H10.6278L10.6278 4.16374L11.6251 4.16372V6.4395Z" fill="currentColor"/>
|
|
6
|
+
<path d="M7.99993 2.64708L13.4713 8.11835L12.7661 8.82358L7.2947 3.35231L7.99993 2.64708Z" fill="currentColor"/>
|
|
7
|
+
<path d="M3.23393 8.82358L2.52869 8.11832L7.99993 2.64708L8.70517 3.3523L3.23393 8.82358Z" fill="currentColor"/>
|
|
8
|
+
</svg>
|
|
9
|
+
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M12.0098 8.4352C12.0098 6.22054 10.2147 4.42544 8 4.42544V5.44497C9.65133 5.44497 10.9902 6.78387 10.9902 8.4352C10.9902 10.0865 9.65133 11.4254 8 11.4254C6.34867 11.4254 5.00977 10.0865 5.00977 8.4352H3.99023C3.99023 10.6499 5.78534 12.445 8 12.445C10.2147 12.445 12.0098 10.6499 12.0098 8.4352Z" fill="#1E1E1E"/>
|
|
3
|
+
<path d="M10.8353 5.59987C9.26933 4.03387 6.73067 4.03387 5.16467 5.59987L5.88559 6.32079C7.05325 5.15312 8.94675 5.15312 10.1144 6.32079C11.2821 7.48845 11.2821 9.38195 10.1144 10.5496C8.94675 11.7173 7.05325 11.7173 5.88559 10.5496L5.16467 11.2705C6.73067 12.8365 9.26933 12.8365 10.8353 11.2705C12.4013 9.70453 12.4013 7.16587 10.8353 5.59987Z" fill="#1E1E1E"/>
|
|
4
|
+
<path d="M5.15847 5.59315L5.8743 6.30846H7.93002V7.29888H4.16732V3.53894H5.16306L5.15847 5.59315Z" fill="#1E1E1E"/>
|
|
5
|
+
</svg>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.48751 11.2972L10.4354 11.2964H5.49535L5.48751 11.2972Z" fill="currentColor"/>
|
|
3
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.49535 13.0423C4.81691 13.0423 4.2588 12.5265 4.19152 11.8658L4.18468 4.00851C4.18468 3.42828 4.65521 2.95775 5.23544 2.95775H10.7646C11.3448 2.95775 11.8153 3.42829 11.8153 4.00851V10.4123C11.8153 10.7646 11.6092 11.0692 11.3109 11.2115V12.1689C11.5526 12.169 11.7527 12.3649 11.7527 12.6066C11.7527 12.8483 11.5526 13.0421 11.3109 13.0423H5.49535ZM5.06017 11.7316C5.06017 11.5214 5.20914 11.3456 5.40729 11.3049L5.48751 11.2972L5.49535 11.2964H10.4354V12.1668H5.49535L5.40729 12.1574C5.20923 12.1167 5.06023 11.9417 5.06017 11.7316ZM10.798 4.09446H5.20187V5.49349H10.798V4.09446Z" fill="currentColor"/>
|
|
4
|
+
</svg>
|
|
5
|
+
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.8153 4.78289C13.8153 4.20267 13.3448 3.73213 12.7646 3.73213H8H3.23544C2.65521 3.73213 2.18468 4.20267 2.18468 4.78289V7.31419H13.8153L13.8153 4.78289ZM2.18468 8V11.2171C2.18468 11.7973 2.65521 12.2679 3.23544 12.2679H12.7646C13.3448 12.2679 13.8153 11.7973 13.8153 11.2171L13.8153 8L9.33239 7.98014V8.63222C9.33239 8.92233 9.09712 9.1576 8.807 9.1576H8H7.19299C6.90287 9.1576 6.66761 8.92233 6.66761 8.63222V7.98014L2.18468 8Z" fill="currentColor"/>
|
|
3
|
+
</svg>
|
|
4
|
+
|
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# DS one (0.3.0-alpha.
|
|
1
|
+
# DS one (0.3.0-alpha.6)
|
|
2
2
|
|
|
3
3
|
A plug and play design system
|
|
4
4
|
|
|
@@ -20,7 +20,7 @@ yarn add ds-one@alpha
|
|
|
20
20
|
|
|
21
21
|
```
|
|
22
22
|
|
|
23
|
-
**Note**: Currently published as alpha version `0.3.0-alpha.
|
|
23
|
+
**Note**: Currently published as alpha version `0.3.0-alpha.6`
|
|
24
24
|
|
|
25
25
|
## Quick Start
|
|
26
26
|
|
package/dist/2-core/ds-gap.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { LitElement } from "lit";
|
|
1
|
+
import { LitElement, PropertyValues } from "lit";
|
|
2
2
|
/**
|
|
3
3
|
* Full-width vertical spacer.
|
|
4
4
|
*
|
|
@@ -15,9 +15,10 @@ export declare class Gap extends LitElement {
|
|
|
15
15
|
reflect: boolean;
|
|
16
16
|
};
|
|
17
17
|
};
|
|
18
|
-
size
|
|
18
|
+
size?: string;
|
|
19
19
|
constructor();
|
|
20
20
|
static styles: import("lit").CSSResult;
|
|
21
|
+
updated(changedProperties: PropertyValues<this>): void;
|
|
21
22
|
render(): import("lit-html").TemplateResult<1>;
|
|
22
23
|
}
|
|
23
24
|
declare global {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ds-gap.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-gap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"ds-gap.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-gap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,cAAc,EAAE,MAAM,KAAK,CAAC;AAGlE;;;;;;;GAOG;AACH,qBAAa,GAAI,SAAQ,UAAU;IACjC,MAAM,CAAC,UAAU;QACf,wFAAwF;;;;;MAExF;IAEM,IAAI,CAAC,EAAE,MAAM,CAAC;;IAMtB,MAAM,CAAC,MAAM,0BAAqB;IAElC,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAU/C,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,GAAG,CAAC;KACf;CACF"}
|
package/dist/2-core/ds-gap.js
CHANGED
|
@@ -11,7 +11,15 @@ import styles from "./styles/ds-gap.css?inline";
|
|
|
11
11
|
export class Gap extends LitElement {
|
|
12
12
|
constructor() {
|
|
13
13
|
super();
|
|
14
|
-
|
|
14
|
+
}
|
|
15
|
+
updated(changedProperties) {
|
|
16
|
+
super.updated(changedProperties);
|
|
17
|
+
// Remove size attribute if it's empty or undefined
|
|
18
|
+
if (changedProperties.has("size")) {
|
|
19
|
+
if (!this.size || this.size === "") {
|
|
20
|
+
this.removeAttribute("size");
|
|
21
|
+
}
|
|
22
|
+
}
|
|
15
23
|
}
|
|
16
24
|
render() {
|
|
17
25
|
return html ``;
|
|
@@ -78,6 +78,14 @@ export declare class Input extends LitElement {
|
|
|
78
78
|
type: BooleanConstructor;
|
|
79
79
|
state: boolean;
|
|
80
80
|
};
|
|
81
|
+
_placeholder: {
|
|
82
|
+
type: StringConstructor;
|
|
83
|
+
state: boolean;
|
|
84
|
+
};
|
|
85
|
+
_currentLanguage: {
|
|
86
|
+
type: StringConstructor;
|
|
87
|
+
state: boolean;
|
|
88
|
+
};
|
|
81
89
|
};
|
|
82
90
|
type: "text" | "password" | "email" | "number" | "tel" | "url" | "search" | "date" | "time" | "datetime-local";
|
|
83
91
|
name: string;
|
|
@@ -101,8 +109,15 @@ export declare class Input extends LitElement {
|
|
|
101
109
|
error: string;
|
|
102
110
|
errorText: string;
|
|
103
111
|
_focused: boolean;
|
|
112
|
+
_placeholder: string;
|
|
113
|
+
_currentLanguage: string;
|
|
114
|
+
private boundHandlers;
|
|
104
115
|
constructor();
|
|
105
116
|
static styles: import("lit").CSSResult;
|
|
117
|
+
connectedCallback(): void;
|
|
118
|
+
disconnectedCallback(): void;
|
|
119
|
+
updated(changedProperties: Map<string, unknown>): void;
|
|
120
|
+
private _loadPlaceholder;
|
|
106
121
|
private _handleInput;
|
|
107
122
|
private _handleFocus;
|
|
108
123
|
private _handleBlur;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ds-input.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-input.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"ds-input.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-input.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAElD,OAAO,WAAW,CAAC;AAGnB,qBAAa,KAAM,SAAQ,UAAU;IACnC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAyBf;IAEM,IAAI,EACR,MAAM,GACN,UAAU,GACV,OAAO,GACP,QAAQ,GACR,KAAK,GACL,KAAK,GACL,QAAQ,GACR,MAAM,GACN,MAAM,GACN,gBAAgB,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,aAAa,CAAqC;;IAuC1D,MAAM,CAAC,MAAM,0BAAqB;IAElC,iBAAiB;IAkBjB,oBAAoB;IAYpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAQ/C,OAAO,CAAC,gBAAgB;IAkBxB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,WAAW;IAKnB;;OAEG;IACH,KAAK,IAAI,IAAI;IAKb;;OAEG;IACH,IAAI,IAAI,IAAI;IAKZ;;OAEG;IACH,MAAM,IAAI,IAAI;IAKd,MAAM;CAoDP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,KAAK,CAAC;KACnB;CACF"}
|
package/dist/2-core/ds-input.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
// ds-input.ts
|
|
2
2
|
// Input component for text and other input types
|
|
3
3
|
import { LitElement, html, unsafeCSS } from "lit";
|
|
4
|
+
import { getText, currentLanguage } from "../0-face/i18n";
|
|
4
5
|
import "./ds-text";
|
|
5
6
|
import styles from "./styles/ds-input.css?inline";
|
|
6
7
|
export class Input extends LitElement {
|
|
@@ -28,6 +29,53 @@ export class Input extends LitElement {
|
|
|
28
29
|
this.error = "";
|
|
29
30
|
this.errorText = "";
|
|
30
31
|
this._focused = false;
|
|
32
|
+
this._placeholder = "";
|
|
33
|
+
this._currentLanguage = currentLanguage.value;
|
|
34
|
+
// Create bound event handlers for proper cleanup
|
|
35
|
+
this.boundHandlers = {
|
|
36
|
+
languageChanged: (() => {
|
|
37
|
+
this._currentLanguage = currentLanguage.value;
|
|
38
|
+
this._loadPlaceholder();
|
|
39
|
+
this.requestUpdate();
|
|
40
|
+
}),
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
connectedCallback() {
|
|
44
|
+
super.connectedCallback();
|
|
45
|
+
this._currentLanguage = currentLanguage.value;
|
|
46
|
+
this._loadPlaceholder();
|
|
47
|
+
// Listen for language changes
|
|
48
|
+
window.addEventListener("language-changed", this.boundHandlers.languageChanged);
|
|
49
|
+
// Also listen for translations loaded event
|
|
50
|
+
window.addEventListener("translations-loaded", this.boundHandlers.languageChanged);
|
|
51
|
+
}
|
|
52
|
+
disconnectedCallback() {
|
|
53
|
+
super.disconnectedCallback();
|
|
54
|
+
window.removeEventListener("language-changed", this.boundHandlers.languageChanged);
|
|
55
|
+
window.removeEventListener("translations-loaded", this.boundHandlers.languageChanged);
|
|
56
|
+
}
|
|
57
|
+
updated(changedProperties) {
|
|
58
|
+
super.updated(changedProperties);
|
|
59
|
+
if (changedProperties.has("placeholder") || changedProperties.has("placeholderKey")) {
|
|
60
|
+
this._loadPlaceholder();
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
_loadPlaceholder() {
|
|
64
|
+
const placeholderText = this.placeholderKey || this.placeholder;
|
|
65
|
+
if (!placeholderText) {
|
|
66
|
+
this._placeholder = "";
|
|
67
|
+
this.requestUpdate();
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
try {
|
|
71
|
+
const translatedText = getText(placeholderText);
|
|
72
|
+
this._placeholder = translatedText || placeholderText;
|
|
73
|
+
}
|
|
74
|
+
catch (error) {
|
|
75
|
+
// Fallback to original text if translation fails
|
|
76
|
+
this._placeholder = placeholderText;
|
|
77
|
+
}
|
|
78
|
+
this.requestUpdate();
|
|
31
79
|
}
|
|
32
80
|
_handleInput(e) {
|
|
33
81
|
const target = e.target;
|
|
@@ -86,7 +134,7 @@ export class Input extends LitElement {
|
|
|
86
134
|
.type=${this.type}
|
|
87
135
|
.name=${this.name}
|
|
88
136
|
.value=${this.value}
|
|
89
|
-
.placeholder=${this.placeholder}
|
|
137
|
+
.placeholder=${this._placeholder || this.placeholder}
|
|
90
138
|
?disabled=${this.disabled}
|
|
91
139
|
?readonly=${this.readonly}
|
|
92
140
|
?required=${this.required}
|
|
@@ -141,6 +189,8 @@ Input.properties = {
|
|
|
141
189
|
error: { type: String },
|
|
142
190
|
errorText: { type: String, attribute: "error-text" },
|
|
143
191
|
_focused: { type: Boolean, state: true },
|
|
192
|
+
_placeholder: { type: String, state: true },
|
|
193
|
+
_currentLanguage: { type: String, state: true },
|
|
144
194
|
};
|
|
145
195
|
Input.styles = unsafeCSS(styles);
|
|
146
196
|
customElements.define("ds-input", Input);
|
|
@@ -5,5 +5,5 @@
|
|
|
5
5
|
*/
|
|
6
6
|
export declare const iconNameToSvgMap: Record<string, string>;
|
|
7
7
|
export type IconName = keyof typeof iconNameToSvgMap;
|
|
8
|
-
export declare const iconNames: readonly ["1x", "1xdots", "1xgrid", "1xlines", "2x", "2xdots", "2xgrid", "2xlines", "4x4", "apple", "avatar", "check", "close", "collapse", "color", "column", "default", "delete", "dictate", "down", "duplicate", "email", "expand", "gallery", "globe", "google", "group", "head", "home", "icon", "in", "left", "lock", "loop", "mic", "minimize", "more", "note", "open", "page", "plus", "right", "row", "sdown", "search", "see", "star", "status", "sup", "title", "titlestyle", "undo", "ungroup", "unhead", "unicon", "unlock", "unmic", "unsee", "unstar", "untitle", "up"];
|
|
8
|
+
export declare const iconNames: readonly ["1x", "1xdots", "1xgrid", "1xlines", "2x", "2xdots", "2xgrid", "2xlines", "4x4", "apple", "avatar", "check", "close", "collapse", "color", "column", "default", "delete", "dictate", "down", "duplicate", "email", "exercise", "expand", "gallery", "globe", "google", "group", "head", "home", "icon", "in", "left", "life", "lock", "loop", "mic", "minimize", "more", "note", "open", "page", "plus", "rewind", "right", "row", "school", "sdown", "search", "see", "star", "status", "sup", "title", "titlestyle", "undo", "ungroup", "unhead", "unicon", "unlock", "unmic", "unsee", "unstar", "untitle", "up", "work"];
|
|
9
9
|
//# sourceMappingURL=ds-icon-map.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ds-icon-map.d.ts","sourceRoot":"","sources":["../../../DS1/2-core/generated/ds-icon-map.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"ds-icon-map.d.ts","sourceRoot":"","sources":["../../../DS1/2-core/generated/ds-icon-map.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAmEnD,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAErD,eAAO,MAAM,SAAS,wmBAmEZ,CAAC"}
|