@telesign/boreal-web-components 0.1.0-alpha.0

package/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var index = require('./index-Cdb66Tqj.js');
+var appGlobals = require('./app-globals-V2Kpy_OQ.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["bds-banner.cjs",[[260,"bds-banner",{"idComponent":[1,"id-component"],"variant":[1],"enableClose":[4,"enable-close"],"isClosing":[32],"isOpen":[32],"closeBanner":[64]}]]],["bds-typography.cjs",[[260,"bds-typography",{"variant":[513],"size":[513],"state":[513],"customClass":[1,"custom-class"],"element":[1],"align":[1],"ellipsis":[4],"maxLines":[2,"max-lines"],"tooltipText":[1,"tooltip-text"],"isRequired":[516,"is-required"],"htmlFor":[1,"html-for"],"href":[1],"target":[1],"isDownloadable":[4,"is-downloadable"],"filename":[1],"sanitizedHref":[32]},null,{"href":[{"updateSanitizedHref":0}]}]]],["my-component.cjs",[[0,"my-component",{"first":[1],"middle":[1],"last":[1]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/cjs/my-component.cjs.entry.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var index = require('./index-Cdb66Tqj.js');
+
+const myComponentCss = () => `:host{display:block}`;
+
+const MyComponent = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * The first name
+         */
+        this.first = '';
+        /**
+         * The middle name
+         */
+        this.middle = '';
+        /**
+         * The last name
+         */
+        this.last = '';
+    }
+    render() {
+        return index.h("div", { key: '2f3775c7b3d8475826a01101110bd2876a57f2cb' }, " Hello, World! I'm Stencil 'Don't call me a framework' JS");
+    }
+};
+MyComponent.style = myComponentCss();
+
+exports.my_component = MyComponent;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,14 @@
+{
+  "entries": [
+    "components/feedback/bds-banner/bds-banner.js",
+    "components/my-component/my-component.js",
+    "components/titles-text/bds-typography/bds-typography.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.42.1",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/feedback/bds-banner/bds-banner.css

@@ -0,0 +1,101 @@
+.bds-banner {
+  position: relative;
+  display: flex;
+  border: var(--boreal-spacing-4xs) solid var(--boreal-stroke-info-base);
+  border-radius: var(--boreal-radius-xs);
+  border-left: 0;
+  font-family: var(--boreal-typography-font-family-primary);
+  height: 100%;
+  transition: all 0.3s ease-out;
+}
+.bds-banner__vertical-line {
+  width: var(--boreal-spacing-2xs);
+  border-top-left-radius: var(--boreal-radius-xs);
+  border-bottom-left-radius: var(--boreal-radius-xs);
+  background-color: var(--boreal-stroke-info-base);
+}
+.bds-banner__container {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  gap: var(--boreal-spacing-xs);
+  padding: var(--boreal-spacing-s);
+}
+.bds-banner__content {
+  width: 100%;
+}
+.bds-banner__title {
+  font-weight: var(--boreal-typography-font-weight-semibold);
+  font-size: var(--boreal-typography-font-size-md);
+  line-height: var(--boreal-typography-line-height-md);
+}
+.bds-banner__body {
+  padding-top: var(--boreal-spacing-2xs);
+  font-size: var(--boreal-typography-font-size-sm);
+  line-height: var(--boreal-typography-line-height-sm);
+}
+.bds-banner__actions {
+  padding-top: var(--boreal-spacing-s);
+  min-height: 0px;
+}
+.bds-banner__actions:empty {
+  display: none;
+}
+.bds-banner__status-icon {
+  font-size: var(--boreal-typography-font-size-md);
+  line-height: var(--boreal-typography-line-height-md);
+  margin-top: var(--boreal-spacing-3xs);
+}
+.bds-banner__close-icon {
+  background: none;
+  border: none;
+  align-self: start;
+  font-size: var(--boreal-typography-font-size-md);
+  line-height: var(--boreal-typography-line-height-md);
+  color: var(--boreal-neutral-base);
+  cursor: pointer;
+}
+.bds-banner--info {
+  border-color: var(--boreal-stroke-info-base);
+  background-color: var(--boreal-ui-info-lighter);
+}
+.bds-banner--info .bds-banner__vertical-line {
+  background-color: var(--boreal-stroke-info-base);
+}
+.bds-banner--info .bds-banner__status-icon {
+  color: var(--boreal-stroke-info-base);
+}
+.bds-banner--success {
+  border-color: var(--boreal-stroke-success-base);
+  background-color: var(--boreal-ui-success-lighter);
+}
+.bds-banner--success .bds-banner__vertical-line {
+  background-color: var(--boreal-stroke-success-base);
+}
+.bds-banner--success .bds-banner__status-icon {
+  color: var(--boreal-stroke-success-base);
+}
+.bds-banner--warning {
+  border-color: var(--boreal-stroke-warning);
+  background-color: var(--boreal-ui-warning-lighter);
+}
+.bds-banner--warning .bds-banner__vertical-line {
+  background-color: var(--boreal-stroke-warning);
+}
+.bds-banner--warning .bds-banner__status-icon {
+  color: var(--boreal-stroke-warning);
+}
+.bds-banner--danger {
+  border-color: var(--boreal-stroke-danger-base);
+  background-color: var(--boreal-ui-danger-lighter);
+}
+.bds-banner--danger .bds-banner__vertical-line {
+  background-color: var(--boreal-stroke-danger-base);
+}
+.bds-banner--danger .bds-banner__status-icon {
+  color: var(--boreal-stroke-danger-base);
+}
+.bds-banner--closing {
+  opacity: 0;
+  height: 0;
+}

package/dist/collection/components/feedback/bds-banner/bds-banner.js

@@ -0,0 +1,266 @@
+import { Host, h } from "@stencil/core";
+import { STATUS_VARIANT } from "../../../types/index";
+import { inheritAriaAttributes } from "../../../utils/a11y/attributes";
+import { getBaseAttributes } from "../../../utils/helpers/common/BaseAttributes";
+/**
+ * Banner component used to display important messages with different status variants.
+ *
+ * @summary Displays a dismissible banner with an icon, title, body content, and optional actions.
+ *
+ * @slot title - Slot for the banner title text.
+ * @slot - Default slot for the main body content of the banner.
+ * @slot actions - Slot for action buttons or links displayed at the end of the banner.
+ *
+ * @attr {"info"|"success"|"warning"|"danger"} variant - Status variant of the banner, affects color and icon. Defaults to "info".
+ * @attr {boolean} enable-close - When true, renders a close button that triggers the close event.
+ * @attr {string} idComponent - Unique identifier for the banner element.
+ *
+ * @property {string} idComponent - Unique identifier for the banner element.
+ * @property {"info"|"success"|"warning"|"danger"} variant - Visual style variant: 'info', 'success', 'warning', or 'danger'. Defaults to "info".
+ * @property {boolean} enableClose - Shows a close button that allows users to dismiss the banner. Defaults to false.
+ *
+ * @fires close - Emitted when the banner is closed via the close button or `closeBanner` method.
+ *
+ * @method closeBanner - Programmatic method to close the banner and emit the `close` event.
+ *
+ */
+export class BdsBanner {
+    constructor() {
+        this.inheritedAttributes = {};
+        /**
+         * Internal state tracking the banner's closing animation.
+         */
+        this.isClosing = false;
+        /**
+         * Controls the visibility of the banner. Set to false to hide the banner.
+         */
+        this.isOpen = true;
+        /**
+         * Unique identifier for the banner element.
+         */
+        this.idComponent = '';
+        /**
+         * Visual style variant: 'info', 'success', 'warning', or 'danger'.
+         * @default "info"
+         */
+        this.variant = STATUS_VARIANT.INFO;
+        /**
+         * Shows a close button that allows users to dismiss the banner.
+         * @default false
+         */
+        this.enableClose = false;
+        this.handleAnimationEnd = () => {
+            if (this.isClosing)
+                requestAnimationFrame(() => {
+                    this.isClosing = false;
+                    this.isOpen = false;
+                });
+        };
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = {
+            ...inheritAriaAttributes(this.el),
+            ...getBaseAttributes(this),
+        };
+    }
+    /**
+     * Programmatic method to close the banner and emit the `close` event
+     */
+    async closeBanner() {
+        this.handleCloseBanner();
+    }
+    handleCloseBanner(e) {
+        if (e !== undefined)
+            e.preventDefault();
+        this.isClosing = true;
+        this.close.emit();
+    }
+    handleEscapeKeyClose(e) {
+        if (!this.enableClose)
+            return;
+        if (e.key === 'Escape')
+            this.handleCloseBanner();
+    }
+    getIconName() {
+        const iconMap = {
+            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',
+        };
+        if (iconMap[this.variant] === undefined)
+            return iconMap['info'];
+        return iconMap[this.variant];
+    }
+    getAttributes() {
+        return {
+            ...this.inheritedAttributes,
+            role: 'alert',
+            'aria-describedby': this.isOpen ? 'bds-banner__content' : null,
+            'aria-live': 'polite',
+            'aria-hidden': `${!this.isOpen}`,
+            tabIndex: this.isOpen ? 0 : -1,
+        };
+    }
+    getStyles() {
+        return {
+            'bds-banner': true,
+            [`bds-banner--${this.variant}`]: true,
+            'bds-banner--closing': this.isClosing,
+        };
+    }
+    renderCloseIcon() {
+        return (
+        // TODO how to pass this inner aria attr from outside?
+        h("button", { role: "close-button", class: "bds-banner__close-icon", "aria-label": "Alert close button", onClick: e => this.handleCloseBanner(e) }, h("em", { class: "bds-icon-close" })));
+    }
+    render() {
+        if (!this.isOpen)
+            return;
+        const closeIcon = this.renderCloseIcon();
+        const classes = this.getStyles();
+        const iconName = this.getIconName();
+        return (h(Host, { class: classes, ...this.getAttributes(), onTransitionEnd: this.handleAnimationEnd, onKeyDown: (e) => this.handleEscapeKeyClose(e) }, h("div", { class: "bds-banner__vertical-line" }), h("div", { class: "bds-banner__container" }, h("div", { class: "bds-banner__status-icon", role: "status", "aria-live": "polite", "aria-label": `status ${this.variant}` }, h("em", { "aria-hidden": "true", class: iconName })), h("div", { class: "bds-banner__content" }, h("div", { class: "bds-banner__title" }, h("slot", { name: "title" })), h("div", { class: "bds-banner__body" }, h("slot", null)), h("div", { class: "bds-banner__actions" }, h("slot", { name: "actions" }))), this.enableClose && closeIcon)));
+    }
+    static get is() { return "bds-banner"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bds-banner.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bds-banner.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "idComponent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Unique identifier for the banner element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "id-component",
+                "defaultValue": "''"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IBanner['variant']",
+                    "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {
+                        "IBanner": {
+                            "location": "import",
+                            "path": "./types/IBanner",
+                            "id": "src/components/feedback/bds-banner/types/IBanner.ts::IBanner",
+                            "referenceLocation": "IBanner"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"info\""
+                        }],
+                    "text": "Visual style variant: 'info', 'success', 'warning', or 'danger'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "STATUS_VARIANT.INFO"
+            },
+            "enableClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "IBanner['enableClose']",
+                    "resolved": "boolean",
+                    "references": {
+                        "IBanner": {
+                            "location": "import",
+                            "path": "./types/IBanner",
+                            "id": "src/components/feedback/bds-banner/types/IBanner.ts::IBanner",
+                            "referenceLocation": "IBanner"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Shows a close button that allows users to dismiss the banner."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-close",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isClosing": {},
+            "isOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "close",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the banner is closed via the close button or handleClose method."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "closeBanner": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatic method to close the banner and emit the `close` event",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/feedback/bds-banner/types/IBanner.js

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

package/dist/collection/components/my-component/my-component.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/collection/components/my-component/my-component.js

@@ -0,0 +1,95 @@
+import { h } from "@stencil/core";
+export class MyComponent {
+    constructor() {
+        /**
+         * The first name
+         */
+        this.first = '';
+        /**
+         * The middle name
+         */
+        this.middle = '';
+        /**
+         * The last name
+         */
+        this.last = '';
+    }
+    render() {
+        return h("div", { key: '2f3775c7b3d8475826a01101110bd2876a57f2cb' }, " Hello, World! I'm Stencil 'Don't call me a framework' JS");
+    }
+    static get is() { return "my-component"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["my-component.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["my-component.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "first": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The first name"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "first",
+                "defaultValue": "''"
+            },
+            "middle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The middle name"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "middle",
+                "defaultValue": "''"
+            },
+            "last": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The last name"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "last",
+                "defaultValue": "''"
+            }
+        };
+    }
+}