genesys-spark-components 3.34.4 → 3.35.0

package/dist/types/components/stable/gux-datepicker/gux-datepicker.types.d.ts

@@ -1,4 +1,4 @@
-import { CalendarModes } from '../../../common-enums';
+import { CalendarModes } from 'common-enums';
 export declare type GuxDatepickerMode = CalendarModes.Single | CalendarModes.Range;
 export declare type GuxDatepickerIntervalRange = {
   selectionStart: number;

package/dist/types/components/stable/gux-popup/gux-popup.d.ts

@@ -1,4 +1,4 @@
-import { JSX } from '../../../stencil-public-runtime';
+import { JSX, EventEmitter } from '../../../stencil-public-runtime';
 /**
  * @slot target - Required slot for target
  * @slot popup - Required slot for popup
@@ -9,6 +9,14 @@ export declare class GuxPopup {
   private popupElementContainer;
   expanded: boolean;
   disabled: boolean;
+  /**
+   * This event will run when the popup transitions to an expanded state.
+   */
+  internalexpanded: EventEmitter<void>;
+  /**
+   * This event will run when the popup transitions to a collapsed state.
+   */
+  internalcollapsed: EventEmitter<void>;
   onExpandedChange(expanded: boolean): void;
   connectedCallback(): void;
   componentDidLoad(): void;

package/dist/types/components.d.ts

@@ -12,22 +12,24 @@ import { GuxButtonAccent as GuxButtonAccent1, GuxButtonType as GuxButtonType1 }
 import { GuxAnnouncePoliteness } from "./components/beta/gux-announce/gux-announce.types";
 import { GuxBadgeColor } from "./components/beta/gux-badge/gux-badge.types";
 import { GuxBreadcrumbAccent } from "./components/stable/gux-breadcrumbs/gux-breadcrumbs.types";
+import { GuxButtonAccent as GuxButtonAccent2 } from "components/stable/gux-button/gux-button.types";
 import { GuxCalendarMode } from "./components/stable/gux-calendar/gux-calendar.types";
 import { GuxCardAccent } from "./components/beta/gux-card/gux-card.types";
 import { EmbedOptions, VisualizationSpec } from "vega-embed";
-import { GuxDateTimeFormat } from "./i18n/DateTimeFormatter";
+import { GuxDateTimeFormat } from "i18n/DateTimeFormatter";
 import { GuxDatepickerMode } from "./components/stable/gux-datepicker/gux-datepicker.types";
 import { GuxDisclosureButtonPosition } from "./components/stable/gux-disclosure-button/gux-disclosure-button.types";
 import { GuxFormFieldLabelPosition } from "./components/stable/gux-form-field/gux-form-field.types";
 import { GuxInputTextAreaResize } from "./components/legacy/gux-form-field-legacy/components/gux-input-textarea/gux-input-textarea.types";
 import { GuxFormFieldLabelPosition as GuxFormFieldLabelPosition1 } from "./components/legacy/gux-form-field-legacy/gux-form-field.types";
 import { GuxFormFieldTextAreaResize } from "./components/stable/gux-form-field/components/gux-form-field-textarea/gux-form-field-textarea.types";
-import { GuxTextHighlightStrategy } from "./components/stable/gux-text-highlight/gux-text-highlight.types";
+import { GuxTextHighlightStrategy } from "components/stable/gux-text-highlight/gux-text-highlight.types";
 import { GuxModalSize } from "./components/stable/gux-modal/gux-modal.types";
-import { GuxISOYearMonth } from "./utils/date/year-month-values";
+import { GuxISOYearMonth } from "utils/date/year-month-values";
 import { GuxNotificationToastAccent } from "./components/stable/gux-notification-toast/gux-notification-toast.types";
 import { GuxItemsPerPage, GuxPaginationLayout, GuxPaginationState } from "./components/stable/gux-pagination/gux-pagination.types";
-import { GuxItemsPerPage as GuxItemsPerPage1, GuxPaginationLayoutBeta } from "./components/beta/gux-pagination-beta/gux-pagination-beta.types";
+import { GuxItemsPerPage as GuxItemsPerPage2, GuxPaginationLayoutBeta } from "./components/beta/gux-pagination-beta/gux-pagination-beta.types";
+import { GuxItemsPerPage as GuxItemsPerPage1, GuxPaginationState as GuxPaginationState1 } from "components/stable/gux-pagination/gux-pagination.types";
 import { GuxPaginationCursorDetail } from "./components/stable/gux-pagination-cursor/gux-pagination-cursor.types";
 import { PopperPosition } from "./components/stable/gux-popover/gux-popover.types";
 import { PopperPosition as PopperPosition1 } from "./components/beta/gux-popover-list/gux-popover-list.types";
@@ -38,6 +40,7 @@ import { GuxTableSelectedState, GuxTableSortState } from "./components/beta/gux-
 import { GuxSwitchAllowedLayouts } from "./components/stable/gux-switch/gux-switch.types";
 import { GuxTabsAlignment, GuxTabsOrientation } from "./components/stable/gux-tabs/gux-tabs-types";
 import { GuxTagColor } from "./components/beta/gux-tag/gux-tag.types";
+import { GuxTextHighlightStrategy as GuxTextHighlightStrategy1 } from "./components/stable/gux-text-highlight/gux-text-highlight.types";
 import { GuxClockType, GuxISOHourMinute, GuxMinuteInterval } from "./components/beta/gux-time-picker/gux-time-picker.type";
 import { GuxToggleLabelPosition } from "./components/stable/gux-toggle/gux-toggle.types";
 import { GuxTooltipPlacements } from "./components/stable/gux-tooltip/gux-tooltip.types";
@@ -209,7 +212,7 @@ export namespace Components {
         "type": GuxButtonType;
     }
     interface GuxButtonMulti {
-        "accent": GuxButtonAccent;
+        "accent": GuxButtonAccent2;
         /**
           * Disables the action button.
          */
@@ -239,7 +242,7 @@ export namespace Components {
         "text": string;
     }
     interface GuxButtonSlotBeta {
-        "accent": GuxButtonAccent;
+        "accent": GuxButtonAccent2;
     }
     interface GuxCalendar {
         /**
@@ -965,7 +968,7 @@ export namespace Components {
         /**
           * The max number of items on a page. Used to calculate total page count
          */
-        "itemsPerPage": GuxItemsPerPage;
+        "itemsPerPage": GuxItemsPerPage1;
         /**
           * The pagination component can have different layouts to suit the available space
          */
@@ -1003,7 +1006,7 @@ export namespace Components {
         "itemsPerPage": GuxItemsPerPage;
     }
     interface GuxPaginationItemsPerPageBeta {
-        "itemsPerPage": GuxItemsPerPage1;
+        "itemsPerPage": GuxItemsPerPage2;
     }
     interface GuxPanelFrameLegacy {
     }
@@ -1308,7 +1311,7 @@ export namespace Components {
         /**
           * The way the text should be highlighted.
          */
-        "strategy": GuxTextHighlightStrategy;
+        "strategy": GuxTextHighlightStrategy1;
         /**
           * The value to display.
          */
@@ -1444,6 +1447,10 @@ export interface GuxDropdownLegacyCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLGuxDropdownLegacyElement;
 }
+export interface GuxDropdownMultiBetaCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLGuxDropdownMultiBetaElement;
+}
 export interface GuxDropdownMultiTagCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLGuxDropdownMultiTagElement;
@@ -1516,6 +1523,10 @@ export interface GuxPopoverListCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLGuxPopoverListElement;
 }
+export interface GuxPopupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLGuxPopupElement;
+}
 export interface GuxRowSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLGuxRowSelectElement;
