@zanichelli/albe-web-components 6.10.0-RC1 → 6.10.1

package/dist/esm/z-table.entry.js

@@ -46,7 +46,7 @@ const ZTable = class {
   }
   renderError(tableClass) {
     const minHeight = this.lines ? `calc(40px * ${this.lines})` : "auto";
-    return (h(Host, null, h("div", { class: tableClass }, h("slot", { name: "table-header" })), h("z-table-error", null, h("div", { class: "error-content", style: { minHeight } }, h("slot", { name: "error-image" }), h("div", { class: "text" }, h("z-body", { class: "error-message", level: 3, variant: "semibold" }, this.errorMessage), h("slot", { name: "error-action" }))))));
+    return (h(Host, null, h("div", { class: tableClass }, h("slot", { name: "table-header" })), h("z-table-error", null, h("div", { class: "error-content", style: { minHeight } }, h("slot", { name: "error-image" }), h("div", { class: "text" }, h("span", { class: "body-3-sb error-message" }, this.errorMessage), h("slot", { name: "error-action" }))))));
   }
   renderEmpty(tableClass) {
     const buttonSize = this.isMobile ? ButtonSize.SMALL : ButtonSize.BIG;

package/dist/esm/z-toggle-switch.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-a2ca4b97.js';
-import { r as randomId } from './utils-6cf7efe2.js';
+import { r as randomId } from './utils-f2a0dac2.js';
 import { j as LabelPosition } from './index-968a240f.js';
 import './breakpoints-c386984e.js';
 

package/dist/esm/{z-body_2.entry.js → z-typography.entry.js}

@@ -1,16 +1,5 @@
 import { r as registerInstance, h, g as getElement, H as Host } from './index-a2ca4b97.js';
 
-const ZBody = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /** Font weight variant */
-    this.variant = "regular";
-  }
-  render() {
-    return (h("z-typography", { tabIndex: 0, component: this.component || "span", level: `b${this.level}`, variant: this.variant }, h("slot", null)));
-  }
-};
-
 const stylesCss = ":host>*{margin:0;font-family:var(--dashboard-font)}:host(.regular)>*{font-weight:var(--font-rg)}:host(.semibold)>*{font-weight:600}:host(.light)>*{font-weight:300}:host(.h1)>*{font-size:32px;line-height:40px}:host(.h2)>*{font-size:28px;line-height:36px}:host(.h3)>*{font-size:24px;line-height:32px}:host(.h4)>*{font-size:20px;line-height:28px}:host(.b1)>*{font-size:20px;line-height:28px}:host(.b2)>*{font-size:18px;line-height:28px}:host(.b3)>*{font-size:16px;line-height:24px}:host(.b4)>*{font-size:14px;line-height:20px}:host(.b5)>*{font-size:12px;line-height:16px}:host(:focus-visible){outline:none}";
 
 const ZTypography = class {
@@ -34,4 +23,4 @@ const ZTypography = class {
 };
 ZTypography.style = stylesCss;
 
-export { ZBody as z_body, ZTypography as z_typography };
+export { ZTypography as z_typography };

package/dist/types/beans/index.d.ts

@@ -97,6 +97,7 @@ export declare enum ButtonSize {
   SMALL = "small",
   X_SMALL = "x-small"
 }
+export { ButtonSize as ControlSize };
 export declare enum InputType {
   TEXT = "text",
   PASSWORD = "password",

package/dist/types/components/inputs/z-combobox/index.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../../stencil-public-runtime";
-import { ComboItem } from "../../../beans";
+import { ComboItem, ControlSize } from "../../../beans";
 export declare class ZCombobox {
   /** input unique id */
   inputid: string;
@@ -35,6 +35,8 @@ export declare class ZCombobox {
   maxcheckableitems: number;
   /** group items by category */
   hasgroupitems?: boolean;
+  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
+  size?: ControlSize;
   searchValue: string;
   selectedCounter: number;
   renderItemsList: ComboItem[];

package/dist/types/components/inputs/z-input/index.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../../stencil-public-runtime";
-import { InputType, LabelPosition, InputStatus } from "../../../beans";
+import { InputType, LabelPosition, InputStatus, ControlSize } from "../../../beans";
 export declare class ZInput {
   hostElement: HTMLZInputElement;
   /** the id of the input element */
@@ -46,6 +46,8 @@ export declare class ZInput {
   step?: number;
   /** pattern value (optional): available for tel, text, search, url, email, password*/
   pattern?: string;
+  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
+  size?: ControlSize;
   isTyping: boolean;
   passwordHidden: boolean;
   private timer;

package/dist/types/components/inputs/z-searchbar/index.d.ts

@@ -6,7 +6,7 @@ import { SearchbarItem } from "../../../beans";
 export declare class ZSearchbar {
   /** the id of the searchbar element */
   htmlid: string;
-  /** Show simple input without submit button */
+  /** Prevent submit action */
   preventSubmit?: boolean;
   /** Input search string */
   value?: string;
@@ -26,10 +26,13 @@ export declare class ZSearchbar {
   resultsItems?: SearchbarItem[] | string;
   /** Sort autocomplete results items */
   sortResultsItems?: boolean;
+  /** Show submit button */
+  showSearchButton?: boolean;
   searchString: string;
   currResultsCount: number;
   showResults: boolean;
   private resultsItemsList;
+  private inputRef;
   /** Emitted on search submit, return search string */
   searchSubmit: EventEmitter<string>;
   private emitSearchSubmit;

package/dist/types/components/inputs/z-select/index.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../../stencil-public-runtime";
-import { SelectItem, InputStatus } from "../../../beans";
+import { SelectItem, InputStatus, ControlSize } from "../../../beans";
 export declare class ZSelect {
   element: HTMLZSelectElement;
   /** the id of the input element */
@@ -34,6 +34,8 @@ export declare class ZSelect {
   isfixed?: boolean;
   /** */
   resetItem?: string;
+  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
+  size?: ControlSize;
   isOpen: boolean;
   selectedItem: null | SelectItem;
   searchString: null | string;
@@ -71,6 +73,7 @@ export declare class ZSelect {
   private renderSelectUl;
   private renderResetItem;
   private renderItem;
+  private listSizeType;
   private renderSelectUlItems;
   private renderSelectGroupItems;
   private renderNoSearchResults;

package/dist/types/components/modal/z-modal/index.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from "../../../stencil-public-runtime";
 /**
- * @slot modalContent - set the content of the modal
  * @slot modalCloseButton - accept custom close button
+ * @slot modalContent - set the content of the modal
  */
 export declare class ZModal {
   /** unique id */
@@ -11,13 +11,11 @@ export declare class ZModal {
   /** subtitle (optional) */
   modalsubtitle?: string;
   /** aria-label for close button (optional) */
-  closeButtonLabel?: string;
+  closeButtonLabel: string;
   /** add role "alertdialog" to dialog (optional, default is false) */
   alertdialog?: boolean;
   private dialog;
-  private modalEnd;
-  private closeButton;
-  private shift;
+  host: HTMLZModalElement;
   /** emitted on close button click, returns modalid */
   modalClose: EventEmitter;
   private emitModalClose;
@@ -27,14 +25,19 @@ export declare class ZModal {
   /** emitted on background click, returns modalid */
   modalBackgroundClick: EventEmitter;
   private emitBackgroundClick;
+  componentDidLoad(): void;
   /** open modal */
-  openModal(): Promise<void>;
+  open(): Promise<void>;
   /** close modal */
-  closeModal(): Promise<void>;
-  componentDidLoad(): void;
-  private open;
-  private close;
-  private handleForwardNav;
-  private handleBackwardsNav;
+  close(): Promise<void>;
+  /**
+   * Get a list of focusable elements in the dialog.
+   * Remove elements with `display: none` from the list, because they're not focusable.
+   *
+   * N.B. The list is built on the assumption that elements inside shadow root are placed ALL before the `modalContent` slot.
+   * Adding focusable elements after the `modalContent` slot would break the order of elements in the list.
+   */
+  private get focusableElements();
+  handleKeyDown(e: KeyboardEvent): void;
   render(): HTMLZModalElement;
 }

package/dist/types/components.d.ts

@@ -6,9 +6,9 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { AlertType, LicenseType } from "./beans/index";
-import { AvatarSize, ButtonSize, ButtonType, ButtonVariant, CardVariant, CarouselArrowsPosition, CarouselProgressMode, ComboItem, CoverHeroContentPosition, CoverHeroVariant, DictionaryData, DividerOrientation, DividerSize, ExpandableListButtonAlign, ExpandableListStyle, InfoRevealPosition, InputStatus, InputType, LabelPosition, ListDividerType, ListSize, ListType, NavigationTabsOrientation, NavigationTabsSize, NotificationType, OffCanvasVariant, PocketStatus, PopoverPosition, SearchbarItem, SelectItem, Size, SkipToContentLink, SortDirection, ThemeVariant, ToastNotification, ToastNotificationPosition, ToastNotificationTransition, TransitionDirection, ZAriaAlertMode, ZChipType, ZDatePickerMode, ZFileUploadType, ZRangePickerMode, ZSectionTitleDividerPosition, ZTableRowExpandedType } from "./beans";
+import { AvatarSize, ButtonSize, ButtonType, ButtonVariant, CardVariant, CarouselArrowsPosition, CarouselProgressMode, ComboItem, ControlSize, CoverHeroContentPosition, CoverHeroVariant, DictionaryData, DividerOrientation, DividerSize, ExpandableListButtonAlign, ExpandableListStyle, InfoRevealPosition, InputStatus, InputType, LabelPosition, ListDividerType, ListSize, ListType, NavigationTabsOrientation, NavigationTabsSize, NotificationType, OffCanvasVariant, PocketStatus, PopoverPosition, SearchbarItem, SelectItem, Size, SkipToContentLink, SortDirection, ThemeVariant, ToastNotification, ToastNotificationPosition, ToastNotificationTransition, TransitionDirection, ZAriaAlertMode, ZChipType, ZDatePickerMode, ZFileUploadType, ZRangePickerMode, ZSectionTitleDividerPosition, ZTableRowExpandedType } from "./beans";
 import { ListItem } from "./beans/index.js";
-import { ZTypographyLevels } from "./components/typography/z-typography/index";
+import { ZTypographyLevels } from "./deprecated/typography/z-typography/index";
 export namespace Components {
     interface ZAlert {
         /**
@@ -295,6 +295,10 @@ export namespace Components {
           * search input title text (optional)
          */
         "searchtitle"?: string;
+        /**
+          * Available sizes: `big`, `small` and `x-small`. Defaults to `big`.
+         */
+        "size"?: ControlSize;
         /**
           * uncheck all label (optional)
          */
@@ -537,6 +541,10 @@ export namespace Components {
           * the input is required (optional): available for text, password, number, email, textarea, checkbox
          */
         "required"?: boolean;
+        /**
+          * Available sizes: `big`, `small` and `x-small`. Defaults to `big`.
+         */
+        "size"?: ControlSize;
         /**
           * the input status (optional): available for text, password, number, email, textarea
          */
@@ -772,13 +780,13 @@ export namespace Components {
          */
         "alertdialog"?: boolean;
         /**
-          * aria-label for close button (optional)
+          * close modal
          */
-        "closeButtonLabel"?: string;
+        "close": () => Promise<void>;
         /**
-          * close modal
+          * aria-label for close button (optional)
          */
-        "closeModal": () => Promise<void>;
+        "closeButtonLabel": string;
         /**
           * unique id
          */
@@ -794,7 +802,7 @@ export namespace Components {
         /**
           * open modal
          */
-        "openModal": () => Promise<void>;
+        "open": () => Promise<void>;
     }
     interface ZMyzCard {
         /**
@@ -1309,7 +1317,7 @@ export namespace Components {
          */
         "placeholder"?: string;
         /**
-          * Show simple input without submit button
+          * Prevent submit action
          */
         "preventSubmit"?: boolean;
         /**
@@ -1328,6 +1336,10 @@ export namespace Components {
           * Search helper text
          */
         "searchHelperLabel"?: string;
+        /**
+          * Show submit button
+         */
+        "showSearchButton"?: boolean;
         /**
           * Sort autocomplete results items
          */
@@ -1414,6 +1426,10 @@ export namespace Components {
           * set the input value
          */
         "setValue": (value: string | string[]) => Promise<void>;
+        /**
+          * Available sizes: `big`, `small` and `x-small`. Defaults to `big`.
+         */
+        "size"?: ControlSize;
         /**
           * the input status (optional)
          */
@@ -2815,6 +2831,10 @@ declare namespace LocalJSX {
           * search input title text (optional)
          */
         "searchtitle"?: string;
+        /**
+          * Available sizes: `big`, `small` and `x-small`. Defaults to `big`.
+         */
+        "size"?: ControlSize;
         /**
           * uncheck all label (optional)
          */
@@ -3089,6 +3109,10 @@ declare namespace LocalJSX {
           * the input is required (optional): available for text, password, number, email, textarea, checkbox
          */
         "required"?: boolean;
+        /**
+          * Available sizes: `big`, `small` and `x-small`. Defaults to `big`.
+         */
+        "size"?: ControlSize;
         /**
           * the input status (optional): available for text, password, number, email, textarea
          */
@@ -3969,7 +3993,7 @@ declare namespace LocalJSX {
          */
         "placeholder"?: string;
         /**
-          * Show simple input without submit button
+          * Prevent submit action
          */
         "preventSubmit"?: boolean;
         /**
@@ -3988,6 +4012,10 @@ declare namespace LocalJSX {
           * Search helper text
          */
         "searchHelperLabel"?: string;
+        /**
+          * Show submit button
+         */
+        "showSearchButton"?: boolean;
         /**
           * Sort autocomplete results items
          */
@@ -4070,6 +4098,10 @@ declare namespace LocalJSX {
          */
         "readonly"?: boolean;
         "resetItem"?: string;
+        /**
+          * Available sizes: `big`, `small` and `x-small`. Defaults to `big`.
+         */
+        "size"?: ControlSize;
         /**
           * the input status (optional)
          */

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

@@ -9,6 +9,7 @@ export declare function boolean(value: string | number | boolean): boolean | str
 export declare function retrieveAsset(assetName: string): string;
 export declare function randomId(): string;
 export declare function handleKeyboardSubmit(ev: KeyboardEvent, callback: (...args: any[]) => void, ...args: any[]): void;
+export declare function handleEnterKeydSubmit(ev: KeyboardEvent, callback: (...args: any[]) => void, ...args: any[]): void;
 export declare function getClickedElement(elem?: null | Element): null | Element;
 export declare function getElementTree(elem: Element, tree?: Element[]): null | Element[];
 export declare function getSiblings(elem: HTMLElement): ChildNode[];

package/dist/web-components-library/index.esm.js

@@ -1 +1 @@
-import{c as V}from"./p-8ebe4adf.js";export{n as AlertType,A as AvatarSize,c as ButtonSize,b as ButtonType,B as ButtonVariant,C as CardVariant,Q as CarouselArrowsPosition,R as CarouselProgressMode,M as CoverHeroContentPosition,J as CoverHeroVariant,o as Device,f as DividerOrientation,D as DividerSize,i as ExpandableListButtonAlign,E as ExpandableListStyle,H as InfoRevealPosition,d as InputStatus,I as InputType,e as KeyboardCode,K as KeyboardKeyCode,j as LabelPosition,L as LicenseType,k as ListDividerType,g as ListSize,l as ListType,N as NavigationTabsOrientation,a as NavigationTabsSize,m as NotificationType,O as OffCanvasVariant,p as PocketStatus,P as PopoverPosition,h as Size,S as SortDirection,T as ThemeVariant,q as ToastNotification,s as ToastNotificationPosition,r as ToastNotificationTransition,u as TransitionDirection,t as ZAriaAlertMode,w as ZChipType,y as ZDatePickerMode,z as ZDatePickerModeValue,F as ZDatePickerPosition,v as ZFileUploadType,G as ZRangePickerMode,x as ZSectionTitleDividerPosition,Z as ZTableRowExpandedType}from"./p-a23e9115.js";import"./p-d69e14fb.js";const U={colorFromId:V};export{U as Utils}
+import{c as V}from"./p-056a5f26.js";export{n as AlertType,A as AvatarSize,c as ButtonSize,b as ButtonType,B as ButtonVariant,C as CardVariant,Q as CarouselArrowsPosition,R as CarouselProgressMode,c as ControlSize,M as CoverHeroContentPosition,J as CoverHeroVariant,o as Device,f as DividerOrientation,D as DividerSize,i as ExpandableListButtonAlign,E as ExpandableListStyle,H as InfoRevealPosition,d as InputStatus,I as InputType,e as KeyboardCode,K as KeyboardKeyCode,j as LabelPosition,L as LicenseType,k as ListDividerType,g as ListSize,l as ListType,N as NavigationTabsOrientation,a as NavigationTabsSize,m as NotificationType,O as OffCanvasVariant,p as PocketStatus,P as PopoverPosition,h as Size,S as SortDirection,T as ThemeVariant,q as ToastNotification,s as ToastNotificationPosition,r as ToastNotificationTransition,u as TransitionDirection,t as ZAriaAlertMode,w as ZChipType,y as ZDatePickerMode,z as ZDatePickerModeValue,F as ZDatePickerPosition,v as ZFileUploadType,G as ZRangePickerMode,x as ZSectionTitleDividerPosition,Z as ZTableRowExpandedType}from"./p-a23e9115.js";import"./p-d69e14fb.js";const U={colorFromId:V};export{U as Utils}

package/dist/web-components-library/p-056a5f26.js

@@ -0,0 +1 @@
+import{e as a,o as t}from"./p-a23e9115.js";import{t as e,m as n}from"./p-d69e14fb.js";function s(a){switch(a){case!0:case"true":case 1:case"1":case"on":case"yes":return!0;case!1:case"false":case 0:case"0":case"off":case"no":return!1;default:return a}}function r(){return Math.random().toString(36).replace("0.","")}function c(t,e,...n){t.code!==a.ENTER&&t.code!==a.SPACE||(t.preventDefault(),e(...n))}function u(t,e,...n){t.code===a.ENTER&&(t.preventDefault(),e(...n))}function o(a=null){return a||(a=document.activeElement),a&&a.shadowRoot&&a.shadowRoot.activeElement?o(a=a.shadowRoot.activeElement):a}function f(a,t=[]){return t.push(a),a.parentElement?f(a=a.parentElement,t):a.parentNode&&a.parentNode.host?f(a=a.parentNode.host,t):t}function i(){switch(!0){case window.innerWidth<=n:return t.MOBILE;case window.innerWidth<=e:return t.TABLET;default:return t.DESKTOP}}function d(a){try{return JSON.parse(a)}catch(a){return!1}}function h(a){const t=Math.ceil(2**31-1)*parseFloat(`0.${a}`);let e=Math.ceil(t%1*19);return 0===e&&(e=1),`avatar-C${e.toString().padStart(2,"0")}`}export{u as a,s as b,h as c,f as d,o as e,d as f,i as g,c as h,r}

package/dist/web-components-library/p-0cf7d2b7.entry.js

@@ -0,0 +1 @@
+import{r as e,c as t,h as s,g as i}from"./p-d17ebc2f.js";import{c as l,e as r,k as c,g as a}from"./p-a23e9115.js";import{r as n,b as o,d as h,h as p,e as d}from"./p-056a5f26.js";import"./p-d69e14fb.js";const u=class{constructor(s){e(this,s),this.optionSelect=t(this,"optionSelect",7),this.resetSelect=t(this,"resetSelect",7),this.htmlid=`id-${n()}`,this.ariaLabel="",this.disabled=!1,this.readonly=!1,this.message=!0,this.autocomplete=!1,this.noresultslabel="Nessun risultato",this.isfixed=!1,this.size=l.BIG,this.isOpen=!1,this.selectedItem=null,this.itemsList=[],this.toggleSelectUl=this.toggleSelectUl.bind(this),this.selectItem=this.selectItem.bind(this),this.handleSelectFocus=this.handleSelectFocus.bind(this)}watchItems(){this.itemsList=this.getInitialItemsArray(),this.selectedItem=this.itemsList.find((e=>e.selected))}async getSelectedItem(){return this.selectedItem}async getValue(){return this.getSelectedValue()}async setValue(e){let t=[];"string"==typeof e?t.push(e):t=e,this.selectedItem=this.itemsList.find((e=>t.includes(e.id)))}emitOptionSelect(){this.optionSelect.emit({id:this.htmlid,selected:this.getSelectedValue()})}emitResetSelect(){this.resetSelect.emit({id:this.htmlid})}componentWillLoad(){this.watchItems()}componentWillRender(){this.filterItems(this.searchString)}getInitialItemsArray(){return"string"==typeof this.items?JSON.parse(this.items):this.items}mapSelectedItemToItemsArray(){return this.getInitialItemsArray().map((e=>{var t;return e.selected=e.id===(null===(t=this.selectedItem)||void 0===t?void 0:t.id),e}))}getSelectedValue(){var e;return null===(e=this.selectedItem)||void 0===e?void 0:e.id}filterItems(e){const t=this.mapSelectedItemToItemsArray();this.itemsList=(null==e?void 0:e.length)?t.filter((t=>t.name.toUpperCase().includes(e.toUpperCase()))).map((t=>{const s=t.name.toUpperCase().indexOf(e.toUpperCase()),i=s+e.length,l=t.name.substring(0,s)+`<strong>${t.name.substring(s,i)}</strong>`+t.name.substring(i,t.name.length);return t.name=l,t})):t}hasAutocomplete(){return!0===o(this.autocomplete)}handleInputChange(e){this.searchString=e.detail.value,this.isOpen||this.toggleSelectUl()}selectItem(e,t){e&&e.disabled||(this.itemsList=this.mapSelectedItemToItemsArray(),this.itemsList=this.itemsList.map((s=>(s.selected=!1,s.id===(null==e?void 0:e.id)&&(s.selected=t),s))),this.selectedItem=this.itemsList.find((e=>e.selected)),this.emitOptionSelect(),this.searchString&&(this.searchString=null))}arrowsSelectNav(e,t){const s=this.resetItem&&!!this.selectedItem;if(![r.ARROW_DOWN,r.ARROW_UP].includes(e.key))return;let i;e.preventDefault(),e.stopPropagation(),this.isOpen||this.toggleSelectUl(),this.resetItem&&(e.key===r.ARROW_DOWN?i=t+1===this.itemsList.length+1?+!s:t+1:e.key===r.ARROW_UP&&(i=t<=+!s?this.itemsList.length:t-1)),this.resetItem||(e.key===r.ARROW_DOWN?i=t+1===this.itemsList.length?0:t+1:e.key===r.ARROW_UP&&(i=t<=0?this.itemsList.length-1:t-1)),this.focusSelectItem(i)}focusSelectItem(e){const t=this.element.querySelector(`#${this.htmlid}_${e}`);t&&t.focus()}toggleSelectUl(e=!1){this.disabled||this.readonly||(this.isOpen?(document.removeEventListener("click",this.handleSelectFocus),document.removeEventListener("keyup",this.handleSelectFocus),e&&this.element.querySelector(`#${this.htmlid}_input`).focus()):(document.addEventListener("click",this.handleSelectFocus),document.addEventListener("keyup",this.handleSelectFocus)),this.isOpen=!this.isOpen)}handleInputClick(e){e.composedPath().find((e=>e.classList&&e.classList.contains("reset-icon")))?e.stopPropagation():this.toggleSelectUl()}handleSelectFocus(e){if(e instanceof KeyboardEvent&&e.key===r.ESC)return e.stopPropagation(),this.toggleSelectUl(!0);e instanceof KeyboardEvent&&e.key!==r.TAB&&e.key!==r.ENTER||h(d()).find((e=>"z-input"===e.nodeName.toLowerCase()&&e.id===`${this.htmlid}_input`))||this.toggleSelectUl(e instanceof MouseEvent)}scrollToLetter(e){const t=this.itemsList.find((t=>t.name.charAt(0)===e));t&&this.focusSelectItem(this.itemsList.indexOf(t))}renderInput(){return s("z-input",{class:{"active-select":this.isOpen,"cursor-select":!this.autocomplete},id:`${this.htmlid}_input`,htmlid:`${this.htmlid}_input`,placeholder:this.placeholder,value:!this.isOpen&&this.selectedItem?this.selectedItem.name.replace(/<[^>]+>/g,""):null,label:this.label,"aria-label":this.ariaLabel,icon:this.isOpen?"caret-up":"caret-down",hasclearicon:this.hasAutocomplete(),message:!1,disabled:this.disabled,readonly:this.readonly||!this.hasAutocomplete()&&this.isOpen,status:this.isOpen?void 0:this.status,autocomplete:"off",size:this.size,onClick:e=>{this.handleInputClick(e)},onKeyUp:e=>{13!==e.keyCode&&e.preventDefault(),p(e,this.toggleSelectUl)},onKeyDown:e=>this.arrowsSelectNav(e,this.selectedItem?this.itemsList.indexOf(this.selectedItem):this.resetItem?0:-1),onInputChange:e=>{this.handleInputChange(e)},onKeyPress:e=>{this.hasAutocomplete()||(e.preventDefault(),this.scrollToLetter(String.fromCharCode(e.keyCode)))}})}renderSelectUl(){var e;return s("div",{class:this.isOpen?"open":"closed",tabindex:"-1"},s("div",{class:{"ul-scroll-wrapper":!0,fixed:this.isfixed},tabindex:"-1"},s("z-list",{role:"listbox",tabindex:this.disabled||this.readonly||!this.isOpen?-1:0,id:this.htmlid,"aria-activedescendant":null===(e=this.selectedItem)||void 0===e?void 0:e.id,"aria-multiselectable":!1,size:this.listSizeType(),class:{disabled:this.disabled,readonly:this.readonly,filled:!!this.selectedItem,[`input-${this.status}`]:!this.isOpen&&!!this.status}},this.resetItem&&this.renderResetItem(),this.renderSelectUlItems())))}renderResetItem(){return s("z-list-element",{class:{hide:!this.selectedItem||!this.resetItem,"reset-item":!0,"reset-item-margin":!this.hasGroupItems},clickable:!0,disabled:!1,dividerType:c.ELEMENT,role:"option",tabindex:"0","aria-selected":"false",id:`${this.htmlid}_${this.resetItem?"0":"none"}`,size:this.listSizeType(),onClickItem:()=>{this.selectedItem=null,this.searchString=null,this.emitResetSelect()},onKeyDown:e=>this.arrowsSelectNav(e,0)},s("div",{class:"reset-item-content"},s("z-icon",{name:"multiply-circled"}),s("span",null,this.resetItem)))}renderItem(e,t,i){return s("z-list-element",{clickable:!e.disabled,disabled:e.disabled,dividerType:i?c.HEADER:c.ELEMENT,role:"option",tabindex:e.disabled||!this.isOpen?-1:0,"aria-selected":!!e.selected,id:`${this.htmlid}_${t}`,size:this.listSizeType(),onClickItem:()=>this.selectItem(e,!0),onKeyDown:e=>this.arrowsSelectNav(e,t)},s("span",{class:{selected:!!e.selected,"list-element-content":!0},innerHTML:e.name}))}listSizeType(){return this.size===l.SMALL||this.size===l.X_SMALL?a.SMALL:a.MEDIUM}renderSelectUlItems(){return this.itemsList.length?this.hasGroupItems?this.renderSelectGroupItems():this.itemsList.map(((e,t,s)=>this.renderItem(e,this.resetItem?t+1:t,s.length===t+1))):this.renderNoSearchResults()}renderSelectGroupItems(){const e=this.itemsList.reduce(((e,t,s,i)=>{var l;const{category:r}=t,c=this.renderItem(t,this.resetItem?s+1:s,i.length===s+1);return e[r]=null!==(l=e[r])&&void 0!==l?l:[],e[r].push(c),e}),{});return Object.entries(e).map((([e,t])=>s("z-list-group",{"divider-type":c.ELEMENT},s("span",{class:"body-3-sb z-list-group-title",slot:"header-title"},e),t.map((e=>e)))))}renderNoSearchResults(){return s("z-list-element",{color:"blue500",class:"no-results",size:this.listSizeType()},s("z-icon",{name:"multiply-circle",fill:"blue500"}),this.noresultslabel)}renderMessage(){if(!1!==o(this.message))return s("z-input-message",{message:!0===o(this.message)?void 0:this.message,status:this.status,class:this.size})}render(){return s("div",{class:"select-wrapper"},this.renderInput(),this.renderSelectUl(),this.renderMessage())}get element(){return i(this)}static get watchers(){return{items:["watchItems"]}}};u.style='.sc-z-select-h{display:inline-block;width:inherit;color:var(--color-text02);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg)}[size="small"].sc-z-select-h,[size="x-small"].sc-z-select-h{font-size:var(--font-size-2)}.select-wrapper.sc-z-select>z-input.sc-z-select{width:100%}.select-wrapper.sc-z-select>div.sc-z-select{position:relative}.select-wrapper.sc-z-select>div.closed.sc-z-select{overflow:hidden;height:0}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select{position:absolute;width:100%;box-sizing:border-box;padding:calc(var(--space-unit) * 0.5) var(--space-unit);border:var(--border-size-small) solid var(--gray200);border-top:none;background:var(--color-surface01);outline:none}.select-wrapper.sc-z-select .closed.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:10}.select-wrapper.sc-z-select .open.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:20}.select-wrapper.sc-z-select .ul-scroll-wrapper.fixed.sc-z-select{position:static}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select{position:relative;overflow:auto;max-height:240px;padding:calc(var(--space-unit) * 0.5);outline:none;scrollbar-color:var(--color-primary01) transparent}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-track{background-color:transparent}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-content.sc-z-select{display:block;padding:calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 1.5)}[size="x-small"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-content.sc-z-select{padding:0 calc(var(--space-unit) * 1.5)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-content.selected.sc-z-select{font-weight:bold}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select .no-results.sc-z-select z-icon.sc-z-select{margin-right:var(--space-unit)}.z-list-group-title.sc-z-select{color:var(--gray800)}.reset-item.sc-z-select{color:var(--color-primary01);fill:var(--color-primary01)}.reset-item-content.sc-z-select{display:flex;align-items:center}.reset-item.reset-item-margin.sc-z-select .reset-item-content.sc-z-select{margin-left:calc(var(--space-unit))}.reset-item.sc-z-select .reset-item-content.sc-z-select>z-icon.sc-z-select{margin-right:var(--space-unit)}.reset-item.hide.sc-z-select{display:none}';export{u as z_select}