@descope/web-components-ui 1.0.177 → 1.0.179

Sign up to get free protection for your applications and to get access to all the features.
Files changed (39) hide show
  1. package/dist/cjs/index.cjs.js +1082 -687
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +1166 -772
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/umd/1000.js +1 -1
  6. package/dist/umd/2481.js +1 -1
  7. package/dist/umd/descope-button-index-js.js +1 -1
  8. package/dist/umd/descope-combo-box-index-js.js +1 -1
  9. package/dist/umd/descope-date-picker-index-js.js +1 -1
  10. package/dist/umd/descope-email-field-index-js.js +1 -1
  11. package/dist/umd/descope-number-field-index-js.js +1 -1
  12. package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +1 -1
  13. package/dist/umd/descope-passcode-index-js.js +1 -1
  14. package/dist/umd/descope-single-select-descope-select-item-index-js.js +1 -0
  15. package/dist/umd/descope-single-select-descope-single-select-internal-index-js.js +1 -0
  16. package/dist/umd/descope-single-select-index-js.js +1 -0
  17. package/dist/umd/descope-upload-file-index-js.js +1 -1
  18. package/dist/umd/index.js +1 -1
  19. package/package.json +4 -4
  20. package/src/components/descope-button/ButtonClass.js +1 -1
  21. package/src/components/descope-combo-box/ComboBoxClass.js +1 -1
  22. package/src/components/descope-date-picker/index.js +1 -1
  23. package/src/components/descope-email-field/EmailFieldClass.js +2 -2
  24. package/src/components/descope-number-field/NumberFieldClass.js +1 -1
  25. package/src/components/descope-passcode/PasscodeClass.js +1 -1
  26. package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js +0 -4
  27. package/src/components/descope-password/PasswordClass.js +2 -2
  28. package/src/components/descope-single-select/SingleSelectClass.js +130 -0
  29. package/src/components/descope-single-select/descope-select-item/SelectItemClass.js +102 -0
  30. package/src/components/descope-single-select/descope-select-item/index.js +6 -0
  31. package/src/components/descope-single-select/descope-single-select-internal/SingleSelectInternalClass.js +137 -0
  32. package/src/components/descope-single-select/descope-single-select-internal/index.js +6 -0
  33. package/src/components/descope-single-select/index.js +6 -0
  34. package/src/index.cjs.js +3 -0
  35. package/src/index.js +2 -0
  36. package/src/mixins/createProxy.js +7 -2
  37. package/src/theme/components/index.js +4 -0
  38. package/src/theme/components/single-select/selectItem.js +27 -0
  39. package/src/theme/components/single-select/singleSelect.js +19 -0
