@jaak.ai/stamps 1.0.0-dev.9 → 2.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (162) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +470 -390
  3. package/dist/cjs/index-DGM9-FNg.js +1402 -0
  4. package/dist/cjs/index-DGM9-FNg.js.map +1 -0
  5. package/dist/cjs/index.cjs.js +3 -0
  6. package/dist/cjs/index.cjs.js.map +1 -0
  7. package/dist/cjs/jaak-stamps-webcomponent.cjs.js +27 -0
  8. package/dist/cjs/jaak-stamps-webcomponent.cjs.js.map +1 -0
  9. package/dist/cjs/jaak-stamps.cjs.entry.js +925 -0
  10. package/dist/cjs/jaak-stamps.cjs.entry.js.map +1 -0
  11. package/dist/cjs/jaak-stamps.entry.cjs.js.map +1 -0
  12. package/dist/cjs/loader.cjs.js +8 -15
  13. package/dist/cjs/loader.cjs.js.map +1 -0
  14. package/dist/collection/collection-manifest.json +3 -22
  15. package/dist/collection/components/my-component/my-component.css +530 -0
  16. package/dist/collection/components/my-component/my-component.js +1162 -0
  17. package/dist/collection/components/my-component/my-component.js.map +1 -0
  18. package/dist/collection/index.js +2 -1
  19. package/dist/collection/index.js.map +1 -0
  20. package/dist/collection/utils/utils.js +4 -0
  21. package/dist/collection/utils/utils.js.map +1 -0
  22. package/dist/components/index.d.ts +33 -0
  23. package/dist/components/index.js +1195 -0
  24. package/dist/components/index.js.map +1 -0
  25. package/dist/components/jaak-stamps.d.ts +11 -0
  26. package/dist/components/jaak-stamps.js +971 -0
  27. package/dist/components/jaak-stamps.js.map +1 -0
  28. package/dist/esm/index-DqoVMnc7.js +1393 -0
  29. package/dist/esm/index-DqoVMnc7.js.map +1 -0
  30. package/dist/esm/index.js +3 -0
  31. package/dist/esm/index.js.map +1 -0
  32. package/dist/esm/jaak-stamps-webcomponent.js +23 -0
  33. package/dist/esm/jaak-stamps-webcomponent.js.map +1 -0
  34. package/dist/esm/jaak-stamps.entry.js +923 -0
  35. package/dist/esm/jaak-stamps.entry.js.map +1 -0
  36. package/dist/esm/loader.js +9 -14
  37. package/dist/esm/loader.js.map +1 -0
  38. package/dist/jaak-stamps-webcomponent/index.esm.js +2 -0
  39. package/dist/jaak-stamps-webcomponent/index.esm.js.map +1 -0
  40. package/dist/jaak-stamps-webcomponent/jaak-stamps-webcomponent.esm.js +2 -0
  41. package/dist/jaak-stamps-webcomponent/jaak-stamps-webcomponent.esm.js.map +1 -0
  42. package/dist/jaak-stamps-webcomponent/jaak-stamps.entry.esm.js.map +1 -0
  43. package/dist/jaak-stamps-webcomponent/loader.esm.js.map +1 -0
  44. package/dist/jaak-stamps-webcomponent/p-DqoVMnc7.js +3 -0
  45. package/dist/jaak-stamps-webcomponent/p-DqoVMnc7.js.map +1 -0
  46. package/dist/jaak-stamps-webcomponent/p-dd6cc14e.entry.js +2 -0
  47. package/dist/jaak-stamps-webcomponent/p-dd6cc14e.entry.js.map +1 -0
  48. package/dist/types/components/my-component/my-component.d.ts +119 -0
  49. package/dist/types/components.d.ts +50 -1353
  50. package/dist/types/index.d.ts +10 -1
  51. package/dist/types/stencil-public-runtime.d.ts +93 -28
  52. package/dist/types/utils/utils.d.ts +1 -0
  53. package/loader/cdn.js +1 -3
  54. package/loader/index.cjs.js +1 -3
  55. package/loader/index.d.ts +5 -2
  56. package/loader/index.es2017.js +1 -3
  57. package/loader/index.js +1 -3
  58. package/package.json +22 -26
  59. package/dist/cjs/document-detector_19.cjs.entry.js +0 -8540
  60. package/dist/cjs/index-5e4e5e7d.js +0 -1685
  61. package/dist/cjs/mb-tooltip.cjs.entry.js +0 -26
  62. package/dist/cjs/stamps.cjs.js +0 -23
  63. package/dist/collection/components/document-detector/document-detector.css +0 -156
  64. package/dist/collection/components/document-detector/document-detector.js +0 -416
  65. package/dist/collection/components/shared/mb-api-process-status/mb-api-process-status.css +0 -360
  66. package/dist/collection/components/shared/mb-api-process-status/mb-api-process-status.js +0 -124
  67. package/dist/collection/components/shared/mb-button/mb-button.css +0 -95
  68. package/dist/collection/components/shared/mb-button/mb-button.js +0 -201
  69. package/dist/collection/components/shared/mb-button-classic/mb-button-classic.css +0 -100
  70. package/dist/collection/components/shared/mb-button-classic/mb-button-classic.js +0 -130
  71. package/dist/collection/components/shared/mb-camera-experience/mb-camera-experience.css +0 -740
  72. package/dist/collection/components/shared/mb-camera-experience/mb-camera-experience.js +0 -827
  73. package/dist/collection/components/shared/mb-camera-experience/mb-camera-experience.utils.js +0 -55
  74. package/dist/collection/components/shared/mb-camera-selection/mb-camera-selection.css +0 -124
  75. package/dist/collection/components/shared/mb-camera-selection/mb-camera-selection.js +0 -194
  76. package/dist/collection/components/shared/mb-camera-toolbar/mb-camera-toolbar.css +0 -80
  77. package/dist/collection/components/shared/mb-camera-toolbar/mb-camera-toolbar.js +0 -275
  78. package/dist/collection/components/shared/mb-completed/mb-completed.css +0 -17
  79. package/dist/collection/components/shared/mb-completed/mb-completed.js +0 -48
  80. package/dist/collection/components/shared/mb-component/mb-component.css +0 -321
  81. package/dist/collection/components/shared/mb-component/mb-component.js +0 -2269
  82. package/dist/collection/components/shared/mb-component/mb-component.utils.js +0 -14
  83. package/dist/collection/components/shared/mb-container/mb-container.css +0 -7
  84. package/dist/collection/components/shared/mb-container/mb-container.js +0 -23
  85. package/dist/collection/components/shared/mb-feedback/mb-feedback.css +0 -36
  86. package/dist/collection/components/shared/mb-feedback/mb-feedback.js +0 -91
  87. package/dist/collection/components/shared/mb-feedback/mb-feedback.utils.js +0 -11
  88. package/dist/collection/components/shared/mb-help/mb-help.css +0 -191
  89. package/dist/collection/components/shared/mb-help/mb-help.js +0 -409
  90. package/dist/collection/components/shared/mb-help/mb-help.model.js +0 -5
  91. package/dist/collection/components/shared/mb-image-box/mb-image-box.css +0 -78
  92. package/dist/collection/components/shared/mb-image-box/mb-image-box.js +0 -150
  93. package/dist/collection/components/shared/mb-modal/mb-modal.css +0 -106
  94. package/dist/collection/components/shared/mb-modal/mb-modal.js +0 -239
  95. package/dist/collection/components/shared/mb-overlay/mb-overlay.css +0 -46
  96. package/dist/collection/components/shared/mb-overlay/mb-overlay.js +0 -76
  97. package/dist/collection/components/shared/mb-progress-tracker/mb-progress-tracker.css +0 -24
  98. package/dist/collection/components/shared/mb-progress-tracker/mb-progress-tracker.js +0 -80
  99. package/dist/collection/components/shared/mb-screen/mb-screen.css +0 -19
  100. package/dist/collection/components/shared/mb-screen/mb-screen.js +0 -48
  101. package/dist/collection/components/shared/mb-spinner/mb-spinner.css +0 -30
  102. package/dist/collection/components/shared/mb-spinner/mb-spinner.js +0 -67
  103. package/dist/collection/components/shared/mb-tooltip/mb-tooltip.css +0 -62
  104. package/dist/collection/components/shared/mb-tooltip/mb-tooltip.js +0 -150
  105. package/dist/collection/components/shared/mb-tooltip-advanced/mb-tooltip-advanced.css +0 -91
  106. package/dist/collection/components/shared/mb-tooltip-advanced/mb-tooltip-advanced.js +0 -96
  107. package/dist/collection/utils/data-structures.js +0 -189
  108. package/dist/collection/utils/device.helpers.js +0 -37
  109. package/dist/collection/utils/error-structures.js +0 -47
  110. package/dist/collection/utils/generic.helpers.js +0 -82
  111. package/dist/collection/utils/sdk.service.js +0 -943
  112. package/dist/collection/utils/state-lifter.js +0 -3
  113. package/dist/collection/utils/status.document-detector.js +0 -15
  114. package/dist/collection/utils/translation.service.js +0 -97
  115. package/dist/esm/document-detector_19.entry.js +0 -8518
  116. package/dist/esm/index-dc740acb.js +0 -1656
  117. package/dist/esm/mb-tooltip.entry.js +0 -22
  118. package/dist/esm/polyfills/core-js.js +0 -11
  119. package/dist/esm/polyfills/css-shim.js +0 -1
  120. package/dist/esm/polyfills/dom.js +0 -79
  121. package/dist/esm/polyfills/es5-html-element.js +0 -1
  122. package/dist/esm/polyfills/index.js +0 -34
  123. package/dist/esm/polyfills/system.js +0 -6
  124. package/dist/esm/stamps.js +0 -18
  125. package/dist/stamps/index.esm.js +0 -0
  126. package/dist/stamps/p-7f07a434.js +0 -2
  127. package/dist/stamps/p-ec3f5972.entry.js +0 -1
  128. package/dist/stamps/p-f4015454.entry.js +0 -9
  129. package/dist/stamps/stamps.esm.js +0 -1
  130. package/dist/types/components/document-detector/document-detector.d.ts +0 -86
  131. package/dist/types/components/shared/mb-api-process-status/mb-api-process-status.d.ts +0 -30
  132. package/dist/types/components/shared/mb-button/mb-button.d.ts +0 -41
  133. package/dist/types/components/shared/mb-button-classic/mb-button-classic.d.ts +0 -27
  134. package/dist/types/components/shared/mb-camera-experience/mb-camera-experience.d.ts +0 -141
  135. package/dist/types/components/shared/mb-camera-experience/mb-camera-experience.utils.d.ts +0 -3
  136. package/dist/types/components/shared/mb-camera-selection/mb-camera-selection.d.ts +0 -33
  137. package/dist/types/components/shared/mb-camera-toolbar/mb-camera-toolbar.d.ts +0 -54
  138. package/dist/types/components/shared/mb-completed/mb-completed.d.ts +0 -12
  139. package/dist/types/components/shared/mb-component/mb-component.d.ts +0 -308
  140. package/dist/types/components/shared/mb-component/mb-component.utils.d.ts +0 -3
  141. package/dist/types/components/shared/mb-container/mb-container.d.ts +0 -8
  142. package/dist/types/components/shared/mb-feedback/mb-feedback.d.ts +0 -19
  143. package/dist/types/components/shared/mb-feedback/mb-feedback.utils.d.ts +0 -2
  144. package/dist/types/components/shared/mb-help/mb-help.d.ts +0 -66
  145. package/dist/types/components/shared/mb-help/mb-help.model.d.ts +0 -9
  146. package/dist/types/components/shared/mb-image-box/mb-image-box.d.ts +0 -35
  147. package/dist/types/components/shared/mb-modal/mb-modal.d.ts +0 -53
  148. package/dist/types/components/shared/mb-overlay/mb-overlay.d.ts +0 -17
  149. package/dist/types/components/shared/mb-progress-tracker/mb-progress-tracker.d.ts +0 -19
  150. package/dist/types/components/shared/mb-screen/mb-screen.d.ts +0 -12
  151. package/dist/types/components/shared/mb-spinner/mb-spinner.d.ts +0 -16
  152. package/dist/types/components/shared/mb-tooltip/mb-tooltip.d.ts +0 -10
  153. package/dist/types/components/shared/mb-tooltip-advanced/mb-tooltip-advanced.d.ts +0 -7
  154. package/dist/types/utils/data-structures.d.ts +0 -264
  155. package/dist/types/utils/device.helpers.d.ts +0 -7
  156. package/dist/types/utils/error-structures.d.ts +0 -44
  157. package/dist/types/utils/generic.helpers.d.ts +0 -21
  158. package/dist/types/utils/sdk.service.d.ts +0 -52
  159. package/dist/types/utils/state-lifter.d.ts +0 -3
  160. package/dist/types/utils/status.document-detector.d.ts +0 -14
  161. package/dist/types/utils/translation.service.d.ts +0 -77
  162. package/loader/package.json +0 -11
