@nylas/web-elements 1.1.1 → 1.1.2

package/dist/esm/calendar-agenda-fill-icon_48.entry.js

@@ -5702,7 +5702,7 @@ __decorate$h([
 ], NylasCustomBookingFlow.prototype, "render", null);
 NylasCustomBookingFlow.style = NylasCustomBookingFlowStyle0;
 
-const nylasCustomEventSlugCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;width:inherit}.nylas-custom-event-slug{width:inherit;display:flex;flex-direction:column;margin:1rem;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-200);text-align:left}.nylas-custom-event-slug .header{padding:1rem;display:grid;grid-template-columns:1fr auto}.nylas-custom-event-slug .header h3{border-radius:var(--nylas-border-radius-2x);margin:0;font-size:1rem;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-custom-event-slug .header p{margin:0.25rem 0 0 0;font-size:0.875rem;font-weight:400;line-height:20px;color:var(--nylas-base-600);text-align:left}.nylas-custom-event-slug .header .drawer-toggle{display:flex;gap:24px;align-items:center}.nylas-custom-event-slug .header .drawer-toggle .chevron{display:flex;align-self:center;cursor:pointer}.nylas-custom-event-slug .header .drawer-toggle .chevron:hover,.nylas-custom-event-slug .header .drawer-toggle .chevron:active{color:var(--nylas-primary)}.nylas-custom-event-slug .header .drawer-toggle .chevron.open{transform:rotate(90deg)}.nylas-custom-event-slug .header .drawer-toggle .chevron.closed{transform:rotate(270deg)}.nylas-custom-event-slug .header .drawer-toggle .chevron.disabled{cursor:not-allowed;color:var(--nylas-base-300)}.nylas-custom-event-slug .header .drawer-toggle .chevron.disabled:hover{color:var(--nylas-base-300)}.nylas-custom-event-slug .nylas-custom-event-slug__body{display:grid;grid-template-columns:1fr;background-color:var(--nylas-base-25);border-radius:0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);border-top:1px solid var(--nylas-base-200)}@media screen and (max-width: 768px){.nylas-custom-event-slug .nylas-custom-event-slug__body{grid-template-columns:1fr}}.nylas-custom-event-slug .nylas-custom-event-slug__body .nylas-custom-event-slug__section{padding:1rem;display:flex;flex-direction:column;gap:1rem;color:var(--nylas-base-800)}@media screen and (max-width: 768px){.nylas-custom-event-slug .nylas-custom-event-slug__body .nylas-custom-event-slug__section{border:none}}.nylas-custom-event-slug .nylas-custom-event-slug__body .nylas-custom-event-slug__section .nylas-custom-event-slug__row{display:flex;align-items:center;gap:1rem}.nylas-custom-event-slug .nylas-custom-event-slug__body .nylas-custom-event-slug__section .nylas-custom-event-slug__row label{display:flex;align-items:center}.nylas-custom-event-slug .nylas-custom-event-slug__body .nylas-custom-event-slug__section .nylas-custom-event-slug__row label span.required{color:var(--nylas-error, #cc4841)}.nylas-custom-event-slug .nylas-custom-event-slug__body .nylas-custom-event-slug__section .nylas-custom-event-slug__row label span.label-icon{margin-left:4px}.nylas-custom-event-slug .nylas-custom-event-slug__body .nylas-custom-event-slug__section .nylas-custom-event-slug__row label span.label-icon tooltip-component{display:flex}.nylas-custom-event-slug .nylas-custom-event-slug__body .nylas-custom-event-slug__section .nylas-custom-event-slug__row p{margin:0.25rem 0 0 0;font-size:1rem;font-weight:500;line-height:24px;color:var(--nylas-base-900)}.nylas-custom-event-slug .nylas-custom-event-slug__body .nylas-custom-event-slug__section .nylas-custom-event-slug__row .input-container{width:100%}.nylas-custom-event-slug .nylas-custom-event-slug__body span.error-message{color:var(--nylas-error)}.nylas-custom-event-slug .nylas-custom-event-slug__body span.help-text{margin:0.25rem 0 0 0;font-size:0.875rem;font-weight:400;line-height:20px;color:var(--nylas-base-600);text-align:left}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper{display:flex;height:48px;padding-left:16px;align-items:center;gap:8px;align-self:stretch;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-300);background:var(--nylas-base-0);width:-webkit-fill-available;color:var(--nylas-base-900);font-size:16px;font-style:normal;font-weight:400;line-height:150%;width:-moz-available;width:-webkit-fill-available;display:flex;flex-direction:row;gap:0.125rem;border-radius:var(--nylas-border-radius-2x);z-index:1}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper:focus{outline-color:var(--nylas-primary)}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper.error{border-radius:var(--nylas-border-radius-2x);font-weight:600;border-color:var(--nylas-error);border-width:2px}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper.error::placeholder{font-weight:400}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper::placeholder{color:var(--nylas-base-300)}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper.focus{outline:2px solid var(--nylas-primary)}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper.error{border-color:var(--nylas-error);outline:none}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper input-component::part(ic__input){outline:none;border:none;width:100%;font-size:1rem;height:auto;padding-left:0px}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper .prefix{z-index:1;margin-top:1px;color:var(--nylas-base-600);font-size:1rem}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper .icon{margin-right:0.25rem;padding:0 0.75rem;height:100%;display:flex;align-items:center;right:0;cursor:pointer;user-select:none}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper .icon:hover svg path{fill:var(--nylas-primary)}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper .icon:active svg path{fill:var(--nylas-base-500)}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper .icon .copied{display:flex;align-items:center;font-size:0.875rem;gap:0.125rem}";
+const nylasCustomEventSlugCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;width:inherit}.nylas-custom-event-slug{width:inherit;display:flex;flex-direction:column;margin:1rem;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-200);text-align:left}.nylas-custom-event-slug .header{padding:1rem;display:grid;grid-template-columns:1fr auto}.nylas-custom-event-slug .header h3{border-radius:var(--nylas-border-radius-2x);margin:0;font-size:1rem;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-custom-event-slug .header p{margin:0.25rem 0 0 0;font-size:0.875rem;font-weight:400;line-height:20px;color:var(--nylas-base-600);text-align:left}.nylas-custom-event-slug .header .drawer-toggle{display:flex;gap:24px;align-items:center}.nylas-custom-event-slug .header .drawer-toggle .chevron{display:flex;align-self:center;cursor:pointer}.nylas-custom-event-slug .header .drawer-toggle .chevron:hover,.nylas-custom-event-slug .header .drawer-toggle .chevron:active{color:var(--nylas-primary)}.nylas-custom-event-slug .header .drawer-toggle .chevron.open{transform:rotate(90deg)}.nylas-custom-event-slug .header .drawer-toggle .chevron.closed{transform:rotate(270deg)}.nylas-custom-event-slug .header .drawer-toggle .chevron.disabled{cursor:not-allowed;color:var(--nylas-base-300)}.nylas-custom-event-slug .header .drawer-toggle .chevron.disabled:hover{color:var(--nylas-base-300)}.nylas-custom-event-slug .nylas-custom-event-slug__body{display:grid;grid-template-columns:1fr;background-color:var(--nylas-base-25);border-radius:0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);border-top:1px solid var(--nylas-base-200)}@media screen and (max-width: 768px){.nylas-custom-event-slug .nylas-custom-event-slug__body{grid-template-columns:1fr}}.nylas-custom-event-slug .nylas-custom-event-slug__body .nylas-custom-event-slug__section{padding:1rem;display:flex;flex-direction:column;gap:1rem;color:var(--nylas-base-800)}@media screen and (max-width: 768px){.nylas-custom-event-slug .nylas-custom-event-slug__body .nylas-custom-event-slug__section{border:none}}.nylas-custom-event-slug .nylas-custom-event-slug__body .nylas-custom-event-slug__section .nylas-custom-event-slug__row{display:flex;align-items:center;gap:1rem}.nylas-custom-event-slug .nylas-custom-event-slug__body .nylas-custom-event-slug__section .nylas-custom-event-slug__row label{display:flex;align-items:center}.nylas-custom-event-slug .nylas-custom-event-slug__body .nylas-custom-event-slug__section .nylas-custom-event-slug__row label span.required{color:var(--nylas-error, #cc4841)}.nylas-custom-event-slug .nylas-custom-event-slug__body .nylas-custom-event-slug__section .nylas-custom-event-slug__row label span.label-icon{margin-left:4px}.nylas-custom-event-slug .nylas-custom-event-slug__body .nylas-custom-event-slug__section .nylas-custom-event-slug__row label span.label-icon tooltip-component{display:flex}.nylas-custom-event-slug .nylas-custom-event-slug__body .nylas-custom-event-slug__section .nylas-custom-event-slug__row p{margin:0.25rem 0 0 0;font-size:1rem;font-weight:500;line-height:24px;color:var(--nylas-base-900)}.nylas-custom-event-slug .nylas-custom-event-slug__body .nylas-custom-event-slug__section .nylas-custom-event-slug__row .input-container{width:100%}.nylas-custom-event-slug .nylas-custom-event-slug__body span.error-message{color:var(--nylas-error)}.nylas-custom-event-slug .nylas-custom-event-slug__body span.help-text{margin:0.25rem 0 0 0;font-size:0.875rem;font-weight:400;line-height:20px;color:var(--nylas-base-600);text-align:left}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper{display:flex;height:48px;padding-left:16px;align-items:center;gap:8px;align-self:stretch;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-300);background:var(--nylas-base-0);width:-webkit-fill-available;color:var(--nylas-base-900);font-size:16px;font-style:normal;font-weight:400;line-height:150%;width:-moz-available;width:-webkit-fill-available;display:flex;flex-direction:row;gap:0.125rem;border-radius:var(--nylas-border-radius-2x);z-index:1}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper:focus{outline-color:var(--nylas-primary)}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper.error{border-radius:var(--nylas-border-radius-2x);font-weight:600;border-color:var(--nylas-error);border-width:2px}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper.error::placeholder{font-weight:400}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper::placeholder{color:var(--nylas-base-300)}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper.focus{outline:2px solid var(--nylas-primary)}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper.error{border-color:var(--nylas-error);outline:none}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper input-component::part(ic__input){outline:none;border:none;width:100%;font-size:1rem;height:auto;padding-left:0px}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper .prefix{z-index:1;margin-top:1px;color:var(--nylas-base-400);font-weight:500;font-size:24px}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper .icon{margin-right:0.25rem;padding:0 0.75rem;height:100%;display:flex;align-items:center;right:0;cursor:pointer;user-select:none}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper .icon.disabled{cursor:not-allowed}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper .icon:hover svg path{fill:var(--nylas-primary)}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper .icon:active svg path{fill:var(--nylas-base-500)}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper .icon .copied{display:flex;align-items:center;font-size:0.875rem;gap:0.125rem}";
 const NylasCustomEventSlugStyle0 = nylasCustomEventSlugCss;
 
 var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -5730,7 +5730,6 @@ const NylasCustomEventSlug = class {
             this.internals = hostRef.$hostElement$.attachInternals();
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
-        this.baseUrl = '';
         this.selectedConfiguration = undefined;
         this.defaultUrlSlug = undefined;
         this.isOpen = true;
@@ -5793,6 +5792,8 @@ const NylasCustomEventSlug = class {
         this.focus = true;
     }
     async nylasFormInputBlurHandler() {
+        this.slugErrorMessage = '';
+        this.internals.setValidity({});
         this.focus = false;
         if (this.requiresSlug && this.urlSlug === '') {
             this.internals.setValidity({ customError: true }, 'Slug is required');
@@ -5813,7 +5814,7 @@ const NylasCustomEventSlug = class {
     }
     async copyToClipboard() {
         try {
-            await navigator.clipboard.writeText(`${this.baseUrl}${this.urlSlug}`);
+            await navigator.clipboard.writeText(`${this.urlSlug}`);
             this.copied = true;
             setTimeout(() => {
                 this.copied = false;
@@ -5827,7 +5828,7 @@ const NylasCustomEventSlug = class {
         if (!this.requiresSlug)
             return null;
         const isComponentReady = typeof this.urlSlug !== 'undefined';
-        return (h(Host, null, h("div", { class: "nylas-custom-event-slug", part: "nces" }, h("div", { class: "header", part: "nces__header" }, h("div", null, h("h3", null, "Custom event slug"), h("p", null, "Create a custom URL slug for this event")), h("div", { class: "drawer-toggle", part: "nces__drawer-toggle--container" }, h("span", { class: `chevron ${this.isOpen ? 'open' : 'closed'} `, onClick: () => this.toggleDrawer() }, h("chevron-icon", { width: "24", height: "24" })))), this.isOpen && (h("div", { class: "nylas-custom-event-slug__body", part: "nces__body" }, h("div", { class: "nylas-custom-event-slug__section" }, h("div", { class: "nylas-custom-event-slug__row" }, h("div", { class: "input-container" }, h("label", null, "Event URL slug", h("span", { class: "label-icon" }, h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Provide a custom slug for your URL to help uniquely identify your event (letters, numbers, and hyphens only)")))), h("div", { class: { 'nylas-custom-event-slug__input-wrapper': true, 'focus': this.focus, 'error': !!this.slugErrorMessage } }, h("div", { slot: "prefix", class: "prefix" }, this.baseUrl), isComponentReady && (h("input-component", { name: "event-slug", id: "event-slug", type: "text", required: false, exportparts: "ic_input: nces__input-textfield", defaultValue: this.urlSlug })), h("div", { slot: "icon", class: "icon", onClick: () => !this.copied && this.copyToClipboard() }, this.copied ? (h("div", { class: "copied" }, h("checkmark-icon", { width: "12", height: "18" }), " Copied!")) : (h("copy-icon", { width: "12", height: "18" })))), this.slugErrorMessage && h("span", { class: "error-message" }, this.slugErrorMessage)))))))));
+        return (h(Host, null, h("div", { class: "nylas-custom-event-slug", part: "nces" }, h("div", { class: "header", part: "nces__header" }, h("div", null, h("h3", null, "Custom event slug"), h("p", null, "Create a custom URL slug for this event")), h("div", { class: "drawer-toggle", part: "nces__drawer-toggle--container" }, h("span", { class: `chevron ${this.isOpen ? 'open' : 'closed'} `, onClick: () => this.toggleDrawer() }, h("chevron-icon", { width: "24", height: "24" })))), this.isOpen && (h("div", { class: "nylas-custom-event-slug__body", part: "nces__body" }, h("div", { class: "nylas-custom-event-slug__section" }, h("div", { class: "nylas-custom-event-slug__row" }, h("div", { class: "input-container" }, h("label", null, "Event URL slug", h("span", { class: "label-icon" }, h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Provide a custom slug for your URL to help uniquely identify your event (letters, numbers, and hyphens only)")))), h("div", { class: { 'nylas-custom-event-slug__input-wrapper': true, 'focus': this.focus, 'error': !!this.slugErrorMessage } }, h("div", { slot: "prefix", class: "prefix" }, "/"), isComponentReady && (h("input-component", { name: "event-slug", id: "event-slug", type: "text", required: false, placeholder: "my-link-name", exportparts: "ic_input: nces__input-textfield", defaultValue: this.urlSlug })), h("div", { slot: "icon", class: { icon: true, disabled: !this.urlSlug }, onClick: () => !this.copied && !!this.urlSlug && this.copyToClipboard() }, this.copied ? (h("div", { class: "copied" }, h("checkmark-icon", { width: "12", height: "18" }), " Copied!")) : (h("copy-icon", { width: "12", height: "18" })))), this.slugErrorMessage && h("span", { class: "error-message" }, this.slugErrorMessage)))))))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }