@usecapsule/core-components 3.0.1 → 3.1.0

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

@@ -0,0 +1,511 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try {
+            step(generator.next(value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function rejected(value) { try {
+            step(generator["throw"](value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Host, h } from "@stencil/core";
+export class CpslPopover {
+    constructor() {
+        this.triggerClicked = false;
+        this.configureTriggerInteraction = () => {
+            const { trigger, triggerAction, destroyTriggerInteraction } = this;
+            if (Boolean(destroyTriggerInteraction)) {
+                destroyTriggerInteraction();
+            }
+            if (trigger === undefined) {
+                return;
+            }
+            this.triggerEl = document.getElementById(trigger);
+            if (!Boolean(this.triggerEl)) {
+                console.error(`A trigger element with the ID "${trigger}" was not found in the DOM.`, this.el);
+                return;
+            }
+            let triggerCallbacks = [];
+            switch (triggerAction) {
+                case 'hover':
+                    triggerCallbacks = [
+                        {
+                            eventName: 'mouseenter',
+                            callback: () => __awaiter(this, void 0, void 0, function* () {
+                                this.present();
+                            }),
+                        },
+                        {
+                            eventName: 'mouseleave',
+                            callback: () => {
+                                if (!this.containerEl.matches(':hover')) {
+                                    this.close();
+                                }
+                                else {
+                                    this.containerEl.addEventListener('mouseleave', () => {
+                                        this.close();
+                                    });
+                                }
+                            },
+                        },
+                        {
+                            eventName: 'click',
+                            callback: (ev) => ev.stopPropagation(),
+                        },
+                    ];
+                    break;
+                case 'click':
+                default:
+                    triggerCallbacks = [
+                        {
+                            eventName: 'mousedown',
+                            callback: e => {
+                                if (this.preventBlur) {
+                                    e.preventDefault();
+                                }
+                                this.present();
+                            },
+                        },
+                    ];
+                    break;
+            }
+            triggerCallbacks.forEach(({ eventName, callback }) => this.triggerEl.addEventListener(eventName, callback));
+            this.destroyTriggerInteraction = () => {
+                triggerCallbacks.forEach(({ eventName, callback }) => this.triggerEl.removeEventListener(eventName, callback));
+            };
+        };
+        this.setPosition = () => {
+            var _a;
+            const anchorEl = (_a = this.anchorEl) !== null && _a !== void 0 ? _a : this.triggerEl;
+            if (Boolean(anchorEl)) {
+                const windowWidth = window.innerWidth;
+                const windowHeight = window.innerHeight;
+                const elWidth = this.el.clientWidth;
+                const elHeight = this.el.clientHeight;
+                const { top, left, height, width } = anchorEl.getBoundingClientRect();
+                switch (this.anchorOriginHorizontal) {
+                    case 'left': {
+                        this.positionX = left;
+                        break;
+                    }
+                    case 'center': {
+                        this.positionX = left + width / 2;
+                        break;
+                    }
+                    case 'right': {
+                        this.positionX = left + width;
+                        break;
+                    }
+                }
+                switch (this.anchorOriginVertical) {
+                    case 'top': {
+                        this.positionY = top;
+                        break;
+                    }
+                    case 'center': {
+                        this.positionY = top + height / 2;
+                        break;
+                    }
+                    case 'bottom': {
+                        this.positionY = top + height;
+                        break;
+                    }
+                }
+                if (this.positionY < this.windowPadding) {
+                    this.positionY = this.windowPadding;
+                }
+                if (this.positionY + elHeight > windowHeight - 16) {
+                    this.positionY = windowHeight - this.windowPadding - elHeight;
+                }
+                if (this.positionX < this.windowPadding) {
+                    this.positionX = this.windowPadding;
+                }
+                if (this.positionX + elWidth > windowWidth - 16) {
+                    this.positionX = windowWidth - this.windowPadding - elWidth;
+                }
+            }
+        };
+        this.handleClickOutside = (event) => {
+            if (!this.triggerClicked && this.triggerEl.contains(event.target)) {
+                this.triggerClicked = true;
+                return;
+            }
+            if (this.open && !this.el.contains(event.target)) {
+                event.preventDefault();
+                this.close();
+            }
+        };
+        this.present = () => {
+            if (!this.open && !this.disabled) {
+                this.open = true;
+                this.cpslOpen.emit();
+                this.setPosition();
+            }
+        };
+        this.close = () => {
+            this.open = false;
+            this.triggerClicked = false;
+            this.cpslClose.emit();
+        };
+        this.open = false;
+        this.positionX = undefined;
+        this.positionY = undefined;
+        this.anchorEl = undefined;
+        this.anchorOriginHorizontal = 'left';
+        this.anchorOriginVertical = 'bottom';
+        this.autoWidth = true;
+        this.disabled = undefined;
+        this.preventBlur = undefined;
+        this.transformOriginHorizontal = 'left';
+        this.transformOriginVertical = 'top';
+        this.triggerAction = 'click';
+        this.trigger = undefined;
+        this.windowPadding = 16;
+    }
+    closePopover() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.close();
+        });
+    }
+    onTriggerChange() {
+        this.configureTriggerInteraction();
+    }
+    onAnchorChange() {
+        this.setPosition();
+    }
+    onOpenChange() {
+        if (this.open) {
+            window.addEventListener('click', this.handleClickOutside);
+            window.addEventListener('scroll', () => this.setPosition(), true);
+        }
+        else {
+            window.removeEventListener('click', this.handleClickOutside);
+            window.addEventListener('scroll', () => this.setPosition());
+        }
+    }
+    componentDidLoad() {
+        this.configureTriggerInteraction();
+    }
+    get containerEl() {
+        var _a, _b;
+        return (_b = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById('container');
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: 'bb9a38fb37e6588041f6b09e064cbe85d0dd46b1', class: {
+                'open': this.open,
+                'transform-h-left': this.transformOriginHorizontal === 'left',
+                'transform-h-center': this.transformOriginHorizontal === 'center',
+                'transform-h-right': this.transformOriginHorizontal === 'right',
+                '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.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px` } }, h("div", { key: '99478330639eed6be6f7e5a960ebb2f485692cff', id: "container", class: { container: true, open: this.open } }, h("slot", { key: '2d15adf8c986698ce02858dfdca49047777e2c33' }))));
+    }
+    static get is() { return "cpsl-popover"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-popover.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-popover.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "anchorEl": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "ID for the element that the popover anchors to."
+                }
+            },
+            "anchorOriginHorizontal": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'center' | 'right'",
+                    "resolved": "\"center\" | \"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Vertical anchor origin.\nOptions are: `\"left\"`, `\"center\"`, `\"right\"`.\nDefault is: `\"left\"`."
+                },
+                "attribute": "anchor-origin-horizontal",
+                "reflect": false,
+                "defaultValue": "'left'"
+            },
+            "anchorOriginVertical": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | 'center' | 'bottom'",
+                    "resolved": "\"bottom\" | \"center\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Vertical anchor origin.\nOptions are: `\"top\"`, `\"center\"`, `\"bottom\"`.\nDefault is: `\"bottom\"`."
+                },
+                "attribute": "anchor-origin-vertical",
+                "reflect": false,
+                "defaultValue": "'bottom'"
+            },
+            "autoWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` the container will use the width of the content, else it will be set to the width of the trigger.\nDefault is `true`"
+                },
+                "attribute": "auto-width",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not to disable to popover."
+                },
+                "attribute": "disabled",
+                "reflect": false
+            },
+            "preventBlur": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Used internally to prevent select from blurring unintentionally."
+                },
+                "attribute": "prevent-blur",
+                "reflect": false
+            },
+            "transformOriginHorizontal": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'center' | 'right'",
+                    "resolved": "\"center\" | \"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Vertical transformation origin.\nOptions are: `\"left\"`, `\"center\"`, `\"right\"`.\nDefault is: `\"left\"`."
+                },
+                "attribute": "transform-origin-horizontal",
+                "reflect": false,
+                "defaultValue": "'left'"
+            },
+            "transformOriginVertical": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | 'center' | 'bottom'",
+                    "resolved": "\"bottom\" | \"center\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Vertical transformation origin.\nOptions are: `\"top\"`, `\"center\"`, `\"bottom\"`.\nDefault is: `\"bottom\"`."
+                },
+                "attribute": "transform-origin-vertical",
+                "reflect": false,
+                "defaultValue": "'top'"
+            },
+            "triggerAction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'click' | 'hover'",
+                    "resolved": "\"click\" | \"hover\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which trigger causes the popover to open.\nOptions are: `\"click\"`, `\"hover\"`.\nDefault is: `\"click\"`."
+                },
+                "attribute": "trigger-action",
+                "reflect": false,
+                "defaultValue": "'click'"
+            },
+            "trigger": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ID for the element that triggers the popover to open."
+                },
+                "attribute": "trigger",
+                "reflect": false
+            },
+            "windowPadding": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Padding from edge of window for the popover container."
+                },
+                "attribute": "window-padding",
+                "reflect": false,
+                "defaultValue": "16"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {},
+            "positionX": {},
+            "positionY": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "cpslOpen",
+                "name": "cpslOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the popover opens."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "cpslClose",
+                "name": "cpslClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the popover closes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "closePopover": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Call to close the popover manually.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "trigger",
+                "methodName": "onTriggerChange"
+            }, {
+                "propName": "triggerAction",
+                "methodName": "onTriggerChange"
+            }, {
+                "propName": "preventBlur",
+                "methodName": "onTriggerChange"
+            }, {
+                "propName": "anchorOriginHorizontal",
+                "methodName": "onAnchorChange"
+            }, {
+                "propName": "anchorOriginVertical",
+                "methodName": "onAnchorChange"
+            }, {
+                "propName": "open",
+                "methodName": "onOpenChange"
+            }];
+    }
+}
+//# sourceMappingURL=cpsl-popover.js.map

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

