@ncino/web-components 7.0.0-preview.5 → 7.0.0-preview.7

package/dist/types/components/input/gator/dropdown/input-dropdown.gator.d.ts

@@ -7,10 +7,26 @@ export type NgcDropdownType = {
 };
 export type NgcDropdownDataType = 'country' | 'state' | 'naics' | 'phoneCodes';
 export declare class NgcInputDropdown extends NgcInputBase {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     static styles: import('lit').CSSResult[];
     multiselect: boolean;
     options: NgcDropdownType[];
     autocomplete: boolean;
+    /**
+     * @property {boolean} selectAll
+     * @description When set to true, a "select all" option will be rendered in the dropdown
+     */
+    selectAll: boolean;
+    /**
+     * @property {string} listboxHelpText
+     * @description Help text to display within the listbox
+     */
+    listboxHelpText: string;
     /**
      * @property {boolean} dataType
      * @description Can be used to have a predefined list of options rendered for you. Options should be null if using dataType
@@ -36,15 +52,26 @@ export declare class NgcInputDropdown extends NgcInputBase {
      * @description The maximum number of results to show in the autocomplete dropdown
      */
     maxAutocompleteResults: number | undefined;
+    /**
+     * @property {boolean} wrapChips
+     * @description When in multiselect mode, this will allow the chips to wrap to new lines instead of truncating to fit on a single line
+     */
+    wrapChips: boolean;
     _cleanup: (() => void) | undefined;
     private _activeDescendant;
     _expanded: boolean;
     _searchValue: string;
+    private _visibleChipCount;
+    private _showOverflowChip;
+    private _truncateChips;
+    private _resizeObserver;
+    private _calculationPending;
     listboxRef: Ref<HTMLDivElement>;
     listRef: Ref<HTMLDivElement>;
     inputRef: Ref<HTMLInputElement>;
     listboxMessageRef: Ref<HTMLElement>;
     protected multiselectValueDelimiter: string;
+    disconnectedCallback(): void;
     render(): import('lit').TemplateResult<1>;
     get controlClasses(): {
         'gator-cursor-pointer': boolean;
@@ -57,7 +84,7 @@ export declare class NgcInputDropdown extends NgcInputBase {
     private get tabIndexForControl();
     firstUpdated(): void;
     updated(changedProperties: Map<string | number | symbol, unknown>): void;
-    get comboboxElement(): Element | undefined;
+    get comboboxElement(): HTMLElement | undefined;
     setComboboxAriaAttributes(): void;
     setComboboxAriaLabelledByElements(): void;
     setMultiselectAriaLabelledbyElements(): void;
@@ -66,12 +93,21 @@ export declare class NgcInputDropdown extends NgcInputBase {
     get inputMarkup(): import('lit').TemplateResult<1>;
     get multiselectLabel(): import('lit').TemplateResult<1> | typeof nothing;
     get multiselectSelectionsMarkup(): unknown;
-    setAriaHiddenOnNgcChipElements(): void;
+    get chipsMarkup(): unknown;
+    get truncatedChipsMarkup(): import('lit').TemplateResult<1>;
+    handleOverflowChipClick(): void;
+    private scheduleOverflowCalculation;
+    private calculateOverflow;
+    private setupResizeObserver;
     removeSelection(value: string): void;
     get fauxInputMarkup(): import('lit').TemplateResult<1>;
     get displayedValue(): string | number | File | File[] | Date;
     get showPlaceholder(): boolean | "";
     get listboxMarkup(): import('lit').TemplateResult<1>;
+    get selectAllIcon(): "checkbox-indeterminate" | "checkbox-selected" | "checkbox";
+    get allSelected(): boolean;
+    selectAllOptions(): void;
+    deselectAllOptions(): void;
     getOptionSelected(value: string): boolean;
     get listboxMessageMarkup(): import('lit').TemplateResult<1> | null;
     setListboxMessageAriaDescribedByElements(): void;
@@ -85,6 +121,7 @@ export declare class NgcInputDropdown extends NgcInputBase {
     get selectedValues(): string[];
     handleComboboxKeydown(e: KeyboardEvent): void;
     toggleListbox(key: string, initial: boolean): void;
+    closeListbox(): void;
     get endIconMarkup(): import('lit').TemplateResult<1>;
     get clearIconButtonMarkup(): import('lit').TemplateResult<1> | null;
     clearValue(): void;

package/package.json

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

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": "7.0.0-preview.4",
+  "version": "7.0.0-preview.6",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -158,6 +158,10 @@
               "name": "dismissible",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "aria-hidden",
+              "value": { "type": "'true' | 'false'", "default": "'false'" }
+            },
             {
               "name": "data-testid",
               "value": { "type": "string | undefined", "default": "undefined" }
@@ -185,6 +189,7 @@
               { "name": "hideBorder", "type": "boolean" },
               { "name": "startIcon", "type": "String" },
               { "name": "dismissible", "type": "boolean" },
+              { "name": "ariaHidden", "type": "'true' | 'false'" },
               { "name": "dataTestid", "type": "string | undefined" },
               { "name": "labelDataTestid" },
               { "name": "helpTextDataTestid" },
@@ -1351,7 +1356,10 @@
           "attributes": [
             {
               "name": "options",
-              "value": { "type": "NGC_BOOLEAN_OPTION[]", "default": "[]" }
+              "value": {
+                "type": "NGC_BOOLEAN_OPTION[] | undefined",
+                "default": "[ { label: 'Yes', value: true }, { label: 'No', value: false } ]"
+              }
             },
             { "name": "for", "value": { "type": "string", "default": "''" } },
             { "name": "min", "value": { "type": "string" } },
@@ -1438,7 +1446,7 @@
           ],
           "js": {
             "properties": [
-              { "name": "options", "type": "NGC_BOOLEAN_OPTION[]" },
+              { "name": "options", "type": "NGC_BOOLEAN_OPTION[] | undefined" },
               { "name": "elementId" },
               { "name": "booleanClasses" },
               { "name": "booleanOptions" },
@@ -4137,6 +4145,14 @@
               "name": "autocomplete",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "select-all",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "listbox-help-text",
+              "value": { "type": "string", "default": "''" }
+            },
             { "name": "data-type", "value": { "type": "string | undefined" } },
             {
               "name": "country-code",
@@ -4151,6 +4167,10 @@
               "name": "max-autocomplete-results",
               "value": { "type": "number | undefined", "default": "250" }
             },
+            {
+              "name": "wrap-chips",
+              "value": { "type": "boolean", "default": "false" }
+            },
             { "name": "id", "value": { "type": "string", "default": "''" } },
             {
               "name": "required",
@@ -4234,6 +4254,8 @@
               { "name": "multiselect", "type": "boolean" },
               { "name": "options", "type": "NgcDropdownType[]" },
               { "name": "autocomplete", "type": "boolean" },
+              { "name": "selectAll", "type": "boolean" },
+              { "name": "listboxHelpText", "type": "string" },
               { "name": "dataType", "type": "string | undefined" },
               { "name": "countryCode", "type": "string | undefined" },
               { "name": "listWidth", "type": "string | undefined" },
@@ -4242,6 +4264,7 @@
                 "name": "maxAutocompleteResults",
                 "type": "number | undefined"
               },
+              { "name": "wrapChips", "type": "boolean" },
               { "name": "_cleanup", "type": "(() => void) | undefined" },
               { "name": "_expanded", "type": "boolean" },
               { "name": "_searchValue", "type": "string" },
@@ -4250,14 +4273,18 @@
               { "name": "inputRef", "type": "Ref<HTMLInputElement>" },
               { "name": "listboxMessageRef", "type": "Ref<HTMLElement>" },
               { "name": "controlClasses" },
-              { "name": "comboboxElement", "type": "Element | undefined" },
+              { "name": "comboboxElement", "type": "HTMLElement | undefined" },
               { "name": "inputMarkup" },
               { "name": "multiselectLabel" },
               { "name": "multiselectSelectionsMarkup", "type": "unknown" },
+              { "name": "chipsMarkup" },
+              { "name": "truncatedChipsMarkup" },
               { "name": "fauxInputMarkup" },
               { "name": "displayedValue" },
               { "name": "showPlaceholder" },
               { "name": "listboxMarkup" },
+              { "name": "selectAllIcon" },
+              { "name": "allSelected" },
               { "name": "listboxMessageMarkup" },
               { "name": "resultsExceedMaxMessage" },
               { "name": "noResultsMessage" },