@ncino/web-components 16.6.1 → 16.6.2
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.
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
import{NjcModal as g}from"../modal.js";import"../../card/gator/base/card.gator.js";import"../../card/gator/header/card-header.gator.js";import"../../card/gator/content/card-content.gator.js";import"../../card/gator/footer/card-footer.gator.js";import"../../button/slds/button.slds.js";import"../../button/gator/button.gator.js";import"../../icon-button/gator/icon-button.gator.js";import"../../input/gator/input-currency/input-currency.gator.js";import"../../input/gator/input-date/input-date.gator.js";import"../../input/gator/input-label/input-label.gator.js";import"../../input/gator/help-text/help-text.gator.js";import"../../input/gator/input-text/input-text.gator.js";import"../../input/gator/input-textarea/input-textarea.gator.js";import"../../input/gator/input-masked/input-masked.gator.js";import"../../input/gator/input-percent/input-percent.gator.js";import"../../input/gator/input-phone/input-phone.gator.js";import"../../input/gator/dropdown/input-dropdown.gator.js";import"../../input/gator/input-file/input-file.gator.js";import"../../input/gator/input-file/file-uploaded-preview/file-upload-preview.gator.js";import"../../input/gator/input-search/input-search.gator.js";import"../../input/gator/input-time/input-time.gator.js";import"../../input/gator/input-group/input-group.gator.js";import"../../text-detail/gator/text-detail.gator.js";import"../../skeleton-loader/gator/skeleton-loader.gator.js";import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as r}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js";import"../../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";import{customElement as f}from"../../../utils/decorators/custom-element-decorator.js";import v from"../../../packages/web-components/src/components/modal/gator/modal.gator.scss.js";import b from"../../../packages/styles/dist/tokens/primitive.tokens.css.js";import E from"../../../packages/styles/dist/tokens/semantic.tokens.css.js";import{createRef as u,ref as
|
|
1
|
+
import{NjcModal as g}from"../modal.js";import"../../card/gator/base/card.gator.js";import"../../card/gator/header/card-header.gator.js";import"../../card/gator/content/card-content.gator.js";import"../../card/gator/footer/card-footer.gator.js";import"../../button/slds/button.slds.js";import"../../button/gator/button.gator.js";import"../../icon-button/gator/icon-button.gator.js";import"../../input/gator/input-currency/input-currency.gator.js";import"../../input/gator/input-date/input-date.gator.js";import"../../input/gator/input-label/input-label.gator.js";import"../../input/gator/help-text/help-text.gator.js";import"../../input/gator/input-text/input-text.gator.js";import"../../input/gator/input-textarea/input-textarea.gator.js";import"../../input/gator/input-masked/input-masked.gator.js";import"../../input/gator/input-percent/input-percent.gator.js";import"../../input/gator/input-phone/input-phone.gator.js";import"../../input/gator/dropdown/input-dropdown.gator.js";import"../../input/gator/input-file/input-file.gator.js";import"../../input/gator/input-file/file-uploaded-preview/file-upload-preview.gator.js";import"../../input/gator/input-search/input-search.gator.js";import"../../input/gator/input-time/input-time.gator.js";import"../../input/gator/input-group/input-group.gator.js";import"../../text-detail/gator/text-detail.gator.js";import"../../skeleton-loader/gator/skeleton-loader.gator.js";import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as r}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js";import"../../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";import{customElement as f}from"../../../utils/decorators/custom-element-decorator.js";import v from"../../../packages/web-components/src/components/modal/gator/modal.gator.scss.js";import b from"../../../packages/styles/dist/tokens/primitive.tokens.css.js";import E from"../../../packages/styles/dist/tokens/semantic.tokens.css.js";import{createRef as u,ref as p}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{getFirstFocusableElement as w}from"../../../utils/accessibility-utils.js";import{classMap as y}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/class-map.js";import{unsafeCSS as h}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var C=Object.getOwnPropertyDescriptor,k=(t,e,o,i)=>{for(var s=i>1?void 0:i?C(e,o):e,n=t.length-1,c;n>=0;n--)(c=t[n])&&(s=c(s)||s);return s};let m=class extends g{constructor(){super(...arguments),this._destructiveMessageRef=u(),this._primaryActionButtonRef=u(),this._dialogRef=u(),this._previouslyFocusedElement=null,this._suppressNextDialogClose=!1,this._pointerDownTarget=null,this._pointerUpTarget=null,this.onHostKeyDown=t=>{if(!this.open)return;const e=t.key;(e==="Escape"||e==="Esc")&&(t.preventDefault(),t.stopPropagation(),this.dispatchEvent(new CustomEvent("close",{bubbles:!0})))}}render(){return this.open?r`
|
|
2
2
|
<dialog
|
|
3
|
-
${
|
|
4
|
-
class="${
|
|
3
|
+
${p(this._dialogRef)}
|
|
4
|
+
class="${y(this.dialogClassMap)}"
|
|
5
5
|
role="${this.dialogRole}"
|
|
6
6
|
aria-modal="true"
|
|
7
7
|
aria-labelledby="gator-modal-title"
|
|
8
8
|
@cancel=${this.onDialogCancel}
|
|
9
|
+
@pointerdown=${this.onDialogPointerDown}
|
|
10
|
+
@pointerup=${this.onDialogPointerUp}
|
|
9
11
|
@click=${this.onDialogBackdropClick}
|
|
10
12
|
@keydown=${this.onDialogKeyDown}
|
|
11
13
|
@close=${this.onDialogClose}
|
|
@@ -61,16 +63,16 @@ import{NjcModal as g}from"../modal.js";import"../../card/gator/base/card.gator.j
|
|
|
61
63
|
</div>
|
|
62
64
|
</slot>
|
|
63
65
|
</div>
|
|
64
|
-
`:null}get footerWarningMessageMarkup(){return!["destructive"].includes(this.variant)||this.skeleton||!this.destructiveMessageText?null:(requestAnimationFrame(()=>{const e=
|
|
66
|
+
`:null}get footerWarningMessageMarkup(){return!["destructive"].includes(this.variant)||this.skeleton||!this.destructiveMessageText?null:(requestAnimationFrame(()=>{const e=w(this._primaryActionButtonRef.value);this._destructiveMessageRef.value&&e&&(e.ariaDescribedByElements=[this._destructiveMessageRef.value])}),r`
|
|
65
67
|
<div class="gator-modal-warning">
|
|
66
68
|
<ngc-icon name="warning"></ngc-icon>
|
|
67
|
-
<ngc-input-label ${
|
|
69
|
+
<ngc-input-label ${p(this._destructiveMessageRef)}>
|
|
68
70
|
${this.destructiveMessageText}
|
|
69
71
|
</ngc-input-label>
|
|
70
72
|
</div>
|
|
71
73
|
`)}get footerPrimaryActionButtonMarkup(){return["decide","destructive","confirmation"].includes(this.variant)?r`
|
|
72
74
|
<ngc-button
|
|
73
|
-
${
|
|
75
|
+
${p(this._primaryActionButtonRef)}
|
|
74
76
|
class="gator-modal-primary-button"
|
|
75
77
|
variant="${this.variant==="destructive"?"destructive":"primary"}"
|
|
76
78
|
size="${this.buttonSize}"
|
|
@@ -91,4 +93,4 @@ import{NjcModal as g}from"../modal.js";import"../../card/gator/base/card.gator.j
|
|
|
91
93
|
>
|
|
92
94
|
Cancel
|
|
93
95
|
</ngc-button>
|
|
94
|
-
`:null}get buttonSize(){switch(this.size){case"small":return"xlarge";case"standard":return"medium";case"fullscreen":return"large";default:return"medium"}}onDialogCancel(t){t.preventDefault(),this.dispatchEvent(new CustomEvent("close",{bubbles:!0}))}onDialogClose(t){const e=this._dialogRef.value;this._suppressNextDialogClose?this._suppressNextDialogClose=!1:this.dispatchEvent(new CustomEvent("close",{bubbles:!0})),this._previouslyFocusedElement instanceof HTMLElement&&requestAnimationFrame(()=>this._previouslyFocusedElement?.focus()),e&&e.close()}
|
|
96
|
+
`:null}get buttonSize(){switch(this.size){case"small":return"xlarge";case"standard":return"medium";case"fullscreen":return"large";default:return"medium"}}onDialogCancel(t){t.preventDefault(),this.dispatchEvent(new CustomEvent("close",{bubbles:!0}))}onDialogClose(t){const e=this._dialogRef.value;this._suppressNextDialogClose?this._suppressNextDialogClose=!1:this.dispatchEvent(new CustomEvent("close",{bubbles:!0})),this._previouslyFocusedElement instanceof HTMLElement&&requestAnimationFrame(()=>this._previouslyFocusedElement?.focus()),e&&e.close()}onDialogPointerDown(t){this._pointerDownTarget=t.target}onDialogPointerUp(t){this._pointerUpTarget=t.target}onDialogBackdropClick(t){const e=this._dialogRef.value,o=this._pointerDownTarget===e&&this._pointerUpTarget===e;this._pointerDownTarget=null,this._pointerUpTarget=null,o&&t.target===e&&this.dispatchEvent(new CustomEvent("close",{bubbles:!0}))}handleCloseClick(t){t.preventDefault(),t.stopImmediatePropagation(),this.dispatchEvent(new CustomEvent("close",{bubbles:!0}))}handleCloseKeydown(t){(t.code==="Enter"||t.code==="Space")&&this.handleCloseClick(t)}handlePrimaryActionClick(t){t.preventDefault(),t.stopImmediatePropagation(),this.dispatchEvent(new CustomEvent("primary-action-click",{bubbles:!0}))}handleSecondaryActionClick(t){t.preventDefault(),t.stopImmediatePropagation(),this.dispatchEvent(new CustomEvent("secondary-action-click",{bubbles:!0}))}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.onHostKeyDown)}disconnectedCallback(){this.removeEventListener("keydown",this.onHostKeyDown),super.disconnectedCallback()}willUpdate(t){if(super.willUpdate?.(t),t.has("open")&&t.get("open")&&!this.open){const i=this._dialogRef.value;if(i&&i.open){this._suppressNextDialogClose=!0;try{i.close()}catch{}}}}updated(t){if(super.updated(t),t.has("open")){const e=this._dialogRef.value;if(this.open){if(document.activeElement instanceof HTMLElement&&(this._previouslyFocusedElement=document.activeElement),e&&!e.open)try{e.showModal()}catch{}this.focusFirstElement()}}}onDialogKeyDown(t){if(t.key!=="Tab")return;const e=this.getKeyboardFocusableElements();if(e.length===0)return;const o=this.getDeepActiveElement(),i=e[0],s=e[e.length-1],n=this.findFocusedIndex(o,e);n!==-1&&(t.shiftKey?n===0&&(t.preventDefault(),s.focus()):n===e.length-1&&(t.preventDefault(),i.focus()))}getDeepActiveElement(){let t=document.activeElement;for(;t?.shadowRoot?.activeElement;)t=t.shadowRoot.activeElement;return t}findFocusedIndex(t,e){return t?e.findIndex(o=>o===t||o.contains(t)||o.shadowRoot?.contains(t)):-1}getKeyboardFocusableElements(){const t='a[href],button,ngc-button,ngc-icon-button,input,textarea,select,details,[tabindex]:not([tabindex="-1"])',e=Array.from(this.shadowRoot?.querySelectorAll(t)??[]),o=[],i=this.shadowRoot?.querySelectorAll("slot")??[];for(const l of i){const d=l.assignedElements({flatten:!0});for(const a of d)a.matches?.(t)&&o.push(a),o.push(...Array.from(a.querySelectorAll(t)))}const s=[...e,...o];return(this._dialogRef.value?s.sort((l,d)=>{const a=l.compareDocumentPosition(d);return a&Node.DOCUMENT_POSITION_FOLLOWING||a&Node.DOCUMENT_POSITION_CONTAINED_BY?-1:a&Node.DOCUMENT_POSITION_PRECEDING||a&Node.DOCUMENT_POSITION_CONTAINS?1:0}):s).filter(l=>!l.hasAttribute("disabled")&&!l.hasAttribute("aria-hidden"))}focusFirstElement(){if(!this.open)return;const t=this.getKeyboardFocusableElements();if(t.length>0){const e=t[0];requestAnimationFrame(()=>{e.focus()})}}};m.styles=[h(v),h(b),h(E)];m=k([f("ngc-modal")],m);export{m as NgcModal};
|
|
@@ -13,6 +13,8 @@ export declare class NgcModal extends NjcModal {
|
|
|
13
13
|
_dialogRef: Ref<HTMLDialogElement>;
|
|
14
14
|
private _previouslyFocusedElement;
|
|
15
15
|
private _suppressNextDialogClose;
|
|
16
|
+
private _pointerDownTarget;
|
|
17
|
+
private _pointerUpTarget;
|
|
16
18
|
render(): import('lit').TemplateResult<1> | null;
|
|
17
19
|
get dialogClassMap(): {
|
|
18
20
|
'gator-modal-dialog': boolean;
|
|
@@ -26,6 +28,8 @@ export declare class NgcModal extends NjcModal {
|
|
|
26
28
|
get buttonSize(): "medium" | "large" | "xlarge";
|
|
27
29
|
onDialogCancel(event: Event): void;
|
|
28
30
|
onDialogClose(_event: Event): void;
|
|
31
|
+
onDialogPointerDown(event: PointerEvent): void;
|
|
32
|
+
onDialogPointerUp(event: PointerEvent): void;
|
|
29
33
|
onDialogBackdropClick(event: MouseEvent): void;
|
|
30
34
|
handleCloseClick(event: Event): void;
|
|
31
35
|
handleCloseKeydown(event: KeyboardEvent): void;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ncino/web-components",
|
|
3
3
|
"author": "nCino",
|
|
4
|
-
"version": "16.6.
|
|
4
|
+
"version": "16.6.2",
|
|
5
5
|
"license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -100,10 +100,10 @@
|
|
|
100
100
|
"vite-plugin-static-copy": "^3.3.0",
|
|
101
101
|
"vitest": "^4.1.10",
|
|
102
102
|
"yaml-eslint-parser": "^2.1.0",
|
|
103
|
-
"@ncino/styles": "16.6.
|
|
103
|
+
"@ncino/styles": "16.6.2"
|
|
104
104
|
},
|
|
105
105
|
"peerDependencies": {
|
|
106
|
-
"@ncino/styles": "16.6.
|
|
106
|
+
"@ncino/styles": "16.6.2"
|
|
107
107
|
},
|
|
108
108
|
"bugs": {
|
|
109
109
|
"url": "https://github.com/ncino/force-sdk-web-components/issues"
|
package/web-types.json
CHANGED