@maggioli-design-system/magma 1.0.3 → 1.0.4

package/dist/cjs/floating-controller-58188f8c.js

@@ -0,0 +1,182 @@
+'use strict';
+
+const floatingUi_dom_esm = require('./floating-ui.dom.esm-ee781097.js');
+const unit = require('./unit-e289e834.js');
+const aria = require('./aria-0b8ae8a3.js');
+
+class FloatingController {
+    constructor(host, arrowEl) {
+        this.arrowInset = (middleware, arrowPosition) => {
+            const { arrow } = middleware;
+            const inset = { bottom: '', left: '', right: '', top: '' };
+            if (arrow === undefined) {
+                return {};
+            }
+            switch (arrowPosition) {
+                case 'bottom':
+                    inset.left = arrow.x !== null ? `${arrow.x}px` : '';
+                    inset.top = '100%';
+                    break;
+                case 'left':
+                    inset.right = '100%';
+                    inset.top = arrow.y !== null ? `${arrow.y}px` : '';
+                    break;
+                case 'right':
+                    inset.left = '100%';
+                    inset.top = arrow.y !== null ? `${arrow.y}px` : '';
+                    break;
+                case 'top':
+                    inset.left = arrow.x !== null ? `${arrow.x}px` : '';
+                    inset.top = '';
+                    break;
+            }
+            return inset;
+        };
+        this.arrowTransform = (arrowPosition) => {
+            let transformProps = this._host.arrow && this._host.visible ? 'scale(1)' : 'scale(0)';
+            switch (arrowPosition) {
+                case 'bottom':
+                    transformProps = `rotate(180deg) ${transformProps} translate(0, -100%)`;
+                    break;
+                case 'left':
+                    transformProps = `rotate(-90deg) ${transformProps} translate(50%, -50%)`;
+                    break;
+                case 'right':
+                    transformProps = `rotate(90deg) ${transformProps} translate(-50%, -50%)`;
+                    break;
+                case 'top':
+                    transformProps = `rotate(0deg) ${transformProps} translate(0, 0)`;
+                    break;
+            }
+            return { transform: transformProps };
+        };
+        this.arrowTransformOrigin = (arrowPosition) => {
+            switch (arrowPosition) {
+                case 'bottom':
+                    return { transformOrigin: 'center top' };
+                case 'left':
+                    return { transformOrigin: 'right center' };
+                case 'right':
+                    return { transformOrigin: 'left center' };
+                case 'top':
+                    return { transformOrigin: 'center bottom' };
+                default:
+                    return { transformOrigin: 'center top' };
+            }
+        };
+        this.calculatePosition = () => {
+            if (!this._caller)
+                return;
+            const middleware = new Array();
+            const config = {};
+            if (this._host.shiftPadding) {
+                config.padding = this._host.shiftPadding;
+            }
+            if (this._host.autoPlacement) {
+                middleware.push(floatingUi_dom_esm.autoPlacement());
+            }
+            if (this._host.offset) {
+                middleware.push(floatingUi_dom_esm.offset(this._host.offset));
+            }
+            if (!this._host.autoPlacement && this._host.flip) {
+                middleware.push(floatingUi_dom_esm.flip(config));
+            }
+            if (this._host.shift) {
+                middleware.push(floatingUi_dom_esm.shift(config));
+            }
+            if (this.arrowEl && this._host.arrow) {
+                middleware.push(floatingUi_dom_esm.arrow({
+                    element: this.arrowEl,
+                    padding: this._host.arrowPadding,
+                }));
+            }
+            floatingUi_dom_esm.computePosition(this._caller, this._host, {
+                middleware,
+                placement: this._host.placement,
+                strategy: this._host.strategy,
+            }).then(({ x, y, placement, middlewareData }) => {
+                Object.assign(this._host.style, {
+                    left: `${x}px`,
+                    top: `${y}px`,
+                });
+                const arrowStyle = {};
+                const arrowPosition = {
+                    top: 'bottom',
+                    right: 'left',
+                    bottom: 'top',
+                    left: 'right',
+                }[placement.split('-')[0]];
+                if (arrowPosition && this.arrowEl) {
+                    Object.assign(arrowStyle, this.arrowTransform(arrowPosition));
+                    Object.assign(arrowStyle, this.arrowInset(middlewareData, arrowPosition));
+                    Object.assign(arrowStyle, this.arrowTransformOrigin(arrowPosition));
+                    Object.assign(this.arrowEl.style, arrowStyle);
+                }
+            });
+        };
+        this._host = host;
+        this.arrowEl = arrowEl;
+    }
+    updateCaller(target) {
+        var _a, _b, _c;
+        // search caller in document or rootNode of host (if target is in shadowDOM)
+        const caller = (_c = (_b = (_a = this._host.parentElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(target)) !== null && _c !== void 0 ? _c : this._host.getRootNode().querySelector(target);
+        if (!caller) {
+            throw Error(`Target not found: ${target}`);
+        }
+        this._caller = caller;
+        aria.setAttributeIfEmpty(this._caller, 'aria-haspopup', 'true');
+        aria.setAttributeIfEmpty(this._caller, 'aria-controls', target);
+        aria.setAttributeIfEmpty(this._host, 'role', 'menu');
+        aria.setAttributeIfEmpty(this._host, 'aria-labelledby', target);
+        return caller;
+    }
+    updatePosition() {
+        if (this.cleanupAutoUpdate)
+            this.cleanupAutoUpdate();
+        this.cleanupAutoUpdate = floatingUi_dom_esm.autoUpdate(this._caller, this._host, this.calculatePosition);
+    }
+    dismiss() {
+        this.cleanupAutoUpdate();
+    }
+}
+class Backdrop {
+    constructor(backdropId) {
+        this.defaultBackdropId = 'mds-backdrop';
+        this.backdropBackgroundVisible = 'rgba(var(--magma-backdrop-color, 0 0 0) / var(--magma-backdrop-opacity, 0.1))';
+        this.backdropBackgroundHidden = 'rgba(var(--magma-backdrop-color, 0 0 0) / 0)';
+        this.backdropId = backdropId !== null && backdropId !== void 0 ? backdropId : this.defaultBackdropId;
+        this.cssBackdropZIndex = `var(--${this.backdropId}-z-index)`;
+        this.cssBackdropDuration = `var(--${this.backdropId}-duration)`;
+    }
+    attachBackdrop() {
+        if (!this.backdropEl) {
+            this.backdropEl = document.createElement('div');
+            this.backdropEl.className = this.backdropId;
+            this.backdropEl.style.inset = '0';
+            this.backdropEl.style.pointerEvents = 'none';
+            this.backdropEl.style.position = 'fixed';
+            this.backdropEl.style.transition = `background-color ${this.cssBackdropDuration} ease-out`;
+            this.backdropEl.style.zIndex = this.cssBackdropZIndex;
+        }
+        this.backdropEl.style.backgroundColor = this.backdropBackgroundHidden;
+        document.body.appendChild(this.backdropEl);
+        clearTimeout(this.backdropTimer);
+        this.backdropTimer = setTimeout(() => {
+            this.backdropEl.style.backgroundColor = this.backdropBackgroundVisible;
+        }, 1);
+    }
+    detachBackdrop() {
+        if (!this.backdropEl) {
+            return;
+        }
+        this.backdropEl.style.backgroundColor = 'transparent';
+        clearTimeout(this.backdropTimer);
+        this.backdropTimer = setTimeout(() => {
+            this.backdropEl.remove();
+        }, unit.cssDurationToMilliseconds(this.cssBackdropDuration));
+    }
+}
+
+exports.Backdrop = Backdrop;
+exports.FloatingController = FloatingController;

package/dist/cjs/{floating-ui.dom.esm-4d912aff.js → floating-ui.dom.esm-ee781097.js}

@@ -1244,7 +1244,8 @@ function isContainingBlock(elementOrCss) {
   const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
-  return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
+  // https://drafts.csswg.org/css-transforms-2/#individual-transforms
+  return ['transform', 'translate', 'scale', 'rotate', 'perspective'].some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
 }
 function getContainingBlock(element) {
   let currentNode = getParentNode(element);