@@ -2745,7 +2756,7 @@ declare namespace LocalJSX {
         "type"?: GuxButtonType;
     }
     interface GuxButtonMulti {
-        "accent"?: GuxButtonAccent;
+        "accent"?: GuxButtonAccent2;
         /**
           * Disables the action button.
          */
@@ -2791,7 +2802,7 @@ declare namespace LocalJSX {
         "text"?: string;
     }
     interface GuxButtonSlotBeta {
-        "accent"?: GuxButtonAccent;
+        "accent"?: GuxButtonAccent2;
     }
     interface GuxCalendar {
         /**
@@ -3182,6 +3193,14 @@ declare namespace LocalJSX {
         "disabled"?: boolean;
         "filterable"?: boolean;
         "hasError"?: boolean;
+        /**
+          * This event will run when the dropdown-multi transitions to a collapsed state.
+         */
+        "onGuxcollapsed"?: (event: GuxDropdownMultiBetaCustomEvent<void>) => void;
+        /**
+          * This event will run when the dropdown-multi transitions to an expanded state.
+         */
+        "onGuxexpanded"?: (event: GuxDropdownMultiBetaCustomEvent<void>) => void;
         "placeholder"?: string;
         "required"?: boolean;
         "value"?: string;
@@ -3502,12 +3521,12 @@ declare namespace LocalJSX {
         /**
           * The max number of items on a page. Used to calculate total page count
          */
-        "itemsPerPage"?: GuxItemsPerPage;
+        "itemsPerPage"?: GuxItemsPerPage1;
         /**
           * The pagination component can have different layouts to suit the available space
          */
         "layout"?: GuxPaginationLayoutBeta;
-        "onGuxpaginationchange"?: (event: GuxPaginationBetaCustomEvent<GuxPaginationState>) => void;
+        "onGuxpaginationchange"?: (event: GuxPaginationBetaCustomEvent<GuxPaginationState1>) => void;
         /**
           * The total number of items in the data set. Used to calculate total page count
          */
@@ -3545,7 +3564,7 @@ declare namespace LocalJSX {
         "onInternalitemsperpagechange"?: (event: GuxPaginationItemsPerPageCustomEvent<number>) => void;
     }
     interface GuxPaginationItemsPerPageBeta {
-        "itemsPerPage"?: GuxItemsPerPage1;
+        "itemsPerPage"?: GuxItemsPerPage2;
         "onInternalitemsperpagechange"?: (event: GuxPaginationItemsPerPageBetaCustomEvent<number>) => void;
     }
     interface GuxPanelFrameLegacy {
@@ -3597,6 +3616,14 @@ declare namespace LocalJSX {
     interface GuxPopup {
         "disabled"?: boolean;
         "expanded"?: boolean;
+        /**
+          * This event will run when the popup transitions to a collapsed state.
+         */
+        "onInternalcollapsed"?: (event: GuxPopupCustomEvent<void>) => void;
+        /**
+          * This event will run when the popup transitions to an expanded state.
+         */
+        "onInternalexpanded"?: (event: GuxPopupCustomEvent<void>) => void;
     }
     interface GuxRadialLoading {
         /**
@@ -3894,7 +3921,7 @@ declare namespace LocalJSX {
         /**
           * The way the text should be highlighted.
          */
-        "strategy"?: GuxTextHighlightStrategy;
+        "strategy"?: GuxTextHighlightStrategy1;
         /**
           * The value to display.
          */

package/dist/types/src/common-enums.d.ts

@@ -0,0 +1,17 @@
+export declare const enum ListTypeEnum {
+    Divider = "divider",
+    Item = "item",
+    Header = "header"
+}
+export declare const enum CalendarModes {
+    Single = "single",
+    Range = "range"
+}
+export declare const enum ButtonAccents {
+    Primary = "primary",
+    Secondary = "secondary"
+}
+export declare const enum ErrorMessageType {
+    Warning = "warning",
+    Error = "error"
+}

package/dist/types/src/components/stable/gux-button/gux-button.types.d.ts

@@ -0,0 +1,2 @@
+export declare type GuxButtonAccent = 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'danger';
+export declare type GuxButtonType = 'button' | 'submit' | 'reset';

package/dist/types/src/components/stable/gux-pagination/gux-pagination.types.d.ts

@@ -0,0 +1,6 @@
+export declare type GuxItemsPerPage = 25 | 50 | 75 | 100;
+export declare type GuxPaginationLayout = 'small' | 'expanded' | 'full';
+export declare type GuxPaginationState = {
+    currentPage: number;
+    itemsPerPage: number;
+};

package/dist/types/src/components/stable/gux-text-highlight/gux-text-highlight.types.d.ts

@@ -0,0 +1 @@
+export declare type GuxTextHighlightStrategy = 'start' | 'contains' | 'fuzzy';

package/dist/types/src/i18n/DateTimeFormatter.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Allowed formats for formatting dates and times
+ */
+export declare type GuxDateTimeFormat = 'full' | 'long' | 'medium' | 'short';
+/**
+ * @class A class that implements the method needed to format dates and times depending on locales
+ */
+export declare class DateTimeFormatter {
+    locale: string;
+    /**
+     * @constructor
+     * @param locale A locale string is required to initialize a DateTimeFormatter class instance
+     */
+    constructor(locale: string);
+    /**
+     *
+     * @param {Date} datetime A Date object that requires formatting
+     * @param {GuxDateTimeFormat} format An allowed format string
+     * @returns {string} Formatted date string
+     */
+    formatDate(datetime: Date, format: GuxDateTimeFormat): string;
+    /**
+     *
+     * @param {Date} datetime A Date object that requires formatting
+     * @param {GuxDateTimeFormat} format An allowed format string
+     * @returns {string} Formatted time string
+     */
+    formatTime(datetime: Date, format: GuxDateTimeFormat): string;
+    /**
+     *
+     * @param {Date} datetime A Date object that requires formatting
+     * @param {GuxDateTimeFormat} format An allowed format string
+     * @returns {string} Formatted datetime string
+     */
+    formatDateTime(datetime: Date, format: GuxDateTimeFormat): string;
+}

package/dist/types/src/utils/date/year-month-values.d.ts

@@ -0,0 +1,8 @@
+export declare type GuxISOYearMonth = `${string}-${string}`;
+export declare type GuxYearMonthObject = {
+    year: string;
+    month: string;
+};
+export declare function getISOYearMonth(year: string | number, month: string | number): GuxISOYearMonth;
+export declare function getYearMonthObject(yearMonthString: GuxISOYearMonth): GuxYearMonthObject;
+export declare function getCurrentISOYearMonth(): GuxISOYearMonth;

package/dist/types/test/axeConfig.d.ts

@@ -0,0 +1,6 @@
+export declare const axeConfig: {
+  runOnly: {
+    type: string;
+    values: string[];
+  };
+};

package/dist/types/test/e2eTestUtils.d.ts

@@ -0,0 +1,9 @@
+import { E2EPage } from '@stencil/core/testing';
+export declare function a11yCheck(page: E2EPage, axeExclusions?: {
+  issueId: string;
+  target?: string;
+  exclusionReason: string;
+}[], axeScanContext?: string): Promise<void>;
+export declare function newSparkE2EPage({ html }: {
+  html: string;
+}, lang?: string): Promise<E2EPage>;

package/dist/types/test/jestMatcherUtils.d.ts

@@ -0,0 +1,8 @@
+export {};
+declare global {
+  namespace jest {
+    interface Matchers<R> {
+      toHaveNoViolations(exclusions: unknown): R;
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "genesys-spark-components",
-  "version": "3.34.4",
+  "version": "3.35.0",
   "description": "Common webcomponents",
   "license": "MIT",
   "main": "dist/stencil-wrapper.js",

package/dist/genesys-webcomponents/p-34f7ed93.entry.js

@@ -1 +0,0 @@
-import{r as t,h as o,H as s,g as i}from"./p-7a1d01cb.js";import{t as r}from"./p-a83860d3.js";import{b as e}from"./p-091f51f6.js";const a=class{constructor(o){t(this,o),this.politeness="polite"}async guxAnnounce(t){this.containerElement.innerText="",e((()=>{this.containerElement.innerText=t}))}componentWillLoad(){r(this.root)}render(){return o(s,{"aria-live":this.politeness},o("slot",null),o("div",{ref:t=>this.containerElement=t}))}get root(){return i(this)}};a.style=":host{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}";export{a as gux_announce_beta}

package/dist/genesys-webcomponents/p-8e88f03e.entry.js

@@ -1 +0,0 @@
-import{r as e,h as t}from"./p-7a1d01cb.js";import{c as s}from"./p-ec26fc38.js";const i=class{constructor(t){e(this,t),this.expanded=!1,this.disabled=!1}onExpandedChange(e){e&&this.popperInstance.forceUpdate()}connectedCallback(){this.targetElementContainer&&this.popupElementContainer&&this.setPopperInstance()}componentDidLoad(){this.setPopperInstance()}disconnectedCallback(){var e;null===(e=this.popperInstance)||void 0===e||e.destroy()}setPopperInstance(){this.popperInstance=s(this.targetElementContainer,this.popupElementContainer,{strategy:"fixed",modifiers:[{name:"flip",options:{boundary:[]}},{name:"offset",options:{offset:[0,2]}},{name:"sameWidth",enabled:!0,phase:"beforeWrite",requires:["computeStyles"],fn({state:e}){e.styles.popper.width=`${e.rects.reference.width}px`},effect({state:e}){e.elements.popper.style.width=`${e.elements.reference.getBoundingClientRect().width}px`}}],placement:"bottom-start"})}render(){return t("div",{class:{"gux-target-container":!0,"gux-disabled":this.disabled},ref:e=>this.targetElementContainer=e},t("slot",{name:"target"}),t("div",{class:{"gux-popup-container":!0,"gux-expanded":this.expanded&&!this.disabled},ref:e=>this.popupElementContainer=e},t("slot",{name:"popup"})))}static get watchers(){return{expanded:["onExpandedChange"]}}};i.style=".gux-target-container.gux-disabled{pointer-events:none;cursor:default;opacity:0.5}.gux-popup-container{z-index:var(--gux-zindex-popup, 1);visibility:hidden}.gux-popup-container.gux-expanded{visibility:visible}";export{i as gux_popup}

package/dist/genesys-webcomponents/p-987cd0fc.entry.js

@@ -1 +0,0 @@
-import{r as t,h as s,H as r,g as o}from"./p-7a1d01cb.js";import{t as i}from"./p-a83860d3.js";import{D as a}from"./p-56e6f5a4.js";import{g as e}from"./p-c35bd7c8.js";import"./p-8a133b9b.js";const p=class{constructor(s){t(this,s),this.datetime=(new Date).toISOString(),this.format="short"}componentWillLoad(){i(this.root),this.formatter=new a(e(this.root))}render(){return s(r,null,this.formatter.formatTime(new Date(this.datetime),this.format))}get root(){return o(this)}};export{p as gux_time_beta}

package/dist/genesys-webcomponents/p-b9c652da.entry.js

@@ -1 +0,0 @@
-import{r as t,c as i,h as o,g as s}from"./p-7a1d01cb.js";import{O as n}from"./p-f77f86a9.js";import{w as e}from"./p-76ff3e75.js";import{a}from"./p-091f51f6.js";import{t as c}from"./p-a83860d3.js";import{b as r}from"./p-c35bd7c8.js";import"./p-8a133b9b.js";const h={actionButtonDropdown:"Dropdown for {buttonTitle}"};const u=class{constructor(o){t(this,o),this.open=i(this,"open",7),this.close=i(this,"close",7),this.actionClick=i(this,"actionClick",7),this.type="button",this.disabled=!1,this.accent="secondary",this.isOpen=!1}handleKeydown(t){const i=t.composedPath();switch(t.key){case"Escape":this.isOpen=!1,i.includes(this.listElement)&&(t.preventDefault(),this.dropdownButton.focus());break;case"Tab":this.isOpen=!1;break;case"ArrowDown":case"Enter":i.includes(this.dropdownButton)&&(t.preventDefault(),this.isOpen=!0,this.focusFirstItemInPopupList())}}handleKeyup(t){switch(t.key){case" ":t.composedPath().includes(this.dropdownButton)&&(this.isOpen=!0,this.focusFirstItemInPopupList())}}watchDisabled(t){t&&(this.isOpen=!1)}watchValue(t){t?this.open.emit():this.close.emit()}onClickOutside(t){null===t.relatedTarget&&(this.isOpen=!1)}toggle(){this.disabled||(this.isOpen=!this.isOpen,this.isOpen&&this.focusPopupList())}focusPopupList(){a((()=>{this.listElement.focus&&this.listElement.focus()}))}focusFirstItemInPopupList(){a((()=>{this.listElement.guxFocusFirstItem()}))}onActionClick(){this.disabled||(this.isOpen=!1,this.actionClick.emit())}onListClick(t){e("gux-list-item",t,(()=>{this.isOpen=!1,this.dropdownButton.focus()}))}async componentWillLoad(){c(this.root,{variant:this.type}),this.i18n=await r(this.root,h)}render(){return o("div",{class:"gux-action-button-container"},o("gux-popup",{expanded:this.isOpen,disabled:this.disabled},o("div",{slot:"target",class:"gux-action-button-container"},o("gux-button-slot-beta",{class:"gux-action-button",accent:this.accent},o("button",{type:this.type,disabled:this.disabled,onClick:()=>this.onActionClick()},this.text)),o("gux-button-slot-beta",{class:"gux-dropdown-button",accent:this.accent},o("button",{type:"button",disabled:this.disabled,ref:t=>this.dropdownButton=t,onMouseUp:()=>this.toggle(),"aria-haspopup":"true","aria-expanded":this.isOpen.toString(),"aria-label":this.i18n("actionButtonDropdown",{buttonTitle:this.text})},o("gux-icon",{decorative:!0,"icon-name":"chevron-small-down"})))),o("div",{class:"gux-list-container",slot:"popup"},o("gux-list",{onClick:t=>this.onListClick(t),ref:t=>this.listElement=t},o("slot",null)))))}get root(){return s(this)}static get watchers(){return{disabled:["watchDisabled"],isOpen:["watchValue"]}}};(function(t,i,o,s){var n,e=arguments.length,a=e<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,i,o,s);else for(var c=t.length-1;c>=0;c--)(n=t[c])&&(a=(e<3?n(a):e>3?n(i,o,a):n(i,o))||a);e>3&&a&&Object.defineProperty(i,o,a)})([n({triggerEvents:"click"})],u.prototype,"onClickOutside",null),u.style=":host{display:block;-webkit-user-select:none;user-select:none;font-family:Roboto, sans-serif;font-weight:400;font-size:12px;line-height:20px}.gux-action-button-container{min-width:128px}.gux-action-button-container>*{vertical-align:middle}.gux-action-button-container .gux-action-button{width:calc(100% - 33px);margin-right:1px}.gux-action-button-container .gux-action-button button{width:100%;max-width:none;text-align:center;border-top-right-radius:0;border-bottom-right-radius:0}.gux-action-button-container .gux-dropdown-button button{width:32px;min-width:0;padding:0;border-top-left-radius:0;border-bottom-left-radius:0}.gux-action-button-container .gux-dropdown-button button gux-icon{width:16px;height:16px}.gux-action-button-container .gux-list-container{padding:8px 0;margin:0;list-style:none;background-color:#fdfdfd;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}";export{u as gux_action_button}

package/dist/genesys-webcomponents/p-c4bf8326.entry.js

@@ -1 +0,0 @@
-import{r as t,f as e,h as i,g as o}from"./p-7a1d01cb.js";import{O as n}from"./p-f77f86a9.js";import{b as s}from"./p-c35bd7c8.js";import{s as r}from"./p-d176c2ae.js";import{b as l}from"./p-091f51f6.js";import{t as u}from"./p-a83860d3.js";import{g as d}from"./p-adf414b8.js";import"./p-8a133b9b.js";const a={filterResults:"Type to filter dropdown results",noSelection:"Select...",dropdown:"Dropdown",numberSelected:"{numberSelected} selected"};const c=class{constructor(e){t(this,e),this.disabled=!1,this.required=!1,this.filterable=!1,this.hasError=!1,this.expanded=!1,this.filter=""}focusSelectedItemAfterRender(t){t&&this.listboxElement&&l((()=>{this.listboxElement.focus(),this.filterable&&this.filterElement.focus()})),t||(this.filter="")}validateValue(t){void 0!==t?this.getOptionElementByValue(t)?this.listboxElement.value=t:this.value=void 0:this.listboxElement&&(this.listboxElement.value=t)}getSelectedValues(){var t;return Promise.resolve((null===(t=this.value)||void 0===t?void 0:t.split(","))||[])}onKeydown(t){switch(t.key){case"Escape":return this.filterable&&document.activeElement===this.listboxElement?this.filterElement.focus():void this.collapseListbox("focusFieldButton");case"Tab":return this.shiftTabFromFilterListbox(t)?(t.preventDefault(),this.filterElement.focus()):this.shiftTabFromExpandedFilterInput(t)?(t.preventDefault(),this.collapseListbox("focusFieldButton")):void this.collapseListbox("noFocusChange");case"ArrowDown":return void(this.activeElementNotListbox()&&(t.preventDefault(),this.expanded=!0))}}onInternallistboxoptionsupdated(t){t.stopPropagation(),e(this.root)}onGuxclearselected(t){t.stopPropagation(),this.updateValue(""),this.listboxElement&&(this.listboxElement.value=void 0),this.validateValue(this.value),this.fieldButtonElement.focus()}onBlur(t){this.stopPropagationOfInternalFocusEvents(t)}onFocus(t){this.stopPropagationOfInternalFocusEvents(t)}onFocusout(t){this.stopPropagationOfInternalFocusEvents(t)}onFocusin(t){this.stopPropagationOfInternalFocusEvents(t)}onClickOutside(){this.collapseListbox("noFocusChange")}async componentWillLoad(){u(this.root),this.i18n=await s(this.root,a),this.listboxElement=this.root.querySelector("gux-listbox-multi"),this.validateValue(this.value)}componentDidLoad(){this.listboxElement.addEventListener("input",(t=>{t.stopPropagation(),this.updateValue(t.target.value)})),this.listboxElement.addEventListener("change",(t=>{t.stopPropagation()}))}componentWillRender(){this.validateValue(this.value),this.listboxElement.filter=this.filter}stopPropagationOfInternalFocusEvents(t){if(this.root.contains(t.relatedTarget))return t.stopImmediatePropagation()}getOptionElementByValue(t){const e=Array.from(this.root.querySelectorAll("gux-option-multi")),i=t?t.split(","):void 0;if(i)return e.filter((t=>i.includes(t.value)))}fieldButtonClick(){this.expanded=!this.expanded}fieldButtonInputClick(){this.expanded||(this.expanded=!this.expanded)}filterInput(t){t.stopPropagation(),this.filter=this.filterElement.value}shiftTabFromExpandedFilterInput(t){return t.shiftKey&&this.filterable&&this.expanded&&!(document.activeElement===this.listboxElement)}shiftTabFromFilterListbox(t){return t.shiftKey&&this.filterable&&document.activeElement===this.listboxElement}activeElementNotListbox(){return document.activeElement!==this.listboxElement}filterKeydown(t){switch(t.key){case"ArrowDown":return t.stopImmediatePropagation(),void this.listboxElement.focus();case"Enter":return this.listboxElement.guxSelectActive(),void t.preventDefault()}}filterKeyup(t){switch(t.key){case" ":return void t.preventDefault()}}collapseListbox(t){this.expanded&&(this.expanded=!1),"focusFieldButton"===t&&this.fieldButtonElement.focus()}updateValue(t){this.value!==t&&(this.value=t,r(this.root,"input"),r(this.root,"change"))}getSuggestionText(t){const e=t.length;if(e>0){const i=d(this.listboxElement,t);if(i)return i.textContent.substring(e)}return""}renderTargetDisplay(){return i("div",{class:"gux-placeholder"},this.placeholder||this.i18n("noSelection"),this.getSrSelectedText())}getSrSelectedText(){const t=this.getOptionElementByValue(this.value);if(null==t?void 0:t.length)return i("span",{class:"gux-sr-only"},this.i18n("numberSelected",{numberSelected:t.length.toString()}))}renderTag(){const t=this.getOptionElementByValue(this.value);if(null==t?void 0:t.length)return i("gux-dropdown-multi-tag",{disabled:this.disabled,"number-selected":t.length})}renderFilterInputField(){if(this.expanded&&this.filterable)return i("div",{class:"gux-field gux-input-field"},i("div",{class:"gux-field-content"},i("div",{class:"gux-filter"},i("div",{class:"gux-filter-display"},i("span",{class:"gux-filter-text"},this.filter),i("span",{class:"gux-filter-suggestion"},this.getSuggestionText(this.filter))),i("div",{class:"input-and-dropdown-button"},i("input",{onClick:this.fieldButtonInputClick.bind(this),placeholder:this.placeholder||this.i18n("noSelection"),class:"gux-filter-input",type:"text","aria-label":this.i18n("filterResults"),ref:t=>this.filterElement=t,onInput:this.filterInput.bind(this),onKeyDown:this.filterKeydown.bind(this),onKeyUp:this.filterKeyup.bind(this)})))))}renderPopup(){return i("div",{slot:"popup",class:"gux-listbox-container"},i("slot",null))}renderTarget(){return i("div",{class:{"gux-target-container":!0,"gux-target-container-expanded":this.expanded&&this.filterable,"gux-target-container-collapsed":!(this.expanded&&this.filterable),"gux-error":this.hasError},slot:"target"},this.renderFilterInputField(),i("button",{type:"button",class:"gux-field gux-field-button",disabled:this.disabled,onClick:this.fieldButtonClick.bind(this),ref:t=>this.fieldButtonElement=t,"aria-haspopup":"listbox","aria-expanded":this.expanded.toString()},this.renderTargetContent(),i("gux-icon",{class:{"gux-expand-icon":!0},"screenreader-text":this.i18n("dropdown"),iconName:"chevron-small-down"})))}renderTargetContent(){if(!this.expanded||!this.filterable)return i("div",{class:"gux-field-content"},this.renderTargetDisplay())}render(){return[i("div",{class:"gux-dropdown-container"},i("gux-popup",{expanded:this.expanded,disabled:this.disabled},this.renderTarget(),this.renderPopup()),this.renderTag())]}get root(){return o(this)}static get watchers(){return{expanded:["focusSelectedItemAfterRender"],value:["validateValue"]}}};(function(t,e,i,o){var n,s=arguments.length,r=s<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,o);else for(var l=t.length-1;l>=0;l--)(n=t[l])&&(r=(s<3?n(r):s>3?n(e,i,r):n(e,i))||r);s>3&&r&&Object.defineProperty(e,i,r)})([n({triggerEvents:"mousedown"})],c.prototype,"onClickOutside",null),c.style=":host{color:#2e394c}.gux-dropdown-container{position:relative}gux-dropdown-multi-tag{position:absolute;right:32px;bottom:4px}.gux-error.gux-target-container-collapsed .gux-field-button,.gux-error.gux-target-container-expanded{border-color:#ea0b0b}.gux-field,.gux-target-container-expanded{all:unset;box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:center;width:100%;height:32px;padding:6px 0 6px 6px;font-family:inherit;font-size:12px;line-height:1.6667;cursor:pointer;background-color:#f6f7f9}.gux-field.gux-input-field{height:30px;cursor:text}.gux-field .gux-field-content{position:relative;display:flex;flex:1 1 0;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;min-width:0;height:100%}.gux-field .gux-field-content .gux-filter,.gux-field .gux-field-content .gux-selected-option,.gux-field .gux-field-content .gux-placeholder{flex:1 1 auto;align-self:auto;order:0;padding-left:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gux-field .gux-field-content .gux-filter .gux-sr-only:not(:focus):not(:active),.gux-field .gux-field-content .gux-selected-option .gux-sr-only:not(:focus):not(:active),.gux-field .gux-field-content .gux-placeholder .gux-sr-only:not(:focus):not(:active){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.gux-field .gux-field-content .gux-filter{position:relative;height:100%;padding-left:0}.gux-field .gux-field-content .gux-filter .gux-filter-input{all:unset;width:100%;caret-color:#2e394c}.gux-field .gux-field-content .gux-filter .gux-filter-display .gux-filter-text{color:#2e394c}.gux-field .gux-field-content .gux-filter .gux-filter-display .gux-filter-suggestion{color:#596373}.gux-field .gux-field-content .gux-filter .gux-filter-input,.gux-field .gux-field-content .gux-filter .gux-filter-display{position:absolute}.gux-field .gux-field-content .gux-placeholder{color:#596373}.gux-field .gux-expand-icon{flex:0 0 auto;align-self:auto;order:0;width:16px;height:16px;padding:0 8px;color:#596373}.gux-target-container-expanded{border:1px solid #6b7585;border-radius:4px;box-shadow:inset 0 0 4px rgba(32, 41, 55, 0.16)}.gux-target-container-expanded:focus-within{outline:none;box-shadow:0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff}.gux-target-container-expanded .gux-filter-input{background-color:inherit;border:none}.gux-target-container-expanded .gux-filter-input:focus{border:none;outline:none}.gux-target-container-expanded .gux-field-button{width:auto;height:30px;padding:0 0 0 8px;margin:0;background:inherit;border:none;outline:none;box-shadow:none}.gux-target-container-expanded .gux-field-button:focus{outline:none}.gux-target-container-collapsed .gux-field-button{border:1px solid #6b7585;border-radius:4px;box-shadow:inset 0 0 4px rgba(32, 41, 55, 0.16)}.gux-target-container-collapsed .gux-field-button:focus{outline:none;box-shadow:0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff}.gux-listbox-container{box-sizing:border-box;margin:0;color:#2e394c}.gux-error-message-container{display:none;margin:4px 0}.gux-error-message-container.gux-show{display:flex}";export{c as gux_dropdown_multi_beta}

package/dist/types/stencil-wrapper.d.ts

@@ -1 +0,0 @@
-export declare function registerElements(): void;