@getflip/swirl-components 0.0.0-new-shell-20231128124118

package/dist/components/swirl-text2.js

@@ -0,0 +1,1006 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { a as createCommonjsModule, b as commonjsGlobal, c as classnames } from './index2.js';
+
+var balancetext = createCommonjsModule(function (module) {
+/*
+ * Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License. *
+ */
+/**
+ * balancetext.js
+ *
+ * Author: Randy Edmunds
+ */
+
+/* global define, module */
+
+/*
+ * Copyright (c) 2007-2009 unscriptable.com and John M. Hann
+ *
+ * Permission is hereby granted, free of charge, to any person
+ * obtaining a copy of this software and associated documentation
+ * files (the “Software”), to deal in the Software without
+ * restriction, including without limitation the rights to use,
+ * copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the
+ * Software is furnished to do so, subject to the following
+ * conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+ * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+ * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+ * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+ * OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * Except as contained in this notice, the name(s) of the above
+ * copyright holders (unscriptable.com and John M. Hann) shall not be
+ * used in advertising or otherwise to promote the sale, use or other
+ * dealings in this Software without prior written authorization.
+ *
+ * http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
+ *
+ * Tested to work on (lowest browser):
+ * - Sarari 4
+ * - Chrome 16
+ * - Firefox 10
+ * - IE 9
+ * - Edge 13
+ */
+
+(function (root, factory) {
+    if (module.exports) {
+        module.exports = factory();
+    } else {
+        root.balanceText = factory();
+    }
+}(commonjsGlobal, () => {
+    /**
+     * Line breaking global vars
+     */
+    let breakMatches, wsnwMatches, wsnwOffset;
+
+    /**
+     * Selectors and elements to watch;
+     * calling $.balanceText(elements) adds "elements" to this list.
+     */
+    const watching = {
+        sel: [], // default class to watch
+        el: [],
+    };
+
+    /**
+     * Have handlers been initialized?
+     */
+    let handlersInitialized = false;
+
+    /**
+     * Is this a polyfill?
+     */
+    let polyfilled = false;
+
+
+    /**
+     * Do nothing
+     */
+    function noop() { }
+
+    /**
+     * Loop that works with array-likes
+     * @param {Array-like} elements - List of elements to run a function on
+     * @param {Function}   callback - The function to call on each supplied element
+     */
+    function forEach(elements, callback) {
+        Array.prototype.forEach.call(elements, callback);
+    }
+
+    /**
+     * Polyfill for $(document).ready()
+     *
+     * @param {Function} fn - The function to execute when the document is ready
+     */
+    function ready(fn) {
+        if (document.readyState !== "loading") {
+            fn();
+        } else if (document.addEventListener) {
+            document.addEventListener("DOMContentLoaded", fn);
+        } else {
+            document.attachEvent("onreadystatechange", () => {
+                if (document.readyState !== "loading") {
+                    fn();
+                }
+            });
+        }
+    }
+
+    /**
+     * Debounces a function over a threshold
+     *
+     * @param {Function} func      - The function to debounce
+     * @param {number}   threshold - time in ms
+     * @param {boolean}  execAsap  - when true, execute immediately
+     * @param args
+     * @return {Function} Debounced function
+     */
+    function debounce(func, threshold, execAsap, ...args) {
+        let timeout;
+
+        return function () {
+            const obj = this;
+
+            function delayed() {
+                if (!execAsap) {
+                    func.apply(obj, args);
+                }
+                timeout = null;
+            }
+
+            if (timeout) {
+                clearTimeout(timeout);
+            } else if (execAsap) {
+                func.apply(obj, args);
+            }
+            timeout = setTimeout(delayed, threshold || 100);
+        };
+    }
+
+    /**
+     * Determine whether the document supports TextWrap
+     * @return {boolean}
+     */
+    function hasTextWrap() {
+        if (typeof window === "undefined") {
+            return false;
+        }
+        const { style } = document.documentElement;
+        return style.textWrap || style.WebkitTextWrap || style.MozTextWrap || style.MsTextWrap;
+    }
+
+    /**
+     * Object for tracking next whitespace params
+     */
+    // eslint-disable-next-line camelcase
+    function NextWS_params() {
+        this.reset();
+    }
+
+    NextWS_params.prototype.reset = function () {
+        this.index = 0;
+        this.width = 0;
+    };
+
+    /**
+     * Check if index is contained in previously calculated list of white-space:nowrap ranges
+     *
+     * @param {number} index - the index of the character to check
+     * @return {boolean}
+     */
+    function isWhiteSpaceNoWrap(index) {
+        // Is index inside 1 of the ranges?
+        // start and end are breakable, but not inside range
+        return wsnwMatches.some(range => (range.start < index && index < range.end));
+    }
+
+    /**
+     * Recursively calculate white-space:nowrap offsets for line.
+     *
+     * @param {Node}    el         - the element to act on
+     * @param {boolean} includeTag - include length of tag itself
+     */
+    function recursiveCalcNoWrapOffsetsForLine(el, includeTag) {
+        if (el.nodeType === el.ELEMENT_NODE) {
+            // Found an embedded tag
+            const style = window.getComputedStyle(el);
+            if (style.whiteSpace === "nowrap") {
+                // Tag with white-space:nowrap - add match, skip children
+                const len = el.outerHTML.length;
+                wsnwMatches.push({ start: wsnwOffset, end: wsnwOffset + len });
+                wsnwOffset += len;
+            } else {
+                // Tag without white-space:nowrap - recursively check children of tag
+                forEach(el.childNodes, (child) => {
+                    recursiveCalcNoWrapOffsetsForLine(child, true);
+                });
+                if (includeTag) {
+                    // Length of opening tag, attributes, and closing tag
+                    wsnwOffset += (el.outerHTML.length - el.innerHTML.length);
+                }
+            }
+        } else if (el.nodeType === el.COMMENT_NODE) {
+            wsnwOffset += el.length + 7; // delimiter: <!-- -->
+        } else if (el.nodeType === el.PROCESSING_INSTRUCTION_NODE) {
+            wsnwOffset += el.length + 2; // delimiter: < >
+        } else {
+            // Text node: add length
+            wsnwOffset += el.length;
+        }
+    }
+
+    /**
+     * Calculate white-space:nowrap offsets for line.
+     *
+     * @param {Node}    el             - the element to act on
+     * @param {string}  oldWS          - "old" whitespace setting for temporarily resetting
+     * @param {number}  lineCharOffset - char offset of current line from start of text
+     */
+    function calcNoWrapOffsetsForLine(el, oldWS, lineCharOffset) {
+        // For first line (lineCharOffset === 0), calculate start and end offsets for each
+        // white-space:nowrap element in the line.
+        if (lineCharOffset === 0) {
+            // Reset whiteSpace setting when breakMatches is being calculated
+            // so white-space:nowrap can be detected in text
+            el.style.whiteSpace = oldWS;
+
+            wsnwOffset = 0;
+            wsnwMatches = [];
+            recursiveCalcNoWrapOffsetsForLine(el, false);
+
+            // Restore temporary whitespace setting to recalc width
+            el.style.whiteSpace = "nowrap";
+        } else {
+            // For all other lines, update the offsets for current line
+            // 1. Ignore matches less than offset
+            // 2. Subtract offset from remaining matches
+            const newMatches = [];
+            wsnwMatches.forEach((match) => {
+                if (match.start > lineCharOffset) {
+                    newMatches.push({ start: match.start - lineCharOffset, end: match.end - lineCharOffset });
+                }
+            });
+            wsnwMatches = newMatches;
+        }
+    }
+
+    /**
+     * Strip balance-text tags from an element inserted in previous run
+     *
+     * @param {Node} el - the element to act on
+     */
+    function removeTags(el) {
+        // Remove soft-hyphen breaks
+        let brs = el.querySelectorAll('br[data-owner="balance-text-hyphen"]');
+        forEach(brs, (br) => {
+            br.outerHTML = "";
+        });
+
+        // Replace other breaks with whitespace
+        brs = el.querySelectorAll('br[data-owner="balance-text"]');
+        forEach(brs, (br) => {
+            br.outerHTML = " ";
+        });
+
+        // Restore hyphens inserted for soft-hyphens
+        let spans = el.querySelectorAll('span[data-owner="balance-text-softhyphen"]');
+        if (spans.length > 0) {
+            forEach(spans, (span) => {
+                const textNode = document.createTextNode("\u00ad");
+                span.parentNode.insertBefore(textNode, span);
+                span.parentNode.removeChild(span);
+            });
+        }
+
+        // Remove spans inserted for justified text
+        spans = el.querySelectorAll('span[data-owner="balance-text-justify"]');
+        if (spans.length > 0) {
+            let txt = "";
+            forEach(spans, (span) => {
+                txt += span.textContent;
+                span.parentNode.removeChild(span);
+            });
+            el.innerHTML = txt;
+        }
+    }
+
+    /**
+     * Checks to see if we should justify the balanced text with the
+     * element based on the textAlign property in the computed CSS
+     *
+     * @param {Node} el - element to check
+     * @return {boolean}
+     */
+    const isJustified = function (el) {
+        const style = el.currentStyle || window.getComputedStyle(el, null);
+        return (style.textAlign === "justify");
+    };
+
+    /**
+     * Add whitespace after words in text to justify the string to
+     * the specified size.
+     * @param {Node}    el       - the element to justify
+     * @param {string}  txt      - text string
+     * @param {number}  conWidth - container width
+     * @return {string} Justified text
+     */
+    function justify(el, txt, conWidth) {
+        txt = txt.trim();
+        const words = txt.split(" ").length;
+        txt = `${txt} `;
+
+        // if we don't have at least 2 words, no need to justify.
+        if (words < 2) {
+            return txt;
+        }
+
+        // Find width of text in the DOM
+        const tmp = document.createElement("span");
+        tmp.innerHTML = txt;
+        el.appendChild(tmp);
+        const size = tmp.offsetWidth;
+        tmp.parentNode.removeChild(tmp);
+
+        // Figure out our word spacing and return the element
+        const wordSpacing = Math.floor((conWidth - size) / (words - 1));
+        tmp.style.wordSpacing = `${wordSpacing}px`;
+        tmp.setAttribute("data-owner", "balance-text-justify");
+
+        const div = document.createElement("div");
+        div.appendChild(tmp);
+        return div.innerHTML;
+    }
+
+    /**
+     * Returns true iff char at index is a break char outside of HTML < > tags.
+     * Break char can be: whitespace (except non-breaking-space: u00a0),
+     * hypen, emdash (u2014), endash (u2013), or soft-hyphen (u00ad).
+     *
+     * @param {string} txt   - the text to check
+     * @param {number} index - the index of the character to check
+     * @return {boolean}
+     */
+    function isBreakChar(txt, index) {
+        const re = /([^\S\u00a0]|-|\u2014|\u2013|\u00ad)(?![^<]*>)/g;
+        let match;
+
+        if (!breakMatches) {
+            // Only calc break matches once per line
+            breakMatches = [];
+            match = re.exec(txt);
+            while (match !== null) {
+                if (!isWhiteSpaceNoWrap(match.index)) {
+                    breakMatches.push(match.index);
+                }
+                match = re.exec(txt);
+            }
+        }
+
+        return breakMatches.indexOf(index) !== -1;
+    }
+
+    /**
+     * In the current implementation, an index is a break
+     * opportunity in txt iff it is:
+     * - 0 or txt.length
+     * - index of a non-whitespace char immediately preceded by a
+     *   whitespace, hyphen, soft-hyphen, em-dash, or en-dash char.
+     *
+     * Thus, it doesn't honour "white-space" or any other Unicode
+     * line-breaking classes.)
+     *
+     * @precondition 0 <= index && index <= txt.length
+     *
+     * @param {string} txt   - the text to check
+     * @param {number} index - the index to check
+     * @return {boolean}
+     */
+    function isBreakOpportunity(txt, index) {
+        return ((index === 0) || (index === txt.length) ||
+                (isBreakChar(txt, index - 1) && !isBreakChar(txt, index)));
+    }
+
+    /**
+     * Finds the first break opportunity (@see isBreakOpportunity)
+     * in txt that's both after-or-equal-to index c in the direction dir
+     * and resulting in line width equal to or past clamp(desWidth,
+     * 0, conWidth) in direction dir.  Sets ret.index and ret.width
+     * to the corresponding index and line width (from the start of
+     * txt to ret.index).
+     *
+     * @param {Node}    el       - element
+     * @param {string}  txt      - text string
+     * @param {number}  conWidth - container width
+     * @param {number}  desWidth - desired width
+     * @param {number}  dir      - direction (-1 or +1)
+     * @param {number}  c        - char index (0 <= c && c <= txt.length)
+     * @param {Object}  ret      - return {index: {number}, width: {number}} of previous/next break
+     */
+    function findBreakOpportunity(el, txt, conWidth, desWidth, dir, c, ret) {
+        let w;
+
+        if (txt && typeof txt === "string") {
+            for (;;) {
+                while (!isBreakOpportunity(txt, c)) {
+                    c += dir;
+                }
+
+                el.innerHTML = txt.substr(0, c);
+                w = el.offsetWidth;
+
+                if (dir < 0) {
+                    if ((w <= desWidth) || (w <= 0) || (c === 0)) {
+                        break;
+                    }
+                } else if ((desWidth <= w) || (conWidth <= w) || (c === txt.length)) {
+                    break;
+                }
+
+                c += dir;
+            }
+        }
+        ret.index = c;
+        ret.width = w;
+    }
+
+    /**
+     * Detects the width of a non-breaking space character, given the height of
+     * the element with no-wrap applied.
+     *
+     * @param {Node}   el - element
+     * @param {number} h  - height
+     * @return {number}
+     */
+    function getSpaceWidth(el, h) {
+        const container = document.createElement("div");
+
+        container.style.display = "block";
+        container.style.position = "absolute";
+        container.style.bottom = 0;
+        container.style.right = 0;
+        container.style.width = 0;
+        container.style.height = 0;
+        container.style.margin = 0;
+        container.style.padding = 0;
+        container.style.visibility = "hidden";
+        container.style.overflow = "hidden";
+
+        const space = document.createElement("span");
+
+        space.style.fontSize = "2000px";
+        space.innerHTML = "&nbsp;";
+
+        container.appendChild(space);
+
+        el.appendChild(container);
+
+        const dims = space.getBoundingClientRect();
+        container.parentNode.removeChild(container);
+
+        const spaceRatio = dims.height / dims.width;
+
+        return (h / spaceRatio);
+    }
+
+    /**
+     * Get a list of elements regardless of input
+     *
+     * @param {string|Node|Array-like} elements - The selector to query, one or more elements
+     * @return {Array<{Node}>}
+     */
+    function getElementsList(elements) {
+        if (!elements) {
+            return [];
+        }
+
+        // is selector
+        if (typeof elements === "string") {
+            return document.querySelectorAll(elements);
+        }
+
+        // is single element
+        if (elements.tagName && elements.querySelectorAll) {
+            return [elements];
+        }
+
+        return elements;
+    }
+
+    /**
+     *  When a browser has native support for the text-wrap property,
+     * the text balanceText plugin will let the browser handle it natively,
+     * otherwise it will apply its own text balancing code.
+     *
+     * @param {string|Node|Array-like} elements - the list of elements to balance
+     */
+    function balanceText(elements) {
+        forEach(getElementsList(elements), (el) => {
+            // In a lower level language, this algorithm takes time
+            // comparable to normal text layout other than the fact
+            // that we do two passes instead of one, so we should
+            // be able to do without this limit.
+            const maxTextWidth = 5000;
+
+            // strip balance-text generated tags
+            removeTags(el);
+
+            // save settings
+            const oldWS = el.style.whiteSpace;
+            const oldFloat = el.style.float;
+            const oldDisplay = el.style.display;
+            const oldPosition = el.style.position;
+            const oldLH = el.style.lineHeight;
+
+            // remove line height before measuring container size
+            el.style.lineHeight = "normal";
+
+            const containerWidth = el.offsetWidth;
+            const containerHeight = el.offsetHeight;
+
+            // temporary settings
+            el.style.whiteSpace = "nowrap";
+            el.style.float = "none";
+            el.style.display = "inline";
+            el.style.position = "static";
+
+            let nowrapWidth = el.offsetWidth;
+            const nowrapHeight = el.offsetHeight;
+
+            // An estimate of the average line width reduction due
+            // to trimming trailing space that we expect over all
+            // lines other than the last.
+            const spaceWidth = ((oldWS === "pre-wrap") ? 0 : getSpaceWidth(el, nowrapHeight));
+
+            if (containerWidth > 0 &&               // prevent divide by zero
+                    nowrapWidth > containerWidth && // text is more than 1 line
+                    nowrapWidth < maxTextWidth) {   // text is less than arbitrary limit (make this a param?)
+                let remainingText = el.innerHTML;
+                let newText = "";
+                let lineText = "";
+                const shouldJustify = isJustified(el);
+                const totLines = Math.round(containerHeight / nowrapHeight);
+                let remLines = totLines;
+                let lineCharOffset = 0;
+
+                // loop vars
+                let desiredWidth, guessIndex, le, ge, splitIndex, isHyphen, isSoftHyphen;
+
+                // Determine where to break:
+                while (remLines > 1) {
+                    // clear whitespace match cache for each line
+                    breakMatches = null;
+
+                    // Must calc white-space:nowrap offsets before first call to findBreakOpportunity()
+                    calcNoWrapOffsetsForLine(el, oldWS, lineCharOffset);
+
+                    desiredWidth = Math.round((nowrapWidth + spaceWidth) / remLines - spaceWidth);
+
+                    // Guessed char index
+                    guessIndex = Math.round((remainingText.length + 1) / remLines) - 1;
+
+                    le = new NextWS_params();
+
+                    // Find a breaking space somewhere before (or equal to) desired width,
+                    // not necessarily the closest to the desired width.
+                    findBreakOpportunity(el, remainingText, containerWidth, desiredWidth, -1, guessIndex, le);
+
+                    // Find first breaking char after (or equal to) desired width.
+                    ge = new NextWS_params();
+                    guessIndex = le.index;
+                    findBreakOpportunity(el, remainingText, containerWidth, desiredWidth, +1, guessIndex, ge);
+
+                    // Find first breaking char before (or equal to) desired width.
+                    le.reset();
+                    guessIndex = ge.index;
+                    findBreakOpportunity(el, remainingText, containerWidth, desiredWidth, -1, guessIndex, le);
+
+                    // Find closest string to desired length
+                    if (le.index === 0) {
+                        splitIndex = ge.index;
+                    } else if ((containerWidth < ge.width) || (le.index === ge.index)) {
+                        splitIndex = le.index;
+                    } else {
+                        splitIndex = ((Math.abs(desiredWidth - le.width) < Math.abs(ge.width - desiredWidth))
+                            ? le.index
+                            : ge.index);
+                    }
+
+                    // Break string
+                    lineText = remainingText.substr(0, splitIndex).replace(/\s$/, "");
+
+                    isSoftHyphen = Boolean(lineText.match(/\u00ad$/));
+                    if (isSoftHyphen) {
+                        // Replace soft-hyphen causing break with explicit hyphen
+                        lineText = lineText.replace(/\u00ad$/, '<span data-owner="balance-text-softhyphen">-</span>');
+                    }
+
+                    if (shouldJustify) {
+                        newText += justify(el, lineText, containerWidth);
+                    } else {
+                        newText += lineText;
+                        isHyphen = isSoftHyphen || Boolean(lineText.match(/(-|\u2014|\u2013)$/));
+                        newText += isHyphen ? '<br data-owner="balance-text-hyphen" />'
+                            : '<br data-owner="balance-text" aria-hidden="true" />';
+                    }
+                    remainingText = remainingText.substr(splitIndex);
+                    lineCharOffset = splitIndex;
+
+                    // update counters
+                    remLines--;
+                    el.innerHTML = remainingText;
+                    nowrapWidth = el.offsetWidth;
+                }
+
+                if (shouldJustify) {
+                    el.innerHTML = newText + justify(el, remainingText, containerWidth);
+                } else {
+                    el.innerHTML = newText + remainingText;
+                }
+            }
+
+            // restore settings
+            el.style.whiteSpace = oldWS;
+            el.style.float = oldFloat;
+            el.style.display = oldDisplay;
+            el.style.position = oldPosition;
+            el.style.lineHeight = oldLH;
+        });
+    }
+
+    /**
+     * Call the balanceText plugin on elements that it's watching.
+     */
+    function updateWatched() {
+        const selectors = watching.sel.join(",");
+        const selectedElements = getElementsList(selectors);
+        const elements = Array.prototype.concat.apply(watching.el, selectedElements);
+        balanceText(elements);
+    }
+
+    /**
+     * Initialize the events for which to re-apply BalanceText.  They are:
+     * - Document ready
+     * - Document full load
+     * - Window resize
+     */
+    function initHandlers() {
+        if (handlersInitialized) {
+            return;
+        }
+
+        // Apply on DOM ready
+        ready(updateWatched);
+
+        // Reapply on full load
+        window.addEventListener("load", updateWatched);
+
+        // Reapply on resize
+        window.addEventListener("resize", debounce(updateWatched));
+
+        handlersInitialized = true;
+    }
+
+    /**
+     * Apply the BalanceText routine on the document and watch the list
+     * of elements.  On window resize, re-apply BalanceText to the given elements
+     *
+     * @param {string|Node|Array-like} elements - the elements to watch after applying BalanceText
+     */
+    function balanceTextAndWatch(elements) {
+        if (typeof elements === "string") {
+            watching.sel.push(elements);
+        } else {
+            forEach(getElementsList(elements), (el) => {
+                watching.el.push(el);
+            });
+        }
+
+        initHandlers();
+        updateWatched();
+    }
+
+    /**
+     * Stop watching elements
+     *
+     * @param {string|Node|Array-like} elements
+     */
+    function unwatch(elements) {
+        if (typeof elements === "string") {
+            watching.sel = watching.sel.filter(el => el !== elements);
+        } else {
+            elements = getElementsList(elements);
+            watching.el = watching.el.filter(el => elements.indexOf(el) === -1);
+        }
+    }
+
+    /**
+     * Treat this app as a polyfill.  Watch for changes to the .balance-text selector
+     */
+    function polyfill() {
+        if (polyfilled) {
+            return;
+        }
+
+        watching.sel.push(".balance-text");
+        initHandlers();
+        polyfilled = true;
+    }
+
+    /**
+     * Public interface
+     *
+     * @param {string|Node|Array-like} elements - elements to balance
+     * @param {Object}                 options  - processing options
+     *  - {boolean} watch - watch elements for resize
+     */
+    function publicInterface(elements, options) {
+        if (!elements) {
+            // empty call means polyfill (watch for changes)
+            polyfill();
+        } else if (options && options.watch === true) {
+            balanceTextAndWatch(elements);
+        } else if (options && options.watch === false) {
+            unwatch(elements);
+        } else {
+            balanceText(elements);
+        }
+    }
+
+    publicInterface.updateWatched = updateWatched;
+
+    if (hasTextWrap()) {
+        noop.updateWatched = noop;
+        return noop;
+    }
+    return publicInterface;
+}));
+});
+
+/**
+  shave - Shave is a javascript plugin that truncates multi-line text within a html element based on set max height
+  @version v5.0.2
+  @link https://github.com/yowainwright/shave#readme
+  @author Jeff Wainwright <yowainwright@gmail.com> (jeffry.in)
+  @license MIT
+**/
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __read(o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+}
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+function generateArrayOfNodes(target) {
+    if (typeof target === 'string') {
+        return __spreadArray([], __read(document.querySelectorAll(target)), false);
+    }
+    else if ('length' in target) {
+        return __spreadArray([], __read(target), false);
+    }
+    else {
+        return [target];
+    }
+}
+function shave(target, maxHeight, opts) {
+    if (opts === void 0) { opts = {}; }
+    if (typeof maxHeight === 'undefined' || isNaN(maxHeight)) {
+        throw Error('maxHeight is required');
+    }
+    var els = generateArrayOfNodes(target);
+    if (!els.length) {
+        return;
+    }
+    var _a = opts.character, character = _a === void 0 ? '…' : _a, _b = opts.classname, classname = _b === void 0 ? 'js-shave' : _b, _c = opts.spaces, initialSpaces = _c === void 0 ? true : _c, _d = opts.charclassname, charclassname = _d === void 0 ? 'js-shave-char' : _d, _e = opts.link, link = _e === void 0 ? {} : _e;
+    /**
+     * @notes
+     * the initialSpaces + spaces variable definition below fixes
+     * a previous bug where spaces being a boolean type wasn't clear
+     * meaning people were using (a string, in example—which is truthy)
+     * hence, doing it this way is a non-breaking change
+     */
+    var spaces = typeof initialSpaces === 'boolean' ? initialSpaces : true;
+    /**
+     * @notes
+     * - create a span or anchor element and assign properties to it
+     * - JSON.stringify is used to support IE8+
+     * - if link.href is not provided, link object properties are ignored
+     */
+    var isLink = link && JSON.stringify(link) !== '{}' && link.href;
+    var shavedTextElType = isLink ? 'a' : 'span';
+    for (var i = 0; i < els.length; i += 1) {
+        var el = els[i];
+        var styles = el.style;
+        var span = el.querySelector('.' + classname);
+        var textProp = el.textContent === undefined ? 'innerText' : 'textContent';
+        // If element text has already been shaved
+        if (span) {
+            // Remove the ellipsis to recapture the original text
+            el.removeChild(el.querySelector('.' + charclassname));
+            el[textProp] = el[textProp]; // eslint-disable-line
+            // nuke span, recombine text
+        }
+        var fullText = el[textProp];
+        var words = spaces ? fullText.split(' ') : fullText;
+        // If 0 or 1 words, we're done
+        if (words.length < 2) {
+            continue;
+        }
+        // Temporarily remove any CSS height for text height calculation
+        var heightStyle = styles.height;
+        styles.height = 'auto';
+        var maxHeightStyle = styles.maxHeight;
+        styles.maxHeight = 'none';
+        // If already short enough, we're done
+        if (el.offsetHeight <= maxHeight) {
+            styles.height = heightStyle;
+            styles.maxHeight = maxHeightStyle;
+            continue;
+        }
+        var textContent = isLink && link.textContent ? link.textContent : character;
+        var shavedTextEl = document.createElement(shavedTextElType);
+        var shavedTextElAttributes = {
+            className: charclassname,
+            textContent: textContent,
+        };
+        for (var property in shavedTextElAttributes) {
+            shavedTextEl[property] = shavedTextElAttributes[property];
+            shavedTextEl.textContent = character;
+        }
+        if (isLink) {
+            for (var linkProperty in link) {
+                shavedTextEl[linkProperty] = link[linkProperty];
+            }
+        }
+        // Binary search for number of words which can fit in allotted height
+        var max = words.length - 1;
+        var min = 0;
+        var pivot = void 0;
+        while (min < max) {
+            pivot = (min + max + 1) >> 1; // eslint-disable-line no-bitwise
+            el[textProp] = spaces
+                ? words.slice(0, pivot).join(' ')
+                : words.slice(0, pivot);
+            el.insertAdjacentElement('beforeend', shavedTextEl);
+            if (el.offsetHeight > maxHeight) {
+                max = pivot - 1;
+            }
+            else {
+                min = pivot;
+            }
+        }
+        el[textProp] = spaces ? words.slice(0, max).join(' ') : words.slice(0, max);
+        el.insertAdjacentElement('beforeend', shavedTextEl);
+        var diff = spaces
+            ? " ".concat(words.slice(max).join(' '))
+            : words.slice(max);
+        var shavedText = document.createTextNode(diff);
+        var elWithShavedText = document.createElement('span');
+        elWithShavedText.classList.add(classname);
+        elWithShavedText.style.display = 'none';
+        elWithShavedText.appendChild(shavedText);
+        el.insertAdjacentElement('beforeend', elWithShavedText);
+        styles.height = heightStyle;
+        styles.maxHeight = maxHeightStyle;
+    }
+}
+
+const swirlTextCss = ".sc-swirl-text-h{display:block;max-width:100%}.sc-swirl-text-h *.sc-swirl-text{box-sizing:border-box}.text.sc-swirl-text{overflow:hidden;margin:0;padding:0}.text--align-start.sc-swirl-text{text-align:start}.text--align-center.sc-swirl-text{text-align:center}.text--align-end.sc-swirl-text{text-align:end}.text--color-default.sc-swirl-text{color:var(--s-text-default)}.text--color-subdued.sc-swirl-text{color:var(--s-text-subdued)}.text--color-critical.sc-swirl-text{color:var(--s-text-critical)}.text--color-success.sc-swirl-text{color:var(--s-text-success)}.text--color-warning.sc-swirl-text{color:var(--s-text-warning)}.text--size-sm.sc-swirl-text{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}.text--size-base.sc-swirl-text{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text--size-base.sc-swirl-text{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text--size-lg.sc-swirl-text{font-size:var(--s-font-size-lg);line-height:var(--s-line-height-lg)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text--size-lg.sc-swirl-text{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}}.text--size-xl.sc-swirl-text{font-size:var(--s-font-size-xl);line-height:var(--s-line-height-xl)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text--size-xl.sc-swirl-text{font-size:var(--s-font-size-lg);line-height:var(--s-line-height-lg)}}.text--size-2xl.sc-swirl-text{font-size:var(--s-font-size-2xl);line-height:var(--s-line-height-2xl)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text--size-2xl.sc-swirl-text{font-size:var(--s-font-size-xl);line-height:var(--s-line-height-xl)}}.text--weight-normal.sc-swirl-text{font-weight:var(--s-font-weight-normal)}.text--weight-medium.sc-swirl-text{font-weight:var(--s-font-weight-medium)}.text--weight-semibold.sc-swirl-text{font-weight:var(--s-font-weight-semibold)}.text--weight-bold.sc-swirl-text{font-weight:var(--s-font-weight-bold)}.text--font-style-normal.sc-swirl-text{font-style:normal}.text--font-style-italic.sc-swirl-text{font-style:italic}.text--font-family-code.sc-swirl-text{font-family:var(--s-font-family-code)}.text--truncate.sc-swirl-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.text--truncate-direction-start.sc-swirl-text{direction:rtl;text-align:left}";
+
+const SwirlText = /*@__PURE__*/ proxyCustomElement(class SwirlText extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.align = "start";
+    this.as = "p";
+    this.balance = undefined;
+    this.color = "default";
+    this.fontFamily = "text";
+    this.fontStyle = "normal";
+    this.lines = undefined;
+    this.size = "base";
+    this.truncate = undefined;
+    this.truncateDirection = "end";
+    this.weight = "normal";
+  }
+  componentDidRender() {
+    this.rebalance();
+    this.handleTruncation();
+  }
+  onWindowResize() {
+    this.rebalance();
+    this.handleTruncation();
+  }
+  handleTruncation() {
+    if (!this.truncate || !Boolean(this.lines) || this.lines === 1) {
+      return;
+    }
+    const lineHeight = +window
+      .getComputedStyle(this.textEl, null)
+      .getPropertyValue("line-height")
+      .replace("px", "");
+    if (lineHeight > 0) {
+      shave(this.textEl, lineHeight * this.lines);
+    }
+  }
+  rebalance() {
+    if (!this.balance || !Boolean(this.textEl)) {
+      return;
+    }
+    balancetext(this.textEl);
+  }
+  render() {
+    const Tag = this.as;
+    const className = classnames("text", `text--align-${this.align}`, `text--color-${this.color}`, `text--font-family-${this.fontFamily}`, `text--font-style-${this.fontStyle}`, `text--size-${this.size}`, `text--truncate-direction-${this.truncateDirection}`, `text--weight-${this.weight}`, {
+      "text--truncate": this.truncate && (!Boolean(this.lines) || this.lines === 1),
+    });
+    return (h(Host, null, h(Tag, { class: className, ref: (el) => (this.textEl = el) }, h("slot", null))));
+  }
+  get el() { return this; }
+  static get style() { return swirlTextCss; }
+}, [6, "swirl-text", {
+    "align": [1],
+    "as": [1],
+    "balance": [4],
+    "color": [1],
+    "fontFamily": [1, "font-family"],
+    "fontStyle": [1, "font-style"],
+    "lines": [2],
+    "size": [1],
+    "truncate": [4],
+    "truncateDirection": [1, "truncate-direction"],
+    "weight": [1]
+  }, [[9, "resize", "onWindowResize"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-text"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-text":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlText);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { SwirlText as S, defineCustomElement as d };