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

package/dist/esm/bds-banner.entry.js

@@ -0,0 +1,128 @@
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-DgFiTd6X.js';
+import { S as STATUS_VARIANT, i as inheritAriaAttributes } from './attributes-B9wshZ_4.js';
+
+/**
+ * Ensure the given component instance has an auto-generated id if one wasn't provided.
+ * Designed to be called from `componentWillLoad` on a Stencil component.
+ */
+function createId(component) {
+    if (!component.idComponent)
+        component.idComponent = `bds-${Math.random().toString(36).substr(2, 9)}`;
+}
+/**
+ * Components can spread the result into their host.
+ */
+function getBaseAttributes(component) {
+    createId(component);
+    return {
+        id: component.idComponent,
+    };
+}
+
+const bdsBannerCss = () => `.bds-banner{position:relative;display:-ms-flexbox;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%;-webkit-transition:all 0.3s ease-out;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:-ms-flexbox;display:flex;-ms-flex-pack:justify;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;-ms-flex-item-align:start;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}`;
+
+const BdsBanner = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.close = createEvent(this, "close");
+        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)));
+    }
+    get el() { return getElement(this); }
+};
+BdsBanner.style = bdsBannerCss();
+
+export { BdsBanner as bds_banner };

package/dist/esm/bds-typography.entry.js

