@descope/web-components-ui 1.0.318 → 1.0.320

Sign up to get free protection for your applications and to get access to all the features.
Files changed (40) hide show
  1. package/dist/cjs/index.cjs.js +1334 -1010
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +1390 -1064
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/umd/1438.js +1 -1
  6. package/dist/umd/2362.js +1 -1
  7. package/dist/umd/3830.js +1 -1
  8. package/dist/umd/4028.js +1 -1
  9. package/dist/umd/5135.js +1 -1
  10. package/dist/umd/5806.js +1 -1
  11. package/dist/umd/602.js +170 -0
  12. package/dist/umd/{1621.js.LICENSE.txt → 602.js.LICENSE.txt} +0 -6
  13. package/dist/umd/6770.js +1 -1
  14. package/dist/umd/7056.js +2 -2
  15. package/dist/umd/7284.js +303 -0
  16. package/dist/umd/7284.js.LICENSE.txt +11 -0
  17. package/dist/umd/8137.js +452 -0
  18. package/dist/umd/8137.js.LICENSE.txt +17 -0
  19. package/dist/umd/8191.js +4 -4
  20. package/dist/umd/9092.js +2 -2
  21. package/dist/umd/DescopeDev.js +1 -1
  22. package/dist/umd/boolean-fields-descope-checkbox-index-js.js +1 -1
  23. package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +1 -1
  24. package/dist/umd/descope-email-field-index-js.js +1 -1
  25. package/dist/umd/descope-grid-descope-grid-selection-column-index-js.js +1 -1
  26. package/dist/umd/descope-passcode-index-js.js +1 -1
  27. package/dist/umd/descope-radio-group-index-js.js +1 -0
  28. package/dist/umd/descope-text-field-index-js.js +1 -1
  29. package/dist/umd/index.js +1 -1
  30. package/dist/umd/phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js +1 -1
  31. package/package.json +3 -2
  32. package/src/components/descope-radio-group/RadioButtonClass.js +74 -0
  33. package/src/components/descope-radio-group/RadioGroupClass.js +192 -0
  34. package/src/components/descope-radio-group/index.js +8 -0
  35. package/src/index.cjs.js +2 -0
  36. package/src/index.js +1 -0
  37. package/src/theme/components/index.js +4 -0
  38. package/src/theme/components/radioGroup/radioButton.js +42 -0
  39. package/src/theme/components/radioGroup/radioGroup.js +37 -0
  40. package/dist/umd/1621.js +0 -620
