@descope/web-components-ui 1.0.319 → 1.0.321
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +1390 -1010
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +1433 -1051
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1438.js +1 -1
- package/dist/umd/2362.js +1 -1
- package/dist/umd/3830.js +1 -1
- package/dist/umd/4028.js +1 -1
- package/dist/umd/5135.js +1 -1
- package/dist/umd/5806.js +1 -1
- package/dist/umd/602.js +170 -0
- package/dist/umd/{1621.js.LICENSE.txt → 602.js.LICENSE.txt} +0 -6
- package/dist/umd/6770.js +1 -1
- package/dist/umd/7056.js +2 -2
- package/dist/umd/7284.js +303 -0
- package/dist/umd/7284.js.LICENSE.txt +11 -0
- package/dist/umd/8137.js +452 -0
- package/dist/umd/8137.js.LICENSE.txt +17 -0
- package/dist/umd/8191.js +4 -4
- package/dist/umd/9092.js +2 -2
- package/dist/umd/DescopeDev.js +1 -1
- package/dist/umd/boolean-fields-descope-checkbox-index-js.js +1 -1
- package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +1 -1
- package/dist/umd/descope-email-field-index-js.js +1 -1
- package/dist/umd/descope-grid-descope-grid-selection-column-index-js.js +1 -1
- package/dist/umd/descope-new-password-descope-new-password-internal-index-js.js +1 -1
- package/dist/umd/descope-new-password-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -1
- package/dist/umd/descope-password-index-js.js +1 -1
- package/dist/umd/descope-radio-group-index-js.js +1 -0
- package/dist/umd/descope-text-field-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/dist/umd/phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js +1 -1
- package/package.json +2 -1
- package/src/components/descope-password/PasswordClass.js +56 -0
- package/src/components/descope-radio-group/RadioButtonClass.js +74 -0
- package/src/components/descope-radio-group/RadioGroupClass.js +192 -0
- package/src/components/descope-radio-group/index.js +8 -0
- package/src/index.cjs.js +2 -0
- package/src/index.js +1 -0
- package/src/theme/components/index.js +4 -0
- package/src/theme/components/radioGroup/radioButton.js +42 -0
- package/src/theme/components/radioGroup/radioGroup.js +37 -0
- package/dist/umd/1621.js +0 -620
package/dist/umd/7284.js
ADDED
@@ -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
|
+
*/
|