@ncino/web-components 13.8.0 → 13.9.0

package/dist/components/toast/gator/toast-constants.js

@@ -1 +1 @@
-const A=2,T=300,_=350;export{A as MAX_TOAST_ACTIONS,T as TOAST_ANIMATION_DURATION_MS,_ as TOAST_CLOSE_DIALOG_DELAY_MS};
+const A=2,T=300,O=350;export{A as MAX_TOAST_ACTIONS,T as TOAST_ANIMATION_DURATION_MS,O as TOAST_CLOSE_POPOVER_DELAY_MS};

package/dist/components/toaster/gator/toaster.gator.js

@@ -1,14 +1,10 @@
-import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as h}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js";import{LitElement as _}from"../../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";import{property as p}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{state as d}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";import{customElement as g}from"../../../utils/decorators/custom-element-decorator.js";import f from"../../../packages/web-components/src/components/toaster/gator/toaster.gator.scss.js";import T from"../../../packages/styles/dist/tokens/primitive.tokens.css.js";import D from"../../../packages/styles/dist/tokens/semantic.tokens.css.js";import"../../toast-container/gator/toast-container.gator.js";import{createRef as O,ref as v}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{MAX_TOAST_ACTIONS as c,TOAST_CLOSE_DIALOG_DELAY_MS as m}from"../../toast/gator/toast-constants.js";import{unsafeCSS as u}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var y=Object.defineProperty,S=Object.getOwnPropertyDescriptor,r=(o,t,e,a)=>{for(var i=a>1?void 0:a?S(t,e):t,l=o.length-1,n;l>=0;l--)(n=o[l])&&(i=(a?n(t,e,i):n(i))||i);return a&&i&&y(t,e,i),i};let s=class extends _{constructor(){super(...arguments),this.position="top-right",this.defaultToastOptions={},this._toasts=[],this._dialogOpen=!1,this._dialogRef=O(),this._closeDialogTimeout=null}addToast(o){const t=crypto.randomUUID(),e=o.duration??this.defaultToastOptions?.duration??s.defaultDuration,a=!e||e===0;let i=o.actions;i&&i.length>c&&(console.warn(`[ngc-toaster] Toast actions are limited to ${c}. Extra actions were ignored.`),i=i.slice(0,c));const l={...this.defaultToastOptions,...o,id:t,sticky:a,actions:i};return this._toasts=[...this._toasts,l],this._closeDialogTimeout!==null&&(clearTimeout(this._closeDialogTimeout),this._closeDialogTimeout=null),this._dialogOpen=!0,a||setTimeout(()=>{this.removeToast(t)},e),t}removeToast(o){this._toasts=this._toasts.filter(t=>t.id!==o),this._toasts.length===0&&(this._closeDialogTimeout!==null&&clearTimeout(this._closeDialogTimeout),this._closeDialogTimeout=window.setTimeout(()=>{this._dialogOpen=!1,this._closeDialogTimeout=null},m))}clearAll(){this._toasts=[],this._closeDialogTimeout!==null&&clearTimeout(this._closeDialogTimeout),this._closeDialogTimeout=window.setTimeout(()=>{this._dialogOpen=!1,this._closeDialogTimeout=null},m)}handleToastDismiss(o){const t=o.detail.id;t&&this.removeToast(t)}updated(o){if(super.updated(o),o.has("_dialogOpen")){const t=this._dialogRef.value;if(!t)return;this._dialogOpen&&!t.open?t.show():!this._dialogOpen&&t.open&&t.close()}}disconnectedCallback(){super.disconnectedCallback(),this._closeDialogTimeout!==null&&(clearTimeout(this._closeDialogTimeout),this._closeDialogTimeout=null)}render(){return h`
-            <dialog
-                ${v(this._dialogRef)}
-                class="gator-toaster-dialog"
-                @click=${this.preventDialogClose}
-            >
+import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as h}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js";import{LitElement as f}from"../../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";import{property as u}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{state as m}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";import{customElement as _}from"../../../utils/decorators/custom-element-decorator.js";import v from"../../../packages/web-components/src/components/toaster/gator/toaster.gator.scss.js";import d from"../../../packages/styles/dist/tokens/primitive.tokens.css.js";import T from"../../../packages/styles/dist/tokens/semantic.tokens.css.js";import"../../toast-container/gator/toast-container.gator.js";import{createRef as O,ref as P}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{MAX_TOAST_ACTIONS as n,TOAST_CLOSE_POPOVER_DELAY_MS as g}from"../../toast/gator/toast-constants.js";import{unsafeCSS as c}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var y=Object.defineProperty,S=Object.getOwnPropertyDescriptor,p=(o,t,s,r)=>{for(var e=r>1?void 0:r?S(t,s):t,a=o.length-1,l;a>=0;a--)(l=o[a])&&(e=(r?l(t,s,e):l(e))||e);return r&&e&&y(t,s,e),e};let i=class extends f{constructor(){super(...arguments),this.position="top-right",this.defaultToastOptions={},this._toasts=[],this._popoverOpen=!1,this._popoverRef=O(),this._closePopoverTimeout=null}addToast(o){const t=crypto.randomUUID(),s=o.duration??this.defaultToastOptions?.duration??i.defaultDuration,r=!s||s===0;let e=o.actions;e&&e.length>n&&(console.warn(`[ngc-toaster] Toast actions are limited to ${n}. Extra actions were ignored.`),e=e.slice(0,n));const a={...this.defaultToastOptions,...o,id:t,sticky:r,actions:e};return this._toasts=[...this._toasts,a],this._closePopoverTimeout!==null&&(clearTimeout(this._closePopoverTimeout),this._closePopoverTimeout=null),this._popoverOpen=!0,r||setTimeout(()=>{this.removeToast(t)},s),t}removeToast(o){this._toasts=this._toasts.filter(t=>t.id!==o),this._toasts.length===0&&this.scheduleClose()}clearAll(){this._toasts=[],this.scheduleClose()}scheduleClose(){this._closePopoverTimeout!==null&&clearTimeout(this._closePopoverTimeout),this._closePopoverTimeout=window.setTimeout(()=>{this._popoverOpen=!1,this._closePopoverTimeout=null},g)}handleToastDismiss(o){const t=o.detail.id;t&&this.removeToast(t)}updated(o){if(super.updated(o),o.has("_popoverOpen")){const t=this._popoverRef.value;if(!t)return;const s=t.matches(":popover-open");try{this._popoverOpen&&!s?t.showPopover():!this._popoverOpen&&s&&t.hidePopover()}catch{}}}disconnectedCallback(){super.disconnectedCallback(),this._closePopoverTimeout!==null&&(clearTimeout(this._closePopoverTimeout),this._closePopoverTimeout=null)}render(){return h`
+            <div ${P(this._popoverRef)} popover="manual" class="gator-toaster-popover">
                 <div class="gator-toaster ${this.position}">
                     <ngc-toast-container
                         .toasts=${this._toasts}
                         @dismiss=${this.handleToastDismiss}
                     ></ngc-toast-container>
                 </div>
-            </dialog>
-        `}preventDialogClose(o){o.stopPropagation()}};s.styles=[u(f),u(T),u(D)];s.defaultDuration=5e3;r([p({type:String})],s.prototype,"position",2);r([p({type:Object,attribute:"default-toast-options"})],s.prototype,"defaultToastOptions",2);r([d()],s.prototype,"_toasts",2);r([d()],s.prototype,"_dialogOpen",2);s=r([g("ngc-toaster")],s);export{s as NgcToaster};
+            </div>
+        `}};i.styles=[c(v),c(d),c(T)];i.defaultDuration=5e3;p([u({type:String})],i.prototype,"position",2);p([u({type:Object,attribute:"default-toast-options"})],i.prototype,"defaultToastOptions",2);p([m()],i.prototype,"_toasts",2);p([m()],i.prototype,"_popoverOpen",2);i=p([_("ngc-toaster")],i);export{i as NgcToaster};