@@ -0,0 +1,165 @@
+import { r as registerInstance, h, a as Host, g as getElement } from './index-DgFiTd6X.js';
+import { a as STATES, i as inheritAriaAttributes } from './attributes-B9wshZ_4.js';
+
+const ALIGNMENT = {
+    START: 'start'};
+
+const SIZES = {
+    XS: 'xs',
+    S: 'sm',
+    M: 'md',
+    L: 'lg',
+    XL: 'xl',
+};
+
+const VARIANT_TYPOGRAPHY = {
+    DISPLAY: 'display',
+    LINK: 'link'};
+const TAG_ELEMENT = {
+    P: 'p',
+    A: 'a'};
+
+/*
+ * LINK consts
+ */
+const FILENAME = 'download';
+/*
+ * Variant map to apply size, state, etc, styles based on variant type
+ */
+const VARIANT_CONFIG = {
+    link: {
+        states: [STATES.DISABLED /* STATES.VISITED, STATES.HOVER, STATES.ACTIVE, STATES.FOCUS */],
+        size: [SIZES.S, SIZES.M],
+    },
+    label: {
+        states: [STATES.DISABLED],
+        isRequired: true,
+        canUseTooltip: true,
+    },
+    heading: { canUseTooltip: true },
+    subheading: { canUseTooltip: true },
+    helper: { states: [STATES.ERROR] },
+    display: { size: [SIZES.XS, SIZES.S, SIZES.M, SIZES.L, SIZES.XL] },
+};
+/*
+ * ATTRIBUTE MAP
+ */
+const getAttributesByTag = (comp, tagName) => {
+    const ATTR_MAP = {
+        a: {
+            href: comp.state !== STATES.DISABLED ? comp.sanitizedHref : null,
+            target: comp.target,
+            download: comp.isDownloadable ? comp.filename : null,
+            rel: comp.target === '_blank' ? 'noopener noreferrer' : undefined,
+        },
+        label: {
+            htmlFor: comp.htmlFor,
+        },
+    };
+    return ATTR_MAP[tagName] || {};
+};
+
+const bdsTypographyCss = () => `.bds-typography{-webkit-box-sizing:border-box;box-sizing:border-box;font-family:var(--boreal-typography-font-family-primary);font-weight:var(--boreal-typography-font-weight-regular)}.bds-typography__required-indicator{color:var(--boreal-icon-danger-base);font-weight:var(--boreal-typography-font-weight-regular)}.bds-typography__info-icon{color:var(--boreal-icon-default-light)}.bds-typography--heading,.bds-typography--subheading{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-3xs)}.bds-typography--label{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-3xs)}.bds-typography--display{display:block}.bds-typography--caption,.bds-typography--helper,.bds-typography--link{display:inline-block}.bds-typography--caption{font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-md);color:var(--boreal-text-default-light)}.bds-typography--helper{font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-sm);color:var(--boreal-text-default-light)}.bds-typography--link{font-size:var(--boreal-typography-font-size-sm);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-md);color:var(--boreal-text-primary-base);text-decoration:none}.bds-typography--link:hover{text-decoration:underline}.bds-typography--link:visited{color:var(--boreal-text-primary-base)}.bds-typography--link:active{color:var(--boreal-text-primary-dark)}.bds-typography--link.bds-typography--size-sm{font-size:var(--boreal-typography-font-size-xs)}.bds-typography--link.bds-typography--size-md{font-size:var(--boreal-typography-font-size-sm)}.bds-typography--code{font-family:var(--boreal-typography-font-family-secondary);font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-regular);color:var(--boreal-text-default);line-height:var(--boreal-typography-line-height-md);overflow-wrap:break-word;background-color:var(--boreal-bg-neutral);padding:var(--boreal-spacing-3xs) var(--boreal-spacing-xs);border-radius:var(--boreal-radius-xs);display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone}.bds-typography--label{font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-md);color:var(--boreal-text-default-darker)}.bds-typography--display{font-weight:var(--boreal-typography-font-weight-regular);color:var(--boreal-text-default)}.bds-typography--display.bds-typography--size-sm{font-size:var(--boreal-typography-font-size-xl);line-height:var(--boreal-typography-line-height-xl)}.bds-typography--display.bds-typography--size-md{font-size:var(--boreal-typography-font-size-2xl);line-height:var(--boreal-typography-line-height-2xl)}.bds-typography--display.bds-typography--size-lg{font-size:var(--boreal-typography-font-size-3xl);line-height:var(--boreal-typography-line-height-3xl);font-weight:var(--boreal-typography-font-weight-light)}.bds-typography--display.bds-typography--size-xl{font-size:var(--boreal-typography-font-size-4xl);line-height:var(--boreal-typography-line-height-4xl);font-weight:var(--boreal-typography-font-weight-light)}.bds-typography--heading{font-size:var(--boreal-typography-font-size-lg);line-height:var(--boreal-typography-line-height-lg);font-weight:var(--boreal-typography-font-weight-regular);color:var(--boreal-text-default)}.bds-typography h1.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-4xl);line-height:var(--boreal-typography-line-height-4xl)}.bds-typography h2.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-3xl);line-height:var(--boreal-typography-line-height-3xl)}.bds-typography h3.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-2xl);line-height:var(--boreal-typography-line-height-2xl)}.bds-typography h4.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-xl);line-height:var(--boreal-typography-line-height-xl)}.bds-typography h5.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-lg);line-height:var(--boreal-typography-line-height-lg)}.bds-typography h6.bds-typography--heading{font-size:var(--boreal-typography-font-size-md);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-md)}.bds-typography--subheading{font-size:var(--boreal-typography-font-size-md);line-height:var(--boreal-typography-line-height-md);font-weight:var(--boreal-typography-font-weight-semibold)}.bds-typography--align-start{text-align:start}.bds-typography--align-center{text-align:center}.bds-typography--align-end{text-align:end}.bds-typography--align-inherit{text-align:inherit}.bds-typography--error{color:var(--boreal-text-danger-base)}.bds-typography--disabled{color:var(--boreal-text-disabled);pointer-events:none;cursor:not-allowed}.bds-typography--disabled .bds-typography__required-indicator{color:var(--boreal-text-danger-light)}.bds-typography--ellipsis{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.bds-typography--ellipsis-multiline{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;width:100%}`;
+
+const BdsTypography = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.inheritedAttributes = {};
+        /** Typography visual variant. */
+        this.variant = VARIANT_TYPOGRAPHY.DISPLAY;
+        /** Typography size token. */
+        this.size = SIZES.M;
+        /** Visual state (if supported by variant). */
+        this.state = STATES.DEFAULT;
+        /** Additional custom CSS class. */
+        this.customClass = '';
+        /** HTML tag used for rendering. */
+        this.element = TAG_ELEMENT.P;
+        /** Text alignment. */
+        this.align = ALIGNMENT.START;
+        /** Enables text ellipsis. */
+        this.ellipsis = false;
+        /** Max lines when ellipsis is enabled. */
+        this.maxLines = 1;
+        /** Tooltip text (variant must support it). */
+        this.tooltipText = '';
+        /** Marks the field as required. */
+        this.isRequired = false;
+        /** For attribute when rendered as a label. */
+        this.htmlFor = undefined;
+        /** Link href when rendered as anchor. */
+        this.href = null;
+        /** Anchor target. */
+        this.target = null;
+        /** Enables download behavior for anchor. */
+        this.isDownloadable = false;
+        /** Suggested download filename. */
+        this.filename = FILENAME;
+        /** Sanitized href for security. */
+        this.sanitizedHref = '';
+    }
+    async updateSanitizedHref() {
+        if (this.getTagName === 'a' && this.href !== null) {
+            const { sanitizeUrl } = await import('./index-noyWJ11s.js').then(function (n) { return n.i; });
+            this.sanitizedHref = sanitizeUrl(this.href);
+        }
+        else
+            this.sanitizedHref = '';
+    }
+    async componentWillLoad() {
+        if (this.getTagName === TAG_ELEMENT.A && this.href !== null)
+            await this.updateSanitizedHref();
+        this.inheritedAttributes = {
+            ...inheritAriaAttributes(this.el),
+        };
+    }
+    get getTagName() {
+        if (this.variant === VARIANT_TYPOGRAPHY.LINK)
+            return TAG_ELEMENT.A;
+        return this.element.toLowerCase();
+    }
+    getVariantConfig() {
+        return VARIANT_CONFIG[this.variant] ?? {};
+    }
+    getAccessibilityTags() {
+        const { isRequired = null } = this.getVariantConfig();
+        const isInteractiveTag = ['a', 'label'].includes(this.getTagName);
+        return {
+            'aria-required': this.isRequired && isRequired,
+            'aria-disabled': this.state === STATES.DISABLED && isInteractiveTag,
+        };
+    }
+    getVariantStateStyles() {
+        const config = this.getVariantConfig();
+        return {
+            [`bds-typography--${this.variant}`]: true,
+            [`bds-typography--align-${this.align}`]: true,
+            [`bds-typography--${this.state}`]: !!(config?.states && config?.states.includes(this.state)),
+            [`bds-typography--size-${this.size}`]: !!(config?.size && config?.size.includes(this.size)),
+            'bds-typography--required': !!(config?.isRequired && this.isRequired),
+            'bds-typography--ellipsis': this.ellipsis && this.maxLines <= 1,
+            'bds-typography--ellipsis-multiline': this.ellipsis && this.maxLines > 1,
+            [this.customClass]: this.customClass !== '',
+        };
+    }
+    render() {
+        const TagName = this.getTagName;
+        const attributes = {
+            ...getAttributesByTag(this, TagName),
+            ...this.inheritedAttributes,
+            ...this.getAccessibilityTags(),
+        };
+        const classes = this.getVariantStateStyles();
+        const { canUseTooltip = null, isRequired = null } = this.getVariantConfig();
+        return (h(Host, { key: '6091692b1cb6bf1d3295f0834c8d25425633d65a', class: "bds-typography" }, h(TagName, { key: '0cc91c35fa1cc36c99101a79fae0c8b5cf44de43', class: classes, style: { webkitLineClamp: this.maxLines }, ...attributes }, h("slot", { key: '973848fba8211cb5ef869e0e48fb1806bd5efdec' }), this.isRequired && isRequired && (h("em", { key: 'dd89574e9dedd55905ae4c7bcd57604f26fbd03b', class: "bds-typography__required-indicator", "aria-hidden": "true" }, "*")), this.tooltipText && canUseTooltip && h("em", { key: '473b0de17bd095b97d54d24d2f3aa75f8a8e4922', class: "bds-typography__info-icon bds-icon-info-circle" }))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "href": [{
+                "updateSanitizedHref": 0
+            }]
+    }; }
+};
+BdsTypography.style = bdsTypographyCss();
+
+export { BdsTypography as bds_typography };

