@sondor-technology/sondor-components 1.0.0-1165-initial-setup.11 → 1.0.1-develop.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/checkbox/checkbox.d.ts +3 -0
- package/dist/components/checkbox/checkbox.d.ts.map +1 -1
- package/dist/components/checkbox/checkbox.js +38 -20
- package/dist/components/divider/divider.js +1 -1
- package/dist/components/field/field.js +1 -1
- package/dist/components/form/form.d.ts.map +1 -1
- package/dist/components/form/form.js +33 -27
- package/dist/components/icon/icon-paths.d.ts +16 -0
- package/dist/components/icon/icon-paths.d.ts.map +1 -1
- package/dist/components/icon/icon-paths.js +16 -0
- package/dist/components/icon/icon.d.ts +2 -1
- package/dist/components/icon/icon.d.ts.map +1 -1
- package/dist/components/link/link.js +1 -1
- package/dist/components/modal/modal.d.ts +11 -0
- package/dist/components/modal/modal.d.ts.map +1 -1
- package/dist/components/modal/modal.js +103 -15
- package/dist/components/router/router.d.ts +27 -3
- package/dist/components/router/router.d.ts.map +1 -1
- package/dist/components/router/router.js +72 -12
- package/dist/components/select/select.js +1 -1
- package/dist/components/skeleton/skeleton.d.ts +2 -3
- package/dist/components/skeleton/skeleton.d.ts.map +1 -1
- package/dist/components/skeleton/skeleton.js +89 -18
- package/dist/components/vertical-nav/vertical-nav-group.d.ts +6 -0
- package/dist/components/vertical-nav/vertical-nav-group.d.ts.map +1 -1
- package/dist/components/vertical-nav/vertical-nav-group.js +37 -21
- package/dist/components/vertical-nav/vertical-nav-item.d.ts +6 -0
- package/dist/components/vertical-nav/vertical-nav-item.d.ts.map +1 -1
- package/dist/components/vertical-nav/vertical-nav-item.js +27 -7
- package/package.json +5 -1
- package/src/components/checkbox/checkbox.ts +54 -26
- package/src/components/divider/divider.ts +1 -1
- package/src/components/field/field.ts +1 -1
- package/src/components/form/form.ts +39 -30
- package/src/components/icon/icon-paths.ts +16 -0
- package/src/components/icon/icon.ts +3 -1
- package/src/components/link/link.ts +1 -1
- package/src/components/modal/modal.ts +103 -15
- package/src/components/router/router.ts +99 -12
- package/src/components/select/select.ts +1 -1
- package/src/components/skeleton/skeleton.ts +87 -20
- package/src/components/vertical-nav/vertical-nav-group.ts +40 -21
- package/src/components/vertical-nav/vertical-nav-item.ts +30 -7
|
@@ -11,11 +11,14 @@ export declare class StCheckbox extends LitElement {
|
|
|
11
11
|
disabled: boolean;
|
|
12
12
|
invalid: boolean;
|
|
13
13
|
required: boolean;
|
|
14
|
+
errorMessage: string;
|
|
14
15
|
ariaLabel: string;
|
|
15
16
|
constructor();
|
|
16
17
|
static styles: import("lit").CSSResult[];
|
|
17
18
|
updated(changedProperties: PropertyValues<this>): void;
|
|
18
19
|
private _syncValidity;
|
|
20
|
+
checkValidity(): boolean;
|
|
21
|
+
reportValidity(): boolean;
|
|
19
22
|
formResetCallback(): void;
|
|
20
23
|
private _handleChange;
|
|
21
24
|
render(): import("lit-html").TemplateResult<1>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAC,MAAM,KAAK,CAAC;AAI1D,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAmB;IAErB,OAAO,CAAC,QAAQ,CAAoB;IAEX,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,IAAI,SAAM;
|
|
1
|
+
{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAC,MAAM,KAAK,CAAC;AAI1D,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAmB;IAErB,OAAO,CAAC,QAAQ,CAAoB;IAEX,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,IAAI,SAAM;IACzB,KAAK,SAAQ;IAEG,OAAO,UAAS;IAChB,aAAa,UAAS;IAEtB,QAAQ,UAAS;IACjB,OAAO,UAAS;IAChB,QAAQ,UAAS;IACjC,YAAY,SAAM;IAEP,SAAS,SAAM;IAEpD,cAWC;IAED,MAAM,CAAC,MAAM,4BA6GX;IAEO,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,QAWvD;IAED,OAAO,CAAC,aAAa;IAmBd,aAAa,IAAI,OAAO,CAkB9B;IAEM,cAAc,IAAI,OAAO,CAK/B;IAED,iBAAiB,SAMhB;IAED,OAAO,CAAC,aAAa;IAkBrB,MAAM,yCAwBL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
|
|
@@ -12,28 +12,25 @@ let StCheckbox = class StCheckbox extends LitElement {
|
|
|
12
12
|
super();
|
|
13
13
|
this.size = "md";
|
|
14
14
|
this.name = "";
|
|
15
|
-
// Checkboxes default to 'on' natively if no value is provided
|
|
16
15
|
this.value = "on";
|
|
17
16
|
this.checked = false;
|
|
18
17
|
this.indeterminate = false;
|
|
19
18
|
this.disabled = false;
|
|
20
19
|
this.invalid = false;
|
|
21
20
|
this.required = false;
|
|
21
|
+
this.errorMessage = "";
|
|
22
22
|
this.ariaLabel = "";
|
|
23
23
|
this._internals = this.attachInternals();
|
|
24
|
-
// 1. Trigger error state if the user clicks away and the field is invalid
|
|
25
24
|
this.addEventListener('focusout', () => {
|
|
26
|
-
this.invalid = !this.
|
|
25
|
+
this.invalid = !this.checkValidity();
|
|
27
26
|
});
|
|
28
|
-
// 2. Trigger error state if the st-form tries to submit and fails
|
|
29
27
|
this.addEventListener('invalid', () => {
|
|
30
|
-
this.invalid =
|
|
28
|
+
this.invalid = !this.checkValidity();
|
|
31
29
|
});
|
|
32
30
|
}
|
|
33
31
|
updated(changedProperties) {
|
|
34
32
|
super.updated(changedProperties);
|
|
35
|
-
if (changedProperties.has("checked") || changedProperties.has("value")) {
|
|
36
|
-
// Form API: If checked, submit the value. If unchecked, submit null to remove it from FormData.
|
|
33
|
+
if (changedProperties.has("checked") || changedProperties.has("value") || changedProperties.has("errorMessage")) {
|
|
37
34
|
this._internals.setFormValue(this.checked ? this.value : null);
|
|
38
35
|
this._syncValidity();
|
|
39
36
|
}
|
|
@@ -44,11 +41,38 @@ let StCheckbox = class StCheckbox extends LitElement {
|
|
|
44
41
|
_syncValidity() {
|
|
45
42
|
if (!this._inputEl)
|
|
46
43
|
return;
|
|
47
|
-
|
|
44
|
+
if (this.required && !this.checked) {
|
|
45
|
+
const message = this.errorMessage || this._inputEl.validationMessage || "Please check this box if you want to proceed.";
|
|
46
|
+
this._internals.setValidity({ valueMissing: true }, message, this._inputEl);
|
|
47
|
+
}
|
|
48
|
+
else {
|
|
49
|
+
this._internals.setValidity(this._inputEl.validity, this._inputEl.validationMessage, this._inputEl);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
checkValidity() {
|
|
53
|
+
if (!this._inputEl)
|
|
54
|
+
return true;
|
|
55
|
+
if (this.required && !this.checked) {
|
|
56
|
+
const message = this.errorMessage || this._inputEl.validationMessage || "Please check this box if you want to proceed.";
|
|
57
|
+
this._internals.setValidity({ valueMissing: true }, message, this._inputEl);
|
|
58
|
+
this.invalid = true;
|
|
59
|
+
return false;
|
|
60
|
+
}
|
|
61
|
+
const isValid = this._inputEl.checkValidity();
|
|
62
|
+
this._syncValidity();
|
|
63
|
+
this.invalid = !isValid;
|
|
64
|
+
return isValid;
|
|
65
|
+
}
|
|
66
|
+
reportValidity() {
|
|
67
|
+
this._syncValidity();
|
|
68
|
+
const isValid = this._internals.reportValidity();
|
|
69
|
+
this.invalid = !isValid;
|
|
70
|
+
return isValid;
|
|
48
71
|
}
|
|
49
72
|
formResetCallback() {
|
|
50
73
|
this.checked = false;
|
|
51
74
|
this.indeterminate = false;
|
|
75
|
+
this.invalid = false;
|
|
52
76
|
this._internals.setFormValue(null);
|
|
53
77
|
this.updateComplete.then(() => this._syncValidity());
|
|
54
78
|
}
|
|
@@ -56,11 +80,13 @@ let StCheckbox = class StCheckbox extends LitElement {
|
|
|
56
80
|
e.stopPropagation();
|
|
57
81
|
if (this.disabled)
|
|
58
82
|
return;
|
|
59
|
-
// Standard native behavior: clicking an indeterminate checkbox unsets the indeterminate state
|
|
60
83
|
if (this.indeterminate) {
|
|
61
84
|
this.indeterminate = false;
|
|
62
85
|
}
|
|
63
86
|
this.checked = this._inputEl.checked;
|
|
87
|
+
if (this.checkValidity()) {
|
|
88
|
+
this.invalid = false;
|
|
89
|
+
}
|
|
64
90
|
this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
|
|
65
91
|
}
|
|
66
92
|
render() {
|
|
@@ -78,7 +104,6 @@ let StCheckbox = class StCheckbox extends LitElement {
|
|
|
78
104
|
@change=${this._handleChange}
|
|
79
105
|
/>
|
|
80
106
|
<div class="control">
|
|
81
|
-
<!-- Render both SVGs and use CSS to conditionally reveal them based on host attributes -->
|
|
82
107
|
${this.indeterminate
|
|
83
108
|
? html `<svg class="icon-minus" viewBox="0 0 24 24"><path d="M5 12h14"></path></svg>`
|
|
84
109
|
: html `<svg class="icon-check" viewBox="0 0 24 24">
|
|
@@ -120,7 +145,6 @@ StCheckbox.styles = [
|
|
|
120
145
|
font-size: var(--st-font-size-base);
|
|
121
146
|
}
|
|
122
147
|
|
|
123
|
-
/* Visually hide the native input but keep it in the DOM for focus/screen readers */
|
|
124
148
|
input {
|
|
125
149
|
position: absolute;
|
|
126
150
|
width: var(--checkbox-size);
|
|
@@ -133,7 +157,6 @@ StCheckbox.styles = [
|
|
|
133
157
|
border-width: 0;
|
|
134
158
|
}
|
|
135
159
|
|
|
136
|
-
/* Custom Checkbox Box */
|
|
137
160
|
.control {
|
|
138
161
|
display: flex;
|
|
139
162
|
align-items: center;
|
|
@@ -145,30 +168,25 @@ StCheckbox.styles = [
|
|
|
145
168
|
background-color: var(--st-color-bg);
|
|
146
169
|
transition: all 0.2s ease;
|
|
147
170
|
flex-shrink: 0;
|
|
148
|
-
/* Aligns the box nicely with standard text line-height */
|
|
149
171
|
margin-top: 0.125rem;
|
|
150
172
|
}
|
|
151
173
|
|
|
152
|
-
/* Hover State */
|
|
153
174
|
label:hover .control {
|
|
154
175
|
border-color: var(--st-color-primary-hover);
|
|
155
176
|
}
|
|
156
177
|
|
|
157
|
-
/* Focus State */
|
|
158
178
|
input:focus-visible + .control {
|
|
159
179
|
box-shadow:
|
|
160
180
|
0 0 0 2px var(--st-color-bg),
|
|
161
181
|
0 0 0 4px var(--st-color-primary);
|
|
162
182
|
}
|
|
163
183
|
|
|
164
|
-
/* Checked & Indeterminate States */
|
|
165
184
|
:host([checked]) .control,
|
|
166
185
|
:host([indeterminate]) .control {
|
|
167
186
|
border-color: var(--st-color-primary);
|
|
168
187
|
background-color: var(--st-color-primary);
|
|
169
188
|
}
|
|
170
189
|
|
|
171
|
-
/* SVG Icons */
|
|
172
190
|
svg {
|
|
173
191
|
width: var(--checkbox-icon-size);
|
|
174
192
|
height: var(--checkbox-icon-size);
|
|
@@ -184,14 +202,12 @@ StCheckbox.styles = [
|
|
|
184
202
|
opacity 0.2s ease;
|
|
185
203
|
}
|
|
186
204
|
|
|
187
|
-
/* Reveal Icons */
|
|
188
205
|
:host([checked]) svg.icon-check,
|
|
189
206
|
:host([indeterminate]) svg.icon-minus {
|
|
190
207
|
opacity: 1;
|
|
191
208
|
transform: scale(1);
|
|
192
209
|
}
|
|
193
210
|
|
|
194
|
-
/* Disabled State */
|
|
195
211
|
:host([disabled]) {
|
|
196
212
|
pointer-events: none;
|
|
197
213
|
}
|
|
@@ -200,7 +216,6 @@ StCheckbox.styles = [
|
|
|
200
216
|
cursor: not-allowed;
|
|
201
217
|
}
|
|
202
218
|
|
|
203
|
-
/* Invalid State */
|
|
204
219
|
:host([invalid]) .control {
|
|
205
220
|
border-color: var(--st-color-error);
|
|
206
221
|
}
|
|
@@ -238,6 +253,9 @@ __decorate([
|
|
|
238
253
|
__decorate([
|
|
239
254
|
property({ type: Boolean, reflect: true })
|
|
240
255
|
], StCheckbox.prototype, "required", void 0);
|
|
256
|
+
__decorate([
|
|
257
|
+
property({ type: String })
|
|
258
|
+
], StCheckbox.prototype, "errorMessage", void 0);
|
|
241
259
|
__decorate([
|
|
242
260
|
property({ attribute: "aria-label" })
|
|
243
261
|
], StCheckbox.prototype, "ariaLabel", void 0);
|
|
@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
6
6
|
};
|
|
7
7
|
import { LitElement, html, css } from 'lit';
|
|
8
8
|
import { customElement, property } from 'lit/decorators.js';
|
|
9
|
-
import { resetStyles } from '../../styles/reset';
|
|
9
|
+
import { resetStyles } from '../../styles/reset.js';
|
|
10
10
|
let StDivider = class StDivider extends LitElement {
|
|
11
11
|
constructor() {
|
|
12
12
|
super(...arguments);
|
|
@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
6
6
|
};
|
|
7
7
|
import { LitElement, html, css } from 'lit';
|
|
8
8
|
import { customElement, } from 'lit/decorators.js';
|
|
9
|
-
import { resetStyles } from '../../styles/reset';
|
|
9
|
+
import { resetStyles } from '../../styles/reset.js';
|
|
10
10
|
let StField = class StField extends LitElement {
|
|
11
11
|
render() {
|
|
12
12
|
return html `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/components/form/form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAK1C,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,YAAY,GAAG,QAAQ,CAAC;AAE9D,qBACa,MAAO,SAAQ,UAAU;IACK,MAAM,EAAE,UAAU,CAAc;IAC/B,OAAO,UAAS;IAChC,KAAK,SAAM;IAE5B,OAAO,CAAC,iBAAiB,CAAK;IAGvC,OAAO,CAAC,aAAa,CAAgB;IAEtB,OAAO,CAAC,OAAO,CAAmB;IAEjD,MAAM,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/components/form/form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAK1C,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,YAAY,GAAG,QAAQ,CAAC;AAE9D,qBACa,MAAO,SAAQ,UAAU;IACK,MAAM,EAAE,UAAU,CAAc;IAC/B,OAAO,UAAS;IAChC,KAAK,SAAM;IAE5B,OAAO,CAAC,iBAAiB,CAAK;IAGvC,OAAO,CAAC,aAAa,CAAgB;IAEtB,OAAO,CAAC,OAAO,CAAmB;IAEjD,MAAM,CAAC,MAAM,4BAqIX;IAEF,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,qBAAqB;YAOf,uBAAuB;IAuDrC,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,gBAAgB;YAkCV,aAAa;IA4B3B,MAAM,yCAiFL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
|
|
@@ -26,18 +26,16 @@ let StForm = class StForm extends LitElement {
|
|
|
26
26
|
});
|
|
27
27
|
this.requestUpdate();
|
|
28
28
|
}
|
|
29
|
-
_validateCurrentContext() {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
const currentStep = this._stepElements[this._currentStepIndex];
|
|
29
|
+
async _validateCurrentContext() {
|
|
30
|
+
const scope = this._stepElements.length > 0
|
|
31
|
+
? this._stepElements[this._currentStepIndex]
|
|
32
|
+
: this;
|
|
34
33
|
let isValid = true;
|
|
35
|
-
//
|
|
36
|
-
const inputs = Array.from(
|
|
34
|
+
// 1. Validate standard DOM input components
|
|
35
|
+
const inputs = Array.from(scope.querySelectorAll("*"));
|
|
37
36
|
for (const input of inputs) {
|
|
38
37
|
if (typeof input.checkValidity === "function") {
|
|
39
38
|
if (!input.checkValidity()) {
|
|
40
|
-
// Focus and report on the first invalid element encountered
|
|
41
39
|
if (isValid && typeof input.reportValidity === "function") {
|
|
42
40
|
input.reportValidity();
|
|
43
41
|
}
|
|
@@ -45,10 +43,33 @@ let StForm = class StForm extends LitElement {
|
|
|
45
43
|
}
|
|
46
44
|
}
|
|
47
45
|
}
|
|
46
|
+
if (this._stepElements.length === 0 && this._formEl) {
|
|
47
|
+
if (!this._formEl.checkValidity()) {
|
|
48
|
+
isValid = false;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
// 2. Execute step-level async/sync validation hook if defined
|
|
52
|
+
if (isValid && this._stepElements.length > 0) {
|
|
53
|
+
const currentStep = this._stepElements[this._currentStepIndex];
|
|
54
|
+
if (typeof currentStep.validate === "function") {
|
|
55
|
+
try {
|
|
56
|
+
this.loading = true;
|
|
57
|
+
const stepPassed = await currentStep.validate();
|
|
58
|
+
if (!stepPassed) {
|
|
59
|
+
isValid = false;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
catch (err) {
|
|
63
|
+
isValid = false;
|
|
64
|
+
}
|
|
65
|
+
finally {
|
|
66
|
+
this.loading = false;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
48
70
|
return isValid;
|
|
49
71
|
}
|
|
50
72
|
_triggerSubmission() {
|
|
51
|
-
// HTML5 method that triggers form validation and fires the native submit event
|
|
52
73
|
this._formEl.requestSubmit();
|
|
53
74
|
}
|
|
54
75
|
_prevStep() {
|
|
@@ -59,10 +80,8 @@ let StForm = class StForm extends LitElement {
|
|
|
59
80
|
}
|
|
60
81
|
_extractFormData() {
|
|
61
82
|
const formData = new FormData();
|
|
62
|
-
// Query all light-DOM children that have a 'name' attribute
|
|
63
83
|
const fields = this.querySelectorAll("[name]");
|
|
64
84
|
fields.forEach((field) => {
|
|
65
|
-
// Standard HTML form behavior: ignore disabled fields
|
|
66
85
|
if (field.hasAttribute("disabled"))
|
|
67
86
|
return;
|
|
68
87
|
const isToggle = field.tagName === "ST-RADIO" ||
|
|
@@ -70,7 +89,6 @@ let StForm = class StForm extends LitElement {
|
|
|
70
89
|
field.getAttribute("type") === "radio" ||
|
|
71
90
|
field.getAttribute("type") === "checkbox";
|
|
72
91
|
if (isToggle) {
|
|
73
|
-
// Only append radios/checkboxes if they are actively checked
|
|
74
92
|
if (field.checked) {
|
|
75
93
|
formData.append(field.name, field.value || "on");
|
|
76
94
|
}
|
|
@@ -78,20 +96,19 @@ let StForm = class StForm extends LitElement {
|
|
|
78
96
|
else if (field.tagName === "INPUT" &&
|
|
79
97
|
field.getAttribute("type") === "file" &&
|
|
80
98
|
field.files) {
|
|
81
|
-
// Handle native file uploads
|
|
82
99
|
Array.from(field.files).forEach((file) => formData.append(field.name, file));
|
|
83
100
|
}
|
|
84
101
|
else if (field.value !== undefined) {
|
|
85
|
-
// Handle st-input, st-select, st-textarea, and standard inputs
|
|
86
102
|
formData.append(field.name, field.value);
|
|
87
103
|
}
|
|
88
104
|
});
|
|
89
105
|
return formData;
|
|
90
106
|
}
|
|
91
|
-
_handleSubmit(e) {
|
|
107
|
+
async _handleSubmit(e) {
|
|
92
108
|
e.preventDefault();
|
|
93
109
|
e.stopPropagation();
|
|
94
|
-
|
|
110
|
+
const isValid = await this._validateCurrentContext();
|
|
111
|
+
if (!isValid)
|
|
95
112
|
return;
|
|
96
113
|
const hasSteps = this._stepElements.length > 0;
|
|
97
114
|
const isLastStep = hasSteps ? this._currentStepIndex === this._stepElements.length - 1 : true;
|
|
@@ -100,7 +117,6 @@ let StForm = class StForm extends LitElement {
|
|
|
100
117
|
this._updateStepVisibility();
|
|
101
118
|
return;
|
|
102
119
|
}
|
|
103
|
-
// Use our custom extractor to pierce the Shadow DOM boundary
|
|
104
120
|
const formData = this._extractFormData();
|
|
105
121
|
this.dispatchEvent(new CustomEvent("submit", {
|
|
106
122
|
bubbles: true,
|
|
@@ -176,7 +192,6 @@ let StForm = class StForm extends LitElement {
|
|
|
176
192
|
`
|
|
177
193
|
: ""}
|
|
178
194
|
|
|
179
|
-
<!-- Type is "button", but click triggers requestSubmit() on the internal form -->
|
|
180
195
|
<st-button
|
|
181
196
|
color="primary"
|
|
182
197
|
type="button"
|
|
@@ -204,9 +219,6 @@ StForm.styles = [
|
|
|
204
219
|
gap: var(--st-spacing-md);
|
|
205
220
|
}
|
|
206
221
|
|
|
207
|
-
/* ==========================================================
|
|
208
|
-
Layouts
|
|
209
|
-
========================================================== */
|
|
210
222
|
:host([layout="vertical"]) form {
|
|
211
223
|
flex-direction: column;
|
|
212
224
|
}
|
|
@@ -228,9 +240,6 @@ StForm.styles = [
|
|
|
228
240
|
flex-direction: column;
|
|
229
241
|
}
|
|
230
242
|
|
|
231
|
-
/* ==========================================================
|
|
232
|
-
Progress Navigation
|
|
233
|
-
========================================================== */
|
|
234
243
|
.progress-nav {
|
|
235
244
|
display: flex;
|
|
236
245
|
align-items: center;
|
|
@@ -294,9 +303,6 @@ StForm.styles = [
|
|
|
294
303
|
background-color: var(--st-color-success);
|
|
295
304
|
}
|
|
296
305
|
|
|
297
|
-
/* ==========================================================
|
|
298
|
-
Actions & States
|
|
299
|
-
========================================================== */
|
|
300
306
|
.form-actions {
|
|
301
307
|
display: flex;
|
|
302
308
|
gap: var(--st-spacing-md);
|
|
@@ -111,6 +111,22 @@ export declare const iconPaths: {
|
|
|
111
111
|
outline: import("lit-html").TemplateResult<2>;
|
|
112
112
|
solid: import("lit-html").TemplateResult<2>;
|
|
113
113
|
};
|
|
114
|
+
calender: {
|
|
115
|
+
outline: import("lit-html").TemplateResult<2>;
|
|
116
|
+
solid: import("lit-html").TemplateResult<2>;
|
|
117
|
+
};
|
|
118
|
+
user: {
|
|
119
|
+
outline: import("lit-html").TemplateResult<2>;
|
|
120
|
+
solid: import("lit-html").TemplateResult<2>;
|
|
121
|
+
};
|
|
122
|
+
home: {
|
|
123
|
+
outline: import("lit-html").TemplateResult<2>;
|
|
124
|
+
solid: import("lit-html").TemplateResult<2>;
|
|
125
|
+
};
|
|
126
|
+
"circle-cross": {
|
|
127
|
+
outline: import("lit-html").TemplateResult<2>;
|
|
128
|
+
solid: import("lit-html").TemplateResult<2>;
|
|
129
|
+
};
|
|
114
130
|
};
|
|
115
131
|
export type IconName = keyof typeof iconPaths;
|
|
116
132
|
//# sourceMappingURL=icon-paths.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon-paths.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon-paths.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;IACpB,cAAc;QACZ,OAAO;QACP,KAAK;;IAEP,gBAAgB;QACd,OAAO;QACP,KAAK;;IAEP,IAAI;QACF,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,QAAQ;QACN,OAAO;QACP,KAAK;;IAEP,gBAAgB;QACd,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,SAAS;QACP,OAAO;QACP,KAAK;;IAEP,iBAAiB;QACf,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,GAAG;QACD,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,SAAS;QACP,OAAO;QACP,KAAK;;IAEP,cAAc;QACZ,OAAO;QACP,KAAK;;IAEP,eAAe;QACb,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,QAAQ;QACN,OAAO;QACP,KAAK;;IAEP,MAAM;QACJ,OAAO;QACP,KAAK;;IAEP,eAAe;QACb,OAAO;QAIP,KAAK;;IAKP,QAAQ;QACN,OAAO;QACP,KAAK;;IAEP,KAAK;QACH,OAAO;QACP,KAAK;;IAEP,WAAW;QACT,OAAO;QACP,KAAK;;IAEP,MAAM;QACJ,OAAO;QACP,KAAK;;IAEP,IAAI;QACF,OAAO;QACP,KAAK;;IAEP,sBAAsB;QACpB,OAAO;QACP,KAAK;;IAEP,wBAAwB;QACtB,OAAO;QACP,KAAK;;IAEP,kBAAkB;QAChB,OAAO;QACP,KAAK;;IAEP,qBAAqB;QACnB,OAAO;QACP,KAAK;;CAER,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC"}
|
|
1
|
+
{"version":3,"file":"icon-paths.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon-paths.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;IACpB,cAAc;QACZ,OAAO;QACP,KAAK;;IAEP,gBAAgB;QACd,OAAO;QACP,KAAK;;IAEP,IAAI;QACF,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,QAAQ;QACN,OAAO;QACP,KAAK;;IAEP,gBAAgB;QACd,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,SAAS;QACP,OAAO;QACP,KAAK;;IAEP,iBAAiB;QACf,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,GAAG;QACD,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,SAAS;QACP,OAAO;QACP,KAAK;;IAEP,cAAc;QACZ,OAAO;QACP,KAAK;;IAEP,eAAe;QACb,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,QAAQ;QACN,OAAO;QACP,KAAK;;IAEP,MAAM;QACJ,OAAO;QACP,KAAK;;IAEP,eAAe;QACb,OAAO;QAIP,KAAK;;IAKP,QAAQ;QACN,OAAO;QACP,KAAK;;IAEP,KAAK;QACH,OAAO;QACP,KAAK;;IAEP,WAAW;QACT,OAAO;QACP,KAAK;;IAEP,MAAM;QACJ,OAAO;QACP,KAAK;;IAEP,IAAI;QACF,OAAO;QACP,KAAK;;IAEP,sBAAsB;QACpB,OAAO;QACP,KAAK;;IAEP,wBAAwB;QACtB,OAAO;QACP,KAAK;;IAEP,kBAAkB;QAChB,OAAO;QACP,KAAK;;IAEP,qBAAqB;QACnB,OAAO;QACP,KAAK;;IAEP,QAAQ;QACN,OAAO;QACP,KAAK;;IAEP,IAAI;QACF,OAAO;QACP,KAAK;;IAEP,IAAI;QACF,OAAO;QACP,KAAK;;IAEP,cAAc;QACZ,OAAO;QACP,KAAK;;CAER,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC"}
|
|
@@ -118,4 +118,20 @@ export const iconPaths = {
|
|
|
118
118
|
outline: svg `<rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2" fill="none"></rect><line x1="3" y1="8" x2="21" y2="8" stroke="currentColor" stroke-width="2"></line><line x1="7" y1="8" x2="7" y2="21" stroke="currentColor" stroke-width="2"></line><line x1="17" y1="8" x2="17" y2="21" stroke="currentColor" stroke-width="2"></line><line x1="10" y1="14" x2="14" y2="14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line>`,
|
|
119
119
|
solid: svg `<path fill="currentColor" d="M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5zm2 3h14V5H5v3zM7 9H3v12h4V9zm14 0h-4v12h4V9z"></path>`,
|
|
120
120
|
},
|
|
121
|
+
calender: {
|
|
122
|
+
outline: svg `<rect x="3" y="4" width="18" height="18" rx="2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></rect><line x1="16" y1="2" x2="16" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round"></line><line x1="8" y1="2" x2="8" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round"></line><line x1="3" y1="10" x2="21" y2="10" stroke="currentColor" stroke-width="2"></line>`,
|
|
123
|
+
solid: svg `<path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14v11z"></path>`,
|
|
124
|
+
},
|
|
125
|
+
user: {
|
|
126
|
+
outline: svg `<circle cx="12" cy="8" r="4" fill="none" stroke="currentColor" stroke-width="2"></circle><path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>`,
|
|
127
|
+
solid: svg `<path fill="currentColor" d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-3.33 0-10 1.67-10 5v3h20v-3c0-3.33-6.67-5-10-5z"></path>`,
|
|
128
|
+
},
|
|
129
|
+
home: {
|
|
130
|
+
outline: svg `<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><polyline points="9 22 9 12 15 12 15 22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline>`,
|
|
131
|
+
solid: svg `<path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path>`,
|
|
132
|
+
},
|
|
133
|
+
"circle-cross": {
|
|
134
|
+
outline: svg `<circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle><line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line><line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line>`,
|
|
135
|
+
solid: svg `<path fill="currentColor" fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm3.36 6.64a1 1 0 0 1 0 1.41L13.41 12l1.95 1.95a1 1 0 0 1-1.41 1.41L12 13.41l-1.95 1.95a1 1 0 0 1-1.41-1.41L10.59 12 8.64 10.05a1 1 0 0 1 1.41-1.41L12 10.59l1.95-1.95a1 1 0 0 1 1.41 0z" clip-rule="evenodd"></path>`,
|
|
136
|
+
},
|
|
121
137
|
};
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
2
|
import { IconName } from './icon-paths.js';
|
|
3
|
+
export type IconVariant = 'outline' | 'solid';
|
|
3
4
|
export declare class StIcon extends LitElement {
|
|
4
5
|
name: IconName | string;
|
|
5
|
-
variant:
|
|
6
|
+
variant: IconVariant;
|
|
6
7
|
color: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
|
|
7
8
|
size: 'sm' | 'md' | 'lg' | 'xl';
|
|
8
9
|
static styles: import("lit").CSSResult[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAa,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGtD,qBACa,MAAO,SAAQ,UAAU;IACR,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAM;IAC7B,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAa,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGtD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;AAE9C,qBACa,MAAO,SAAQ,UAAU;IACR,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAM;IAC7B,OAAO,EAAE,WAAW,CAAa;IAGlB,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAa;IAGlG,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAElF,MAAM,CAAC,MAAM,4BAsCX;IAEF,MAAM,yCAmBL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
|
|
@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
6
6
|
};
|
|
7
7
|
import { LitElement, html, css } from 'lit';
|
|
8
8
|
import { customElement, property } from 'lit/decorators.js';
|
|
9
|
-
import { resetStyles } from '../../styles/reset';
|
|
9
|
+
import { resetStyles } from '../../styles/reset.js';
|
|
10
10
|
let StLink = class StLink extends LitElement {
|
|
11
11
|
constructor() {
|
|
12
12
|
super(...arguments);
|
|
@@ -8,10 +8,21 @@ export declare class StModal extends LitElement {
|
|
|
8
8
|
* Title text displayed in the modal header.
|
|
9
9
|
*/
|
|
10
10
|
heading: string;
|
|
11
|
+
/**
|
|
12
|
+
* Size of the modal (sm, md, lg, xl, xxl).
|
|
13
|
+
*/
|
|
14
|
+
size: 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
|
|
15
|
+
/**
|
|
16
|
+
* If true, the modal cannot be closed by clicking the backdrop or pressing Esc.
|
|
17
|
+
*/
|
|
18
|
+
static: boolean;
|
|
11
19
|
private dialogEl;
|
|
20
|
+
private isClosing;
|
|
12
21
|
static styles: import("lit").CSSResult[];
|
|
13
22
|
updated(changedProperties: PropertyValues): void;
|
|
23
|
+
private closeWithAnimation;
|
|
14
24
|
private handleClose;
|
|
25
|
+
private handleCancel;
|
|
15
26
|
private onDialogClose;
|
|
16
27
|
private handleBackdropClick;
|
|
17
28
|
render(): import("lit-html").TemplateResult<1>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,
|
|
1
|
+
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAW,MAAM,KAAK,CAAC;AAIrE,qBACa,OAAQ,SAAQ,UAAU;IACrC;;OAEG;IACyC,IAAI,UAAS;IAEzD;;OAEG;IACyB,OAAO,SAAM;IAEzC;;OAEG;IACyB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAQ;IAE3E;;OAEG;IAC0B,MAAM,UAAS;IAE3B,OAAO,CAAC,QAAQ,CAAqB;IAEtD,OAAO,CAAC,SAAS,CAAS;IAE1B,MAAM,CAAC,MAAM,4BAkHX;IAEF,OAAO,CAAC,iBAAiB,EAAE,cAAc,QAYxC;IAED,OAAO,CAAC,kBAAkB;IAiB1B,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,mBAAmB;IAe3B,MAAM,yCA4BL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
|