adp-web-components 0.3.18 → 0.3.19

package/dist/cjs/triangle-alert-CTvU1eGY.js

@@ -0,0 +1,248 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+'use strict';
+
+var index = require('./index-BdHAYIvO.js');
+var cn = require('./cn-BHnqYtun.js');
+
+const eyeSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIgogICAgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWV5ZSI+CiAgICA8cGF0aCBkPSJNMi4wNjIgMTIuMzQ4YTEgMSAwIDAgMSAwLS42OTYgMTAuNzUgMTAuNzUgMCAwIDEgMTkuODc2IDAgMSAxIDAgMCAxIDAgLjY5NiAxMC43NSAxMC43NSAwIDAgMS0xOS44NzYgMCIgLz4KICAgIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiIC8+Cjwvc3ZnPg==';
+
+const ImageViewer = ({ expandedImage, style = {}, imageStyle = {}, closeImageViewer }) => {
+    return (index.h("div", null, index.h("div", { onClick: closeImageViewer, class: cn.cn('image-viewer-overlay', { active: expandedImage }), style: Object.assign({ backdropFilter: expandedImage ? 'blur(3px)' : 'blur(0px)' }, style) }, index.h("button", { class: "image-viewer-close-btn" }, index.h("div", { class: "image-viewer-close-line first" }), index.h("div", { class: "image-viewer-close-line second" }))), index.h("img", { style: imageStyle, alt: "", class: "image-viewer-expanded-image" })));
+};
+
+let closeImageListener;
+function openImageViewer(target, imageSrc) {
+    if (this.expandedImage === imageSrc)
+        return;
+    this.originalImage = target;
+    const expandedImageRef = this.el.shadowRoot.querySelector('.image-viewer-expanded-image');
+    expandedImageRef.src = target.src;
+    document.removeEventListener('keydown', closeImageListener);
+    closeImageListener = () => closeImageViewer.bind(this)();
+    document.addEventListener('keydown', closeImageListener);
+    const rect = target.getBoundingClientRect();
+    document.body.style.overflow = 'hidden';
+    Object.assign(expandedImageRef.style, {
+        top: `${rect.top}px`,
+        pointerEvents: 'auto',
+        left: `${rect.left}px`,
+        transitionDuration: '0s',
+        width: `${rect.width}px`,
+        height: `${rect.height}px`,
+    });
+    setTimeout(() => {
+        const naturalWidth = target.naturalWidth;
+        const naturalHeight = target.naturalHeight;
+        const maxWidth = window.innerWidth - 160;
+        const maxHeight = window.innerHeight - 32;
+        const aspectRatio = naturalWidth / naturalHeight;
+        let width, height;
+        if (maxWidth / aspectRatio <= maxHeight) {
+            width = maxWidth;
+            height = maxWidth / aspectRatio;
+        }
+        else {
+            height = maxHeight;
+            width = maxHeight * aspectRatio;
+        }
+        expandedImageRef.style.transitionDuration = '0.3s';
+        Object.assign(expandedImageRef.style, {
+            opacity: '1',
+            width: `${width}px`,
+            height: `${height}px`,
+            top: `${(window.innerHeight - height) / 2}px`,
+            left: `${(window.innerWidth - width) / 2}px`,
+        });
+        this.expandedImage = imageSrc;
+    }, 200);
+}
+function closeImageViewer(event) {
+    event === null || event === void 0 ? void 0 : event.preventDefault();
+    if (event && event.key !== 'Escape')
+        return;
+    document.removeEventListener('keydown', closeImageListener);
+    const expandedImageRef = this.el.shadowRoot.querySelector('.image-viewer-expanded-image');
+    const rect = this.originalImage.getBoundingClientRect();
+    Object.assign(expandedImageRef.style, {
+        top: `${rect.top}px`,
+        pointerEvents: 'none',
+        left: `${rect.left}px`,
+        width: `${rect.width}px`,
+        height: `${rect.height}px`,
+        transitionDuration: '0.3s',
+    });
+    setTimeout(() => {
+        expandedImageRef.src = '';
+        expandedImageRef.style.opacity = '0';
+        expandedImageRef.style.transitionDuration = '0s';
+    }, 300);
+    document.body.style.overflow = '';
+    this.expandedImage = null;
+}
+
+/**
+ * Getting an overlay out of whatever container the host page put this component in.
+ *
+ * These components are published to unknown hosts, so an overlay can end up nested in an animated
+ * modal, a slide-up footer, an accordion mid-transition or a virtualised list. Any ancestor with a
+ * `transform`, `filter`, `backdrop-filter`, `perspective`, `contain` or a `will-change` naming one
+ * of them becomes the containing block for `position: fixed`, and the overlay is laid out and
+ * clipped inside that ancestor instead of against the viewport.
+ *
+ * The browser's top layer is the only way out that does not move the element: it paints above every
+ * stacking context, is clipped by no ancestor, and ignores caging ancestors entirely — while the
+ * element stays in its shadow root, so scoped styles, refs and measurements keep working.
+ *
+ * The two flavours are not interchangeable:
+ *
+ *  - `modal` (dialog.showModal) inerts the rest of the page. Right for a claim form, fatal for a
+ *    hover card — it would make every other card unhoverable.
+ *  - `popover` (popover="manual" + showPopover) is non-modal, so the page stays interactive.
+ *
+ * Promotion is not free: the top layer cannot be overridden by a host's z-index, so a host can no
+ * longer place its own toast or nav above us. A modal should outrank those anyway, so it always
+ * promotes. A hover card should not, so it promotes only when staying put would actually clip it.
+ */
+var _a, _b;
+const cagingWillChange = /\b(transform|perspective|filter|backdrop-filter|contain)\b/;
+const cagingContain = /\b(paint|layout|strict|content)\b/;
+const isCagingStyle = (style) => {
+    if (!style)
+        return false;
+    if (style.transform && style.transform !== 'none')
+        return true;
+    if (style.perspective && style.perspective !== 'none')
+        return true;
+    if (style.filter && style.filter !== 'none')
+        return true;
+    const backdropFilter = style.backdropFilter || style.webkitBackdropFilter;
+    if (backdropFilter && backdropFilter !== 'none')
+        return true;
+    if (style.contain && cagingContain.test(style.contain))
+        return true;
+    if (style.willChange && cagingWillChange.test(style.willChange))
+        return true;
+    return false;
+};
+/**
+ * Walks up from the element, stepping out of every shadow root on the way, looking for an ancestor
+ * that would become the containing block for a `position: fixed` child.
+ */
+const isCaged = (element) => {
+    var _a, _b;
+    if (!element || typeof getComputedStyle !== 'function')
+        return false;
+    let current = element.parentElement;
+    let root = (_a = element.getRootNode) === null || _a === void 0 ? void 0 : _a.call(element);
+    while (true) {
+        if (!current) {
+            // Out of parents: hop through the shadow boundary and keep going up the host's tree.
+            if (!(root instanceof ShadowRoot))
+                return false;
+            current = root.host;
+            root = (_b = current === null || current === void 0 ? void 0 : current.getRootNode) === null || _b === void 0 ? void 0 : _b.call(current);
+            if (!current)
+                return false;
+        }
+        if (isCagingStyle(getComputedStyle(current)))
+            return true;
+        current = current.parentElement;
+    }
+};
+const supportsModalDialog = typeof HTMLDialogElement !== 'undefined' && typeof ((_a = HTMLDialogElement.prototype) === null || _a === void 0 ? void 0 : _a.showModal) === 'function';
+const supportsPopover = typeof HTMLElement !== 'undefined' && typeof ((_b = HTMLElement.prototype) === null || _b === void 0 ? void 0 : _b.showPopover) === 'function';
+/**
+ * Shows a modal overlay in the top layer, falling back to the `open` attribute where <dialog> is
+ * unimplemented — WebKit only shipped it in 15.4, which on iOS means Safari, every WKWebView and
+ * every installed PWA on the device. There the overlay renders in place exactly as it did before
+ * the top layer existed: correct, just clippable.
+ *
+ * Returns whether the top layer was actually used, so callers can supply what it would have given
+ * them for free (page inerting, Escape) on the path where it did not.
+ */
+const openModalOverlay = (dialog) => {
+    if (!dialog || dialog.open)
+        return supportsModalDialog;
+    if (supportsModalDialog) {
+        dialog.showModal();
+        return true;
+    }
+    dialog.setAttribute('open', '');
+    return false;
+};
+const closeModalOverlay = (dialog) => {
+    if (!dialog)
+        return;
+    if (supportsModalDialog && dialog.open)
+        dialog.close();
+    else
+        dialog.removeAttribute('open');
+};
+/**
+ * Promotes a non-modal overlay, but only when an ancestor would otherwise cage it — so in the
+ * ordinary case the host keeps the ability to stack its own UI above ours.
+ *
+ * The `popover` attribute is added here rather than in markup on purpose: it carries
+ * `[popover]:not(:popover-open) { display: none }`, which would hide an overlay that never gets
+ * promoted, and a set of UA box styles that only need overriding while it is applied.
+ */
+const promoteOverlayIfCaged = (element) => {
+    if (!element || !supportsPopover || element.hasAttribute('popover'))
+        return false;
+    if (!isCaged(element))
+        return false;
+    element.setAttribute('popover', 'manual');
+    try {
+        element.showPopover();
+        return true;
+    }
+    catch (_a) {
+        // Not connected, or already shown by something else — leave it laid out normally.
+        element.removeAttribute('popover');
+        return false;
+    }
+};
+const demoteOverlay = (element) => {
+    if (!element || !element.hasAttribute('popover'))
+        return;
+    try {
+        element.hidePopover();
+    }
+    catch (_a) {
+        /* already hidden */
+    }
+    element.removeAttribute('popover');
+};
+/**
+ * Escape handling for the fallback path only. A modal dialog reports Escape as a `cancel` event;
+ * without `showModal` there is no such event, so the key has to be watched directly.
+ *
+ * Capture, deliberately: an overlay that stacks something of its own on top (the claim form's image
+ * viewer) listens on `document`, and a bubble-phase listener on `window` would run *after* that one
+ * had already dismissed it and cleared the state this handler checks — closing both at once.
+ * Capture at `window` runs first, so the inner overlay still owns the key.
+ */
+const bindEscapeFallback = (handler) => {
+    const listener = (event) => {
+        if (event.key === 'Escape')
+            handler(event);
+    };
+    window.addEventListener('keydown', listener, true);
+    return () => window.removeEventListener('keydown', listener, true);
+};
+
+const TriangleAlertIcon = props => (index.h("svg", Object.assign({ fill: "none" }, props, { "stroke-width": "2", viewBox: "0 0 24 24", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", xmlns: "http://www.w3.org/2000/svg" }), index.h("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }), index.h("path", { d: "M12 9v4" }), index.h("path", { d: "M12 17h.01" })));
+
+exports.ImageViewer = ImageViewer;
+exports.TriangleAlertIcon = TriangleAlertIcon;
+exports.bindEscapeFallback = bindEscapeFallback;
+exports.closeImageViewer = closeImageViewer;
+exports.closeModalOverlay = closeModalOverlay;
+exports.demoteOverlay = demoteOverlay;
+exports.eyeSvg = eyeSvg;
+exports.openImageViewer = openImageViewer;
+exports.openModalOverlay = openModalOverlay;
+exports.promoteOverlayIfCaged = promoteOverlayIfCaged;