package/dist/packages/web-components/src/components/text-link/gator/text-link.gator.scss.js

@@ -1 +1 @@
-const o='.gator-text-link{max-width:100%;overflow-wrap:anywhere;display:inline-flex;align-items:center;font-family:var(--ngc-text-link-font-family, var(--font-family-body)),"Open Sans",sans-serif;font-size:var(--ngc-text-link-font-size, var(--font-size-body-2, .9375rem));font-weight:var(--font-weight-regular, 400);line-height:var(--ngc-text-link-line-height, var(--line-height-body-2, 1.375rem));text-decoration:underline;text-decoration-style:var(--ngc-text-link-underline-style, solid);text-decoration-color:var(--ngc-text-link-underline-color, var(--color-underline-primary));text-decoration-thickness:var(--ngc-text-link-underline-size, 1px);text-underline-offset:var(--ngc-text-link-underline-offset, 3px);color:var(--ngc-text-link-color, var(--color-text-brand, #103656))}.gator-text-link ngc-icon{--ngc-icon-color: var(--ngc-text-link-icon-color, var(--color-icon-brand, #103656));margin-left:.13rem}.gator-text-link:hover:not(.gator-text-link_disabled){color:var(--ngc-text-link-color--hover, var(--color-feedback-brand-secondary));text-decoration-color:var(--ngc-text-link-underline-color--hover, var(--color-underline-brand-secondary))}.gator-text-link:hover:not(.gator-text-link_disabled) ngc-icon{--ngc-icon-color: var(--ngc-text-link-icon-color--hover, var(--color-icon-brand-secondary))}.gator-text-link:focus-visible{outline:var(--ngc-text-link-outline--focus, 2px solid var(--color-border-neutral, #1F1F1F));outline-offset:2px;color:var(--ngc-text-link-color--focus, var(--color-text-brand, #103656));text-decoration-color:var(--ngc-text-link-underline-color--focus, var(--color-underline-primary))}.gator-text-link:focus-visible ngc-icon{--ngc-icon-color: var(--ngc-text-link-icon-color--focus, var(--color-icon-brand, #103656))}.gator-text-link:active:not(.gator-text-link_disabled){color:var(--ngc-text-link-color--pressed, var(--color-feedback-brand-tertiary));text-decoration-color:var(--ngc-text-link-underline-color--pressed, var(--color-underline-brand-tertiary))}.gator-text-link:active:not(.gator-text-link_disabled) ngc-icon{--ngc-icon-color: var(--ngc-text-link-icon-color--pressed, var(--color-icon-brand-tertiary))}.gator-text-link-subtle{color:var(--ngc-text-link-color, var(--color-text-secondary, #6D6D6D));text-decoration-color:var(--ngc-text-link-underline-color, var(--color-underline-primary))}.gator-text-link-subtle ngc-icon{--ngc-icon-color: var(--ngc-text-link-icon-color, var(--color-icon-secondary, #6D6D6D))}.gator-text-link-subtle:focus-visible{outline:var(--ngc-text-link-outline--focus, 2px solid var(--color-border-neutral, #1F1F1F));outline-offset:2px;color:var(--ngc-text-link-color--focus, var(--color-text-secondary, #6D6D6D));text-decoration-color:var(--ngc-text-link-underline-color--focus, var(--color-underline-primary))}.gator-text-link-subtle:focus-visible ngc-icon{--ngc-icon-color: var(--ngc-text-link-icon-color--focus, var(--color-icon-brand))}.gator-text-link_disabled{color:var(--ngc-text-link-color--disabled, var(--color-text-disabled));text-decoration-color:var(--ngc-text-link-underline-color--disabled, var(--color-text-disabled));cursor:not-allowed}.gator-text-link_disabled ngc-icon{--ngc-icon-color: var(--ngc-text-link-icon-color--disabled, var(--color-icon-disabled))}';export{o as default};
+const o='.gator-text-link{max-width:100%;overflow-wrap:anywhere;display:inline-flex;align-items:center;cursor:pointer;font-family:var(--ngc-text-link-font-family, var(--font-family-body)),"Open Sans",sans-serif;font-size:var(--ngc-text-link-font-size, var(--font-size-body-2, .9375rem));font-weight:var(--font-weight-regular, 400);line-height:var(--ngc-text-link-line-height, var(--line-height-body-2, 1.375rem));text-decoration:underline;text-decoration-style:var(--ngc-text-link-underline-style, solid);text-decoration-color:var(--ngc-text-link-underline-color, var(--color-underline-primary));text-decoration-thickness:var(--ngc-text-link-underline-size, 1px);text-underline-offset:var(--ngc-text-link-underline-offset, 3px);color:var(--ngc-text-link-color, var(--color-text-brand, #103656))}.gator-text-link ngc-icon{--ngc-icon-color: var(--ngc-text-link-icon-color, var(--color-icon-brand, #103656));margin-left:.13rem}.gator-text-link:hover:not(.gator-text-link_disabled){color:var(--ngc-text-link-color--hover, var(--color-feedback-brand-secondary));text-decoration-color:var(--ngc-text-link-underline-color--hover, var(--color-underline-brand-secondary))}.gator-text-link:hover:not(.gator-text-link_disabled) ngc-icon{--ngc-icon-color: var(--ngc-text-link-icon-color--hover, var(--color-icon-brand-secondary))}.gator-text-link:focus-visible{outline:var(--ngc-text-link-outline--focus, 2px solid var(--color-border-neutral, #1F1F1F));outline-offset:2px;color:var(--ngc-text-link-color--focus, var(--color-text-brand, #103656));text-decoration-color:var(--ngc-text-link-underline-color--focus, var(--color-underline-primary))}.gator-text-link:focus-visible ngc-icon{--ngc-icon-color: var(--ngc-text-link-icon-color--focus, var(--color-icon-brand, #103656))}.gator-text-link:active:not(.gator-text-link_disabled){color:var(--ngc-text-link-color--pressed, var(--color-feedback-brand-tertiary));text-decoration-color:var(--ngc-text-link-underline-color--pressed, var(--color-underline-brand-tertiary))}.gator-text-link:active:not(.gator-text-link_disabled) ngc-icon{--ngc-icon-color: var(--ngc-text-link-icon-color--pressed, var(--color-icon-brand-tertiary))}.gator-text-link-subtle{color:var(--ngc-text-link-color, var(--color-text-secondary, #6D6D6D));text-decoration-color:var(--ngc-text-link-underline-color, var(--color-underline-primary))}.gator-text-link-subtle ngc-icon{--ngc-icon-color: var(--ngc-text-link-icon-color, var(--color-icon-secondary, #6D6D6D))}.gator-text-link-subtle:focus-visible{outline:var(--ngc-text-link-outline--focus, 2px solid var(--color-border-neutral, #1F1F1F));outline-offset:2px;color:var(--ngc-text-link-color--focus, var(--color-text-secondary, #6D6D6D));text-decoration-color:var(--ngc-text-link-underline-color--focus, var(--color-underline-primary))}.gator-text-link-subtle:focus-visible ngc-icon{--ngc-icon-color: var(--ngc-text-link-icon-color--focus, var(--color-icon-brand))}.gator-text-link_disabled{color:var(--ngc-text-link-color--disabled, var(--color-text-disabled));text-decoration-color:var(--ngc-text-link-underline-color--disabled, var(--color-text-disabled));cursor:not-allowed}.gator-text-link_disabled ngc-icon{--ngc-icon-color: var(--ngc-text-link-icon-color--disabled, var(--color-icon-disabled))}';export{o as default};

