@telesign/boreal-web-components 0.1.0-alpha.2 → 0.1.0-alpha.4

package/dist/collection/components/overlays/bds-dialog/types/enum.js

@@ -0,0 +1,26 @@
+import { STATUS_VARIANT } from "../../../../types/index";
+export const DIALOG_SIZES = {
+    SMALL: 'sm',
+    MEDIUM: 'md',
+    LARGE: 'lg',
+    FULL: 'full',
+};
+export const DIALOG_VARIANT = {
+    ...STATUS_VARIANT,
+    DEFAULT: 'default',
+};
+export const DIALOG_VARIANT_ICON = {
+    INFO: 'bds-icon-info-circle-fill',
+    SUCCESS: 'bds-icon-check-circle-fill',
+    WARNING: 'bds-icon-info-major-triangle-up-fill',
+    DANGER: 'bds-icon-alert-circle-fill',
+};
+export const DIALOG_LAYOUT = {
+    DEFAULT: 'default',
+    HEADERLESS: 'headerless',
+    FOOTERLESS: 'footerless',
+};
+export const DIALOG_CONTENT_PADDING = {
+    DEFAULT: 'default',
+    NONE: 'none',
+};

package/dist/collection/components/overlays/bds-dialog/types/index.js

@@ -0,0 +1,3 @@
+export * from './enum';
+export * from './IDialog';
+export * from './types';

package/dist/collection/components/overlays/bds-dialog/types/types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/overlays/bds-popover/bds-popover.css

