@synergy-design-system/components 0.1.0 → 1.0.0-main.2

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.
Files changed (80) hide show
  1. package/package.json +29 -10
  2. package/dist/chunks/chunk.2A3352EO.js +0 -10
  3. package/dist/chunks/chunk.2CFEYJLE.js +0 -29
  4. package/dist/chunks/chunk.2DA7CIOQ.js +0 -44
  5. package/dist/chunks/chunk.4NMNW5OM.js +0 -22
  6. package/dist/chunks/chunk.7XI5LKCC.js +0 -14
  7. package/dist/chunks/chunk.HQUF2ZAX.js +0 -62
  8. package/dist/chunks/chunk.HSF5YXAS.js +0 -294
  9. package/dist/chunks/chunk.KHU4AFPL.js +0 -11
  10. package/dist/chunks/chunk.MAS2SHYD.js +0 -41
  11. package/dist/chunks/chunk.NBKDLFEY.js +0 -201
  12. package/dist/chunks/chunk.O3LUPMYG.js +0 -372
  13. package/dist/chunks/chunk.PM7NIY3M.js +0 -35
  14. package/dist/chunks/chunk.Q5SD5LHE.js +0 -607
  15. package/dist/chunks/chunk.QPNUJNT5.js +0 -70
  16. package/dist/chunks/chunk.SVIWEI6P.js +0 -27
  17. package/dist/chunks/chunk.VRTJZYIC.js +0 -127
  18. package/dist/chunks/chunk.XVEDHRRP.js +0 -500
  19. package/dist/chunks/chunk.Y5USHY74.js +0 -31
  20. package/dist/chunks/chunk.Z6AW3P62.js +0 -317
  21. package/dist/components/button/button.component.d.ts +0 -132
  22. package/dist/components/button/button.component.js +0 -21
  23. package/dist/components/button/button.d.ts +0 -8
  24. package/dist/components/button/button.js +0 -25
  25. package/dist/components/button/button.styles.d.ts +0 -2
  26. package/dist/components/button/button.styles.js +0 -8
  27. package/dist/components/icon/icon.component.d.ts +0 -42
  28. package/dist/components/icon/icon.component.js +0 -14
  29. package/dist/components/icon/icon.d.ts +0 -8
  30. package/dist/components/icon/icon.js +0 -18
  31. package/dist/components/icon/icon.styles.d.ts +0 -2
  32. package/dist/components/icon/icon.styles.js +0 -8
  33. package/dist/components/icon/library.d.ts +0 -19
  34. package/dist/components/icon/library.default.d.ts +0 -3
  35. package/dist/components/icon/library.default.js +0 -8
  36. package/dist/components/icon/library.js +0 -18
  37. package/dist/components/icon/library.system.d.ts +0 -3
  38. package/dist/components/icon/library.system.js +0 -7
  39. package/dist/components/input/input.component.d.ts +0 -179
  40. package/dist/components/input/input.component.js +0 -19
  41. package/dist/components/input/input.d.ts +0 -8
  42. package/dist/components/input/input.js +0 -20
  43. package/dist/components/input/input.styles.d.ts +0 -2
  44. package/dist/components/input/input.styles.js +0 -8
  45. package/dist/components/spinner/spinner.component.d.ts +0 -20
  46. package/dist/components/spinner/spinner.component.js +0 -12
  47. package/dist/components/spinner/spinner.styles.d.ts +0 -2
  48. package/dist/components/spinner/spinner.styles.js +0 -8
  49. package/dist/custom-elements.json +0 -1967
  50. package/dist/events/events.d.ts +0 -8
  51. package/dist/events/syn-blur.d.ts +0 -6
  52. package/dist/events/syn-change.d.ts +0 -6
  53. package/dist/events/syn-clear.d.ts +0 -6
  54. package/dist/events/syn-error.d.ts +0 -8
  55. package/dist/events/syn-focus.d.ts +0 -6
  56. package/dist/events/syn-input.d.ts +0 -6
  57. package/dist/events/syn-invalid.d.ts +0 -6
  58. package/dist/events/syn-load.d.ts +0 -6
  59. package/dist/internal/default-value.d.ts +0 -2
  60. package/dist/internal/form.d.ts +0 -73
  61. package/dist/internal/slot.d.ts +0 -23
  62. package/dist/internal/synergy-element.d.ts +0 -47
  63. package/dist/internal/test/form-control-base-tests.d.ts +0 -7
  64. package/dist/internal/watch.d.ts +0 -26
  65. package/dist/styles/component.styles.d.ts +0 -2
  66. package/dist/styles/form-control.styles.d.ts +0 -2
  67. package/dist/synergy-autoloader.d.ts +0 -4
  68. package/dist/synergy-autoloader.js +0 -40
  69. package/dist/synergy.d.ts +0 -2
  70. package/dist/synergy.js +0 -20
  71. package/dist/translations/de.d.ts +0 -3
  72. package/dist/translations/de.js +0 -45
  73. package/dist/translations/en.d.ts +0 -3
  74. package/dist/translations/en.js +0 -7
  75. package/dist/utilities/base-path.d.ts +0 -18
  76. package/dist/utilities/base-path.js +0 -9
  77. package/dist/utilities/localize.d.ts +0 -33
  78. package/dist/utilities/localize.js +0 -10
  79. package/dist/vscode.html-custom-data.json +0 -400
  80. package/dist/web-types.json +0 -790