package/dist/packages/web-components/src/components/toaster/gator/toaster.gator.scss.js

@@ -1 +1 @@
-const t=".gator-toaster-dialog{border:none;padding:0;background:transparent;max-width:none;max-height:none;overflow:visible;margin:0}.gator-toaster-dialog::backdrop{display:none}.gator-toaster{position:fixed;display:flex;flex-direction:column}.gator-toaster.top-left{inset-block-start:var(--spacing-8, 1rem);inset-inline-start:var(--spacing-8, 1rem)}.gator-toaster.top-center{inset-block-start:var(--spacing-8, 1rem);inset-inline-start:50%;transform:translate(-50%)}.gator-toaster.top-right{inset-block-start:var(--spacing-8, 1rem);inset-inline-end:var(--spacing-8, 1rem)}.gator-toaster.bottom-left{inset-block-end:var(--spacing-8, 1rem);inset-inline-start:var(--spacing-8, 1rem)}.gator-toaster.bottom-center{inset-block-end:var(--spacing-8, 1rem);inset-inline-start:50%;transform:translate(-50%)}.gator-toaster.bottom-right{inset-block-end:var(--spacing-8, 1rem);inset-inline-end:var(--spacing-8, 1rem)}";export{t as default};
+const t=".gator-toaster-popover{position:fixed;inset:auto;width:auto;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:none;background:transparent;overflow:visible;pointer-events:none}.gator-toaster-popover::backdrop{display:none}.gator-toaster{position:fixed;display:flex;flex-direction:column;pointer-events:auto}.gator-toaster.top-left{inset-block-start:var(--spacing-8, 1rem);inset-inline-start:var(--spacing-8, 1rem)}.gator-toaster.top-center{inset-block-start:var(--spacing-8, 1rem);inset-inline-start:50%;transform:translate(-50%)}.gator-toaster.top-right{inset-block-start:var(--spacing-8, 1rem);inset-inline-end:var(--spacing-8, 1rem)}.gator-toaster.bottom-left{inset-block-end:var(--spacing-8, 1rem);inset-inline-start:var(--spacing-8, 1rem)}.gator-toaster.bottom-center{inset-block-end:var(--spacing-8, 1rem);inset-inline-start:50%;transform:translate(-50%)}.gator-toaster.bottom-right{inset-block-end:var(--spacing-8, 1rem);inset-inline-end:var(--spacing-8, 1rem)}";export{t as default};

