npm - @usecapsule/core-components - Versions diffs - 3.6.0-dev.0 → 3.7.0 - Mend

@usecapsule/core-components 3.6.0-dev.0 → 3.7.0

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.

Files changed (15) hide show

package/dist/collection/components/cpsl-popover/cpsl-popover.css CHANGED Viewed

@@ -58,6 +58,7 @@
   display: block;
   z-index: -1;
   overflow: auto;
+  transform: var(--th, ) var(--tv, );
 }
 :host(.open) {
@@ -76,25 +77,25 @@
 }
 :host(.transform-h-left) {
-  transform: translateX(0);
+  --th: translateX(0);
 }
 :host(.transform-h-center) {
-  transform: translateX(-50%);
+  --th: translateX(-50%);
 }
 :host(.transform-h-right) {
-  transform: translateX(-100%);
+  --th: translateX(-100%);
 }
 :host(.transform-v-top) {
-  transform: translateY(0);
+  --tv: translateY(0);
 }
 :host(.transform-v-center) {
-  transform: translateY(-50%);
+  --tv: translateY(-50%);
 }
 :host(.transform-v-bottom) {
-  transform: translateY(-100%);
+  --tv: translateY(-100%);
 }

package/dist/collection/components/cpsl-popover/cpsl-popover.js CHANGED Viewed

@@ -20,7 +20,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { Host, h } from "@stencil/core";
 export class CpslPopover {
     constructor() {
-        this.triggerClicked = false;
+        this.startedInside = false;
+        this.startedWhenMounted = false;
         this.configureTriggerInteraction = () => {
             const { trigger, triggerAction, destroyTriggerInteraction } = this;
             if (destroyTriggerInteraction) {
@@ -80,6 +81,15 @@ export class CpslPopover {
                                 this.present();
                             },
                         },
+                        {
+                            eventName: 'touchstart',
+                            callback: e => {
+                                if (this.preventBlur) {
+                                    e.preventDefault();
+                                }
+                                this.present();
+                            },
+                        },
                     ];
                     break;
             }
@@ -139,12 +149,19 @@ export class CpslPopover {
                 }
             }
         };
