@pacem/pacem-fx 1.0.0-abel

package/dist/bundle/pacem-fx.mjs

@@ -0,0 +1,850 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// packages/fx/dist/esm/index-components.js
+var index_components_exports = {};
+__export(index_components_exports, {
+  Fx: () => index_components_fx_exports
+});
+
+// packages/fx/dist/esm/index-components-fx.js
+var index_components_fx_exports = {};
+__export(index_components_fx_exports, {
+  PacemFxElement: () => PacemFxElement,
+  PacemFxFancyElement: () => PacemFxFancyElement,
+  PacemFxGradientElement: () => PacemFxGradientElement,
+  PacemFxGradientItemElement: () => PacemFxGradientItemElement,
+  PacemFxGradientStopElement: () => PacemFxGradientStopElement,
+  PacemFxHeroElement: () => PacemFxHeroElement,
+  PacemFxLinearGradientElement: () => PacemFxLinearGradientElement,
+  PacemFxListElement: () => PacemFxListElement,
+  PacemFxPulseElement: () => PacemFxPulseElement,
+  PacemFxRadialGradientElement: () => PacemFxRadialGradientElement,
+  PacemFxRippleElement: () => PacemFxRippleElement
+});
+
+// packages/fx/dist/esm/types.js
+import { Watch, PropertyConverters, PacemEventTarget } from "@pacem/pacem-core";
+var __decorate = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var PacemFxElement = class extends PacemEventTarget {
+};
+__decorate([
+  Watch({ converter: PropertyConverters.Element })
+], PacemFxElement.prototype, "target", void 0);
+
+// packages/fx/dist/esm/ripple.js
+import { CustomElement, Defaults, P, ViewChild, Utils, PacemEventTarget as PacemEventTarget2 } from "@pacem/pacem-core";
+import { Point } from "@pacem/pacem-foundation";
+var __decorate2 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var RIPPLE_CSS = "ripple";
+var PacemFxRippleElement = class PacemFxRippleElement2 extends PacemFxElement {
+  constructor() {
+    super(...arguments);
+    this._lock = false;
+    this._remove = false;
+    this._rippleHandler = (e) => {
+      if (this.disabled || this.target instanceof PacemEventTarget2 && this.target.disabled) {
+        return;
+      }
+      if (e instanceof MouseEvent && e.button !== 0) {
+        return;
+      }
+      const rect = Utils.offset(this.target);
+      const style = getComputedStyle(this.target);
+      const css = this.style;
+      css.top = rect.top + "px";
+      css.left = rect.left + "px";
+      css.width = rect.width + "px";
+      css.height = rect.height + "px";
+      css.borderRadius = style.borderRadius;
+      const pointSrc = e.type === "touchstart" ? e.touches[0] : e;
+      const point = { x: pointSrc.pageX, y: pointSrc.pageY };
+      const topLeft = { x: rect.left, y: rect.top }, topRight = { x: rect.left + rect.width, y: rect.top }, bottomLeft = { x: rect.left, y: rect.top + rect.height }, bottomRight = { x: topRight.x, y: bottomLeft.y };
+      const radius = Math.max(Point.distance(point, topLeft), Point.distance(point, topRight), Point.distance(point, bottomRight), Point.distance(point, bottomLeft));
+      const wave = this._wave;
+      wave.style.left = point.x - rect.left - radius + "px";
+      wave.style.top = point.y - rect.top - radius + "px";
+      wave.style.width = wave.style.height = 2 * radius + "px";
+      Utils.addAnimationEndCallback(wave, () => {
+        this._lock = false;
+        this._tryRemove();
+      });
+      this._lock = true;
+      Utils.addClass(wave, "ripple-go");
+    };
+    this._unrippleHandler = (e) => {
+      this._remove = true;
+      this._tryRemove();
+    };
+  }
+  propertyChangedCallback(name, old, val, first) {
+    super.propertyChangedCallback(name, old, val, first);
+    if (name === "target") {
+      if (!Utils.isNull(old)) {
+        this._reset(old);
+      }
+      if (!Utils.isNull(val)) {
+        this._set(val);
+      }
+    }
+  }
+  viewActivatedCallback() {
+    super.viewActivatedCallback();
+    if (!Utils.isNull(this.target))
+      this._set();
+  }
+  disconnectedCallback() {
+    if (!Utils.isNull(this.target))
+      this._reset();
+    super.disconnectedCallback();
+  }
+  _tryRemove() {
+    if (!this._lock && this._remove) {
+      this._remove = false;
+      Utils.removeClass(this._wave, "ripple-go");
+    }
+  }
+  _set(val = this.target) {
+    val.addEventListener("mousedown", this._rippleHandler, false);
+    val.addEventListener("touchstart", this._rippleHandler, false);
+    val.addEventListener("touchend", this._unrippleHandler, false);
+    val.addEventListener("mouseup", this._unrippleHandler, false);
+    val.addEventListener("mousemove", this._unrippleHandler, false);
+  }
+  _reset(old = this.target) {
+    old.removeEventListener("mousedown", this._rippleHandler, false);
+    old.removeEventListener("touchstart", this._rippleHandler, false);
+    old.removeEventListener("touchend", this._unrippleHandler, false);
+    old.removeEventListener("mouseup", this._unrippleHandler, false);
+    old.removeEventListener("mousemove", this._unrippleHandler, false);
+  }
+};
+__decorate2([
+  ViewChild("." + RIPPLE_CSS)
+], PacemFxRippleElement.prototype, "_wave", void 0);
+PacemFxRippleElement = __decorate2([
+  CustomElement({
+    tagName: P + "-fx-ripple",
+    shadow: Defaults.USE_SHADOW_ROOT,
+    template: `<div class="${RIPPLE_CSS}"></div>`
+  })
+], PacemFxRippleElement);
+
+// packages/fx/dist/esm/pulse.js
+import { CustomElement as CustomElement2, Defaults as Defaults2, P as P2, PCSS, ViewChild as ViewChild2, Utils as Utils2, Components } from "@pacem/pacem-core";
+var __decorate3 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var PULSE_CSS = "pulse";
+var SVG_NS = "http://www.w3.org/2000/svg";
+function buildAnimationName(id) {
+  return `${PCSS}-fx-pulse-${id}`;
+}
+function ensureCssAnimation(id, args, rx = "0", ry = rx) {
+  const selector = "style#" + id;
+  const existing = document.querySelector(selector);
+  if (Utils2.isNull(existing)) {
+    const newStyle = document.createElement("style");
+    newStyle.id = id;
+    document.head.appendChild(newStyle);
+  }
+  const css = document.querySelector(selector);
+  const w = args.width, h = args.height, dim = Math.max(w, h), x = 0.5 * (dim - w), y = 0.5 * (dim - h);
+  css.sheet.insertRule(`@keyframes ${buildAnimationName(id)} {
+    0%{
+        opacity: .25; stroke-thickness: 0; rx: ${rx}; ry: ${ry}; x: ${x}px; y: ${y}px; width: ${args.width}px; height: ${args.height}px;
+    }
+    50%{
+        width: ${args.width}px; height: ${args.height}px; transform: scale(1); stroke-width: 10px; rx: ${rx}; ry: ${ry}; opacity: .333; x: ${x}px; y: ${y}px; width: ${w}px; height: ${h}px;
+    }
+    80%{
+        stroke-width: 10px;
+    }
+    100%{
+        opacity: 0; rx: 50%; ry: 50%; transform: scale(2); stroke-width: 0; width: ${dim}px; height: ${dim}px; x: 0; y: 0
+    }
+}`, 0);
+  for (let j = css.sheet.rules.length - 1; j > 0; j--) {
+    css.sheet.deleteRule(j);
+  }
+  return css;
+}
+var PacemFxPulseElement = class PacemFxPulseElement2 extends PacemFxElement {
+  constructor() {
+    super();
+    this._resizeHandler = (e) => {
+      this._pulse(e.detail);
+    };
+    this.#key = Utils2.uniqueCode();
+  }
+  #key;
+  viewActivatedCallback() {
+    super.viewActivatedCallback();
+    this._pulse();
+  }
+  disconnectedCallback() {
+    if (!Utils2.isNull(this._sheet)) {
+      this._sheet.remove();
+      this._sheet = null;
+    }
+    super.disconnectedCallback();
+  }
+  propertyChangedCallback(name, old, val, first) {
+    super.propertyChangedCallback(name, old, val, first);
+    if (name === "disabled" && !first) {
+      this._pulse();
+    }
+  }
+  _pulse(size = this._resize.currentSize) {
+    const inert = Utils2.isNull(this.target) || Utils2.isNull(size) || !(size.height > 0) || !(size.width > 0);
+    this._resize.disabled = this.disabled;
+    if (this.disabled || inert) {
+      Utils2.addClass(this, "pulse-off");
+      return;
+    }
+    Utils2.removeClass(this, "pulse-off");
+    const rect = size;
+    const style = getComputedStyle(this.target);
+    const css = this.style;
+    const dim = Math.max(rect.width, rect.height);
+    css.width = dim + "px";
+    css.height = dim + "px";
+    css.top = rect.top + 0.5 * (rect.height - dim) + "px";
+    css.left = rect.left + 0.5 * (rect.width - dim) + "px";
+    const rect1 = this._rect1, rect2 = this._rect2;
+    const css1 = rect1.style, css2 = rect2.style;
+    this._sheet = ensureCssAnimation(this.#key, size, style.borderTopLeftRadius);
+    const animationName = buildAnimationName(this.#key);
+    css1.animation = css2.animation = `${animationName} both cubic-bezier(0.37, 0, 0.63, 1) 1.25s infinite`;
+    css2.animationDelay = ".175s";
+  }
+};
+__decorate3([
+  ViewChild2(P2 + "-resize")
+], PacemFxPulseElement.prototype, "_resize", void 0);
+__decorate3([
+  ViewChild2("svg")
+], PacemFxPulseElement.prototype, "_svg", void 0);
+__decorate3([
+  ViewChild2("svg > rect[rect1]")
+], PacemFxPulseElement.prototype, "_rect1", void 0);
+__decorate3([
+  ViewChild2("svg > rect[rect2]")
+], PacemFxPulseElement.prototype, "_rect2", void 0);
+PacemFxPulseElement = __decorate3([
+  CustomElement2({
+    tagName: P2 + "-fx-pulse",
+    shadow: Defaults2.USE_SHADOW_ROOT,
+    template: `<${P2}-resize target="{{ :host.target }}" watch-position="true" on-${Components.ResizeEventName}=":host._resizeHandler($event)"></${P2}-resize>
+<svg class="${PULSE_CSS}" xmlns="${SVG_NS}">
+    <rect rect1 /><rect rect2 />
+</svg>`
+  })
+], PacemFxPulseElement);
+
+// packages/fx/dist/esm/hero.js
+import { CustomElement as CustomElement3, Watch as Watch2, PropertyConverters as PropertyConverters2, P as P3, PCSS as PCSS2, Utils as Utils3 } from "@pacem/pacem-core";
+var __decorate4 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var HERO_CSS = PCSS2 + "-hero";
+var TRANSITION = 200;
+var HEROING_IN = "entering";
+var HEROING_OUT = "exiting";
+var HERO_IN = "entered";
+var HERO_OUT = "exited";
+var rectOrElementConverter = {
+  convert: (attr) => {
+    if (attr.trim().startsWith("#"))
+      return PropertyConverters2.Element.convert(attr);
+    return PropertyConverters2.Json.convert(attr);
+  }
+};
+var PacemFxHeroElement = class PacemFxHeroElement2 extends PacemFxElement {
+  propertyChangedCallback(name, old, val, first) {
+    super.propertyChangedCallback(name, old, val, first);
+    if (name === "target" && !Utils3.isNull(old)) {
+      this._resetTarget(old);
+    }
+    if (name === "from" && this.hero && !Utils3.isNull(val)) {
+      this._originalState = this._computeFromState();
+    }
+    if (name === "hero" || name === "target" || name === "goal") {
+      if (!Utils3.isNull(this.target)) {
+        if (this.hero) {
+          this.start();
+        } else {
+          this.reset();
+        }
+      }
+    }
+  }
+  viewActivatedCallback() {
+    super.viewActivatedCallback();
+    if (this.hero && !Utils3.isNull(this.target))
+      this.start();
+  }
+  disconnectedCallback() {
+    if (!Utils3.isNull(this.target))
+      this.reset();
+    super.disconnectedCallback();
+  }
+  _computeFromState() {
+    const tget = this.target, offset = Utils3.offset(tget);
+    if (this.from instanceof Element) {
+      let from = Utils3.offset(this.from);
+      return { x: from.left, y: from.top, width: from.width, height: from.height };
+    } else {
+      return { x: offset.left, y: offset.top, width: offset.width, height: offset.height };
+    }
+  }
+  _resetTarget(tget = this.target) {
+    const style = tget.style;
+    style.top = style.left = style.height = style.width = "";
+    for (let j = 0; j < style.length; j++) {
+      let prop = style.item(j);
+      style[prop] = "";
+    }
+    for (let prop in this._originalStyle) {
+      style[prop] = this._originalStyle[prop];
+    }
+    Utils3.removeClass(tget, HERO_CSS);
+  }
+  reset() {
+    if (Utils3.isNull(this._originalState) || Utils3.isNull(this._targetState)) {
+      return;
+    }
+    this.dispatchEvent(new Event(HEROING_OUT));
+    return this._animate(this._targetState, this._originalState).then(() => {
+      this._resetTarget();
+      this.dispatchEvent(new Event(HERO_OUT));
+    });
+  }
+  start() {
+    if (!this.disabled && !Utils3.isNull(this.target)) {
+      let goal;
+      if (this.to instanceof Element) {
+        let to = Utils3.offset(this.to);
+        goal = { x: to.left, y: to.top, width: to.width, height: to.height };
+      } else {
+        goal = this.to;
+      }
+      const tget = this.target, wSize = Utils3.windowSize, state = goal || { x: 0, y: 0, width: wSize.width, height: wSize.height }, style = tget.style;
+      this._targetState = state;
+      let start = this._originalState = this._computeFromState();
+      this._originalStyle = {};
+      for (let j = 0; j < style.length; j++) {
+        let prop = style.item(j);
+        this._originalStyle[prop] = style[prop];
+      }
+      Utils3.addClass(tget, HERO_CSS);
+      this.dispatchEvent(new Event(HEROING_IN));
+      return this._animate(start, state).then(() => {
+        this.dispatchEvent(new Event(HERO_IN));
+      });
+    }
+    return Promise.resolve();
+  }
+  _animate(from, to) {
+    const tget = this.target, style = tget.style;
+    const scaleX = from.width / to.width, scaleY = from.height / to.height, translateX = from.x - to.x + "px", translateY = from.y - to.y + "px";
+    style.transformOrigin = "0 0";
+    style.transition = "none";
+    style.transform = `translate(${translateX}, ${translateY}) scale(${scaleX}, ${scaleY})`;
+    style.width = to.width + "px";
+    style.height = to.height + "px";
+    style.top = to.y + "px";
+    style.left = to.x + "px";
+    requestAnimationFrame(() => {
+      let duration = this.duration || TRANSITION;
+      style.transition = `transform cubic-bezier(0.445, 0.05, 0.55, 0.95) ${duration}ms, opacity ${duration}ms`;
+      style.transform = `translate(0, 0) scale(1)`;
+    });
+    return Utils3.waitForAnimationEnd(tget, TRANSITION + 10);
+  }
+};
+__decorate4([
+  Watch2({ converter: PropertyConverters2.Boolean })
+], PacemFxHeroElement.prototype, "hero", void 0);
+__decorate4([
+  Watch2({ converter: rectOrElementConverter, emit: false })
+], PacemFxHeroElement.prototype, "to", void 0);
+__decorate4([
+  Watch2({ converter: rectOrElementConverter, emit: false })
+], PacemFxHeroElement.prototype, "from", void 0);
+__decorate4([
+  Watch2({ converter: PropertyConverters2.Number, emit: false })
+], PacemFxHeroElement.prototype, "duration", void 0);
+PacemFxHeroElement = __decorate4([
+  CustomElement3({ tagName: P3 + "-fx-hero" })
+], PacemFxHeroElement);
+
+// packages/fx/dist/esm/list.js
+import { CustomElement as CustomElement4, P as P4, PCSS as PCSS3, Utils as Utils4 } from "@pacem/pacem-core";
+var __decorate5 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var CSS_CLASS = PCSS3 + "-fx-list";
+var PacemFxListElement = class PacemFxListElement2 extends PacemFxElement {
+  constructor() {
+    super(...arguments);
+    this._observed = (items) => {
+      const children = Array.from(this.target.children);
+      for (let item of items) {
+        item.removedNodes.forEach((n) => {
+          if (n instanceof Element) {
+            this.dispatchEvent(new CustomEvent("itemremoved", { detail: n }));
+          }
+        });
+        item.addedNodes.forEach((n, j) => {
+          if (n instanceof Element) {
+            this.dispatchEvent(new CustomEvent("itemadded", { detail: { item: n, index: children.indexOf(n) } }));
+          }
+        });
+      }
+    };
+  }
+  viewActivatedCallback() {
+    super.viewActivatedCallback();
+    if (!Utils4.isNull(this.target)) {
+      this._setup();
+    }
+  }
+  disconnectedCallback() {
+    if (!Utils4.isNull(this._observer)) {
+      this._observer.disconnect();
+    }
+    super.disconnectedCallback();
+  }
+  propertyChangedCallback(name, old, val, first) {
+    super.propertyChangedCallback(name, old, val, first);
+    if (name === "target") {
+      if (old) {
+        this._reset(old);
+      } else {
+        this._setup();
+      }
+    }
+  }
+  _reset(el) {
+    Utils4.removeClass(el, CSS_CLASS);
+    this._observer.disconnect();
+  }
+  _setup() {
+    const target = this.target;
+    Utils4.addClass(target, CSS_CLASS);
+    const obs = this._observer = new MutationObserver(this._observed);
+    obs.observe(target, { childList: true });
+  }
+};
+PacemFxListElement = __decorate5([
+  CustomElement4({
+    tagName: P4 + "-fx-list"
+  })
+], PacemFxListElement);
+
+// packages/fx/dist/esm/gradient.js
+import { CustomElement as CustomElement5, Watch as Watch3, PropertyConverters as PropertyConverters3, P as P5, PCSS as PCSS4, Components as Components2, CustomElementUtils, Utils as Utils5, Debounce } from "@pacem/pacem-core";
+import { Size, Colors } from "@pacem/pacem-foundation";
+var __decorate6 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var GradientChangeEventName = "gradientchange";
+var GradientChangeEvent = class extends Event {
+  constructor() {
+    super(GradientChangeEventName, { cancelable: false, bubbles: false });
+  }
+};
+var SizeOrNumberConverter = {
+  convert: (attr, el) => {
+    try {
+      return Size.parse(attr);
+    } catch {
+      return PropertyConverters3.Number.convert(attr, el);
+    }
+  }
+};
+function pctFormatter(v) {
+  return Math.round(v * 1e3) / 10 + "%";
+}
+var PacemFxGradientStopElement = class PacemFxGradientStopElement2 extends Components2.PacemItemElement {
+  findContainer() {
+    return CustomElementUtils.findAncestor(this, (i) => i instanceof PacemFxGradientItemElement);
+  }
+  propertyChangedCallback(name, old, val, first) {
+    super.propertyChangedCallback(name, old, val, first);
+    if (!first && (name === "offset" || name === "color" || name === "opacity" || name === "disabled" || name === "hide")) {
+      this.dispatchEvent(new GradientChangeEvent());
+    }
+  }
+};
+__decorate6([
+  Watch3({ emit: false, converter: PropertyConverters3.Number })
+], PacemFxGradientStopElement.prototype, "offset", void 0);
+__decorate6([
+  Watch3({ emit: false, converter: PropertyConverters3.String })
+], PacemFxGradientStopElement.prototype, "color", void 0);
+__decorate6([
+  Watch3({ emit: false, converter: PropertyConverters3.Number })
+], PacemFxGradientStopElement.prototype, "opacity", void 0);
+PacemFxGradientStopElement = __decorate6([
+  CustomElement5({ tagName: P5 + "-fx-gradient-stop" })
+], PacemFxGradientStopElement);
+var PacemFxGradientItemElement = class extends Components2.PacemCrossItemsContainerElement {
+  constructor() {
+    super(...arguments);
+    this._dispatchGradientChangeHandler = (e) => {
+      this._dispatchGradientChange();
+    };
+  }
+  validate(item) {
+    return item instanceof PacemFxGradientStopElement;
+  }
+  register(item) {
+    const registered = super.register(item);
+    if (registered) {
+      item.addEventListener(GradientChangeEventName, this._dispatchGradientChangeHandler, false);
+    }
+    return registered;
+  }
+  unregister(item) {
+    const unregistered = super.unregister(item);
+    if (unregistered) {
+      item.removeEventListener(GradientChangeEventName, this._dispatchGradientChangeHandler, false);
+    }
+    return unregistered;
+  }
+  propertyChangedCallback(name, old, val, first) {
+    super.propertyChangedCallback(name, old, val, first);
+    if (!first && this.doesPropertyTriggerGradientChange(name)) {
+      this._dispatchGradientChange();
+    }
+  }
+  _dispatchGradientChange() {
+    this.dispatchEvent(new GradientChangeEvent());
+  }
+  buildColor(color, opacity) {
+    if (opacity >= 0 && opacity <= 1) {
+      const clr = Colors.parse(color);
+      return Colors.stringify(Utils5.extend(clr, { a: opacity }));
+    }
+    return color;
+  }
+};
+var PacemFxRadialGradientElement = class PacemFxRadialGradientElement2 extends PacemFxGradientItemElement {
+  doesPropertyTriggerGradientChange(prop) {
+    return ["shape", "size", "center", "items", "hide", "disabled"].indexOf(prop) >= 0;
+  }
+  buildGradient() {
+    const items = this.items;
+    if (Utils5.isNullOrEmpty(items)) {
+      return "";
+    }
+    const shape = this.shape === "circle" ? "circle" : "ellipse";
+    const center = this.center ?? { x: 0.5, y: 0.5 };
+    const size = this.size;
+    let dim = "";
+    if (!Utils5.isNullOrEmpty(size)) {
+      if (typeof size === "number") {
+        dim = `${size}px`;
+      } else {
+        dim = `${pctFormatter(size.width / 2)} ${pctFormatter(size.height / 2)}`;
+      }
+    }
+    let stops = [];
+    for (let { offset, color, hide, disabled, opacity } of items) {
+      if (hide || disabled) {
+        continue;
+      }
+      const clr = this.buildColor(color, opacity);
+      stops.push(`${clr} ${pctFormatter(offset)}`);
+    }
+    return `radial-gradient(${shape} ${dim} at ${pctFormatter(center.x)} ${pctFormatter(center.y)} in oklab, ${stops.join(", ")})`;
+  }
+};
+__decorate6([
+  Watch3({ emit: false, converter: PropertyConverters3.String })
+], PacemFxRadialGradientElement.prototype, "shape", void 0);
+__decorate6([
+  Watch3({ emit: false, converter: PropertyConverters3.Point })
+], PacemFxRadialGradientElement.prototype, "center", void 0);
+__decorate6([
+  Watch3({ emit: false, converter: SizeOrNumberConverter })
+], PacemFxRadialGradientElement.prototype, "size", void 0);
+PacemFxRadialGradientElement = __decorate6([
+  CustomElement5({ tagName: P5 + "-fx-gradient-radial" })
+], PacemFxRadialGradientElement);
+var PacemFxLinearGradientElement = class PacemFxLinearGradientElement2 extends PacemFxGradientItemElement {
+  doesPropertyTriggerGradientChange(prop) {
+    return ["angle", "items", "hide", "disabled"].indexOf(prop) >= 0;
+  }
+  buildGradient() {
+    const items = this.items;
+    if (Utils5.isNullOrEmpty(items)) {
+      return "";
+    }
+    const angle = this.angle ?? 0;
+    let stops = [];
+    for (let { offset, color, hide, disabled, opacity } of items) {
+      if (hide || disabled) {
+        continue;
+      }
+      const clr = this.buildColor(color, opacity);
+      stops.push(`${clr} ${pctFormatter(offset)}`);
+    }
+    return `linear-gradient(${angle}deg in oklab, ${stops.join(", ")})`;
+  }
+};
+__decorate6([
+  Watch3({ emit: false, converter: PropertyConverters3.Number })
+], PacemFxLinearGradientElement.prototype, "angle", void 0);
+PacemFxLinearGradientElement = __decorate6([
+  CustomElement5({ tagName: P5 + "-fx-gradient-linear" })
+], PacemFxLinearGradientElement);
+var PacemFxGradientElement = class PacemFxGradientElement2 extends Components2.PacemItemsContainerElement {
+  constructor() {
+    super(...arguments);
+    this._gradientChangeHandler = (e) => {
+      this._buildGradient();
+    };
+  }
+  validate(item) {
+    return item instanceof PacemFxGradientItemElement;
+  }
+  register(item) {
+    const registered = super.register(item);
+    if (registered) {
+      item.addEventListener(GradientChangeEventName, this._gradientChangeHandler, false);
+    }
+    return registered;
+  }
+  unregister(item) {
+    const unregistered = super.unregister(item);
+    if (unregistered) {
+      item.removeEventListener(GradientChangeEventName, this._gradientChangeHandler, false);
+    }
+    return unregistered;
+  }
+  viewActivatedCallback() {
+    super.viewActivatedCallback();
+    this._buildGradient();
+  }
+  propertyChangedCallback(name, old, val, first) {
+    super.propertyChangedCallback(name, old, val, first);
+    if (!first) {
+      switch (name) {
+        case "target":
+          if (old) {
+            this._removeGradient(old);
+          }
+        case "mode":
+        case "disabled":
+          this._buildGradient();
+          break;
+      }
+    }
+  }
+  _removeGradient(tget) {
+    Utils5.removeClass(tget, PCSS4 + "-fx-gradient-text");
+    Utils5.removeClass(tget, PCSS4 + "-fx-gradient-fill");
+    tget.style.backgroundImage = "";
+  }
+  _buildGradient() {
+    const tget = this.target;
+    if (Utils5.isNull(tget)) {
+      return;
+    }
+    let gradients = "";
+    const items = this.disabled ? [] : this.items ?? [];
+    for (let item of items) {
+      if (item.hide || item.disabled) {
+        continue;
+      }
+      const gradient = item.buildGradient();
+      if (Utils5.isNullOrEmpty(gradient)) {
+        continue;
+      }
+      gradients += gradient;
+      if (!gradients.trim().endsWith(",")) {
+        gradients += ",";
+      }
+    }
+    if (!Utils5.isNullOrEmpty(gradients)) {
+      const t = PCSS4 + "-fx-gradient-text", f = PCSS4 + "-fx-gradient-fill";
+      const ist = this.mode === "text";
+      Utils5.removeClass(tget, ist ? f : t);
+      Utils5.addClass(tget, ist ? t : f);
+      tget.style.backgroundImage = gradients.substring(0, gradients.length - 1);
+    } else {
+      this._removeGradient(tget);
+    }
+  }
+};
+__decorate6([
+  Watch3({ converter: PropertyConverters3.Element })
+], PacemFxGradientElement.prototype, "target", void 0);
+__decorate6([
+  Watch3({ converter: PropertyConverters3.String })
+], PacemFxGradientElement.prototype, "mode", void 0);
+__decorate6([
+  Debounce(true)
+], PacemFxGradientElement.prototype, "_buildGradient", null);
+PacemFxGradientElement = __decorate6([
+  CustomElement5({ tagName: P5 + "-fx-gradient" })
+], PacemFxGradientElement);
+
+// packages/fx/dist/esm/fancy.js
+import { CustomElement as CustomElement6, Watch as Watch4, PropertyConverters as PropertyConverters4, P as P6, PCSS as PCSS5, Utils as Utils6, PropertyChangeEvent } from "@pacem/pacem-core";
+var __decorate7 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var FANCY_CSS = PCSS5 + "-fancy";
+var FANCIFY_CSS = PCSS5 + "-fancify";
+var DEFAULT_GAP = 20;
+var PacemFxFancyElement = class PacemFxFancyElement2 extends PacemFxElement {
+  constructor() {
+    super(...arguments);
+    this._progress = 0;
+    this._started = false;
+  }
+  get progress() {
+    return this._progress;
+  }
+  get started() {
+    return this._started;
+  }
+  propertyChangedCallback(name, old, val, first) {
+    super.propertyChangedCallback(name, old, val, first);
+    if (name === "fancify" || name === "target") {
+      if (!Utils6.isNull(this.target)) {
+        if (this.fancify) {
+          this.start();
+        } else {
+          this._reset();
+        }
+      }
+    }
+  }
+  viewActivatedCallback() {
+    super.viewActivatedCallback();
+    if (this.fancify && !Utils6.isNull(this.target))
+      this.start();
+  }
+  disconnectedCallback() {
+    cancelAnimationFrame(this._handle);
+    clearTimeout(this._handle1);
+    if (!Utils6.isNull(this.target))
+      this._reset();
+    super.disconnectedCallback();
+  }
+  _reset() {
+    Utils6.removeClass(this.target, FANCY_CSS);
+    if (this._started) {
+      this.dispatchEvent(new PropertyChangeEvent({ propertyName: "started", oldValue: this._started, currentValue: this._started = false }));
+    }
+    this.dispatchEvent(new PropertyChangeEvent({ propertyName: "progress", oldValue: this._progress, currentValue: this._progress = 0 }));
+    if (Utils6.isNull(this._originalContent))
+      this._originalContent = this.target.innerHTML;
+    else
+      this.target.innerHTML = this._originalContent;
+  }
+  _parse() {
+    let n, a = [], walker = document.createTreeWalker(this.target, NodeFilter.SHOW_TEXT);
+    while (n = walker.nextNode()) {
+      if (n.textContent) {
+        a.push(n);
+      }
+    }
+    this._textNodes = a;
+  }
+  start() {
+    if (!this.disabled) {
+      this._reset();
+      this._parse();
+      this._startShow();
+      this._handle1 = setTimeout(() => {
+        this.dispatchEvent(new PropertyChangeEvent({ propertyName: "started", oldValue: this._started, currentValue: this._started = true }));
+      }, this.delay || 0);
+    }
+  }
+  _startShow(ndx = 0) {
+    Utils6.addClass(this.target, FANCY_CSS);
+    const trunks = this._textNodes, length = trunks.length;
+    this._fancify(trunks[ndx]);
+    const old = this._progress;
+    ndx++;
+    const curr = this._progress = ndx / length;
+    this.dispatchEvent(new PropertyChangeEvent({ propertyName: "progress", oldValue: old, currentValue: curr }));
+    if (ndx < length) {
+      this._handle = requestAnimationFrame(() => {
+        this._startShow(ndx);
+      });
+    }
+  }
+  _fancify(node) {
+    const content = node.textContent;
+    if (Utils6.isNullOrEmpty(content) || !/[^\s]/.test(content)) {
+      return;
+    }
+    const leftPad = /^\s/.test(content), rightPad = /\s$/.test(content);
+    node.textContent = "";
+    const words = content.trim().split(" "), gap = this.gap || DEFAULT_GAP, delay = this.delay || 0;
+    let j = 0;
+    for (let word of words) {
+      var span = document.createElement("span");
+      span.className = FANCIFY_CSS;
+      span.style.animationDelay = `${delay + j * gap}ms`;
+      if (leftPad || j > 0)
+        node.parentElement.insertBefore(document.createTextNode(" "), node);
+      span.textContent = word;
+      node.parentElement.insertBefore(span, node);
+      j++;
+    }
+    if (rightPad)
+      node.parentElement.insertBefore(document.createTextNode(" "), node);
+  }
+};
+__decorate7([
+  Watch4({ converter: PropertyConverters4.Boolean })
+], PacemFxFancyElement.prototype, "fancify", void 0);
+__decorate7([
+  Watch4({ converter: PropertyConverters4.Number })
+], PacemFxFancyElement.prototype, "delay", void 0);
+__decorate7([
+  Watch4({ converter: PropertyConverters4.Number })
+], PacemFxFancyElement.prototype, "gap", void 0);
+PacemFxFancyElement = __decorate7([
+  CustomElement6({ tagName: P6 + "-fx-fancy" })
+], PacemFxFancyElement);
+export {
+  index_components_exports as Components
+};
+//# sourceMappingURL=pacem-fx.mjs.map