@getflip/swirl-components 0.34.2 → 0.34.3

package/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-03-31T10:23:07",
+  "timestamp": "2023-04-03T10:09:33",
   "compiler": {
     "name": "@stencil/core",
     "version": "3.0.0",

package/dist/cjs/swirl-text.cjs.entry.js

@@ -6,6 +6,169 @@ const index = require('./index-83363034.js');
 const index$1 = require('./index-2ddd0598.js');
 const balancetext = require('./balancetext-562c7a48.js');
 
+/**
+  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--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--truncate.sc-swirl-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}";
 
 const SwirlText = class {
@@ -23,9 +186,23 @@ const SwirlText = class {
   }
   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)) {
@@ -35,16 +212,10 @@ const SwirlText = class {
   }
   render() {
     const Tag = this.as;
-    const styles = Boolean(this.lines)
-      ? {
-        display: "-webkit-box",
-        "-webkit-line-clamp": String(this.lines),
-        "-webkit-box-orient": "vertical",
-        whiteSpace: "normal",
-      }
-      : undefined;
-    const className = index$1.classnames("text", `text--align-${this.align}`, `text--color-${this.color}`, `text--font-style-${this.fontStyle}`, `text--size-${this.size}`, `text--weight-${this.weight}`, { "text--truncate": this.truncate });
-    return (index.h(index.Host, null, index.h(Tag, { class: className, ref: (el) => (this.textEl = el), style: styles }, index.h("slot", null))));
+    const className = index$1.classnames("text", `text--align-${this.align}`, `text--color-${this.color}`, `text--font-style-${this.fontStyle}`, `text--size-${this.size}`, `text--weight-${this.weight}`, {
+      "text--truncate": this.truncate && (!Boolean(this.lines) || this.lines === 1),
+    });
+    return (index.h(index.Host, null, index.h(Tag, { class: className, ref: (el) => (this.textEl = el) }, index.h("slot", null))));
   }
   get el() { return index.getElement(this); }
 };