@@ -0,0 +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  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    } else {\n      window.removeEventListener('click', this.handleClickOutside);\n      window.addEventListener('scroll', () => this.setPosition());\n    }\n  }\n\n  componentDidLoad() {\n    this.configureTriggerInteraction();\n  }\n\n  private configureTriggerInteraction = () => {\n    const { trigger, triggerAction, destroyTriggerInteraction } = this;\n\n    if (Boolean(destroyTriggerInteraction)) {\n      destroyTriggerInteraction();\n    }\n\n    if (trigger === undefined) {\n      return;\n    }\n\n    this.triggerEl = document.getElementById(trigger);\n    if (!Boolean(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 (Boolean(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      this.setPosition();\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.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-popover/test/cpsl-popover.e2e.js

@@ -0,0 +1,29 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try {
+            step(generator.next(value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function rejected(value) { try {
+            step(generator["throw"](value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { newE2EPage } from "@stencil/core/testing";
+describe('cpsl-popover', () => {
+    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
+        const page = yield newE2EPage();
+        yield page.setContent('<cpsl-popover></cpsl-popover>');
+        const element = yield page.find('cpsl-popover');
+        expect(element).toHaveClass('hydrated');
+    }));
+});
+//# sourceMappingURL=cpsl-popover.e2e.js.map

package/dist/collection/components/cpsl-popover/test/cpsl-popover.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-popover.e2e.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-popover/test/cpsl-popover.e2e.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC5B,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,+BAA+B,CAAC,CAAC;QAEvD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAChD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('cpsl-popover', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<cpsl-popover></cpsl-popover>');\n\n    const element = await page.find('cpsl-popover');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}

package/dist/collection/components/cpsl-popover/test/cpsl-popover.spec.js

@@ -0,0 +1,37 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try {
+            step(generator.next(value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function rejected(value) { try {
+            step(generator["throw"](value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { newSpecPage } from "@stencil/core/testing";
+import { CpslPopover } from "../cpsl-popover";
+describe('cpsl-popover', () => {
+    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
+        const page = yield newSpecPage({
+            components: [CpslPopover],
+            html: `<cpsl-popover></cpsl-popover>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <cpsl-popover>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </cpsl-popover>
+    `);
+    }));
+});
+//# sourceMappingURL=cpsl-popover.spec.js.map

package/dist/collection/components/cpsl-popover/test/cpsl-popover.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-popover.spec.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-popover/test/cpsl-popover.spec.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC5B,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;YACzB,IAAI,EAAE,+BAA+B;SACtC,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { CpslPopover } from '../cpsl-popover';\n\ndescribe('cpsl-popover', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CpslPopover],\n      html: `<cpsl-popover></cpsl-popover>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <cpsl-popover>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </cpsl-popover>\n    `);\n  });\n});\n"]}

package/dist/collection/components/cpsl-progress-indicator/cpsl-progress-indicator.css

@@ -65,7 +65,7 @@
 }
 
 .step {
-  background-color: var(--step-next-color);
+  background: var(--step-next-color);
   border-radius: var(--step-border-radius, calc(var(--step-height) * 2));
   height: var(--step-height);
   flex: 1;
@@ -73,10 +73,10 @@
 }
 
 .previous {
-  background-color: var(--step-previous-color);
+  background: var(--step-previous-color);
 }
 
 .active {
-  background-color: var(--step-active-color);
+  background: var(--step-active-color);
   flex: 2;
 }

package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.css

@@ -76,6 +76,6 @@
   border-width: var(--qr-border-width);
   border-color: var(--qr-border-color);
   border-radius: var(--qr-border-radius);
-  background-color: var(--qr-background-color);
+  background: var(--qr-background-color);
   box-shadow: var(--qr-box-shadow);
 }

package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.js

@@ -32,7 +32,7 @@ export class CpslQrCode {
         qrCode.append(container);
     }
     render() {
-        return (h(Host, { key: '249236c83c51fa7b3bf66c74a3e122f945288313' }, h("div", { key: 'cd899dac84d029d89648572584ffddae0c98ab37', id: "qr-container", class: "qr-container" })));
+        return (h(Host, { key: '68a11eb026f62f795a769b4bb5b91509bda57c55' }, h("div", { key: 'da47238221fed966d47e50471af27d0eaa407e2a', id: "qr-container", class: "qr-container" })));
     }
     static get is() { return "cpsl-qr-code"; }
     static get encapsulation() { return "shadow"; }