@@ -0,0 +1,102 @@
1
+ import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../../mixins';
2
+ import { createBaseClass } from '../../../baseClasses/createBaseClass';
3
+ import { compose } from '../../../helpers';
4
+ import { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';
5
+ import { ButtonClass } from '../../descope-button/ButtonClass';
6
+
7
+ export const componentName = getComponentName('select-item');
8
+
9
+ class RawSelectItem extends createBaseClass({
10
+ componentName,
11
+ baseSelector: ':host > descope-button',
12
+ }) {
13
+ get size() {
14
+ return this.getAttribute('size') || 'md';
15
+ }
16
+
17
+ get variant() {
18
+ return this.getAttribute('variant') || 'contained';
19
+ }
20
+
21
+ get value() {
22
+ return this.getAttribute('value') || '';
23
+ }
24
+
25
+ set value(value) {
26
+ this.setAttribute('value', value);
27
+ }
28
+
29
+ constructor() {
30
+ super();
31
+
32
+ this.attachShadow({ mode: 'open' }).innerHTML = `
33
+ <style>
34
+ descope-button {
35
+ max-width: 100%;
36
+ }
37
+ descope-button > slot {
38
+ width: 100%;
39
+ overflow: hidden;
40
+ text-overflow: ellipsis;
41
+ display: inline-block;
42
+ }
43
+ :host {
44
+ display: inline-block;
45
+ max-width: 100%
46
+ }
47
+ </style>
48
+ <descope-button variant="${this.variant}" size="${this.size}" mode="primary">
49
+ <slot></slot>
50
+ </descope-button>
51
+ `;
52
+
53
+ forwardAttrs(this, this.baseElement, { includeAttrs: ['size', 'variant'] });
54
+ }
55
+
56
+ handleFocus() {
57
+ this.shadowRoot.querySelector('descope-button')?.focus();
58
+ }
59
+
60
+ focus() {
61
+ this.handleFocus();
62
+ }
63
+
64
+ init() {
65
+ super.init();
66
+ this.addEventListener('focus', (e) => {
67
+ // we want to ignore focus events we are dispatching
68
+ if (e.isTrusted) {
69
+ this.handleFocus();
70
+ }
71
+ });
72
+ }
73
+ }
74
+
75
+ export const SelectItemClass = compose(
76
+ createStyleMixin({
77
+ mappings: {
78
+ backgroundColor: {
79
+ selector: () => ButtonClass.componentName,
80
+ property: ButtonClass.cssVarList.backgroundColor,
81
+ },
82
+ labelTextColor: {
83
+ selector: () => ButtonClass.componentName,
84
+ property: ButtonClass.cssVarList.labelTextColor,
85
+ },
86
+ borderColor: {
87
+ selector: () => ButtonClass.componentName,
88
+ property: ButtonClass.cssVarList.borderColor,
89
+ },
90
+ borderStyle: {
91
+ selector: () => ButtonClass.componentName,
92
+ property: ButtonClass.cssVarList.borderStyle,
93
+ },
94
+ borderRadius: {
95
+ selector: () => ButtonClass.componentName,
96
+ property: ButtonClass.cssVarList.borderRadius,
97
+ },
98
+ },
99
+ }),
100
+ draggableMixin,
101
+ componentNameValidationMixin
102
+ )(RawSelectItem);
@@ -0,0 +1,6 @@
1
+ import { componentName, SelectItemClass } from './SelectItemClass';
2
+ import '../../descope-button';
3
+
4
+ customElements.define(componentName, SelectItemClass);
5
+
6
+ export { SelectItemClass };
@@ -0,0 +1,137 @@
1
+ import { createBaseInputClass } from '../../../baseClasses/createBaseInputClass';
2
+ import {
3
+ getComponentName,
4
+ observeAttributes,
5
+ observeChildren,
6
+ } from '../../../helpers/componentHelpers';
7
+ import { createDispatchEvent } from '../../../helpers/mixinsHelpers';
8
+
9
+ export const componentName = getComponentName('single-select-internal');
10
+
11
+ export class SingleSelectInternalClass extends createBaseInputClass({
12
+ componentName,
13
+ baseSelector: 'slot',
14
+ }) {
15
+ constructor() {
16
+ super();
17
+
18
+ this.innerHTML = `
19
+ <style>
20
+ slot {
21
+ box-sizing: border-box;
22
+ width: 100%;
23
+ display: flex;
24
+ flex-wrap: wrap;
25
+ }
26
+ </style>
27
+ <slot part="wrapper"></slot>
28
+ `;
29
+ }
30
+
31
+ #dispatchChange = createDispatchEvent.bind(this, 'change');
32
+
33
+ get items() {
34
+ return this.querySelector('slot').assignedElements();
35
+ }
36
+
37
+ get isReadonly() {
38
+ return this.getAttribute('readonly') === 'true';
39
+ }
40
+
41
+ getSelectedNode() {
42
+ return this.items.find((item) => item.hasAttribute('selected'));
43
+ }
44
+
45
+ get size() {
46
+ return this.getAttribute('size') || 'md';
47
+ }
48
+
49
+ removeSelected() {
50
+ this.getSelectedNode()?.removeAttribute('selected');
51
+ }
52
+
53
+ onNodeClick(e) {
54
+ if (!this.isReadonly) {
55
+ this.setSelected(e.target);
56
+ this.#dispatchChange();
57
+ }
58
+ }
59
+
60
+ setSelected(node) {
61
+ if (node !== this.getSelectedNode()) {
62
+ this.removeSelected();
63
+ node?.setAttribute('selected', 'true');
64
+ }
65
+ }
66
+
67
+ get value() {
68
+ return this.getSelectedNode()?.value;
69
+ }
70
+
71
+ set value(value) {
72
+ const node = this.items.find((child) => child.value === value);
73
+ this.setSelected(node);
74
+ }
75
+
76
+ get defaultValue() {
77
+ return this.getAttribute('default-value');
78
+ }
79
+
80
+ setDefaultValue() {
81
+ // we want to defer this action until all attributes are synched
82
+ setTimeout(() => {
83
+ if (this.defaultValue) {
84
+ this.value = this.defaultValue;
85
+ this.setCustomValidity();
86
+ }
87
+ });
88
+ }
89
+
90
+ onSizeChange() {
91
+ this.items.forEach((item) => {
92
+ item.setAttribute('size', this.size);
93
+ });
94
+ }
95
+
96
+ getValidity() {
97
+ if (this.isRequired && !this.value) {
98
+ return { valueMissing: true };
99
+ }
100
+
101
+ return {};
102
+ }
103
+
104
+ onObservedAttributeChange(attrs) {
105
+ attrs.forEach((attr) => {
106
+ switch (attr) {
107
+ case 'size':
108
+ this.onSizeChange();
109
+ break;
110
+ default:
111
+ break;
112
+ }
113
+ });
114
+ }
115
+
116
+ init() {
117
+ // we are adding listeners before calling to super because it's stopping the events
118
+ this.addEventListener('focus', (e) => {
119
+ // we want to ignore focus events we are dispatching
120
+ if (e.isTrusted) {
121
+ this.items[0].focus();
122
+ }
123
+ });
124
+
125
+ super.init?.();
126
+ this.setDefaultValue();
127
+
128
+ observeAttributes(this, this.onObservedAttributeChange.bind(this), { includeAttrs: ['size'] });
129
+
130
+ observeChildren(this, ({ addedNodes }) => {
131
+ addedNodes.forEach((node) => {
132
+ node.addEventListener('click', this.onNodeClick.bind(this));
133
+ node.setAttribute('size', this.size);
134
+ });
135
+ });
136
+ }
137
+ }
@@ -0,0 +1,6 @@
1
+ import { componentName, SingleSelectInternalClass } from './SingleSelectInternalClass';
2
+ import '../../descope-button';
3
+
4
+ customElements.define(componentName, SingleSelectInternalClass);
5
+
6
+ export { SingleSelectInternalClass };
@@ -0,0 +1,6 @@
1
+ import { componentName, SingleSelectClass } from './SingleSelectClass';
2
+ import './descope-single-select-internal';
3
+
4
+ customElements.define(componentName, SingleSelectClass);
5
+
6
+ export { SingleSelectClass };
package/src/index.cjs.js CHANGED
@@ -26,3 +26,6 @@ export { PhoneFieldClass } from './components/phone-fields/descope-phone-field/P
26
26
  export { PhoneFieldInputBoxClass } from './components/phone-fields/descope-phone-input-box-field/PhoneFieldInputBoxClass';
27
27
  export { NewPasswordClass } from './components/descope-new-password/NewPasswordClass';
28
28
  export { RecaptchaClass } from './components/descope-recaptcha/RecaptchaClass';
29
+ export { UploadFileClass } from './components/descope-upload-file/UploadFileClass';
30
+ export { SingleSelectClass } from './components/descope-single-select/SingleSelectClass';
31
+ export { SelectItemClass } from './components/descope-single-select/descope-select-item/SelectItemClass';
package/src/index.js CHANGED
@@ -22,6 +22,8 @@ export * from './components/phone-fields/descope-phone-input-box-field';
22
22
  export * from './components/descope-new-password';
23
23
  export * from './components/descope-recaptcha';
24
24
  export * from './components/descope-upload-file';
25
+ export * from './components/descope-single-select';
26
+ export * from './components/descope-single-select/descope-select-item';
25
27
 
26
28
  export {
27
29
  globalsThemeToStyle,
@@ -21,8 +21,13 @@ export const createProxy = ({
21
21
  super().attachShadow({ mode: 'open', delegatesFocus: true }).innerHTML = `
22
22
  <style id="create-proxy">${isFunction(style) ? style() : style}</style>
23
23
  <${wrappedEleName}>
24
- <slot></slot>
25
- ${slots.map((slot) => `<slot name="${slot}" slot="${slot}"></slot>`).join('')}
24
+ ${slots
25
+ .map(
26
+ (
27
+ slot // when slot is an empty string, we will create the default slot (without a name)
28
+ ) => `<slot ${slot ? `name="${slot}" slot="${slot}"` : ''} ></slot>`
29
+ )
30
+ .join('')}
26
31
  </${wrappedEleName}>
27
32
  `;
28
33
  }
@@ -21,6 +21,8 @@ import * as phoneInputBoxField from './phoneInputBoxField';
21
21
  import * as newPassword from './newPassword';
22
22
  import * as inputWrapper from './inputWrapper';
23
23
  import * as uploadFile from './uploadFile';
24
+ import * as selectItem from './single-select/selectItem';
25
+ import * as singleSelect from './single-select/singleSelect';
24
26
 
25
27
  const components = {
26
28
  button,
@@ -47,6 +49,8 @@ const components = {
47
49
  newPassword,
48
50
  inputWrapper,
49
51
  uploadFile,
52
+ selectItem,
53
+ singleSelect,
50
54
  };
51
55
 
52
56
  const theme = Object.keys(components).reduce(
@@ -0,0 +1,27 @@
1
+ import { SelectItemClass } from '../../../components/descope-single-select/descope-select-item/SelectItemClass';
2
+ import { getThemeRefs } from '../../../helpers/themeHelpers';
3
+ import globals from '../../globals';
4
+
5
+ const globalRefs = getThemeRefs(globals);
6
+
7
+ export const vars = SelectItemClass.cssVarList;
8
+
9
+ const selectItem = {
10
+ [vars.backgroundColor]: globalRefs.colors.surface.light,
11
+ [vars.labelTextColor]: globalRefs.colors.surface.contrast,
12
+ [vars.borderColor]: globalRefs.colors.surface.main,
13
+ [vars.borderStyle]: 'solid',
14
+ [vars.borderRadius]: globalRefs.radius.sm,
15
+
16
+ _hover: {
17
+ [vars.backgroundColor]: '#f4f5f5', // can we take it from the palette?
18
+ },
19
+
20
+ _selected: {
21
+ [vars.borderColor]: globalRefs.colors.surface.contrast,
22
+ [vars.backgroundColor]: globalRefs.colors.surface.contrast,
23
+ [vars.labelTextColor]: globalRefs.colors.surface.light,
24
+ },
25
+ };
26
+
27
+ export default selectItem;
@@ -0,0 +1,19 @@
1
+ import { SingleSelectClass } from '../../../components/descope-single-select/SingleSelectClass';
2
+ import { getThemeRefs } from '../../../helpers/themeHelpers';
3
+ import globals from '../../globals';
4
+ import { refs } from '../inputWrapper';
5
+
6
+ const globalRefs = getThemeRefs(globals);
7
+ const vars = SingleSelectClass.cssVarList;
8
+
9
+ const singleSelect = {
10
+ [vars.fontFamily]: refs.fontFamily,
11
+ [vars.labelTextColor]: refs.labelTextColor,
12
+ [vars.labelRequiredIndicator]: refs.requiredIndicator,
13
+ [vars.errorMessageTextColor]: refs.errorMessageTextColor,
14
+ [vars.itemsSpacing]: globalRefs.spacing.sm,
15
+ [vars.hostWidth]: refs.width,
16
+ };
17
+
18
+ export default singleSelect;
19
+ export { vars };