package/dist/esm/boreal-web-components.js

@@ -0,0 +1,42 @@
+import { p as promiseResolve, H, b as bootstrapLazy } from './index-DgFiTd6X.js';
+export { s as setNonce } from './index-DgFiTd6X.js';
+import { g as globalScripts } from './app-globals-DQuL1Twl.js';
+
+/*
+ Stencil Client Patch Browser v4.42.1 | MIT Licensed | https://stenciljs.com
+ */
+
+var patchBrowser = () => {
+  {
+    patchCloneNodeFix(H.prototype);
+  }
+  const importMeta = import.meta.url;
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return promiseResolve(opts);
+};
+var patchCloneNodeFix = (HTMLElementPrototype) => {
+  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;
+  HTMLElementPrototype.cloneNode = function(deep) {
+    if (this.nodeName === "TEMPLATE") {
+      return nativeCloneNodeFn.call(this, deep);
+    }
+    const clonedNode = nativeCloneNodeFn.call(this, false);
+    const srcChildNodes = this.childNodes;
+    if (deep) {
+      for (let i = 0; i < srcChildNodes.length; i++) {
+        if (srcChildNodes[i].nodeType !== 2) {
+          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));
+        }
+      }
+    }
+    return clonedNode;
+  };
+};
+
+patchBrowser().then(async (options) => {
+  await globalScripts();
+  return bootstrapLazy([["bds-banner",[[260,"bds-banner",{"idComponent":[1,"id-component"],"variant":[1],"enableClose":[4,"enable-close"],"isClosing":[32],"isOpen":[32],"closeBanner":[64]}]]],["bds-typography",[[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",[[0,"my-component",{"first":[1],"middle":[1],"last":[1]}]]]], options);
+});