@pine-ds/core 0.0.2-alpha.0

package/dist/collection/components/pds-tooltip/pds-tooltip.js

@@ -0,0 +1,287 @@
+import { Host, h } from "@stencil/core";
+import { positionTooltip } from "../../utils/overlay";
+/**
+ * @slot (default) - The tooltip's target element
+ * @slot content - HTML content for the tooltip
+ */
+export class PdsTooltip {
+    constructor() {
+        this.handleHide = () => {
+            this.hideTooltip();
+            this.pdsTooltipHide.emit();
+        };
+        this.handleShow = () => {
+            this.showTooltip();
+            this.pdsTooltipShow.emit();
+        };
+        this.isOpen = false;
+        this.content = undefined;
+        this.componentId = undefined;
+        this.hasArrow = true;
+        this.htmlContent = false;
+        this.placement = 'right';
+        this.opened = false;
+    }
+    handleOpenToggle() {
+        if (this.opened) {
+            this.handleShow();
+        }
+        else {
+            this.handleHide();
+        }
+    }
+    componentWillLoad() {
+        if (this.opened) {
+            this.showTooltip();
+        }
+        this.el.addEventListener('blur', this.handleHide, true);
+        this.el.addEventListener('focus', this.handleShow, true);
+    }
+    componentDidUpdate() {
+        if (this.opened) {
+            this.showTooltip();
+        }
+    }
+    componentDidRender() {
+        positionTooltip({ elem: this.el, elemPlacement: this.placement, overlay: this.contentEl });
+    }
+    /**
+     * Shows the tooltip by enabling the opened property
+     */
+    async showTooltip() {
+        this.opened = true;
+    }
+    /**
+     * Hides the tooltip by disabling the opened property
+     */
+    async hideTooltip() {
+        this.opened = false;
+    }
+    render() {
+        return (h(Host, { onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, h("div", { class: `
+            pds-tooltip
+            pds-tooltip--${this.placement}
+            ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}
+            ${this.opened ? 'pds-tooltip--is-open' : ''}
+            ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}
+          ` }, h("span", { "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, h("slot", null)), h("div", { class: "pds-tooltip__content", "aria-hidden": this.opened ? 'false' : 'true', "aria-live": this.opened ? 'polite' : 'off', id: this.componentId, ref: (el) => (this.contentEl = el), role: "tooltip" }, h("slot", { name: "content" }), this.content))));
+    }
+    static get is() { return "pds-tooltip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-tooltip.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "content": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Content for the tooltip. If HTML is required, use the content slot"
+                },
+                "attribute": "content",
+                "reflect": false
+            },
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier used for the underlying component `id` attribute."
+                },
+                "attribute": "component-id",
+                "reflect": false
+            },
+            "hasArrow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "true"
+                        }],
+                    "text": "Determines whether or not the tooltip has an arrow"
+                },
+                "attribute": "has-arrow",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "htmlContent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Enable this option when using the content slot"
+                },
+                "attribute": "html-content",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "\"right\""
+                        }],
+                    "text": "Determines the preferred position of the tooltip"
+                },
+                "attribute": "placement",
+                "reflect": true,
+                "defaultValue": "'right'"
+            },
+            "opened": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines whether or not the tooltip is visible"
+                },
+                "attribute": "opened",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pdsTooltipHide",
+                "name": "pdsTooltipHide",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted after a tooltip is closed"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "pdsTooltipShow",
+                "name": "pdsTooltipShow",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted after a tooltip is shown"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "showTooltip": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Shows the tooltip by enabling the opened property",
+                    "tags": []
+                }
+            },
+            "hideTooltip": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Hides the tooltip by disabling the opened property",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "opened",
+                "methodName": "handleOpenToggle"
+            }];
+    }
+}
+//# sourceMappingURL=pds-tooltip.js.map

