@ncino/web-components 1.1.0 → 1.2.0-preview.1

package/dist/types/components/breadcrumbs/gator/breadcrumb/breadcrumb.gator.d.ts

@@ -0,0 +1,19 @@
+import { Ref } from 'lit/directives/ref.js';
+import { TestableLitElement } from '../../../../utils/components/testable-lit-element/testable-lit-element.ts';
+export declare class NgcBreadcrumb extends TestableLitElement {
+    static styles: import('lit').CSSResult[];
+    current: boolean;
+    first: boolean;
+    label: string;
+    href: string;
+    crumbRef: Ref<HTMLDivElement>;
+    updated(): void;
+    render(): import('lit').TemplateResult<1>;
+    get breadcrumbClass(): "gator-breadcrumb gator-breadcrumb-current" | "gator-breadcrumb";
+    get breadcrumbSeparator(): import('lit').TemplateResult<1> | null;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ngc-breadcrumb': NgcBreadcrumb;
+    }
+}

package/dist/types/components/breadcrumbs/gator/container/breadcrumbs.gator.d.ts

@@ -0,0 +1,14 @@
+import { NjcBreadcrumbs } from '../../breadcrumbs.ts';
+/**
+ * @slot - The content within the button
+ */
+export declare class NgcBreadcrumbs extends NjcBreadcrumbs {
+    static styles: import('lit').CSSResult[];
+    render(): import('lit').TemplateResult<1>;
+    handleCrumbsSlotChange(e: Event): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ngc-breadcrumbs': NgcBreadcrumbs;
+    }
+}

package/dist/types/components/button/button.d.ts

@@ -1,7 +1,7 @@
-import { LitElement } from 'lit';
+import { TestableLitElement } from '../../utils/components/testable-lit-element/testable-lit-element.ts';
 export type NJC_BUTTON_VARIANTS = null | 'primary' | 'secondary' | 'text-link' | 'icon';
 export type NJC_BUTTON_SIZES = null | 'small' | 'medium' | 'large' | 'x-large';