@@ -1,127 +0,0 @@
1
- // src/components/icon/library.system.ts
2
- var icons = {
3
- caret: `
4
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
5
- <polyline points="6 9 12 15 18 9"></polyline>
6
- </svg>
7
- `,
8
- check: `
9
- <svg part="checked-icon" class="checkbox__icon" viewBox="0 0 16 16">
10
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
11
- <g stroke="currentColor">
12
- <g transform="translate(3.428571, 3.428571)">
13
- <path d="M0,5.71428571 L3.42857143,9.14285714"></path>
14
- <path d="M9.14285714,0 L3.42857143,9.14285714"></path>
15
- </g>
16
- </g>
17
- </g>
18
- </svg>
19
- `,
20
- "chevron-down": `
21
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
22
- <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
23
- </svg>
24
- `,
25
- "chevron-left": `
26
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
27
- <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
28
- </svg>
29
- `,
30
- "chevron-right": `
31
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
32
- <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
33
- </svg>
34
- `,
35
- copy: `
36
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-files" viewBox="0 0 16 16" part="svg">
37
- <path d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zM3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z"></path>
38
- </svg>
39
- `,
40
- eye: `
41
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
42
- <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
43
- <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
44
- </svg>
45
- `,
46
- "eye-slash": `
47
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-slash" viewBox="0 0 16 16">
48
- <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
49
- <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
50
- <path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/>
51
- </svg>
52
- `,
53
- eyedropper: `
54
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eyedropper" viewBox="0 0 16 16">
55
- <path d="M13.354.646a1.207 1.207 0 0 0-1.708 0L8.5 3.793l-.646-.647a.5.5 0 1 0-.708.708L8.293 5l-7.147 7.146A.5.5 0 0 0 1 12.5v1.793l-.854.853a.5.5 0 1 0 .708.707L1.707 15H3.5a.5.5 0 0 0 .354-.146L11 7.707l1.146 1.147a.5.5 0 0 0 .708-.708l-.647-.646 3.147-3.146a1.207 1.207 0 0 0 0-1.708l-2-2zM2 12.707l7-7L10.293 7l-7 7H2v-1.293z"></path>
56
- </svg>
57
- `,
58
- "grip-vertical": `
59
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-grip-vertical" viewBox="0 0 16 16">
60
- <path d="M7 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM7 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM7 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
61
- </svg>
62
- `,
63
- indeterminate: `
64
- <svg part="indeterminate-icon" class="checkbox__icon" viewBox="0 0 16 16">
65
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
66
- <g stroke="currentColor" stroke-width="2">
67
- <g transform="translate(2.285714, 6.857143)">
68
- <path d="M10.2857143,1.14285714 L1.14285714,1.14285714"></path>
69
- </g>
70
- </g>
71
- </g>
72
- </svg>
73
- `,
74
- "person-fill": `
75
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16">
76
- <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
77
- </svg>
78
- `,
79
- "play-fill": `
80
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16">
81
- <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"></path>
82
- </svg>
83
- `,
84
- "pause-fill": `
85
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pause-fill" viewBox="0 0 16 16">
86
- <path d="M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5zm5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5z"></path>
87
- </svg>
88
- `,
89
- radio: `
90
- <svg part="checked-icon" class="radio__icon" viewBox="0 0 16 16">
91
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
92
- <g fill="currentColor">
93
- <circle cx="8" cy="8" r="3.42857143"></circle>
94
- </g>
95
- </g>
96
- </svg>
97
- `,
98
- "star-fill": `
99
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
100
- <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
101
- </svg>
102
- `,
103
- "x-lg": `
104
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
105
- <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
106
- </svg>
107
- `,
108
- "x-circle-fill": `
109
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
110
- <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"></path>
111
- </svg>
112
- `
113
- };
114
- var systemLibrary = {
115
- name: "system",
116
- resolver: (name) => {
117
- if (name in icons) {
118
- return `data:image/svg+xml,${encodeURIComponent(icons[name])}`;
119
- }
120
- return "";
121
- }
122
- };
123
- var library_system_default = systemLibrary;
124
-
125
- export {
126
- library_system_default
127
- };
@@ -1,500 +0,0 @@
1
- import {
2
- input_styles_default
3
- } from "./chunk.O3LUPMYG.js";
4
- import {
5
- FormControlController,
6
- HasSlotController
7
- } from "./chunk.Z6AW3P62.js";
8
- import {
9
- SynIcon,
10
- watch
11
- } from "./chunk.NBKDLFEY.js";
12
- import {
13
- LocalizeController
14
- } from "./chunk.2A3352EO.js";
15
- import {
16
- SynergyElement
17
- } from "./chunk.HQUF2ZAX.js";
18
- import {
19
- __decorateClass
20
- } from "./chunk.PM7NIY3M.js";
21
-
22
- // src/components/input/input.component.ts
23
- import { classMap } from "lit/directives/class-map.js";
24
-
25
- // src/internal/default-value.ts
26
- import { defaultConverter } from "lit";
27
- var defaultValue = (propertyName = "value") => (proto, key) => {
28
- const ctor = proto.constructor;
29
- const attributeChangedCallback = ctor.prototype.attributeChangedCallback;
30
- ctor.prototype.attributeChangedCallback = function(name, old, value) {
31
- var _a;
32
- const options = ctor.getPropertyOptions(propertyName);
33
- const attributeName = typeof options.attribute === "string" ? options.attribute : propertyName;
34
- if (name === attributeName) {
35
- const converter = options.converter || defaultConverter;
36
- const fromAttribute = typeof converter === "function" ? converter : (_a = converter == null ? void 0 : converter.fromAttribute) != null ? _a : defaultConverter.fromAttribute;
37
- const newValue = fromAttribute(value, options.type);
38
- if (this[propertyName] !== newValue) {
39
- this[key] = newValue;
40
- }
41
- }
42
- attributeChangedCallback.call(this, name, old, value);
43
- };
44
- };
45
-
46
- // src/components/input/input.component.ts
47
- import { html } from "lit";
48
- import { ifDefined } from "lit/directives/if-defined.js";
49
- import { live } from "lit/directives/live.js";
50
- import { property, query, state } from "lit/decorators.js";
51
- var SynInput = class extends SynergyElement {
52
- constructor() {
53
- super(...arguments);
54
- this.formControlController = new FormControlController(this, {
55
- assumeInteractionOn: ["syn-blur", "syn-input"]
56
- });
57
- this.hasSlotController = new HasSlotController(this, "help-text", "label");
58
- this.localize = new LocalizeController(this);
59
- this.hasFocus = false;
60
- this.title = "";
61
- // make reactive to pass through
62
- this.__numberInput = Object.assign(document.createElement("input"), { type: "number" });
63
- this.__dateInput = Object.assign(document.createElement("input"), { type: "date" });
64
- this.type = "text";
65
- this.name = "";
66
- this.value = "";
67
- this.defaultValue = "";
68
- this.size = "medium";
69
- this.filled = false;
70
- this.pill = false;
71
- this.label = "";
72
- this.helpText = "";
73
- this.clearable = false;
74
- this.disabled = false;
75
- this.placeholder = "";
76
- this.readonly = false;
77
- this.passwordToggle = false;
78
- this.passwordVisible = false;
79
- this.noSpinButtons = false;
80
- this.form = "";
81
- this.required = false;
82
- this.spellcheck = true;
83
- }
84
- //
85
- // NOTE: We use an in-memory input for these getters/setters instead of the one in the template because the properties
86
- // can be set before the component is rendered.
87
- //
88
- /**
89
- * Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted. This will use the native `<input type="{{type}}">` implementation and may result in an error.
90
- */
91
- get valueAsDate() {
92
- var _a;
93
- this.__dateInput.type = this.type;
94
- this.__dateInput.value = this.value;
95
- return ((_a = this.input) == null ? void 0 : _a.valueAsDate) || this.__dateInput.valueAsDate;
96
- }
97
- set valueAsDate(newValue) {
98
- this.__dateInput.type = this.type;
99
- this.__dateInput.valueAsDate = newValue;
100
- this.value = this.__dateInput.value;
101
- }
102
- /** Gets or sets the current value as a number. Returns `NaN` if the value can't be converted. */
103
- get valueAsNumber() {
104
- var _a;
105
- this.__numberInput.value = this.value;
106
- return ((_a = this.input) == null ? void 0 : _a.valueAsNumber) || this.__numberInput.valueAsNumber;
107
- }
108
- set valueAsNumber(newValue) {
109
- this.__numberInput.valueAsNumber = newValue;
110
- this.value = this.__numberInput.value;
111
- }
112
- /** Gets the validity state object */
113
- get validity() {
114
- return this.input.validity;
115
- }
116
- /** Gets the validation message */
117
- get validationMessage() {
118
- return this.input.validationMessage;
119
- }
120
- firstUpdated() {
121
- this.formControlController.updateValidity();
122
- }
123
- handleBlur() {
124
- this.hasFocus = false;
125
- this.emit("syn-blur");
126
- }
127
- handleChange() {
128
- this.value = this.input.value;
129
- this.emit("syn-change");
130
- }
131
- handleClearClick(event) {
132
- this.value = "";
133
- this.emit("syn-clear");
134
- this.emit("syn-input");
135
- this.emit("syn-change");
136
- this.input.focus();
137
- event.stopPropagation();
138
- }
139
- handleFocus() {
140
- this.hasFocus = true;
141
- this.emit("syn-focus");
142
- }
143
- handleInput() {
144
- this.value = this.input.value;
145
- this.formControlController.updateValidity();
146
- this.emit("syn-input");
147
- }
148
- handleInvalid(event) {
149
- this.formControlController.setValidity(false);
150
- this.formControlController.emitInvalidEvent(event);
151
- }
152
- handleKeyDown(event) {
153
- const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
154
- if (event.key === "Enter" && !hasModifier) {
155
- setTimeout(() => {
156
- if (!event.defaultPrevented && !event.isComposing) {
157
- this.formControlController.submit();
158
- }
159
- });
160
- }
161
- }
162
- handlePasswordToggle() {
163
- this.passwordVisible = !this.passwordVisible;
164
- }
165
- handleDisabledChange() {
166
- this.formControlController.setValidity(this.disabled);
167
- }
168
- handleStepChange() {
169
- this.input.step = String(this.step);
170
- this.formControlController.updateValidity();
171
- }
172
- async handleValueChange() {
173
- await this.updateComplete;
174
- this.formControlController.updateValidity();
175
- }
176
- /** Sets focus on the input. */
177
- focus(options) {
178
- this.input.focus(options);
179
- }
180
- /** Removes focus from the input. */
181
- blur() {
182
- this.input.blur();
183
- }
184
- /** Selects all the text in the input. */
185
- select() {
186
- this.input.select();
187
- }
188
- /** Sets the start and end positions of the text selection (0-based). */
189
- setSelectionRange(selectionStart, selectionEnd, selectionDirection = "none") {
190
- this.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
191
- }
192
- /** Replaces a range of text with a new string. */
193
- setRangeText(replacement, start, end, selectMode) {
194
- this.input.setRangeText(replacement, start, end, selectMode);
195
- if (this.value !== this.input.value) {
196
- this.value = this.input.value;
197
- }
198
- }
199
- /** Displays the browser picker for an input element (only works if the browser supports it for the input type). */
200
- showPicker() {
201
- if ("showPicker" in HTMLInputElement.prototype) {
202
- this.input.showPicker();
203
- }
204
- }
205
- /** Increments the value of a numeric input type by the value of the step attribute. */
206
- stepUp() {
207
- this.input.stepUp();
208
- if (this.value !== this.input.value) {
209
- this.value = this.input.value;
210
- }
211
- }
212
- /** Decrements the value of a numeric input type by the value of the step attribute. */
213
- stepDown() {
214
- this.input.stepDown();
215
- if (this.value !== this.input.value) {
216
- this.value = this.input.value;
217
- }
218
- }
219
- /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
220
- checkValidity() {
221
- return this.input.checkValidity();
222
- }
223
- /** Gets the associated form, if one exists. */
224
- getForm() {
225
- return this.formControlController.getForm();
226
- }
227
- /** Checks for validity and shows the browser's validation message if the control is invalid. */
228
- reportValidity() {
229
- return this.input.reportValidity();
230
- }
231
- /** Sets a custom validation message. Pass an empty string to restore validity. */
232
- setCustomValidity(message) {
233
- this.input.setCustomValidity(message);
234
- this.formControlController.updateValidity();
235
- }
236
- render() {
237
- const hasLabelSlot = this.hasSlotController.test("label");
238
- const hasHelpTextSlot = this.hasSlotController.test("help-text");
239
- const hasLabel = this.label ? true : !!hasLabelSlot;
240
- const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
241
- const hasClearIcon = this.clearable && !this.disabled && !this.readonly;
242
- const isClearIconVisible = hasClearIcon && (typeof this.value === "number" || this.value.length > 0);
243
- return html`
244
- <div
245
- part="form-control"
246
- class=${classMap({
247
- "form-control": true,
248
- "form-control--small": this.size === "small",
249
- "form-control--medium": this.size === "medium",
250
- "form-control--large": this.size === "large",
251
- "form-control--has-label": hasLabel,
252
- "form-control--has-help-text": hasHelpText
253
- })}
254
- >
255
- <label
256
- part="form-control-label"
257
- class="form-control__label"
258
- for="input"
259
- aria-hidden=${hasLabel ? "false" : "true"}
260
- >
261
- <slot name="label">${this.label}</slot>
262
- </label>
263
-
264
- <div part="form-control-input" class="form-control-input">
265
- <div
266
- part="base"
267
- class=${classMap({
268
- input: true,
269
- // Sizes
270
- "input--small": this.size === "small",
271
- "input--medium": this.size === "medium",
272
- "input--large": this.size === "large",
273
- // States
274
- "input--pill": this.pill,
275
- "input--standard": !this.filled,
276
- "input--filled": this.filled,
277
- "input--disabled": this.disabled,
278
- "input--focused": this.hasFocus,
279
- "input--empty": !this.value,
280
- "input--no-spin-buttons": this.noSpinButtons
281
- })}
282
- >
283
- <span part="prefix" class="input__prefix">
284
- <slot name="prefix"></slot>
285
- </span>
286
-
287
- <input
288
- part="input"
289
- id="input"
290
- class="input__control"
291
- type=${this.type === "password" && this.passwordVisible ? "text" : this.type}
292
- title=${this.title}
293
- name=${ifDefined(this.name)}
294
- ?disabled=${this.disabled}
295
- ?readonly=${this.readonly}
296
- ?required=${this.required}
297
- placeholder=${ifDefined(this.placeholder)}
298
- minlength=${ifDefined(this.minlength)}
299
- maxlength=${ifDefined(this.maxlength)}
300
- min=${ifDefined(this.min)}
301
- max=${ifDefined(this.max)}
302
- step=${ifDefined(this.step)}
303
- .value=${live(this.value)}
304
- autocapitalize=${ifDefined(this.autocapitalize)}
305
- autocomplete=${ifDefined(this.autocomplete)}
306
- autocorrect=${ifDefined(this.autocorrect)}
307
- ?autofocus=${this.autofocus}
308
- spellcheck=${this.spellcheck}
309
- pattern=${ifDefined(this.pattern)}
310
- enterkeyhint=${ifDefined(this.enterkeyhint)}
311
- inputmode=${ifDefined(this.inputmode)}
312
- aria-describedby="help-text"
313
- @change=${this.handleChange}
314
- @input=${this.handleInput}
315
- @invalid=${this.handleInvalid}
316
- @keydown=${this.handleKeyDown}
317
- @focus=${this.handleFocus}
318
- @blur=${this.handleBlur}
319
- />
320
-
321
- ${hasClearIcon ? html`
322
- <button
323
- part="clear-button"
324
- class=${classMap({
325
- input__clear: true,
326
- "input__clear--visible": isClearIconVisible
327
- })}
328
- type="button"
329
- aria-label=${this.localize.term("clearEntry")}
330
- @click=${this.handleClearClick}
331
- tabindex="-1"
332
- >
333
- <slot name="clear-icon">
334
- <syn-icon name="x-circle-fill" library="system"></syn-icon>
335
- </slot>
336
- </button>
337
- ` : ""}
338
- ${this.passwordToggle && !this.disabled ? html`
339
- <button
340
- part="password-toggle-button"
341
- class="input__password-toggle"
342
- type="button"
343
- aria-label=${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}
344
- @click=${this.handlePasswordToggle}
345
- tabindex="-1"
346
- >
347
- ${this.passwordVisible ? html`
348
- <slot name="show-password-icon">
349
- <syn-icon name="eye-slash" library="system"></syn-icon>
350
- </slot>
351
- ` : html`
352
- <slot name="hide-password-icon">
353
- <syn-icon name="eye" library="system"></syn-icon>
354
- </slot>
355
- `}
356
- </button>
357
- ` : ""}
358
-
359
- <span part="suffix" class="input__suffix">
360
- <slot name="suffix"></slot>
361
- </span>
362
- </div>
363
- </div>
364
-
365
- <div
366
- part="form-control-help-text"
367
- id="help-text"
368
- class="form-control__help-text"
369
- aria-hidden=${hasHelpText ? "false" : "true"}
370
- >
371
- <slot name="help-text">${this.helpText}</slot>
372
- </div>
373
- </div>
374
- `;
375
- }
376
- };
377
- SynInput.styles = input_styles_default;
378
- SynInput.dependencies = { "syn-icon": SynIcon };
379
- __decorateClass([
380
- query(".input__control")
381
- ], SynInput.prototype, "input", 2);
382
- __decorateClass([
383
- state()
384
- ], SynInput.prototype, "hasFocus", 2);
385
- __decorateClass([
386
- property()
387
- ], SynInput.prototype, "title", 2);
388
- __decorateClass([
389
- property({ reflect: true })
390
- ], SynInput.prototype, "type", 2);
391
- __decorateClass([
392
- property()
393
- ], SynInput.prototype, "name", 2);
394
- __decorateClass([
395
- property()
396
- ], SynInput.prototype, "value", 2);
397
- __decorateClass([
398
- defaultValue()
399
- ], SynInput.prototype, "defaultValue", 2);
400
- __decorateClass([
401
- property({ reflect: true })
402
- ], SynInput.prototype, "size", 2);
403
- __decorateClass([
404
- property({ type: Boolean, reflect: true })
405
- ], SynInput.prototype, "filled", 2);
406
- __decorateClass([
407
- property({ type: Boolean, reflect: true })
408
- ], SynInput.prototype, "pill", 2);
409
- __decorateClass([
410
- property()
411
- ], SynInput.prototype, "label", 2);
412
- __decorateClass([
413
- property({ attribute: "help-text" })
414
- ], SynInput.prototype, "helpText", 2);
415
- __decorateClass([
416
- property({ type: Boolean })
417
- ], SynInput.prototype, "clearable", 2);
418
- __decorateClass([
419
- property({ type: Boolean, reflect: true })
420
- ], SynInput.prototype, "disabled", 2);
421
- __decorateClass([
422
- property()
423
- ], SynInput.prototype, "placeholder", 2);
424
- __decorateClass([
425
- property({ type: Boolean, reflect: true })
426
- ], SynInput.prototype, "readonly", 2);
427
- __decorateClass([
428
- property({ attribute: "password-toggle", type: Boolean })
429
- ], SynInput.prototype, "passwordToggle", 2);
430
- __decorateClass([
431
- property({ attribute: "password-visible", type: Boolean })
432
- ], SynInput.prototype, "passwordVisible", 2);
433
- __decorateClass([
434
- property({ attribute: "no-spin-buttons", type: Boolean })
435
- ], SynInput.prototype, "noSpinButtons", 2);
436
- __decorateClass([
437
- property({ reflect: true })
438
- ], SynInput.prototype, "form", 2);
439
- __decorateClass([
440
- property({ type: Boolean, reflect: true })
441
- ], SynInput.prototype, "required", 2);
442
- __decorateClass([
443
- property()
444
- ], SynInput.prototype, "pattern", 2);
445
- __decorateClass([
446
- property({ type: Number })
447
- ], SynInput.prototype, "minlength", 2);
448
- __decorateClass([
449
- property({ type: Number })
450
- ], SynInput.prototype, "maxlength", 2);
451
- __decorateClass([
452
- property()
453
- ], SynInput.prototype, "min", 2);
454
- __decorateClass([
455
- property()
456
- ], SynInput.prototype, "max", 2);
457
- __decorateClass([
458
- property()
459
- ], SynInput.prototype, "step", 2);
460
- __decorateClass([
461
- property()
462
- ], SynInput.prototype, "autocapitalize", 2);
463
- __decorateClass([
464
- property()
465
- ], SynInput.prototype, "autocorrect", 2);
466
- __decorateClass([
467
- property()
468
- ], SynInput.prototype, "autocomplete", 2);
469
- __decorateClass([
470
- property({ type: Boolean })
471
- ], SynInput.prototype, "autofocus", 2);
472
- __decorateClass([
473
- property()
474
- ], SynInput.prototype, "enterkeyhint", 2);
475
- __decorateClass([
476
- property({
477
- type: Boolean,
478
- converter: {
479
- // Allow "true|false" attribute values but keep the property boolean
480
- fromAttribute: (value) => !value || value === "false" ? false : true,
481
- toAttribute: (value) => value ? "true" : "false"
482
- }
483
- })
484
- ], SynInput.prototype, "spellcheck", 2);
485
- __decorateClass([
486
- property()
487
- ], SynInput.prototype, "inputmode", 2);
488
- __decorateClass([
489
- watch("disabled", { waitUntilFirstUpdate: true })
490
- ], SynInput.prototype, "handleDisabledChange", 1);
491
- __decorateClass([
492
- watch("step", { waitUntilFirstUpdate: true })
493
- ], SynInput.prototype, "handleStepChange", 1);
494
- __decorateClass([
495
- watch("value", { waitUntilFirstUpdate: true })
496
- ], SynInput.prototype, "handleValueChange", 1);
497
-
498
- export {
499
- SynInput
500
- };
@@ -1,31 +0,0 @@
1
- import {
2
- spinner_styles_default
3
- } from "./chunk.QPNUJNT5.js";
4
- import {
5
- LocalizeController
6
- } from "./chunk.2A3352EO.js";
7
- import {
8
- SynergyElement
9
- } from "./chunk.HQUF2ZAX.js";
10
-
11
- // src/components/spinner/spinner.component.ts
12
- import { html } from "lit";
13
- var SynSpinner = class extends SynergyElement {
14
- constructor() {
15
- super(...arguments);
16
- this.localize = new LocalizeController(this);
17
- }
18
- render() {
19
- return html`
20
- <svg part="base" class="spinner" role="progressbar" aria-label=${this.localize.term("loading")}>
21
- <circle class="spinner__track"></circle>
22
- <circle class="spinner__indicator"></circle>
23
- </svg>
24
- `;
25
- }
26
- };
27
- SynSpinner.styles = spinner_styles_default;
28
-
29
- export {
30
- SynSpinner
31
- };