@descope/web-components-ui 1.0.39 → 1.0.41

Sign up to get free protection for your applications and to get access to all the features.
Files changed (100) hide show
  1. package/dist/cjs/index.cjs.js +35 -18
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +1128 -481
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/umd/101.js +148 -0
  6. package/dist/umd/208.js +2 -0
  7. package/dist/umd/208.js.LICENSE.txt +5 -0
  8. package/dist/umd/211.js +312 -0
  9. package/dist/umd/211.js.LICENSE.txt +5 -0
  10. package/dist/umd/233.js +573 -0
  11. package/dist/umd/{511.js.LICENSE.txt → 233.js.LICENSE.txt} +0 -6
  12. package/dist/umd/422.js +2 -0
  13. package/dist/umd/422.js.LICENSE.txt +5 -0
  14. package/dist/umd/437.js +19 -0
  15. package/dist/umd/437.js.LICENSE.txt +5 -0
  16. package/dist/umd/513.js +1 -0
  17. package/dist/umd/515.js +202 -0
  18. package/dist/umd/515.js.LICENSE.txt +11 -0
  19. package/dist/umd/54.js +4 -4
  20. package/dist/umd/56.js +48 -0
  21. package/dist/umd/56.js.LICENSE.txt +5 -0
  22. package/dist/umd/599.js +1 -1
  23. package/dist/umd/63.js +1 -0
  24. package/dist/umd/725.js +37 -0
  25. package/dist/umd/725.js.LICENSE.txt +11 -0
  26. package/dist/umd/729.js +1 -1
  27. package/dist/umd/767.js +2 -0
  28. package/dist/umd/{9.js.LICENSE.txt → 767.js.LICENSE.txt} +0 -6
  29. package/dist/umd/786.js +2 -0
  30. package/dist/umd/786.js.LICENSE.txt +17 -0
  31. package/dist/umd/789.js +1 -0
  32. package/dist/umd/806.js +109 -0
  33. package/dist/umd/806.js.LICENSE.txt +5 -0
  34. package/dist/umd/938.js +1 -0
  35. package/dist/umd/97.js +1 -1
  36. package/dist/umd/descope-button-index-js.js +1 -1
  37. package/dist/umd/descope-checkbox-index-js.js +1 -0
  38. package/dist/umd/descope-combo-index-js.js +1 -1
  39. package/dist/umd/descope-container-index-js.js +1 -1
  40. package/dist/umd/descope-email-field-index-js.js +1 -0
  41. package/dist/umd/descope-number-field-index-js.js +1 -0
  42. package/dist/umd/descope-password-field-index-js.js +1 -0
  43. package/dist/umd/descope-switch-toggle-index-js.js +1 -0
  44. package/dist/umd/descope-text-area-index-js.js +1 -0
  45. package/dist/umd/descope-text-field-index-js.js +1 -1
  46. package/dist/umd/index.js +1 -1
  47. package/package.json +9 -2
  48. package/src/components/descope-button/Button.js +90 -30
  49. package/src/components/descope-button/index.js +3 -3
  50. package/src/components/descope-checkbox/Checkbox.js +33 -0
  51. package/src/components/descope-checkbox/index.js +6 -0
  52. package/src/components/descope-combo/index.js +12 -12
  53. package/src/components/descope-container/Container.js +57 -51
  54. package/src/components/descope-container/index.js +1 -1
  55. package/src/components/descope-date-picker/index.js +13 -7
  56. package/src/components/descope-email-field/EmailField.js +72 -0
  57. package/src/components/descope-email-field/index.js +6 -0
  58. package/src/components/descope-number-field/NumberField.js +72 -0
  59. package/src/components/descope-number-field/index.js +6 -0
  60. package/src/components/descope-password-field/PasswordField.js +79 -0
  61. package/src/components/descope-password-field/index.js +6 -0
  62. package/src/components/descope-switch-toggle/SwitchToggle.js +81 -0
  63. package/src/components/descope-switch-toggle/index.js +6 -0
  64. package/src/components/descope-text-area/TextArea.js +66 -0
  65. package/src/components/descope-text-area/index.js +6 -0
  66. package/src/components/descope-text-field/TextField.js +98 -28
  67. package/src/components/descope-text-field/index.js +3 -3
  68. package/src/componentsHelpers/componentNameValidationMixin.js +21 -17
  69. package/src/componentsHelpers/createProxy/helpers.js +31 -27
  70. package/src/componentsHelpers/createProxy/index.js +27 -17
  71. package/src/componentsHelpers/createStyleMixin/helpers.js +65 -47
  72. package/src/componentsHelpers/createStyleMixin/index.js +64 -55
  73. package/src/componentsHelpers/draggableMixin.js +25 -26
  74. package/src/componentsHelpers/index.js +12 -9
  75. package/src/componentsHelpers/inputMixin.js +38 -37
  76. package/src/constants.js +1 -1
  77. package/src/dev/index.js +4 -3
  78. package/src/helpers.js +8 -6
  79. package/src/index.cjs.js +1 -1
  80. package/src/index.js +16 -8
  81. package/src/index.umd.js +11 -5
  82. package/src/theme/components/button.js +32 -21
  83. package/src/theme/components/checkbox.js +9 -0
  84. package/src/theme/components/container.js +32 -27
  85. package/src/theme/components/emailField.js +8 -0
  86. package/src/theme/components/index.js +19 -7
  87. package/src/theme/components/input.js +106 -0
  88. package/src/theme/components/numberField.js +8 -0
  89. package/src/theme/components/passwordField.js +11 -0
  90. package/src/theme/components/switchToggle.js +10 -0
  91. package/src/theme/components/textArea.js +44 -0
  92. package/src/theme/components/textField.js +69 -45
  93. package/src/theme/globals.js +27 -26
  94. package/src/theme/index.js +2 -2
  95. package/src/themeHelpers/index.js +45 -30
  96. package/src/themeHelpers/processColors.js +10 -7
  97. package/dist/umd/221.js +0 -37
  98. package/dist/umd/511.js +0 -573
  99. package/dist/umd/9.js +0 -312
  100. /package/dist/umd/{221.js.LICENSE.txt → 101.js.LICENSE.txt} +0 -0