package/dist/collection/components/pds-tooltip/pds-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pds-tooltip.js","sourceRoot":"","sources":["../../../../src/components/pds-tooltip/pds-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, Host, Prop, State, h, EventEmitter, Method, Watch } from '@stencil/core';\nimport {\n  positionTooltip\n} from '../../utils/overlay';\n\n/**\n * @slot (default) - The tooltip's target element\n * @slot content - HTML content for the tooltip\n */\n\n@Component({\n  tag: 'pds-tooltip',\n  styleUrl: 'pds-tooltip.scss',\n  shadow: true,\n})\nexport class PdsTooltip {\n  private contentEl: HTMLElement | null;\n\n  /**\n   * Reference to the Host element\n   */\n  @Element() el: HTMLPdsTooltipElement;\n\n  /**\n   * Determines when the tooltip is open\n   * @defaultValue false\n   */\n  @State() isOpen = false;\n\n  /**\n   * Content for the tooltip. If HTML is required, use the content slot\n   */\n  @Prop() content: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether or not the tooltip has an arrow\n   * @defaultValue true\n   */\n  @Prop() hasArrow? = true;\n\n  /**\n   * Enable this option when using the content slot\n   * @defaultValue false\n   */\n  @Prop() htmlContent = false;\n\n  /**\n   * Determines the preferred position of the tooltip\n   * @defaultValue \"right\"\n   */\n  @Prop({ reflect: true }) placement:\n    'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'right';\n\n  /**\n   * Determines whether or not the tooltip is visible\n   * @defaultValue false\n   */\n  @Prop({mutable: true, reflect: true}) opened = false;\n\n  @Watch('opened')\n  handleOpenToggle() {\n    if (this.opened) {\n      this.handleShow();\n    } else {\n      this.handleHide();\n    }\n  }\n\n  /**\n   * Emitted after a tooltip is closed\n   */\n  @Event() pdsTooltipHide: EventEmitter;\n\n  /**\n   * Emitted after a tooltip is shown\n   */\n  @Event() pdsTooltipShow: EventEmitter;\n\n  componentWillLoad() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n\n    this.el.addEventListener('blur', this.handleHide, true);\n    this.el.addEventListener('focus', this.handleShow, true);\n  }\n\n  componentDidUpdate() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n  }\n\n  componentDidRender() {\n    positionTooltip({elem: this.el, elemPlacement: this.placement, overlay: this.contentEl});\n  }\n\n  /**\n   * Shows the tooltip by enabling the opened property\n   */\n  @Method()\n  async showTooltip() {\n    this.opened = true;\n  }\n\n  /**\n   * Hides the tooltip by disabling the opened property\n   */\n  @Method()\n  async hideTooltip() {\n    this.opened = false;\n  }\n\n  private handleHide = () => {\n    this.hideTooltip();\n    this.pdsTooltipHide.emit();\n  };\n\n  private handleShow = () => {\n    this.showTooltip();\n    this.pdsTooltipShow.emit();\n  };\n\n  render() {\n    return (\n      <Host\n        onMouseEnter={this.handleShow}\n        onMouseLeave={this.handleHide}\n        onFocusin={this.handleShow}\n        onFocusout={this.handleHide}\n      >\n        <div\n          class={`\n            pds-tooltip\n            pds-tooltip--${this.placement}\n            ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}\n            ${this.opened ? 'pds-tooltip--is-open' : ''}\n            ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}\n          `}\n        >\n          <span\n            aria-describedby={this.componentId}\n            class=\"pds-tooltip__trigger\"\n          >\n            <slot />\n          </span>\n\n          <div class=\"pds-tooltip__content\"\n            aria-hidden={this.opened ? 'false' : 'true'}\n            aria-live={this.opened ? 'polite' : 'off'}\n            id={this.componentId}\n            ref={(el) => (this.contentEl = el)}\n            role=\"tooltip\"\n          >\n            <slot\n              name=\"content\"\n            ></slot>\n            {this.content}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-tooltip/stories/pds-tooltip.stories.js

@@ -0,0 +1,114 @@
+import { html } from 'lit';
+import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+import { withActions } from '@storybook/addon-actions/decorator';
+
+export default {
+  argTypes: extractArgTypes('pds-tooltip'),
+  component: 'pds-tooltip',
+  decorators: [withActions],
+  parameters: {
+    actions: {
+      handles: ['mouseEnter', 'pdsTooltipShow', 'mouseLeave', 'pdsTooltipHide'],
+    },
+  },
+  title: 'components/Tooltip'
+}
+
+const defaultParameters = {
+  docs: {
+    disable: true
+  }
+};
+
+const BaseTemplate = (args) => html`
+  <pds-tooltip content=${args.content} has-arrow=${args.hasArrow} placement=${args.placement}>${args.slot}</pds-tooltip>`;
+
+const HTMLContentTemplate = (args) => html`
+  <pds-tooltip has-arrow=${args.hasArrow} placement=${args.placement} html-content=${args.htmlContent}>
+    <div slot="content">
+      <p><strong>This is a tooltip</strong></p>
+      <p>Tooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand the meaning, function or alt-text of an element.</p>
+    </div>
+    <pds-button variant="secondary">Hover</pds-button>
+  </pds-tooltip>`;
+
+const PositionTemplate = (args) => html`
+  <div class="demo-container" style="min-height: 50vh; width: 100%; display: flex; align-items: center; justify-content: center;">
+    <div class="position-demo-grid">
+      <div class="position-demo-grid-item">
+        <pds-tooltip content="content 2" has-arrow=${args.hasArrow} placement="top-start" opened=${args.opened}>
+          <pds-button variant="accent">t</pds-button>
+        </pds-tooltip>
+        <pds-tooltip content="content 2" has-arrow=${args.hasArrow} placement="top" opened=${args.opened}>
+          <pds-button variant="accent">t</pds-button>
+        </pds-tooltip>
+        <pds-tooltip content="content 3" has-arrow=${args.hasArrow} placement="top-end" opened=${args.opened}>
+          <pds-button variant="accent">te</pds-button>
+        </pds-tooltip>
+        </div>
+        <div class="position-demo-grid-item">
+          <pds-tooltip content="content 1" has-arrow=${args.hasArrow} placement="left-start" opened=${args.opened}>
+            <pds-button variant="accent">ls</pds-button>
+          </pds-tooltip>
+          <pds-tooltip content="content 2" has-arrow=${args.hasArrow} placement="left" opened=${args.opened}>
+            <pds-button variant="accent">l</pds-button>
+          </pds-tooltip>
+          <pds-tooltip content="content 3" has-arrow=${args.hasArrow} placement="left-end" opened=${args.opened}>
+            <pds-button variant="accent">le</pds-button>
+          </pds-tooltip>
+        </div>
+        <div class="position-demo-grid-item">
+          <pds-tooltip content="content 1" has-arrow=${args.hasArrow} placement="bottom-start" opened=${args.opened}>
+            <pds-button variant="accent">bs</pds-button>
+          </pds-tooltip>
+          <pds-tooltip content="content 2" has-arrow=${args.hasArrow} placement="bottom" opened=${args.opened}>
+            <pds-button variant="accent">b</pds-button>
+          </pds-tooltip>
+          <pds-tooltip content="content 3" has-arrow=${args.hasArrow} placement="bottom-end" opened=${args.opened}>
+            <pds-button variant="accent">be</pds-button>
+          </pds-tooltip>
+        </div>
+        <div class="position-demo-grid-item">
+          <pds-tooltip content="content 1" has-arrow=${args.hasArrow} placement="right-start" opened=${args.opened}>
+            <pds-button variant="accent">rs</pds-button>
+          </pds-tooltip>
+          <pds-tooltip content="content 2" has-arrow=${args.hasArrow} placement="right" opened=${args.opened}>
+            <pds-button variant="accent">r</pds-button>
+          </pds-tooltip>
+          <pds-tooltip content="content 3" has-arrow=${args.hasArrow} placement="right-end" opened=${args.opened}>
+            <pds-button variant="accent">re</pds-button>
+          </pds-tooltip>
+      </div>
+    </div>
+  </div>`;
+
+export const Default = BaseTemplate.bind({});
+Default.args = {
+  content: "The tooltip content",
+  placement: "right",
+  slot: "target text"
+};
+Default.parameters = { ...defaultParameters };
+
+export const HTMLContent = HTMLContentTemplate.bind({});
+HTMLContent.args = {
+  htmlContent: true,
+  placement: "bottom-start",
+};
+HTMLContent.parameters = { ...defaultParameters }
+
+
+export const Positioning = PositionTemplate.bind({});
+Positioning.args = {
+  content: "Trigger",
+};
+Positioning.parameters = { ...defaultParameters }
+
+export const NoArrow = BaseTemplate.bind({});
+NoArrow.args = {
+  content: "The tooltip content",
+  hasArrow: false,
+  placement: "bottom-start",
+  slot: "target text"
+};
+NoArrow.parameters = { ...defaultParameters }

package/dist/collection/global/pine-ui-global.js

@@ -0,0 +1,2 @@
+import "@pine-ds/icons";
+//# sourceMappingURL=pine-ui-global.js.map

package/dist/collection/global/pine-ui-global.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pine-ui-global.js","sourceRoot":"","sources":["../../../src/global/pine-ui-global.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAC","sourcesContent":["import '@pine-ds/icons';\n"]}

package/dist/collection/index.js

@@ -0,0 +1,2 @@
+import "@pine-ds/icons";
+//# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAC","sourcesContent":["import '@pine-ds/icons';\n"]}

package/dist/collection/stories/_helpers/index.js

@@ -0,0 +1,15 @@
+import { extractArgTypes } from "@pxtrn/storybook-addon-docs-stencil";
+import pdsIconsJson from "@pine-ds/icons/dist/pds-icons.json";
+/**
+ *
+ * @param component - string - Name of the compoennt to extract args. e.g pds-button
+ * @param property - string - Name of the property used within the component e.g icon
+ * @returns object
+ */
+export const customArgsWithIconControl = ({ component, property }) => {
+    const extractedArgs = extractArgTypes(component);
+    extractedArgs[property].control.type = 'select';
+    extractedArgs[property].options = Object.values(pdsIconsJson["icons"]).map((icon) => (icon.name));
+    return extractedArgs;
+};
+//# sourceMappingURL=index.js.map

package/dist/collection/stories/_helpers/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/stories/_helpers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AAEtE,OAAO,YAAY,MAAM,oCAAoC,CAAC;AAO9D;;;;;GAKG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAkB,EAAE,EAAE;IAClF,MAAM,aAAa,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;IAEjD,aAAa,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,IAAI,GAAG,QAAQ,CAAC;IAChD,aAAa,CAAC,QAAQ,CAAC,CAAC,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAElG,OAAO,aAAa,CAAC;AACvB,CAAC,CAAA","sourcesContent":["import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';\n\nimport pdsIconsJson from '@pine-ds/icons/dist/pds-icons.json';\n\ninterface IconControlArgs {\n  component: string,\n  property: string\n}\n\n/**\n *\n * @param component - string - Name of the compoennt to extract args. e.g pds-button\n * @param property - string - Name of the property used within the component e.g icon\n * @returns object\n */\nexport const customArgsWithIconControl = ({component, property}: IconControlArgs) => {\n  const extractedArgs = extractArgTypes(component);\n\n  extractedArgs[property].control.type = 'select';\n  extractedArgs[property].options = Object.values(pdsIconsJson[\"icons\"]).map((icon) => (icon.name));\n\n  return extractedArgs;\n}\n\n"]}

package/dist/collection/utils/form.js

@@ -0,0 +1,28 @@
+/**
+ * Create id for messaging
+ */
+export const messageId = (id, messageType) => {
+    return `${id}__${messageType}-message`;
+};
+/**
+ * Assign aria-description id to relate messages with form element
+ */
+export const assignDescription = (id, invalid, helperMessage) => {
+    if (!helperMessage)
+        return;
+    let relatedId = messageId(id, 'helper');
+    if (invalid)
+        relatedId = messageId(id, 'error');
+    return relatedId;
+};
+/**
+ * Updates the `invalid` prop of a form element based on it's values validity
+ */
+export const isRequired = (target, component) => {
+    if (!target || !component)
+        return;
+    if (component.required === true) {
+        (target.checkValidity() === false) ? component.invalid = true : component.invalid = false;
+    }
+};
+//# sourceMappingURL=form.js.map

package/dist/collection/utils/form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.js","sourceRoot":"","sources":["../../../src/utils/form.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAU,EAAE,WAAmB,EAAE,EAAE;IAC3D,OAAO,GAAG,EAAE,KAAK,WAAW,UAAU,CAAC;AACzC,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAU,EAAE,OAAgB,EAAE,aAAqB,EAAE,EAAE;IACvF,IAAI,CAAC,aAAa;QAAE,OAAM;IAE1B,IAAI,SAAS,GAAG,SAAS,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAA;IAEvC,IAAI,OAAO;QAAE,SAAS,GAAG,SAAS,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;IAEhD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE;IAC9C,IAAK,CAAC,MAAM,IAAI,CAAC,SAAS;QAAG,OAAO;IACpC,IAAI,SAAS,CAAC,QAAQ,KAAK,IAAI,EAAE;QAC/B,CAAC,MAAM,CAAC,aAAa,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;KAC3F;AACH,CAAC,CAAA","sourcesContent":["/**\n * Create id for messaging\n */\nexport const messageId = (id: string, messageType: string) => {\n  return `${id}__${messageType}-message`;\n};\n\n/**\n * Assign aria-description id to relate messages with form element\n */\nexport const assignDescription = (id: string, invalid: boolean, helperMessage: string) => {\n  if (!helperMessage) return\n\n  let relatedId = messageId(id, 'helper')\n\n  if (invalid) relatedId = messageId(id, 'error');\n\n  return relatedId;\n};\n\n/**\n * Updates the `invalid` prop of a form element based on it's values validity\n */\nexport const isRequired = (target, component) => {\n  if ( !target || !component ) return;\n  if (component.required === true) {\n    (target.checkValidity() === false) ? component.invalid = true : component.invalid = false;\n  }\n}\n"]}

package/dist/collection/utils/overlay.js

@@ -0,0 +1,68 @@
+export const positionTooltip = ({ elem, elemPlacement, overlay, offset = 8 }) => {
+    if (elem == undefined)
+        return;
+    const rect = elem.getBoundingClientRect();
+    const contentRect = overlay.getBoundingClientRect();
+    // Exit the function if the placement is not set
+    if (!elemPlacement || elemPlacement == "")
+        return;
+    switch (true) {
+        case elemPlacement.includes("right"):
+            overlay.style.top = '50%';
+            overlay.style.left = `calc(${rect.width}px + ${offset}px)`;
+            overlay.style.transform = 'translateY(-50%)';
+            if (elemPlacement.includes("start")) {
+                overlay.style.top = '0';
+                overlay.style.transform = 'translateY(0)';
+            }
+            if (elemPlacement.includes("end")) {
+                overlay.style.bottom = '0';
+                overlay.style.top = 'initial';
+                overlay.style.transform = 'translateY(0)';
+            }
+            break;
+        case elemPlacement.includes("left"):
+            overlay.style.top = '50%';
+            overlay.style.right = `calc(${rect.width}px + ${offset}px)`;
+            overlay.style.transform = 'translateY(-50%)';
+            if (elemPlacement.includes("start")) {
+                overlay.style.top = '0';
+                overlay.style.transform = 'translateY(0)';
+            }
+            if (elemPlacement.includes("end")) {
+                overlay.style.bottom = '0';
+                overlay.style.top = 'initial';
+                overlay.style.transform = 'translateY(0)';
+            }
+            break;
+        case elemPlacement.includes("bottom"):
+            overlay.style.top = `calc(${rect.height}px + ${offset}px)`;
+            overlay.style.left = '50%';
+            overlay.style.transform = 'translateX(-50%)';
+            if (elemPlacement.includes("start")) {
+                overlay.style.left = '0';
+                overlay.style.transform = 'translateX(0)';
+            }
+            if (elemPlacement.includes("end")) {
+                overlay.style.left = 'initial';
+                overlay.style.right = '0';
+                overlay.style.transform = 'translateX(0)';
+            }
+            break;
+        case elemPlacement.includes("top"):
+            overlay.style.top = `calc((${contentRect.height}px + ${offset}px) * -1)`;
+            overlay.style.left = '50%';
+            overlay.style.transform = 'translateX(-50%)';
+            if (elemPlacement.includes("start")) {
+                overlay.style.left = '0';
+                overlay.style.transform = 'translateX(0)';
+            }
+            if (elemPlacement.includes("end")) {
+                overlay.style.left = 'initial';
+                overlay.style.right = '0';
+                overlay.style.transform = 'translateX(0)';
+            }
+            break;
+    }
+};
+//# sourceMappingURL=overlay.js.map

package/dist/collection/utils/overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.js","sourceRoot":"","sources":["../../../src/utils/overlay.ts"],"names":[],"mappings":"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","sourcesContent":["interface OverlayArgs {\n  elem: HTMLElement;\n  elemPlacement: string;\n  overlay: HTMLElement;\n  offset?: number;\n}\n\nexport const positionTooltip = ({elem, elemPlacement, overlay, offset = 8}: OverlayArgs) => {\n  if (elem == undefined) return;\n\n  const rect = elem.getBoundingClientRect();\n  const contentRect = overlay.getBoundingClientRect();\n\n  // Exit the function if the placement is not set\n  if (!elemPlacement || elemPlacement == \"\") return;\n\n  switch (true) {\n    case elemPlacement.includes(\"right\"):\n      overlay.style.top = '50%';\n      overlay.style.left = `calc(${rect.width}px + ${offset}px)`;\n      overlay.style.transform = 'translateY(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.top = '0';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.bottom = '0';\n        overlay.style.top = 'initial';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"left\"):\n      overlay.style.top = '50%';\n      overlay.style.right = `calc(${rect.width}px + ${offset}px)`;\n      overlay.style.transform = 'translateY(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.top = '0';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.bottom = '0';\n        overlay.style.top = 'initial';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"bottom\"):\n      overlay.style.top = `calc(${rect.height}px + ${offset}px)`;\n      overlay.style.left = '50%';\n      overlay.style.transform = 'translateX(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.left = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.left = 'initial';\n        overlay.style.right = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"top\"):\n      overlay.style.top = `calc((${contentRect.height}px + ${offset}px) * -1)`;\n      overlay.style.left = '50%';\n      overlay.style.transform = 'translateX(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.left = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.left = 'initial';\n        overlay.style.right = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      break;\n  }\n}\n"]}

package/dist/collection/utils/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/collection/utils/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TooltipPlacementType =\n  | 'top-start'\n  | 'top'\n  | 'top-end'\n  | 'left-start'\n  | 'left'\n  | 'left-end'\n  | 'right-start'\n  | 'right'\n  | 'right-end'\n  | 'bottom-start'\n  | 'bottom'\n  | 'bottom-end';\n"]}

package/dist/collection/utils/utils.js

@@ -0,0 +1,7 @@
+export function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}
+export const hasShadowDom = (el) => {
+    return !!el.shadowRoot && !!el.attachShadow;
+};
+//# sourceMappingURL=utils.js.map

package/dist/collection/utils/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/utils/utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,MAAM,CAAC,KAAa,EAAE,MAAc,EAAE,IAAY;IAChE,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AACjF,CAAC;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAe,EAAE,EAAE;IAC9C,OAAO,CAAC,CAAC,EAAE,CAAC,UAAU,IAAI,CAAC,CAAE,EAAU,CAAC,YAAY,CAAA;AACtD,CAAC,CAAA","sourcesContent":["export function format(first: string, middle: string, last: string): string {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport const hasShadowDom = (el: HTMLElement) => {\n  return !!el.shadowRoot && !!(el as any).attachShadow\n}\n"]}