@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,573 @@
1
+ /*! For license information please see 233.js.LICENSE.txt */
2
+ "use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[233],{9091:(e,t,r)=>{r.d(t,{t:()=>n});var o=r(1014),i=r(6328),a=r(6326),s=r(4524);const n=(0,o.o)((e=>class extends((0,i.A)((0,s.n)((0,a.J)(e)))){static get constraints(){return["required"]}static get delegateAttrs(){return[...super.delegateAttrs,"required"]}ready(){super.ready(),this._createConstraintsObserver()}checkValidity(){return this.inputElement&&this._hasValidConstraints(this.constructor.constraints.map((e=>this[e])))?this.inputElement.checkValidity():!this.invalid}_hasValidConstraints(e){return e.some((e=>this.__isValidConstraint(e)))}_createConstraintsObserver(){this._createMethodObserver(`_constraintsChanged(stateTarget, ${this.constructor.constraints.join(", ")})`)}_constraintsChanged(e,...t){if(!e)return;const r=this._hasValidConstraints(t),o=this.__previousHasConstraints&&!r;(this._hasValue||this.invalid)&&r?this.validate():o&&this._setInvalid(!1),this.__previousHasConstraints=r}_onChange(e){e.stopPropagation(),this.validate(),this.dispatchEvent(new CustomEvent("change",{detail:{sourceEvent:e},bubbles:e.bubbles,cancelable:e.cancelable}))}__isValidConstraint(e){return Boolean(e)||0===e}}))},2006:(e,t,r)=>{r.d(t,{L:()=>C});var o=r(7913),i=r(6139),a=r(6634),s=r(602),n=r(6326);const l=e=>class extends((0,n.J)((0,s.L)(e))){static get properties(){return{clearButtonVisible:{type:Boolean,reflectToAttribute:!0,value:!1}}}get clearElement(){return console.warn(`Please implement the 'clearElement' property in <${this.localName}>`),null}ready(){super.ready(),this.clearElement&&this.clearElement.addEventListener("click",(e=>this._onClearButtonClick(e)))}_onClearButtonClick(e){e.preventDefault(),this.inputElement.focus(),this._onClearAction()}_onEscape(e){super._onEscape(e),this.clearButtonVisible&&this.value&&(e.stopPropagation(),this._onClearAction())}_onClearAction(){this.clear(),this.inputElement.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.inputElement.dispatchEvent(new Event("change",{bubbles:!0}))}};var d=r(6155),h=r(2604);class u extends h.v{constructor(e){super(e,"error-message","div")}setErrorMessage(e){this.errorMessage=e,this.updateDefaultNode(this.node)}setInvalid(e){this.invalid=e,this.updateDefaultNode(this.node)}initAddedNode(e){e!==this.defaultNode&&this.initCustomNode(e)}initNode(e){this.updateDefaultNode(e)}initCustomNode(e){e.textContent&&!this.errorMessage&&(this.errorMessage=e.textContent.trim()),super.initCustomNode(e)}restoreDefaultNode(){this.attachDefaultNode()}updateDefaultNode(e){const{errorMessage:t,invalid:r}=this,o=Boolean(r&&t&&""!==t.trim());e&&(e.textContent=o?t:"",e.hidden=!o,o?e.setAttribute("role","alert"):e.removeAttribute("role")),super.updateDefaultNode(e)}}var p=r(3726);class c{constructor(e){this.host=e,this.__required=!1}get __isGroupField(){return this.__target===this.host}setTarget(e){this.__target=e,this.__setAriaRequiredAttribute(this.__required),this.__setLabelIdToAriaAttribute(this.__labelId),this.__setErrorIdToAriaAttribute(this.__errorId),this.__setHelperIdToAriaAttribute(this.__helperId)}setRequired(e){this.__setAriaRequiredAttribute(e),this.__required=e}setLabelId(e){this.__setLabelIdToAriaAttribute(e,this.__labelId),this.__labelId=e}setErrorId(e){this.__setErrorIdToAriaAttribute(e,this.__errorId),this.__errorId=e}setHelperId(e){this.__setHelperIdToAriaAttribute(e,this.__helperId),this.__helperId=e}__setLabelIdToAriaAttribute(e,t){this.__setAriaAttributeId("aria-labelledby",e,t)}__setErrorIdToAriaAttribute(e,t){this.__isGroupField?this.__setAriaAttributeId("aria-labelledby",e,t):this.__setAriaAttributeId("aria-describedby",e,t)}__setHelperIdToAriaAttribute(e,t){this.__isGroupField?this.__setAriaAttributeId("aria-labelledby",e,t):this.__setAriaAttributeId("aria-describedby",e,t)}__setAriaRequiredAttribute(e){this.__target&&(["input","textarea"].includes(this.__target.localName)||(e?this.__target.setAttribute("aria-required","true"):this.__target.removeAttribute("aria-required")))}__setAriaAttributeId(e,t,r){this.__target&&(r&&(0,p.x_)(this.__target,e,r),t&&(0,p.$2)(this.__target,e,t))}}class m extends h.v{constructor(e){super(e,"helper",null)}setHelperText(e){this.helperText=e,this.getSlotChild()||this.restoreDefaultNode(),this.node===this.defaultNode&&this.updateDefaultNode(this.node)}restoreDefaultNode(){const{helperText:e}=this;if(e&&""!==e.trim()){this.tagName="div";const e=this.attachDefaultNode();this.observeNode(e)}}updateDefaultNode(e){e&&(e.textContent=this.helperText),super.updateDefaultNode(e)}initCustomNode(e){super.initCustomNode(e),this.observeNode(e)}}var v=r(6821),f=r(4524);const b=e=>class extends((0,f.n)((0,v.h)((0,d.k)(e)))){static get properties(){return{ariaTarget:{type:Object,observer:"_ariaTargetChanged"},errorMessage:{type:String,observer:"_errorMessageChanged"},helperText:{type:String,observer:"_helperTextChanged"}}}static get observers(){return["_invalidChanged(invalid)","_requiredChanged(required)"]}constructor(){super(),this._fieldAriaController=new c(this),this._helperController=new m(this),this._errorController=new u(this),this._errorController.addEventListener("slot-content-changed",(e=>{this.toggleAttribute("has-error-message",e.detail.hasContent)})),this._labelController.addEventListener("slot-content-changed",(e=>{const{hasContent:t,node:r}=e.detail;this.__labelChanged(t,r)})),this._helperController.addEventListener("slot-content-changed",(e=>{const{hasContent:t,node:r}=e.detail;this.toggleAttribute("has-helper",t),this.__helperChanged(t,r)}))}get _errorNode(){return this._errorController.node}get _helperNode(){return this._helperController.node}ready(){super.ready(),this.addController(this._fieldAriaController),this.addController(this._helperController),this.addController(this._errorController)}__helperChanged(e,t){e?this._fieldAriaController.setHelperId(t.id):this._fieldAriaController.setHelperId(null)}__labelChanged(e,t){e?this._fieldAriaController.setLabelId(t.id):this._fieldAriaController.setLabelId(null)}_errorMessageChanged(e){this._errorController.setErrorMessage(e)}_helperTextChanged(e){this._helperController.setHelperText(e)}_ariaTargetChanged(e){e&&this._fieldAriaController.setTarget(e)}_requiredChanged(e){this._fieldAriaController.setRequired(e)}_invalidChanged(e){this._errorController.setInvalid(e),setTimeout((()=>{if(e){const e=this._errorNode;this._fieldAriaController.setErrorId(e&&e.id)}else this._fieldAriaController.setErrorId(null)}))}};var g=r(9091),_=r(1014);const x=new WeakMap,y=(0,_.o)((e=>class extends e{get slotStyles(){return{}}connectedCallback(){super.connectedCallback(),this.__applySlotStyles()}__applySlotStyles(){const e=this.getRootNode(),t=function(e){return x.has(e)||x.set(e,new Set),x.get(e)}(e);this.slotStyles.forEach((r=>{t.has(r)||(function(e,t){const r=document.createElement("style");r.textContent=e,t===document?document.head.appendChild(r):t.insertBefore(r,t.firstChild)}(r,e),t.add(r))}))}})),C=e=>class extends(y((0,a.B)((0,g.t)(b(l((0,s.L)(e))))))){static get properties(){return{allowedCharPattern:{type:String,observer:"_allowedCharPatternChanged"},autoselect:{type:Boolean,value:!1},name:{type:String,reflectToAttribute:!0},placeholder:{type:String,reflectToAttribute:!0},readonly:{type:Boolean,value:!1,reflectToAttribute:!0},title:{type:String,reflectToAttribute:!0}}}static get delegateAttrs(){return[...super.delegateAttrs,"name","type","placeholder","readonly","invalid","title"]}constructor(){super(),this._boundOnPaste=this._onPaste.bind(this),this._boundOnDrop=this._onDrop.bind(this),this._boundOnBeforeInput=this._onBeforeInput.bind(this)}get slotStyles(){return["\n :is(input[slot='input'], textarea[slot='textarea'])::placeholder {\n font: inherit;\n color: inherit;\n }\n "]}_onFocus(e){super._onFocus(e),this.autoselect&&this.inputElement&&this.inputElement.select()}_onChange(e){e.stopPropagation(),this.validate(),this.dispatchEvent(new CustomEvent("change",{detail:{sourceEvent:e},bubbles:e.bubbles,cancelable:e.cancelable}))}_addInputListeners(e){super._addInputListeners(e),e.addEventListener("paste",this._boundOnPaste),e.addEventListener("drop",this._boundOnDrop),e.addEventListener("beforeinput",this._boundOnBeforeInput)}_removeInputListeners(e){super._removeInputListeners(e),e.removeEventListener("paste",this._boundOnPaste),e.removeEventListener("drop",this._boundOnDrop),e.removeEventListener("beforeinput",this._boundOnBeforeInput)}_onKeyDown(e){super._onKeyDown(e),this.allowedCharPattern&&!this.__shouldAcceptKey(e)&&(e.preventDefault(),this._markInputPrevented())}_markInputPrevented(){this.setAttribute("input-prevented",""),this._preventInputDebouncer=i.dx.debounce(this._preventInputDebouncer,o.Wc.after(200),(()=>{this.removeAttribute("input-prevented")}))}__shouldAcceptKey(e){return e.metaKey||e.ctrlKey||!e.key||1!==e.key.length||this.__allowedCharRegExp.test(e.key)}_onPaste(e){if(this.allowedCharPattern){const t=e.clipboardData.getData("text");this.__allowedTextRegExp.test(t)||(e.preventDefault(),this._markInputPrevented())}}_onDrop(e){if(this.allowedCharPattern){const t=e.dataTransfer.getData("text");this.__allowedTextRegExp.test(t)||(e.preventDefault(),this._markInputPrevented())}}_onBeforeInput(e){this.allowedCharPattern&&e.data&&!this.__allowedTextRegExp.test(e.data)&&(e.preventDefault(),this._markInputPrevented())}_allowedCharPatternChanged(e){if(e)try{this.__allowedCharRegExp=new RegExp(`^${e}$`,"u"),this.__allowedTextRegExp=new RegExp(`^${e}*$`,"u")}catch(e){console.error(e)}}}},2743:(e,t,r)=>{r.d(t,{J:()=>a});var o=r(9897);const i=o.iv`
3
+ [part='clear-button'] {
4
+ display: none;
5
+ cursor: default;
6
+ }
7
+
8
+ [part='clear-button']::before {
9
+ content: '\\2715';
10
+ }
11
+
12
+ :host([clear-button-visible][has-value]:not([disabled]):not([readonly])) [part='clear-button'] {
13
+ display: block;
14
+ }
15
+ `,a=[o.iv`
16
+ :host {
17
+ display: inline-flex;
18
+ outline: none;
19
+ }
20
+
21
+ :host::before {
22
+ content: '\\2003';
23
+ width: 0;
24
+ display: inline-block;
25
+ /* Size and position this element on the same vertical position as the input-field element
26
+ to make vertical align for the host element work as expected */
27
+ }
28
+
29
+ :host([hidden]) {
30
+ display: none !important;
31
+ }
32
+
33
+ :host(:not([has-label])) [part='label'] {
34
+ display: none;
35
+ }
36
+ `,o.iv`
37
+ [class$='container'] {
38
+ display: flex;
39
+ flex-direction: column;
40
+ min-width: 100%;
41
+ max-width: 100%;
42
+ width: var(--vaadin-field-default-width, 12em);
43
+ }
44
+ `,i]},4524:(e,t,r)=>{r.d(t,{n:()=>o});const o=(0,r(1014).o)((e=>class extends e{static get properties(){return{invalid:{type:Boolean,reflectToAttribute:!0,notify:!0,value:!1},required:{type:Boolean,reflectToAttribute:!0}}}validate(){const e=this.checkValidity();return this._setInvalid(!e),this.dispatchEvent(new CustomEvent("validated",{detail:{valid:e}})),e}checkValidity(){return!this.required||!!this.value}_setInvalid(e){this._shouldSetInvalid(e)&&(this.invalid=e)}_shouldSetInvalid(e){return!0}}))},3130:(e,t,r)=>{var o=r(4241),i=r(1914),a=r(5128);class s extends((0,a.Tb)((0,i.U)(o.H3))){static get is(){return"vaadin-input-container"}static get template(){return o.dy`
45
+ <style>
46
+ :host {
47
+ display: flex;
48
+ align-items: center;
49
+ flex: 0 1 auto;
50
+ border-radius:
51
+ /* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius */
52
+ var(--vaadin-input-field-top-start-radius, var(--__border-radius))
53
+ var(--vaadin-input-field-top-end-radius, var(--__border-radius))
54
+ var(--vaadin-input-field-bottom-end-radius, var(--__border-radius))
55
+ var(--vaadin-input-field-bottom-start-radius, var(--__border-radius));
56
+ --_border-radius: var(--vaadin-input-field-border-radius, 0px);
57
+ }
58
+
59
+ :host([dir='rtl']) {
60
+ border-radius:
61
+ /* Don't use logical props, see https://github.com/vaadin/vaadin-time-picker/issues/145 */
62
+ var(--vaadin-input-field-top-end-radius, var(--_border-radius))
63
+ var(--vaadin-input-field-top-start-radius, var(--_border-radius))
64
+ var(--vaadin-input-field-bottom-start-radius, var(--_border-radius))
65
+ var(--vaadin-input-field-bottom-end-radius, var(--_border-radius));
66
+ }
67
+
68
+ :host([hidden]) {
69
+ display: none !important;
70
+ }
71
+
72
+ /* Reset the native input styles */
73
+ ::slotted(input) {
74
+ -webkit-appearance: none;
75
+ -moz-appearance: none;
76
+ flex: auto;
77
+ white-space: nowrap;
78
+ overflow: hidden;
79
+ width: 100%;
80
+ height: 100%;
81
+ outline: none;
82
+ margin: 0;
83
+ padding: 0;
84
+ border: 0;
85
+ border-radius: 0;
86
+ min-width: 0;
87
+ font: inherit;
88
+ line-height: normal;
89
+ color: inherit;
90
+ background-color: transparent;
91
+ /* Disable default invalid style in Firefox */
92
+ box-shadow: none;
93
+ }
94
+
95
+ ::slotted(*) {
96
+ flex: none;
97
+ }
98
+
99
+ ::slotted(:is(input, textarea))::placeholder {
100
+ /* Use ::slotted(input:placeholder-shown) in themes to style the placeholder. */
101
+ /* because ::slotted(...)::placeholder does not work in Safari. */
102
+ font: inherit;
103
+ color: inherit;
104
+ /* Override default opacity in Firefox */
105
+ opacity: 1;
106
+ }
107
+ </style>
108
+ <slot name="prefix"></slot>
109
+ <slot></slot>
110
+ <slot name="suffix"></slot>
111
+ `}static get properties(){return{disabled:{type:Boolean,reflectToAttribute:!0},readonly:{type:Boolean,reflectToAttribute:!0},invalid:{type:Boolean,reflectToAttribute:!0}}}ready(){super.ready(),this.addEventListener("pointerdown",(e=>{e.target===this&&e.preventDefault()})),this.addEventListener("click",(e=>{e.target===this&&this.shadowRoot.querySelector("slot:not([name])").assignedNodes({flatten:!0}).forEach((e=>e.focus&&e.focus()))}))}}customElements.define(s.is,s)},3787:(e,t,r)=>{r(1195),r(9098),r(9849),r(4173);var o=r(5128);(0,o.hC)("vaadin-input-container",o.iv`
112
+ :host {
113
+ background-color: var(--lumo-contrast-10pct);
114
+ padding: 0 calc(0.375em + var(--_input-container-radius) / 4 - 1px);
115
+ font-weight: 500;
116
+ line-height: 1;
117
+ position: relative;
118
+ cursor: text;
119
+ box-sizing: border-box;
120
+ border-radius:
121
+ /* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius#syntax */
122
+ var(--vaadin-input-field-top-start-radius, var(--_input-container-radius))
123
+ var(--vaadin-input-field-top-end-radius, var(--_input-container-radius))
124
+ var(--vaadin-input-field-bottom-end-radius, var(--_input-container-radius))
125
+ var(--vaadin-input-field-bottom-start-radius, var(--_input-container-radius));
126
+ /* Fallback */
127
+ --_input-container-radius: var(--vaadin-input-field-border-radius, var(--lumo-border-radius-m));
128
+ }
129
+
130
+ :host([dir='rtl']) {
131
+ border-radius:
132
+ /* Don't use logical props, see https://github.com/vaadin/vaadin-time-picker/issues/145 */
133
+ var(--vaadin-input-field-top-end-radius, var(--_input-container-radius))
134
+ var(--vaadin-input-field-top-start-radius, var(--_input-container-radius))
135
+ var(--vaadin-input-field-bottom-start-radius, var(--_input-container-radius))
136
+ var(--vaadin-input-field-bottom-end-radius, var(--_input-container-radius));
137
+ }
138
+
139
+ /* Used for hover and activation effects */
140
+ :host::after {
141
+ content: '';
142
+ position: absolute;
143
+ top: 0;
144
+ right: 0;
145
+ bottom: 0;
146
+ left: 0;
147
+ border-radius: inherit;
148
+ pointer-events: none;
149
+ background-color: var(--lumo-contrast-50pct);
150
+ opacity: 0;
151
+ transition: transform 0.15s, opacity 0.2s;
152
+ transform-origin: 100% 0;
153
+ }
154
+
155
+ ::slotted(:not([slot$='fix'])) {
156
+ cursor: inherit;
157
+ min-height: var(--lumo-text-field-size, var(--lumo-size-m));
158
+ padding: 0 0.25em;
159
+ --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);
160
+ -webkit-mask-image: var(--_lumo-text-field-overflow-mask-image);
161
+ mask-image: var(--_lumo-text-field-overflow-mask-image);
162
+ }
163
+
164
+ /* Read-only */
165
+ :host([readonly]) {
166
+ color: var(--lumo-secondary-text-color);
167
+ background-color: transparent;
168
+ cursor: default;
169
+ }
170
+
171
+ :host([readonly])::after {
172
+ background-color: transparent;
173
+ opacity: 1;
174
+ border: 1px dashed var(--lumo-contrast-30pct);
175
+ }
176
+
177
+ /* Disabled */
178
+ :host([disabled]) {
179
+ background-color: var(--lumo-contrast-5pct);
180
+ }
181
+
182
+ :host([disabled]) ::slotted(*) {
183
+ color: var(--lumo-disabled-text-color);
184
+ -webkit-text-fill-color: var(--lumo-disabled-text-color);
185
+ }
186
+
187
+ /* Invalid */
188
+ :host([invalid]) {
189
+ background-color: var(--lumo-error-color-10pct);
190
+ }
191
+
192
+ :host([invalid])::after {
193
+ background-color: var(--lumo-error-color-50pct);
194
+ }
195
+
196
+ /* Slotted icons */
197
+ ::slotted(vaadin-icon) {
198
+ color: var(--lumo-contrast-60pct);
199
+ width: var(--lumo-icon-size-m);
200
+ height: var(--lumo-icon-size-m);
201
+ }
202
+
203
+ /* Vaadin icons are based on a 16x16 grid (unlike Lumo and Material icons with 24x24), so they look too big by default */
204
+ ::slotted(vaadin-icon[icon^='vaadin:']) {
205
+ padding: 0.25em;
206
+ box-sizing: border-box !important;
207
+ }
208
+
209
+ /* Text align */
210
+ :host([dir='rtl']) ::slotted(:not([slot$='fix'])) {
211
+ --_lumo-text-field-overflow-mask-image: linear-gradient(to right, transparent, #000 1.25em);
212
+ }
213
+
214
+ @-moz-document url-prefix() {
215
+ :host([dir='rtl']) ::slotted(:not([slot$='fix'])) {
216
+ mask-image: var(--_lumo-text-field-overflow-mask-image);
217
+ }
218
+ }
219
+
220
+ :host([theme~='align-left']) ::slotted(:not([slot$='fix'])) {
221
+ text-align: start;
222
+ --_lumo-text-field-overflow-mask-image: none;
223
+ }
224
+
225
+ :host([theme~='align-center']) ::slotted(:not([slot$='fix'])) {
226
+ text-align: center;
227
+ --_lumo-text-field-overflow-mask-image: none;
228
+ }
229
+
230
+ :host([theme~='align-right']) ::slotted(:not([slot$='fix'])) {
231
+ text-align: end;
232
+ --_lumo-text-field-overflow-mask-image: none;
233
+ }
234
+
235
+ @-moz-document url-prefix() {
236
+ /* Firefox is smart enough to align overflowing text to right */
237
+ :host([theme~='align-right']) ::slotted(:not([slot$='fix'])) {
238
+ --_lumo-text-field-overflow-mask-image: linear-gradient(to right, transparent 0.25em, #000 1.5em);
239
+ }
240
+ }
241
+
242
+ @-moz-document url-prefix() {
243
+ /* Firefox is smart enough to align overflowing text to right */
244
+ :host([theme~='align-left']) ::slotted(:not([slot$='fix'])) {
245
+ --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent 0.25em, #000 1.5em);
246
+ }
247
+ }
248
+
249
+ /* RTL specific styles */
250
+ :host([dir='rtl'])::after {
251
+ transform-origin: 0% 0;
252
+ }
253
+
254
+ :host([theme~='align-left'][dir='rtl']) ::slotted(:not([slot$='fix'])) {
255
+ --_lumo-text-field-overflow-mask-image: none;
256
+ }
257
+
258
+ :host([theme~='align-center'][dir='rtl']) ::slotted(:not([slot$='fix'])) {
259
+ --_lumo-text-field-overflow-mask-image: none;
260
+ }
261
+
262
+ :host([theme~='align-right'][dir='rtl']) ::slotted(:not([slot$='fix'])) {
263
+ --_lumo-text-field-overflow-mask-image: none;
264
+ }
265
+
266
+ @-moz-document url-prefix() {
267
+ /* Firefox is smart enough to align overflowing text to right */
268
+ :host([theme~='align-right'][dir='rtl']) ::slotted(:not([slot$='fix'])) {
269
+ --_lumo-text-field-overflow-mask-image: linear-gradient(to right, transparent 0.25em, #000 1.5em);
270
+ }
271
+ }
272
+
273
+ @-moz-document url-prefix() {
274
+ /* Firefox is smart enough to align overflowing text to right */
275
+ :host([theme~='align-left'][dir='rtl']) ::slotted(:not([slot$='fix'])) {
276
+ --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent 0.25em, #000 1.5em);
277
+ }
278
+ }
279
+ `,{moduleId:"lumo-input-container"}),r(3130)},4398:(e,t,r)=>{r.d(t,{q:()=>i}),r(1195),r(1735),r(9098),r(9849);var o=r(5128);const i=o.iv`
280
+ [part$='button'] {
281
+ flex: none;
282
+ width: 1em;
283
+ height: 1em;
284
+ line-height: 1;
285
+ font-size: var(--lumo-icon-size-m);
286
+ text-align: center;
287
+ color: var(--lumo-contrast-60pct);
288
+ transition: 0.2s color;
289
+ cursor: var(--lumo-clickable-cursor);
290
+ }
291
+
292
+ [part$='button']:hover {
293
+ color: var(--lumo-contrast-90pct);
294
+ }
295
+
296
+ :host([disabled]) [part$='button'],
297
+ :host([readonly]) [part$='button'] {
298
+ color: var(--lumo-contrast-20pct);
299
+ cursor: default;
300
+ }
301
+
302
+ [part$='button']::before {
303
+ font-family: 'lumo-icons';
304
+ display: block;
305
+ }
306
+ `;(0,o.hC)("",i,{moduleId:"lumo-field-button"})},2279:(e,t,r)=>{r.d(t,{J:()=>l}),r(1195),r(1735),r(9098),r(9416),r(9849),r(4173);var o=r(5128),i=r(4398);const a=o.iv`
307
+ :host([has-helper]) [part='helper-text']::before {
308
+ content: '';
309
+ display: block;
310
+ height: 0.4em;
311
+ }
312
+
313
+ [part='helper-text'] {
314
+ display: block;
315
+ color: var(--lumo-secondary-text-color);
316
+ font-size: var(--lumo-font-size-xs);
317
+ line-height: var(--lumo-line-height-xs);
318
+ margin-left: calc(var(--lumo-border-radius-m) / 4);
319
+ transition: color 0.2s;
320
+ }
321
+
322
+ :host(:hover:not([readonly])) [part='helper-text'] {
323
+ color: var(--lumo-body-text-color);
324
+ }
325
+
326
+ :host([disabled]) [part='helper-text'] {
327
+ color: var(--lumo-disabled-text-color);
328
+ -webkit-text-fill-color: var(--lumo-disabled-text-color);
329
+ }
330
+
331
+ :host([has-helper][theme~='helper-above-field']) [part='helper-text']::before {
332
+ display: none;
333
+ }
334
+
335
+ :host([has-helper][theme~='helper-above-field']) [part='helper-text']::after {
336
+ content: '';
337
+ display: block;
338
+ height: 0.4em;
339
+ }
340
+
341
+ :host([has-helper][theme~='helper-above-field']) [part='label'] {
342
+ order: 0;
343
+ padding-bottom: 0.4em;
344
+ }
345
+
346
+ :host([has-helper][theme~='helper-above-field']) [part='helper-text'] {
347
+ order: 1;
348
+ }
349
+
350
+ :host([has-helper][theme~='helper-above-field']) [part='label'] + * {
351
+ order: 2;
352
+ }
353
+
354
+ :host([has-helper][theme~='helper-above-field']) [part='error-message'] {
355
+ order: 3;
356
+ }
357
+ `,s=o.iv`
358
+ [part='label'] {
359
+ align-self: flex-start;
360
+ color: var(--lumo-secondary-text-color);
361
+ font-weight: 500;
362
+ font-size: var(--lumo-font-size-s);
363
+ margin-left: calc(var(--lumo-border-radius-m) / 4);
364
+ transition: color 0.2s;
365
+ line-height: 1;
366
+ padding-right: 1em;
367
+ padding-bottom: 0.5em;
368
+ overflow: hidden;
369
+ white-space: nowrap;
370
+ text-overflow: ellipsis;
371
+ position: relative;
372
+ max-width: 100%;
373
+ box-sizing: border-box;
374
+ }
375
+
376
+ :host([has-label])::before {
377
+ margin-top: calc(var(--lumo-font-size-s) * 1.5);
378
+ }
379
+
380
+ :host([has-label][theme~='small'])::before {
381
+ margin-top: calc(var(--lumo-font-size-xs) * 1.5);
382
+ }
383
+
384
+ :host([has-label]) {
385
+ padding-top: var(--lumo-space-m);
386
+ }
387
+
388
+ :host([has-label]) ::slotted([slot='tooltip']) {
389
+ --vaadin-tooltip-offset-bottom: calc((var(--lumo-space-m) - var(--lumo-space-xs)) * -1);
390
+ }
391
+
392
+ :host([required]) [part='required-indicator']::after {
393
+ content: var(--lumo-required-field-indicator, '\\2022');
394
+ transition: opacity 0.2s;
395
+ color: var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color));
396
+ position: absolute;
397
+ right: 0;
398
+ width: 1em;
399
+ text-align: center;
400
+ }
401
+
402
+ :host([invalid]) [part='required-indicator']::after {
403
+ color: var(--lumo-required-field-indicator-color, var(--lumo-error-text-color));
404
+ }
405
+
406
+ [part='error-message'] {
407
+ margin-left: calc(var(--lumo-border-radius-m) / 4);
408
+ font-size: var(--lumo-font-size-xs);
409
+ line-height: var(--lumo-line-height-xs);
410
+ color: var(--lumo-error-text-color);
411
+ will-change: max-height;
412
+ transition: 0.4s max-height;
413
+ max-height: 5em;
414
+ }
415
+
416
+ :host([has-error-message]) [part='error-message']::before,
417
+ :host([has-error-message]) [part='error-message']::after {
418
+ content: '';
419
+ display: block;
420
+ height: 0.4em;
421
+ }
422
+
423
+ :host(:not([invalid])) [part='error-message'] {
424
+ max-height: 0;
425
+ overflow: hidden;
426
+ }
427
+
428
+ /* RTL specific styles */
429
+
430
+ :host([dir='rtl']) [part='label'] {
431
+ margin-left: 0;
432
+ margin-right: calc(var(--lumo-border-radius-m) / 4);
433
+ }
434
+
435
+ :host([dir='rtl']) [part='label'] {
436
+ padding-left: 1em;
437
+ padding-right: 0;
438
+ }
439
+
440
+ :host([dir='rtl']) [part='required-indicator']::after {
441
+ right: auto;
442
+ left: 0;
443
+ }
444
+
445
+ :host([dir='rtl']) [part='error-message'] {
446
+ margin-left: 0;
447
+ margin-right: calc(var(--lumo-border-radius-m) / 4);
448
+ }
449
+ `;(0,o.hC)("",s,{moduleId:"lumo-required-field"});const n=o.iv`
450
+ :host {
451
+ --lumo-text-field-size: var(--lumo-size-m);
452
+ color: var(--lumo-body-text-color);
453
+ font-size: var(--lumo-font-size-m);
454
+ font-family: var(--lumo-font-family);
455
+ -webkit-font-smoothing: antialiased;
456
+ -moz-osx-font-smoothing: grayscale;
457
+ -webkit-tap-highlight-color: transparent;
458
+ padding: var(--lumo-space-xs) 0;
459
+ }
460
+
461
+ :host::before {
462
+ height: var(--lumo-text-field-size);
463
+ box-sizing: border-box;
464
+ display: inline-flex;
465
+ align-items: center;
466
+ }
467
+
468
+ :host([focused]:not([readonly])) [part='label'] {
469
+ color: var(--lumo-primary-text-color);
470
+ }
471
+
472
+ :host([focused]) [part='input-field'] ::slotted(:is(input, textarea)) {
473
+ -webkit-mask-image: none;
474
+ mask-image: none;
475
+ }
476
+
477
+ ::slotted(:is(input, textarea):placeholder-shown) {
478
+ color: var(--lumo-secondary-text-color);
479
+ }
480
+
481
+ /* Hover */
482
+ :host(:hover:not([readonly]):not([focused])) [part='label'] {
483
+ color: var(--lumo-body-text-color);
484
+ }
485
+
486
+ :host(:hover:not([readonly]):not([focused])) [part='input-field']::after {
487
+ opacity: 0.1;
488
+ }
489
+
490
+ /* Touch device adjustment */
491
+ @media (pointer: coarse) {
492
+ :host(:hover:not([readonly]):not([focused])) [part='label'] {
493
+ color: var(--lumo-secondary-text-color);
494
+ }
495
+
496
+ :host(:hover:not([readonly]):not([focused])) [part='input-field']::after {
497
+ opacity: 0;
498
+ }
499
+
500
+ :host(:active:not([readonly]):not([focused])) [part='input-field']::after {
501
+ opacity: 0.2;
502
+ }
503
+ }
504
+
505
+ /* Trigger when not focusing using the keyboard */
506
+ :host([focused]:not([focus-ring]):not([readonly])) [part='input-field']::after {
507
+ transform: scaleX(0);
508
+ transition-duration: 0.15s, 1s;
509
+ }
510
+
511
+ /* Focus-ring */
512
+ :host([focus-ring]) [part='input-field'] {
513
+ box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
514
+ }
515
+
516
+ /* Read-only and disabled */
517
+ :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {
518
+ opacity: 0;
519
+ }
520
+
521
+ /* Disabled style */
522
+ :host([disabled]) {
523
+ pointer-events: none;
524
+ }
525
+
526
+ :host([disabled]) [part='label'],
527
+ :host([disabled]) [part='input-field'] ::slotted(*) {
528
+ color: var(--lumo-disabled-text-color);
529
+ -webkit-text-fill-color: var(--lumo-disabled-text-color);
530
+ }
531
+
532
+ /* Invalid style */
533
+ :host([invalid][focus-ring]) [part='input-field'] {
534
+ box-shadow: 0 0 0 2px var(--lumo-error-color-50pct);
535
+ }
536
+
537
+ :host([input-prevented]) [part='input-field'] {
538
+ animation: shake 0.15s infinite;
539
+ }
540
+
541
+ @keyframes shake {
542
+ 25% {
543
+ transform: translateX(4px);
544
+ }
545
+ 75% {
546
+ transform: translateX(-4px);
547
+ }
548
+ }
549
+
550
+ /* Small theme */
551
+ :host([theme~='small']) {
552
+ font-size: var(--lumo-font-size-s);
553
+ --lumo-text-field-size: var(--lumo-size-s);
554
+ }
555
+
556
+ :host([theme~='small']) [part='label'] {
557
+ font-size: var(--lumo-font-size-xs);
558
+ }
559
+
560
+ :host([theme~='small']) [part='error-message'] {
561
+ font-size: var(--lumo-font-size-xxs);
562
+ }
563
+
564
+ /* Slotted content */
565
+ [part='input-field'] ::slotted(:not(vaadin-icon):not(input):not(textarea)) {
566
+ color: var(--lumo-secondary-text-color);
567
+ font-weight: 400;
568
+ }
569
+
570
+ [part='clear-button']::before {
571
+ content: var(--lumo-icons-cross);
572
+ }
573
+ `,l=[s,i.q,a,n];(0,o.hC)("",l,{moduleId:"lumo-input-field-shared-styles"})}}]);
@@ -15,9 +15,3 @@
15
15
  * Copyright (c) 2021 - 2023 Vaadin Ltd..
16
16
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
17
17
  */
18
-
19
- /**
20
- * @license
21
- * Copyright (c) 2022 - 2023 Vaadin Ltd.
22
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
23
- */
@@ -0,0 +1,2 @@
1
+ /*! For license information please see 422.js.LICENSE.txt */
2
+ "use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[422],{422:(e,t,a)=>{a.d(t,{j:()=>u});var s=a(2006);const u=e=>class extends((0,s.L)(e)){static get properties(){return{autocomplete:{type:String},autocorrect:{type:String},autocapitalize:{type:String,reflectToAttribute:!0}}}static get delegateAttrs(){return[...super.delegateAttrs,"autocapitalize","autocomplete","autocorrect"]}get __data(){return this.__dataValue||{}}set __data(e){this.__dataValue=e}_inputElementChanged(e){super._inputElementChanged(e),e&&(e.value&&e.value!==this.value&&(console.warn(`Please define value on the <${this.localName}> component!`),e.value=""),this.value&&(e.value=this.value))}_setFocused(e){super._setFocused(e),e||this.validate()}_onInput(e){super._onInput(e),this.invalid&&this.validate()}_valueChanged(e,t){super._valueChanged(e,t),void 0!==t&&this.invalid&&this.validate()}}}}]);
@@ -0,0 +1,5 @@
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
@@ -0,0 +1,19 @@
1
+ /*! For license information please see 437.js.LICENSE.txt */
2
+ "use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[437],{9437:(e,t,i)=>{i(8725);var l=i(2279),a=i(5128);const d=a.iv`
3
+ :host([dir='rtl']) [part='input-field'] ::slotted(input) {
4
+ --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);
5
+ }
6
+
7
+ :host([dir='rtl']) [part='input-field'] ::slotted(input:placeholder-shown) {
8
+ --_lumo-text-field-overflow-mask-image: none;
9
+ }
10
+ `;(0,a.hC)("vaadin-email-field",[l.J,d],{moduleId:"lumo-email-field"});var n=i(8005);const s=i(9897).iv`
11
+ :host([dir='rtl']) [part='input-field'] {
12
+ direction: ltr;
13
+ }
14
+
15
+ :host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {
16
+ direction: rtl;
17
+ text-align: left;
18
+ }
19
+ `;(0,a.hC)("vaadin-email-field",s,{moduleId:"vaadin-email-field-styles"});class r extends n.n{static get is(){return"vaadin-email-field"}constructor(){super(),this._setType("email"),this.pattern="^([a-zA-Z0-9_\\.\\-+])+@[a-zA-Z0-9-.]+\\.[a-zA-Z0-9-]{2,}$"}ready(){super.ready(),this.inputElement&&(this.inputElement.autocapitalize="off")}}customElements.define("vaadin-email-field",r)}}]);
@@ -0,0 +1,5 @@
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
@@ -0,0 +1 @@
1
+ "use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[513],{4513:(e,s,c)=>{c(4750),c(7078)}}]);