@@ -0,0 +1,130 @@
+@charset "UTF-8";
+/**
+* Common SCSS placeholder selectors shared across form and layout components.
+* This file is injected globally via `injectGlobalPaths` in `stencil.config.ts`,
+* so all component stylesheets can `@extend` these placeholders without an explicit import.
+*
+* NOTE: Placeholders must only use raw CSS values — `$boreal-*` token variables
+* are not available at this level util use style-guidelines.
+*/
+/**
+ * TODO: Refactor to use styleguidelines this work as first draft
+ **/
+/**
+* This file contains mixins and functions for common interactions styles such as focus rings and transitions.
+* These are used across multiple components to ensure consistency in interaction feedback.
+*/
+:root {
+  --popover-arrow-size: var(--boreal-spacing-s);
+  --popover-width: 320px;
+}
+
+.popover {
+  position: fixed;
+  margin: 0;
+  overflow: visible;
+  border-radius: var(--boreal-radius-xs2);
+  font-size: var(--boreal-typography-font-size-xs);
+  line-height: var(--boreal-typography-line-height-xs);
+  font-family: var(--boreal-typography-font-family-primary);
+  font-weight: var(--boreal-typography-font-weight-regular);
+  background: var(--boreal-ui-inverse);
+  filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.15));
+  box-shadow: none;
+  box-sizing: border-box;
+  border: transparent;
+  cursor: auto;
+}
+.popover-content {
+  position: relative;
+  padding: var(--boreal-spacing-s);
+}
+.popover[popover]:not(:popover-open) {
+  display: none;
+}
+.popover-header {
+  border-bottom: var(--boreal-stroke-default-light) solid 1px;
+  padding: var(--boreal-spacing-m) var(--boreal-spacing-xs) var(--boreal-spacing-m) var(--boreal-spacing-s);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.popover-header__content {
+  display: flex;
+  align-items: center;
+}
+.popover-header__title {
+  font-size: var(--boreal-typography-font-size-sm);
+  font-weight: var(--boreal-typography-font-weight-semibold);
+  line-height: var(--boreal-typography-line-height-sm);
+}
+.popover-header__icon {
+  font-size: var(--boreal-typography-font-size-md);
+  margin-right: var(--boreal-spacing-3xs);
+}
+.popover-header__close {
+  margin-left: var(--boreal-spacing-s);
+}
+.popover-header__close .bds-button {
+  margin: 0;
+  padding: 0;
+  width: var(--boreal-spacing-ml);
+  height: var(--boreal-spacing-ml);
+}
+.popover-header__close .bds-button__content {
+  width: var(--boreal-spacing-ml);
+  height: var(--boreal-spacing-ml);
+}
+.popover-header__close em {
+  font-size: var(--boreal-typography-font-size-xs);
+}
+.popover-footer {
+  border-top: var(--boreal-stroke-default-light) solid 1px;
+  padding: var(--boreal-spacing-s) var(--boreal-spacing-xs) var(--boreal-spacing-s) var(--boreal-spacing-s);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.popover .popover-arrow {
+  position: absolute;
+  width: var(--popover-arrow-size);
+  height: var(--popover-arrow-size);
+  pointer-events: none;
+}
+.popover .popover-arrow::before {
+  content: "";
+  position: absolute;
+  width: var(--popover-arrow-size);
+  height: var(--popover-arrow-size);
+  background: var(--boreal-ui-inverse);
+  transform: rotate(45deg);
+  inset: 0;
+}
+
+.popover[data-placement^=top] .popover-arrow {
+  bottom: calc(var(--popover-arrow-size) / -2);
+}
+.popover[data-placement^=top] .popover-arrow::before {
+  bottom: 0;
+}
+
+.popover[data-placement^=bottom] .popover-arrow {
+  top: calc(var(--popover-arrow-size) / -2);
+}
+.popover[data-placement^=bottom] .popover-arrow::before {
+  bottom: 0;
+}
+
+.popover[data-placement^=left] .popover-arrow {
+  right: calc(var(--popover-arrow-size) / -2);
+}
+.popover[data-placement^=left] .popover-arrow::before {
+  left: 0;
+}
+
+.popover[data-placement^=right] .popover-arrow {
+  left: calc(var(--popover-arrow-size) / -2);
+}
+.popover[data-placement^=right] .popover-arrow::before {
+  left: 0;
+}

package/dist/collection/components/overlays/bds-popover/bds-popover.js

@@ -0,0 +1,465 @@
+import { Host, Mixin, h } from "@stencil/core";
+import { anchoredMixin } from "../../../mixins/anchored.mixin";
+import { BUTTON_SIZES } from "../../actions/bds-button/types/enum";
+import { OFFSET } from "./constants/Offset";
+import { getOffset } from "../../../utils/helpers/overlays/getOffset";
+/**
+ *
+ * @slot - Default slot for the popover body content.
+ * @slot header-icon - Slot for header icon.
+ * @slot header-title - Slot for header title.
+ * @slot footer-helper - Slot for footer helper content.
+ * @slot footer-button - Slot for footer actions.
+ *
+ * @attr {boolean} disabled - When true, prevents the popover from being shown.
+ * @attr {number | 'full' | 'auto'} width - Controls the width of the popover content.
+ * @attr {boolean} header - When true, displays the popover header.
+ * @attr {boolean} footer - When true, displays the popover footer.
+ * @attr {boolean} closable - When true, displays the close button in the header.
+ * @attr {IPopoverFloatingOptions} floatingOptions - Configuration object for floating behavior.
+ *
+ * @csspart popover-content - The main popover container element.
+ * @csspart arrow - The arrow element pointing toward the trigger.
+ * @csspart popover-trigger - The trigger element for the popover.
+ *
+ * @cssprop data-placement - Reflects the resolved placement on the popover element.
+ * @cssprop data-hidearrow - Reflects the hideArrow option.
+ */
+export class BdsPopover extends Mixin(anchoredMixin) {
+    constructor() {
+        /**
+         * Override default options for the floating mixin.
+         * This can be overridden by passing a different object to the `floatingOptions` prop.
+         */
+        this.floatingOptions = {};
+        /**
+         * If true, disables the popover.
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Width of the popover content.
+         * - number: width in pixels (e.g. 320 → "320px")
+         * - 'full': 100% of the trigger/parent width
+         * - 'auto': fits the content
+         * @default 320
+         */
+        this.width = 320;
+        /**
+         * If true, displays the header section with icon and title slots.
+         * @default false
+         */
+        this.header = false;
+        /**
+         * If true, displays the footer section with helper and button slots.
+         * @default false
+         */
+        this.footer = false;
+        /**
+         * If true, displays a close button inside the header. Requires `header` to be true.
+         * @default false
+         */
+        this.closable = false;
+        /**
+         * Tracks the visibility state of the floating element.
+         * Triggers a re-render when changed.
+         */
+        this.isVisible = false;
+        super();
+    }
+    /**
+     * Returns the resolved options for the floating mixin, merging `floatingOptions`
+     * prop values with their defaults.
+     */
+    get options() {
+        return {
+            placement: this.floatingOptions.placement ?? 'bottom',
+            offset: getOffset(this.floatingOptions?.hideArrow, this.floatingOptions?.offset, OFFSET),
+            arrow: this.floatingOptions.hideArrow ? undefined : this.arrowElement,
+            strategy: 'fixed',
+            shift: true,
+            flip: true,
+        };
+    }
+    /**
+     * Returns the popover width based on the `width` prop.
+     * If `width` is 'full', returns '100%'.
+     * If `width` is 'auto', returns 'auto'.
+     * Otherwise, returns the provided width in pixels.
+     */
+    get popoverWidth() {
+        if (this.width === 'full')
+            return '100%';
+        if (this.width === 'auto')
+            return 'auto';
+        return `${this.width}px`;
+    }
+    /**
+     * Returns the lifecycle hooks consumed by the anchored mixin to control
+     * tooltip visibility and positioning.
+     * @override anchoredMixin.hooks
+     */
+    get hooks() {
+        return {
+            onPositionUpdate: result => this.handlePosition(result),
+            onBeforeShow: () => !this.disabled,
+            onAfterShow: () => this.attachClickOutside(),
+            onAfterHide: () => this.detachClickOutside(),
+            onBeforeLoad: () => this.attachTrigger(),
+            subscribeToTrigger: (el) => this.subscribe(el),
+        };
+    }
+    /**
+     * Attaches a click outside listener to the document.
+     * If `closeOnClickOutside` is true, the popover will close when the user clicks outside.
+     */
+    attachClickOutside() {
+        if (this.floatingOptions?.closeOnClickOutside === false)
+            return;
+        this.boundClickOutside = (e) => this.handleClickOutside(e);
+        document.addEventListener('mousedown', this.boundClickOutside);
+    }
+    /**
+     * Detaches the click outside listener from the document.
+     * If `closeOnClickOutside` is true, the popover will close when the user clicks outside.
+     */
+    detachClickOutside() {
+        if (this.floatingOptions?.closeOnClickOutside === false)
+            return;
+        if (this.boundClickOutside !== null) {
+            document.removeEventListener('mousedown', this.boundClickOutside);
+            this.boundClickOutside = () => { };
+        }
+    }
+    /**
+     * Applies the arrow element's `x` and `y` coordinates calculated by the
+     * floating middleware. Skips the update when the arrow element is not
+     * connected to the DOM or when middleware data is absent.
+     *
+     * @param result - The positioning result that may contain `middlewareData.arrow`
+     * with the computed `x` and `y` offsets for the arrow element.
+     */
+    setArrowPosition(result) {
+        if (result.middlewareData?.arrow && !this.disabled && this.arrowElement?.isConnected) {
+            const placement = this.floatingOptions.placement;
+            const arrowData = result.middlewareData.arrow;
+            const isStartPlacement = placement === 'top-start' || placement === 'bottom-start';
+            let arrowX = arrowData.x || undefined;
+            if (isStartPlacement)
+                arrowX = arrowData.x ? 20 : undefined;
+            const arrowY = result.middlewareData.arrow.y;
+            Object.assign(this.arrowElement.style, {
+                left: arrowX != null ? `${arrowX}px` : '',
+                top: arrowY != null ? `${arrowY}px` : '',
+            });
+        }
+    }
+    /**
+     *  Handles the click outside event.
+     *  If the click is inside the trigger or the floating content, it will not close the popover.
+     * @param e - Mouse event with the click coordinates.
+     */
+    handleClickOutside(e) {
+        const target = e.target;
+        const clickedInsideTrigger = this.listenTarget?.contains(target) || this.trigger?.contains(target) || this.triggerSlot?.contains(target);
+        const clickedInsideFloating = this.floatingContent.contains(target) || this.floatingContent === target;
+        if (!clickedInsideTrigger && !clickedInsideFloating) {
+            this.hide();
+        }
+    }
+    /**
+     * Handles the click event on the floating content. Prevents the default behavior of the click event.
+     * If `closeOnClick` is true, the popover will close when the user clicks inside the floating content.
+     * @param e - Mouse event with the click coordinates.
+     */
+    handleContentClick(e) {
+        e.stopPropagation();
+        this.handleFloatingClick();
+    }
+    /**
+     * Handles the click event on the floating content.
+     * If `closeOnClick` is true, the popover will close when the user clicks inside the floating content.
+     */
+    handleFloatingClick() {
+        if (this.floatingOptions.closeOnClick)
+            this.hide();
+    }
+    /**
+     *  Handles the position update event.
+     *  Updates the position of the floating content and the arrow element.
+     * @param result - Positioning result with the position and the placement.
+     */
+    handlePosition(result) {
+        this.floatingContent.setAttribute('data-placement', result.placement);
+        this.setArrowPosition(result);
+        if (this.width === 'full' && this.triggerSlot !== null && this.triggerSlot !== undefined) {
+            const realTrigger = this.triggerSlot.parentElement ?? this.triggerSlot;
+            const newWidth = realTrigger.getBoundingClientRect().width;
+            const currentWidth = this.floatingContent.getBoundingClientRect().width;
+            if (Math.round(currentWidth) !== Math.round(newWidth)) {
+                this.floatingContent.style.width = `${newWidth}px`;
+            }
+            void this.updatePosition(this.triggerSlot, this.floatingContent, this.options, r => {
+                this.floatingContent.setAttribute('data-placement', r.placement);
+                this.setArrowPosition(r);
+            });
+        }
+        else if (this.width === 'auto') {
+            this.floatingContent.style.width = '';
+        }
+    }
+    /**
+     *  Attaches the trigger to the popover.
+     *  If the trigger is not set, it will return.
+     * @returns
+     */
+    attachTrigger() {
+        if (this.trigger !== null && this.trigger !== undefined)
+            return;
+    }
+    /**
+     *  Subscribes the trigger to the popover.
+     *  If the trigger is not a button, input, or select element, it will return.
+     * @param trigger - The trigger element to subscribe.
+     */
+    subscribe(trigger) {
+        if (trigger === undefined)
+            return;
+        this.trigger = trigger;
+        trigger.setAttribute('part', 'popover-trigger');
+        trigger.setAttribute('ariaDescribedBy', 'popover-content');
+        trigger.setAttribute('aria-haspopup', 'true');
+        trigger.setAttribute('aria-expanded', 'false');
+        const parentBds = trigger.closest('bds-button, bds-input, bds-select');
+        if (parentBds !== null && parentBds !== undefined) {
+            const nativeEl = parentBds.querySelector('button, input');
+            const listenTarget = nativeEl ?? parentBds;
+            this.listenTarget = listenTarget;
+            this.listenTarget.addEventListener('click', (evt) => this.handleShow(evt));
+            this.listenTarget.addEventListener('keydown', (evt) => this.handleKeydown(evt, () => this.showElement(), () => this.hideElement()));
+        }
+        else {
+            this.trigger.addEventListener('click', (evt) => this.handleShow(evt));
+            this.trigger.addEventListener('keydown', (evt) => this.handleKeydown(evt, () => this.showElement(), () => this.hideElement()));
+        }
+    }
+    /**
+     *  Handles the show event.
+     *  If the event is not a click event, it will stop the propagation.
+     * @param evt - Mouse event with the click coordinates.
+     */
+    handleShow(evt) {
+        evt.stopPropagation();
+        this.toggle();
+    }
+    /**
+     *  Returns true if the arrow should be shown, false otherwise.
+     * @returns - True if the arrow should be shown, false otherwise.
+     */
+    get canShowArrow() {
+        return !this.floatingOptions.hideArrow || false;
+    }
+    /**
+     *  Returns the placement of the popover.
+     * @returns - The placement of the popover.
+     */
+    get getPlacement() {
+        return this.floatingOptions.placement || 'bottom';
+    }
+    /**
+     *  Returns true if the header slot is present, false otherwise.
+     * @returns - True if the header slot is present, false otherwise.
+     */
+    get hasHeaderSlot() {
+        return this.el.querySelector('[slot="header"]') !== null;
+    }
+    /**
+     *  Returns true if the footer slot is present, false otherwise.
+     * @returns - True if the footer slot is present, false otherwise.
+     */
+    get hasFooterSlot() {
+        return this.el.querySelector('[slot="footer"]') !== null;
+    }
+    disconnectedCallback() {
+        this.listenTarget.removeEventListener('click', (evt) => this.handleShow(evt));
+        this.trigger.removeEventListener('click', (evt) => this.handleShow(evt));
+    }
+    render() {
+        return (h(Host, { key: 'd9bdf356fc8aa99312073be3589cf50f4bd1afbe', class: "popover", style: { width: this.popoverWidth }, popover: "manual", role: "tooltip", "data-placement": this.getPlacement, "data-hidearrow": this.canShowArrow, "aria-hidden": this.isVisible ? 'false' : 'true', onClick: (e) => this.handleContentClick(e), ref: el => (this.floatingContent = el) }, this.header && (h("div", { key: 'a9172eb13620a218c1a37bd52eddaa6f9b53739c', class: "popover-header" }, h("div", { key: '3b8774f0f8f461ce164220d53c48139e95a1b8f5', class: "popover-header__content" }, h("span", { key: '86cc8cedf2c7970834a61c8374fc23d67417c2dd', class: "popover-header__icon" }, h("slot", { key: '1e356d9b87672942ef4d19f33f5de9c707d02cb2', name: "header-icon" })), h("span", { key: 'c014a7a269a4cc79841d4350e7e8efc4fc39cb06', class: "popover-header__title" }, h("slot", { key: '39ce847785bbad57635834c7957146b89245438e', name: "header-title" }))), this.closable && (h("bds-button", { key: 'a54358b74d8d29f5afeaa9f6fe1f07343f6784c6', class: "popover-header__close", size: BUTTON_SIZES.SMALL, onBdsClick: () => this.hide() }, h("em", { key: 'efdca5b8e1f0560a15e063e832f1aeb9c754a820', slot: "icon", class: "bds-icon-close" }))))), this.canShowArrow && (h("div", { key: '16870352c06b06de9b67e542e9e1753c7e3bff66', class: "popover-arrow", part: "arrow", ref: el => (this.arrowElement = el) })), h("div", { key: 'b5dddeeedcc5ba9d107af57a25d9ca350a0621a8', class: "popover-content", tabIndex: -1, part: "popover-content" }, h("slot", { key: '4bfc174186ab356747175464922c0d6b09d6b608' })), this.footer && (h("div", { key: '8476df1ee6751d6cba4cc52efad6675ea74bdc18', class: "popover-footer", onClick: (e) => e.stopPropagation() }, h("slot", { key: 'de60d356d96ae56c8e0a1349f6bafa87700998c6', name: "footer-helper" }), h("slot", { key: '21e59115a077f31b7b05aeea29cd23394642dd4d', name: "footer-button" })))));
+    }
+    static get is() { return "bds-popover"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bds-popover.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bds-popover.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "floatingOptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IPopover['floatingOptions']",
+                    "resolved": "FloatingPopoverProp",
+                    "references": {
+                        "IPopover": {
+                            "location": "import",
+                            "path": "./types/IPopover",
+                            "id": "src/components/overlays/bds-popover/types/IPopover.ts::IPopover",
+                            "referenceLocation": "IPopover"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Override default options for the floating mixin.\nThis can be overridden by passing a different object to the `floatingOptions` prop."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "IPopover['disabled']",
+                    "resolved": "boolean",
+                    "references": {
+                        "IPopover": {
+                            "location": "import",
+                            "path": "./types/IPopover",
+                            "id": "src/components/overlays/bds-popover/types/IPopover.ts::IPopover",
+                            "referenceLocation": "IPopover"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "If true, disables the popover."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "width": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "IPopover['width']",
+                    "resolved": "\"auto\" | \"full\" | number",
+                    "references": {
+                        "IPopover": {
+                            "location": "import",
+                            "path": "./types/IPopover",
+                            "id": "src/components/overlays/bds-popover/types/IPopover.ts::IPopover",
+                            "referenceLocation": "IPopover"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "320"
+                        }],
+                    "text": "Width of the popover content.\n- number: width in pixels (e.g. 320 \u2192 \"320px\")\n- 'full': 100% of the trigger/parent width\n- 'auto': fits the content"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "320"
+            },
+            "header": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "If true, displays the header section with icon and title slots."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header",
+                "defaultValue": "false"
+            },
+            "footer": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "If true, displays the footer section with helper and button slots."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "footer",
+                "defaultValue": "false"
+            },
+            "closable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "If true, displays a close button inside the header. Requires `header` to be true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "closable",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isVisible": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/overlays/bds-popover/constants/Offset.js

@@ -0,0 +1 @@
+export const OFFSET = 11;

package/dist/collection/components/overlays/bds-popover/types/IPopover.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/overlays/bds-popover/types/width.js

@@ -0,0 +1 @@
+export {};