@@ -1,5 +0,0 @@
1
- export const DEFEAULT_MB_HELP_ALLOW = false;
2
- export const DEFEAULT_MB_HELP_ALLOW_LOBBY = false;
3
- export const DEFEAULT_MB_HELP_ALLOW_ONBOARDING = false;
4
- export const DEFEAULT_MB_HELP_ALLOW_ONBOARDING_PERPETUITY = false;
5
- export const DEFAULT_MB_HELP_TOOLTOP_PAUSE_TIMEOUT_MS = 15000;
@@ -1,78 +0,0 @@
1
- /**
2
- * Copyright (c) Microblink Ltd. All rights reserved.
3
- *
4
- * SASS variables, not customizable via CSS variables
5
- */
6
- /**
7
- * Camera experiences
8
- */
9
- :host {
10
- display: block;
11
- padding: 8px;
12
- border: var(--mb-component-image-box-border-width) solid var(--mb-component-image-box-border-color);
13
- border-radius: var(--mb-component-image-box-border-radius);
14
- max-width: 100%;
15
- }
16
- :host .label {
17
- margin: 0;
18
- padding: 0 0 4px 0;
19
- height: var(--mb-component-image-box-label-height);
20
- line-height: var(--mb-component-image-box-label-height);
21
- color: var(--mb-component-image-box-label-color);
22
- white-space: nowrap;
23
- overflow: hidden;
24
- text-overflow: ellipsis;
25
- font-family: var(--mb-font-family);
26
- font-size: var(--mb-component-image-box-label-font-size);
27
- font-weight: var(--mb-component-image-box-label-font-weight);
28
- }
29
- :host .cta {
30
- all: unset;
31
- box-sizing: border-box;
32
- display: flex;
33
- height: var(--mb-component-image-box-cta-height);
34
- max-width: 100%;
35
- color: var(--mb-component-image-box-cta-color);
36
- text-decoration: none;
37
- font-family: var(--mb-font-family);
38
- font-size: var(--mb-component-image-box-cta-font-size);
39
- font-weight: var(--mb-component-image-box-cta-font-weight);
40
- cursor: pointer;
41
- }
42
- :host .cta:hover {
43
- color: var(--mb-component-image-box-cta-color-hover);
44
- }
45
- :host .cta .cta-label,
46
- :host .cta .cta-label {
47
- max-width: calc(100% - 28px);
48
- height: var(--mb-component-image-box-cta-label-height);
49
- line-height: var(--mb-component-image-box-cta-label-height);
50
- margin: 0;
51
- padding: 0 8px 0 0;
52
- }
53
- :host .cta .cta-label.filename,
54
- :host .cta .cta-label.filename {
55
- padding: 0;
56
- color: var(--mb-component-image-box-file-color);
57
- font-weight: var(--mb-component-image-box-file-font-weight);
58
- text-overflow: ellipsis;
59
- overflow: hidden;
60
- white-space: nowrap;
61
- }
62
- :host .cta svg {
63
- display: none;
64
- width: 20px;
65
- height: 20px;
66
- margin: 0;
67
- }
68
- :host .cta svg.visible {
69
- display: inline-block;
70
- }
71
-
72
- :host input[type=file] {
73
- position: absolute;
74
- width: 0;
75
- height: 0;
76
- opacity: 0;
77
- clip: rect(1px, 1px, 1px, 1px);
78
- }
@@ -1,150 +0,0 @@
1
- import { Host, h, } from "@stencil/core";
2
- import { setWebComponentParts, extractFilenameFromPath, } from "../../../utils/generic.helpers";
3
- export class MbImageBox {
4
- constructor() {
5
- this.hasImage = false;
6
- this.boxTitle = undefined;
7
- this.anchorText = undefined;
8
- }
9
- componentDidLoad() {
10
- setWebComponentParts(this.hostEl);
11
- }
12
- componentDidRender() {
13
- this.ctaLabel.innerText = this.anchorText;
14
- }
15
- /**
16
- * Clear input image.
17
- */
18
- async clear() {
19
- this.onClearImage();
20
- }
21
- onFromImageClicked(ev) {
22
- ev.preventDefault();
23
- ev.stopPropagation();
24
- if (this.hasImage) {
25
- this.onClearImage();
26
- }
27
- else {
28
- this.scanFromImageInput.click();
29
- }
30
- }
31
- onImageChange(ev) {
32
- const target = ev.target;
33
- if (target.files && target.files.length) {
34
- this.ctaLabel.innerText = extractFilenameFromPath(target.value);
35
- this.ctaLabel.classList.add("filename");
36
- this.addIcon.classList.remove("visible");
37
- this.removeIcon.classList.add("visible");
38
- this.hasImage = true;
39
- this.imageChange.emit(target.files);
40
- }
41
- else {
42
- this.onClearImage();
43
- }
44
- }
45
- onClearImage() {
46
- this.ctaLabel.innerText = this.anchorText;
47
- this.ctaLabel.classList.remove("filename");
48
- this.addIcon.classList.add("visible");
49
- this.removeIcon.classList.remove("visible");
50
- this.hasImage = false;
51
- this.scanFromImageInput.value = "";
52
- this.imageChange.emit();
53
- }
54
- render() {
55
- return (h(Host, null, h("p", { class: "label" }, this.boxTitle), h("input", { id: "scan-from-image-input", ref: (el) => (this.scanFromImageInput = el), type: "file", accept: "image/*", onChange: (ev) => this.onImageChange(ev) }), h("button", { class: "cta", onClick: (ev) => this.onFromImageClicked(ev) }, h("p", { class: "cta-label", ref: (el) => (this.ctaLabel = el) }), h("svg", { ref: (el) => (this.addIcon = el), class: "visible", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.8333 4.16666C10.8333 3.70642 10.4602 3.33333 9.99992 3.33333C9.53968 3.33333 9.16659 3.70642 9.16659 4.16666V9.16666H4.16659C3.70635 9.16666 3.33325 9.53976 3.33325 10C3.33325 10.4602 3.70635 10.8333 4.16659 10.8333H9.16659V15.8333C9.16659 16.2936 9.53968 16.6667 9.99992 16.6667C10.4602 16.6667 10.8333 16.2936 10.8333 15.8333V10.8333H15.8333C16.2935 10.8333 16.6666 10.4602 16.6666 10C16.6666 9.53976 16.2935 9.16666 15.8333 9.16666H10.8333V4.16666Z", fill: "currentColor" })), h("svg", { ref: (el) => (this.removeIcon = el), width: "21", height: "20", viewBox: "0 0 21 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16.0893 5.58928C16.4147 5.26384 16.4147 4.7362 16.0893 4.41076C15.7638 4.08533 15.2362 4.08533 14.9108 4.41076L10.5 8.82151L6.08928 4.41076C5.76384 4.08533 5.2362 4.08533 4.91076 4.41076C4.58533 4.7362 4.58533 5.26384 4.91076 5.58928L9.32151 10L4.91076 14.4108C4.58533 14.7362 4.58533 15.2638 4.91076 15.5893C5.2362 15.9147 5.76384 15.9147 6.08928 15.5893L10.5 11.1785L14.9108 15.5893C15.2362 15.9147 15.7638 15.9147 16.0893 15.5893C16.4147 15.2638 16.4147 14.7362 16.0893 14.4108L11.6785 10L16.0893 5.58928Z", fill: "currentColor" })))));
56
- }
57
- static get is() { return "mb-image-box"; }
58
- static get encapsulation() { return "shadow"; }
59
- static get originalStyleUrls() {
60
- return {
61
- "$": ["mb-image-box.scss"]
62
- };
63
- }
64
- static get styleUrls() {
65
- return {
66
- "$": ["mb-image-box.css"]
67
- };
68
- }
69
- static get properties() {
70
- return {
71
- "boxTitle": {
72
- "type": "string",
73
- "mutable": false,
74
- "complexType": {
75
- "original": "string",
76
- "resolved": "string",
77
- "references": {}
78
- },
79
- "required": false,
80
- "optional": false,
81
- "docs": {
82
- "tags": [],
83
- "text": "Text which represents name of the image."
84
- },
85
- "attribute": "box-title",
86
- "reflect": false
87
- },
88
- "anchorText": {
89
- "type": "string",
90
- "mutable": false,
91
- "complexType": {
92
- "original": "string",
93
- "resolved": "string",
94
- "references": {}
95
- },
96
- "required": false,
97
- "optional": false,
98
- "docs": {
99
- "tags": [],
100
- "text": "Text which should be displayed inside 'Add image' anchor element when file\nis not selected."
101
- },
102
- "attribute": "anchor-text",
103
- "reflect": false
104
- }
105
- };
106
- }
107
- static get events() {
108
- return [{
109
- "method": "imageChange",
110
- "name": "imageChange",
111
- "bubbles": true,
112
- "cancelable": true,
113
- "composed": true,
114
- "docs": {
115
- "tags": [],
116
- "text": "Event which is triggered when selected image file is changed."
117
- },
118
- "complexType": {
119
- "original": "FileList",
120
- "resolved": "FileList",
121
- "references": {
122
- "FileList": {
123
- "location": "global"
124
- }
125
- }
126
- }
127
- }];
128
- }
129
- static get methods() {
130
- return {
131
- "clear": {
132
- "complexType": {
133
- "signature": "() => Promise<void>",
134
- "parameters": [],
135
- "references": {
136
- "Promise": {
137
- "location": "global"
138
- }
139
- },
140
- "return": "Promise<void>"
141
- },
142
- "docs": {
143
- "text": "Clear input image.",
144
- "tags": []
145
- }
146
- }
147
- };
148
- }
149
- static get elementRef() { return "hostEl"; }
150
- }
@@ -1,106 +0,0 @@
1
- :host {
2
- position: absolute;
3
- top: 0;
4
- left: 0;
5
- right: 0;
6
- bottom: 0;
7
- opacity: 0;
8
- visibility: hidden;
9
- display: flex;
10
- justify-content: center;
11
- align-items: flex-start;
12
- overflow: hidden;
13
- overflow-y: auto;
14
- padding: 24px;
15
- }
16
- :host .mb-modal {
17
- border-radius: var(--mb-modal-border-radius);
18
- display: flex;
19
- flex-direction: column;
20
- padding: 0px;
21
- align-self: center;
22
- position: relative;
23
- max-height: 600px;
24
- max-width: 640px;
25
- width: 100%;
26
- background-color: var(--mb-modal-background);
27
- color: var(--mb-component-font-color);
28
- box-shadow: 0px 25px 50px rgba(31, 41, 55, 0.25);
29
- }
30
- :host .mb-modal .inner {
31
- padding: 24px;
32
- }
33
- :host .mb-modal .footer {
34
- background-color: rgba(116, 116, 128, 0.08);
35
- border-radius: 0px 0px 4px 4px;
36
- display: flex;
37
- flex-direction: column;
38
- align-items: center;
39
- gap: 16px;
40
- max-width: 640px;
41
- max-height: 109px;
42
- }
43
- :host .mb-modal .close-wrapper {
44
- position: absolute;
45
- right: 24px;
46
- top: 24px;
47
- cursor: pointer;
48
- }
49
- :host .mb-modal .close-wrapper svg {
50
- width: 20px;
51
- height: 20px;
52
- }
53
- :host .mb-modal .back-wrapper {
54
- position: absolute;
55
- left: 24px;
56
- top: 20px;
57
- cursor: pointer;
58
- }
59
- :host .mb-modal .back-wrapper svg {
60
- width: 20px;
61
- height: 20px;
62
- }
63
- :host .mb-modal .title {
64
- text-align: center;
65
- font-weight: 400;
66
- font-size: var(--mb-modal-title-font-size);
67
- line-height: var(--mb-modal-title-line-height);
68
- margin-top: 16px;
69
- }
70
- :host .mb-modal .content {
71
- margin: 24px 0;
72
- font-weight: 400;
73
- font-size: var(--mb-modal-content-font-size);
74
- line-height: var(--mb-modal-content-line-height);
75
- }
76
- :host .mb-modal .content.centered {
77
- text-align: center;
78
- }
79
- :host .mb-modal .actions {
80
- display: flex;
81
- justify-content: center;
82
- }
83
- :host .mb-modal .actions button {
84
- width: 126px;
85
- height: 32px;
86
- border-radius: 0;
87
- border: 0;
88
- background: #48b2e8;
89
- color: #ffffff;
90
- cursor: pointer;
91
- }
92
-
93
- :host(.visible) {
94
- visibility: visible;
95
- opacity: 1;
96
- }
97
-
98
- :host(.elevated) .mb-modal {
99
- box-shadow: 0px 2px 24px 0px #0000001a;
100
- box-shadow: 0px 2px 8px 0px #0000000d;
101
- }
102
-
103
- :host(.centered) {
104
- align-items: center;
105
- justify-content: center;
106
- }
@@ -1,239 +0,0 @@
1
- import { Host, h, } from "@stencil/core";
2
- import { getWebComponentParts, setWebComponentParts, classNames, } from "../../../utils/generic.helpers";
3
- export class MbModal {
4
- constructor() {
5
- this.visible = false;
6
- this.elevated = false;
7
- this.centered = false;
8
- this.modalTitle = "";
9
- this.content = "";
10
- this.contentCentered = true;
11
- this.showBackButton = false;
12
- this.hideFooter = false;
13
- this.hideCloseButton = false;
14
- }
15
- componentDidLoad() {
16
- setWebComponentParts(this.hostEl);
17
- const parts = getWebComponentParts(this.hostEl.shadowRoot);
18
- this.hostEl.setAttribute("exportparts", parts.join(", "));
19
- }
20
- render() {
21
- return (h(Host, { class: classNames({
22
- visible: this.visible,
23
- elevated: this.elevated,
24
- centered: this.centered,
25
- }) }, h("div", { class: "mb-modal" }, h("div", { part: "mb-modal-inner", class: "inner" }, this.hideCloseButton ? null : (h("div", { class: "close-wrapper" }, h("div", { class: "close-icon", onClick: () => this.close.emit() }, h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M15.5892 4.41058C15.9147 4.73602 15.9147 5.26366 15.5892 5.58909L5.58925 15.5891C5.26381 15.9145 4.73617 15.9145 4.41073 15.5891C4.0853 15.2637 4.0853 14.736 4.41073 14.4106L14.4107 4.41058C14.7362 4.08514 15.2638 4.08514 15.5892 4.41058Z", fill: "#9CA3AF" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.41073 4.41058C4.73617 4.08514 5.26381 4.08514 5.58925 4.41058L15.5892 14.4106C15.9147 14.736 15.9147 15.2637 15.5892 15.5891C15.2638 15.9145 14.7362 15.9145 14.4107 15.5891L4.41073 5.58909C4.0853 5.26366 4.0853 4.73602 4.41073 4.41058Z", fill: "#9CA3AF" }))))), this.showBackButton ? (h("div", { class: "back-wrapper" }, h("div", { onClick: () => this.back.emit() }, h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.75596 4.41058C10.0814 4.73602 10.0814 5.26366 9.75596 5.58909L6.17855 9.1665H15.8334C16.2936 9.1665 16.6667 9.5396 16.6667 9.99984C16.6667 10.4601 16.2936 10.8332 15.8334 10.8332H6.17855L9.75596 14.4106C10.0814 14.736 10.0814 15.2637 9.75596 15.5891C9.43053 15.9145 8.90289 15.9145 8.57745 15.5891L3.57745 10.5891C3.25201 10.2637 3.25201 9.73602 3.57745 9.41058L3.57799 9.41005L8.57745 4.41058C8.90289 4.08514 9.43053 4.08514 9.75596 4.41058Z", fill: "#9CA3AF" }))))) : null, h("div", { class: "title" }, this.modalTitle), h("div", { class: this.contentCentered ? "centered" : "" }, this.content), h("slot", { name: "content" }), h("div", { class: "actions" }, h("slot", { name: "actionButtons" }))), this.hideFooter ? null : (h("div", { class: "footer" }, h("slot", { name: "footer" }))))));
26
- }
27
- static get is() { return "mb-modal"; }
28
- static get encapsulation() { return "shadow"; }
29
- static get originalStyleUrls() {
30
- return {
31
- "$": ["mb-modal.scss"]
32
- };
33
- }
34
- static get styleUrls() {
35
- return {
36
- "$": ["mb-modal.css"]
37
- };
38
- }
39
- static get properties() {
40
- return {
41
- "visible": {
42
- "type": "boolean",
43
- "mutable": false,
44
- "complexType": {
45
- "original": "boolean",
46
- "resolved": "boolean",
47
- "references": {}
48
- },
49
- "required": false,
50
- "optional": false,
51
- "docs": {
52
- "tags": [],
53
- "text": "Show modal content"
54
- },
55
- "attribute": "visible",
56
- "reflect": false,
57
- "defaultValue": "false"
58
- },
59
- "elevated": {
60
- "type": "boolean",
61
- "mutable": false,
62
- "complexType": {
63
- "original": "boolean",
64
- "resolved": "boolean",
65
- "references": {}
66
- },
67
- "required": false,
68
- "optional": false,
69
- "docs": {
70
- "tags": [],
71
- "text": "Show shadow drop"
72
- },
73
- "attribute": "elevated",
74
- "reflect": false,
75
- "defaultValue": "false"
76
- },
77
- "centered": {
78
- "type": "boolean",
79
- "mutable": false,
80
- "complexType": {
81
- "original": "boolean",
82
- "resolved": "boolean",
83
- "references": {}
84
- },
85
- "required": false,
86
- "optional": false,
87
- "docs": {
88
- "tags": [],
89
- "text": "Center component"
90
- },
91
- "attribute": "centered",
92
- "reflect": false,
93
- "defaultValue": "false"
94
- },
95
- "modalTitle": {
96
- "type": "string",
97
- "mutable": false,
98
- "complexType": {
99
- "original": "string",
100
- "resolved": "string",
101
- "references": {}
102
- },
103
- "required": false,
104
- "optional": false,
105
- "docs": {
106
- "tags": [],
107
- "text": "Passed title content from parent component"
108
- },
109
- "attribute": "modal-title",
110
- "reflect": false,
111
- "defaultValue": "\"\""
112
- },
113
- "content": {
114
- "type": "string",
115
- "mutable": false,
116
- "complexType": {
117
- "original": "string",
118
- "resolved": "string",
119
- "references": {}
120
- },
121
- "required": false,
122
- "optional": false,
123
- "docs": {
124
- "tags": [],
125
- "text": "Passed body content from parent component"
126
- },
127
- "attribute": "content",
128
- "reflect": false,
129
- "defaultValue": "\"\""
130
- },
131
- "contentCentered": {
132
- "type": "boolean",
133
- "mutable": false,
134
- "complexType": {
135
- "original": "boolean",
136
- "resolved": "boolean",
137
- "references": {}
138
- },
139
- "required": false,
140
- "optional": false,
141
- "docs": {
142
- "tags": [],
143
- "text": "Center content inside modal"
144
- },
145
- "attribute": "content-centered",
146
- "reflect": false,
147
- "defaultValue": "true"
148
- },
149
- "showBackButton": {
150
- "type": "boolean",
151
- "mutable": false,
152
- "complexType": {
153
- "original": "boolean",
154
- "resolved": "boolean",
155
- "references": {}
156
- },
157
- "required": false,
158
- "optional": false,
159
- "docs": {
160
- "tags": [],
161
- "text": "Whether to show back arrow or not"
162
- },
163
- "attribute": "show-back-button",
164
- "reflect": false,
165
- "defaultValue": "false"
166
- },
167
- "hideFooter": {
168
- "type": "boolean",
169
- "mutable": false,
170
- "complexType": {
171
- "original": "boolean",
172
- "resolved": "boolean",
173
- "references": {}
174
- },
175
- "required": false,
176
- "optional": false,
177
- "docs": {
178
- "tags": [],
179
- "text": "Whether to hide the footer or not"
180
- },
181
- "attribute": "hide-footer",
182
- "reflect": false,
183
- "defaultValue": "false"
184
- },
185
- "hideCloseButton": {
186
- "type": "boolean",
187
- "mutable": false,
188
- "complexType": {
189
- "original": "boolean",
190
- "resolved": "boolean",
191
- "references": {}
192
- },
193
- "required": false,
194
- "optional": false,
195
- "docs": {
196
- "tags": [],
197
- "text": "Whether to hide the close button or not."
198
- },
199
- "attribute": "hide-close-button",
200
- "reflect": false,
201
- "defaultValue": "false"
202
- }
203
- };
204
- }
205
- static get events() {
206
- return [{
207
- "method": "close",
208
- "name": "close",
209
- "bubbles": true,
210
- "cancelable": true,
211
- "composed": true,
212
- "docs": {
213
- "tags": [],
214
- "text": "Emitted when user clicks on 'X' button."
215
- },
216
- "complexType": {
217
- "original": "void",
218
- "resolved": "void",
219
- "references": {}
220
- }
221
- }, {
222
- "method": "back",
223
- "name": "back",
224
- "bubbles": true,
225
- "cancelable": true,
226
- "composed": true,
227
- "docs": {
228
- "tags": [],
229
- "text": "Emitted when user clicks on 'Back Arrow' button."
230
- },
231
- "complexType": {
232
- "original": "void",
233
- "resolved": "void",
234
- "references": {}
235
- }
236
- }];
237
- }
238
- static get elementRef() { return "hostEl"; }
239
- }
@@ -1,46 +0,0 @@
1
- /**
2
- * Copyright (c) Microblink Ltd. All rights reserved.
3
- *
4
- * SASS variables, not customizable via CSS variables
5
- */
6
- /**
7
- * Camera experiences
8
- */
9
- :host {
10
- display: block;
11
- width: 100%;
12
- height: 100%;
13
- position: absolute;
14
- top: 0;
15
- left: 0;
16
- z-index: -1;
17
- opacity: 0;
18
- border-radius: 0px;
19
- visibility: hidden;
20
- overflow: hidden;
21
- background-color: transparent;
22
- border-style: none;
23
- border-color: transparent;
24
- transform: translate(0, 0);
25
- transform-origin: center;
26
- transition: background-color 0.2s ease 0.4s, border-style 0.2s ease 0.4s, border-color 0.2s ease 0.4s, opacity 0.2s ease 0.4s, visibility 0.1s ease 0.5s, z-index 0.7s;
27
- }
28
-
29
- :host(.visible) {
30
- z-index: 200;
31
- visibility: visible;
32
- opacity: 1;
33
- background-color: transparent;
34
- transform: translate(0, 0);
35
- transition: opacity 0.2s ease, visibility 0.1s ease;
36
- }
37
-
38
- :host(.non-fullscreen) {
39
- width: auto;
40
- height: auto;
41
- position: absolute;
42
- top: calc(0px - var(--mb-component-border-width));
43
- bottom: calc(0px - var(--mb-component-border-width));
44
- left: calc(0px - var(--mb-component-border-width));
45
- right: calc(0px - var(--mb-component-border-width));
46
- }