-export declare class NjcButton extends LitElement {
+export declare class NjcButton extends TestableLitElement {
     /**
         @property variant - The variant of the button
         @type {NJC_BUTTON_VARIANTS}
@@ -17,10 +17,6 @@ export declare class NjcButton extends LitElement {
         @type {boolean}
      **/
     disabled: boolean;
-    /**
-        @property dataTestid - data-testid attribute for the button
-     **/
-    dataTestid: string;
     /**
      @property iconName - The name of the icon to display for the icon button variant
      **/

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

@@ -1,6 +1,12 @@
-import { LitElement } from 'lit';
-export declare class NgcCheckbox extends LitElement {
-    createRenderRoot(): this;
+import { TestableLitElement } from '../../utils/components/testable-lit-element/testable-lit-element.ts';
+export declare class NgcCheckbox extends TestableLitElement {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    constructor();
     /**
     *	@property {string} id
     */
@@ -25,15 +31,9 @@ export declare class NgcCheckbox extends LitElement {
     *	@property {boolean} hasError - Indicates if the checkbox button should render in an error state.
     */
     hasError: boolean;
-    /**
-     @property dataTestid - data-testid attribute for the button
-     @type {string}
-     **/
-    dataTestid: string;
     private _randomId;
     private _labelSlot;
     render(): import('lit').TemplateResult<1>;
-    updated(): void;
     get elementId(): string;
     get labelContent(): string | Node;
     handleClick(event: Event): void;

package/dist/types/components/checkbox-group/checkbox-group.gator.d.ts

@@ -1,4 +1,5 @@
-import { LitElement } from 'lit';
+import { NgcCheckbox } from '../checkbox/checkbox.gator';
+import { TestableLitElement } from '../../utils/components/testable-lit-element/testable-lit-element.ts';
 /**
  * @slot - The checkboxes within the group
  */
@@ -6,13 +7,8 @@ export type NGC_CHECKBOX_GROUP_OPTION = {
     title: string;
     value: string;
 };
-export declare class NgcCheckboxGroup extends LitElement {
+export declare class NgcCheckboxGroup extends TestableLitElement {
     static styles: import('lit').CSSResult[];
-    /**
-     @property dataTestid - data-testid attribute for the button
-     @type {string}
-     **/
-    dataTestid: string;
     /**
     *	@property {string} id - `id` for the checkbox group. If not provided, one will be uniquely generated.
     */
@@ -51,6 +47,7 @@ export declare class NgcCheckboxGroup extends LitElement {
     get describedBy(): string;
     get checkboxesFromOptions(): import('lit').TemplateResult<1>;
     handleCheckboxSelectionChange(event: Event): void;
+    get checkboxElements(): NgcCheckbox[];
     updated(): void;
 }
 declare global {

package/dist/types/components/chip/chip.d.ts

@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
-export declare class NjcChip extends LitElement {
+import { TestableLitElement } from '../../utils/components/testable-lit-element/testable-lit-element.ts';
+export declare class NjcChip extends TestableLitElement {
     /**
      @property disabled - Disables the chip. No click event is sent when disabled.
      @type {boolean}
@@ -10,9 +10,4 @@ export declare class NjcChip extends LitElement {
      @type {boolean}
      **/
     readonly: boolean;
-    /**
-     @property dataTestid - data-testid attribute for the button
-     @type {string}
-     **/
-    dataTestid: string;
 }

package/dist/types/components/combobox/base/combobox.d.ts

@@ -1,7 +1,7 @@
-import { LitElement } from 'lit';
 import { NJC_COMBOBOX_OPTION } from '../combobox.types';
 import { Ref } from 'lit/directives/ref.js';
-export declare class NjcCombobox extends LitElement {
+import { TestableLitElement } from '../../../utils/components/testable-lit-element/testable-lit-element.ts';
+export declare class NjcCombobox extends TestableLitElement {
     options: NJC_COMBOBOX_OPTION[];
     value: string;
     label: string;
@@ -10,11 +10,6 @@ export declare class NjcCombobox extends LitElement {
     required: boolean;
     valid: boolean;
     requiredErrorText: string;
-    /**
-    @description dataTestid - Value to be used for the data-testid attribute
-    @property {string}
-     */
-    dataTestid: string;
     displayedErrorText: string;
     _comboboxRef: Ref<HTMLElement>;
     selectOption(option: NJC_COMBOBOX_OPTION): void;

package/dist/types/components/menu/base/menu.d.ts

@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
-export declare class NjcMenu extends LitElement {
+import { TestableLitElement } from '../../../utils/components/testable-lit-element/testable-lit-element.ts';
+export declare class NjcMenu extends TestableLitElement {
     /**
      * The open state of the menu
      * @type {boolean}
@@ -10,9 +10,4 @@ export declare class NjcMenu extends LitElement {
      * @type {string}
      */
     menuAriaLabel: string;
-    /**
-    @description dataTestid - Value to be used for the data-testid attribute
-    @property {string}
-     */
-    dataTestid: string;
 }

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

@@ -7,6 +7,7 @@ export declare class NgcModal extends NjcModal {
     get footerWarningMessageMarkup(): import('lit').TemplateResult<1> | null;
     get footerPrimaryActionButtonMarkup(): import('lit').TemplateResult<1> | null;
     get primaryButtonDestructiveClass(): "gator-modal-primary-button--destructive" | null;
+    get primaryButtonDescribedBy(): "gator-modal-warning-message" | null;
     get footerSecondaryActionButtonMarkup(): import('lit').TemplateResult<1> | null;
     get actionButtonLoaderMarkup(): import('lit').TemplateResult<1>;
     handleKeyDown(event: KeyboardEvent): void;

package/dist/types/components/modal/modal.d.ts

@@ -27,6 +27,10 @@ export declare class NjcModal extends LitElement {
      * @property {string} primaryActionText - The text of the primary action button.
      */
     primaryActionText: string;
+    /**
+     * @property {string} destructiveMessageText - The text of the warning message shown on the destructive modal.
+     */
+    destructiveMessageText: string;
     /**
      * @property {boolean} skeleton - Whether the modal is in the skeleton loading state.
      */

package/dist/types/components/pill/pill.d.ts

@@ -6,4 +6,9 @@ export declare class NjcPill extends LitElement {
      */
     value: string;
     removeClicked(): void;
+    /**
+    @description dataTestid - Value to be used for the data-testid attribute
+    @property {string}
+     */
+    dataTestid: string;
 }

package/dist/types/components/pill/pill.slds.d.ts

@@ -10,6 +10,7 @@ export declare class NjcSldsPill extends NjcPill {
     get pillClasses(): string;
     get linkHtml(): import('lit').TemplateResult<1>;
     get labelHtml(): import('lit').TemplateResult<1>;
+    updated(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,6 +1,11 @@
-import { LitElement } from 'lit';
-export declare class NgcRadio extends LitElement {
-    createRenderRoot(): this;
+import { TestableLitElement } from '../../utils/components/testable-lit-element/testable-lit-element.ts';
+export declare class NgcRadio extends TestableLitElement {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     constructor();
     /**
     *	@property {string} id - The title text for the radio button option.
@@ -27,7 +32,7 @@ export declare class NgcRadio extends LitElement {
     */
     hasError: boolean;
     /**
-    *	@property {number} radioTabindex - Indicates if the radio button should render in an error state.
+    *	@property {number} radioTabindex - The tabindex for the radio button.
     */
     radioTabindex: number;
     private _titleSlot;

package/dist/types/components/radio-group/radio-group.gator.d.ts

@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
 import { NgcRadio } from '../radio/radio.gator';
+import { TestableLitElement } from '../../utils/components/testable-lit-element/testable-lit-element.ts';
 /**
  * @slot - The radios within the group
  */
@@ -7,7 +7,7 @@ export type NGC_RADIO_GROUP_OPTION = {
     title: string;
     value: string;
 };
-export declare class NgcRadioGroup extends LitElement {
+export declare class NgcRadioGroup extends TestableLitElement {
     static styles: import('lit').CSSResult[];
     /**
     *	@property {string} id - `id` for the radio group. If not provided, one will be uniquely generated.

package/dist/types/components/selection-box/selection-box.gator.d.ts

@@ -1,6 +1,13 @@
-import { LitElement, TemplateResult } from 'lit';
-export declare class NgcSelectionBox extends LitElement {
-    createRenderRoot(): this;
+import { TemplateResult } from 'lit';
+import { TestableLitElement } from '../../utils/components/testable-lit-element/testable-lit-element';
+export type SELECTION_BOX_TYPE = 'radio' | 'checkbox';
+export declare class NgcSelectionBox extends TestableLitElement {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     constructor();
     /**
     *	@property {string} id - The title text for the selection-box button option.
@@ -35,9 +42,9 @@ export declare class NgcSelectionBox extends LitElement {
     */
     hasError: boolean;
     /**
-    *	@property {string} type - Indicates if the selection-box should render as a radio or checkbox.
+    *	@property {SELECTION_BOX_TYPE} type - Indicates if the selection-box should render as a radio or checkbox.
     */
-    type: string;
+    type: SELECTION_BOX_TYPE;
     private _randomId;
     private _labelFromTemplate;
     private _generatedLabel;
@@ -54,7 +61,6 @@ export declare class NgcSelectionBox extends LitElement {
     get tabindex(): number;
     handleClick(event: Event): void;
     handleKeyDown(event: KeyboardEvent): void;
-    focusItem(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/types/components/selection-box-group/selection-box-group.gator.d.ts

@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
 import { NgcSelectionBox } from '../selection-box/selection-box.gator';
+import { TestableLitElement } from '../../utils/components/testable-lit-element/testable-lit-element';
 export type NGC_SELECTION_BOX_GROUP_OPTION = {
     title: string;
     subtitle?: string;
@@ -8,7 +8,7 @@ export type NGC_SELECTION_BOX_GROUP_OPTION = {
 /**
  * @slot - The selection boxes within the group
  */
-export declare class NgcSelectionBoxGroup extends LitElement {
+export declare class NgcSelectionBoxGroup extends TestableLitElement {
     static styles: import('lit').CSSResult[];
     /**
     * @property {string} id - The id for the selection group. If one is not provided, a random id will be generated.

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

@@ -1,11 +1,18 @@
 import { NjcSwitch } from '../switch.ts';
 export declare class NgcSwitch extends NjcSwitch {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    constructor();
     static styles: import('lit').CSSResult[];
     updated(): void;
     render(): import('lit').TemplateResult<1>;
     handleInputKeydown(event: KeyboardEvent): void;
-    handleContainerClick(event: Event): void;
-    setDataTestIds(): void;
+    handleInputClick(event: Event): void;
+    handleClick(): void;
     private _toggleSwitch;
     private _getLabelMarkup;
     private _getInputId;

package/dist/types/components/switch/switch.d.ts

@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
-export declare class NjcSwitch extends LitElement {
+import { TestableLitElement } from '../../utils/components/testable-lit-element/testable-lit-element.ts';
+export declare class NjcSwitch extends TestableLitElement {
     private _randomId;
     /**
         @description id - id for the rendered switch element
@@ -7,11 +7,6 @@ export declare class NjcSwitch extends LitElement {
      */
     id: string;
     getElementId(): string;
-    /**
-        @description dataTestid - Value to be used for the data-testid attribute
-        @property {string}
-     */
-    dataTestid: string;
     /**
         @property disabled - Disables the switch
         @type {boolean}

package/dist/types/components/text-detail/gator/text-detail.gator.d.ts

@@ -3,6 +3,8 @@ export declare class NgcTextDetail extends NjcTextDetail {
     static styles: import('lit').CSSResult[];
     render(): import('lit').TemplateResult<1>;
     get textDetailMarkup(): import('lit').TemplateResult<1>;
+    get verticalClass(): "" | "gator-text-detail_vertical";
+    get invertTitleClass(): "" | "gator-text-detail-content_invert-title";
     get textDetailLoadingMarkup(): import('lit').TemplateResult<1>;
     get textDetailTitleMarkup(): import('lit').TemplateResult<1> | null;
     get textDetailTitleIconMarkup(): import('lit').TemplateResult<1> | null;

package/dist/types/components/text-detail/text-detail.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-export type NJC_TEXT_DETAIL_SIZES = null | 'sm' | 'md' | 'lg';
+export type NJC_TEXT_DETAIL_SIZES = null | 'small' | 'medium' | 'large';
 export declare class NjcTextDetail extends LitElement {
     /**
      * @description The text detail title
@@ -22,8 +22,18 @@ export declare class NjcTextDetail extends LitElement {
      */
     titleIcon: string;
     /**
-     * @description Sets the loading state
-     * @property {boolean} loading
+     * @description Sets whether the text detail shows the skeleton loader
+     * @property {boolean} skeleton
      */
-    loading: boolean;
+    skeleton: boolean;
+    /**
+     * @description If true, the text detail will be displayed vertically
+     * @property {boolean} vertical
+     */
+    vertical: boolean;
+    /**
+     * @description If true, the title and content positions will be inverted
+     * @property {boolean} invertTitle
+     */
+    invertTitle: boolean;
 }

package/dist/types/utils/components/slot-placeholder/slot-placeholder.d.ts

@@ -1,4 +1,4 @@
 import { LitElement } from 'lit';
-export declare class NjcSlotPlaceholder extends LitElement {
+export declare class SlotPlaceholder extends LitElement {
     render(): import('lit').TemplateResult<1>;
 }

package/dist/types/utils/components/testable-lit-element/testable-lit-element.d.ts

@@ -0,0 +1,10 @@
+import { LitElement } from 'lit';
+export declare class TestableLitElement extends LitElement {
+    /**
+     @property dataTestid - Value to be used for the data-testid attribute
+     **/
+    dataTestid: string | undefined;
+    get labelDataTestid(): string | undefined;
+    get helpTextDataTestid(): string | undefined;
+    get errorMessageDataTestid(): string | undefined;
+}

package/dist/types/utils/datatestid-utils.d.ts

@@ -9,4 +9,4 @@
  * on the element as `${componentDataTestid}-${dataTestidAppend}`.
  * Otherwise, removes the data-testid attribute from the element.
  */
-export declare function handleDataTestid(element: any, componentDataTestid: string, dataTestidAppend: string): void;
+export declare function handleDataTestid(element: any, componentDataTestid: string | undefined, dataTestidAppend: string): void;

package/dist/utils/components/slot-placeholder/index.js

@@ -1 +1 @@
-import{N as l}from"./slot-placeholder.js";import"../../../assets/index-chunk.js";import"../../../assets/index-chunk3.js";export{l as NjcSlotPlaceholder};
+import{S as l}from"./slot-placeholder.js";import"../../../assets/index-chunk.js";import"../../../assets/index-chunk3.js";export{l as SlotPlaceholder};

package/dist/utils/components/slot-placeholder/slot-placeholder.js

@@ -1,5 +1,5 @@
-import{h as a,k as i}from"../../../assets/index-chunk.js";import{t as n}from"../../../assets/index-chunk3.js";var v=Object.defineProperty,c=Object.getOwnPropertyDescriptor,f=(l,e,o,s)=>{for(var r=s>1?void 0:s?c(e,o):e,t=l.length-1,d;t>=0;t--)(d=l[t])&&(r=(s?d(e,o,r):d(r))||r);return s&&r&&v(e,o,r),r};let p=class extends a{render(){return i`
+import{h as a,k as i}from"../../../assets/index-chunk.js";import{t as v}from"../../../assets/index-chunk3.js";var f=Object.defineProperty,h=Object.getOwnPropertyDescriptor,n=(l,e,o,s)=>{for(var r=s>1?void 0:s?h(e,o):e,t=l.length-1,d;t>=0;t--)(d=l[t])&&(r=(s?d(e,o,r):d(r))||r);return s&&r&&f(e,o,r),r};let p=class extends a{render(){return i`
             <div style="border: 1px dashed #C3A786; border-radius: 0.5rem; padding: 1rem">
                 Swap this with your design
             </div>
-        `}};p=f([n("njc-slot-placeholder")],p);export{p as N};
+        `}};p=n([v("slot-placeholder")],p);export{p as S};

package/dist/utils/components/testable-lit-element/testable-lit-element.js

@@ -0,0 +1 @@
+import{h as d}from"../../../assets/index-chunk.js";import{n as o}from"../../../assets/index-chunk2.js";var T=Object.defineProperty,n=(e,s,i,h)=>{for(var t=void 0,a=e.length-1,r;a>=0;a--)(r=e[a])&&(t=r(s,i,t)||t);return t&&T(s,i,t),t};class l extends d{constructor(){super(...arguments),this.dataTestid=void 0}get labelDataTestid(){return this.dataTestid?`${this.dataTestid}-label`:void 0}get helpTextDataTestid(){return this.dataTestid?`${this.dataTestid}-help-text`:void 0}get errorMessageDataTestid(){return this.dataTestid?`${this.dataTestid}-error-message`:void 0}}n([o({type:String,attribute:"data-testid"})],l.prototype,"dataTestid");export{l as T};

package/dist/utils/datatestid-utils.js

@@ -1 +1 @@
-import{i as t}from"./string-utils.js";function d(i,a,s){t(a)?i==null||i.setAttribute("data-testid",`${a}-${s}`):i==null||i.removeAttribute("data-testid")}export{d as h};
+import{i as a}from"./string-utils.js";function d(i,r,s){r&&a(r)?i==null||i.setAttribute("data-testid",`${r}-${s}`):i==null||i.removeAttribute("data-testid")}export{d as h};

package/package.json

@@ -2,7 +2,7 @@
     "name": "@ncino/web-components",
     "author": "nCino",
     "packageManager": "pnpm@9.12.3",
-    "version": "1.1.0",
+    "version": "1.2.0-preview.1",
     "license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
     "publishConfig": {
         "registry": "https://registry.npmjs.org/"