open-chat-studio-widget 0.4.5 → 0.4.7
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.
- package/README.md +118 -94
- package/dist/cjs/{index-bcb28089.js → index-c9203be6.js} +29 -3
- package/dist/cjs/index-c9203be6.js.map +1 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/open-chat-studio-widget.cjs.entry.js +314 -73
- package/dist/cjs/open-chat-studio-widget.cjs.entry.js.map +1 -1
- package/dist/cjs/open-chat-studio-widget.cjs.js +2 -2
- package/dist/collection/components/ocs-chat/heroicons.js +11 -2
- package/dist/collection/components/ocs-chat/heroicons.js.map +1 -1
- package/dist/collection/components/ocs-chat/ocs-chat.css +362 -110
- package/dist/collection/components/ocs-chat/ocs-chat.js +367 -78
- package/dist/collection/components/ocs-chat/ocs-chat.js.map +1 -1
- package/dist/components/open-chat-studio-widget.js +323 -78
- package/dist/components/open-chat-studio-widget.js.map +1 -1
- package/dist/esm/{index-205c77bc.js → index-0349ca51.js} +29 -3
- package/dist/esm/index-0349ca51.js.map +1 -0
- package/dist/esm/loader.js +3 -3
- package/dist/esm/open-chat-studio-widget.entry.js +314 -73
- package/dist/esm/open-chat-studio-widget.entry.js.map +1 -1
- package/dist/esm/open-chat-studio-widget.js +3 -3
- package/dist/open-chat-studio-widget/open-chat-studio-widget.esm.js +1 -1
- package/dist/open-chat-studio-widget/open-chat-studio-widget.esm.js.map +1 -1
- package/dist/open-chat-studio-widget/{p-78d09c6b.js → p-3dc66a9a.js} +3 -3
- package/dist/open-chat-studio-widget/p-3dc66a9a.js.map +1 -0
- package/dist/open-chat-studio-widget/p-6b9a332c.entry.js +4 -0
- package/dist/open-chat-studio-widget/p-6b9a332c.entry.js.map +1 -0
- package/dist/types/components/ocs-chat/heroicons.d.ts +4 -1
- package/dist/types/components/ocs-chat/ocs-chat.d.ts +51 -9
- package/dist/types/components.d.ts +24 -0
- package/package.json +1 -1
- package/dist/cjs/index-bcb28089.js.map +0 -1
- package/dist/esm/index-205c77bc.js.map +0 -1
- package/dist/open-chat-studio-widget/p-5d6bd56a.entry.js +0 -4
- package/dist/open-chat-studio-widget/p-5d6bd56a.entry.js.map +0 -1
- package/dist/open-chat-studio-widget/p-78d09c6b.js.map +0 -1
package/README.md
CHANGED
|
@@ -9,104 +9,128 @@ For more information, see the [Open Chat Studio documentation](https://docs.open
|
|
|
9
9
|
|
|
10
10
|
## Properties
|
|
11
11
|
|
|
12
|
-
| Property
|
|
13
|
-
|
|
|
14
|
-
| `
|
|
15
|
-
| `
|
|
16
|
-
| `
|
|
17
|
-
| `
|
|
18
|
-
| `
|
|
19
|
-
| `
|
|
20
|
-
| `
|
|
21
|
-
| `
|
|
22
|
-
| `
|
|
23
|
-
| `
|
|
24
|
-
| `
|
|
25
|
-
| `
|
|
26
|
-
| `
|
|
27
|
-
| `
|
|
28
|
-
| `
|
|
12
|
+
| Property | Attribute | Description | Type | Default |
|
|
13
|
+
| ---------------------------- | ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------------------------------------------------------------------- |
|
|
14
|
+
| `allowAttachments` | `allow-attachments` | Allow the user to attach files to their messages. | `boolean` | `false` |
|
|
15
|
+
| `allowFullScreen` | `allow-full-screen` | Allow the user to make the chat window full screen. | `boolean` | `true` |
|
|
16
|
+
| `apiBaseUrl` | `api-base-url` | The base URL for the API (defaults to current origin). | `string` | `"https://chatbots.dimagi.com"` |
|
|
17
|
+
| `buttonShape` | `button-shape` | The shape of the chat button. 'round' makes it circular, 'square' keeps it rectangular. | `"round" \| "square"` | `'square'` |
|
|
18
|
+
| `buttonText` | `button-text` | The text to display on the button. | `string` | `undefined` |
|
|
19
|
+
| `chatbotId` _(required)_ | `chatbot-id` | The ID of the chatbot to connect to. | `string` | `undefined` |
|
|
20
|
+
| `headerText` | `header-text` | The text to place in the header. | `""` | `undefined` |
|
|
21
|
+
| `iconUrl` | `icon-url` | URL of the icon to display on the button. If not provided, uses the default OCS logo. | `string` | `undefined` |
|
|
22
|
+
| `newChatConfirmationMessage` | `new-chat-confirmation-message` | The message to display in the new chat confirmation dialog. | `string` | `"Starting a new chat will clear your current conversation. Continue?"` |
|
|
23
|
+
| `persistentSession` | `persistent-session` | Whether to persist session data to local storage to allow resuming previous conversations after page reload. | `boolean` | `true` |
|
|
24
|
+
| `persistentSessionExpire` | `persistent-session-expire` | Minutes since the most recent message after which the session data in local storage will expire. Set this to `0` to never expire. | `number` | `60 * 24` |
|
|
25
|
+
| `position` | `position` | The initial position of the chat widget on the screen. | `"center" \| "left" \| "right"` | `'right'` |
|
|
26
|
+
| `starterQuestions` | `starter-questions` | Array of starter questions that users can click to send (JSON array of strings) | `string` | `undefined` |
|
|
27
|
+
| `typingIndicatorText` | `typing-indicator-text` | The text to display while the assistant is typing/preparing a response. | `string` | `"Preparing response"` |
|
|
28
|
+
| `userId` | `user-id` | Used to associate chat sessions with a specific user across multiple visits/sessions | `string` | `undefined` |
|
|
29
|
+
| `userName` | `user-name` | Display name for the user. | `string` | `undefined` |
|
|
30
|
+
| `visible` | `visible` | Whether the chat widget is visible on load. | `boolean` | `false` |
|
|
31
|
+
| `welcomeMessages` | `welcome-messages` | Welcome messages to display above starter questions (JSON array of strings) | `string` | `undefined` |
|
|
29
32
|
|
|
30
33
|
|
|
31
34
|
## CSS Custom Properties
|
|
32
35
|
|
|
33
|
-
| Name
|
|
34
|
-
|
|
|
35
|
-
| `--button-background-color`
|
|
36
|
-
| `--button-background-color-hover`
|
|
37
|
-
| `--button-border-color`
|
|
38
|
-
| `--button-border-color-hover`
|
|
39
|
-
| `--button-font-size`
|
|
40
|
-
| `--button-icon-size`
|
|
41
|
-
| `--button-
|
|
42
|
-
| `--button-text-color`
|
|
43
|
-
| `--
|
|
44
|
-
| `--chat-window-
|
|
45
|
-
| `--chat-window-
|
|
46
|
-
| `--chat-window-font-size`
|
|
47
|
-
| `--chat-window-
|
|
48
|
-
| `--chat-window-
|
|
49
|
-
| `--chat-window-
|
|
50
|
-
| `--chat-window-
|
|
51
|
-
| `--chat-
|
|
52
|
-
| `--
|
|
53
|
-
| `--code-bg-
|
|
54
|
-
| `--code-
|
|
55
|
-
| `--code-border-
|
|
56
|
-
| `--code-
|
|
57
|
-
| `--code-text-
|
|
58
|
-
| `--
|
|
59
|
-
| `--
|
|
60
|
-
| `--
|
|
61
|
-
| `--
|
|
62
|
-
| `--
|
|
63
|
-
| `--
|
|
64
|
-
| `--
|
|
65
|
-
| `--
|
|
66
|
-
| `--
|
|
67
|
-
| `--
|
|
68
|
-
| `--
|
|
69
|
-
| `--
|
|
70
|
-
| `--
|
|
71
|
-
| `--
|
|
72
|
-
| `--
|
|
73
|
-
| `--
|
|
74
|
-
| `--
|
|
75
|
-
| `--
|
|
76
|
-
| `--
|
|
77
|
-
| `--
|
|
78
|
-
| `--
|
|
79
|
-
| `--
|
|
80
|
-
| `--
|
|
81
|
-
| `--
|
|
82
|
-
| `--
|
|
83
|
-
| `--
|
|
84
|
-
| `--
|
|
85
|
-
| `--
|
|
86
|
-
| `--
|
|
87
|
-
| `--
|
|
88
|
-
| `--
|
|
89
|
-
| `--
|
|
90
|
-
| `--
|
|
91
|
-
| `--
|
|
92
|
-
| `--
|
|
93
|
-
| `--
|
|
94
|
-
| `--
|
|
95
|
-
| `--
|
|
96
|
-
| `--
|
|
97
|
-
| `--
|
|
98
|
-
| `--
|
|
99
|
-
| `--
|
|
100
|
-
| `--
|
|
101
|
-
| `--
|
|
102
|
-
| `--
|
|
103
|
-
| `--
|
|
104
|
-
| `--
|
|
105
|
-
| `--
|
|
106
|
-
| `--
|
|
107
|
-
| `--
|
|
108
|
-
| `--
|
|
109
|
-
| `--
|
|
36
|
+
| Name | Description |
|
|
37
|
+
| ---------------------------------------------- | -------------------------------------------------------------------------------- |
|
|
38
|
+
| `--button-background-color` | Button background color (#ffffff) |
|
|
39
|
+
| `--button-background-color-hover` | Button background color on hover (#f3f4f6) |
|
|
40
|
+
| `--button-border-color` | Button border color (#6b7280) |
|
|
41
|
+
| `--button-border-color-hover` | Button border color on hover (#374151) |
|
|
42
|
+
| `--button-font-size` | Button text font size (0.875em) |
|
|
43
|
+
| `--button-icon-size` | Button icon size (1.5em) |
|
|
44
|
+
| `--button-text-color` | Button text color (#111827) |
|
|
45
|
+
| `--button-text-color-hover` | Button text color on hover (#1d4ed8) |
|
|
46
|
+
| `--chat-window-bg-color` | Chat window background color (#ffffff) |
|
|
47
|
+
| `--chat-window-border-color` | Chat window border color (#d1d5db) |
|
|
48
|
+
| `--chat-window-font-size` | Default font size for text in the chat window (0.875em) |
|
|
49
|
+
| `--chat-window-font-size-sm` | Font size for small text in the chat window (0.75em) |
|
|
50
|
+
| `--chat-window-fullscreen-width` | Chat window fullscreen width in pixels or percent (80%) |
|
|
51
|
+
| `--chat-window-height` | Chat window height in pixels or percent (60%) |
|
|
52
|
+
| `--chat-window-shadow-color` | Chat window shadow color (rgba(0, 0, 0, 0.1)) |
|
|
53
|
+
| `--chat-window-width` | Chat window width in pixels or percent (25%) |
|
|
54
|
+
| `--chat-z-index` | Z-index for chat widget (50) |
|
|
55
|
+
| `--code-bg-assistant-color` | Code background in assistant messages (--message-assistant-bg-color + 50% white) |
|
|
56
|
+
| `--code-bg-user-color` | Code background in user messages (--message-user-bg-color + 20% white) |
|
|
57
|
+
| `--code-border-assistant-color` | Code border in assistant messages (--message-assistant-bg-color + 10% black) |
|
|
58
|
+
| `--code-border-user-color` | Code border in user messages (--message-user-bg-color + 20% black) |
|
|
59
|
+
| `--code-text-assistant-color` | Code text color in assistant messages (--message-assistant-text-color) |
|
|
60
|
+
| `--code-text-user-color` | Code text color in user messages (--message-user-text-color) |
|
|
61
|
+
| `--confirmation-button-cancel-bg-color` | Cancel button background color (uses --button-background-color-hover) |
|
|
62
|
+
| `--confirmation-button-cancel-bg-hover-color` | Cancel button background on hover (uses #e5e7eb) |
|
|
63
|
+
| `--confirmation-button-cancel-text-color` | Cancel button text color (uses --header-button-text-color) |
|
|
64
|
+
| `--confirmation-button-confirm-bg-color` | Confirm button background color (uses --error-text-color) |
|
|
65
|
+
| `--confirmation-button-confirm-bg-hover-color` | Confirm button background on hover (uses --error-text-color) |
|
|
66
|
+
| `--confirmation-button-confirm-text-color` | Confirm button text color (uses --send-button-text-color) |
|
|
67
|
+
| `--confirmation-dialog-bg-color` | Confirmation dialog background color (uses --chat-window-bg-color) |
|
|
68
|
+
| `--confirmation-dialog-border-color` | Confirmation dialog border color (uses --chat-window-border-color) |
|
|
69
|
+
| `--confirmation-dialog-shadow-color` | Confirmation dialog shadow color (uses --chat-window-shadow-color) |
|
|
70
|
+
| `--confirmation-message-color` | Confirmation dialog message text color (uses --loading-text-color) |
|
|
71
|
+
| `--confirmation-message-font-size` | Confirmation dialog message font size (uses 1em) |
|
|
72
|
+
| `--confirmation-overlay-bg-color` | Confirmation dialog overlay background color (rgba(0, 0, 0, 0.5)) |
|
|
73
|
+
| `--confirmation-title-color` | Confirmation dialog title text color (uses #111827) |
|
|
74
|
+
| `--confirmation-title-font-size` | Confirmation dialog title font size (1.125em) |
|
|
75
|
+
| `--error-text-color` | Error text color (#ef4444) |
|
|
76
|
+
| `--file-attachment-button-bg-color` | Attach file button background color (transparent) |
|
|
77
|
+
| `--file-attachment-button-bg-hover-color` | Attach file button background hover color (--header-button-bg-hover-color) |
|
|
78
|
+
| `--file-attachment-button-text-color` | Attach file button text color (--header-button-text-color) |
|
|
79
|
+
| `--file-attachment-button-text-disabled-color` | Attach file button disabled text color (--send-button-text-disabled-color) |
|
|
80
|
+
| `--header-bg-color` | Header background color (transparent) |
|
|
81
|
+
| `--header-bg-hover-color` | Header background color on hover (#f9fafb) |
|
|
82
|
+
| `--header-border-color` | Header border color (#f3f4f6) |
|
|
83
|
+
| `--header-button-bg-hover-color` | Header button background on hover (#f3f4f6) |
|
|
84
|
+
| `--header-button-icon-size` | Icon size for buttons in the header (1.5em) |
|
|
85
|
+
| `--header-button-text-color` | Header button text color (#6b7280) |
|
|
86
|
+
| `--header-font-size` | Header font size (1em) |
|
|
87
|
+
| `--header-text-color` | Color for the text in the header (#525762) |
|
|
88
|
+
| `--header-text-font-size` | Font size for the text in the header (1em) |
|
|
89
|
+
| `--input-bg-color` | Input area background color (transparent) |
|
|
90
|
+
| `--input-border-color` | Input field border color (#d1d5db) |
|
|
91
|
+
| `--input-outline-focus-color` | Input field focus ring color (#3b82f6) |
|
|
92
|
+
| `--input-placeholder-color` | Input placeholder text color (#6b7280) |
|
|
93
|
+
| `--input-text-color` | Input text color (#111827) |
|
|
94
|
+
| `--loading-spinner-fill-color` | Loading spinner fill color (#3b82f6) |
|
|
95
|
+
| `--loading-spinner-size` | Loading spinner size (1.25em) |
|
|
96
|
+
| `--loading-spinner-track-color` | Loading spinner track color (#e5e7eb) |
|
|
97
|
+
| `--loading-text-color` | Loading text color (#6b7280) |
|
|
98
|
+
| `--message-assistant-bg-color` | Assistant message background color (#eae7e8) |
|
|
99
|
+
| `--message-assistant-link-color` | Assistant message link color (--message-user-link-color) |
|
|
100
|
+
| `--message-assistant-text-color` | Assistant message text color (--message-user-text-color) |
|
|
101
|
+
| `--message-attachment-icon-size` | Message attachment icon size (1em) |
|
|
102
|
+
| `--message-system-bg-color` | System message background color (#fbe4f8) |
|
|
103
|
+
| `--message-system-link-color` | System message link color (--message-user-link-color) |
|
|
104
|
+
| `--message-system-text-color` | System message text color (--message-user-text-color) |
|
|
105
|
+
| `--message-timestamp-assistant-color` | Assistant message timestamp color (rgba(75, 85, 99, 0.7)) |
|
|
106
|
+
| `--message-timestamp-color` | User message timestamp color (rgba(255, 255, 255, 0.7)) |
|
|
107
|
+
| `--message-user-bg-color` | User message background color (#e4edfb) |
|
|
108
|
+
| `--message-user-link-color` | User message link color (#155dfc) |
|
|
109
|
+
| `--message-user-text-color` | User message text color (#1f2937) |
|
|
110
|
+
| `--scrollbar-thumb-color` | Scrollbar thumb color (#d1d5db) |
|
|
111
|
+
| `--scrollbar-thumb-hover-color` | Scrollbar thumb hover color (#9ca3af) |
|
|
112
|
+
| `--scrollbar-track-color` | Scrollbar track color (#f3f4f6) |
|
|
113
|
+
| `--selected-file-bg-color` | Selected file item background color (--message-system-bg-color) |
|
|
114
|
+
| `--selected-file-font-size` | Selected file item font size (--chat-window-font-size-sm) |
|
|
115
|
+
| `--selected-file-icon-size` | Selected file item icon size (1.25em) |
|
|
116
|
+
| `--selected-file-name-color` | Selected file name color (--message-assistant-text-color) |
|
|
117
|
+
| `--selected-file-remove-icon-color` | Selected file remove icon color (--error-text-color) |
|
|
118
|
+
| `--selected-file-remove-icon-hover-color` | Selected file remove icon hover (#dc2626) |
|
|
119
|
+
| `--selected-file-size-color` | Selected file size display color (--input-placeholder-color) |
|
|
120
|
+
| `--selected-files-bg-color` | Selected files container background color (--chat-window-bg-color) |
|
|
121
|
+
| `--selected-files-border-color` | Selected files container border color (--header-border-color) |
|
|
122
|
+
| `--send-button-bg-color` | Send button background color (#3b82f6) |
|
|
123
|
+
| `--send-button-bg-disabled-color` | Send button background when disabled (#d1d5db) |
|
|
124
|
+
| `--send-button-bg-hover-color` | Send button background on hover (#2563eb) |
|
|
125
|
+
| `--send-button-text-color` | Send button text color (#ffffff) |
|
|
126
|
+
| `--send-button-text-disabled-color` | Send button text when disabled (#6b7280) |
|
|
127
|
+
| `--starter-question-bg-color` | Starter question background color (transparent) |
|
|
128
|
+
| `--starter-question-bg-hover-color` | Starter question background on hover (#eff6ff) |
|
|
129
|
+
| `--starter-question-border-color` | Starter question border color (#3b82f6) |
|
|
130
|
+
| `--starter-question-border-hover-color` | Starter question border on hover (#2563eb) |
|
|
131
|
+
| `--starter-question-text-color` | Starter question text color (#3b82f6) |
|
|
132
|
+
| `--success-text-color` | Success text color (#10b981) |
|
|
133
|
+
| `--typing-progress-bg-color` | Typing progress bar background color (#ade3ff) |
|
|
110
134
|
|
|
111
135
|
|
|
112
136
|
----------------------------------------------
|
|
@@ -21,7 +21,7 @@ function _interopNamespace(e) {
|
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
const NAMESPACE = 'open-chat-studio-widget';
|
|
24
|
-
const BUILD = /* open-chat-studio-widget */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback:
|
|
24
|
+
const BUILD = /* open-chat-studio-widget */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
|
|
25
25
|
|
|
26
26
|
/*
|
|
27
27
|
Stencil Client Platform v4.26.0 | MIT Licensed | https://stenciljs.com
|
|
@@ -976,6 +976,7 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
|
|
|
976
976
|
`Couldn't find host element for "${cmpMeta.$tagName$}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/ionic-team/stencil/issues/5457).`
|
|
977
977
|
);
|
|
978
978
|
}
|
|
979
|
+
const elm = hostRef.$hostElement$ ;
|
|
979
980
|
const oldVal = hostRef.$instanceValues$.get(propName);
|
|
980
981
|
const flags = hostRef.$flags$;
|
|
981
982
|
const instance = hostRef.$lazyInstance$ ;
|
|
@@ -985,6 +986,18 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
|
|
|
985
986
|
if ((!(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
|
|
986
987
|
hostRef.$instanceValues$.set(propName, newVal);
|
|
987
988
|
if (instance) {
|
|
989
|
+
if (cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
|
|
990
|
+
const watchMethods = cmpMeta.$watchers$[propName];
|
|
991
|
+
if (watchMethods) {
|
|
992
|
+
watchMethods.map((watchMethodName) => {
|
|
993
|
+
try {
|
|
994
|
+
instance[watchMethodName](newVal, oldVal, propName);
|
|
995
|
+
} catch (e) {
|
|
996
|
+
consoleError(e, elm);
|
|
997
|
+
}
|
|
998
|
+
});
|
|
999
|
+
}
|
|
1000
|
+
}
|
|
988
1001
|
if ((flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
|
|
989
1002
|
scheduleUpdate(hostRef, false);
|
|
990
1003
|
}
|
|
@@ -996,7 +1009,10 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
|
|
|
996
1009
|
var proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
997
1010
|
var _a, _b;
|
|
998
1011
|
const prototype = Cstr.prototype;
|
|
999
|
-
if (cmpMeta.$members$ ||
|
|
1012
|
+
if (cmpMeta.$members$ || (cmpMeta.$watchers$ || Cstr.watchers)) {
|
|
1013
|
+
if (Cstr.watchers && !cmpMeta.$watchers$) {
|
|
1014
|
+
cmpMeta.$watchers$ = Cstr.watchers;
|
|
1015
|
+
}
|
|
1000
1016
|
const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
|
|
1001
1017
|
members.map(([memberName, [memberFlags]]) => {
|
|
1002
1018
|
if ((memberFlags & 31 /* Prop */ || (flags & 2 /* proxyState */) && memberFlags & 32 /* State */)) {
|
|
@@ -1132,6 +1148,9 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
|
|
|
1132
1148
|
throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
|
|
1133
1149
|
}
|
|
1134
1150
|
if (!Cstr.isProxied) {
|
|
1151
|
+
{
|
|
1152
|
+
cmpMeta.$watchers$ = Cstr.watchers;
|
|
1153
|
+
}
|
|
1135
1154
|
proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
|
|
1136
1155
|
Cstr.isProxied = true;
|
|
1137
1156
|
}
|
|
@@ -1147,6 +1166,9 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
|
|
|
1147
1166
|
{
|
|
1148
1167
|
hostRef.$flags$ &= ~8 /* isConstructingInstance */;
|
|
1149
1168
|
}
|
|
1169
|
+
{
|
|
1170
|
+
hostRef.$flags$ |= 128 /* isWatchReady */;
|
|
1171
|
+
}
|
|
1150
1172
|
endNewInstance();
|
|
1151
1173
|
} else {
|
|
1152
1174
|
Cstr = elm.constructor;
|
|
@@ -1254,6 +1276,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
|
|
|
1254
1276
|
let hasSlotRelocation = false;
|
|
1255
1277
|
lazyBundles.map((lazyBundle) => {
|
|
1256
1278
|
lazyBundle[1].map((compactMeta) => {
|
|
1279
|
+
var _a2;
|
|
1257
1280
|
const cmpMeta = {
|
|
1258
1281
|
$flags$: compactMeta[0],
|
|
1259
1282
|
$tagName$: compactMeta[1],
|
|
@@ -1266,6 +1289,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
|
|
|
1266
1289
|
{
|
|
1267
1290
|
cmpMeta.$members$ = compactMeta[2];
|
|
1268
1291
|
}
|
|
1292
|
+
{
|
|
1293
|
+
cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
|
|
1294
|
+
}
|
|
1269
1295
|
const tagName = cmpMeta.$tagName$;
|
|
1270
1296
|
const HostElement = class extends HTMLElement {
|
|
1271
1297
|
// StencilLazyHost
|
|
@@ -1371,4 +1397,4 @@ exports.promiseResolve = promiseResolve;
|
|
|
1371
1397
|
exports.registerInstance = registerInstance;
|
|
1372
1398
|
exports.setNonce = setNonce;
|
|
1373
1399
|
|
|
1374
|
-
//# sourceMappingURL=index-
|
|
1400
|
+
//# sourceMappingURL=index-c9203be6.js.map
|