package/dist/types/components/toast/gator/toast-constants.d.ts

@@ -7,6 +7,6 @@ export declare const MAX_TOAST_ACTIONS = 2;
  */
 export declare const TOAST_ANIMATION_DURATION_MS = 300;
 /**
- * Amount of time to wait before officially closing the toast dialog to account for animation timing
+ * Amount of time to wait before hiding the toast popover (leaving the top layer) to account for animation timing
  */
-export declare const TOAST_CLOSE_DIALOG_DELAY_MS: number;
+export declare const TOAST_CLOSE_POPOVER_DELAY_MS: number;

package/dist/types/components/toaster/gator/toaster.gator.d.ts

@@ -18,20 +18,20 @@ export declare class NgcToaster extends LitElement {
      **/
     defaultToastOptions: DefaultToastOptions;
     private _toasts;
-    private _dialogOpen;
-    private _dialogRef;
-    private _closeDialogTimeout;
+    private _popoverOpen;
+    private _popoverRef;
+    private _closePopoverTimeout;
     addToast(options: Partial<DefaultToastOptions> & {
         title?: string;
         subtitle?: string;
     }): `${string}-${string}-${string}-${string}-${string}`;
     removeToast(id: string): void;
     clearAll(): void;
+    private scheduleClose;
     private handleToastDismiss;
     updated(changedProperties: Map<string | number | symbol, unknown>): void;
     disconnectedCallback(): void;
     render(): import('lit').TemplateResult<1>;
-    private preventDialogClose;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ncino/web-components",
   "author": "nCino",
-  "version": "13.8.0",
+  "version": "13.9.0",
   "license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -100,10 +100,10 @@
     "vite-plugin-static-copy": "^3.3.0",
     "vitest": "^4.1.0",
     "yaml-eslint-parser": "^2.0.0",
-    "@ncino/styles": "13.8.0"
+    "@ncino/styles": "13.9.0"
   },
   "peerDependencies": {
-    "@ncino/styles": "13.8.0"
+    "@ncino/styles": "13.9.0"
   },
   "bugs": {
     "url": "https://github.com/ncino/force-sdk-web-components/issues"

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ncino/web-components",
-  "version": "13.7.2",
+  "version": "13.8.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {