@synergy-design-system/components 1.0.0-main.2 → 1.0.0-main.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +9 -0
- package/README.md +150 -1
- package/dist/chunks/chunk.23HTU3YE.js +189 -0
- package/dist/chunks/chunk.23HTU3YE.js.map +7 -0
- package/dist/chunks/chunk.27VJRQCE.js +224 -0
- package/dist/chunks/chunk.27VJRQCE.js.map +7 -0
- package/dist/chunks/chunk.2XZKXVMR.js +44 -0
- package/dist/chunks/chunk.2XZKXVMR.js.map +7 -0
- package/dist/chunks/chunk.36BORWIU.js +351 -0
- package/dist/chunks/chunk.36BORWIU.js.map +7 -0
- package/dist/chunks/chunk.4CBN5LPQ.js +137 -0
- package/dist/chunks/chunk.4CBN5LPQ.js.map +7 -0
- package/dist/chunks/chunk.4I6M5V6O.js +56 -0
- package/dist/chunks/chunk.4I6M5V6O.js.map +7 -0
- package/dist/chunks/chunk.4XAK6MOQ.js +45 -0
- package/dist/chunks/chunk.4XAK6MOQ.js.map +7 -0
- package/dist/chunks/chunk.4ZURABYO.js +24 -0
- package/dist/chunks/chunk.4ZURABYO.js.map +7 -0
- package/dist/chunks/chunk.6C4JXZZN.js +15 -0
- package/dist/chunks/chunk.6C4JXZZN.js.map +7 -0
- package/dist/chunks/chunk.7IH6VY33.js +12 -0
- package/dist/chunks/chunk.7IH6VY33.js.map +7 -0
- package/dist/chunks/chunk.A3SKDWCT.js +42 -0
- package/dist/chunks/chunk.A3SKDWCT.js.map +7 -0
- package/dist/chunks/chunk.A6SRE7EI.js +280 -0
- package/dist/chunks/chunk.A6SRE7EI.js.map +7 -0
- package/dist/chunks/chunk.AFEABUNX.js +107 -0
- package/dist/chunks/chunk.AFEABUNX.js.map +7 -0
- package/dist/chunks/chunk.C7624ITA.js +30 -0
- package/dist/chunks/chunk.C7624ITA.js.map +7 -0
- package/dist/chunks/chunk.CLAMILD3.js +175 -0
- package/dist/chunks/chunk.CLAMILD3.js.map +7 -0
- package/dist/chunks/chunk.CODFHJDI.js +360 -0
- package/dist/chunks/chunk.CODFHJDI.js.map +7 -0
- package/dist/chunks/chunk.CRL545VA.js +63 -0
- package/dist/chunks/chunk.CRL545VA.js.map +7 -0
- package/dist/chunks/chunk.DJOAQ4JU.js +36 -0
- package/dist/chunks/chunk.DJOAQ4JU.js.map +7 -0
- package/dist/chunks/chunk.E2GBU3G6.js +12 -0
- package/dist/chunks/chunk.E2GBU3G6.js.map +7 -0
- package/dist/chunks/chunk.F4MKRDFE.js +127 -0
- package/dist/chunks/chunk.F4MKRDFE.js.map +7 -0
- package/dist/chunks/chunk.F4MRQLNL.js +25 -0
- package/dist/chunks/chunk.F4MRQLNL.js.map +7 -0
- package/dist/chunks/chunk.FVSP4LXX.js +138 -0
- package/dist/chunks/chunk.FVSP4LXX.js.map +7 -0
- package/dist/chunks/chunk.GDNBN76M.js +86 -0
- package/dist/chunks/chunk.GDNBN76M.js.map +7 -0
- package/dist/chunks/chunk.GNAJOKCJ.js +32 -0
- package/dist/chunks/chunk.GNAJOKCJ.js.map +7 -0
- package/dist/chunks/chunk.H5LJXPMK.js +12 -0
- package/dist/chunks/chunk.H5LJXPMK.js.map +7 -0
- package/dist/chunks/chunk.HC2BCHTH.js +480 -0
- package/dist/chunks/chunk.HC2BCHTH.js.map +7 -0
- package/dist/chunks/chunk.HD5XNRL6.js +12 -0
- package/dist/chunks/chunk.HD5XNRL6.js.map +7 -0
- package/dist/chunks/chunk.JBYBQ5TQ.js +132 -0
- package/dist/chunks/chunk.JBYBQ5TQ.js.map +7 -0
- package/dist/chunks/chunk.JHXCBOUD.js +123 -0
- package/dist/chunks/chunk.JHXCBOUD.js.map +7 -0
- package/dist/chunks/chunk.KXVHGSJZ.js +12 -0
- package/dist/chunks/chunk.KXVHGSJZ.js.map +7 -0
- package/dist/chunks/chunk.MMHKLOBP.js +12 -0
- package/dist/chunks/chunk.MMHKLOBP.js.map +7 -0
- package/dist/chunks/chunk.MNMITYTH.js +184 -0
- package/dist/chunks/chunk.MNMITYTH.js.map +7 -0
- package/dist/chunks/chunk.N2I6HVX3.js +71 -0
- package/dist/chunks/chunk.N2I6HVX3.js.map +7 -0
- package/dist/chunks/chunk.NKIYFJN2.js +1 -0
- package/dist/chunks/chunk.NKIYFJN2.js.map +7 -0
- package/dist/chunks/chunk.O7USYXBT.js +23 -0
- package/dist/chunks/chunk.O7USYXBT.js.map +7 -0
- package/dist/chunks/chunk.OVVMSN4D.js +37 -0
- package/dist/chunks/chunk.OVVMSN4D.js.map +7 -0
- package/dist/chunks/chunk.OXUFFH57.js +318 -0
- package/dist/chunks/chunk.OXUFFH57.js.map +7 -0
- package/dist/chunks/chunk.P2LNG2PZ.js +275 -0
- package/dist/chunks/chunk.P2LNG2PZ.js.map +7 -0
- package/dist/chunks/chunk.PJO6TM3T.js +10 -0
- package/dist/chunks/chunk.PJO6TM3T.js.map +7 -0
- package/dist/chunks/chunk.QAOCPWQU.js +12 -0
- package/dist/chunks/chunk.QAOCPWQU.js.map +7 -0
- package/dist/chunks/chunk.QPGMTMMJ.js +12 -0
- package/dist/chunks/chunk.QPGMTMMJ.js.map +7 -0
- package/dist/chunks/chunk.R6VNLE6N.js +11 -0
- package/dist/chunks/chunk.R6VNLE6N.js.map +7 -0
- package/dist/chunks/chunk.RSONAU45.js +33 -0
- package/dist/chunks/chunk.RSONAU45.js.map +7 -0
- package/dist/chunks/chunk.S545KS4R.js +111 -0
- package/dist/chunks/chunk.S545KS4R.js.map +7 -0
- package/dist/chunks/chunk.SGXORY4I.js +12 -0
- package/dist/chunks/chunk.SGXORY4I.js.map +7 -0
- package/dist/chunks/chunk.V6VND4OF.js +49 -0
- package/dist/chunks/chunk.V6VND4OF.js.map +7 -0
- package/dist/chunks/chunk.VZ7S7YYN.js +34 -0
- package/dist/chunks/chunk.VZ7S7YYN.js.map +7 -0
- package/dist/chunks/chunk.W46CFM2R.js +90 -0
- package/dist/chunks/chunk.W46CFM2R.js.map +7 -0
- package/dist/chunks/chunk.WFAJR3FN.js +25 -0
- package/dist/chunks/chunk.WFAJR3FN.js.map +7 -0
- package/dist/chunks/chunk.WJBBJ5U3.js +32 -0
- package/dist/chunks/chunk.WJBBJ5U3.js.map +7 -0
- package/dist/chunks/chunk.WUT3EE6L.js +12 -0
- package/dist/chunks/chunk.WUT3EE6L.js.map +7 -0
- package/dist/chunks/chunk.X3WNKQPZ.js +212 -0
- package/dist/chunks/chunk.X3WNKQPZ.js.map +7 -0
- package/dist/chunks/chunk.XGXFE6IF.js +49 -0
- package/dist/chunks/chunk.XGXFE6IF.js.map +7 -0
- package/dist/chunks/chunk.YBIBWRKC.js +19 -0
- package/dist/chunks/chunk.YBIBWRKC.js.map +7 -0
- package/dist/chunks/chunk.YTS5TRJZ.js +376 -0
- package/dist/chunks/chunk.YTS5TRJZ.js.map +7 -0
- package/dist/chunks/chunk.Z3RZUTQU.js +42 -0
- package/dist/chunks/chunk.Z3RZUTQU.js.map +7 -0
- package/dist/components/button/button.component.d.ts +123 -0
- package/dist/components/button/button.component.js +26 -0
- package/dist/components/button/button.component.js.map +7 -0
- package/dist/components/button/button.custom.styles.d.ts +2 -0
- package/dist/components/button/button.custom.styles.js +8 -0
- package/dist/components/button/button.custom.styles.js.map +7 -0
- package/dist/components/button/button.d.ts +8 -0
- package/dist/components/button/button.js +27 -0
- package/dist/components/button/button.js.map +7 -0
- package/dist/components/button/button.styles.d.ts +2 -0
- package/dist/components/button/button.styles.js +10 -0
- package/dist/components/button/button.styles.js.map +7 -0
- package/dist/components/button-group/button-group.component.d.ts +28 -0
- package/dist/components/button-group/button-group.component.js +11 -0
- package/dist/components/button-group/button-group.component.js.map +7 -0
- package/dist/components/button-group/button-group.d.ts +8 -0
- package/dist/components/button-group/button-group.js +12 -0
- package/dist/components/button-group/button-group.js.map +7 -0
- package/dist/components/button-group/button-group.styles.d.ts +2 -0
- package/dist/components/button-group/button-group.styles.js +9 -0
- package/dist/components/button-group/button-group.styles.js.map +7 -0
- package/dist/components/checkbox/checkbox.component.d.ts +93 -0
- package/dist/components/checkbox/checkbox.component.js +22 -0
- package/dist/components/checkbox/checkbox.component.js.map +7 -0
- package/dist/components/checkbox/checkbox.custom.styles.d.ts +2 -0
- package/dist/components/checkbox/checkbox.custom.styles.js +8 -0
- package/dist/components/checkbox/checkbox.custom.styles.js.map +7 -0
- package/dist/components/checkbox/checkbox.d.ts +8 -0
- package/dist/components/checkbox/checkbox.js +23 -0
- package/dist/components/checkbox/checkbox.js.map +7 -0
- package/dist/components/checkbox/checkbox.styles.d.ts +2 -0
- package/dist/components/checkbox/checkbox.styles.js +10 -0
- package/dist/components/checkbox/checkbox.styles.js.map +7 -0
- package/dist/components/icon/icon.component.d.ts +42 -0
- package/dist/components/icon/icon.component.js +17 -0
- package/dist/components/icon/icon.component.js.map +7 -0
- package/dist/components/icon/icon.custom.styles.d.ts +2 -0
- package/dist/components/icon/icon.custom.styles.js +8 -0
- package/dist/components/icon/icon.custom.styles.js.map +7 -0
- package/dist/components/icon/icon.d.ts +8 -0
- package/dist/components/icon/icon.js +18 -0
- package/dist/components/icon/icon.js.map +7 -0
- package/dist/components/icon/icon.styles.d.ts +2 -0
- package/dist/components/icon/icon.styles.js +10 -0
- package/dist/components/icon/icon.styles.js.map +7 -0
- package/dist/components/icon/library.d.ts +19 -0
- package/dist/components/icon/library.default.d.ts +3 -0
- package/dist/components/icon/library.default.js +9 -0
- package/dist/components/icon/library.default.js.map +7 -0
- package/dist/components/icon/library.js +19 -0
- package/dist/components/icon/library.js.map +7 -0
- package/dist/components/icon/library.system.d.ts +3 -0
- package/dist/components/icon/library.system.js +8 -0
- package/dist/components/icon/library.system.js.map +7 -0
- package/dist/components/input/input.component.d.ts +175 -0
- package/dist/components/input/input.component.js +26 -0
- package/dist/components/input/input.component.js.map +7 -0
- package/dist/components/input/input.custom.styles.d.ts +2 -0
- package/dist/components/input/input.custom.styles.js +8 -0
- package/dist/components/input/input.custom.styles.js.map +7 -0
- package/dist/components/input/input.d.ts +8 -0
- package/dist/components/input/input.js +27 -0
- package/dist/components/input/input.js.map +7 -0
- package/dist/components/input/input.styles.d.ts +2 -0
- package/dist/components/input/input.styles.js +11 -0
- package/dist/components/input/input.styles.js.map +7 -0
- package/dist/components/radio/radio.component.d.ts +53 -0
- package/dist/components/radio/radio.component.js +20 -0
- package/dist/components/radio/radio.component.js.map +7 -0
- package/dist/components/radio/radio.custom.styles.d.ts +2 -0
- package/dist/components/radio/radio.custom.styles.js +8 -0
- package/dist/components/radio/radio.custom.styles.js.map +7 -0
- package/dist/components/radio/radio.d.ts +8 -0
- package/dist/components/radio/radio.js +21 -0
- package/dist/components/radio/radio.js.map +7 -0
- package/dist/components/radio/radio.styles.d.ts +2 -0
- package/dist/components/radio/radio.styles.js +10 -0
- package/dist/components/radio/radio.styles.js.map +7 -0
- package/dist/components/radio-button/radio-button.component.d.ts +53 -0
- package/dist/components/radio-button/radio-button.component.js +15 -0
- package/dist/components/radio-button/radio-button.component.js.map +7 -0
- package/dist/components/radio-button/radio-button.d.ts +8 -0
- package/dist/components/radio-button/radio-button.js +16 -0
- package/dist/components/radio-button/radio-button.js.map +7 -0
- package/dist/components/radio-button/radio-button.styles.d.ts +2 -0
- package/dist/components/radio-button/radio-button.styles.js +11 -0
- package/dist/components/radio-button/radio-button.styles.js.map +7 -0
- package/dist/components/radio-group/radio-group.component.d.ts +89 -0
- package/dist/components/radio-group/radio-group.component.js +18 -0
- package/dist/components/radio-group/radio-group.component.js.map +7 -0
- package/dist/components/radio-group/radio-group.custom.styles.d.ts +2 -0
- package/dist/components/radio-group/radio-group.custom.styles.js +8 -0
- package/dist/components/radio-group/radio-group.custom.styles.js.map +7 -0
- package/dist/components/radio-group/radio-group.d.ts +8 -0
- package/dist/components/radio-group/radio-group.js +19 -0
- package/dist/components/radio-group/radio-group.js.map +7 -0
- package/dist/components/radio-group/radio-group.styles.d.ts +2 -0
- package/dist/components/radio-group/radio-group.styles.js +11 -0
- package/dist/components/radio-group/radio-group.styles.js.map +7 -0
- package/dist/components/spinner/spinner.component.d.ts +20 -0
- package/dist/components/spinner/spinner.component.js +13 -0
- package/dist/components/spinner/spinner.component.js.map +7 -0
- package/dist/components/spinner/spinner.styles.d.ts +2 -0
- package/dist/components/spinner/spinner.styles.js +9 -0
- package/dist/components/spinner/spinner.styles.js.map +7 -0
- package/dist/components/switch/switch.component.d.ts +86 -0
- package/dist/components/switch/switch.component.js +15 -0
- package/dist/components/switch/switch.component.js.map +7 -0
- package/dist/components/switch/switch.custom.styles.d.ts +2 -0
- package/dist/components/switch/switch.custom.styles.js +8 -0
- package/dist/components/switch/switch.custom.styles.js.map +7 -0
- package/dist/components/switch/switch.d.ts +8 -0
- package/dist/components/switch/switch.js +16 -0
- package/dist/components/switch/switch.js.map +7 -0
- package/dist/components/switch/switch.styles.d.ts +2 -0
- package/dist/components/switch/switch.styles.js +10 -0
- package/dist/components/switch/switch.styles.js.map +7 -0
- package/dist/components/textarea/textarea.component.d.ts +131 -0
- package/dist/components/textarea/textarea.component.js +17 -0
- package/dist/components/textarea/textarea.component.js.map +7 -0
- package/dist/components/textarea/textarea.custom.styles.d.ts +2 -0
- package/dist/components/textarea/textarea.custom.styles.js +8 -0
- package/dist/components/textarea/textarea.custom.styles.js.map +7 -0
- package/dist/components/textarea/textarea.d.ts +8 -0
- package/dist/components/textarea/textarea.js +18 -0
- package/dist/components/textarea/textarea.js.map +7 -0
- package/dist/components/textarea/textarea.styles.d.ts +2 -0
- package/dist/components/textarea/textarea.styles.js +11 -0
- package/dist/components/textarea/textarea.styles.js.map +7 -0
- package/dist/custom-elements.json +4462 -0
- package/dist/events/events.d.ts +8 -0
- package/dist/events/syn-blur.d.ts +6 -0
- package/dist/events/syn-change.d.ts +6 -0
- package/dist/events/syn-clear.d.ts +6 -0
- package/dist/events/syn-error.d.ts +8 -0
- package/dist/events/syn-focus.d.ts +6 -0
- package/dist/events/syn-input.d.ts +6 -0
- package/dist/events/syn-invalid.d.ts +6 -0
- package/dist/events/syn-load.d.ts +6 -0
- package/dist/internal/default-value.d.ts +2 -0
- package/dist/internal/form.d.ts +73 -0
- package/dist/internal/slot.d.ts +23 -0
- package/dist/internal/synergy-element.d.ts +47 -0
- package/dist/internal/test/form-control-base-tests.d.ts +7 -0
- package/dist/internal/test.d.ts +28 -0
- package/dist/internal/watch.d.ts +26 -0
- package/dist/styles/component.styles.d.ts +2 -0
- package/dist/styles/form-control.custom.styles.d.ts +2 -0
- package/dist/styles/form-control.styles.d.ts +2 -0
- package/dist/synergy-autoloader.d.ts +4 -0
- package/dist/synergy-autoloader.js +41 -0
- package/dist/synergy-autoloader.js.map +7 -0
- package/dist/synergy.d.ts +14 -0
- package/dist/synergy.js +104 -0
- package/dist/synergy.js.map +7 -0
- package/dist/translations/de.d.ts +3 -0
- package/dist/translations/de.js +46 -0
- package/dist/translations/de.js.map +7 -0
- package/dist/translations/en.d.ts +3 -0
- package/dist/translations/en.js +8 -0
- package/dist/translations/en.js.map +7 -0
- package/dist/utilities/base-path.d.ts +18 -0
- package/dist/utilities/base-path.js +10 -0
- package/dist/utilities/base-path.js.map +7 -0
- package/dist/utilities/form.d.ts +11 -0
- package/dist/utilities/form.js +11 -0
- package/dist/utilities/form.js.map +7 -0
- package/dist/utilities/icon-library.d.ts +1 -0
- package/dist/utilities/icon-library.js +14 -0
- package/dist/utilities/icon-library.js.map +7 -0
- package/dist/utilities/localize.d.ts +33 -0
- package/dist/utilities/localize.js +11 -0
- package/dist/utilities/localize.js.map +7 -0
- package/dist/vscode.html-custom-data.json +760 -0
- package/dist/web-types.json +1596 -0
- package/package.json +61 -29
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import {
|
|
2
|
+
button_styles_default
|
|
3
|
+
} from "./chunk.YTS5TRJZ.js";
|
|
4
|
+
|
|
5
|
+
// src/components/radio-button/radio-button.styles.ts
|
|
6
|
+
import { css } from "lit";
|
|
7
|
+
var radio_button_styles_default = css`
|
|
8
|
+
/* stylelint-disable */
|
|
9
|
+
${button_styles_default}
|
|
10
|
+
|
|
11
|
+
.button__prefix,
|
|
12
|
+
.button__suffix,
|
|
13
|
+
.button__label {
|
|
14
|
+
display: inline-flex;
|
|
15
|
+
position: relative;
|
|
16
|
+
align-items: center;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/* We use a hidden input so constraint validation errors work, since they don't appear to show when used with buttons.
|
|
20
|
+
We can't actually hide it, though, otherwise the messages will be suppressed by the browser. */
|
|
21
|
+
.hidden-input {
|
|
22
|
+
all: unset;
|
|
23
|
+
position: absolute;
|
|
24
|
+
top: 0;
|
|
25
|
+
left: 0;
|
|
26
|
+
bottom: 0;
|
|
27
|
+
right: 0;
|
|
28
|
+
outline: dotted 1px red;
|
|
29
|
+
opacity: 0;
|
|
30
|
+
z-index: -1;
|
|
31
|
+
}
|
|
32
|
+
`;
|
|
33
|
+
|
|
34
|
+
export {
|
|
35
|
+
radio_button_styles_default
|
|
36
|
+
};
|
|
37
|
+
//# sourceMappingURL=chunk.OVVMSN4D.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/components/radio-button/radio-button.styles.ts"],
|
|
4
|
+
"sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { css } from 'lit';\nimport buttonStyles from '../button/button.styles.js';\n\nexport default css`\n\t/* stylelint-disable */\n ${buttonStyles}\n\n .button__prefix,\n .button__suffix,\n .button__label {\n display: inline-flex;\n position: relative;\n align-items: center;\n }\n\n /* We use a hidden input so constraint validation errors work, since they don't appear to show when used with buttons.\n We can't actually hide it, though, otherwise the messages will be suppressed by the browser. */\n .hidden-input {\n all: unset;\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n outline: dotted 1px red;\n opacity: 0;\n z-index: -1;\n }\n`;\n"],
|
|
5
|
+
"mappings": ";;;;;AAMA,SAAS,WAAW;AAGpB,IAAO,8BAAQ;AAAA;AAAA,IAEX,qBAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,318 @@
|
|
|
1
|
+
import {
|
|
2
|
+
form_control_styles_default
|
|
3
|
+
} from "./chunk.JHXCBOUD.js";
|
|
4
|
+
import {
|
|
5
|
+
input_custom_styles_default
|
|
6
|
+
} from "./chunk.W46CFM2R.js";
|
|
7
|
+
import {
|
|
8
|
+
component_styles_default
|
|
9
|
+
} from "./chunk.O7USYXBT.js";
|
|
10
|
+
|
|
11
|
+
// src/components/input/input.styles.ts
|
|
12
|
+
import { css } from "lit";
|
|
13
|
+
var input_styles_default = css`
|
|
14
|
+
/* stylelint-disable */
|
|
15
|
+
${component_styles_default}
|
|
16
|
+
${form_control_styles_default}
|
|
17
|
+
|
|
18
|
+
:host {
|
|
19
|
+
display: block;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.input {
|
|
23
|
+
flex: 1 1 auto;
|
|
24
|
+
display: inline-flex;
|
|
25
|
+
align-items: stretch;
|
|
26
|
+
justify-content: start;
|
|
27
|
+
position: relative;
|
|
28
|
+
width: 100%;
|
|
29
|
+
font-family: var(--syn-input-font-family);
|
|
30
|
+
font-weight: var(--syn-input-font-weight);
|
|
31
|
+
letter-spacing: var(--syn-input-letter-spacing);
|
|
32
|
+
vertical-align: middle;
|
|
33
|
+
overflow: hidden;
|
|
34
|
+
cursor: text;
|
|
35
|
+
transition:
|
|
36
|
+
var(--syn-transition-fast) color,
|
|
37
|
+
var(--syn-transition-fast) border,
|
|
38
|
+
var(--syn-transition-fast) box-shadow,
|
|
39
|
+
var(--syn-transition-fast) background-color;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* Standard inputs */
|
|
43
|
+
.input--standard {
|
|
44
|
+
background-color: var(--syn-input-background-color);
|
|
45
|
+
border: solid var(--syn-input-border-width) var(--syn-input-border-color);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.input--standard:hover:not(.input--disabled) {
|
|
49
|
+
background-color: var(--syn-input-background-color-hover);
|
|
50
|
+
border-color: var(--syn-input-border-color-hover);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.input--standard.input--focused:not(.input--disabled) {
|
|
54
|
+
background-color: var(--syn-input-background-color-focus);
|
|
55
|
+
border-color: var(--syn-input-border-color-focus);
|
|
56
|
+
box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-color);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.input--standard.input--focused:not(.input--disabled) .input__control {
|
|
60
|
+
color: var(--syn-input-color-focus);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.input--standard.input--disabled {
|
|
64
|
+
background-color: var(--syn-input-background-color-disabled);
|
|
65
|
+
border-color: var(--syn-input-border-color-disabled);
|
|
66
|
+
opacity: 0.5;
|
|
67
|
+
cursor: not-allowed;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.input--standard.input--disabled .input__control {
|
|
71
|
+
color: var(--syn-input-color-disabled);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.input--standard.input--disabled .input__control::placeholder {
|
|
75
|
+
color: var(--syn-input-placeholder-color-disabled);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* Readonly inputs */
|
|
79
|
+
.input--readonly {
|
|
80
|
+
border: none;
|
|
81
|
+
background-color: var(--syn-input-readonly-background-color);
|
|
82
|
+
color: var(--syn-input-color);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.input--readonly:hover:not(.input--disabled) {
|
|
86
|
+
background-color: var(--syn-input-readonly-background-color-hover);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.input--readonly.input--focused:not(.input--disabled) {
|
|
90
|
+
background-color: var(--syn-input-readonly-background-color-focus);
|
|
91
|
+
outline: var(--syn-focus-ring);
|
|
92
|
+
outline-offset: var(--syn-focus-ring-offset);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.input--readonly.input--disabled {
|
|
96
|
+
background-color: var(--syn-input-readonly-background-color-disabled);
|
|
97
|
+
opacity: 0.5;
|
|
98
|
+
cursor: not-allowed;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.input__control {
|
|
102
|
+
flex: 1 1 auto;
|
|
103
|
+
font-family: inherit;
|
|
104
|
+
font-size: inherit;
|
|
105
|
+
font-weight: inherit;
|
|
106
|
+
min-width: 0;
|
|
107
|
+
height: 100%;
|
|
108
|
+
color: var(--syn-input-color);
|
|
109
|
+
border: none;
|
|
110
|
+
background: inherit;
|
|
111
|
+
box-shadow: none;
|
|
112
|
+
padding: 0;
|
|
113
|
+
margin: 0;
|
|
114
|
+
cursor: inherit;
|
|
115
|
+
-webkit-appearance: none;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.input__control::-webkit-search-decoration,
|
|
119
|
+
.input__control::-webkit-search-cancel-button,
|
|
120
|
+
.input__control::-webkit-search-results-button,
|
|
121
|
+
.input__control::-webkit-search-results-decoration {
|
|
122
|
+
-webkit-appearance: none;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.input__control:-webkit-autofill,
|
|
126
|
+
.input__control:-webkit-autofill:hover,
|
|
127
|
+
.input__control:-webkit-autofill:focus,
|
|
128
|
+
.input__control:-webkit-autofill:active {
|
|
129
|
+
box-shadow: 0 0 0 var(--syn-input-height-large) var(--syn-input-background-color-hover) inset !important;
|
|
130
|
+
-webkit-text-fill-color: var(--syn-color-primary-500);
|
|
131
|
+
caret-color: var(--syn-input-color);
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.input--readonly .input__control:-webkit-autofill,
|
|
135
|
+
.input--readonly .input__control:-webkit-autofill:hover,
|
|
136
|
+
.input--readonly .input__control:-webkit-autofill:focus,
|
|
137
|
+
.input--readonly .input__control:-webkit-autofill:active {
|
|
138
|
+
box-shadow: 0 0 0 var(--syn-input-height-large) var(--syn-input-readonly-background-color) inset !important;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.input__control::placeholder {
|
|
142
|
+
color: var(--syn-input-placeholder-color);
|
|
143
|
+
user-select: none;
|
|
144
|
+
-webkit-user-select: none;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.input:hover:not(.input--disabled) .input__control {
|
|
148
|
+
color: var(--syn-input-color-hover);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.input__control:focus {
|
|
152
|
+
outline: none;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.input__prefix,
|
|
156
|
+
.input__suffix {
|
|
157
|
+
display: inline-flex;
|
|
158
|
+
flex: 0 0 auto;
|
|
159
|
+
align-items: center;
|
|
160
|
+
cursor: default;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.input__prefix ::slotted(syn-icon),
|
|
164
|
+
.input__suffix ::slotted(syn-icon) {
|
|
165
|
+
color: var(--syn-input-icon-color);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
/*
|
|
169
|
+
* Size modifiers
|
|
170
|
+
*/
|
|
171
|
+
|
|
172
|
+
.input--small {
|
|
173
|
+
border-radius: var(--syn-input-border-radius-small);
|
|
174
|
+
font-size: var(--syn-input-font-size-small);
|
|
175
|
+
height: var(--syn-input-height-small);
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.input--small .input__control {
|
|
179
|
+
height: calc(var(--syn-input-height-small) - var(--syn-input-border-width) * 2);
|
|
180
|
+
padding: 0 var(--syn-input-spacing-small);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.input--small .input__clear,
|
|
184
|
+
.input--small .input__password-toggle {
|
|
185
|
+
width: calc(1em + var(--syn-input-spacing-small) * 2);
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.input--small .input__prefix ::slotted(*) {
|
|
189
|
+
margin-inline-start: var(--syn-input-spacing-small);
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.input--small .input__suffix ::slotted(*) {
|
|
193
|
+
margin-inline-end: var(--syn-input-spacing-small);
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.input--medium {
|
|
197
|
+
border-radius: var(--syn-input-border-radius-medium);
|
|
198
|
+
font-size: var(--syn-input-font-size-medium);
|
|
199
|
+
height: var(--syn-input-height-medium);
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.input--medium .input__control {
|
|
203
|
+
height: calc(var(--syn-input-height-medium) - var(--syn-input-border-width) * 2);
|
|
204
|
+
padding: 0 var(--syn-input-spacing-medium);
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.input--medium .input__clear,
|
|
208
|
+
.input--medium .input__password-toggle {
|
|
209
|
+
width: calc(1em + var(--syn-input-spacing-medium) * 2);
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.input--medium .input__prefix ::slotted(*) {
|
|
213
|
+
margin-inline-start: var(--syn-input-spacing-medium);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.input--medium .input__suffix ::slotted(*) {
|
|
217
|
+
margin-inline-end: var(--syn-input-spacing-medium);
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.input--large {
|
|
221
|
+
border-radius: var(--syn-input-border-radius-large);
|
|
222
|
+
font-size: var(--syn-input-font-size-large);
|
|
223
|
+
height: var(--syn-input-height-large);
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.input--large .input__control {
|
|
227
|
+
height: calc(var(--syn-input-height-large) - var(--syn-input-border-width) * 2);
|
|
228
|
+
padding: 0 var(--syn-input-spacing-large);
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.input--large .input__clear,
|
|
232
|
+
.input--large .input__password-toggle {
|
|
233
|
+
width: calc(1em + var(--syn-input-spacing-large) * 2);
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.input--large .input__prefix ::slotted(*) {
|
|
237
|
+
margin-inline-start: var(--syn-input-spacing-large);
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.input--large .input__suffix ::slotted(*) {
|
|
241
|
+
margin-inline-end: var(--syn-input-spacing-large);
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
/*
|
|
245
|
+
* Pill modifier
|
|
246
|
+
*/
|
|
247
|
+
|
|
248
|
+
.input--pill.input--small {
|
|
249
|
+
border-radius: var(--syn-input-height-small);
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.input--pill.input--medium {
|
|
253
|
+
border-radius: var(--syn-input-height-medium);
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.input--pill.input--large {
|
|
257
|
+
border-radius: var(--syn-input-height-large);
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
/*
|
|
261
|
+
* Clearable + Password Toggle
|
|
262
|
+
*/
|
|
263
|
+
|
|
264
|
+
.input__clear:not(.input__clear--visible) {
|
|
265
|
+
visibility: hidden;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.input__clear,
|
|
269
|
+
.input__password-toggle {
|
|
270
|
+
display: inline-flex;
|
|
271
|
+
align-items: center;
|
|
272
|
+
justify-content: center;
|
|
273
|
+
font-size: inherit;
|
|
274
|
+
color: var(--syn-input-icon-color);
|
|
275
|
+
border: none;
|
|
276
|
+
background: none;
|
|
277
|
+
padding: 0;
|
|
278
|
+
transition: var(--syn-transition-fast) color;
|
|
279
|
+
cursor: pointer;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.input__clear:hover,
|
|
283
|
+
.input__password-toggle:hover {
|
|
284
|
+
color: var(--syn-input-icon-color-hover);
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.input__clear:focus,
|
|
288
|
+
.input__password-toggle:focus {
|
|
289
|
+
outline: none;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.input--empty .input__clear {
|
|
293
|
+
visibility: hidden;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
/* Don't show the browser's password toggle in Edge */
|
|
297
|
+
::-ms-reveal {
|
|
298
|
+
display: none;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
/* Hide the built-in number spinner */
|
|
302
|
+
.input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,
|
|
303
|
+
.input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {
|
|
304
|
+
-webkit-appearance: none;
|
|
305
|
+
display: none;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.input--no-spin-buttons input[type='number'] {
|
|
309
|
+
-moz-appearance: textfield;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
${input_custom_styles_default}
|
|
313
|
+
`;
|
|
314
|
+
|
|
315
|
+
export {
|
|
316
|
+
input_styles_default
|
|
317
|
+
};
|
|
318
|
+
//# sourceMappingURL=chunk.OXUFFH57.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/components/input/input.styles.ts"],
|
|
4
|
+
"sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { css } from 'lit';\nimport customStyles from './input.custom.styles.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport formControlStyles from '../../styles/form-control.styles.js';\n\nexport default css`\n\t/* stylelint-disable */\n ${componentStyles}\n ${formControlStyles}\n\n :host {\n display: block;\n }\n\n .input {\n flex: 1 1 auto;\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n font-family: var(--syn-input-font-family);\n font-weight: var(--syn-input-font-weight);\n letter-spacing: var(--syn-input-letter-spacing);\n vertical-align: middle;\n overflow: hidden;\n cursor: text;\n transition:\n var(--syn-transition-fast) color,\n var(--syn-transition-fast) border,\n var(--syn-transition-fast) box-shadow,\n var(--syn-transition-fast) background-color;\n }\n\n /* Standard inputs */\n .input--standard {\n background-color: var(--syn-input-background-color);\n border: solid var(--syn-input-border-width) var(--syn-input-border-color);\n }\n\n .input--standard:hover:not(.input--disabled) {\n background-color: var(--syn-input-background-color-hover);\n border-color: var(--syn-input-border-color-hover);\n }\n\n .input--standard.input--focused:not(.input--disabled) {\n background-color: var(--syn-input-background-color-focus);\n border-color: var(--syn-input-border-color-focus);\n box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-color);\n }\n\n .input--standard.input--focused:not(.input--disabled) .input__control {\n color: var(--syn-input-color-focus);\n }\n\n .input--standard.input--disabled {\n background-color: var(--syn-input-background-color-disabled);\n border-color: var(--syn-input-border-color-disabled);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input--standard.input--disabled .input__control {\n color: var(--syn-input-color-disabled);\n }\n\n .input--standard.input--disabled .input__control::placeholder {\n color: var(--syn-input-placeholder-color-disabled);\n }\n\n /* Readonly inputs */\n .input--readonly {\n border: none;\n background-color: var(--syn-input-readonly-background-color);\n color: var(--syn-input-color);\n }\n\n .input--readonly:hover:not(.input--disabled) {\n background-color: var(--syn-input-readonly-background-color-hover);\n }\n\n .input--readonly.input--focused:not(.input--disabled) {\n background-color: var(--syn-input-readonly-background-color-focus);\n outline: var(--syn-focus-ring);\n outline-offset: var(--syn-focus-ring-offset);\n }\n\n .input--readonly.input--disabled {\n background-color: var(--syn-input-readonly-background-color-disabled);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input__control {\n flex: 1 1 auto;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n min-width: 0;\n height: 100%;\n color: var(--syn-input-color);\n border: none;\n background: inherit;\n box-shadow: none;\n padding: 0;\n margin: 0;\n cursor: inherit;\n -webkit-appearance: none;\n }\n\n .input__control::-webkit-search-decoration,\n .input__control::-webkit-search-cancel-button,\n .input__control::-webkit-search-results-button,\n .input__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .input__control:-webkit-autofill,\n .input__control:-webkit-autofill:hover,\n .input__control:-webkit-autofill:focus,\n .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 var(--syn-input-height-large) var(--syn-input-background-color-hover) inset !important;\n -webkit-text-fill-color: var(--syn-color-primary-500);\n caret-color: var(--syn-input-color);\n }\n\n .input--readonly .input__control:-webkit-autofill,\n .input--readonly .input__control:-webkit-autofill:hover,\n .input--readonly .input__control:-webkit-autofill:focus,\n .input--readonly .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 var(--syn-input-height-large) var(--syn-input-readonly-background-color) inset !important;\n }\n\n .input__control::placeholder {\n color: var(--syn-input-placeholder-color);\n user-select: none;\n -webkit-user-select: none;\n }\n\n .input:hover:not(.input--disabled) .input__control {\n color: var(--syn-input-color-hover);\n }\n\n .input__control:focus {\n outline: none;\n }\n\n .input__prefix,\n .input__suffix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n cursor: default;\n }\n\n .input__prefix ::slotted(syn-icon),\n .input__suffix ::slotted(syn-icon) {\n color: var(--syn-input-icon-color);\n }\n\n /*\n * Size modifiers\n */\n\n .input--small {\n border-radius: var(--syn-input-border-radius-small);\n font-size: var(--syn-input-font-size-small);\n height: var(--syn-input-height-small);\n }\n\n .input--small .input__control {\n height: calc(var(--syn-input-height-small) - var(--syn-input-border-width) * 2);\n padding: 0 var(--syn-input-spacing-small);\n }\n\n .input--small .input__clear,\n .input--small .input__password-toggle {\n width: calc(1em + var(--syn-input-spacing-small) * 2);\n }\n\n .input--small .input__prefix ::slotted(*) {\n margin-inline-start: var(--syn-input-spacing-small);\n }\n\n .input--small .input__suffix ::slotted(*) {\n margin-inline-end: var(--syn-input-spacing-small);\n }\n\n .input--medium {\n border-radius: var(--syn-input-border-radius-medium);\n font-size: var(--syn-input-font-size-medium);\n height: var(--syn-input-height-medium);\n }\n\n .input--medium .input__control {\n height: calc(var(--syn-input-height-medium) - var(--syn-input-border-width) * 2);\n padding: 0 var(--syn-input-spacing-medium);\n }\n\n .input--medium .input__clear,\n .input--medium .input__password-toggle {\n width: calc(1em + var(--syn-input-spacing-medium) * 2);\n }\n\n .input--medium .input__prefix ::slotted(*) {\n margin-inline-start: var(--syn-input-spacing-medium);\n }\n\n .input--medium .input__suffix ::slotted(*) {\n margin-inline-end: var(--syn-input-spacing-medium);\n }\n\n .input--large {\n border-radius: var(--syn-input-border-radius-large);\n font-size: var(--syn-input-font-size-large);\n height: var(--syn-input-height-large);\n }\n\n .input--large .input__control {\n height: calc(var(--syn-input-height-large) - var(--syn-input-border-width) * 2);\n padding: 0 var(--syn-input-spacing-large);\n }\n\n .input--large .input__clear,\n .input--large .input__password-toggle {\n width: calc(1em + var(--syn-input-spacing-large) * 2);\n }\n\n .input--large .input__prefix ::slotted(*) {\n margin-inline-start: var(--syn-input-spacing-large);\n }\n\n .input--large .input__suffix ::slotted(*) {\n margin-inline-end: var(--syn-input-spacing-large);\n }\n\n /*\n * Pill modifier\n */\n\n .input--pill.input--small {\n border-radius: var(--syn-input-height-small);\n }\n\n .input--pill.input--medium {\n border-radius: var(--syn-input-height-medium);\n }\n\n .input--pill.input--large {\n border-radius: var(--syn-input-height-large);\n }\n\n /*\n * Clearable + Password Toggle\n */\n\n .input__clear:not(.input__clear--visible) {\n visibility: hidden;\n }\n\n .input__clear,\n .input__password-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: var(--syn-input-icon-color);\n border: none;\n background: none;\n padding: 0;\n transition: var(--syn-transition-fast) color;\n cursor: pointer;\n }\n\n .input__clear:hover,\n .input__password-toggle:hover {\n color: var(--syn-input-icon-color-hover);\n }\n\n .input__clear:focus,\n .input__password-toggle:focus {\n outline: none;\n }\n\n .input--empty .input__clear {\n visibility: hidden;\n }\n\n /* Don't show the browser's password toggle in Edge */\n ::-ms-reveal {\n display: none;\n }\n\n /* Hide the built-in number spinner */\n .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n -webkit-appearance: none;\n display: none;\n }\n\n .input--no-spin-buttons input[type='number'] {\n -moz-appearance: textfield;\n }\n\n ${customStyles}\n`;\n\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;AAMA,SAAS,WAAW;AAKpB,IAAO,uBAAQ;AAAA;AAAA,IAEX,wBAAe;AAAA,IACf,2BAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAwSjB,2BAAY;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,275 @@
|
|
|
1
|
+
import {
|
|
2
|
+
__spreadProps,
|
|
3
|
+
__spreadValues
|
|
4
|
+
} from "./chunk.DJOAQ4JU.js";
|
|
5
|
+
|
|
6
|
+
// src/internal/form.ts
|
|
7
|
+
var formCollections = /* @__PURE__ */ new WeakMap();
|
|
8
|
+
var reportValidityOverloads = /* @__PURE__ */ new WeakMap();
|
|
9
|
+
var userInteractedControls = /* @__PURE__ */ new WeakSet();
|
|
10
|
+
var interactions = /* @__PURE__ */ new WeakMap();
|
|
11
|
+
var FormControlController = class {
|
|
12
|
+
constructor(host, options) {
|
|
13
|
+
this.handleFormData = (event) => {
|
|
14
|
+
const disabled = this.options.disabled(this.host);
|
|
15
|
+
const name = this.options.name(this.host);
|
|
16
|
+
const value = this.options.value(this.host);
|
|
17
|
+
const isButton = this.host.tagName.toLowerCase() === "syn-button";
|
|
18
|
+
if (!disabled && !isButton && typeof name === "string" && name.length > 0 && typeof value !== "undefined") {
|
|
19
|
+
if (Array.isArray(value)) {
|
|
20
|
+
value.forEach((val) => {
|
|
21
|
+
event.formData.append(name, val.toString());
|
|
22
|
+
});
|
|
23
|
+
} else {
|
|
24
|
+
event.formData.append(name, value.toString());
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
this.handleFormSubmit = (event) => {
|
|
29
|
+
var _a;
|
|
30
|
+
const disabled = this.options.disabled(this.host);
|
|
31
|
+
const reportValidity = this.options.reportValidity;
|
|
32
|
+
if (this.form && !this.form.noValidate) {
|
|
33
|
+
(_a = formCollections.get(this.form)) == null ? void 0 : _a.forEach((control) => {
|
|
34
|
+
this.setUserInteracted(control, true);
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {
|
|
38
|
+
event.preventDefault();
|
|
39
|
+
event.stopImmediatePropagation();
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
this.handleFormReset = () => {
|
|
43
|
+
this.options.setValue(this.host, this.options.defaultValue(this.host));
|
|
44
|
+
this.setUserInteracted(this.host, false);
|
|
45
|
+
interactions.set(this.host, []);
|
|
46
|
+
};
|
|
47
|
+
this.handleInteraction = (event) => {
|
|
48
|
+
const emittedEvents = interactions.get(this.host);
|
|
49
|
+
if (!emittedEvents.includes(event.type)) {
|
|
50
|
+
emittedEvents.push(event.type);
|
|
51
|
+
}
|
|
52
|
+
if (emittedEvents.length === this.options.assumeInteractionOn.length) {
|
|
53
|
+
this.setUserInteracted(this.host, true);
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
this.reportFormValidity = () => {
|
|
57
|
+
if (this.form && !this.form.noValidate) {
|
|
58
|
+
const elements = this.form.querySelectorAll("*");
|
|
59
|
+
for (const element of elements) {
|
|
60
|
+
if (typeof element.reportValidity === "function") {
|
|
61
|
+
if (!element.reportValidity()) {
|
|
62
|
+
return false;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
return true;
|
|
68
|
+
};
|
|
69
|
+
(this.host = host).addController(this);
|
|
70
|
+
this.options = __spreadValues({
|
|
71
|
+
form: (input) => {
|
|
72
|
+
if (input.hasAttribute("form") && input.getAttribute("form") !== "") {
|
|
73
|
+
const root = input.getRootNode();
|
|
74
|
+
const formId = input.getAttribute("form");
|
|
75
|
+
if (formId) {
|
|
76
|
+
return root.getElementById(formId);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
return input.closest("form");
|
|
80
|
+
},
|
|
81
|
+
name: (input) => input.name,
|
|
82
|
+
value: (input) => input.value,
|
|
83
|
+
defaultValue: (input) => input.defaultValue,
|
|
84
|
+
disabled: (input) => {
|
|
85
|
+
var _a;
|
|
86
|
+
return (_a = input.disabled) != null ? _a : false;
|
|
87
|
+
},
|
|
88
|
+
reportValidity: (input) => typeof input.reportValidity === "function" ? input.reportValidity() : true,
|
|
89
|
+
setValue: (input, value) => input.value = value,
|
|
90
|
+
assumeInteractionOn: ["syn-input"]
|
|
91
|
+
}, options);
|
|
92
|
+
}
|
|
93
|
+
hostConnected() {
|
|
94
|
+
const form = this.options.form(this.host);
|
|
95
|
+
if (form) {
|
|
96
|
+
this.attachForm(form);
|
|
97
|
+
}
|
|
98
|
+
interactions.set(this.host, []);
|
|
99
|
+
this.options.assumeInteractionOn.forEach((event) => {
|
|
100
|
+
this.host.addEventListener(event, this.handleInteraction);
|
|
101
|
+
});
|
|
102
|
+
}
|
|
103
|
+
hostDisconnected() {
|
|
104
|
+
this.detachForm();
|
|
105
|
+
interactions.delete(this.host);
|
|
106
|
+
this.options.assumeInteractionOn.forEach((event) => {
|
|
107
|
+
this.host.removeEventListener(event, this.handleInteraction);
|
|
108
|
+
});
|
|
109
|
+
}
|
|
110
|
+
hostUpdated() {
|
|
111
|
+
const form = this.options.form(this.host);
|
|
112
|
+
if (!form) {
|
|
113
|
+
this.detachForm();
|
|
114
|
+
}
|
|
115
|
+
if (form && this.form !== form) {
|
|
116
|
+
this.detachForm();
|
|
117
|
+
this.attachForm(form);
|
|
118
|
+
}
|
|
119
|
+
if (this.host.hasUpdated) {
|
|
120
|
+
this.setValidity(this.host.validity.valid);
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
attachForm(form) {
|
|
124
|
+
if (form) {
|
|
125
|
+
this.form = form;
|
|
126
|
+
if (formCollections.has(this.form)) {
|
|
127
|
+
formCollections.get(this.form).add(this.host);
|
|
128
|
+
} else {
|
|
129
|
+
formCollections.set(this.form, /* @__PURE__ */ new Set([this.host]));
|
|
130
|
+
}
|
|
131
|
+
this.form.addEventListener("formdata", this.handleFormData);
|
|
132
|
+
this.form.addEventListener("submit", this.handleFormSubmit);
|
|
133
|
+
this.form.addEventListener("reset", this.handleFormReset);
|
|
134
|
+
if (!reportValidityOverloads.has(this.form)) {
|
|
135
|
+
reportValidityOverloads.set(this.form, this.form.reportValidity);
|
|
136
|
+
this.form.reportValidity = () => this.reportFormValidity();
|
|
137
|
+
}
|
|
138
|
+
} else {
|
|
139
|
+
this.form = void 0;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
detachForm() {
|
|
143
|
+
var _a;
|
|
144
|
+
if (this.form) {
|
|
145
|
+
(_a = formCollections.get(this.form)) == null ? void 0 : _a.delete(this.host);
|
|
146
|
+
this.form.removeEventListener("formdata", this.handleFormData);
|
|
147
|
+
this.form.removeEventListener("submit", this.handleFormSubmit);
|
|
148
|
+
this.form.removeEventListener("reset", this.handleFormReset);
|
|
149
|
+
if (reportValidityOverloads.has(this.form)) {
|
|
150
|
+
this.form.reportValidity = reportValidityOverloads.get(this.form);
|
|
151
|
+
reportValidityOverloads.delete(this.form);
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
this.form = void 0;
|
|
155
|
+
}
|
|
156
|
+
setUserInteracted(el, hasInteracted) {
|
|
157
|
+
if (hasInteracted) {
|
|
158
|
+
userInteractedControls.add(el);
|
|
159
|
+
} else {
|
|
160
|
+
userInteractedControls.delete(el);
|
|
161
|
+
}
|
|
162
|
+
el.requestUpdate();
|
|
163
|
+
}
|
|
164
|
+
doAction(type, submitter) {
|
|
165
|
+
if (this.form) {
|
|
166
|
+
const button = document.createElement("button");
|
|
167
|
+
button.type = type;
|
|
168
|
+
button.style.position = "absolute";
|
|
169
|
+
button.style.width = "0";
|
|
170
|
+
button.style.height = "0";
|
|
171
|
+
button.style.clipPath = "inset(50%)";
|
|
172
|
+
button.style.overflow = "hidden";
|
|
173
|
+
button.style.whiteSpace = "nowrap";
|
|
174
|
+
if (submitter) {
|
|
175
|
+
button.name = submitter.name;
|
|
176
|
+
button.value = submitter.value;
|
|
177
|
+
["formaction", "formenctype", "formmethod", "formnovalidate", "formtarget"].forEach((attr) => {
|
|
178
|
+
if (submitter.hasAttribute(attr)) {
|
|
179
|
+
button.setAttribute(attr, submitter.getAttribute(attr));
|
|
180
|
+
}
|
|
181
|
+
});
|
|
182
|
+
}
|
|
183
|
+
this.form.append(button);
|
|
184
|
+
button.click();
|
|
185
|
+
button.remove();
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
/** Returns the associated `<form>` element, if one exists. */
|
|
189
|
+
getForm() {
|
|
190
|
+
var _a;
|
|
191
|
+
return (_a = this.form) != null ? _a : null;
|
|
192
|
+
}
|
|
193
|
+
/** Resets the form, restoring all the control to their default value */
|
|
194
|
+
reset(submitter) {
|
|
195
|
+
this.doAction("reset", submitter);
|
|
196
|
+
}
|
|
197
|
+
/** Submits the form, triggering validation and form data injection. */
|
|
198
|
+
submit(submitter) {
|
|
199
|
+
this.doAction("submit", submitter);
|
|
200
|
+
}
|
|
201
|
+
/**
|
|
202
|
+
* Synchronously sets the form control's validity. Call this when you know the future validity but need to update
|
|
203
|
+
* the host element immediately, i.e. before Lit updates the component in the next update.
|
|
204
|
+
*/
|
|
205
|
+
setValidity(isValid) {
|
|
206
|
+
const host = this.host;
|
|
207
|
+
const hasInteracted = Boolean(userInteractedControls.has(host));
|
|
208
|
+
const required = Boolean(host.required);
|
|
209
|
+
host.toggleAttribute("data-required", required);
|
|
210
|
+
host.toggleAttribute("data-optional", !required);
|
|
211
|
+
host.toggleAttribute("data-invalid", !isValid);
|
|
212
|
+
host.toggleAttribute("data-valid", isValid);
|
|
213
|
+
host.toggleAttribute("data-user-invalid", !isValid && hasInteracted);
|
|
214
|
+
host.toggleAttribute("data-user-valid", isValid && hasInteracted);
|
|
215
|
+
}
|
|
216
|
+
/**
|
|
217
|
+
* Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything
|
|
218
|
+
* that affects constraint validation changes so the component receives the correct validity states.
|
|
219
|
+
*/
|
|
220
|
+
updateValidity() {
|
|
221
|
+
const host = this.host;
|
|
222
|
+
this.setValidity(host.validity.valid);
|
|
223
|
+
}
|
|
224
|
+
/**
|
|
225
|
+
* Dispatches a non-bubbling, cancelable custom event of type `syn-invalid`.
|
|
226
|
+
* If the `syn-invalid` event will be cancelled then the original `invalid`
|
|
227
|
+
* event (which may have been passed as argument) will also be cancelled.
|
|
228
|
+
* If no original `invalid` event has been passed then the `syn-invalid`
|
|
229
|
+
* event will be cancelled before being dispatched.
|
|
230
|
+
*/
|
|
231
|
+
emitInvalidEvent(originalInvalidEvent) {
|
|
232
|
+
const slInvalidEvent = new CustomEvent("syn-invalid", {
|
|
233
|
+
bubbles: false,
|
|
234
|
+
composed: false,
|
|
235
|
+
cancelable: true,
|
|
236
|
+
detail: {}
|
|
237
|
+
});
|
|
238
|
+
if (!originalInvalidEvent) {
|
|
239
|
+
slInvalidEvent.preventDefault();
|
|
240
|
+
}
|
|
241
|
+
if (!this.host.dispatchEvent(slInvalidEvent)) {
|
|
242
|
+
originalInvalidEvent == null ? void 0 : originalInvalidEvent.preventDefault();
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
};
|
|
246
|
+
var validValidityState = Object.freeze({
|
|
247
|
+
badInput: false,
|
|
248
|
+
customError: false,
|
|
249
|
+
patternMismatch: false,
|
|
250
|
+
rangeOverflow: false,
|
|
251
|
+
rangeUnderflow: false,
|
|
252
|
+
stepMismatch: false,
|
|
253
|
+
tooLong: false,
|
|
254
|
+
tooShort: false,
|
|
255
|
+
typeMismatch: false,
|
|
256
|
+
valid: true,
|
|
257
|
+
valueMissing: false
|
|
258
|
+
});
|
|
259
|
+
var valueMissingValidityState = Object.freeze(__spreadProps(__spreadValues({}, validValidityState), {
|
|
260
|
+
valid: false,
|
|
261
|
+
valueMissing: true
|
|
262
|
+
}));
|
|
263
|
+
var customErrorValidityState = Object.freeze(__spreadProps(__spreadValues({}, validValidityState), {
|
|
264
|
+
valid: false,
|
|
265
|
+
customError: true
|
|
266
|
+
}));
|
|
267
|
+
|
|
268
|
+
export {
|
|
269
|
+
formCollections,
|
|
270
|
+
FormControlController,
|
|
271
|
+
validValidityState,
|
|
272
|
+
valueMissingValidityState,
|
|
273
|
+
customErrorValidityState
|
|
274
|
+
};
|
|
275
|
+
//# sourceMappingURL=chunk.P2LNG2PZ.js.map
|