@@ -0,0 +1,303 @@
1
+ /*! For license information please see 7284.js.LICENSE.txt */
2
+ "use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[7284],{16281:(t,e,o)=>{o.d(e,{h:()=>n});var a=o(91014),i=o(95229),r=(o(3550),o(86328)),s=o(56326);const n=(0,a.o)((t=>class extends((0,r.A)((0,i.f)((0,s.J)(t)))){static get properties(){return{checked:{type:Boolean,value:!1,notify:!0,reflectToAttribute:!0}}}static get delegateProps(){return[...super.delegateProps,"checked"]}_onChange(t){const e=t.target;this._toggleChecked(e.checked)}_toggleChecked(t){this.checked=t}}))},73208:(t,e,o)=>{o.d(e,{b:()=>i});var a=o(78591);class i extends a.n{constructor(t,e){super(t,"input","input",{initializer:(t,o)=>{o.value&&(t.value=o.value),o.type&&t.setAttribute("type",o.type),t.id=this.defaultId,"function"==typeof e&&e(t)},useUniqueId:!0})}}},37284:(t,e,o)=>{o(51195),o(79098),o(29416),o(29849),o(34173);var a=o(46570);(0,a.hC)("vaadin-radio-button",a.iv`
3
+ :host {
4
+ color: var(--vaadin-radio-button-label-color, var(--lumo-body-text-color));
5
+ font-size: var(--vaadin-radio-button-label-font-size, var(--lumo-font-size-m));
6
+ font-family: var(--lumo-font-family);
7
+ line-height: var(--lumo-line-height-s);
8
+ -webkit-font-smoothing: antialiased;
9
+ -moz-osx-font-smoothing: grayscale;
10
+ -webkit-tap-highlight-color: transparent;
11
+ -webkit-user-select: none;
12
+ -moz-user-select: none;
13
+ user-select: none;
14
+ cursor: default;
15
+ outline: none;
16
+ --_radio-button-size: var(--vaadin-radio-button-size, calc(var(--lumo-size-m) / 2));
17
+ --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
18
+ --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
19
+ --_selection-color: var(--vaadin-selection-color, var(--lumo-primary-color));
20
+ }
21
+
22
+ :host([has-label]) ::slotted(label) {
23
+ padding: var(
24
+ --vaadin-radio-button-label-padding,
25
+ var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs) var(--lumo-space-xs)
26
+ );
27
+ }
28
+
29
+ [part='radio'] {
30
+ width: var(--_radio-button-size);
31
+ height: var(--_radio-button-size);
32
+ margin: var(--lumo-space-xs);
33
+ position: relative;
34
+ border-radius: 50%;
35
+ background: var(--vaadin-radio-button-background, var(--lumo-contrast-20pct));
36
+ transition: transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2), background-color 0.15s;
37
+ will-change: transform;
38
+ cursor: var(--lumo-clickable-cursor);
39
+ /* Default field border color */
40
+ --_input-border-color: var(--vaadin-input-field-border-color, var(--lumo-contrast-50pct));
41
+ }
42
+
43
+ /* Used for activation "halo" */
44
+ [part='radio']::before {
45
+ pointer-events: none;
46
+ color: transparent;
47
+ width: 100%;
48
+ height: 100%;
49
+ line-height: var(--_radio-button-size);
50
+ border-radius: inherit;
51
+ background-color: inherit;
52
+ transform: scale(1.4);
53
+ opacity: 0;
54
+ transition: transform 0.1s, opacity 0.8s;
55
+ will-change: transform, opacity;
56
+ }
57
+
58
+ /* Used for the dot */
59
+ [part='radio']::after {
60
+ content: '';
61
+ pointer-events: none;
62
+ width: 0;
63
+ height: 0;
64
+ border: var(--vaadin-radio-button-dot-size, 3px) solid
65
+ var(--vaadin-radio-button-dot-color, var(--lumo-primary-contrast-color));
66
+ border-radius: 50%;
67
+ position: absolute;
68
+ top: 50%;
69
+ left: 50%;
70
+ transform: translate(-50%, -50%) scale(0);
71
+ transition: 0.25s transform;
72
+ will-change: transform;
73
+ background-clip: content-box;
74
+ }
75
+
76
+ :host([checked]) {
77
+ --vaadin-input-field-border-color: transparent;
78
+ }
79
+
80
+ :host([checked]) [part='radio'] {
81
+ background-color: var(--_selection-color);
82
+ }
83
+
84
+ :host([checked]) [part='radio']::after {
85
+ transform: translate(-50%, -50%) scale(1);
86
+ }
87
+
88
+ :host(:not([checked]):not([disabled]):hover) [part='radio'] {
89
+ background: var(--vaadin-radio-button-background-hover, var(--lumo-contrast-30pct));
90
+ }
91
+
92
+ :host([active]) [part='radio'] {
93
+ transform: scale(0.9);
94
+ transition-duration: 0.05s;
95
+ }
96
+
97
+ :host([active][checked]) [part='radio'] {
98
+ transform: scale(1.1);
99
+ }
100
+
101
+ :host([active]:not([checked])) [part='radio']::before {
102
+ transition-duration: 0.01s, 0.01s;
103
+ transform: scale(0);
104
+ opacity: 0.4;
105
+ }
106
+
107
+ :host([focus-ring]) [part='radio'] {
108
+ box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color),
109
+ inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
110
+ }
111
+
112
+ :host([disabled]) {
113
+ pointer-events: none;
114
+ color: var(--lumo-disabled-text-color);
115
+ --vaadin-input-field-border-color: var(--lumo-contrast-20pct);
116
+ }
117
+
118
+ :host([disabled]) ::slotted(label) {
119
+ color: inherit;
120
+ }
121
+
122
+ :host([disabled]) [part='radio'] {
123
+ background-color: var(--lumo-contrast-10pct);
124
+ }
125
+
126
+ :host([disabled]) [part='radio']::after {
127
+ border-color: var(--lumo-contrast-30pct);
128
+ }
129
+
130
+ /* RTL specific styles */
131
+ :host([dir='rtl'][has-label]) ::slotted(label) {
132
+ padding: var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-s);
133
+ }
134
+ `,{moduleId:"lumo-radio-button"});var i=o(74241),r=o(16155),s=o(52807),n=o(12521),d=o(61224),l=o(41370),c=o(16281),u=o(73208),h=o(26821),p=o(46729);const v=t=>class extends((0,h.h)((0,c.h)((0,l.B)((0,d.D)(t))))){static get properties(){return{name:{type:String,value:""},tabindex:{type:Number,value:0,reflectToAttribute:!0}}}static get delegateAttrs(){return[...super.delegateAttrs,"name"]}constructor(){super(),this._setType("radio"),this.value="on"}ready(){super.ready(),this.addController(new u.b(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new p.v(this.inputElement,this._labelController))}},_=a.iv`
135
+ :host {
136
+ display: inline-block;
137
+ }
138
+
139
+ :host([hidden]) {
140
+ display: none !important;
141
+ }
142
+
143
+ :host([disabled]) {
144
+ -webkit-tap-highlight-color: transparent;
145
+ }
146
+
147
+ .vaadin-radio-button-container {
148
+ display: grid;
149
+ grid-template-columns: auto 1fr;
150
+ align-items: baseline;
151
+ }
152
+
153
+ [part='radio'],
154
+ ::slotted(input),
155
+ ::slotted(label) {
156
+ grid-row: 1;
157
+ }
158
+
159
+ [part='radio'],
160
+ ::slotted(input) {
161
+ grid-column: 1;
162
+ }
163
+
164
+ [part='radio'] {
165
+ width: var(--vaadin-radio-button-size, 1em);
166
+ height: var(--vaadin-radio-button-size, 1em);
167
+ --_input-border-width: var(--vaadin-input-field-border-width, 0);
168
+ --_input-border-color: var(--vaadin-input-field-border-color, transparent);
169
+ box-shadow: inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
170
+ }
171
+
172
+ [part='radio']::before {
173
+ display: block;
174
+ content: '\\202F';
175
+ line-height: var(--vaadin-radio-button-size, 1em);
176
+ contain: paint;
177
+ }
178
+
179
+ /* visually hidden */
180
+ ::slotted(input) {
181
+ opacity: 0;
182
+ cursor: inherit;
183
+ margin: 0;
184
+ align-self: stretch;
185
+ -webkit-appearance: none;
186
+ width: initial;
187
+ height: initial;
188
+ }
189
+
190
+ @media (forced-colors: active) {
191
+ [part='radio'] {
192
+ outline: 1px solid;
193
+ outline-offset: -1px;
194
+ }
195
+
196
+ :host([focused]) [part='radio'] {
197
+ outline-width: 2px;
198
+ }
199
+
200
+ :host([disabled]) [part='radio'] {
201
+ outline-color: GrayText;
202
+ }
203
+ }
204
+ `;(0,a.hC)("vaadin-radio-button",_,{moduleId:"vaadin-radio-button-styles"});class b extends(v((0,n.S)((0,a.Tb)((0,r.k)(i.H3))))){static get is(){return"vaadin-radio-button"}static get template(){return i.dy`
205
+ <div class="vaadin-radio-button-container">
206
+ <div part="radio" aria-hidden="true"></div>
207
+ <slot name="input"></slot>
208
+ <slot name="label"></slot>
209
+ </div>
210
+ `}}(0,s.M)(b);var g=o(82982),m=o(1251);const f=a.iv`
211
+ :host {
212
+ color: var(--lumo-body-text-color);
213
+ font-size: var(--lumo-font-size-m);
214
+ font-family: var(--lumo-font-family);
215
+ -webkit-font-smoothing: antialiased;
216
+ -moz-osx-font-smoothing: grayscale;
217
+ -webkit-tap-highlight-color: transparent;
218
+ padding: var(--lumo-space-xs) 0;
219
+ }
220
+
221
+ :host::before {
222
+ /* Effective height of vaadin-radio-button */
223
+ height: var(--lumo-size-s);
224
+ box-sizing: border-box;
225
+ display: inline-flex;
226
+ align-items: center;
227
+ }
228
+
229
+ :host([theme~='vertical']) [part='group-field'] {
230
+ flex-direction: column;
231
+ }
232
+
233
+ :host([disabled]) [part='label'] {
234
+ color: var(--lumo-disabled-text-color);
235
+ -webkit-text-fill-color: var(--lumo-disabled-text-color);
236
+ }
237
+
238
+ :host([focused]:not([readonly])) [part='label'] {
239
+ color: var(--lumo-primary-text-color);
240
+ }
241
+
242
+ :host(:hover:not([readonly]):not([focused])) [part='label'],
243
+ :host(:hover:not([readonly])) [part='helper-text'] {
244
+ color: var(--lumo-body-text-color);
245
+ }
246
+
247
+ /* Touch device adjustment */
248
+ @media (pointer: coarse) {
249
+ :host(:hover:not([readonly]):not([focused])) [part='label'] {
250
+ color: var(--lumo-secondary-text-color);
251
+ }
252
+ }
253
+ `;(0,a.hC)("vaadin-radio-group",[m.l,g._,f],{moduleId:"lumo-radio-group"});var y=o(95229),k=o(21360),x=o(52628),B=o(44932),w=o(34463),R=o(73971),C=o(17412);const z=t=>class extends((0,C.f)((0,k.W)((0,y.f)((0,x.L)(t))))){static get properties(){return{value:{type:String,notify:!0,value:"",observer:"__valueChanged"},readonly:{type:Boolean,value:!1,reflectToAttribute:!0,observer:"__readonlyChanged"},_fieldName:{type:String}}}constructor(){super(),this.__registerRadioButton=this.__registerRadioButton.bind(this),this.__unregisterRadioButton=this.__unregisterRadioButton.bind(this),this.__onRadioButtonCheckedChange=this.__onRadioButtonCheckedChange.bind(this),this._tooltipController=new w.f(this),this._tooltipController.addEventListener("tooltip-changed",(t=>{const e=t.detail.node;if(e&&e.isConnected){const t=this.__radioButtons.map((t=>t.inputElement));this._tooltipController.setAriaTarget(t)}else this._tooltipController.setAriaTarget([])}))}get __radioButtons(){return this.__filterRadioButtons([...this.children])}get __selectedRadioButton(){return this.__radioButtons.find((t=>t.checked))}get isHorizontalRTL(){return this.__isRTL&&"vertical"!==this._theme}ready(){super.ready(),this.ariaTarget=this,this.setAttribute("role","radiogroup"),this._fieldName=`${this.localName}-${(0,R.l)()}`;const t=this.shadowRoot.querySelector("slot:not([name])");this._observer=new B.K(t,(({addedNodes:t,removedNodes:e})=>{this.__filterRadioButtons(t).reverse().forEach(this.__registerRadioButton),this.__filterRadioButtons(e).forEach(this.__unregisterRadioButton);const o=this.__radioButtons.map((t=>t.inputElement));this._tooltipController.setAriaTarget(o)})),this.addController(this._tooltipController)}__filterRadioButtons(t){return t.filter((t=>t.nodeType===Node.ELEMENT_NODE&&"vaadin-radio-button"===t.localName))}_onKeyDown(t){super._onKeyDown(t);const e=t.composedPath().find((t=>t.nodeType===Node.ELEMENT_NODE&&"vaadin-radio-button"===t.localName));["ArrowLeft","ArrowUp"].includes(t.key)&&(t.preventDefault(),this.__selectNextRadioButton(e)),["ArrowRight","ArrowDown"].includes(t.key)&&(t.preventDefault(),this.__selectPrevRadioButton(e))}_invalidChanged(t){super._invalidChanged(t),t?this.setAttribute("aria-invalid","true"):this.removeAttribute("aria-invalid")}__selectNextRadioButton(t){const e=this.__radioButtons.indexOf(t);this.__selectIncRadioButton(e,this.isHorizontalRTL?1:-1)}__selectPrevRadioButton(t){const e=this.__radioButtons.indexOf(t);this.__selectIncRadioButton(e,this.isHorizontalRTL?-1:1)}__selectIncRadioButton(t,e){const o=(this.__radioButtons.length+t+e)%this.__radioButtons.length,a=this.__radioButtons[o];a.disabled?this.__selectIncRadioButton(o,e):(a.focusElement.focus(),a.focusElement.click())}__registerRadioButton(t){t.name=this._fieldName,t.addEventListener("checked-changed",this.__onRadioButtonCheckedChange),(this.disabled||this.readonly)&&(t.disabled=!0),t.checked&&this.__selectRadioButton(t)}__unregisterRadioButton(t){t.removeEventListener("checked-changed",this.__onRadioButtonCheckedChange),t.value===this.value&&this.__selectRadioButton(null)}__onRadioButtonCheckedChange(t){t.target.checked&&this.__selectRadioButton(t.target)}__valueChanged(t,e){if(void 0!==e||""!==t){if(t){const e=this.__radioButtons.find((e=>e.value===t));e?(this.__selectRadioButton(e),this.toggleAttribute("has-value",!0)):console.warn(`The radio button with the value "${t}" was not found.`)}else this.__selectRadioButton(null),this.removeAttribute("has-value");void 0!==e&&this.validate()}}__readonlyChanged(t,e){(t||void 0!==e)&&e!==t&&this.__updateRadioButtonsDisabledProperty()}_disabledChanged(t,e){super._disabledChanged(t,e),(t||void 0!==e)&&e!==t&&this.__updateRadioButtonsDisabledProperty()}_shouldRemoveFocus(t){return!this.contains(t.relatedTarget)}_setFocused(t){super._setFocused(t),!t&&document.hasFocus()&&this.validate()}__selectRadioButton(t){this.value=t?t.value:"",this.__radioButtons.forEach((e=>{e.checked=e===t})),this.readonly&&this.__updateRadioButtonsDisabledProperty()}__updateRadioButtonsDisabledProperty(){this.__radioButtons.forEach((t=>{this.readonly?t.disabled=t!==this.__selectedRadioButton:t.disabled=this.disabled}))}},T=a.iv`
254
+ :host {
255
+ display: inline-flex;
256
+ }
257
+
258
+ :host::before {
259
+ content: '\\2003';
260
+ width: 0;
261
+ display: inline-block;
262
+ }
263
+
264
+ :host([hidden]) {
265
+ display: none !important;
266
+ }
267
+
268
+ .vaadin-group-field-container {
269
+ display: flex;
270
+ flex-direction: column;
271
+ width: 100%;
272
+ }
273
+
274
+ [part='group-field'] {
275
+ display: flex;
276
+ flex-wrap: wrap;
277
+ }
278
+
279
+ :host(:not([has-label])) [part='label'] {
280
+ display: none;
281
+ }
282
+ `;(0,a.hC)("vaadin-radio-group",T,{moduleId:"vaadin-radio-group-styles"});class E extends(z((0,n.S)((0,a.Tb)(i.H3)))){static get is(){return"vaadin-radio-group"}static get template(){return i.dy`
283
+ <div class="vaadin-group-field-container">
284
+ <div part="label">
285
+ <slot name="label"></slot>
286
+ <span part="required-indicator" aria-hidden="true"></span>
287
+ </div>
288
+
289
+ <div part="group-field">
290
+ <slot></slot>
291
+ </div>
292
+
293
+ <div part="helper-text">
294
+ <slot name="helper"></slot>
295
+ </div>
296
+
297
+ <div part="error-message">
298
+ <slot name="error-message"></slot>
299
+ </div>
300
+ </div>
301
+
302
+ <slot name="tooltip"></slot>
303
+ `}}(0,s.M)(E)}}]);
@@ -0,0 +1,11 @@
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
+ */
6
+
7
+ /**
8
+ * @license
9
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
10
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
11
+ */