/*!
 * Custom elements for Nanopore-Digital Web applications
 */
/*!
 * getSize v2.0.3
 * measure size of elements
 * MIT license
 */
// get a number from a string, not a percentage
function getStyleSize(value) {
    const num = parseFloat(value);
    // not a percent like '100%', and a number
    const isValid = value?.indexOf('%') == -1 && !isNaN(num);
    return isValid && num;
}
function noop() { }
const logError = typeof console == 'undefined'
    ? noop
    : function (message) {
        console.error(message);
    };
// -------------------------- measurements -------------------------- //
const measurements = [
    'paddingLeft',
    'paddingRight',
    'paddingTop',
    'paddingBottom',
    'marginLeft',
    'marginRight',
    'marginTop',
    'marginBottom',
    'borderLeftWidth',
    'borderRightWidth',
    'borderTopWidth',
    'borderBottomWidth',
];
const measurementsLength = measurements.length;
function getZeroSize() {
    const size = {
        width: 0,
        height: 0,
        innerWidth: 0,
        innerHeight: 0,
        outerWidth: 0,
        outerHeight: 0,
    };
    for (let i = 0; i < measurementsLength; i++) {
        const measurement = measurements[i];
        size[measurement] = 0;
    }
    return size;
}
// -------------------------- getStyle -------------------------- //
/**
 * getStyle, get style of element, check for Firefox bug
 * https://bugzilla.mozilla.org/show_bug.cgi?id=548397
 * @param elem element to get styles for
 * @returns {CSSStyleDeclaration} styles of element
 */
function getStyle(elem) {
    const style = getComputedStyle(elem);
    if (!style) {
        logError('Style returned ' +
            style +
            '. Are you running this code in a hidden iframe on Firefox? ' +
            'See https://bit.ly/getsizebug1');
    }
    return style;
}
// -------------------------- setup -------------------------- //
let isSetup = false;
let isBoxSizeOuter;
/**
 * setup
 * check isBoxSizerOuter
 * do on first getSize() rather than on page load for Firefox bug
 */
function setup() {
    // setup once
    if (isSetup) {
        return;
    }
    isSetup = true;
    // -------------------------- box sizing -------------------------- //
    /**
     * Chrome & Safari measure the outer-width on style.width on border-box elems
     * IE11 & Firefox<29 measures the inner-width
     */
    const div = document.createElement('div');
    div.style.width = '200px';
    div.style.padding = '1px 2px 3px 4px';
    div.style.borderStyle = 'solid';
    div.style.borderWidth = '1px 2px 3px 4px';
    div.style.boxSizing = 'border-box';
    const body = document.body || document.documentElement;
    body.appendChild(div);
    const style = getStyle(div);
    // round value for browser zoom. desandro/masonry#928
    isBoxSizeOuter = Math.round(getStyleSize(style.width)) == 200;
    // @ts-ignore
    getSize.isBoxSizeOuter = isBoxSizeOuter;
    body.removeChild(div);
}
// -------------------------- getSize -------------------------- //
export function getSize(elem) {
    setup();
    // use querySeletor if elem is string
    if (typeof elem == 'string') {
        elem = document.querySelector(elem);
    }
    // do not proceed on non-objects
    if (!elem || typeof elem != 'object' || !elem.nodeType) {
        return;
    }
    const style = getStyle(elem);
    // if hidden, everything is 0
    if (style.display == 'none') {
        return getZeroSize();
    }
    const size = {};
    size.width = elem.offsetWidth;
    size.height = elem.offsetHeight;
    const isBorderBox = (size.isBorderBox = style.boxSizing == 'border-box');
    // get all measurements
    for (let i = 0; i < measurementsLength; i++) {
        const measurement = measurements[i];
        const value = style[measurement];
        const num = parseFloat(value);
        // any 'auto', 'medium' value will be 0
        size[measurement] = !isNaN(num) ? num : 0;
    }
    const paddingWidth = size.paddingLeft + size.paddingRight;
    const paddingHeight = size.paddingTop + size.paddingBottom;
    const marginWidth = size.marginLeft + size.marginRight;
    const marginHeight = size.marginTop + size.marginBottom;
    const borderWidth = size.borderLeftWidth + size.borderRightWidth;
    const borderHeight = size.borderTopWidth + size.borderBottomWidth;
    const isBorderBoxSizeOuter = isBorderBox && isBoxSizeOuter;
    // overwrite width and height if we can get it from style
    const styleWidth = getStyleSize(style.width);
    if (styleWidth !== false) {
        size.width =
            styleWidth +
                // add padding and border unless it's already including it
                (isBorderBoxSizeOuter ? 0 : paddingWidth + borderWidth);
    }
    const styleHeight = getStyleSize(style.height);
    if (styleHeight !== false) {
        size.height =
            styleHeight +
                // add padding and border unless it's already including it
                (isBorderBoxSizeOuter ? 0 : paddingHeight + borderHeight);
    }
    size.innerWidth = size.width - (paddingWidth + borderWidth);
    size.innerHeight = size.height - (paddingHeight + borderHeight);
    size.outerWidth = size.width + marginWidth;
    size.outerHeight = size.height + marginHeight;
    return size;
}
