@ncino/web-components 9.0.0-preview.15 → 9.0.0-preview.17
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/components/boolean/boolean.gator.js +6 -3
- package/dist/components/toast/gator/toast-constants.js +1 -0
- package/dist/components/toast-container/gator/toast-container.gator.js +8 -4
- package/dist/components/toaster/gator/toaster.gator.js +14 -5
- package/dist/packages/web-components/src/components/toast-container/gator/toast-container.gator.scss.js +1 -1
- package/dist/packages/web-components/src/components/toaster/gator/toaster.gator.scss.js +1 -1
- package/dist/types/components/toast/gator/toast-constants.d.ts +8 -0
- package/dist/types/components/toaster/gator/toaster.gator.d.ts +12 -4
- package/package.json +2 -2
- package/web-types.json +2 -9
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as
|
|
1
|
+
import"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as n}from"../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";import"../../node_modules/.pnpm/lit-element@4.2.1/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{customElement as h}from"../../utils/decorators/custom-element-decorator.js";import{classMap as u}from"../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";import{generateRandomId as g,getElementId as c}from"../../utils/string-utils.js";import m from"../../packages/web-components/src/components/boolean/boolean.gator.scss.js";import{NgcInputText as b}from"../input/gator/input-text/input-text.gator.js";import"../radio-group/radio-group.gator.js";import{unsafeCSS as f}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var v=Object.defineProperty,_=Object.getOwnPropertyDescriptor,$=Object.getPrototypeOf,w=Reflect.get,d=(e,t,o,a)=>{for(var r=a>1?void 0:a?_(t,o):t,i=e.length-1,l;i>=0;i--)(l=e[i])&&(r=(a?l(t,o,r):l(r))||r);return a&&r&&v(t,o,r),r},y=(e,t,o)=>w($(e),o,t);let s=class extends b{constructor(){super(...arguments),this.options=[{label:"Yes",value:!0},{label:"No",value:!1}],this._randomId=g()}firstUpdated(){this.handleResize(),window.addEventListener("resize",()=>this.handleResize())}render(){return n`
|
|
2
2
|
<ngc-radio-group
|
|
3
3
|
class=${u(this.booleanClasses)}
|
|
4
4
|
id=${this.elementId}
|
|
@@ -8,14 +8,17 @@ import"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/re
|
|
|
8
8
|
error-text=${this.errorText}
|
|
9
9
|
?skeleton=${this.skeleton}
|
|
10
10
|
?disabled="${this.disabled}"
|
|
11
|
+
?optional="${this.optional}"
|
|
12
|
+
?required="${this.required}"
|
|
13
|
+
?hide-required="${this.hideRequired}"
|
|
11
14
|
@change=${this.handleChange}
|
|
12
15
|
>
|
|
13
16
|
${this.booleanOptions}
|
|
14
|
-
</ngc-radio-group>`}get elementId(){return c(this.id,this._randomId)}get booleanClasses(){return{"gator-boolean":!0,"gator-boolean_wrapped":this.isWrapped,"gator-boolean_error":!!this.errorText,"gator-boolean_disabled":this.disabled,"gator-boolean_skeleton":this.skeleton}}get booleanOptions(){if(!this.options)return null;const e=this.options.map((t,o)=>
|
|
17
|
+
</ngc-radio-group>`}get elementId(){return c(this.id,this._randomId)}get booleanClasses(){return{"gator-boolean":!0,"gator-boolean_wrapped":this.isWrapped,"gator-boolean_error":!!this.errorText,"gator-boolean_disabled":this.disabled,"gator-boolean_skeleton":this.skeleton}}get booleanOptions(){if(!this.options)return null;const e=this.options.map((t,o)=>n`
|
|
15
18
|
<ngc-radio
|
|
16
19
|
id="${this.elementId}-option-${o}"
|
|
17
20
|
class="gator-boolean-option-${o}${this.selectedClass(t)}"
|
|
18
21
|
.value=${t.value}
|
|
19
22
|
title-text=${t.label}
|
|
20
23
|
></ngc-radio>
|
|
21
|
-
`);return
|
|
24
|
+
`);return n`${e}`}get isWrapped(){const e=this.shadowRoot?.querySelectorAll("ngc-radio");return e&&e.length>1?e[0].offsetTop<e[1].offsetTop:window.innerWidth<475}handleChange(e){const t=e;t.stopImmediatePropagation(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:t.detail}))}handleResize(){const e=this.shadowRoot?.querySelector("ngc-radio-group");this.isWrapped?e?.classList.add("gator-boolean_wrapped"):e?.classList.remove("gator-boolean_wrapped")}selectedClass(e){return this.value===e.value?" gator-boolean-option_selected":""}};s.styles=[...y(s,s,"styles"),f(m)];d([p({type:Array})],s.prototype,"options",2);s=d([h("ngc-boolean")],s);export{s as NgcBoolean};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const A=300,T=350;export{A as TOAST_ANIMATION_DURATION_MS,T as TOAST_CLOSE_DIALOG_DELAY_MS};
|
|
@@ -1,6 +1,10 @@
|
|
|
1
|
-
import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as
|
|
2
|
-
<section
|
|
3
|
-
|
|
1
|
+
import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as l}from"../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";import{LitElement as c}from"../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";import{property as f}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{state as u}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";import{customElement as h}from"../../../utils/decorators/custom-element-decorator.js";import _ from"../../../packages/web-components/src/components/toast-container/gator/toast-container.gator.scss.js";import T from"../../../packages/styles/src/gator/tokens/primitive.tokens.css.js";import v from"../../../packages/styles/src/gator/tokens/semantic.tokens.css.js";import{repeat as $}from"../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/repeat.js";import{ifDefined as a}from"../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";import{TOAST_ANIMATION_DURATION_MS as b}from"../../toast/gator/toast-constants.js";import"../../toast/gator/base/toast.gator.js";import{unsafeCSS as m}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var g=Object.defineProperty,y=Object.getOwnPropertyDescriptor,p=(t,r,o,s)=>{for(var i=s>1?void 0:s?y(r,o):r,e=t.length-1,d;e>=0;e--)(d=t[e])&&(i=(s?d(r,o,i):d(i))||i);return s&&i&&g(r,o,i),i};let n=class extends c{constructor(){super(...arguments),this.toasts=[],this._renderedToasts=[]}updated(t){if(t.has("toasts")){const r=this.toasts.filter(e=>e.id?!0:(console.warn("[ngc-toast-container] A toast was provided without a required `id` property and will be ignored.",e),!1)),o=new Set(r.map(e=>e.id)),s=[];this._renderedToasts.forEach(e=>{o.has(e.id)?s.push(e):s.push({...e,initiateRemoval:!0})});const i=new Set(this._renderedToasts.map(e=>e.id));r.forEach(e=>{i.has(e.id)||s.push(e)}),this._renderedToasts=s}}handleAnimationEnd(t){if(t.animationName==="toast-fade-out"){const o=t.target.getAttribute("id");o&&(this._renderedToasts=this._renderedToasts.filter(s=>s.id!==o))}}render(){return l`
|
|
2
|
+
<section
|
|
3
|
+
class="gator-toast-container"
|
|
4
|
+
aria-live="polite"
|
|
5
|
+
style="--toast-animation-duration: ${b}ms"
|
|
6
|
+
>
|
|
7
|
+
${$(this._renderedToasts,t=>t.id,t=>l`
|
|
4
8
|
<ngc-toast
|
|
5
9
|
class="${t.initiateRemoval?"toast-fade-out":""}"
|
|
6
10
|
id="${t.id}"
|
|
@@ -15,4 +19,4 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
15
19
|
></ngc-toast>
|
|
16
20
|
`)}
|
|
17
21
|
</section>
|
|
18
|
-
`}};n.styles=[m(
|
|
22
|
+
`}};n.styles=[m(_),m(T),m(v)];p([f({type:Array})],n.prototype,"toasts",2);p([u()],n.prototype,"_renderedToasts",2);n=p([h("ngc-toast-container")],n);export{n as NgcToastContainer};
|
|
@@ -1,5 +1,14 @@
|
|
|
1
|
-
import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as
|
|
2
|
-
<
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
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.1/node_modules/lit-html/lit-html.js";import{LitElement as d}from"../../../node_modules/.pnpm/lit-element@4.2.1/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 c}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 f from"../../../packages/web-components/src/components/toaster/gator/toaster.gator.scss.js";import g from"../../../packages/styles/src/gator/tokens/primitive.tokens.css.js";import T from"../../../packages/styles/src/gator/tokens/semantic.tokens.css.js";import"../../toast-container/gator/toast-container.gator.js";import{createRef as D,ref as O}from"../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/ref.js";import{TOAST_CLOSE_DIALOG_DELAY_MS as p}from"../../toast/gator/toast-constants.js";import{unsafeCSS as m}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var v=Object.defineProperty,y=Object.getOwnPropertyDescriptor,l=(o,t,e,a)=>{for(var i=a>1?void 0:a?y(t,e):t,r=o.length-1,n;r>=0;r--)(n=o[r])&&(i=(a?n(t,e,i):n(i))||i);return a&&i&&v(t,e,i),i};let s=class extends d{constructor(){super(...arguments),this.position="top-right",this.defaultToastOptions={},this._toasts=[],this._dialogOpen=!1,this._dialogRef=D(),this._closeDialogTimeout=null}addToast(o){const t=crypto.randomUUID(),e=o.duration??this.defaultToastOptions?.duration??s.defaultDuration,a=!e||e===0,i={...this.defaultToastOptions,...o,id:t,sticky:a};return this._toasts=[...this._toasts,i],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},p))}clearAll(){this._toasts=[],this._closeDialogTimeout!==null&&clearTimeout(this._closeDialogTimeout),this._closeDialogTimeout=window.setTimeout(()=>{this._dialogOpen=!1,this._closeDialogTimeout=null},p)}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`
|
|
2
|
+
<dialog
|
|
3
|
+
${O(this._dialogRef)}
|
|
4
|
+
class="gator-toaster-dialog"
|
|
5
|
+
@click=${this.preventDialogClose}
|
|
6
|
+
>
|
|
7
|
+
<div class="gator-toaster ${this.position}">
|
|
8
|
+
<ngc-toast-container
|
|
9
|
+
.toasts=${this._toasts}
|
|
10
|
+
@dismiss=${this.handleToastDismiss}
|
|
11
|
+
></ngc-toast-container>
|
|
12
|
+
</div>
|
|
13
|
+
</dialog>
|
|
14
|
+
`}preventDialogClose(o){o.stopPropagation()}};s.styles=[m(f),m(g),m(T)];s.defaultDuration=5e3;l([u({type:String})],s.prototype,"position",2);l([u({type:Object,attribute:"default-toast-options"})],s.prototype,"defaultToastOptions",2);l([c()],s.prototype,"_toasts",2);l([c()],s.prototype,"_dialogOpen",2);s=l([_("ngc-toaster")],s);export{s as NgcToaster};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const t=".gator-toast-container
|
|
1
|
+
const t=".gator-toast-container ngc-toast{display:block;animation:toast-slide-in var(--toast-animation-duration, .3s) ease-out}.gator-toast-container ngc-toast.toast-fade-out{animation:toast-fade-out var(--toast-animation-duration, .3s) ease-in forwards}@keyframes toast-slide-in{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes toast-fade-out{0%{opacity:1}to{opacity:0}}";export{t as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const t=".gator-toaster{position:fixed;
|
|
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};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Duration of toast animations (slide-in and fade-out) in milliseconds
|
|
3
|
+
*/
|
|
4
|
+
export declare const TOAST_ANIMATION_DURATION_MS = 300;
|
|
5
|
+
/**
|
|
6
|
+
* Amount of time to wait before officially closing the toast dialog to account for animation timing
|
|
7
|
+
*/
|
|
8
|
+
export declare const TOAST_CLOSE_DIALOG_DELAY_MS: number;
|
|
@@ -8,14 +8,19 @@ export declare class NgcToaster extends LitElement {
|
|
|
8
8
|
static styles: import('lit').CSSResult[];
|
|
9
9
|
static defaultDuration: number;
|
|
10
10
|
/**
|
|
11
|
-
*
|
|
12
|
-
|
|
11
|
+
* @property position - The position of the toast on the screen
|
|
12
|
+
* @type {ToastContainerPositions}
|
|
13
|
+
**/
|
|
13
14
|
position: ToastContainerPositions;
|
|
14
15
|
/**
|
|
15
|
-
* Default options for toasts created by this toaster. Can be overridden by the `addToast` method.
|
|
16
|
-
|
|
16
|
+
* @property defaultToastOptions - Default options for toasts created by this toaster. Can be overridden by the `addToast` method.
|
|
17
|
+
* @type {DefaultToastOptions}
|
|
18
|
+
**/
|
|
17
19
|
defaultToastOptions: DefaultToastOptions;
|
|
18
20
|
private _toasts;
|
|
21
|
+
private _dialogOpen;
|
|
22
|
+
private _dialogRef;
|
|
23
|
+
private _closeDialogTimeout;
|
|
19
24
|
addToast(options: Partial<DefaultToastOptions> & {
|
|
20
25
|
title?: string;
|
|
21
26
|
subtitle?: string;
|
|
@@ -23,7 +28,10 @@ export declare class NgcToaster extends LitElement {
|
|
|
23
28
|
removeToast(id: string): void;
|
|
24
29
|
clearAll(): void;
|
|
25
30
|
private handleToastDismiss;
|
|
31
|
+
updated(changedProperties: Map<string | number | symbol, unknown>): void;
|
|
32
|
+
disconnectedCallback(): void;
|
|
26
33
|
render(): import('lit').TemplateResult<1>;
|
|
34
|
+
private preventDialogClose;
|
|
27
35
|
}
|
|
28
36
|
declare global {
|
|
29
37
|
interface HTMLElementTagNameMap {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ncino/web-components",
|
|
3
3
|
"author": "nCino",
|
|
4
|
-
"version": "9.0.0-preview.
|
|
4
|
+
"version": "9.0.0-preview.17",
|
|
5
5
|
"license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -107,7 +107,7 @@
|
|
|
107
107
|
"vite-plugin-static-copy": "^3.1.4",
|
|
108
108
|
"vitest": "^4.0.15",
|
|
109
109
|
"yaml-eslint-parser": "^1.3.2",
|
|
110
|
-
"@ncino/styles": "9.0.0-preview.
|
|
110
|
+
"@ncino/styles": "9.0.0-preview.17"
|
|
111
111
|
},
|
|
112
112
|
"peerDependencies": {
|
|
113
113
|
"@ncino/styles": ">=8.0.0-preview.0"
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@ncino/web-components",
|
|
4
|
-
"version": "9.0.0-preview.
|
|
4
|
+
"version": "9.0.0-preview.16",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -3465,7 +3465,6 @@
|
|
|
3465
3465
|
"attributes": [
|
|
3466
3466
|
{
|
|
3467
3467
|
"name": "position",
|
|
3468
|
-
"description": "Fixed position of the toast container on the screen",
|
|
3469
3468
|
"value": {
|
|
3470
3469
|
"type": "'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'",
|
|
3471
3470
|
"default": "'top-right'"
|
|
@@ -3473,7 +3472,6 @@
|
|
|
3473
3472
|
},
|
|
3474
3473
|
{
|
|
3475
3474
|
"name": "default-toast-options",
|
|
3476
|
-
"description": "Default options for toasts created by this toaster. Can be overridden by the `addToast` method.",
|
|
3477
3475
|
"value": { "type": "DefaultToastOptions", "default": "{}" }
|
|
3478
3476
|
}
|
|
3479
3477
|
],
|
|
@@ -3482,14 +3480,9 @@
|
|
|
3482
3480
|
"properties": [
|
|
3483
3481
|
{
|
|
3484
3482
|
"name": "position",
|
|
3485
|
-
"description": "Fixed position of the toast container on the screen",
|
|
3486
3483
|
"type": "'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'"
|
|
3487
3484
|
},
|
|
3488
|
-
{
|
|
3489
|
-
"name": "defaultToastOptions",
|
|
3490
|
-
"description": "Default options for toasts created by this toaster. Can be overridden by the `addToast` method.",
|
|
3491
|
-
"type": "DefaultToastOptions"
|
|
3492
|
-
}
|
|
3485
|
+
{ "name": "defaultToastOptions", "type": "DefaultToastOptions" }
|
|
3493
3486
|
],
|
|
3494
3487
|
"events": []
|
|
3495
3488
|
}
|