+        this.validateEventStart = event => {
+            this.startedWhenMounted = !!this.triggerEl;
+            this.startedInside = this.triggerEl.contains(event.target);
+            this.present();
+        };
         this.handleClickOutside = (event) => {
-            if (!this.triggerClicked && this.triggerEl.contains(event.target)) {
-                this.triggerClicked = true;
+            // Do nothing if `mousedown` or `touchstart` started inside ref element
+            if (this.startedInside || !this.startedWhenMounted)
                 return;
-            }
-            if (this.open && !this.el.contains(event.target)) {
+            // Do nothing if clicking ref's element or descendent elements
+            if (!this.triggerEl || this.triggerEl.contains(event.target))
+                return;
+            if (this.open) {
                 event.preventDefault();
                 this.close();
             }
@@ -161,7 +178,7 @@ export class CpslPopover {
         };
         this.close = () => {
             this.open = false;
-            this.triggerClicked = false;
+            this.startedInside = false;
             this.cpslClose.emit();
         };
         this.open = false;
@@ -195,11 +212,15 @@ export class CpslPopover {
     }
     onOpenChange() {
         if (this.open) {
+            window.addEventListener('mousedown', this.validateEventStart);
+            window.addEventListener('touchstart', this.validateEventStart);
             window.addEventListener('click', this.handleClickOutside);
             window.addEventListener('scroll', () => this.setPosition(), true);
             window.addEventListener('resize', () => this.setPosition(), true);
         }
         else {
+            window.removeEventListener('mousedown', this.validateEventStart);
+            window.removeEventListener('touchstart', this.validateEventStart);
             window.removeEventListener('click', this.handleClickOutside);
             window.removeEventListener('scroll', () => this.setPosition(), true);
             window.removeEventListener('resize', () => this.setPosition(), true);
@@ -214,7 +235,7 @@ export class CpslPopover {
     }
     render() {
         var _a;
-        return (h(Host, { key: '6128da20f003b95925bf27a6d30dfd402bcc9e82', class: {
+        return (h(Host, { key: '18d133c7b3b9130f4119aa1502fc22a0edba0adf', class: {
                 'open': this.open,
                 'transform-h-left': this.transformOriginHorizontal === 'left',
                 'transform-h-center': this.transformOriginHorizontal === 'center',
@@ -222,7 +243,7 @@ export class CpslPopover {
                 'transform-v-top': this.transformOriginVertical === 'top',
                 'transform-v-center': this.transformOriginVertical === 'center',
                 'transform-v-bottom': this.transformOriginVertical === 'bottom',
-            }, style: { top: `${this.positionY}px`, left: `${this.positionX}px`, width: !this.open ? '0px' : this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px` } }, h("div", { key: '8245c2e3184150d41de74d203f548c71578e7c5e', id: "container", class: { container: true, open: this.open } }, h("slot", { key: 'b5900e3d8b1f80e604e7c7eb63ec9a345ffe2f31' }))));
+            }, style: { top: `${this.positionY}px`, left: `${this.positionX}px`, width: !this.open ? '0px' : this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px` } }, h("div", { key: '0c86d612a066ac39a37c0291ab96e518f6e2cd32', id: "container", class: { container: true, open: this.open } }, h("slot", { key: '616112bb261563452b94256d3f7a8ed563e1cf65' }))));
     }
     static get is() { return "cpsl-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-popover/cpsl-popover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-popover.js","sourceRoot":"","sources":["../../../../src/components/cpsl-popover/cpsl-popover.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQ7G,MAAM,OAAO,WAAW;;QAOd,mBAAc,GAAG,KAAK,CAAC;QAuHvB,gCAA2B,GAAG,GAAG,EAAE;YACzC,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,yBAAyB,EAAE,GAAG,IAAI,CAAC;YAEnE,IAAI,yBAAyB,EAAE,CAAC;gBAC9B,yBAAyB,EAAE,CAAC;YAC9B,CAAC;YAED,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;gBAC1B,OAAO;YACT,CAAC;YAED,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;YAClD,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;gBACpB,OAAO,CAAC,KAAK,CAAC,kCAAkC,OAAO,6BAA6B,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;gBAC/F,OAAO;YACT,CAAC;YAED,IAAI,gBAAgB,GAA0B,EAAE,CAAC;YACjD;;;;eAIG;YACH,QAAQ,aAAa,EAAE,CAAC;gBACtB,KAAK,OAAO;oBACV,gBAAgB,GAAG;wBACjB;4BACE,SAAS,EAAE,YAAY;4BACvB,QAAQ,EAAE,GAAS,EAAE;gCACnB,IAAI,CAAC,OAAO,EAAE,CAAC;4BACjB,CAAC,CAAA;yBACF;wBACD;4BACE,SAAS,EAAE,YAAY;4BACvB,QAAQ,EAAE,GAAG,EAAE;gCACb,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;oCACxC,IAAI,CAAC,KAAK,EAAE,CAAC;gCACf,CAAC;qCAAM,CAAC;oCACN,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE;wCACnD,IAAI,CAAC,KAAK,EAAE,CAAC;oCACf,CAAC,CAAC,CAAC;gCACL,CAAC;4BACH,CAAC;yBACF;wBACD;4BACE,SAAS,EAAE,OAAO;4BAClB,QAAQ,EAAE,CAAC,EAAS,EAAE,EAAE,CAAC,EAAE,CAAC,eAAe,EAAE;yBAC9C;qBACF,CAAC;oBAEF,MAAM;gBACR,KAAK,OAAO,CAAC;gBACb;oBACE,gBAAgB,GAAG;wBACjB;4BACE,SAAS,EAAE,WAAW;4BACtB,QAAQ,EAAE,CAAC,CAAC,EAAE;gCACZ,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;oCACrB,CAAC,CAAC,cAAc,EAAE,CAAC;gCACrB,CAAC;gCACD,IAAI,CAAC,OAAO,EAAE,CAAC;4BACjB,CAAC;yBACF;qBACF,CAAC;oBACF,MAAM;YACV,CAAC;YAED,gBAAgB,CAAC,OAAO,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;YAE5G,IAAI,CAAC,yBAAyB,GAAG,GAAG,EAAE;gBACpC,gBAAgB,CAAC,OAAO,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;YACjH,CAAC,CAAC;QACJ,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;;YACzB,MAAM,QAAQ,GAAG,MAAA,IAAI,CAAC,QAAQ,mCAAI,IAAI,CAAC,SAAS,CAAC;YACjD,IAAI,QAAQ,EAAE,CAAC;gBACb,MAAM,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;gBACtC,MAAM,YAAY,GAAG,MAAM,CAAC,WAAW,CAAC;gBACxC,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC;gBACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC;gBACtC,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,qBAAqB,EAAE,CAAC;gBAEtE,QAAQ,IAAI,CAAC,sBAAsB,EAAE,CAAC;oBACpC,KAAK,MAAM,CAAC,CAAC,CAAC;wBACZ,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;wBACtB,MAAM;oBACR,CAAC;oBACD,KAAK,QAAQ,CAAC,CAAC,CAAC;wBACd,IAAI,CAAC,SAAS,GAAG,IAAI,GAAG,KAAK,GAAG,CAAC,CAAC;wBAClC,MAAM;oBACR,CAAC;oBACD,KAAK,OAAO,CAAC,CAAC,CAAC;wBACb,IAAI,CAAC,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC;wBAC9B,MAAM;oBACR,CAAC;gBACH,CAAC;gBAED,QAAQ,IAAI,CAAC,oBAAoB,EAAE,CAAC;oBAClC,KAAK,KAAK,CAAC,CAAC,CAAC;wBACX,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;wBACrB,MAAM;oBACR,CAAC;oBACD,KAAK,QAAQ,CAAC,CAAC,CAAC;wBACd,IAAI,CAAC,SAAS,GAAG,GAAG,GAAG,MAAM,GAAG,CAAC,CAAC;wBAClC,MAAM;oBACR,CAAC;oBACD,KAAK,QAAQ,CAAC,CAAC,CAAC;wBACd,IAAI,CAAC,SAAS,GAAG,GAAG,GAAG,MAAM,CAAC;wBAC9B,MAAM;oBACR,CAAC;gBACH,CAAC;gBAED,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;oBACxC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC;gBACtC,CAAC;gBACD,IAAI,IAAI,CAAC,SAAS,GAAG,QAAQ,GAAG,YAAY,GAAG,EAAE,EAAE,CAAC;oBAClD,IAAI,CAAC,SAAS,GAAG,YAAY,GAAG,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;gBAChE,CAAC;gBAED,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;oBACxC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC;gBACtC,CAAC;gBACD,IAAI,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,WAAW,GAAG,EAAE,EAAE,CAAC;oBAChD,IAAI,CAAC,SAAS,GAAG,WAAW,GAAG,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;gBAC9D,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAEM,uBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YACjD,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE,CAAC;gBAC1E,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;gBAC3B,OAAO;YACT,CAAC;YACD,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE,CAAC;gBACzD,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,CAAC;QACH,CAAC,CAAC;QAEM,YAAO,GAAG,GAAG,EAAE;YACrB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACjC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;gBACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;gBAErB,yGAAyG;gBACzG,UAAU,CAAC,GAAG,EAAE;oBACd,IAAI,CAAC,WAAW,EAAE,CAAC;gBACrB,CAAC,EAAE,EAAE,CAAC,CAAC;YACT,CAAC;QACH,CAAC,CAAC;QAEM,UAAK,GAAG,GAAG,EAAE;YACnB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;YAC5B,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QACxB,CAAC,CAAC;oBApRc,KAAK;;;;sCAe0C,MAAM;oCAOR,QAAQ;yBAOvC,IAAI;;;yCAiBgC,MAAM;uCAOR,KAAK;6BAO1B,OAAO;;6BAUjB,EAAE;;IAYnC;;OAEG;IAEG,YAAY;;YAChB,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC;KAAA;IAKD,eAAe;QACb,IAAI,CAAC,2BAA2B,EAAE,CAAC;IACrC,CAAC;IAID,cAAc;QACZ,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAGD,YAAY;QACV,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;YAC1D,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,CAAC;YAClE,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,CAAC;QACpE,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;YAC7D,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,CAAC;YACrE,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,CAAC;QACvE,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,2BAA2B,EAAE,CAAC;IACrC,CAAC;IAgKD,IAAI,WAAW;;QACb,OAAO,MAAA,MAAA,IAAI,CAAC,EAAE,0CAAE,UAAU,0CAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IAC1D,CAAC;IAED,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI,CAAC,IAAI;gBACjB,kBAAkB,EAAE,IAAI,CAAC,yBAAyB,KAAK,MAAM;gBAC7D,oBAAoB,EAAE,IAAI,CAAC,yBAAyB,KAAK,QAAQ;gBACjE,mBAAmB,EAAE,IAAI,CAAC,yBAAyB,KAAK,OAAO;gBAC/D,iBAAiB,EAAE,IAAI,CAAC,uBAAuB,KAAK,KAAK;gBACzD,oBAAoB,EAAE,IAAI,CAAC,uBAAuB,KAAK,QAAQ;gBAC/D,oBAAoB,EAAE,IAAI,CAAC,uBAAuB,KAAK,QAAQ;aAChE,EACD,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,IAAI,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,SAAS,IAAI,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,MAAA,IAAI,CAAC,SAAS,0CAAE,WAAW,IAAI,EAAE;YAE5J,4DAAK,EAAE,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;gBAC7D,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, State, Watch, Element, h, Method, Event, EventEmitter } from '@stencil/core';\nimport { InteractionCallback } from '../../interface';\n\n@Component({\n tag: 'cpsl-popover',\n styleUrl: 'cpsl-popover.scss',\n shadow: true,\n})\nexport class CpslPopover {\n private triggerEl?: HTMLElement \| null;\n private destroyTriggerInteraction?: () => void;\n\n @Element() el!: HTMLCpslPopoverElement;\n\n @State() open = false;\n private triggerClicked = false;\n @State() positionX?: number;\n @State() positionY?: number;\n\n /*\n ID for the element that the popover anchors to.\n /\n @Prop() anchorEl?: HTMLElement;\n\n /\n Vertical anchor origin.\n * Options are: `\"left\"`, `\"center\"`, `\"right\"`.\n * Default is: `\"left\"`.\n /\n @Prop() anchorOriginHorizontal?: 'left' \| 'center' \| 'right' = 'left';\n\n /\n Vertical anchor origin.\n * Options are: `\"top\"`, `\"center\"`, `\"bottom\"`.\n * Default is: `\"bottom\"`.\n /\n @Prop() anchorOriginVertical?: 'top' \| 'center' \| 'bottom' = 'bottom';\n\n /\n If `true` the container will use the width of the content, else it will be set to the width of the trigger.\n * Default is `true`\n /\n // eslint-disable-next-line @stencil-community/ban-default-true\n @Prop() autoWidth?: boolean = true;\n\n /\n Whether or not to disable to popover.\n /\n @Prop() disabled: boolean;\n\n /\n Used internally to prevent select from blurring unintentionally.\n /\n @Prop() preventBlur: boolean;\n\n /\n Vertical transformation origin.\n * Options are: `\"left\"`, `\"center\"`, `\"right\"`.\n * Default is: `\"left\"`.\n /\n @Prop() transformOriginHorizontal?: 'left' \| 'center' \| 'right' = 'left';\n\n /\n Vertical transformation origin.\n * Options are: `\"top\"`, `\"center\"`, `\"bottom\"`.\n * Default is: `\"bottom\"`.\n /\n @Prop() transformOriginVertical?: 'top' \| 'center' \| 'bottom' = 'top';\n\n /\n Which trigger causes the popover to open.\n * Options are: `\"click\"`, `\"hover\"`.\n * Default is: `\"click\"`.\n /\n @Prop() triggerAction: 'click' \| 'hover' = 'click';\n\n /\n ID for the element that triggers the popover to open.\n /\n @Prop() trigger: string;\n\n /\n Padding from edge of window for the popover container.\n /\n @Prop() windowPadding?: number = 16;\n\n /\n Emitted when the popover opens.\n /\n @Event() cpslOpen!: EventEmitter<void>;\n\n /\n Emitted when the popover closes.\n /\n @Event() cpslClose!: EventEmitter<void>;\n\n /\n Call to close the popover manually.\n /\n @Method()\n async closePopover() {\n this.close();\n }\n\n @Watch('trigger')\n @Watch('triggerAction')\n @Watch('preventBlur')\n onTriggerChange() {\n this.configureTriggerInteraction();\n }\n\n @Watch('anchorOriginHorizontal')\n @Watch('anchorOriginVertical')\n onAnchorChange() {\n this.setPosition();\n }\n\n @Watch('open')\n onOpenChange() {\n if (this.open) {\n window.addEventListener('click', this.handleClickOutside);\n window.addEventListener('scroll', () => this.setPosition(), true);\n window.addEventListener('resize', () => this.setPosition(), true);\n } else {\n window.removeEventListener('click', this.handleClickOutside);\n window.removeEventListener('scroll', () => this.setPosition(), true);\n window.removeEventListener('resize', () => this.setPosition(), true);\n }\n }\n\n componentDidLoad() {\n this.configureTriggerInteraction();\n }\n\n private configureTriggerInteraction = () => {\n const { trigger, triggerAction, destroyTriggerInteraction } = this;\n\n if (destroyTriggerInteraction) {\n destroyTriggerInteraction();\n }\n\n if (trigger === undefined) {\n return;\n }\n\n this.triggerEl = document.getElementById(trigger);\n if (!this.triggerEl) {\n console.error(`A trigger element with the ID \"${trigger}\" was not found in the DOM.`, this.el);\n return;\n }\n\n let triggerCallbacks: InteractionCallback[] = [];\n /\n Based upon the kind of trigger interaction\n * the user wants, we setup the correct event\n * listeners.\n */\n switch (triggerAction) {\n case 'hover':\n triggerCallbacks = [\n {\n eventName: 'mouseenter',\n callback: async () => {\n this.present();\n },\n },\n {\n eventName: 'mouseleave',\n callback: () => {\n if (!this.containerEl.matches(':hover')) {\n this.close();\n } else {\n this.containerEl.addEventListener('mouseleave', () => {\n this.close();\n });\n }\n },\n },\n {\n eventName: 'click',\n callback: (ev: Event) => ev.stopPropagation(),\n },\n ];\n\n break;\n case 'click':\n default:\n triggerCallbacks = [\n {\n eventName: 'mousedown',\n callback: e => {\n if (this.preventBlur) {\n e.preventDefault();\n }\n this.present();\n },\n },\n ];\n break;\n }\n\n triggerCallbacks.forEach(({ eventName, callback }) => this.triggerEl.addEventListener(eventName, callback));\n\n this.destroyTriggerInteraction = () => {\n triggerCallbacks.forEach(({ eventName, callback }) => this.triggerEl.removeEventListener(eventName, callback));\n };\n };\n\n private setPosition = () => {\n const anchorEl = this.anchorEl ?? this.triggerEl;\n if (anchorEl) {\n const windowWidth = window.innerWidth;\n const windowHeight = window.innerHeight;\n const elWidth = this.el.clientWidth;\n const elHeight = this.el.clientHeight;\n const { top, left, height, width } = anchorEl.getBoundingClientRect();\n\n switch (this.anchorOriginHorizontal) {\n case 'left': {\n this.positionX = left;\n break;\n }\n case 'center': {\n this.positionX = left + width / 2;\n break;\n }\n case 'right': {\n this.positionX = left + width;\n break;\n }\n }\n\n switch (this.anchorOriginVertical) {\n case 'top': {\n this.positionY = top;\n break;\n }\n case 'center': {\n this.positionY = top + height / 2;\n break;\n }\n case 'bottom': {\n this.positionY = top + height;\n break;\n }\n }\n\n if (this.positionY < this.windowPadding) {\n this.positionY = this.windowPadding;\n }\n if (this.positionY + elHeight > windowHeight - 16) {\n this.positionY = windowHeight - this.windowPadding - elHeight;\n }\n\n if (this.positionX < this.windowPadding) {\n this.positionX = this.windowPadding;\n }\n if (this.positionX + elWidth > windowWidth - 16) {\n this.positionX = windowWidth - this.windowPadding - elWidth;\n }\n }\n };\n\n private handleClickOutside = (event: MouseEvent) => {\n if (!this.triggerClicked && this.triggerEl.contains(event.target as Node)) {\n this.triggerClicked = true;\n return;\n }\n if (this.open && !this.el.contains(event.target as Node)) {\n event.preventDefault();\n this.close();\n }\n };\n\n private present = () => {\n if (!this.open && !this.disabled) {\n this.open = true;\n this.cpslOpen.emit();\n\n // Using a small timeout here to ensure the popover is open before attempting to do position calculations\n setTimeout(() => {\n this.setPosition();\n }, 20);\n }\n };\n\n private close = () => {\n this.open = false;\n this.triggerClicked = false;\n this.cpslClose.emit();\n };\n\n get containerEl() {\n return this.el?.shadowRoot?.getElementById('container');\n }\n\n render() {\n return (\n <Host\n class={{\n 'open': this.open,\n 'transform-h-left': this.transformOriginHorizontal === 'left',\n 'transform-h-center': this.transformOriginHorizontal === 'center',\n 'transform-h-right': this.transformOriginHorizontal === 'right',\n 'transform-v-top': this.transformOriginVertical === 'top',\n 'transform-v-center': this.transformOriginVertical === 'center',\n 'transform-v-bottom': this.transformOriginVertical === 'bottom',\n }}\n style={{ top: `${this.positionY}px`, left: `${this.positionX}px`, width: !this.open ? '0px' : this.autoWidth ? 'auto' : `${this.triggerEl?.clientWidth}px` }}\n >\n <div id=\"container\" class={{ container: true, open: this.open }}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"cpsl-popover.js","sourceRoot":"","sources":["../../../../src/components/cpsl-popover/cpsl-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, State, Watch, Element, h, Method, Event, EventEmitter } from '@stencil/core';\nimport { InteractionCallback } from '../../interface';\n\n@Component({\n tag: 'cpsl-popover',\n styleUrl: 'cpsl-popover.scss',\n shadow: true,\n})\nexport class CpslPopover {\n private triggerEl?: HTMLElement \| null;\n private destroyTriggerInteraction?: () => void;\n\n @Element() el!: HTMLCpslPopoverElement;\n\n @State() open = false;\n @State() positionX?: number;\n @State() positionY?: number;\n\n private startedInside = false;\n private startedWhenMounted = false;\n\n /*\n ID for the element that the popover anchors to.\n /\n @Prop() anchorEl?: HTMLElement;\n\n /\n Vertical anchor origin.\n * Options are: `\"left\"`, `\"center\"`, `\"right\"`.\n * Default is: `\"left\"`.\n /\n @Prop() anchorOriginHorizontal?: 'left' \| 'center' \| 'right' = 'left';\n\n /\n Vertical anchor origin.\n * Options are: `\"top\"`, `\"center\"`, `\"bottom\"`.\n * Default is: `\"bottom\"`.\n /\n @Prop() anchorOriginVertical?: 'top' \| 'center' \| 'bottom' = 'bottom';\n\n /\n If `true` the container will use the width of the content, else it will be set to the width of the trigger.\n * Default is `true`\n /\n // eslint-disable-next-line @stencil-community/ban-default-true\n @Prop() autoWidth?: boolean = true;\n\n /\n Whether or not to disable to popover.\n /\n @Prop() disabled: boolean;\n\n /\n Used internally to prevent select from blurring unintentionally.\n /\n @Prop() preventBlur: boolean;\n\n /\n Vertical transformation origin.\n * Options are: `\"left\"`, `\"center\"`, `\"right\"`.\n * Default is: `\"left\"`.\n /\n @Prop() transformOriginHorizontal?: 'left' \| 'center' \| 'right' = 'left';\n\n /\n Vertical transformation origin.\n * Options are: `\"top\"`, `\"center\"`, `\"bottom\"`.\n * Default is: `\"bottom\"`.\n /\n @Prop() transformOriginVertical?: 'top' \| 'center' \| 'bottom' = 'top';\n\n /\n Which trigger causes the popover to open.\n * Options are: `\"click\"`, `\"hover\"`.\n * Default is: `\"click\"`.\n /\n @Prop() triggerAction: 'click' \| 'hover' = 'click';\n\n /\n ID for the element that triggers the popover to open.\n /\n @Prop() trigger: string;\n\n /\n Padding from edge of window for the popover container.\n /\n @Prop() windowPadding?: number = 16;\n\n /\n Emitted when the popover opens.\n /\n @Event() cpslOpen!: EventEmitter<void>;\n\n /\n Emitted when the popover closes.\n /\n @Event() cpslClose!: EventEmitter<void>;\n\n /\n Call to close the popover manually.\n /\n @Method()\n async closePopover() {\n this.close();\n }\n\n @Watch('trigger')\n @Watch('triggerAction')\n @Watch('preventBlur')\n onTriggerChange() {\n this.configureTriggerInteraction();\n }\n\n @Watch('anchorOriginHorizontal')\n @Watch('anchorOriginVertical')\n onAnchorChange() {\n this.setPosition();\n }\n\n @Watch('open')\n onOpenChange() {\n if (this.open) {\n window.addEventListener('mousedown', this.validateEventStart);\n window.addEventListener('touchstart', this.validateEventStart);\n window.addEventListener('click', this.handleClickOutside);\n window.addEventListener('scroll', () => this.setPosition(), true);\n window.addEventListener('resize', () => this.setPosition(), true);\n } else {\n window.removeEventListener('mousedown', this.validateEventStart);\n window.removeEventListener('touchstart', this.validateEventStart);\n window.removeEventListener('click', this.handleClickOutside);\n window.removeEventListener('scroll', () => this.setPosition(), true);\n window.removeEventListener('resize', () => this.setPosition(), true);\n }\n }\n\n componentDidLoad() {\n this.configureTriggerInteraction();\n }\n\n private configureTriggerInteraction = () => {\n const { trigger, triggerAction, destroyTriggerInteraction } = this;\n\n if (destroyTriggerInteraction) {\n destroyTriggerInteraction();\n }\n\n if (trigger === undefined) {\n return;\n }\n\n this.triggerEl = document.getElementById(trigger);\n if (!this.triggerEl) {\n console.error(`A trigger element with the ID \"${trigger}\" was not found in the DOM.`, this.el);\n return;\n }\n\n let triggerCallbacks: InteractionCallback[] = [];\n /\n Based upon the kind of trigger interaction\n * the user wants, we setup the correct event\n * listeners.\n */\n switch (triggerAction) {\n case 'hover':\n triggerCallbacks = [\n {\n eventName: 'mouseenter',\n callback: async () => {\n this.present();\n },\n },\n {\n eventName: 'mouseleave',\n callback: () => {\n if (!this.containerEl.matches(':hover')) {\n this.close();\n } else {\n this.containerEl.addEventListener('mouseleave', () => {\n this.close();\n });\n }\n },\n },\n {\n eventName: 'click',\n callback: (ev: Event) => ev.stopPropagation(),\n },\n ];\n\n break;\n case 'click':\n default:\n triggerCallbacks = [\n {\n eventName: 'mousedown',\n callback: e => {\n if (this.preventBlur) {\n e.preventDefault();\n }\n this.present();\n },\n },\n {\n eventName: 'touchstart',\n callback: e => {\n if (this.preventBlur) {\n e.preventDefault();\n }\n this.present();\n },\n },\n ];\n break;\n }\n\n triggerCallbacks.forEach(({ eventName, callback }) => this.triggerEl.addEventListener(eventName, callback));\n\n this.destroyTriggerInteraction = () => {\n triggerCallbacks.forEach(({ eventName, callback }) => this.triggerEl.removeEventListener(eventName, callback));\n };\n };\n\n private setPosition = () => {\n const anchorEl = this.anchorEl ?? this.triggerEl;\n if (anchorEl) {\n const windowWidth = window.innerWidth;\n const windowHeight = window.innerHeight;\n const elWidth = this.el.clientWidth;\n const elHeight = this.el.clientHeight;\n const { top, left, height, width } = anchorEl.getBoundingClientRect();\n\n switch (this.anchorOriginHorizontal) {\n case 'left': {\n this.positionX = left;\n break;\n }\n case 'center': {\n this.positionX = left + width / 2;\n break;\n }\n case 'right': {\n this.positionX = left + width;\n break;\n }\n }\n\n switch (this.anchorOriginVertical) {\n case 'top': {\n this.positionY = top;\n break;\n }\n case 'center': {\n this.positionY = top + height / 2;\n break;\n }\n case 'bottom': {\n this.positionY = top + height;\n break;\n }\n }\n\n if (this.positionY < this.windowPadding) {\n this.positionY = this.windowPadding;\n }\n if (this.positionY + elHeight > windowHeight - 16) {\n this.positionY = windowHeight - this.windowPadding - elHeight;\n }\n\n if (this.positionX < this.windowPadding) {\n this.positionX = this.windowPadding;\n }\n if (this.positionX + elWidth > windowWidth - 16) {\n this.positionX = windowWidth - this.windowPadding - elWidth;\n }\n }\n };\n\n private validateEventStart = event => {\n this.startedWhenMounted = !!this.triggerEl;\n this.startedInside = this.triggerEl.contains(event.target);\n this.present();\n };\n\n private handleClickOutside = (event: MouseEvent) => {\n // Do nothing if `mousedown` or `touchstart` started inside ref element\n if (this.startedInside \|\| !this.startedWhenMounted) return;\n\n // Do nothing if clicking ref's element or descendent elements\n if (!this.triggerEl \|\| this.triggerEl.contains(event.target as Node)) return;\n\n if (this.open) {\n event.preventDefault();\n this.close();\n }\n };\n\n private present = () => {\n if (!this.open && !this.disabled) {\n this.open = true;\n this.cpslOpen.emit();\n\n // Using a small timeout here to ensure the popover is open before attempting to do position calculations\n setTimeout(() => {\n this.setPosition();\n }, 20);\n }\n };\n\n private close = () => {\n this.open = false;\n this.startedInside = false;\n this.cpslClose.emit();\n };\n\n get containerEl() {\n return this.el?.shadowRoot?.getElementById('container');\n }\n\n render() {\n return (\n <Host\n class={{\n 'open': this.open,\n 'transform-h-left': this.transformOriginHorizontal === 'left',\n 'transform-h-center': this.transformOriginHorizontal === 'center',\n 'transform-h-right': this.transformOriginHorizontal === 'right',\n 'transform-v-top': this.transformOriginVertical === 'top',\n 'transform-v-center': this.transformOriginVertical === 'center',\n 'transform-v-bottom': this.transformOriginVertical === 'bottom',\n }}\n style={{ top: `${this.positionY}px`, left: `${this.positionX}px`, width: !this.open ? '0px' : this.autoWidth ? 'auto' : `${this.triggerEl?.clientWidth}px` }}\n >\n <div id=\"container\" class={{ container: true, open: this.open }}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/cpsl-select/cpsl-select.js CHANGED Viewed

@@ -86,10 +86,10 @@ export class CpslSelect {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (h(Host, { key: '07196d4cfb2df16bc25e70eca2e70c075ec192d9', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) } }, this.label && (h("label", { key: '0d5f157c22dcbe6cb804f95c86fccf09be5f2db1', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: 'f1717a5a7acf3834b1fabbe960c0951a8bef0156', part: "select-container", id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onMouseDown: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && h("slot", { key: 'c4031550e20504d14d091a36af499e09f948399c', name: "selected-item" }), h("div", { key: 'f46cdd6d89995c29730c5143b8b094a551db095e', class: { 'selected-container-content': true, 'hidden': this.hasSelectedItem && this.showFormattedSelectedItem }, id: "selected-container-content", style: {} }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (h("cpsl-text", { key: 'cfa104452575ee2075436fbd2d03e4ec8b7744ea', class: { 'selected-text': true, 'placeholder': !this.selectedValue } }, !this.selectedValue ? ((_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select') : ((_c = (_b = this.formatValue) === null || _b === void 0 ? void 0 : _b.call(this, this.selectedValue)) !== null && _c !== void 0 ? _c : this.selectedValue)))), h("cpsl-icon", { key: '3f573b3bd0d083e36a32661bfbefdeebf0c1c1e3', part: "icon", class: { 'chevron': true, 'open': !this.noIconAnimation && this.popoverOpen, 'has-value': Boolean(this.selectedValue) }, icon: this.icon }), h("input", { key: 'c8160d5dd425d1d34420699040226d7a5fa96788', id: this.inputId, disabled: this.disabled, class: { disabled: this.disabled }, value: this.selectedValue, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.handleEnterPress, inputmode: "none" })), (this.errorText || this.helperText) && (h("div", { key: '02089e440f2547e82ec5348480def12b92a24e04', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '7190858324cf9b375c909c7271e23578e0d5b939' }, (_d = this.errorText) !== null && _d !== void 0 ? _d : this.helperText))), h("cpsl-popover", { key: 'b82c8894e19f651952815626647808989ad5d18e', part: "popover", autoWidth: this.autoWidth, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, h("div", { key: '0db22395753a0b9fe95b56138ca2d56bcbfd0b66', part: "dropdown", class: "dropdown" }, this.showSearch && (h("div", { key: '18a6ea58a3043f3e836aa5a567148c5a3a62806d', class: "search-container" }, h("cpsl-input", { key: 'f6ad7bef0382ce98cd09deb6cbca183dba26490d', onClick: e => e.stopPropagation(), placeholder: (_e = this.searchPlaceholder) !== null && _e !== void 0 ? _e : 'Search', value: "", onCpslInput: e => {
+        return (h(Host, { key: '07196d4cfb2df16bc25e70eca2e70c075ec192d9', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) } }, this.label && (h("label", { key: '0d5f157c22dcbe6cb804f95c86fccf09be5f2db1', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: 'f1717a5a7acf3834b1fabbe960c0951a8bef0156', part: "select-container", id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onMouseDown: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && h("slot", { key: 'c4031550e20504d14d091a36af499e09f948399c', name: "selected-item" }), h("div", { key: 'f46cdd6d89995c29730c5143b8b094a551db095e', class: { 'selected-container-content': true, 'hidden': this.hasSelectedItem && this.showFormattedSelectedItem }, id: "selected-container-content", style: {} }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (h("cpsl-text", { key: 'cfa104452575ee2075436fbd2d03e4ec8b7744ea', class: { 'selected-text': true, 'placeholder': !this.selectedValue } }, !this.selectedValue ? ((_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select') : ((_c = (_b = this.formatValue) === null || _b === void 0 ? void 0 : _b.call(this, this.selectedValue)) !== null && _c !== void 0 ? _c : this.selectedValue)))), h("cpsl-icon", { key: '3f573b3bd0d083e36a32661bfbefdeebf0c1c1e3', part: "icon", class: { 'chevron': true, 'open': !this.noIconAnimation && this.popoverOpen, 'has-value': Boolean(this.selectedValue) }, icon: this.icon }), h("input", { key: 'c8160d5dd425d1d34420699040226d7a5fa96788', id: this.inputId, disabled: this.disabled, class: { disabled: this.disabled }, value: this.selectedValue, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.handleEnterPress, inputmode: "none" }), h("cpsl-popover", { key: '67c237d3559c8b1c87668017adb494394f8892f7', part: "popover", autoWidth: this.autoWidth, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, h("div", { key: 'e7d06e0286caba81b827880f93b9f3fd0562c920', part: "dropdown", class: "dropdown" }, this.showSearch && (h("div", { key: '6b90fb7f145061e255b7a5fefe9135939da451cd', class: "search-container" }, h("cpsl-input", { key: 'de22c0f8e4e54b53ba2d01735d9f3b5b701de49e', onClick: e => e.stopPropagation(), placeholder: (_d = this.searchPlaceholder) !== null && _d !== void 0 ? _d : 'Search', value: "", onCpslInput: e => {
                 e.stopPropagation();
                 this.cpslSearchChange.emit(e.detail.value);
-            } }))), h("div", { key: '124c5c09b116c513053dff8e6159272d7063fee5', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, h("slot", { key: '1944f3fd800325225bb7f48a609f8c85dba4db6a', name: "items" }))))));
+            } }))), h("div", { key: '53640295e97e86c68978cb5269c13a2f87a89bd0', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, h("slot", { key: 'e338a82fe28a6e9cfc035f238964252652aae6e0', name: "items" }))))), (this.errorText || this.helperText) && (h("div", { key: '9dc72e327dda99f54959ea6656c5eb23d3f38b51', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '19e164fa3fa038f6423d98b79d161c6161bc7160' }, (_e = this.errorText) !== null && _e !== void 0 ? _e : this.helperText)))));
     }
     static get is() { return "cpsl-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-select/cpsl-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-select.js","sourceRoot":"","sources":["../../../../src/components/cpsl-select/cpsl-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Element, h, Prop, State, EventEmitter, Event, Watch, Listen } from '@stencil/core';\nimport { IconType } from '../../interface';\n\n@Component({\n tag: 'cpsl-select',\n styleUrl: 'cpsl-select.scss',\n shadow: true,\n})\nexport class CpslSelect {\n @Element() el!: HTMLCpslSelectElement;\n private popoverEl!: HTMLCpslPopoverElement;\n private inputId = `cpsl-select-${inputIds++}`;\n\n @State() anchorEl!: HTMLElement;\n @State() hasFocus = false;\n @State() popoverOpen = false;\n @State() hasSelectedItem = false;\n\n /*\n ID of element to anchor popover to.\n /\n @Prop() anchorElId?: string;\n\n /\n If `true` the popover container will use the width of the content, else it will be set to the width of the trigger.\n * Default is `false`\n /\n @Prop() autoWidth?: boolean = false;\n\n /\n If `true`, the user cannot interact with the input.\n /\n @Prop() disabled = false;\n\n /\n Set the max height of the dropdown.\n /\n @Prop() dropdownMaxHeight?: number;\n\n /\n Error text to show below the input. If this is provided the input will enter an error state.\n /\n @Prop() errorText?: string;\n\n /\n Format value for display when selected.\n /\n @Prop() formatValue?: (value: string) => string;\n\n /\n Helper text to show below the input. If `\"errorText\"` is provided that will take precedence.\n /\n @Prop() helperText?: string;\n\n /\n ID of the element, must be unique for the popover trigger.\n /\n\n @Prop() id: string = `${this.inputId}-trigger`;\n\n /\n The name of the icon to use for the end icon.\n * Default: `chevronUp`\n /\n @Prop() icon?: IconType = 'chevronUp';\n\n /\n The label for the input.\n /\n @Prop() label?: string;\n\n /\n Whether or not to show the rotation animation for the end icon.\n /\n @Prop() noIconAnimation?: boolean;\n\n /\n Placeholder to display if `selectedValue` is empty.\n /\n @Prop() placeholder?: string;\n\n /\n If `true`, the user must fill in a value before submitting a form.\n /\n @Prop() required = false;\n\n /\n Value of the selected item.\n /\n @Prop() selectedValue?: string;\n\n /\n Will show the formatted selected item (passed in the `selected-item` slot) in the select rather than the item value.\n /\n @Prop() showFormattedSelectedItem?: boolean;\n\n /\n If `true`, the label will display an \"optional\" tag.\n /\n @Prop() showOptionalLabel = false;\n\n /\n If `true`, the dropdown will contain a search field.\n /\n @Prop() showSearch = false;\n\n /\n Placeholder for the search field.\n /\n @Prop() searchPlaceholder?: string;\n\n /\n Emitted when the input loses focus.\n /\n @Event() cpslBlur!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the input has focus.\n /\n @Event() cpslFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the value changes.\n /\n @Event() cpslSelectValueChange!: EventEmitter<string>;\n\n /\n Emitted when the search value changes.\n /\n @Event() cpslSearchChange!: EventEmitter<string>;\n\n @Watch('selectedValue')\n onValueChange() {\n this.popoverEl.closePopover();\n }\n\n @Watch('selectedValue')\n handleValueChange() {\n this.selectItem();\n }\n\n @Listen('cpslSelectItemClick')\n selectItemClickHandler(event: CustomEvent<string>) {\n this.cpslSelectValueChange.emit(event.detail);\n }\n\n @Listen('cpslOpen')\n onPopoverOpen() {\n this.popoverOpen = true;\n }\n\n @Listen('cpslClose')\n onPopoverClose() {\n this.popoverOpen = false;\n }\n\n componentDidLoad() {\n this.popoverEl = this.el.shadowRoot.querySelector(`cpsl-popover`) as HTMLCpslPopoverElement;\n this.anchorEl = this.anchorElId ? document.getElementById(this.anchorElId) : this.el.shadowRoot.getElementById('select-container');\n\n this.selectItem();\n }\n\n private onBlur = (ev: FocusEvent) => {\n this.hasFocus = false;\n\n this.popoverEl.closePopover();\n\n this.cpslBlur.emit(ev);\n };\n\n private onFocus = (ev: FocusEvent) => {\n this.hasFocus = true;\n\n this.cpslFocus.emit(ev);\n };\n\n private handleEnterPress = (ev: KeyboardEvent) => {\n if (ev.key === 'Enter') {\n ev.preventDefault();\n this.el.dispatchEvent(new MouseEvent('mousedown'));\n }\n };\n\n private selectItem = () => {\n const items = Array.from(this.el.querySelectorAll('cpsl-select-item')) as HTMLCpslSelectItemElement[];\n\n items.forEach(item => {\n if (item.value === this.selectedValue) {\n item.setAttribute('selected', 'true');\n } else {\n item.setAttribute('selected', 'false');\n }\n });\n\n this.hasSelectedItem = !!this.selectedValue;\n };\n\n private handleClickOutside = (event: MouseEvent) => {\n if (this.hasFocus && !this.el.contains(event.target as Node)) {\n this.hasFocus = false;\n window.removeEventListener('click', this.handleClickOutside);\n }\n };\n\n private handleClick = () => {\n if (!this.disabled) {\n this.hasFocus = true;\n window.addEventListener('click', this.handleClickOutside);\n }\n };\n\n render() {\n return (\n <Host id={this.id} class={{ 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) }}>\n {this.label && (\n <label class=\"label\" htmlFor={this.inputId}>\n {this.label}\n {this.required ? '' : ' '}\n {!this.required && this.showOptionalLabel ? <span class=\"optional-label\">(optional)</span> : ''}\n </label>\n )}\n <div part=\"select-container\" id=\"select-container\" class={{ 'select-container': true, 'error-container': Boolean(this.errorText) }} onMouseDown={this.handleClick}>\n {this.hasSelectedItem && this.showFormattedSelectedItem && <slot name=\"selected-item\"></slot>}\n <div class={{ 'selected-container-content': true, 'hidden': this.hasSelectedItem && this.showFormattedSelectedItem }} id=\"selected-container-content\" style={{}}>\n {(!this.hasSelectedItem \|\| !this.showFormattedSelectedItem) && (\n <cpsl-text class={{ 'selected-text': true, 'placeholder': !this.selectedValue }}>\n {!this.selectedValue ? (this.placeholder ?? 'Select') : (this.formatValue?.(this.selectedValue) ?? this.selectedValue)}\n </cpsl-text>\n )}\n </div>\n <cpsl-icon part=\"icon\" class={{ 'chevron': true, 'open': !this.noIconAnimation && this.popoverOpen, 'has-value': Boolean(this.selectedValue) }} icon={this.icon} />\n <input\n id={this.inputId}\n disabled={this.disabled}\n class={{ disabled: this.disabled }}\n value={this.selectedValue}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onKeyPress={this.handleEnterPress}\n inputmode=\"none\"\n />\n </div>\n {(this.errorText \|\| this.helperText) && (\n <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n <span>{this.errorText ?? this.helperText}</span>\n </div>\n )}\n <cpsl-popover part=\"popover\" autoWidth={this.autoWidth} trigger={this.id} preventBlur={this.hasFocus} disabled={this.disabled} anchorEl={this.anchorEl}>\n <div part=\"dropdown\" class=\"dropdown\">\n {this.showSearch && (\n <div class=\"search-container\">\n <cpsl-input\n onClick={e => e.stopPropagation()}\n placeholder={this.searchPlaceholder ?? 'Search'}\n value=\"\"\n onCpslInput={e => {\n e.stopPropagation();\n this.cpslSearchChange.emit(e.detail.value);\n }}\n />\n </div>\n )}\n <div class=\"dropdown-inner\" style={{ maxHeight: `${this.dropdownMaxHeight}px` }}>\n <slot name=\"items\"></slot>\n </div>\n </div>\n </cpsl-popover>\n </Host>\n );\n }\n}\n\nlet inputIds = 0;\n"]}
1	+ {"version":3,"file":"cpsl-select.js","sourceRoot":"","sources":["../../../../src/components/cpsl-select/cpsl-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Element, h, Prop, State, EventEmitter, Event, Watch, Listen } from '@stencil/core';\nimport { IconType } from '../../interface';\n\n@Component({\n tag: 'cpsl-select',\n styleUrl: 'cpsl-select.scss',\n shadow: true,\n})\nexport class CpslSelect {\n @Element() el!: HTMLCpslSelectElement;\n private popoverEl!: HTMLCpslPopoverElement;\n private inputId = `cpsl-select-${inputIds++}`;\n\n @State() anchorEl!: HTMLElement;\n @State() hasFocus = false;\n @State() popoverOpen = false;\n @State() hasSelectedItem = false;\n\n /*\n ID of element to anchor popover to.\n /\n @Prop() anchorElId?: string;\n\n /\n If `true` the popover container will use the width of the content, else it will be set to the width of the trigger.\n * Default is `false`\n /\n @Prop() autoWidth?: boolean = false;\n\n /\n If `true`, the user cannot interact with the input.\n /\n @Prop() disabled = false;\n\n /\n Set the max height of the dropdown.\n /\n @Prop() dropdownMaxHeight?: number;\n\n /\n Error text to show below the input. If this is provided the input will enter an error state.\n /\n @Prop() errorText?: string;\n\n /\n Format value for display when selected.\n /\n @Prop() formatValue?: (value: string) => string;\n\n /\n Helper text to show below the input. If `\"errorText\"` is provided that will take precedence.\n /\n @Prop() helperText?: string;\n\n /\n ID of the element, must be unique for the popover trigger.\n /\n\n @Prop() id: string = `${this.inputId}-trigger`;\n\n /\n The name of the icon to use for the end icon.\n * Default: `chevronUp`\n /\n @Prop() icon?: IconType = 'chevronUp';\n\n /\n The label for the input.\n /\n @Prop() label?: string;\n\n /\n Whether or not to show the rotation animation for the end icon.\n /\n @Prop() noIconAnimation?: boolean;\n\n /\n Placeholder to display if `selectedValue` is empty.\n /\n @Prop() placeholder?: string;\n\n /\n If `true`, the user must fill in a value before submitting a form.\n /\n @Prop() required = false;\n\n /\n Value of the selected item.\n /\n @Prop() selectedValue?: string;\n\n /\n Will show the formatted selected item (passed in the `selected-item` slot) in the select rather than the item value.\n /\n @Prop() showFormattedSelectedItem?: boolean;\n\n /\n If `true`, the label will display an \"optional\" tag.\n /\n @Prop() showOptionalLabel = false;\n\n /\n If `true`, the dropdown will contain a search field.\n /\n @Prop() showSearch = false;\n\n /\n Placeholder for the search field.\n /\n @Prop() searchPlaceholder?: string;\n\n /\n Emitted when the input loses focus.\n /\n @Event() cpslBlur!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the input has focus.\n /\n @Event() cpslFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the value changes.\n /\n @Event() cpslSelectValueChange!: EventEmitter<string>;\n\n /\n Emitted when the search value changes.\n /\n @Event() cpslSearchChange!: EventEmitter<string>;\n\n @Watch('selectedValue')\n onValueChange() {\n this.popoverEl.closePopover();\n }\n\n @Watch('selectedValue')\n handleValueChange() {\n this.selectItem();\n }\n\n @Listen('cpslSelectItemClick')\n selectItemClickHandler(event: CustomEvent<string>) {\n this.cpslSelectValueChange.emit(event.detail);\n }\n\n @Listen('cpslOpen')\n onPopoverOpen() {\n this.popoverOpen = true;\n }\n\n @Listen('cpslClose')\n onPopoverClose() {\n this.popoverOpen = false;\n }\n\n componentDidLoad() {\n this.popoverEl = this.el.shadowRoot.querySelector(`cpsl-popover`) as HTMLCpslPopoverElement;\n this.anchorEl = this.anchorElId ? document.getElementById(this.anchorElId) : this.el.shadowRoot.getElementById('select-container');\n\n this.selectItem();\n }\n\n private onBlur = (ev: FocusEvent) => {\n this.hasFocus = false;\n\n this.popoverEl.closePopover();\n\n this.cpslBlur.emit(ev);\n };\n\n private onFocus = (ev: FocusEvent) => {\n this.hasFocus = true;\n\n this.cpslFocus.emit(ev);\n };\n\n private handleEnterPress = (ev: KeyboardEvent) => {\n if (ev.key === 'Enter') {\n ev.preventDefault();\n this.el.dispatchEvent(new MouseEvent('mousedown'));\n }\n };\n\n private selectItem = () => {\n const items = Array.from(this.el.querySelectorAll('cpsl-select-item')) as HTMLCpslSelectItemElement[];\n\n items.forEach(item => {\n if (item.value === this.selectedValue) {\n item.setAttribute('selected', 'true');\n } else {\n item.setAttribute('selected', 'false');\n }\n });\n\n this.hasSelectedItem = !!this.selectedValue;\n };\n\n private handleClickOutside = (event: MouseEvent) => {\n if (this.hasFocus && !this.el.contains(event.target as Node)) {\n this.hasFocus = false;\n window.removeEventListener('click', this.handleClickOutside);\n }\n };\n\n private handleClick = () => {\n if (!this.disabled) {\n this.hasFocus = true;\n window.addEventListener('click', this.handleClickOutside);\n }\n };\n\n render() {\n return (\n <Host id={this.id} class={{ 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) }}>\n {this.label && (\n <label class=\"label\" htmlFor={this.inputId}>\n {this.label}\n {this.required ? '' : ' '}\n {!this.required && this.showOptionalLabel ? <span class=\"optional-label\">(optional)</span> : ''}\n </label>\n )}\n <div part=\"select-container\" id=\"select-container\" class={{ 'select-container': true, 'error-container': Boolean(this.errorText) }} onMouseDown={this.handleClick}>\n {this.hasSelectedItem && this.showFormattedSelectedItem && <slot name=\"selected-item\"></slot>}\n <div class={{ 'selected-container-content': true, 'hidden': this.hasSelectedItem && this.showFormattedSelectedItem }} id=\"selected-container-content\" style={{}}>\n {(!this.hasSelectedItem \|\| !this.showFormattedSelectedItem) && (\n <cpsl-text class={{ 'selected-text': true, 'placeholder': !this.selectedValue }}>\n {!this.selectedValue ? (this.placeholder ?? 'Select') : (this.formatValue?.(this.selectedValue) ?? this.selectedValue)}\n </cpsl-text>\n )}\n </div>\n <cpsl-icon part=\"icon\" class={{ 'chevron': true, 'open': !this.noIconAnimation && this.popoverOpen, 'has-value': Boolean(this.selectedValue) }} icon={this.icon} />\n <input\n id={this.inputId}\n disabled={this.disabled}\n class={{ disabled: this.disabled }}\n value={this.selectedValue}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onKeyPress={this.handleEnterPress}\n inputmode=\"none\"\n />\n <cpsl-popover part=\"popover\" autoWidth={this.autoWidth} trigger={this.id} preventBlur={this.hasFocus} disabled={this.disabled} anchorEl={this.anchorEl}>\n <div part=\"dropdown\" class=\"dropdown\">\n {this.showSearch && (\n <div class=\"search-container\">\n <cpsl-input\n onClick={e => e.stopPropagation()}\n placeholder={this.searchPlaceholder ?? 'Search'}\n value=\"\"\n onCpslInput={e => {\n e.stopPropagation();\n this.cpslSearchChange.emit(e.detail.value);\n }}\n />\n </div>\n )}\n <div class=\"dropdown-inner\" style={{ maxHeight: `${this.dropdownMaxHeight}px` }}>\n <slot name=\"items\"></slot>\n </div>\n </div>\n </cpsl-popover>\n </div>\n {(this.errorText \|\| this.helperText) && (\n <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n <span>{this.errorText ?? this.helperText}</span>\n </div>\n )}\n </Host>\n );\n }\n}\n\nlet inputIds = 0;\n"]}

package/dist/esm/cpsl-alert_34.entry.js CHANGED Viewed

@@ -16577,7 +16577,7 @@ const CpslPill = class {
 };
 CpslPill.style = CpslPillStyle0;
-const cpslPopoverCss = ":host{position:fixed;display:block;z-index:-1;overflow:auto}:host(.open){z-index:10006}.container{visibility:hidden;height:0px}.open{visibility:visible;height:auto;z-index:10006}:host(.transform-h-left){transform:translateX(0)}:host(.transform-h-center){transform:translateX(-50%)}:host(.transform-h-right){transform:translateX(-100%)}:host(.transform-v-top){transform:translateY(0)}:host(.transform-v-center){transform:translateY(-50%)}:host(.transform-v-bottom){transform:translateY(-100%)}";
+const cpslPopoverCss = ":host{position:fixed;display:block;z-index:-1;overflow:auto;transform:var(--th, ) var(--tv, )}:host(.open){z-index:10006}.container{visibility:hidden;height:0px}.open{visibility:visible;height:auto;z-index:10006}:host(.transform-h-left){--th:translateX(0)}:host(.transform-h-center){--th:translateX(-50%)}:host(.transform-h-right){--th:translateX(-100%)}:host(.transform-v-top){--tv:translateY(0)}:host(.transform-v-center){--tv:translateY(-50%)}:host(.transform-v-bottom){--tv:translateY(-100%)}";
 const CpslPopoverStyle0 = cpslPopoverCss;
 var __awaiter$1 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -16604,7 +16604,8 @@ const CpslPopover = class {
         registerInstance(this, hostRef);
         this.cpslOpen = createEvent(this, "cpslOpen", 7);
         this.cpslClose = createEvent(this, "cpslClose", 7);
-        this.triggerClicked = false;
+        this.startedInside = false;
+        this.startedWhenMounted = false;
         this.configureTriggerInteraction = () => {
             const { trigger, triggerAction, destroyTriggerInteraction } = this;
             if (destroyTriggerInteraction) {
@@ -16664,6 +16665,15 @@ const CpslPopover = class {
                                 this.present();
                             },
                         },
+                        {
+                            eventName: 'touchstart',
+                            callback: e => {
+                                if (this.preventBlur) {
+                                    e.preventDefault();
+                                }
+                                this.present();
+                            },
+                        },
                     ];
                     break;
             }
@@ -16723,12 +16733,19 @@ const CpslPopover = class {
                 }
             }
         };
+        this.validateEventStart = event => {
+            this.startedWhenMounted = !!this.triggerEl;
+            this.startedInside = this.triggerEl.contains(event.target);
+            this.present();
+        };
         this.handleClickOutside = (event) => {
-            if (!this.triggerClicked && this.triggerEl.contains(event.target)) {
-                this.triggerClicked = true;
+            // Do nothing if `mousedown` or `touchstart` started inside ref element
+            if (this.startedInside || !this.startedWhenMounted)
                 return;
-            }
-            if (this.open && !this.el.contains(event.target)) {
+            // Do nothing if clicking ref's element or descendent elements
+            if (!this.triggerEl || this.triggerEl.contains(event.target))
+                return;
+            if (this.open) {
                 event.preventDefault();
                 this.close();
             }
@@ -16745,7 +16762,7 @@ const CpslPopover = class {
         };
         this.close = () => {
             this.open = false;
-            this.triggerClicked = false;
+            this.startedInside = false;
             this.cpslClose.emit();
         };
         this.open = false;
@@ -16779,11 +16796,15 @@ const CpslPopover = class {
     }
     onOpenChange() {
         if (this.open) {
+            window.addEventListener('mousedown', this.validateEventStart);
+            window.addEventListener('touchstart', this.validateEventStart);
             window.addEventListener('click', this.handleClickOutside);
             window.addEventListener('scroll', () => this.setPosition(), true);
             window.addEventListener('resize', () => this.setPosition(), true);
         }
         else {
+            window.removeEventListener('mousedown', this.validateEventStart);
+            window.removeEventListener('touchstart', this.validateEventStart);
             window.removeEventListener('click', this.handleClickOutside);
             window.removeEventListener('scroll', () => this.setPosition(), true);
             window.removeEventListener('resize', () => this.setPosition(), true);
@@ -16798,7 +16819,7 @@ const CpslPopover = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '6128da20f003b95925bf27a6d30dfd402bcc9e82', class: {
+        return (h(Host, { key: '18d133c7b3b9130f4119aa1502fc22a0edba0adf', class: {
                 'open': this.open,
                 'transform-h-left': this.transformOriginHorizontal === 'left',
                 'transform-h-center': this.transformOriginHorizontal === 'center',
@@ -16806,7 +16827,7 @@ const CpslPopover = class {
                 'transform-v-top': this.transformOriginVertical === 'top',
                 'transform-v-center': this.transformOriginVertical === 'center',
                 'transform-v-bottom': this.transformOriginVertical === 'bottom',
-            }, style: { top: `${this.positionY}px`, left: `${this.positionX}px`, width: !this.open ? '0px' : this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px` } }, h("div", { key: '8245c2e3184150d41de74d203f548c71578e7c5e', id: "container", class: { container: true, open: this.open } }, h("slot", { key: 'b5900e3d8b1f80e604e7c7eb63ec9a345ffe2f31' }))));
+            }, style: { top: `${this.positionY}px`, left: `${this.positionX}px`, width: !this.open ? '0px' : this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px` } }, h("div", { key: '0c86d612a066ac39a37c0291ab96e518f6e2cd32', id: "container", class: { container: true, open: this.open } }, h("slot", { key: '616112bb261563452b94256d3f7a8ed563e1cf65' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -21073,10 +21094,10 @@ const CpslSelect = class {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (h(Host, { key: '07196d4cfb2df16bc25e70eca2e70c075ec192d9', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) } }, this.label && (h("label", { key: '0d5f157c22dcbe6cb804f95c86fccf09be5f2db1', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: 'f1717a5a7acf3834b1fabbe960c0951a8bef0156', part: "select-container", id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onMouseDown: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && h("slot", { key: 'c4031550e20504d14d091a36af499e09f948399c', name: "selected-item" }), h("div", { key: 'f46cdd6d89995c29730c5143b8b094a551db095e', class: { 'selected-container-content': true, 'hidden': this.hasSelectedItem && this.showFormattedSelectedItem }, id: "selected-container-content", style: {} }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (h("cpsl-text", { key: 'cfa104452575ee2075436fbd2d03e4ec8b7744ea', class: { 'selected-text': true, 'placeholder': !this.selectedValue } }, !this.selectedValue ? ((_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select') : ((_c = (_b = this.formatValue) === null || _b === void 0 ? void 0 : _b.call(this, this.selectedValue)) !== null && _c !== void 0 ? _c : this.selectedValue)))), h("cpsl-icon", { key: '3f573b3bd0d083e36a32661bfbefdeebf0c1c1e3', part: "icon", class: { 'chevron': true, 'open': !this.noIconAnimation && this.popoverOpen, 'has-value': Boolean(this.selectedValue) }, icon: this.icon }), h("input", { key: 'c8160d5dd425d1d34420699040226d7a5fa96788', id: this.inputId, disabled: this.disabled, class: { disabled: this.disabled }, value: this.selectedValue, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.handleEnterPress, inputmode: "none" })), (this.errorText || this.helperText) && (h("div", { key: '02089e440f2547e82ec5348480def12b92a24e04', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '7190858324cf9b375c909c7271e23578e0d5b939' }, (_d = this.errorText) !== null && _d !== void 0 ? _d : this.helperText))), h("cpsl-popover", { key: 'b82c8894e19f651952815626647808989ad5d18e', part: "popover", autoWidth: this.autoWidth, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, h("div", { key: '0db22395753a0b9fe95b56138ca2d56bcbfd0b66', part: "dropdown", class: "dropdown" }, this.showSearch && (h("div", { key: '18a6ea58a3043f3e836aa5a567148c5a3a62806d', class: "search-container" }, h("cpsl-input", { key: 'f6ad7bef0382ce98cd09deb6cbca183dba26490d', onClick: e => e.stopPropagation(), placeholder: (_e = this.searchPlaceholder) !== null && _e !== void 0 ? _e : 'Search', value: "", onCpslInput: e => {
+        return (h(Host, { key: '07196d4cfb2df16bc25e70eca2e70c075ec192d9', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) } }, this.label && (h("label", { key: '0d5f157c22dcbe6cb804f95c86fccf09be5f2db1', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: 'f1717a5a7acf3834b1fabbe960c0951a8bef0156', part: "select-container", id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onMouseDown: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && h("slot", { key: 'c4031550e20504d14d091a36af499e09f948399c', name: "selected-item" }), h("div", { key: 'f46cdd6d89995c29730c5143b8b094a551db095e', class: { 'selected-container-content': true, 'hidden': this.hasSelectedItem && this.showFormattedSelectedItem }, id: "selected-container-content", style: {} }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (h("cpsl-text", { key: 'cfa104452575ee2075436fbd2d03e4ec8b7744ea', class: { 'selected-text': true, 'placeholder': !this.selectedValue } }, !this.selectedValue ? ((_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select') : ((_c = (_b = this.formatValue) === null || _b === void 0 ? void 0 : _b.call(this, this.selectedValue)) !== null && _c !== void 0 ? _c : this.selectedValue)))), h("cpsl-icon", { key: '3f573b3bd0d083e36a32661bfbefdeebf0c1c1e3', part: "icon", class: { 'chevron': true, 'open': !this.noIconAnimation && this.popoverOpen, 'has-value': Boolean(this.selectedValue) }, icon: this.icon }), h("input", { key: 'c8160d5dd425d1d34420699040226d7a5fa96788', id: this.inputId, disabled: this.disabled, class: { disabled: this.disabled }, value: this.selectedValue, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.handleEnterPress, inputmode: "none" }), h("cpsl-popover", { key: '67c237d3559c8b1c87668017adb494394f8892f7', part: "popover", autoWidth: this.autoWidth, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, h("div", { key: 'e7d06e0286caba81b827880f93b9f3fd0562c920', part: "dropdown", class: "dropdown" }, this.showSearch && (h("div", { key: '6b90fb7f145061e255b7a5fefe9135939da451cd', class: "search-container" }, h("cpsl-input", { key: 'de22c0f8e4e54b53ba2d01735d9f3b5b701de49e', onClick: e => e.stopPropagation(), placeholder: (_d = this.searchPlaceholder) !== null && _d !== void 0 ? _d : 'Search', value: "", onCpslInput: e => {
                 e.stopPropagation();
                 this.cpslSearchChange.emit(e.detail.value);
-            } }))), h("div", { key: '124c5c09b116c513053dff8e6159272d7063fee5', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, h("slot", { key: '1944f3fd800325225bb7f48a609f8c85dba4db6a', name: "items" }))))));
+            } }))), h("div", { key: '53640295e97e86c68978cb5269c13a2f87a89bd0', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, h("slot", { key: 'e338a82fe28a6e9cfc035f238964252652aae6e0', name: "items" }))))), (this.errorText || this.helperText) && (h("div", { key: '9dc72e327dda99f54959ea6656c5eb23d3f38b51', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '19e164fa3fa038f6423d98b79d161c6161bc7160' }, (_e = this.errorText) !== null && _e !== void 0 ? _e : this.helperText)))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {