@getpara/core-components 0.1.0

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

@@ -0,0 +1,555 @@
+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.startedInside = false;
+        this.startedWhenMounted = false;
+        this.configureTriggerInteraction = () => {
+            const { trigger, triggerAction, destroyTriggerInteraction } = this;
+            if (destroyTriggerInteraction) {
+                destroyTriggerInteraction();
+            }
+            if (trigger === undefined) {
+                return;
+            }
+            this.triggerEl = document.getElementById(trigger);
+            if (!this.triggerEl) {
+                console.error(`A trigger element with the ID "${trigger}" was not found in the DOM.`, this.el);
+                return;
+            }
+            let triggerCallbacks = [];
+            /**
+             * Based upon the kind of trigger interaction
+             * the user wants, we setup the correct event
+             * listeners.
+             */
+            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();
+                            },
+                        },
+                        {
+                            eventName: 'touchstart',
+                            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 (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.validateEventStart = event => {
+            this.startedWhenMounted = !!this.triggerEl;
+            this.startedInside = this.triggerEl.contains(event.target);
+            this.present();
+        };
+        this.handleClickOutside = (event) => {
+            // Do nothing if `mousedown` or `touchstart` started inside ref element
+            if (this.startedInside || !this.startedWhenMounted)
+                return;
+            // 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();
+            }
+        };
+        this.present = () => {
+            if (!this.open && !this.disabled) {
+                this.open = true;
+                this.cpslOpen.emit();
+                // Using a small timeout here to ensure the popover is open before attempting to do position calculations
+                setTimeout(() => {
+                    this.setPosition();
+                    this.hasSetInitialPosition = true;
+                }, 20);
+            }
+        };
+        this.close = () => {
+            this.open = false;
+            this.startedInside = false;
+            this.cpslClose.emit();
+            this.hasSetInitialPosition = false;
+        };
+        this.open = false;
+        this.hasSetInitialPosition = 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;
+    }
+    /**
+     * Call to close the popover manually.
+     */
+    closePopover() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.close();
+        });
+    }
+    onTriggerChange() {
+        this.configureTriggerInteraction();
+    }
+    onAnchorChange() {
+        this.setPosition();
+    }
+    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);
+        }
+    }
+    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: '970851fd64ee282b5ce8fb8ca470c8ceca0c89df', 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.open ? '0px' : this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px`,
+            } }, h("div", { key: '6928c32a091d7b7ae62ce30f3e03e92865e5a85b', id: "container", class: { container: true, open: this.open }, style: {
+                visibility: this.hasSetInitialPosition ? 'visible' : 'hidden',
+            } }, h("slot", { key: 'd5447218268672358c20356ec99ff284b62e5c4e' }))));
+    }
+    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": {},
+            "hasSetInitialPosition": {},
+            "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.js';\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() hasSetInitialPosition = 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        this.hasSetInitialPosition = true;\n      }, 20);\n    }\n  };\n\n  private close = () => {\n    this.open = false;\n    this.startedInside = false;\n    this.cpslClose.emit();\n    this.hasSetInitialPosition = false;\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={{\n          top: `${this.positionY}px`,\n          left: `${this.positionX}px`,\n          width: !this.open ? '0px' : this.autoWidth ? 'auto' : `${this.triggerEl?.clientWidth}px`,\n        }}\n      >\n        <div\n          id=\"container\"\n          class={{ container: true, open: this.open }}\n          style={{\n            visibility: this.hasSetInitialPosition ? 'visible' : 'hidden',\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,82 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+   * A heuristic that applies CSS to mobile
+   * viewports (i.e. phones, not tablets).
+   *
+   * Usage:
+   * @include mobile-viewport() {
+   *   :host {
+   *     background-color: blue;
+   *   }
+   * }
+   */
+:host {
+  --step-height: 3px;
+  --step-active-color: var(--cpsl-color-progressIndicator-active);
+  --step-next-color: var(--cpsl-color-progressIndicator-next);
+  --step-previous-color: var(--cpsl-color-progressIndicator-previous);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
+.step {
+  background: var(--step-next-color);
+  border-radius: var(--step-border-radius, calc(var(--step-height) * 2));
+  height: var(--step-height);
+  flex: 1;
+  transition: all 0.5s;
+}
+
+.previous {
+  background: var(--step-previous-color);
+}
+
+.active {
+  background: var(--step-active-color);
+  flex: 2;
+}