@@ -0,0 +1,312 @@
1
+ /*! For license information please see 211.js.LICENSE.txt */
2
+ "use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[211],{7078:(t,e,o)=>{o.d(e,{z:()=>p});var r=o(4241),i=o(6155),a=o(1402),n=o(4463),s=o(5128);const l=o(9897).iv`
3
+ :host {
4
+ display: inline-block;
5
+ position: relative;
6
+ outline: none;
7
+ white-space: nowrap;
8
+ -webkit-user-select: none;
9
+ -moz-user-select: none;
10
+ user-select: none;
11
+ }
12
+
13
+ :host([hidden]) {
14
+ display: none !important;
15
+ }
16
+
17
+ /* Aligns the button with form fields when placed on the same line.
18
+ Note, to make it work, the form fields should have the same "::before" pseudo-element. */
19
+ .vaadin-button-container::before {
20
+ content: '\\2003';
21
+ display: inline-block;
22
+ width: 0;
23
+ max-height: 100%;
24
+ }
25
+
26
+ .vaadin-button-container {
27
+ display: inline-flex;
28
+ align-items: center;
29
+ justify-content: center;
30
+ text-align: center;
31
+ width: 100%;
32
+ height: 100%;
33
+ min-height: inherit;
34
+ text-shadow: inherit;
35
+ }
36
+
37
+ [part='prefix'],
38
+ [part='suffix'] {
39
+ flex: none;
40
+ }
41
+
42
+ [part='label'] {
43
+ white-space: nowrap;
44
+ overflow: hidden;
45
+ text-overflow: ellipsis;
46
+ }
47
+ `;var c=o(5767),m=o(2527),h=o(4062);const u=t=>class extends((0,c.D)((0,h.N)((0,m.W)(t)))){static get properties(){return{tabindex:{type:Number,value:0,reflectToAttribute:!0}}}get _activeKeys(){return["Enter"," "]}ready(){super.ready(),this.hasAttribute("role")||this.setAttribute("role","button")}_onKeyDown(t){super._onKeyDown(t),this._activeKeys.includes(t.key)&&(t.preventDefault(),this.click())}};(0,s.hC)("vaadin-button",l,{moduleId:"vaadin-button-styles"});class p extends(u((0,a.S)((0,s.Tb)((0,i.k)(r.H3))))){static get is(){return"vaadin-button"}static get template(){return r.dy`
48
+ <div class="vaadin-button-container">
49
+ <span part="prefix" aria-hidden="true">
50
+ <slot name="prefix"></slot>
51
+ </span>
52
+ <span part="label">
53
+ <slot></slot>
54
+ </span>
55
+ <span part="suffix" aria-hidden="true">
56
+ <slot name="suffix"></slot>
57
+ </span>
58
+ </div>
59
+ <slot name="tooltip"></slot>
60
+ `}ready(){super.ready(),this._tooltipController=new n.f(this),this.addController(this._tooltipController)}}customElements.define(p.is,p)},4750:(t,e,o)=>{o.d(e,{L:()=>i}),o(1195),o(9098),o(9416),o(9849),o(4173);var r=o(5128);const i=r.iv`
61
+ :host {
62
+ /* Sizing */
63
+ --lumo-button-size: var(--lumo-size-m);
64
+ min-width: calc(var(--lumo-button-size) * 2);
65
+ height: var(--lumo-button-size);
66
+ padding: 0 calc(var(--lumo-button-size) / 3 + var(--lumo-border-radius-m) / 2);
67
+ margin: var(--lumo-space-xs) 0;
68
+ box-sizing: border-box;
69
+ /* Style */
70
+ font-family: var(--lumo-font-family);
71
+ font-size: var(--lumo-font-size-m);
72
+ font-weight: 500;
73
+ color: var(--_lumo-button-color, var(--lumo-primary-text-color));
74
+ background-color: var(--_lumo-button-background-color, var(--lumo-contrast-5pct));
75
+ border-radius: var(--lumo-border-radius-m);
76
+ cursor: var(--lumo-clickable-cursor);
77
+ -webkit-tap-highlight-color: transparent;
78
+ -webkit-font-smoothing: antialiased;
79
+ -moz-osx-font-smoothing: grayscale;
80
+ flex-shrink: 0;
81
+ }
82
+
83
+ /* Set only for the internal parts so we don't affect the host vertical alignment */
84
+ [part='label'],
85
+ [part='prefix'],
86
+ [part='suffix'] {
87
+ line-height: var(--lumo-line-height-xs);
88
+ }
89
+
90
+ [part='label'] {
91
+ padding: calc(var(--lumo-button-size) / 6) 0;
92
+ }
93
+
94
+ :host([theme~='small']) {
95
+ font-size: var(--lumo-font-size-s);
96
+ --lumo-button-size: var(--lumo-size-s);
97
+ }
98
+
99
+ :host([theme~='large']) {
100
+ font-size: var(--lumo-font-size-l);
101
+ --lumo-button-size: var(--lumo-size-l);
102
+ }
103
+
104
+ /* For interaction states */
105
+ :host::before,
106
+ :host::after {
107
+ content: '';
108
+ /* We rely on the host always being relative */
109
+ position: absolute;
110
+ z-index: 1;
111
+ top: 0;
112
+ right: 0;
113
+ bottom: 0;
114
+ left: 0;
115
+ background-color: currentColor;
116
+ border-radius: inherit;
117
+ opacity: 0;
118
+ pointer-events: none;
119
+ }
120
+
121
+ /* Hover */
122
+
123
+ @media (any-hover: hover) {
124
+ :host(:hover)::before {
125
+ opacity: 0.02;
126
+ }
127
+ }
128
+
129
+ /* Active */
130
+
131
+ :host::after {
132
+ transition: opacity 1.4s, transform 0.1s;
133
+ filter: blur(8px);
134
+ }
135
+
136
+ :host([active])::before {
137
+ opacity: 0.05;
138
+ transition-duration: 0s;
139
+ }
140
+
141
+ :host([active])::after {
142
+ opacity: 0.1;
143
+ transition-duration: 0s, 0s;
144
+ transform: scale(0);
145
+ }
146
+
147
+ /* Keyboard focus */
148
+
149
+ :host([focus-ring]) {
150
+ box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
151
+ }
152
+
153
+ :host([theme~='primary'][focus-ring]) {
154
+ box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px var(--lumo-primary-color-50pct);
155
+ }
156
+
157
+ /* Types (primary, tertiary, tertiary-inline */
158
+
159
+ :host([theme~='tertiary']),
160
+ :host([theme~='tertiary-inline']) {
161
+ background-color: transparent !important;
162
+ min-width: 0;
163
+ }
164
+
165
+ :host([theme~='tertiary']) {
166
+ padding: 0 calc(var(--lumo-button-size) / 6);
167
+ }
168
+
169
+ :host([theme~='tertiary-inline'])::before {
170
+ display: none;
171
+ }
172
+
173
+ :host([theme~='tertiary-inline']) {
174
+ margin: 0;
175
+ height: auto;
176
+ padding: 0;
177
+ line-height: inherit;
178
+ font-size: inherit;
179
+ }
180
+
181
+ :host([theme~='tertiary-inline']) [part='label'] {
182
+ padding: 0;
183
+ overflow: visible;
184
+ line-height: inherit;
185
+ }
186
+
187
+ :host([theme~='primary']) {
188
+ background-color: var(--_lumo-button-primary-background-color, var(--lumo-primary-color));
189
+ color: var(--_lumo-button-primary-color, var(--lumo-primary-contrast-color));
190
+ font-weight: 600;
191
+ min-width: calc(var(--lumo-button-size) * 2.5);
192
+ }
193
+
194
+ :host([theme~='primary'])::before {
195
+ background-color: black;
196
+ }
197
+
198
+ @media (any-hover: hover) {
199
+ :host([theme~='primary']:hover)::before {
200
+ opacity: 0.05;
201
+ }
202
+ }
203
+
204
+ :host([theme~='primary'][active])::before {
205
+ opacity: 0.1;
206
+ }
207
+
208
+ :host([theme~='primary'][active])::after {
209
+ opacity: 0.2;
210
+ }
211
+
212
+ /* Colors (success, error, contrast) */
213
+
214
+ :host([theme~='success']) {
215
+ color: var(--lumo-success-text-color);
216
+ }
217
+
218
+ :host([theme~='success'][theme~='primary']) {
219
+ background-color: var(--lumo-success-color);
220
+ color: var(--lumo-success-contrast-color);
221
+ }
222
+
223
+ :host([theme~='error']) {
224
+ color: var(--lumo-error-text-color);
225
+ }
226
+
227
+ :host([theme~='error'][theme~='primary']) {
228
+ background-color: var(--lumo-error-color);
229
+ color: var(--lumo-error-contrast-color);
230
+ }
231
+
232
+ :host([theme~='contrast']) {
233
+ color: var(--lumo-contrast);
234
+ }
235
+
236
+ :host([theme~='contrast'][theme~='primary']) {
237
+ background-color: var(--lumo-contrast);
238
+ color: var(--lumo-base-color);
239
+ }
240
+
241
+ /* Disabled state. Keep selectors after other color variants. */
242
+
243
+ :host([disabled]) {
244
+ pointer-events: none;
245
+ color: var(--lumo-disabled-text-color);
246
+ }
247
+
248
+ :host([theme~='primary'][disabled]) {
249
+ background-color: var(--lumo-contrast-30pct);
250
+ color: var(--lumo-base-color);
251
+ }
252
+
253
+ :host([theme~='primary'][disabled]) [part] {
254
+ opacity: 0.7;
255
+ }
256
+
257
+ /* Icons */
258
+
259
+ [part] ::slotted(vaadin-icon) {
260
+ display: inline-block;
261
+ width: var(--lumo-icon-size-m);
262
+ height: var(--lumo-icon-size-m);
263
+ }
264
+
265
+ /* Vaadin icons are based on a 16x16 grid (unlike Lumo and Material icons with 24x24), so they look too big by default */
266
+ [part] ::slotted(vaadin-icon[icon^='vaadin:']) {
267
+ padding: 0.25em;
268
+ box-sizing: border-box !important;
269
+ }
270
+
271
+ [part='prefix'] {
272
+ margin-left: -0.25em;
273
+ margin-right: 0.25em;
274
+ }
275
+
276
+ [part='suffix'] {
277
+ margin-left: 0.25em;
278
+ margin-right: -0.25em;
279
+ }
280
+
281
+ /* Icon-only */
282
+
283
+ :host([theme~='icon']:not([theme~='tertiary-inline'])) {
284
+ min-width: var(--lumo-button-size);
285
+ padding-left: calc(var(--lumo-button-size) / 4);
286
+ padding-right: calc(var(--lumo-button-size) / 4);
287
+ }
288
+
289
+ :host([theme~='icon']) [part='prefix'],
290
+ :host([theme~='icon']) [part='suffix'] {
291
+ margin-left: 0;
292
+ margin-right: 0;
293
+ }
294
+
295
+ /* RTL specific styles */
296
+
297
+ :host([dir='rtl']) [part='prefix'] {
298
+ margin-left: 0.25em;
299
+ margin-right: -0.25em;
300
+ }
301
+
302
+ :host([dir='rtl']) [part='suffix'] {
303
+ margin-left: -0.25em;
304
+ margin-right: 0.25em;
305
+ }
306
+
307
+ :host([dir='rtl'][theme~='icon']) [part='prefix'],
308
+ :host([dir='rtl'][theme~='icon']) [part='suffix'] {
309
+ margin-left: 0;
310
+ margin-right: 0;
311
+ }
312
+ `;(0,r.hC)("vaadin-button",i,{moduleId:"lumo-button"})}}]);
@@ -0,0 +1,5 @@
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */