@nylas/web-elements 0.0.0-canary-20241017103834 → 0.0.0-canary-20241017220933
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/dist/cdn/nylas-additional-participants/nylas-additional-participants.es.js +7 -7
- package/dist/cdn/nylas-editor-tabs/nylas-editor-tabs.es.js +4558 -4547
- package/dist/cdn/nylas-event-title/nylas-event-title.es.js +6 -3
- package/dist/cdn/nylas-reminder-emails/nylas-reminder-emails.es.js +2289 -2281
- package/dist/cdn/nylas-reminder-time/nylas-reminder-time.es.js +2253 -2245
- package/dist/cdn/nylas-scheduler-editor/nylas-scheduler-editor.es.js +103 -92
- package/dist/cjs/calendar-agenda-fill-icon_54.cjs.entry.js +41 -43
- package/dist/cjs/calendar-agenda-fill-icon_54.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/nylas-web-elements.cjs.js +1 -1
- package/dist/collection/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.js +9 -9
- package/dist/collection/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.js.map +1 -1
- package/dist/collection/components/scheduler-editor/nylas-event-title/nylas-event-title.js +9 -6
- package/dist/collection/components/scheduler-editor/nylas-event-title/nylas-event-title.js.map +1 -1
- package/dist/collection/components/scheduler-editor/nylas-event-title/test/nylas-event-title.spec.js +24 -0
- package/dist/collection/components/scheduler-editor/nylas-event-title/test/nylas-event-title.spec.js.map +1 -1
- package/dist/collection/components/scheduler-editor/nylas-reminder-time/nylas-reminder-time.js +23 -30
- package/dist/collection/components/scheduler-editor/nylas-reminder-time/nylas-reminder-time.js.map +1 -1
- package/dist/collection/components/scheduler-editor/nylas-reminder-time/test/nylas-reminder-time.spec.js +37 -0
- package/dist/collection/components/scheduler-editor/nylas-reminder-time/test/nylas-reminder-time.spec.js.map +1 -0
- package/dist/components/nylas-additional-participants2.js +9 -9
- package/dist/components/nylas-additional-participants2.js.map +1 -1
- package/dist/components/nylas-event-title2.js +9 -6
- package/dist/components/nylas-event-title2.js.map +1 -1
- package/dist/components/nylas-reminder-time2.js +23 -29
- package/dist/components/nylas-reminder-time2.js.map +1 -1
- package/dist/esm/calendar-agenda-fill-icon_54.entry.js +41 -43
- package/dist/esm/calendar-agenda-fill-icon_54.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/nylas-web-elements.js +1 -1
- package/dist/nylas-web-elements/nylas-web-elements.esm.js +1 -1
- package/dist/nylas-web-elements/nylas-web-elements.esm.js.map +1 -1
- package/dist/nylas-web-elements/{p-df131a08.entry.js → p-d586ff14.entry.js} +3 -3
- package/dist/nylas-web-elements/p-d586ff14.entry.js.map +1 -0
- package/dist/types/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.d.ts +1 -1
- package/dist/types/components/scheduler-editor/nylas-event-title/nylas-event-title.d.ts +1 -0
- package/dist/types/components/scheduler-editor/nylas-reminder-time/nylas-reminder-time.d.ts +1 -1
- package/package.json +1 -1
- package/dist/nylas-web-elements/p-df131a08.entry.js.map +0 -1
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { newSpecPage } from "@stencil/core/testing";
|
|
2
|
+
import { NylasReminderTime } from "../nylas-reminder-time";
|
|
3
|
+
import { InputDropdown } from "../../../design-system/input-dropdown/input-dropdown";
|
|
4
|
+
import { SelectDropdown } from "../../../design-system/select-dropdown/select-dropdown";
|
|
5
|
+
import { h } from "@stencil/core";
|
|
6
|
+
describe('nylas-reminder-time', () => {
|
|
7
|
+
let page;
|
|
8
|
+
beforeEach(async () => {
|
|
9
|
+
page = await newSpecPage({
|
|
10
|
+
components: [InputDropdown, SelectDropdown, NylasReminderTime],
|
|
11
|
+
template: () => {
|
|
12
|
+
return h("nylas-reminder-time", { eventReminderTimeMinutes: 1320 });
|
|
13
|
+
},
|
|
14
|
+
});
|
|
15
|
+
await page.waitForChanges();
|
|
16
|
+
});
|
|
17
|
+
afterEach(() => {
|
|
18
|
+
page?.root?.remove();
|
|
19
|
+
});
|
|
20
|
+
it('renders', async () => {
|
|
21
|
+
expect(page.root).toMatchSnapshot();
|
|
22
|
+
});
|
|
23
|
+
it('renders hour duration input options with 1 hour increments with 22 hours', async () => {
|
|
24
|
+
const selectDropdown = page.root.shadowRoot.querySelector('select-dropdown');
|
|
25
|
+
const button = selectDropdown.shadowRoot.querySelector('button');
|
|
26
|
+
expect(button).not.toBeNull();
|
|
27
|
+
expect(button.textContent).toBe('hours');
|
|
28
|
+
const inputDropdown = page.root.shadowRoot.querySelector('input-dropdown');
|
|
29
|
+
const input = inputDropdown.shadowRoot.querySelector('input');
|
|
30
|
+
expect(input).not.toBeNull();
|
|
31
|
+
expect(input.value).toBe('22');
|
|
32
|
+
input.click();
|
|
33
|
+
await page.waitForChanges();
|
|
34
|
+
expect(page.root).toMatchSnapshot();
|
|
35
|
+
});
|
|
36
|
+
});
|
|
37
|
+
//# sourceMappingURL=nylas-reminder-time.spec.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"nylas-reminder-time.spec.js","sourceRoot":"","sources":["../../../../../src/components/scheduler-editor/nylas-reminder-time/test/nylas-reminder-time.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,sDAAsD,CAAC;AACrF,OAAO,EAAE,cAAc,EAAE,MAAM,wDAAwD,CAAC;AACxF,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElC,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACnC,IAAI,IAAS,CAAC;IACd,UAAU,CAAC,KAAK,IAAI,EAAE;QACpB,IAAI,GAAG,MAAM,WAAW,CAAC;YACvB,UAAU,EAAE,CAAC,aAAa,EAAE,cAAc,EAAE,iBAAiB,CAAC;YAC9D,QAAQ,EAAE,GAAG,EAAE;gBACb,OAAO,2BAAqB,wBAAwB,EAAE,IAAI,GAAI,CAAC;YACjE,CAAC;SACF,CAAC,CAAC;QACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;IACvB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0EAA0E,EAAE,KAAK,IAAI,EAAE;QACxF,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;QAC7E,MAAM,MAAM,GAAG,cAAc,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACjE,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;QAC9B,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACzC,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAC3E,MAAM,KAAK,GAAG,aAAa,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC9D,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;QAC7B,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/B,KAAK,CAAC,KAAK,EAAE,CAAC;QACd,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { NylasReminderTime } from '../nylas-reminder-time';\nimport { InputDropdown } from '../../../design-system/input-dropdown/input-dropdown';\nimport { SelectDropdown } from '../../../design-system/select-dropdown/select-dropdown';\nimport { h } from '@stencil/core';\n\ndescribe('nylas-reminder-time', () => {\n let page: any;\n beforeEach(async () => {\n page = await newSpecPage({\n components: [InputDropdown, SelectDropdown, NylasReminderTime],\n template: () => {\n return <nylas-reminder-time eventReminderTimeMinutes={1320} />;\n },\n });\n await page.waitForChanges();\n });\n\n afterEach(() => {\n page?.root?.remove();\n });\n\n it('renders', async () => {\n expect(page.root).toMatchSnapshot();\n });\n\n it('renders hour duration input options with 1 hour increments with 22 hours', async () => {\n const selectDropdown = page.root.shadowRoot.querySelector('select-dropdown');\n const button = selectDropdown.shadowRoot.querySelector('button');\n expect(button).not.toBeNull();\n expect(button.textContent).toBe('hours');\n const inputDropdown = page.root.shadowRoot.querySelector('input-dropdown');\n const input = inputDropdown.shadowRoot.querySelector('input');\n expect(input).not.toBeNull();\n expect(input.value).toBe('22');\n input.click();\n await page.waitForChanges();\n expect(page.root).toMatchSnapshot();\n });\n});\n"]}
|
|
@@ -75,7 +75,7 @@ const NylasAdditionalParticipants = proxyCustomElement(class NylasAdditionalPart
|
|
|
75
75
|
disconnectedCallback() {
|
|
76
76
|
debug('nylas-additional-participants', 'disconnectedCallback');
|
|
77
77
|
}
|
|
78
|
-
isInternalsAvailable() {
|
|
78
|
+
get isInternalsAvailable() {
|
|
79
79
|
return this.internals !== undefined && typeof this.internals.setFormValue === 'function' && typeof this.internals.setValidity === 'function';
|
|
80
80
|
}
|
|
81
81
|
onInputOptionChanged(event) {
|
|
@@ -84,14 +84,14 @@ const NylasAdditionalParticipants = proxyCustomElement(class NylasAdditionalPart
|
|
|
84
84
|
const index = event.detail.name;
|
|
85
85
|
const participant = this.participantOptions?.find(participant => participant.email === event.detail.value);
|
|
86
86
|
if (!participant && this.isRoundRobinConfig) {
|
|
87
|
-
this.isInternalsAvailable
|
|
87
|
+
this.isInternalsAvailable && this.internals.setValidity({ customError: true }, 'For round robin configuration, participant should be selected from the dropdown.');
|
|
88
88
|
this.participantErrors[index] = 'For round robin page, participant should be selected from the dropdown.';
|
|
89
89
|
this.participants[index].is_valid = false;
|
|
90
90
|
this.participants = [...this.participants];
|
|
91
91
|
return;
|
|
92
92
|
}
|
|
93
93
|
else if (!participant && !EMAIL_REGEX.test(event.detail.value)) {
|
|
94
|
-
this.isInternalsAvailable
|
|
94
|
+
this.isInternalsAvailable && this.internals.setValidity({ customError: true }, 'Please enter a valid email address');
|
|
95
95
|
this.participantErrors[index] = 'Please enter a valid email address';
|
|
96
96
|
this.participants[index].is_valid = false;
|
|
97
97
|
this.participants = [...this.participants];
|
|
@@ -100,7 +100,7 @@ const NylasAdditionalParticipants = proxyCustomElement(class NylasAdditionalPart
|
|
|
100
100
|
else {
|
|
101
101
|
this.participantErrors[index] = '';
|
|
102
102
|
this.participants[index].is_valid = true;
|
|
103
|
-
this.isInternalsAvailable
|
|
103
|
+
this.isInternalsAvailable && this.internals.setValidity({});
|
|
104
104
|
}
|
|
105
105
|
this.participants[index].email = event.detail.value;
|
|
106
106
|
this.participants[index].availability = participant ? { calendar_ids: ['primary'] } : undefined;
|
|
@@ -143,13 +143,13 @@ const NylasAdditionalParticipants = proxyCustomElement(class NylasAdditionalPart
|
|
|
143
143
|
debug('nylas-additional-participants', 'updateFormValue');
|
|
144
144
|
const participants = this.isRoundRobinConfig ? (this.includeOrganizerAsParticipant ? this.participants : this.participants.filter(p => !p.is_organizer)) : this.participants;
|
|
145
145
|
if (participants.length === 0) {
|
|
146
|
-
this.isInternalsAvailable
|
|
146
|
+
this.isInternalsAvailable && this.internals.setValidity({ customError: true }, 'Please add at least one participant');
|
|
147
147
|
this.error = 'Please add at least one participant';
|
|
148
148
|
}
|
|
149
149
|
else {
|
|
150
|
-
this.isInternalsAvailable
|
|
150
|
+
this.isInternalsAvailable && this.internals.setValidity({});
|
|
151
151
|
this.error = '';
|
|
152
|
-
this.isInternalsAvailable
|
|
152
|
+
this.isInternalsAvailable && this.internals.setFormValue(JSON.stringify(participants), this.name);
|
|
153
153
|
this.valueChanged.emit({ value: JSON.stringify(participants), name: this.name });
|
|
154
154
|
}
|
|
155
155
|
}
|
|
@@ -160,7 +160,7 @@ const NylasAdditionalParticipants = proxyCustomElement(class NylasAdditionalPart
|
|
|
160
160
|
});
|
|
161
161
|
}
|
|
162
162
|
render() {
|
|
163
|
-
return (h(Host, { key: '
|
|
163
|
+
return (h(Host, { key: '16a28d7d8ee91b685a22472d8a90721a5074d798', part: "nap" }, h("nylas-form-card", { key: '9fde59eadfcdf05c3b4add30a5c35f9b21d00c30' }, h("h3", { key: '82e3c3ad537ef4c60d19695f11e481bac2ed31ae', slot: "header-title", class: "nylas-additional-participants__title", part: "nap__title" }, "Participants"), h("p", { key: '4df3d661d2c6801ba8e88d82853ae562ed3be8e8', slot: "header-subtitle", class: "nylas-additional-participants__subtitle", part: "nap__subtitle" }, "Add people in your team or organization to join the event."), h("div", { key: '3ccb34354c025b52760433683812acf37b480e77', slot: "content", class: "nylas-additional-participants__content" }, h("div", { key: '007cf8396921637cf230cc26d73de147169cd250' }, this.participants.map((participant, index) => {
|
|
164
164
|
return (h("div", { class: 'nylas-additional-participants__input_group', part: "nap__input_group" }, !participant.is_organizer && h("label", null, `Participant ${index}`), h("div", { part: "nap__input_wrapper", class: {
|
|
165
165
|
'nylas-additional-participants__input_wrapper': true,
|
|
166
166
|
'nylas-additional-participants__input_wrapper_organizer': participant?.is_organizer === true,
|
|
@@ -170,7 +170,7 @@ const NylasAdditionalParticipants = proxyCustomElement(class NylasAdditionalPart
|
|
|
170
170
|
this.includeOrganizerAsParticipant = !this.includeOrganizerAsParticipant;
|
|
171
171
|
this.updateFormValue();
|
|
172
172
|
}, checked: this.includeOrganizerAsParticipant }), h("label", { htmlFor: `organizer_participant`, "aria-label": "Include as participant" }, "Participant", h("tooltip-component", { id: "organizer_participant_tooltip" }, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, h("strong", null, "Include Organizer:"), " The organizer (you) will be included in the round-robin rotation. ", h("br", null), h("strong", null, "Exclude Organizer:"), " The organizer (you) will not be included in the round-robin rotation."))))))) : (h("input-dropdown", { id: `${index}`, name: `${index}`, filterable: true, inputValue: participant.email, options: this.getArrayDifference(this.participantOptions || [], this.participants) })), !participant.is_organizer && (h("button", { onClick: () => this.removeParticipant(index), part: "nap__remove-participant" }, h("close-icon", null))))), !participant.is_valid && (h("p", { class: "nylas-additional-participants__error", part: "nap__error" }, this.participantErrors[index]))));
|
|
173
|
-
}), h("p", { key: '
|
|
173
|
+
}), h("p", { key: 'f1dd954c137093fa9e474f3886e4b5320aeb5e2e', class: "nylas-additional-participants__error", part: "nap__error" }, this.error)), h("button", { key: '859585010fc9fce314b856f5e7e07ac8b8c47b88', class: "nylas-additional-participants__add", part: "nap__add-participant", onClick: () => this.addParticipant() }, h("add-circle-icon", { key: 'aec7eb5de30e66bca29b73962f356109471c2e9e' }), " ", h("span", { key: 'f07ecfaa4db46f7954d734314c46f2d773158730' }, "Add ", this.participants.length > 1 ? 'another' : 'a', " participant"))))));
|
|
174
174
|
}
|
|
175
175
|
static get formAssociated() { return true; }
|
|
176
176
|
get host() { return this; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"nylas-additional-participants2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.scss?tag=nylas-additional-participants&encapsulation=shadow","src/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n margin: 1rem;\n @include default-css-variables;\n}\n\n.nylas-additional-participants__title {\n color: var(--nylas-base-nylas-base-900-aaa, #101323);\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 20px;\n /* 125% */\n margin: 0;\n text-align: left;\n}\n\n.nylas-additional-participants__subtitle {\n color: var(--nylas-base-600);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n /* 142.857% */\n margin: 0.25rem 0px 0px;\n text-align: left;\n}\n\n.nylas-additional-participants__content {\n padding: 1rem;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.nylas-additional-participants__input_group {\n padding-top: 8px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n\n label {\n display: flex;\n align-items: center;\n color: var(--nylas-base-800);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 150%;\n }\n}\n\n.nylas-additional-participants__error {\n color: var(--nylas-error);\n font-size: 14px;\n font-family: var(--nylas-font-family);\n font-weight: 400;\n line-height: 16px;\n margin: 0;\n text-align: left;\n}\n\n.nylas-additional-participants__input_wrapper {\n display: flex;\n border-width: 1;\n border-radius: 8px;\n border: 1px solid var(--nylas-base-300);\n\n &.error {\n border-color: var(--nylas-error);\n }\n\n button {\n padding: 12px;\n border: none;\n border-left: 1px solid var(--nylas-base-300);\n background: none;\n cursor: pointer;\n\n &:hover,\n &:active {\n color: var(--nylas-primary);\n }\n }\n}\n\n.nylas-additional-participants__input_wrapper_organizer {\n border: none;\n}\n\n.nylas-additional-participants__input {\n flex: 1;\n display: flex;\n justify-content: space-between;\n\n input {\n border: none;\n outline: none;\n background: none;\n width: 100%;\n }\n\n input-dropdown {\n width: 100%;\n }\n\n input-dropdown::part(id_dropdown) {\n width: 100%;\n height: 100%;\n }\n\n input-dropdown::part(id_dropdown-input) {\n height: 100%;\n border-radius: var(--nylas-border-radius-2x);\n border: none;\n border-top-right-radius: initial;\n border-bottom-right-radius: initial;\n padding-left: 16px;\n }\n\n input-component::part(ic__input) {\n background: var(--nylas-base-50);\n }\n\n input-component::part(ic__label) {\n font-size: 14px;\n }\n\n input-component {\n div.required-input {\n display: flex;\n gap: 4px;\n\n label {\n display: flex;\n gap: 4px;\n align-items: center;\n\n tooltip-component#organizer_participant_tooltip::part(tc__content) {\n left: -84px;\n }\n }\n }\n }\n}\n\n.nylas-additional-participants__add {\n padding: 12px;\n display: flex;\n align-items: center;\n border: none;\n background: none;\n cursor: pointer;\n\n span {\n padding: 0 8px;\n font-size: 16px;\n font-style: normal;\n font-weight: 500;\n }\n\n &:hover,\n &:active {\n color: var(--nylas-primary);\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, Prop, State, Watch, h, Element, Listen, EventEmitter } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Event } from '@stencil/core';\nimport { AdditionalParticipant, Configuration } from '@nylas/core';\nimport { User } from '@/common/nylas-api-request';\n\ntype Participant = {\n name?: string;\n email: string;\n is_valid?: boolean;\n is_organizer?: boolean;\n availability?: Availability;\n booking?: Booking;\n};\ntype Availability = {\n calendar_ids: string[];\n};\ntype Booking = {\n calendar_id: string;\n};\n\n/**\n * The `nylas-additional-participants` component is a form input for adding additional participants to an event.\n *\n * @part nap__title - The title of the component.\n * @part nap__subtitle - The subtitle of the component.\n * @part nap__content - The content of the component.\n * @part nap__input_group - The input group of the component.\n * @part nap__input_wrapper - The input wrapper of the component.\n * @part nap__input - The input of the component.\n * @part nap__remove-participant - The remove participant button of the component.\n * @part nap__add-participant - The add participant button of the component.\n *\n */\n@Component({\n tag: 'nylas-additional-participants',\n styleUrl: 'nylas-additional-participants.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasAdditionalParticipants {\n @Element() host!: HTMLNylasAdditionalParticipantsElement;\n /**\n * @standalone\n * The name of the component\n */\n @Prop() name: string = 'participants';\n /**\n * @standalone\n * The selected config\n */\n @Prop() selectedConfiguration?: Configuration;\n /**\n * @standalone\n * The logged in user\n */\n @Prop() currentUser?: User;\n /**\n * @standalone\n * The additional participants options from the config\n */\n @Prop() participantOptions?: AdditionalParticipant[];\n /**\n * @standalone\n * The event participants\n */\n @Prop() eventParticipants?: Participant[];\n\n @AttachInternals() internals!: ElementInternals;\n @State() participants: Participant[] = this.eventParticipants ?? [];\n @State() participantErrors: { [key: string]: string } = {};\n @State() includeOrganizerAsParticipant: boolean = true;\n @State() isRoundRobinConfig: boolean = this.selectedConfiguration?.availability?.availability_rules?.availability_method !== 'collective';\n @State() error: string = '';\n\n /**\n * This event is fired when the selected participants change.\n */\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n /**\n * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n */\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-additional-participants', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newValue: Configuration) {\n debug('nylas-additional-participants', 'selectedConfigurationChangedHandler', newValue);\n this.isRoundRobinConfig = newValue?.availability?.availability_rules?.availability_method !== 'collective';\n this.participants = newValue?.participants || [];\n this.updateOrganizerAsParticipant();\n }\n\n connectedCallback() {\n debug('nylas-additional-participants', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-additional-participants', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-additional-participants', 'componentDidLoad');\n this.isRoundRobinConfig = this.selectedConfiguration?.availability?.availability_rules?.availability_method !== 'collective';\n this.includeOrganizerAsParticipant = this.isRoundRobinConfig && this.participants.find(p => p.email === this.currentUser?.email) ? true : false;\n\n if (this.selectedConfiguration) {\n this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n } else {\n this.updateOrganizerAsParticipant();\n }\n }\n\n disconnectedCallback() {\n debug('nylas-additional-participants', 'disconnectedCallback');\n }\n\n /**\n * This method is essentially a workaround to check if the internals are available because\n * the unit tests in stencil do not support the internals.\n * @returns boolean\n */\n isInternalsAvailable() {\n return this.internals !== undefined && typeof this.internals.setFormValue === 'function' && typeof this.internals.setValidity === 'function';\n }\n\n @Listen('inputOptionChanged')\n onInputOptionChanged(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-additional-participants', 'onInputOptionChanged');\n const EMAIL_REGEX = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/;\n const index = event.detail.name;\n const participant = this.participantOptions?.find(participant => participant.email === event.detail.value);\n\n if (!participant && this.isRoundRobinConfig) {\n this.isInternalsAvailable() && this.internals.setValidity({ customError: true }, 'For round robin configuration, participant should be selected from the dropdown.');\n this.participantErrors[index] = 'For round robin page, participant should be selected from the dropdown.';\n this.participants[index].is_valid = false;\n this.participants = [...this.participants];\n return;\n } else if (!participant && !EMAIL_REGEX.test(event.detail.value)) {\n this.isInternalsAvailable() && this.internals.setValidity({ customError: true }, 'Please enter a valid email address');\n this.participantErrors[index] = 'Please enter a valid email address';\n this.participants[index].is_valid = false;\n this.participants = [...this.participants];\n return;\n } else {\n this.participantErrors[index] = '';\n this.participants[index].is_valid = true;\n this.isInternalsAvailable() && this.internals.setValidity({});\n }\n this.participants[index].email = event.detail.value;\n this.participants[index].availability = participant ? { calendar_ids: ['primary'] } : undefined;\n // If round-robin config, set booking calendar to primary for all participants\n this.participants[index].booking = participant && this.isRoundRobinConfig ? { calendar_id: 'primary' } : undefined;\n this.participants[index].name = participant?.name || event.detail.value;\n this.participants = [...this.participants];\n this.updateFormValue();\n }\n\n updateOrganizerAsParticipant() {\n const findCurrentUserInParticipants = this.participants.find(p => p.email === this.currentUser?.email);\n if (this.isRoundRobinConfig && !findCurrentUserInParticipants && this.currentUser?.email) {\n this.participants = [\n {\n name: this.currentUser?.name,\n email: this.currentUser?.email,\n is_organizer: true,\n availability: {\n calendar_ids: ['primary'],\n },\n booking: {\n calendar_id: 'primary',\n },\n },\n ...this.participants,\n ];\n }\n this.updateFormValue();\n }\n\n addParticipant() {\n debug('nylas-additional-participants', 'addParticipant');\n this.participants = [...this.participants, { name: '', email: '', is_organizer: false }];\n this.updateFormValue();\n }\n removeParticipant(index: number) {\n debug('nylas-additional-participants', 'removeParticipant');\n this.participants = this.participants.filter((_, i) => i !== index);\n this.updateFormValue();\n }\n\n updateFormValue() {\n debug('nylas-additional-participants', 'updateFormValue');\n const participants = this.isRoundRobinConfig ? (this.includeOrganizerAsParticipant ? this.participants : this.participants.filter(p => !p.is_organizer)) : this.participants;\n if (participants.length === 0) {\n this.isInternalsAvailable() && this.internals.setValidity({ customError: true }, 'Please add at least one participant');\n this.error = 'Please add at least one participant';\n } else {\n this.isInternalsAvailable() && this.internals.setValidity({});\n this.error = '';\n this.isInternalsAvailable() && this.internals.setFormValue(JSON.stringify(participants), this.name);\n this.valueChanged.emit({ value: JSON.stringify(participants), name: this.name });\n }\n }\n\n // Filter out the participants that are already added\n getArrayDifference(array1: AdditionalParticipant[], array2: Participant[]) {\n const filtered = array1.filter(participant1 => !array2.some(participant2 => participant1.email === participant2.email));\n return filtered.map(participant => {\n return { value: participant.email, label: participant.email };\n });\n }\n\n @RegisterComponent<NylasAdditionalParticipants, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-additional-participants',\n stateToProps: new Map([\n ['schedulerConfig.additionalParticipants', 'participantOptions'],\n ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n ['schedulerConfig.currentUser', 'currentUser'],\n ]),\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host part=\"nap\">\n <nylas-form-card>\n <h3 slot=\"header-title\" class=\"nylas-additional-participants__title\" part=\"nap__title\">\n Participants\n </h3>\n <p slot=\"header-subtitle\" class=\"nylas-additional-participants__subtitle\" part=\"nap__subtitle\">\n Add people in your team or organization to join the event.\n </p>\n <div slot=\"content\" class=\"nylas-additional-participants__content\">\n <div>\n {this.participants.map((participant, index) => {\n return (\n <div class={'nylas-additional-participants__input_group'} part=\"nap__input_group\">\n {!participant.is_organizer && <label>{`Participant ${index}`}</label>}\n <div\n part=\"nap__input_wrapper\"\n class={{\n 'nylas-additional-participants__input_wrapper': true,\n 'nylas-additional-participants__input_wrapper_organizer': participant?.is_organizer === true,\n 'nylas-additional-participants__input_wrapper_invalid': participant.is_valid === false,\n 'error': participant.is_valid === false,\n }}\n >\n <div class={{ 'nylas-additional-participants__input': true, 'organizer': participant?.is_organizer === true }} part=\"nap__input\">\n {participant.is_organizer ? (\n <input-component\n class={'label-input'}\n name={`${index}`}\n key={index}\n label=\"Organizer\"\n required={false}\n readOnly={participant.is_organizer}\n defaultValue={participant.email}\n >\n {this.isRoundRobinConfig && (\n <div class=\"required-input\" slot=\"additional-input\">\n <input\n type=\"checkbox\"\n name={`organizer_participant`}\n id={`organizer_participant`}\n onClick={() => {\n this.includeOrganizerAsParticipant = !this.includeOrganizerAsParticipant;\n this.updateFormValue();\n }}\n checked={this.includeOrganizerAsParticipant}\n />\n <label htmlFor={`organizer_participant`} aria-label=\"Include as participant\">\n Participant\n <tooltip-component id=\"organizer_participant_tooltip\">\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">\n <strong>Include Organizer:</strong> The organizer (you) will be included in the round-robin rotation. <br />\n <strong>Exclude Organizer:</strong> The organizer (you) will not be included in the round-robin rotation.\n </span>\n </tooltip-component>\n </label>\n </div>\n )}\n </input-component>\n ) : (\n <input-dropdown\n id={`${index}`}\n name={`${index}`}\n filterable={true}\n inputValue={participant.email}\n options={this.getArrayDifference(this.participantOptions || [], this.participants)}\n />\n )}\n {!participant.is_organizer && (\n <button onClick={() => this.removeParticipant(index)} part=\"nap__remove-participant\">\n <close-icon />\n </button>\n )}\n </div>\n </div>\n {!participant.is_valid && (\n <p class=\"nylas-additional-participants__error\" part=\"nap__error\">\n {this.participantErrors[index]}\n </p>\n )}\n </div>\n );\n })}\n <p class=\"nylas-additional-participants__error\" part=\"nap__error\">\n {this.error}\n </p>\n </div>\n <button class=\"nylas-additional-participants__add\" part=\"nap__add-participant\" onClick={() => this.addParticipant()}>\n <add-circle-icon /> <span>Add {this.participants.length > 1 ? 'another' : 'a'} participant</span>\n </button>\n </div>\n </nylas-form-card>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"nylas-additional-participants2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.scss?tag=nylas-additional-participants&encapsulation=shadow","src/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n margin: 1rem;\n @include default-css-variables;\n}\n\n.nylas-additional-participants__title {\n color: var(--nylas-base-nylas-base-900-aaa, #101323);\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 20px;\n /* 125% */\n margin: 0;\n text-align: left;\n}\n\n.nylas-additional-participants__subtitle {\n color: var(--nylas-base-600);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n /* 142.857% */\n margin: 0.25rem 0px 0px;\n text-align: left;\n}\n\n.nylas-additional-participants__content {\n padding: 1rem;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.nylas-additional-participants__input_group {\n padding-top: 8px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n\n label {\n display: flex;\n align-items: center;\n color: var(--nylas-base-800);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 150%;\n }\n}\n\n.nylas-additional-participants__error {\n color: var(--nylas-error);\n font-size: 14px;\n font-family: var(--nylas-font-family);\n font-weight: 400;\n line-height: 16px;\n margin: 0;\n text-align: left;\n}\n\n.nylas-additional-participants__input_wrapper {\n display: flex;\n border-width: 1;\n border-radius: 8px;\n border: 1px solid var(--nylas-base-300);\n\n &.error {\n border-color: var(--nylas-error);\n }\n\n button {\n padding: 12px;\n border: none;\n border-left: 1px solid var(--nylas-base-300);\n background: none;\n cursor: pointer;\n\n &:hover,\n &:active {\n color: var(--nylas-primary);\n }\n }\n}\n\n.nylas-additional-participants__input_wrapper_organizer {\n border: none;\n}\n\n.nylas-additional-participants__input {\n flex: 1;\n display: flex;\n justify-content: space-between;\n\n input {\n border: none;\n outline: none;\n background: none;\n width: 100%;\n }\n\n input-dropdown {\n width: 100%;\n }\n\n input-dropdown::part(id_dropdown) {\n width: 100%;\n height: 100%;\n }\n\n input-dropdown::part(id_dropdown-input) {\n height: 100%;\n border-radius: var(--nylas-border-radius-2x);\n border: none;\n border-top-right-radius: initial;\n border-bottom-right-radius: initial;\n padding-left: 16px;\n }\n\n input-component::part(ic__input) {\n background: var(--nylas-base-50);\n }\n\n input-component::part(ic__label) {\n font-size: 14px;\n }\n\n input-component {\n div.required-input {\n display: flex;\n gap: 4px;\n\n label {\n display: flex;\n gap: 4px;\n align-items: center;\n\n tooltip-component#organizer_participant_tooltip::part(tc__content) {\n left: -84px;\n }\n }\n }\n }\n}\n\n.nylas-additional-participants__add {\n padding: 12px;\n display: flex;\n align-items: center;\n border: none;\n background: none;\n cursor: pointer;\n\n span {\n padding: 0 8px;\n font-size: 16px;\n font-style: normal;\n font-weight: 500;\n }\n\n &:hover,\n &:active {\n color: var(--nylas-primary);\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, Prop, State, Watch, h, Element, Listen, EventEmitter } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Event } from '@stencil/core';\nimport { AdditionalParticipant, Configuration } from '@nylas/core';\nimport { User } from '@/common/nylas-api-request';\n\ntype Participant = {\n name?: string;\n email: string;\n is_valid?: boolean;\n is_organizer?: boolean;\n availability?: Availability;\n booking?: Booking;\n};\ntype Availability = {\n calendar_ids: string[];\n};\ntype Booking = {\n calendar_id: string;\n};\n\n/**\n * The `nylas-additional-participants` component is a form input for adding additional participants to an event.\n *\n * @part nap__title - The title of the component.\n * @part nap__subtitle - The subtitle of the component.\n * @part nap__content - The content of the component.\n * @part nap__input_group - The input group of the component.\n * @part nap__input_wrapper - The input wrapper of the component.\n * @part nap__input - The input of the component.\n * @part nap__remove-participant - The remove participant button of the component.\n * @part nap__add-participant - The add participant button of the component.\n *\n */\n@Component({\n tag: 'nylas-additional-participants',\n styleUrl: 'nylas-additional-participants.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasAdditionalParticipants {\n @Element() host!: HTMLNylasAdditionalParticipantsElement;\n /**\n * @standalone\n * The name of the component\n */\n @Prop() name: string = 'participants';\n /**\n * @standalone\n * The selected config\n */\n @Prop() selectedConfiguration?: Configuration;\n /**\n * @standalone\n * The logged in user\n */\n @Prop() currentUser?: User;\n /**\n * @standalone\n * The additional participants options from the config\n */\n @Prop() participantOptions?: AdditionalParticipant[];\n /**\n * @standalone\n * The event participants\n */\n @Prop() eventParticipants?: Participant[];\n\n @AttachInternals() internals!: ElementInternals;\n @State() participants: Participant[] = this.eventParticipants ?? [];\n @State() participantErrors: { [key: string]: string } = {};\n @State() includeOrganizerAsParticipant: boolean = true;\n @State() isRoundRobinConfig: boolean = this.selectedConfiguration?.availability?.availability_rules?.availability_method !== 'collective';\n @State() error: string = '';\n\n /**\n * This event is fired when the selected participants change.\n */\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n /**\n * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n */\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-additional-participants', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newValue: Configuration) {\n debug('nylas-additional-participants', 'selectedConfigurationChangedHandler', newValue);\n this.isRoundRobinConfig = newValue?.availability?.availability_rules?.availability_method !== 'collective';\n this.participants = newValue?.participants || [];\n this.updateOrganizerAsParticipant();\n }\n\n connectedCallback() {\n debug('nylas-additional-participants', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-additional-participants', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-additional-participants', 'componentDidLoad');\n this.isRoundRobinConfig = this.selectedConfiguration?.availability?.availability_rules?.availability_method !== 'collective';\n this.includeOrganizerAsParticipant = this.isRoundRobinConfig && this.participants.find(p => p.email === this.currentUser?.email) ? true : false;\n\n if (this.selectedConfiguration) {\n this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n } else {\n this.updateOrganizerAsParticipant();\n }\n }\n\n disconnectedCallback() {\n debug('nylas-additional-participants', 'disconnectedCallback');\n }\n\n /**\n * This method is essentially a workaround to check if the internals are available because\n * the unit tests in stencil do not support the internals.\n * @returns boolean\n */\n get isInternalsAvailable() {\n return this.internals !== undefined && typeof this.internals.setFormValue === 'function' && typeof this.internals.setValidity === 'function';\n }\n\n @Listen('inputOptionChanged')\n onInputOptionChanged(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-additional-participants', 'onInputOptionChanged');\n const EMAIL_REGEX = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/;\n const index = event.detail.name;\n const participant = this.participantOptions?.find(participant => participant.email === event.detail.value);\n\n if (!participant && this.isRoundRobinConfig) {\n this.isInternalsAvailable && this.internals.setValidity({ customError: true }, 'For round robin configuration, participant should be selected from the dropdown.');\n this.participantErrors[index] = 'For round robin page, participant should be selected from the dropdown.';\n this.participants[index].is_valid = false;\n this.participants = [...this.participants];\n return;\n } else if (!participant && !EMAIL_REGEX.test(event.detail.value)) {\n this.isInternalsAvailable && this.internals.setValidity({ customError: true }, 'Please enter a valid email address');\n this.participantErrors[index] = 'Please enter a valid email address';\n this.participants[index].is_valid = false;\n this.participants = [...this.participants];\n return;\n } else {\n this.participantErrors[index] = '';\n this.participants[index].is_valid = true;\n this.isInternalsAvailable && this.internals.setValidity({});\n }\n this.participants[index].email = event.detail.value;\n this.participants[index].availability = participant ? { calendar_ids: ['primary'] } : undefined;\n // If round-robin config, set booking calendar to primary for all participants\n this.participants[index].booking = participant && this.isRoundRobinConfig ? { calendar_id: 'primary' } : undefined;\n this.participants[index].name = participant?.name || event.detail.value;\n this.participants = [...this.participants];\n this.updateFormValue();\n }\n\n updateOrganizerAsParticipant() {\n const findCurrentUserInParticipants = this.participants.find(p => p.email === this.currentUser?.email);\n if (this.isRoundRobinConfig && !findCurrentUserInParticipants && this.currentUser?.email) {\n this.participants = [\n {\n name: this.currentUser?.name,\n email: this.currentUser?.email,\n is_organizer: true,\n availability: {\n calendar_ids: ['primary'],\n },\n booking: {\n calendar_id: 'primary',\n },\n },\n ...this.participants,\n ];\n }\n this.updateFormValue();\n }\n\n addParticipant() {\n debug('nylas-additional-participants', 'addParticipant');\n this.participants = [...this.participants, { name: '', email: '', is_organizer: false }];\n this.updateFormValue();\n }\n removeParticipant(index: number) {\n debug('nylas-additional-participants', 'removeParticipant');\n this.participants = this.participants.filter((_, i) => i !== index);\n this.updateFormValue();\n }\n\n updateFormValue() {\n debug('nylas-additional-participants', 'updateFormValue');\n const participants = this.isRoundRobinConfig ? (this.includeOrganizerAsParticipant ? this.participants : this.participants.filter(p => !p.is_organizer)) : this.participants;\n if (participants.length === 0) {\n this.isInternalsAvailable && this.internals.setValidity({ customError: true }, 'Please add at least one participant');\n this.error = 'Please add at least one participant';\n } else {\n this.isInternalsAvailable && this.internals.setValidity({});\n this.error = '';\n this.isInternalsAvailable && this.internals.setFormValue(JSON.stringify(participants), this.name);\n this.valueChanged.emit({ value: JSON.stringify(participants), name: this.name });\n }\n }\n\n // Filter out the participants that are already added\n getArrayDifference(array1: AdditionalParticipant[], array2: Participant[]) {\n const filtered = array1.filter(participant1 => !array2.some(participant2 => participant1.email === participant2.email));\n return filtered.map(participant => {\n return { value: participant.email, label: participant.email };\n });\n }\n\n @RegisterComponent<NylasAdditionalParticipants, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-additional-participants',\n stateToProps: new Map([\n ['schedulerConfig.additionalParticipants', 'participantOptions'],\n ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n ['schedulerConfig.currentUser', 'currentUser'],\n ]),\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host part=\"nap\">\n <nylas-form-card>\n <h3 slot=\"header-title\" class=\"nylas-additional-participants__title\" part=\"nap__title\">\n Participants\n </h3>\n <p slot=\"header-subtitle\" class=\"nylas-additional-participants__subtitle\" part=\"nap__subtitle\">\n Add people in your team or organization to join the event.\n </p>\n <div slot=\"content\" class=\"nylas-additional-participants__content\">\n <div>\n {this.participants.map((participant, index) => {\n return (\n <div class={'nylas-additional-participants__input_group'} part=\"nap__input_group\">\n {!participant.is_organizer && <label>{`Participant ${index}`}</label>}\n <div\n part=\"nap__input_wrapper\"\n class={{\n 'nylas-additional-participants__input_wrapper': true,\n 'nylas-additional-participants__input_wrapper_organizer': participant?.is_organizer === true,\n 'nylas-additional-participants__input_wrapper_invalid': participant.is_valid === false,\n 'error': participant.is_valid === false,\n }}\n >\n <div class={{ 'nylas-additional-participants__input': true, 'organizer': participant?.is_organizer === true }} part=\"nap__input\">\n {participant.is_organizer ? (\n <input-component\n class={'label-input'}\n name={`${index}`}\n key={index}\n label=\"Organizer\"\n required={false}\n readOnly={participant.is_organizer}\n defaultValue={participant.email}\n >\n {this.isRoundRobinConfig && (\n <div class=\"required-input\" slot=\"additional-input\">\n <input\n type=\"checkbox\"\n name={`organizer_participant`}\n id={`organizer_participant`}\n onClick={() => {\n this.includeOrganizerAsParticipant = !this.includeOrganizerAsParticipant;\n this.updateFormValue();\n }}\n checked={this.includeOrganizerAsParticipant}\n />\n <label htmlFor={`organizer_participant`} aria-label=\"Include as participant\">\n Participant\n <tooltip-component id=\"organizer_participant_tooltip\">\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">\n <strong>Include Organizer:</strong> The organizer (you) will be included in the round-robin rotation. <br />\n <strong>Exclude Organizer:</strong> The organizer (you) will not be included in the round-robin rotation.\n </span>\n </tooltip-component>\n </label>\n </div>\n )}\n </input-component>\n ) : (\n <input-dropdown\n id={`${index}`}\n name={`${index}`}\n filterable={true}\n inputValue={participant.email}\n options={this.getArrayDifference(this.participantOptions || [], this.participants)}\n />\n )}\n {!participant.is_organizer && (\n <button onClick={() => this.removeParticipant(index)} part=\"nap__remove-participant\">\n <close-icon />\n </button>\n )}\n </div>\n </div>\n {!participant.is_valid && (\n <p class=\"nylas-additional-participants__error\" part=\"nap__error\">\n {this.participantErrors[index]}\n </p>\n )}\n </div>\n );\n })}\n <p class=\"nylas-additional-participants__error\" part=\"nap__error\">\n {this.error}\n </p>\n </div>\n <button class=\"nylas-additional-participants__add\" part=\"nap__add-participant\" onClick={() => this.addParticipant()}>\n <add-circle-icon /> <span>Add {this.participants.length > 1 ? 'another' : 'a'} participant</span>\n </button>\n </div>\n </nylas-form-card>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -304,17 +304,20 @@ const NylasEventTitle = proxyCustomElement(class NylasEventTitle extends HTMLEle
|
|
|
304
304
|
this.ariaActivedescendant = this.filteredTokens[0].label;
|
|
305
305
|
}
|
|
306
306
|
}
|
|
307
|
+
get isInternalsAvailable() {
|
|
308
|
+
return typeof this.internals !== 'undefined' && typeof this.internals.setValidity === 'function' && typeof this.internals.setFormValue === 'function';
|
|
309
|
+
}
|
|
307
310
|
updateEventTitle(text) {
|
|
308
311
|
const value = text.replace(/ +/g, ' ');
|
|
309
|
-
if (value === '') {
|
|
310
|
-
this.internals?.setValidity({ customError: true }, `Event title is required`, this.titleRef);
|
|
312
|
+
if (value === '' || /^[\s]*$/.test(value)) {
|
|
311
313
|
this.validationError = 'Event title is required';
|
|
314
|
+
this.isInternalsAvailable && this.internals?.setValidity({ customError: true }, `Event title is required`, this.titleRef);
|
|
312
315
|
}
|
|
313
316
|
else {
|
|
314
|
-
this.internals?.setValidity({ customError: false });
|
|
315
317
|
this.validationError = '';
|
|
318
|
+
this.isInternalsAvailable && this.internals?.setValidity({ customError: false });
|
|
316
319
|
}
|
|
317
|
-
this.internals?.setFormValue(value, this.name);
|
|
320
|
+
this.isInternalsAvailable && this.internals?.setFormValue(value, this.name);
|
|
318
321
|
this.valueChanged.emit({ value: value, name: this.name });
|
|
319
322
|
}
|
|
320
323
|
resetDropdown() {
|
|
@@ -325,10 +328,10 @@ const NylasEventTitle = proxyCustomElement(class NylasEventTitle extends HTMLEle
|
|
|
325
328
|
return (h("div", { class: "token-label" }, h("span", { class: "token" }, token.token), h("span", { class: "description" }, token.description)));
|
|
326
329
|
}
|
|
327
330
|
render() {
|
|
328
|
-
return (h(Host, { key: '
|
|
331
|
+
return (h(Host, { key: 'c9bef753b69793b6db0569ec750a04ceb4a51de8' }, h("div", { key: 'b80559c8ebe73437fbd347a034fa577c0ee4a60b', class: "nylas-event-title", part: "net" }, h("label", { key: 'c8b911bdfd24a7934b8359d5ba9a2531edc606c1', htmlFor: "title" }, "Event title", h("span", { key: '953b07bae8f6ebbcc465cc3349b6b97ecf8cd544', class: "required" }, "*")), h("div", { key: 'cbc5559de86b4c3a45c30088fba3d2a3382b4311', class: {
|
|
329
332
|
title: true,
|
|
330
333
|
error: this.validationError !== '',
|
|
331
|
-
}, part: "net__title", ref: el => (this.titleRef = el), contentEditable: "true", onInput: e => this.handleChange(e), onKeyDown: event => this.handleInputKeyDown(event) }), this.showTokens && this.filteredTokens?.length > 0 && (h("div", { class: "token-options", part: "net__dropdown-content" }, h("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-activedescendant": this.ariaActivedescendant }, this.filteredTokens.map(option => (h("li", { tabindex: "0", key: option.label, id: option.label, class: { active: this.ariaActivedescendant === option.label }, onClick: e => this.selectOption(e, option), role: "option" }, this.getLabelHTML(option.labelHTML))))))), h("span", { key: '
|
|
334
|
+
}, part: "net__title", ref: el => (this.titleRef = el), contentEditable: "true", onInput: e => this.handleChange(e), onKeyDown: event => this.handleInputKeyDown(event) }), this.showTokens && this.filteredTokens?.length > 0 && (h("div", { class: "token-options", part: "net__dropdown-content" }, h("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-activedescendant": this.ariaActivedescendant }, this.filteredTokens.map(option => (h("li", { tabindex: "0", key: option.label, id: option.label, class: { active: this.ariaActivedescendant === option.label }, onClick: e => this.selectOption(e, option), role: "option" }, this.getLabelHTML(option.labelHTML))))))), h("span", { key: 'cddf49a23d611b00b5a06a431bb6033ee564fba6', class: "help-text" }, "Create a dynamic templated event title by typing ", h("code", { key: 'b87cf9d630645aedf2c72bb7356ce8737406c127' }, "$"), " and selecting a template item.", h("span", { key: '75ad5946a822c3ee23ddb46f29b611dd68875d05', class: "label-icon" }, h("tooltip-component", { key: '20a6fb4aaac4d1ad5264d30364fc695de7f0ca11' }, h("info-icon", { key: '22413e474fd5113bfa3663d137a67cd2da94268f', slot: "tooltip-icon" }), h("span", { key: 'f266824868c09cf41564fe1fcbc42e9113bf06fb', slot: "tooltip-content" }, "For example, Interview with ", h("code", { key: '0989a865eb48e0a0363ec69218be46ab7d6f18f1' }, '${invitee}'))))), this.validationError != '' && h("span", { class: "error-message" }, this.validationError))));
|
|
332
335
|
}
|
|
333
336
|
static get formAssociated() { return true; }
|
|
334
337
|
get host() { return this; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"nylas-event-title2.js","mappings":"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","names":["eventTitleTokens"],"sources":["src/components/scheduler-editor/nylas-event-title/nylas-event-title.scss?tag=nylas-event-title&encapsulation=shadow","src/components/scheduler-editor/nylas-event-title/nylas-event-title.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n}\n\n.nylas-event-title {\n display: flex;\n flex-direction: column;\n gap: 4px;\n position: relative;\n text-align: left;\n\n div.title {\n padding: 12px 16px;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n overflow: scroll;\n white-space: nowrap;\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n }\n\n &.error {\n border-color: var(--nylas-error);\n border-width: 2px;\n outline: none;\n }\n }\n\n input {\n padding: 12px 16px;\n border-width: 1;\n border-radius: 8px;\n border: 1px solid var(--nylas-base-200);\n }\n\n span.help-text {\n display: flex;\n gap: 4px;\n align-items: center;\n color: var(--nylas-base-800);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 21px;\n }\n\n span.error-message {\n color: var(--nylas-error);\n }\n\n label {\n display: flex;\n align-items: center;\n color: var(--nylas-base-800);\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 150%;\n\n /* 21px */\n span.required {\n color: var(--nylas-error, #cc4841);\n }\n\n span.label-icon {\n margin-left: 4px;\n\n tooltip-component {\n display: flex;\n }\n }\n }\n}\n\n.highlighted-tag {\n background-color: var(--nylas-base-200);\n border-radius: var(--nylas-border-radius);\n padding: 5px;\n margin-left: 4px;\n}\n\n.token-options {\n display: block;\n background-color: var(--nylas-base-0);\n width: 100%;\n max-height: 336px;\n overflow: auto;\n z-index: 1;\n border-radius: 4px;\n position: absolute;\n top: calc(48px + 24px + 8px); // 48px is the height of the input, 24px is the height of the label, 8px is the gap between the label and the input\n\n @media #{$mobile} {\n right: 0;\n width: 325px;\n max-width: unset;\n }\n\n box-shadow: 0px 4px 6px -2px #0000000d;\n box-shadow: 0px 10px 15px -3px #0000001a;\n\n ul {\n padding: 0;\n list-style-type: none;\n color: var(--nylas-base-900);\n max-height: 336px;\n margin: 0;\n\n li {\n padding: 16px, 12px, 16px, 12px;\n color: black;\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n font-family: inherit;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n letter-spacing: 0px;\n text-align: left;\n cursor: pointer;\n\n .token-label {\n display: flex;\n flex-direction: column;\n font-weight: 400;\n\n .token {\n color: var(--nylas-abse-900);\n font-size: 16px;\n line-height: 24px;\n }\n\n .description {\n color: var(--nylas-base-600);\n font-size: 14px;\n line-height: 21px;\n }\n }\n\n &:hover,\n &:focus,\n &:active,\n &.active {\n background-color: var(--nylas-base-100);\n\n .token-label {\n .token {\n color: var(--nylas-primary);\n }\n }\n }\n }\n }\n\n .selected {\n background-color: var(--nylas-base-100);\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, getBrowser, isNonPrintableKey, sanitize } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { EVENT_TITLE_TOKENS as eventTitleTokens } from '@/common/constants';\nimport { Configuration } from '@nylas/core';\n\ninterface CustomShadowRoot extends ShadowRoot {\n getSelection: () => Selection | null;\n}\n\ntype Token = {\n token: string;\n value: string;\n description: string;\n};\n\n/**\n * The `nylas-event-title` component is a form input for the title of an event.\n * @part net - The event title container\n * @part net__title - The event title input\n * @part net__dropdown-content - The token options container\n */\n@Component({\n tag: 'nylas-event-title',\n styleUrl: 'nylas-event-title.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasEventTitle {\n @Element() host!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n // Properties\n /**\n * @standalone\n * The selected config\n */\n @Prop() selectedConfiguration?: Configuration;\n /**\n * @standalone\n * The title of the event from the cofiguration.\n */\n @Prop() eventTitle?: string = this.selectedConfiguration?.event_booking?.title;\n /**\n * @standalone\n * The name attribute of this component.\n */\n @Prop() name: string = 'title';\n\n // State variables\n /**\n * Whether to show the tokens dropdown.\n */\n @State() showTokens: boolean = false;\n /**\n * The available token options for the dropdown.\n */\n @State() availableTokens: { label: string; value: string; labelHTML: Token }[] = eventTitleTokens.map(token => ({\n label: token.token,\n value: token.value,\n labelHTML: token,\n }));\n /**\n * The filtered token options for the dropdown based on the current query.\n */\n @State() filteredTokens: { label: string; value: string; labelHTML: Token }[] = this.availableTokens;\n /**\n * The aria-activedescendant attribute value. This is used to indicate the\n * currently active descendant in the tokens dropdown.\n */\n @State() ariaActivedescendant: string = '';\n /**\n * Stores the reference to the current word being typed.\n * This is used to update the event title with the selected token tag when\n * an option is selected from the dropdown by clicking on it.\n */\n @State() currentWord: {\n $value: string;\n fullText: string;\n index: number;\n focusOffset: number;\n } = { $value: '', fullText: '', index: -1, focusOffset: -1 };\n\n @State() validationError: string = '';\n @State() configEventTitle: string = '';\n\n // Reference to the title div element\n private titleRef!: HTMLDivElement;\n\n /**\n * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n */\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-event-title', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('ariaActivedescendant')\n ariaActivedescendantChangedHandler(newValue: string) {\n debug('nylas-event-title', 'ariaActivedescendantChangedHandler', newValue);\n if (newValue !== '') {\n const activeOption = this.host.shadowRoot?.getElementById(newValue);\n activeOption?.classList.add('active');\n } else {\n const options = this.host.shadowRoot?.querySelectorAll('.token-options li.active');\n options?.forEach(option => option.classList.remove('active'));\n }\n }\n\n @Watch('selectedConfiguration')\n configChangedHandler(newVal) {\n const title = newVal?.event_booking?.title;\n this.configEventTitle = title;\n if (title) {\n this.updateEventTitleFromProp(title);\n }\n }\n\n // Events\n /**\n * This event is fired when the value of the event title changes.\n */\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-event-title', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-event-title', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-event-title', 'componentDidLoad');\n if (this.selectedConfiguration) {\n this.eventTitle = this.selectedConfiguration?.event_booking?.title;\n }\n this.updateEventTitleFromProp(this.eventTitle || '');\n }\n\n disconnectedCallback() {\n debug('nylas-event-title', 'disconnectedCallback');\n }\n\n @Listen('formSubmitted', { target: 'window' })\n formSubmittedHandler(event: CustomEvent) {\n debug('nylas-event-title', 'formSubmittedHandler', event);\n if (!this.internals?.validity?.valid) {\n this.validationError = 'Event title is required';\n } else {\n this.validationError = '';\n }\n }\n\n updateEventTitleFromProp(newValue: string) {\n debug('nylas-event-title', 'eventTitleChangedHandler', newValue);\n const title = newValue || this.configEventTitle;\n if (this.titleRef) {\n this.titleRef.innerHTML = this.highlightTokens(title);\n this.titleRef.focus();\n if (typeof this.internals.setValidity === 'function') {\n if (!title || title === '') {\n this.internals?.setValidity({ customError: true }, `Event title is required`, this.titleRef);\n } else {\n this.internals?.setValidity({ customError: false });\n }\n }\n }\n }\n\n highlightTokens(title: string) {\n let outputHtml = title;\n\n eventTitleTokens.forEach(tokenObj => {\n const token = tokenObj.value;\n // Create a regular expression that matches the token as a whole word\n const regex = new RegExp(`(\\\\${token})(?!\\\\w)`, 'g');\n // Replace the token with a span element\n outputHtml = outputHtml?.replace(regex, '<span class=\"highlighted-tag\">$1</span>') || '';\n });\n return outputHtml;\n }\n\n getCurrentSelectionForBrowser() {\n const getSelectionTextData = (nodeValue, offset, node, allSelected) => {\n // Remove zero-width space characters from the text, because they are not visible and cause issues with the selection\n const text = nodeValue.replace(/[\\u200B-\\u200D\\uFEFF]/g, '');\n const dollarIndex = text.lastIndexOf('$');\n const lastWord = text.substring(dollarIndex).split(' ')[0];\n return {\n focusOffset: offset,\n dollarIndex,\n lastWord,\n currentText: text,\n node,\n allSelected,\n };\n };\n\n // Check if the selection has selected all the text in the node, we need this to handle the case where the user selects all the text and then types or deletes\n const isAllSelected = (selection: Selection) => selection.anchorOffset === 0 && selection.focusOffset === selection.focusNode?.nodeValue?.length;\n\n const currentBrowser = getBrowser();\n switch (currentBrowser) {\n case 'Chrome':\n const shadowRootSelection = (this.host.shadowRoot as CustomShadowRoot)?.getSelection();\n const focusNode = shadowRootSelection?.focusNode;\n const focusNodeValue = focusNode?.nodeValue || '';\n const allSelected = shadowRootSelection && isAllSelected(shadowRootSelection);\n return getSelectionTextData(focusNodeValue, shadowRootSelection?.focusOffset || -1, focusNode, allSelected);\n case 'Firefox':\n const selection = document.getSelection();\n const anchorNodeValue = selection?.anchorNode?.nodeValue || '';\n const allSelectedFirefox = selection && isAllSelected(selection);\n return getSelectionTextData(anchorNodeValue, selection?.focusOffset || -1, selection?.anchorNode, allSelectedFirefox);\n case 'Safari':\n const windowSelection = window.getSelection();\n const anchorNode = (windowSelection as any)?.getComposedRanges(this.host.shadowRoot as CustomShadowRoot)[0];\n const currentText = anchorNode?.startContainer?.nodeValue || '';\n const allSelectedSafari = windowSelection && isAllSelected(windowSelection);\n return getSelectionTextData(currentText, anchorNode?.endOffset || -1, anchorNode?.startContainer, allSelectedSafari);\n default:\n console.warn('Browser not supported');\n return null;\n }\n }\n\n handleChange(event: Event) {\n let textContent = (event.target as HTMLDivElement).textContent || '';\n textContent = sanitize(textContent);\n\n // All browsers handle Selection within Shadow DOM differently, so get the current selection based on the browser\n const currentSelection = this.getCurrentSelectionForBrowser();\n if (!currentSelection) {\n this.updateEventTitle(textContent);\n this.resetDropdown();\n return;\n }\n const { focusOffset, dollarIndex, lastWord, currentText } = currentSelection;\n\n if (dollarIndex === -1 || focusOffset < dollarIndex) {\n this.updateEventTitle(textContent);\n this.resetDropdown();\n return;\n }\n if (lastWord.startsWith('$')) {\n this.showTokens = true;\n // Update the current word being typed, we need this reference to update the event title with the selected token\n // because the user can select an option from the dropdown by clicking on it, which will not trigger the input event.\n this.currentWord = {\n $value: lastWord,\n fullText: currentText,\n index: dollarIndex,\n focusOffset,\n };\n this.populateSuggestionsDropdown(lastWord);\n } else {\n this.resetDropdown();\n }\n this.updateEventTitle(textContent);\n }\n\n handleInputKeyDown(event) {\n const selection = this.getCurrentSelectionForBrowser();\n\n // If no text is remaining in the title, reset the title to an empty string\n if (selection?.allSelected && !isNonPrintableKey(event)) {\n this.titleRef.innerHTML = '';\n }\n\n if (event.key === 'Enter') {\n event.preventDefault();\n const activeOption = this.host.shadowRoot?.getElementById(this.ariaActivedescendant);\n if (activeOption) {\n activeOption.click();\n this.ariaActivedescendant = '';\n }\n } else if (event.key === 'ArrowDown') {\n event.preventDefault();\n const activeOption = this.host.shadowRoot?.getElementById(this.ariaActivedescendant);\n if (activeOption) {\n const nextOption = activeOption.nextElementSibling;\n if (nextOption) {\n this.ariaActivedescendant = nextOption.id;\n } else {\n this.ariaActivedescendant = this.filteredTokens[0].label;\n }\n } else {\n this.ariaActivedescendant = this.filteredTokens[0].label;\n }\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n const activeOption = this.host.shadowRoot?.getElementById(this.ariaActivedescendant);\n if (activeOption) {\n const prevOption = activeOption.previousElementSibling;\n if (prevOption) {\n this.ariaActivedescendant = prevOption.id;\n } else {\n this.ariaActivedescendant = this.filteredTokens[this.filteredTokens.length - 1].label;\n }\n } else {\n this.ariaActivedescendant = this.filteredTokens[this.filteredTokens.length - 1].label;\n }\n } else if (event.key === 'Escape') {\n event.preventDefault();\n this.resetDropdown();\n } else if (event.key === 'Backspace' || event.key === 'Delete') {\n const parentNode = selection?.node?.parentNode;\n if (selection?.currentText.startsWith('${') && parentNode) {\n event.preventDefault();\n parentNode.removeChild(selection.node);\n parentNode.remove();\n this.resetDropdown();\n }\n if (this.titleRef.textContent === '' || selection?.allSelected) {\n this.titleRef.innerHTML = '';\n this.updateEventTitle('');\n }\n }\n }\n\n selectOption(e: Event, option: { label: string; value: string; labelHTML: Token }) {\n e.preventDefault();\n const word = this.currentWord.fullText;\n const dollarWord = this.currentWord.$value;\n\n // Traverse the DOM to find the text node that contains the current word fullText\n let currentNode = this.titleRef.firstChild;\n let textNode: ChildNode | null = null;\n\n while (currentNode) {\n if (currentNode.nodeType === 3) {\n const currentNodeText = currentNode.textContent?.replace(/[\\u200B-\\u200D\\uFEFF]/g, '') || '';\n const wordText = word.replace(/[\\u200B-\\u200D\\uFEFF]/g, '');\n if (currentNodeText.includes(wordText)) {\n textNode = currentNode;\n break;\n }\n }\n currentNode = currentNode.nextSibling;\n }\n\n if (!textNode) {\n return;\n }\n // Split the text node into three parts: text before the token, the token, and text after the token\n const text = textNode.textContent || '';\n const index = text.indexOf(dollarWord);\n const textBefore = text.substring(0, index);\n const textAfter = text.substring(index + dollarWord.length);\n const newTextNode = document.createTextNode(textBefore);\n const newRange = document.createRange();\n\n // Create a new span element to replace the text node\n const tagSpan = document.createElement('span');\n tagSpan.classList.add('highlighted-tag');\n tagSpan.textContent = `${option.value}`;\n const newTextNodeAfter = document.createTextNode(textAfter);\n\n if (textAfter !== '') {\n // If there is text after the token, add it to the new span element\n textNode.replaceWith(newTextNode, tagSpan, newTextNodeAfter);\n newRange.setStart(newTextNodeAfter, 1);\n } else {\n // If there is no text after the token, add a zero-width space character (Without this, the cursor will not move outside the highlighted span element)\n const afterNode = document.createTextNode('\\u200B');\n textNode.replaceWith(newTextNode, tagSpan, afterNode);\n newRange.setStart(afterNode, 1);\n }\n\n // Hide the dropdown\n this.resetDropdown();\n this.titleRef.focus();\n\n // Set the focus to the new span element\n const sel = window.getSelection();\n newRange.collapse(true);\n sel?.removeAllRanges();\n sel?.addRange(newRange);\n\n // Update the event title with the selected token\n this.updateEventTitle(this.titleRef.textContent || '');\n }\n\n populateSuggestionsDropdown(query: string = '') {\n this.filteredTokens = this.availableTokens.filter(obj => {\n return obj.label.startsWith(query.toString()) || obj.value.startsWith(query.toString());\n });\n\n // Set the first option as the active descendant\n if (this.filteredTokens.length > 0) {\n this.ariaActivedescendant = this.filteredTokens[0].label;\n }\n }\n\n updateEventTitle(text: string) {\n const value = text.replace(/ +/g, ' ');\n if (value === '') {\n this.internals?.setValidity({ customError: true }, `Event title is required`, this.titleRef);\n this.validationError = 'Event title is required';\n } else {\n this.internals?.setValidity({ customError: false });\n this.validationError = '';\n }\n this.internals?.setFormValue(value, this.name);\n this.valueChanged.emit({ value: value, name: this.name });\n }\n\n resetDropdown() {\n this.showTokens = false;\n this.ariaActivedescendant = '';\n }\n\n getLabelHTML(token: { token: string; description: string }) {\n return (\n <div class=\"token-label\">\n <span class=\"token\">{token.token}</span>\n <span class=\"description\">{token.description}</span>\n </div>\n );\n }\n\n @RegisterComponent<NylasEventTitle, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-event-title',\n stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <div class=\"nylas-event-title\" part=\"net\">\n <label htmlFor=\"title\">\n Event title<span class=\"required\">*</span>\n </label>\n <div\n class={{\n title: true,\n error: this.validationError !== '',\n }}\n part=\"net__title\"\n ref={el => (this.titleRef = el as HTMLDivElement)}\n contentEditable=\"true\"\n onInput={e => this.handleChange(e)}\n onKeyDown={event => this.handleInputKeyDown(event)}\n ></div>\n {this.showTokens && this.filteredTokens?.length > 0 && (\n <div class=\"token-options\" part=\"net__dropdown-content\">\n <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant}>\n {this.filteredTokens.map(option => (\n <li\n tabindex=\"0\"\n key={option.label}\n id={option.label}\n class={{ active: this.ariaActivedescendant === option.label }}\n onClick={e => this.selectOption(e, option)}\n role=\"option\"\n >\n {this.getLabelHTML(option.labelHTML)}\n </li>\n ))}\n </ul>\n </div>\n )}\n <span class=\"help-text\">\n Create a dynamic templated event title by typing <code>$</code> and selecting a template item.\n <span class=\"label-icon\">\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">\n For example, Interview with <code>{'${invitee}'}</code>\n </span>\n </tooltip-component>\n </span>\n </span>\n {this.validationError != '' && <span class=\"error-message\">{this.validationError}</span>}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"nylas-event-title2.js","mappings":"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","names":["eventTitleTokens"],"sources":["src/components/scheduler-editor/nylas-event-title/nylas-event-title.scss?tag=nylas-event-title&encapsulation=shadow","src/components/scheduler-editor/nylas-event-title/nylas-event-title.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n}\n\n.nylas-event-title {\n display: flex;\n flex-direction: column;\n gap: 4px;\n position: relative;\n text-align: left;\n\n div.title {\n padding: 12px 16px;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n overflow: scroll;\n white-space: nowrap;\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n }\n\n &.error {\n border-color: var(--nylas-error);\n border-width: 2px;\n outline: none;\n }\n }\n\n input {\n padding: 12px 16px;\n border-width: 1;\n border-radius: 8px;\n border: 1px solid var(--nylas-base-200);\n }\n\n span.help-text {\n display: flex;\n gap: 4px;\n align-items: center;\n color: var(--nylas-base-800);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 21px;\n }\n\n span.error-message {\n color: var(--nylas-error);\n }\n\n label {\n display: flex;\n align-items: center;\n color: var(--nylas-base-800);\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 150%;\n\n /* 21px */\n span.required {\n color: var(--nylas-error, #cc4841);\n }\n\n span.label-icon {\n margin-left: 4px;\n\n tooltip-component {\n display: flex;\n }\n }\n }\n}\n\n.highlighted-tag {\n background-color: var(--nylas-base-200);\n border-radius: var(--nylas-border-radius);\n padding: 5px;\n margin-left: 4px;\n}\n\n.token-options {\n display: block;\n background-color: var(--nylas-base-0);\n width: 100%;\n max-height: 336px;\n overflow: auto;\n z-index: 1;\n border-radius: 4px;\n position: absolute;\n top: calc(48px + 24px + 8px); // 48px is the height of the input, 24px is the height of the label, 8px is the gap between the label and the input\n\n @media #{$mobile} {\n right: 0;\n width: 325px;\n max-width: unset;\n }\n\n box-shadow: 0px 4px 6px -2px #0000000d;\n box-shadow: 0px 10px 15px -3px #0000001a;\n\n ul {\n padding: 0;\n list-style-type: none;\n color: var(--nylas-base-900);\n max-height: 336px;\n margin: 0;\n\n li {\n padding: 16px, 12px, 16px, 12px;\n color: black;\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n font-family: inherit;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n letter-spacing: 0px;\n text-align: left;\n cursor: pointer;\n\n .token-label {\n display: flex;\n flex-direction: column;\n font-weight: 400;\n\n .token {\n color: var(--nylas-abse-900);\n font-size: 16px;\n line-height: 24px;\n }\n\n .description {\n color: var(--nylas-base-600);\n font-size: 14px;\n line-height: 21px;\n }\n }\n\n &:hover,\n &:focus,\n &:active,\n &.active {\n background-color: var(--nylas-base-100);\n\n .token-label {\n .token {\n color: var(--nylas-primary);\n }\n }\n }\n }\n }\n\n .selected {\n background-color: var(--nylas-base-100);\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, getBrowser, isNonPrintableKey, sanitize } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { EVENT_TITLE_TOKENS as eventTitleTokens } from '@/common/constants';\nimport { Configuration } from '@nylas/core';\n\ninterface CustomShadowRoot extends ShadowRoot {\n getSelection: () => Selection | null;\n}\n\ntype Token = {\n token: string;\n value: string;\n description: string;\n};\n\n/**\n * The `nylas-event-title` component is a form input for the title of an event.\n * @part net - The event title container\n * @part net__title - The event title input\n * @part net__dropdown-content - The token options container\n */\n@Component({\n tag: 'nylas-event-title',\n styleUrl: 'nylas-event-title.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasEventTitle {\n @Element() host!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n // Properties\n /**\n * @standalone\n * The selected config\n */\n @Prop() selectedConfiguration?: Configuration;\n /**\n * @standalone\n * The title of the event from the cofiguration.\n */\n @Prop() eventTitle?: string = this.selectedConfiguration?.event_booking?.title;\n /**\n * @standalone\n * The name attribute of this component.\n */\n @Prop() name: string = 'title';\n\n // State variables\n /**\n * Whether to show the tokens dropdown.\n */\n @State() showTokens: boolean = false;\n /**\n * The available token options for the dropdown.\n */\n @State() availableTokens: { label: string; value: string; labelHTML: Token }[] = eventTitleTokens.map(token => ({\n label: token.token,\n value: token.value,\n labelHTML: token,\n }));\n /**\n * The filtered token options for the dropdown based on the current query.\n */\n @State() filteredTokens: { label: string; value: string; labelHTML: Token }[] = this.availableTokens;\n /**\n * The aria-activedescendant attribute value. This is used to indicate the\n * currently active descendant in the tokens dropdown.\n */\n @State() ariaActivedescendant: string = '';\n /**\n * Stores the reference to the current word being typed.\n * This is used to update the event title with the selected token tag when\n * an option is selected from the dropdown by clicking on it.\n */\n @State() currentWord: {\n $value: string;\n fullText: string;\n index: number;\n focusOffset: number;\n } = { $value: '', fullText: '', index: -1, focusOffset: -1 };\n\n @State() validationError: string = '';\n @State() configEventTitle: string = '';\n\n // Reference to the title div element\n private titleRef!: HTMLDivElement;\n\n /**\n * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n */\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-event-title', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('ariaActivedescendant')\n ariaActivedescendantChangedHandler(newValue: string) {\n debug('nylas-event-title', 'ariaActivedescendantChangedHandler', newValue);\n if (newValue !== '') {\n const activeOption = this.host.shadowRoot?.getElementById(newValue);\n activeOption?.classList.add('active');\n } else {\n const options = this.host.shadowRoot?.querySelectorAll('.token-options li.active');\n options?.forEach(option => option.classList.remove('active'));\n }\n }\n\n @Watch('selectedConfiguration')\n configChangedHandler(newVal) {\n const title = newVal?.event_booking?.title;\n this.configEventTitle = title;\n if (title) {\n this.updateEventTitleFromProp(title);\n }\n }\n\n // Events\n /**\n * This event is fired when the value of the event title changes.\n */\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-event-title', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-event-title', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-event-title', 'componentDidLoad');\n if (this.selectedConfiguration) {\n this.eventTitle = this.selectedConfiguration?.event_booking?.title;\n }\n this.updateEventTitleFromProp(this.eventTitle || '');\n }\n\n disconnectedCallback() {\n debug('nylas-event-title', 'disconnectedCallback');\n }\n\n @Listen('formSubmitted', { target: 'window' })\n formSubmittedHandler(event: CustomEvent) {\n debug('nylas-event-title', 'formSubmittedHandler', event);\n if (!this.internals?.validity?.valid) {\n this.validationError = 'Event title is required';\n } else {\n this.validationError = '';\n }\n }\n\n updateEventTitleFromProp(newValue: string) {\n debug('nylas-event-title', 'eventTitleChangedHandler', newValue);\n const title = newValue || this.configEventTitle;\n if (this.titleRef) {\n this.titleRef.innerHTML = this.highlightTokens(title);\n this.titleRef.focus();\n if (typeof this.internals.setValidity === 'function') {\n if (!title || title === '') {\n this.internals?.setValidity({ customError: true }, `Event title is required`, this.titleRef);\n } else {\n this.internals?.setValidity({ customError: false });\n }\n }\n }\n }\n\n highlightTokens(title: string) {\n let outputHtml = title;\n\n eventTitleTokens.forEach(tokenObj => {\n const token = tokenObj.value;\n // Create a regular expression that matches the token as a whole word\n const regex = new RegExp(`(\\\\${token})(?!\\\\w)`, 'g');\n // Replace the token with a span element\n outputHtml = outputHtml?.replace(regex, '<span class=\"highlighted-tag\">$1</span>') || '';\n });\n return outputHtml;\n }\n\n getCurrentSelectionForBrowser() {\n const getSelectionTextData = (nodeValue, offset, node, allSelected) => {\n // Remove zero-width space characters from the text, because they are not visible and cause issues with the selection\n const text = nodeValue.replace(/[\\u200B-\\u200D\\uFEFF]/g, '');\n const dollarIndex = text.lastIndexOf('$');\n const lastWord = text.substring(dollarIndex).split(' ')[0];\n return {\n focusOffset: offset,\n dollarIndex,\n lastWord,\n currentText: text,\n node,\n allSelected,\n };\n };\n\n // Check if the selection has selected all the text in the node, we need this to handle the case where the user selects all the text and then types or deletes\n const isAllSelected = (selection: Selection) => selection.anchorOffset === 0 && selection.focusOffset === selection.focusNode?.nodeValue?.length;\n\n const currentBrowser = getBrowser();\n switch (currentBrowser) {\n case 'Chrome':\n const shadowRootSelection = (this.host.shadowRoot as CustomShadowRoot)?.getSelection();\n const focusNode = shadowRootSelection?.focusNode;\n const focusNodeValue = focusNode?.nodeValue || '';\n const allSelected = shadowRootSelection && isAllSelected(shadowRootSelection);\n return getSelectionTextData(focusNodeValue, shadowRootSelection?.focusOffset || -1, focusNode, allSelected);\n case 'Firefox':\n const selection = document.getSelection();\n const anchorNodeValue = selection?.anchorNode?.nodeValue || '';\n const allSelectedFirefox = selection && isAllSelected(selection);\n return getSelectionTextData(anchorNodeValue, selection?.focusOffset || -1, selection?.anchorNode, allSelectedFirefox);\n case 'Safari':\n const windowSelection = window.getSelection();\n const anchorNode = (windowSelection as any)?.getComposedRanges(this.host.shadowRoot as CustomShadowRoot)[0];\n const currentText = anchorNode?.startContainer?.nodeValue || '';\n const allSelectedSafari = windowSelection && isAllSelected(windowSelection);\n return getSelectionTextData(currentText, anchorNode?.endOffset || -1, anchorNode?.startContainer, allSelectedSafari);\n default:\n console.warn('Browser not supported');\n return null;\n }\n }\n\n handleChange(event: Event) {\n let textContent = (event.target as HTMLDivElement).textContent || '';\n textContent = sanitize(textContent);\n\n // All browsers handle Selection within Shadow DOM differently, so get the current selection based on the browser\n const currentSelection = this.getCurrentSelectionForBrowser();\n if (!currentSelection) {\n this.updateEventTitle(textContent);\n this.resetDropdown();\n return;\n }\n const { focusOffset, dollarIndex, lastWord, currentText } = currentSelection;\n\n if (dollarIndex === -1 || focusOffset < dollarIndex) {\n this.updateEventTitle(textContent);\n this.resetDropdown();\n return;\n }\n if (lastWord.startsWith('$')) {\n this.showTokens = true;\n // Update the current word being typed, we need this reference to update the event title with the selected token\n // because the user can select an option from the dropdown by clicking on it, which will not trigger the input event.\n this.currentWord = {\n $value: lastWord,\n fullText: currentText,\n index: dollarIndex,\n focusOffset,\n };\n this.populateSuggestionsDropdown(lastWord);\n } else {\n this.resetDropdown();\n }\n this.updateEventTitle(textContent);\n }\n\n handleInputKeyDown(event) {\n const selection = this.getCurrentSelectionForBrowser();\n\n // If no text is remaining in the title, reset the title to an empty string\n if (selection?.allSelected && !isNonPrintableKey(event)) {\n this.titleRef.innerHTML = '';\n }\n\n if (event.key === 'Enter') {\n event.preventDefault();\n const activeOption = this.host.shadowRoot?.getElementById(this.ariaActivedescendant);\n if (activeOption) {\n activeOption.click();\n this.ariaActivedescendant = '';\n }\n } else if (event.key === 'ArrowDown') {\n event.preventDefault();\n const activeOption = this.host.shadowRoot?.getElementById(this.ariaActivedescendant);\n if (activeOption) {\n const nextOption = activeOption.nextElementSibling;\n if (nextOption) {\n this.ariaActivedescendant = nextOption.id;\n } else {\n this.ariaActivedescendant = this.filteredTokens[0].label;\n }\n } else {\n this.ariaActivedescendant = this.filteredTokens[0].label;\n }\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n const activeOption = this.host.shadowRoot?.getElementById(this.ariaActivedescendant);\n if (activeOption) {\n const prevOption = activeOption.previousElementSibling;\n if (prevOption) {\n this.ariaActivedescendant = prevOption.id;\n } else {\n this.ariaActivedescendant = this.filteredTokens[this.filteredTokens.length - 1].label;\n }\n } else {\n this.ariaActivedescendant = this.filteredTokens[this.filteredTokens.length - 1].label;\n }\n } else if (event.key === 'Escape') {\n event.preventDefault();\n this.resetDropdown();\n } else if (event.key === 'Backspace' || event.key === 'Delete') {\n const parentNode = selection?.node?.parentNode;\n if (selection?.currentText.startsWith('${') && parentNode) {\n event.preventDefault();\n parentNode.removeChild(selection.node);\n parentNode.remove();\n this.resetDropdown();\n }\n if (this.titleRef.textContent === '' || selection?.allSelected) {\n this.titleRef.innerHTML = '';\n this.updateEventTitle('');\n }\n }\n }\n\n selectOption(e: Event, option: { label: string; value: string; labelHTML: Token }) {\n e.preventDefault();\n const word = this.currentWord.fullText;\n const dollarWord = this.currentWord.$value;\n\n // Traverse the DOM to find the text node that contains the current word fullText\n let currentNode = this.titleRef.firstChild;\n let textNode: ChildNode | null = null;\n\n while (currentNode) {\n if (currentNode.nodeType === 3) {\n const currentNodeText = currentNode.textContent?.replace(/[\\u200B-\\u200D\\uFEFF]/g, '') || '';\n const wordText = word.replace(/[\\u200B-\\u200D\\uFEFF]/g, '');\n if (currentNodeText.includes(wordText)) {\n textNode = currentNode;\n break;\n }\n }\n currentNode = currentNode.nextSibling;\n }\n\n if (!textNode) {\n return;\n }\n // Split the text node into three parts: text before the token, the token, and text after the token\n const text = textNode.textContent || '';\n const index = text.indexOf(dollarWord);\n const textBefore = text.substring(0, index);\n const textAfter = text.substring(index + dollarWord.length);\n const newTextNode = document.createTextNode(textBefore);\n const newRange = document.createRange();\n\n // Create a new span element to replace the text node\n const tagSpan = document.createElement('span');\n tagSpan.classList.add('highlighted-tag');\n tagSpan.textContent = `${option.value}`;\n const newTextNodeAfter = document.createTextNode(textAfter);\n\n if (textAfter !== '') {\n // If there is text after the token, add it to the new span element\n textNode.replaceWith(newTextNode, tagSpan, newTextNodeAfter);\n newRange.setStart(newTextNodeAfter, 1);\n } else {\n // If there is no text after the token, add a zero-width space character (Without this, the cursor will not move outside the highlighted span element)\n const afterNode = document.createTextNode('\\u200B');\n textNode.replaceWith(newTextNode, tagSpan, afterNode);\n newRange.setStart(afterNode, 1);\n }\n\n // Hide the dropdown\n this.resetDropdown();\n this.titleRef.focus();\n\n // Set the focus to the new span element\n const sel = window.getSelection();\n newRange.collapse(true);\n sel?.removeAllRanges();\n sel?.addRange(newRange);\n\n // Update the event title with the selected token\n this.updateEventTitle(this.titleRef.textContent || '');\n }\n\n populateSuggestionsDropdown(query: string = '') {\n this.filteredTokens = this.availableTokens.filter(obj => {\n return obj.label.startsWith(query.toString()) || obj.value.startsWith(query.toString());\n });\n\n // Set the first option as the active descendant\n if (this.filteredTokens.length > 0) {\n this.ariaActivedescendant = this.filteredTokens[0].label;\n }\n }\n\n get isInternalsAvailable() {\n return typeof this.internals !== 'undefined' && typeof this.internals.setValidity === 'function' && typeof this.internals.setFormValue === 'function';\n }\n\n updateEventTitle(text: string) {\n const value = text.replace(/ +/g, ' ');\n if (value === '' || /^[\\s]*$/.test(value)) {\n this.validationError = 'Event title is required';\n this.isInternalsAvailable && this.internals?.setValidity({ customError: true }, `Event title is required`, this.titleRef);\n } else {\n this.validationError = '';\n this.isInternalsAvailable && this.internals?.setValidity({ customError: false });\n }\n this.isInternalsAvailable && this.internals?.setFormValue(value, this.name);\n this.valueChanged.emit({ value: value, name: this.name });\n }\n\n resetDropdown() {\n this.showTokens = false;\n this.ariaActivedescendant = '';\n }\n\n getLabelHTML(token: { token: string; description: string }) {\n return (\n <div class=\"token-label\">\n <span class=\"token\">{token.token}</span>\n <span class=\"description\">{token.description}</span>\n </div>\n );\n }\n\n @RegisterComponent<NylasEventTitle, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-event-title',\n stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <div class=\"nylas-event-title\" part=\"net\">\n <label htmlFor=\"title\">\n Event title<span class=\"required\">*</span>\n </label>\n <div\n class={{\n title: true,\n error: this.validationError !== '',\n }}\n part=\"net__title\"\n ref={el => (this.titleRef = el as HTMLDivElement)}\n contentEditable=\"true\"\n onInput={e => this.handleChange(e)}\n onKeyDown={event => this.handleInputKeyDown(event)}\n ></div>\n {this.showTokens && this.filteredTokens?.length > 0 && (\n <div class=\"token-options\" part=\"net__dropdown-content\">\n <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant}>\n {this.filteredTokens.map(option => (\n <li\n tabindex=\"0\"\n key={option.label}\n id={option.label}\n class={{ active: this.ariaActivedescendant === option.label }}\n onClick={e => this.selectOption(e, option)}\n role=\"option\"\n >\n {this.getLabelHTML(option.labelHTML)}\n </li>\n ))}\n </ul>\n </div>\n )}\n <span class=\"help-text\">\n Create a dynamic templated event title by typing <code>$</code> and selecting a template item.\n <span class=\"label-icon\">\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">\n For example, Interview with <code>{'${invitee}'}</code>\n </span>\n </tooltip-component>\n </span>\n </span>\n {this.validationError != '' && <span class=\"error-message\">{this.validationError}</span>}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -24,22 +24,29 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
|
|
|
24
24
|
if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
|
|
25
25
|
return Reflect.metadata(k, v);
|
|
26
26
|
};
|
|
27
|
+
const reminderTimeOptions = [
|
|
28
|
+
{ value: 60 * 24, label: 'day' },
|
|
29
|
+
{ value: 60, label: 'hour' },
|
|
30
|
+
{ value: 1, label: 'minute' },
|
|
31
|
+
];
|
|
27
32
|
function getInitialTimeValue(timeInMinutes) {
|
|
28
33
|
if (!timeInMinutes)
|
|
29
34
|
return 30;
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
35
|
+
for (const option of reminderTimeOptions) {
|
|
36
|
+
if (timeInMinutes % option.value === 0) {
|
|
37
|
+
return timeInMinutes / option.value;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
34
40
|
return timeInMinutes;
|
|
35
41
|
}
|
|
36
42
|
function getInitialTimeIncrement(timeInMinutes) {
|
|
37
43
|
if (!timeInMinutes)
|
|
38
|
-
return
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
44
|
+
return 1;
|
|
45
|
+
for (const option of reminderTimeOptions) {
|
|
46
|
+
if (timeInMinutes % option.value === 0) {
|
|
47
|
+
return option.value;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
43
50
|
return 1;
|
|
44
51
|
}
|
|
45
52
|
const NylasReminderTime = proxyCustomElement(class NylasReminderTime extends HTMLElement {
|
|
@@ -60,15 +67,6 @@ const NylasReminderTime = proxyCustomElement(class NylasReminderTime extends HTM
|
|
|
60
67
|
debug('nylas-reminder-time', 'elementNameChangedHandler', newValue);
|
|
61
68
|
this.host.setAttribute('name', newValue);
|
|
62
69
|
}
|
|
63
|
-
eventReminderTimeMinutesChangedHandler(newValue, oldValue) {
|
|
64
|
-
debug('nylas-reminder-time', 'eventReminderTimeMinutesChangedHandler', newValue);
|
|
65
|
-
if (newValue === oldValue) {
|
|
66
|
-
return;
|
|
67
|
-
}
|
|
68
|
-
this.reminderTime = getInitialTimeValue(newValue);
|
|
69
|
-
this.reminderTimeincrement = getInitialTimeIncrement(newValue);
|
|
70
|
-
this.reminderTimeMinutes = newValue;
|
|
71
|
-
}
|
|
72
70
|
reminderTimeMinutesChangedHandler(newValue, oldValue) {
|
|
73
71
|
debug('nylas-reminder-time', 'reminderTimeMinutesChangedHandler', newValue);
|
|
74
72
|
if (newValue === oldValue) {
|
|
@@ -82,14 +80,17 @@ const NylasReminderTime = proxyCustomElement(class NylasReminderTime extends HTM
|
|
|
82
80
|
componentWillLoad() {
|
|
83
81
|
debug('nylas-reminder-time', 'componentWillLoad');
|
|
84
82
|
this.host.setAttribute('name', this.name);
|
|
85
|
-
this.setReminderTimeMinuteOptions();
|
|
86
83
|
}
|
|
87
84
|
componentDidLoad() {
|
|
88
85
|
debug('nylas-reminder-time', 'componentDidLoad');
|
|
86
|
+
this.setReminderTimeMinuteOptions();
|
|
89
87
|
}
|
|
90
88
|
disconnectedCallback() {
|
|
91
89
|
debug('nylas-reminder-time', 'disconnectedCallback');
|
|
92
90
|
}
|
|
91
|
+
get isInternalsAvailable() {
|
|
92
|
+
return this.internals !== undefined && typeof this.internals.setFormValue === 'function';
|
|
93
|
+
}
|
|
93
94
|
setReminderTimeMinuteOptions() {
|
|
94
95
|
if (this.reminderTimeincrement === 1) {
|
|
95
96
|
this.reminderTimeMinutesOptions = REMINDER_MINUTE_OPTIONS;
|
|
@@ -113,28 +114,22 @@ const NylasReminderTime = proxyCustomElement(class NylasReminderTime extends HTM
|
|
|
113
114
|
}
|
|
114
115
|
this.setReminderTimeMinuteOptions();
|
|
115
116
|
this.reminderTimeMinutes = this.reminderTime * this.reminderTimeincrement;
|
|
116
|
-
this.internals.setFormValue(this.reminderTimeMinutes.toString(), this.name);
|
|
117
|
+
this.isInternalsAvailable && this.internals.setFormValue(this.reminderTimeMinutes.toString(), this.name);
|
|
117
118
|
}
|
|
118
119
|
inputOptionChangedHandler(event) {
|
|
119
120
|
debug('nylas-calendar-picker', 'inputOptionChangedHandler', event.detail);
|
|
120
121
|
const { value } = event.detail;
|
|
121
122
|
this.reminderTime = value;
|
|
122
123
|
this.reminderTimeMinutes = this.reminderTime * this.reminderTimeincrement;
|
|
123
|
-
this.internals.setFormValue(this.reminderTimeMinutes.toString(), this.name);
|
|
124
|
+
this.isInternalsAvailable && this.internals.setFormValue(this.reminderTimeMinutes.toString(), this.name);
|
|
124
125
|
}
|
|
125
126
|
render() {
|
|
126
|
-
|
|
127
|
-
{ value: 1, label: 'minute' },
|
|
128
|
-
{ value: 60, label: 'hour' },
|
|
129
|
-
{ value: 60 * 24, label: 'day' },
|
|
130
|
-
];
|
|
131
|
-
return (h(Host, { key: 'd5f118391bdd7e4779f6eca15335285047fdb350' }, h("div", { key: '2dd8d3ba52d4f95480c9cf1fdaf5d0f1f7c1e523', class: "nylas-reminder-time", part: "nrt" }, h("div", { key: '3799c4b266f4078e22ad78b86225ef9abdc5fa49', class: "nylas-reminder-time__wrapper" }, h("input-dropdown", { key: '004b6336c041660e1424ac44f16e82c8a5a2ca53', name: 'reminder-time', options: this.reminderTimeMinutesOptions, inputValue: this.reminderTime.toString(), exportparts: "id_dropdown: nrt__input_dropdown, id_dropdown-input: nrt__input_dropdown-input, id_dropdown-content: nrt__input_dropdown-content", defaultInputOption: this.reminderTimeMinutesOptions.find(i => i.value == this.reminderTime) ?? reminderTimeOptions[0] }), h("select-dropdown", { key: '6a42c7f4633d89dd9a94d3c2f119e151613667ec', name: 'reminder-time-unit', options: reminderTimeOptions, pluralizedLabel: this.reminderTime > 1 ? 's' : '', exportparts: "sd_dropdown: nrt__dropdown, sd_dropdown-button: nrt__dropdown-button, sd_dropdown-content: nrt__dropdown-content", defaultSelectedOption: reminderTimeOptions.find(i => i.value == this.reminderTimeincrement) ?? reminderTimeOptions[0], withSearch: false })))));
|
|
127
|
+
return (h(Host, { key: 'b089eb10d76d001112d867a61889a685b8908355' }, h("div", { key: '13b8479fb822135c00ff8f97974c8269731b2a84', class: "nylas-reminder-time", part: "nrt" }, h("div", { key: '728e90c61077b1037aa285329f11a09a296b33b4', class: "nylas-reminder-time__wrapper" }, h("input-dropdown", { key: '40a22b75424d4b3b552a2dc1b60e79a8cb595032', name: 'reminder-time', options: this.reminderTimeMinutesOptions, inputValue: this.reminderTime.toString(), exportparts: "id_dropdown: nrt__input_dropdown, id_dropdown-input: nrt__input_dropdown-input, id_dropdown-content: nrt__input_dropdown-content", defaultInputOption: this.reminderTimeMinutesOptions.find(i => i.value == this.reminderTime) ?? reminderTimeOptions[0] }), h("select-dropdown", { key: '6128bb953b883be5341ba005438ab353b0016c48', name: 'reminder-time-unit', options: [...reminderTimeOptions].sort((a, b) => a.value - b.value), pluralizedLabel: this.reminderTime > 1 ? 's' : '', exportparts: "sd_dropdown: nrt__dropdown, sd_dropdown-button: nrt__dropdown-button, sd_dropdown-content: nrt__dropdown-content", defaultSelectedOption: reminderTimeOptions.find(i => i.value == this.reminderTimeincrement) ?? reminderTimeOptions[0], withSearch: false })))));
|
|
132
128
|
}
|
|
133
129
|
static get formAssociated() { return true; }
|
|
134
130
|
get host() { return this; }
|
|
135
131
|
static get watchers() { return {
|
|
136
132
|
"name": ["elementNameChangedHandler"],
|
|
137
|
-
"eventReminderTimeMinutes": ["eventReminderTimeMinutesChangedHandler"],
|
|
138
133
|
"reminderTimeMinutes": ["reminderTimeMinutesChangedHandler"]
|
|
139
134
|
}; }
|
|
140
135
|
static get style() { return NylasReminderTimeStyle0; }
|
|
@@ -147,7 +142,6 @@ const NylasReminderTime = proxyCustomElement(class NylasReminderTime extends HTM
|
|
|
147
142
|
"reminderTimeMinutesOptions": [32]
|
|
148
143
|
}, [[0, "nylasFormDropdownChanged", "nylasFormDropdownChangedHandler"], [0, "inputOptionChanged", "inputOptionChangedHandler"]], {
|
|
149
144
|
"name": ["elementNameChangedHandler"],
|
|
150
|
-
"eventReminderTimeMinutes": ["eventReminderTimeMinutesChangedHandler"],
|
|
151
145
|
"reminderTimeMinutes": ["reminderTimeMinutesChangedHandler"]
|
|
152
146
|
}]);
|
|
153
147
|
__decorate([
|